After designing the wireframes for coffee culture on the smallest device – mobile, I'm scaling up to the tablet version of the wireframes.
As previously mentioned, I'm designing from the smallest to the largest screen. Doing so allows for easier manipulation of the content on the page. It would be more of a hassle from try and cram a full desktop website's content onto a tiny mobile screen, it would result in a ridiculous scrolling page, with endless content stacked on top of each other. Designing upwards helps relieve this.
The about section of the website, see below to see the splash/home section, has been upscaled to include an image, in comparison to the mobile version. Which originally had the image stacked below it to break up the content. It also shows the condensed version of the body copy in a single column.
When you turn the tablet on it's side, increasing the width of the page, the page readjusts it's content. Taking advantage of the space, and conforming to the width. The page transforms into a twelve (3 main areas) column grid from an eight (2 main areas) column grid. Two sections of type and an image. The copy has expanded from it's condensed mode, displaying it's entirety on the page.
The menu section of the website adjusts itself to fit to the larger screen width, similarly to the other sections of the website. The buttons for the menus expand into buttons with images to indicate what they content, and sell the products. Also sitting side by side, rather than stacked to fit the page.
The slash/landing section of the website will adjust it's width and height to fit the size of the screen. On this version of the page, the power scroll navigation menu has been condensed into the form of a hamburger menu. The background will be a HMTL5 video – where the connection allows.
Rotating the tablet into the landscape mode, the website's content will readdress. So the main HTML5 video fills the screen. With the logo, in white, overlaying the video. With most tablets being an almost 16:9 ratio, landscape screens will complement the video much better.
At the larger width, the hamburger menu will also disappear, the menu, as it has the space to house all the options, rather than them being crammed together.
Leave your comment