10 ACT: Design & wireframe mock-up for your webshop

https://marketingyourwebshop.webnode.nl/_files/200000063-d5602d753a/brainstorming.jpg

 

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
  1. Copy a screenshot and link to the chosen design into your activity webpage.
  2. 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