PWA with WordPress Without Coding — Part 4/6
Designing / Wire-framing
Page-Builder workflow has two key steps:
- Wire-framing and content design
- Implementing via builder
Before we sharpen our pencils and take off our pen caps, a quick reminder of mobile-first and mobile-first vs responsive design. Well.. two quick reminders(:-p):
Let’s watch just one more design video — “The User is Drunk UX”. (PS: I found this in the elementary OS HIG — Wonderful read!)
Ok! We’re prepared now. Get your weapons! A set of color pencils, some ball pens, and printouts of some sneakpeekit mobile grids…
SneakPeekit Grids
I have searched for printable templates for months before I finally found them at GDDIndia. Finally having found them, I will give them an extra special mention. They are extremely helpful. Just download, print, and get prototyping!
visit: http://sneakpeekit.com/
Design Considerations:
I am not a very good designer. These are some of my feelings/considerations that I kept in mind while making decisions during my design process:
- I will not include a call to action in the first section. The first screen should put the users at ease and encourage them to know more. We aren’t welcoming our users properly if our header doesn’t do that.
A proper welcome is the Indian way of design. - The most important question our users will have, is “Will they be able to treat me?” this we answer with a simple list of diseases that we have already cured. If the visitor decides to get in touch at his point, the button allows to directly call the doctor (my mom, she’s the best!) without any friction.
- Next we need to address the secondary curiosities like “how it works”, “what is the secret sauce” etc. This we do with a simple infographic and some words. Words are the enemy of attention. Content design is one of the most important skills in this era.
Flesch-Kincaid Readability Tests are a reliable scale for measuring readability. - Next we need to engage people and provide them access to our knowledge. We will keep sharing all our knowledge for free. A post carousel, with a “read more” button that leads to the blog page is a tried and tested solution.
- We finally leave the users with some basic contact details and a default footer that we may change later.
This leads our wire frame to look somewhat like this:
We have a final wire frame for our front page. For keeping things simple, we will have just three pages:
- Home
- Blog -> Us, sharing our knowledge
- News -> External publications, announcements, etc.
Blog and News will be taken care of by the theme.
- Blog will be set as the page to show all posts
- News will be set to display the posts from a certain category called “news”.
With our wireframe complete, let’s implement the Home Page in the next part of this series. We will watch a video to learn Elementor and describe the elements that we used to implement our design.
Series Index:
- Making a PWA with WordPress Without Code — Part 1/6
Introduction
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-from-scratch-part-1-sans-code-69c1b9cbf955 - Making a PWA with WordPress Without Code — Part 2/6
HTTPS On Shared Hosting
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-1-d1fa54d9a120 - Making a PWA with WordPress Without Code — Part 3/6
Adding Themes and Plugins
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-2-14eec9349a3 - Making a PWA with WordPress Without Code — Part 4/6
Design/Wireframing
<here> - Making a PWA with WordPress Without Code — Part 5/6
The Home Page
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-4-4a024606d04f - Making a PWA with WordPress Without Code — Part 6/6
End Results
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-5-8290b0077132
