Designing for the Future - Progressive Web Apps (PWAs)

Photo by Christopher Gower on Unsplash

PWAs are not apps in the same way that traditional mobile apps are; but instead, they are applications that run on a browser yet function like a desktop or mobile application. Google was the original pioneer of the PWAs.

How to Design for PWAs

Designing a PWA requires a specific mindset: Forget everything you know about conventional web design in terms of visual design and interaction patterns, and instead imagine you’re designing a native app.

Pay attention to the details of native apps, since they have given users expectations around touch interactions and information hierarchy which should be matched in PWAs.

  • Screen transitions should be fast and shouldn’t be affected by blocking on the network
  • Tappable areas should give users touch feedback
  • Accidentally touching an element while scrolling shouldn’t trigger touch feedback
  • Touch interactions should be implemented very well, or not at all
  • Content shouldn’t jump as the page loads
  • A page should maintain its scroll position if a user presses “back” to revisit it
  • Buttons and “non-content” shouldn’t be selectable
  • Inputs shouldn’t be obscured by the keyboard when it expands
  • It should be easy for users to share page content
  • Use system fonts
  • Avoid overly “web-like” design

Ultimately, as a designer, it’s your job to bring the best possible digital design solutions to your users. PWAs are a great middle ground for designers (and their respective companies/clients) to consider, as they offer speed, efficiency and familiarity to users; as well as flexibility for your company or client.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

10 free resources for learning graphic design

Best Web Design Inspiration — Dashboards — #9

Easy way to the Blend tool in Illustrator

A little introduction to UI/UX

Sustainable tradition with fashion

App Design Inspiration — #19

vr color picker

Ironhack Bootcamp pre-work Challenge 1: Design Thinking

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sanam B.

Sanam B.

More from Medium

Building FilmChain’s Design System with Storybook and Chromatic

Echo VR Patch Notes | January 24, 2022

Web 3.0: Your next internet experience

Meet Metablox, a gameful blockchain app powered by real-life memories

photos