How to make a PWA or Progressive Web App — A beginner’s guide
Here’s a quick tutorial for designers and project leaders who want to make a PWA from scratch and launch without coding.
We’ve said it before, and we’ll say it again: Progressive Web Apps, or PWAs, are the future. They’re fast, easy to share, offer a better UX on mobile than regular websites, and let you skip the app stores’ submission process — not to mention app store commissions.
They’re also very easy and probably way cheaper to launch than you might think if you’re using a no-code builder like Designware. Here’s how it works.
How to design a Progressive Web App
Designing your PWA will be by far where you’ll spend most of your time. However, tons of great app design solutions on the market can help you streamline the process, which should — at a high level — look like the following:
• Research. Start by researching existing PWAs and native apps in your industry, and create a mood board. What look-and-feel do you like the most? What layout do you feel is the easiest to navigate? What are the features going on your must-have list? Feel free to check this list of PWAs examples and case studies for inspiration.
• Mockup. Starting from scratch or using templates, create mockups for each screen of your PWA. If you’re using Designware, those don’t necessarily need to be high-fidelity mockups since our editor will allow you to edit everything on the go, to the pixel. But you should have an accurate sense of which components are needed for each page and how pages link to each other. You should also map out what the main blocks making up your pages should look like on mobile vs. desktop. That last step will help you make your app fully responsive in record time.
• Assemble. Pick a visual builder that supports PWAs and start assembling your pages according to your mockups. If you’re new to design software, it’s best to start with a templated solution such as Glide or Softr. If you’re looking for more design control and willing to spend more time customizing your app, then Designware is the best option. At this stage, you’re not only bringing your mockup to life: you’re also making sure your app adapts to all screen sizes and devices. If you’re assembling your app with Designware, we recommend this quick tutorial to make sure you have a fully responsive design from the get-go.
How to publish a Progressive Web App in Designware
This part of the tutorial is specific to Designware.
Once your design is ready, open the right-side panel and click on publish.
You can design everything for free during your project trial, but you’ll need a subscription to Designware to launch your PWA. PWAs are included in our most affordable plan, which is $23 per month if you pay annually.
The Publish button will open this short form:
All you need to do is pick a name, upload two images and click “Make a PWA.” The first image will be your website favicon: it’s the icon your users will see in the browser tab when discovering your PWA online.
The second image is the app icon that users will see once they download your PWA to their phone, tablet, or computer.
Once you’ve clicked on “Save,” a website is created. It will take a few minutes to become visible on the web. All projects come with a default designware.io web address, but you can also connect to a custom domain if you have one.
Once the PWA is live, a checkmark will appear next to the URL on the right-side panel:
Open it on a new page, and you will see a small download icon in your browser bar.
Your visitors can now add your PWA to their desktop or phone home screen to browse it offline and have it run full screen, just like a native app.
And that’s it! You have a fully functioning PWA.
About design
Now that no-code builders let us skip the coding part, design becomes the most critical skill you need to create engaging web apps (or any digital experience.)
And not everyone is a designer. At Designware, we offer a variety of templates to help you get started. But if you want a more custom Progressive Web App and are not a designer yourself, the easiest way might be to outsource.
You can find tons of highly talented UI/UX freelance designers and agencies on websites like Fiverr or Clutch. And if your budget is tight, remember that outsourcing only the design to them is still a much more affordable option than hiring developers to custom code your web app.
Our advice: check their portfolio to make sure they’ve worked on projects that are similar to yours, and ask how comfortable they are with no-code app builders.
And if you’re not sure who to go to, feel free to reach out to us. We’ll be happy to recommend 3rd party designers that would be a good fit for your project.
