LAB

« back to LAB posts index

Dawn theme posts

Wireframe

Let's look at Dawn theme' x-ray

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.

Theme pages

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:

  1. Home page
  2. Collections list
  3. Collections
  4. Products
  5. Card
  6. Check out
  7. Blogs
  8. Contact
  9. Password

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.

Dawn_before

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
Dawn_before Dawn_before Dawn_before Dawn_before
  1. Announcement bar

  2. Header

  3. Image banner

  4. Rich Text

  5. Featured Collection

  6. Collage

  7. Collection list

  8. Image with text

  9. Video

  10. Footer

  11. Product grid

  12. Product information

  13. 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.

« back to LAB posts index