Monday, 5 May 2014

Brief 16 // Typocircle // Digital Devices

After designing the website, showing the screenshots of each of the pages, to put it into context I have mocked up the website onto a mac to show how it looks on a computer screen. Also more people nowadays look at the internet on the go and on mobile devices, this means the website needs to be responsive so it can work on the liked of iPhones and iPads. To show how the website will look on these devices I have again mocked up some pages of the websites onto these devices.


Home screen
The header image of the home screen sits at the bottom of the screen when it first loads from the website. This shows just as seen above, meaning the user can then scroll down to reveal the rest of the links on the homepage. 

About section. 
Again the top section of the website is what you see when this section is loaded, but then when the user scrolls down the page the information of the page is displayed to the right, with the links of the sub pages on the left. The separation of these two sections in the middle of the page works well to clearly identify which section is which and makes the navigation container stand out more. 

Exhibition Section. 
Here the user will find out all information about the exhibition within the event.

Shop Section. 
The shop section works in the same layout as the rest of pages, except the main content area is split horizontally to display the different products that are available to buy online. This means that this section will be a scrollable container to fit all the products within the page. 

Talks Page. 
Each page within the talks section gives a brief overview about each of the designer and also displays the poster for each individual along with the talk details underneath the poster. 

Keeping the design of the website simple, meant that it fit really well within the grid which has been used throughout all the products, this has given the website a good structure and made me be able to split down the pages into usable sections which are clearly identifiable for the ease of the user. The navigation of the website is simple with 4 sections that then have three links within each, all pages are accessible from each other again creating a flowing website from page to page. 

Mobile Devices
The desktop computer is the primary device that most websites are looked on, but it is becoming more evident that mobile devices are slowly taking over this. The public are using tablets and phone more and more to browse the internet, so ensuring your website is responsive is a must so that it can be displayed effectively and to the best potential for the users use. 

Showing the website on an iPad and iPhone shows that this has been thought about and the idea of the website being responsive, would be integrated into it, if it was to be coded and produced live.  

For the iPads the website would simply shrink down and become much more compact within the size of the images and spacing within them. The grid of images / links would stay displayed in the same layout, but would reduce in size. Only when you get down to iPhone & mobile size would the layout of the website change completely. When shrunk to mobile, the links within the page would stack upon each other and the top links would drop down underneath the title to form a menu drop down menu. This makes the content much easier to see on the smaller screen and makes it easier for the user to navigate around the site. 

The same happens with the linked pages. All the information within the ipad versions would stay within the same layout and structure, everything would be shrunk to the right ratio and work within the given screen size. When it gets to mobile, the same as above will happen. The content will stacked upon each other, meaning the main content area would turn into one column and the links of the sub pages would drop below the main content area. 

Looking into these factors and building the website in the first place so that it can be responsive was a good learning curve. I know that I aren't producing the website to be live, but still thinking that it would be, made me think about the design of the website in a different way. When you start to introduce the idea of it being responsive, then the design needs to be tailored for that so that it can shrink down and move within the layout to fit the different screen sizes and still be a user friendly website - even more so on mobiles as the viewing area is much smaller and compact. 

No comments:

Post a Comment