OUGD504 - Studio Brief 2 - Responsive Version and Type adjustments

Considerations after Feedback

Adjustments to type 

When looking at all the point sizes for the different elements within the design were consistent using mainly point sizes of 20pt, 15pt, 10pt, 8pt and 6pt and followed a system of:

 Buttons 15pt 

Materials Bar Titles 20pt

Materials Bar drop down 10pt 

Headings for main pages and popups 20pt 

Subheadings in Pop Ups 15pt

Titles for text box's 10pt   

Body text 8pt 

Body text in drop down text box's 8pt  

Text on Pop up drop down box's 6pt 

However it was found that there were a few anomalies within the design which were changed.

The body text for check boxes were different on some pop ups so these were all made to be 10pt making it the same as the titles of the text box and increasing its importance within the pop up. 

On the Basket pop up it was found that the shipping and collection details were in 6pt so these were changed to 8pt to reflect the body text within the rest of the design, whilst being smaller than the 'shipping' and 'collection' titles at 10 pt.

Similarly in the checkout section the shipping and collection sections were changed so that the titles were 10 pt and information 8pt.

It was suggested that perhaps the pay as guest text was too small. It was also found that the background for this was not white but a light grey so this was changed to white to be consistent with other elements.

The pay as guest button was increased to 15pt from 10pt to reflect all the other checkout buttons, however this meant that the button had to be made bigger to compensate, meaning it was now no longer the same size as the other buttons. It was decided that keeping the button at 10pt makes the button size consistent with other elements and places emphasis on signing up or logging in rather than not joining the site.

Adjusted Areas within Design 

Responsive Version for Iphone 

After feedback from the final crit it was suggested that considering how it would look on other devices would be important.

The same 3 x 5 grid system was used to create the responsive version of the website, however this  was adapted to fit the screen size of an Iphone. The most obvious changes to the design are that of the search bar and materials bar. In the original website, these stretched across the whole site, however to make them suitable for a smaller screen the bars content was compacted and the thickness of the bar, increased to make them large enough to interact with, without clicking on anything else. Moving the 'trending ideas' and 'featured products' titles above the listings allowed for three products to be shown on the screen matching the website.