10 ACT: Design & wireframe mock-up for your webshop
Goal
- Find a style / look for your webshop.
- Learn the basics about working with a wireframe tool by designing your homepage layout
- Become aware of the need for responsive website design supporting different screen sizes
Design style
- Choose one of the 20 sample designs on previous pages or another sample design on https://www.shopify.com/examples or any other design you come accross and matches your customer needs
- Copy a screenshot and link to the chosen design into your activity webpage.
- How does this design fit your customer needs? Explain your choice.
Wireframe mock-up
- Select one of the wireframe design tools as mentioned on page 5. You may use what you like, as long as it is a true wireframing tool (so no powerpoint or other drawing tool). Make sure you finish your work on time if it has a time-bombed free trial period. And take sufficient screenshots of your work.
- Learn to work with it.
- Wireframe the homepage of your website as it should look on a standard screen,
- and as it should look on a smartphone screen in portret mode
- Write some collateral explaining your reasoning while building this design
Proof
- Create subpage "ACT 4.B design & wireframe mock-up for your webshop"
Title: Design
- Link to sample design you get inspiration from
- screenshot of this sample design
- Explain how this design supports your concept and will be attractive towards your customers
Title: Wireframe
- Mention name and link of wireframe tool used
- Screenshot or embedded access to wireframe mock-up of the homepage of your website as it should look on a standard screen,
- and as it should look on a smartphone screen in portret mode
- Write out the reasoning behind your design
Put your answers on the webpage