Wireframes are important as they create a loose grid that similar pages can follow. It means code and designs can be re-used throughout creating consistency and saving the web developers time. The separate layouts that need to be designed for this brief are...
- Home page
- Shop
- Product info page
- Shopping cart
- Contact/info pages
I decided 3 basic layout spreads will create a consistent website that people will fins easy to navigate.
This second wireframe shows a layout that shows a range of options/products/competitions etc. I decided using a square format for each section rather than different formats so it looks more regulated. Having a standard format throughout the website allows the web developers to create a template thats easily edited as things change rather than each element needing to be bespoke and designed specifically.
The third and final wireframe is continuous of the square format theme. This is the clickthrough page from any of the smaller options, a larger image and a larger description/amount of information.
The wireframes are all created to 'float' freely above the video background. This allows the information to display its-self boldly with the highest visual priority whilst the background interacts with the user and draws them in, almost in a hypnotic way.
From the design of the standard desktop wireframes I decided to secondly design the ones for mobile. The tablet wireframes can then be a midway point between the two.
The wireframe entrance page for mobile will work the same as the desktop, with a link to the pre-order album as the first thing you see. But instead of having a large side bar it has a slimmer one, when you click on the side bar it extends outwards across the page displaying the different pages you can navigate to.
This wireframe shows the alternative to the multiple box layout in desktop format. The layout allows you to scroll down the page to see each option. Each square will have a small tab next to it telling you what each link/product is.
When you click on any of the squares it'll link to this next style of page. The page displays the image at its largest size and includes the full description/information below.
This wireframe shows what the menu side bar will look like when clicked/touched and expands across the page. When the user either clicks onto a link or back onto the empty page behind this menu will reduce back in size to the slim sidebar.
The shopping basket on the desktop layout is located in the top right hand corner. But in the case of this smaller mobile layout theres no room for this, instead the basket will be located on the bottom tab of this pull out menu bar.
Lastly the tablet wireframes show the most effective middle ground between the desktop and mobile layouts. It still uses the thin sidebar alike the mobile, but can allow for multiple squares rather than one across.
This shows the next tablet wireframe. It's a middleground balance between the desktop layout that has 3 squares per width and the mobile that has one. As you can see in both the mobile and tablet layouts they include tabs showing the name of each product/link as these need to be clearly stated without clicking; yet on the desktop layout 'hover' is enabled with the use of a mouse in which case the information will appear when the mouse hovers over each image.
Lastly the large format wireframe design is consistent with the mobile design once again, showing the image at its largest size and allowing for text/description below. The side bar/navigation bar along the side within the tablet wireframes is also consistent with that of the mobiles design, when clicked upon it will be the same design as that of the desktops.
No comments:
Post a Comment