OUGD504 - Design for Screen - Grid

The One Roof website has been designed for viewing from a desktop. This is because in both the online survey and group crit over 95% of all participants said that they preferred viewing student housing websites from a laptop or computer for various reasons including the fact that they could view larger images without having to zoom in etc. 

When designing for a website the first thing I had to consider was the optimum size of most desktops and what could be most accessible to the current user. The current top screen resolutions worldwide are as follow:

And for the UK show a similar trend: 

As there are hundreds of different variations for screen resolutions the design had to be created using a number of pixels that would work across a range of devices but not slow the website down. I opted for a maximum width of 1366px as most students have widescreen laptops rather than desktop computers at university (which adhere to this resolution).  

However if I was make the design to go live in the real world I would make the site responsive. Responsive design allows for one design which is displayed full width on any screen size. Adapting a websites’ view size is regulated with CSS and is based on the viewport of the device a visitor is using. The viewport is the visible part of a website, without scroll bars.

When creating the desktop design, the width of the art board was set to 1366px as this is the most common size of most desktops in the Uk and globally. 12 columns were then inserted as a guide with a width of 69px and a gutter and margin of 41px.

A 10px baseline grid is also used to help with vertical alignment of page components. Strictly adhering to the baseline isn’t necessary for all typography but it does help to create vertical rhythm on the page.

The three main criteria in optimising a page layout for a certain screen size are:

• Web Page Initial visibility: Is all key information visible above the fold so users can see it without scrolling? This is a tradeoff between how many items are shown vs. how much detail is displayed for each item.
• Web Page Readability: How easy is it to read the text in various columns, given their allocated width?
• Web Page Aesthetics: How good does your page look when the elements are at the proper size and location for this screen size? Do all the elements line up correctly — that is, are captions immediately next to the photos, etc.?

All the information and research I used to inform my design of the one roof website was from:

http://www.hobo-web.co.uk/best-screen-size/

https://www.sitepoint.com/responsive-web-design-tips-and-notes/

and http://www.websitedimensions.com/