OUGD603: Brief 04 — Svpply - Creating Wireframes


After realising the difficulty of Adobe Muse, and after speaking to a coder, it seems the best way of developing the website is using Adobe Photoshop, for a coder to code. Obviously before going straight into Photoshop, it was essential to create wireframes: 

Home: Users get a sample of what's on the site, as seen in the boxes. There will also be a new arrivals section and a sign up section. The top bar has the 6 options for different types of items available on Svpply. Next to them is a profile button, as well as a feed and search button. 


Under New Arrivals: The list of options for each subcategory, in a 5 column grid. I intend on changing this to a four column grid, 5 looks too busy. 


Within each of the pages above, there are individual searches, as seen below. These will follow the same grid system, but with more specific searches, like 'brand', 'size', 'price' and 'colour': 


Below are the 'profile' and 'collections' pages. Each user will have their own profile, which shows the items they want, own and 'collections'. Collections are basically groups of products saved under the same section, e.g. 'Favourite winter clothes' or 'Decor ideas':


Each specific item will have their own more detail page, as seen in the 'details' page below. On the right is the 'feed' where you can see updates from other people you follow, as well as shops you follow:


Below are some ideas on the mobile / tablet version. Both will use a single column grid, as displayed with the homepage and details on an item below. The same drop down menu will be used as originally seen on Svpply: 


Thursday 2 April 2015 by Unknown
Categories: , | Leave a comment

Leave a Reply