8 Dez, 2021
A wireframe is a great tool to understand a website skeleton, as the business owner, designer or developer you have a crucial role of managing the budget, defining the scope and requirements during the design process. Wireframes can help you see the skeleton of your website, quantify the content and features that you will need, define what they will do and how they play together before going deep into the development phase.
In a first approach of a website development we should list the web pages that we will have, in the shopify dawn theme we can have the following web pages:
You can create others pages outside these categories, however the ones listed above are the standard and most common in most ecommerce websites, so they are what a user expects to find.
Inside each page you have two fix sections, the Header, on top of the page, and Footer, on the bottom.
In the middle you will find what it is usually call the body of the page.
In the middle you will find what it is usually call the body of the page.
Above the header you can insert an announcement bar, to highlight a promotion or other information to the users.
In the wireframe bellow you can see some of the sections that compose the Home page, Collections list, Collections and Products pages.
Home Page |
Collections List |
Collections |
Products |
Announcement bar
Header
Image banner
Rich Text
Featured Collection
Collage
Collection list
Image with text
Video
Footer
Product grid
Product information
Product recommendation
Shopify Dawn theme allows you to add other sections besides the ones mention in numbers 3 to 9 - such as, multicolumn, email sign up, blog post.