Monday, 16 April 2018

OUGD603 - Brief 04 - Web Development & Postcards

The final design of Charlotte's site is enhanced for user experience. It involves easy navigation and  a layout that does not distract from her work.

The landing page uses a static menu using the IGOE name in each corner, creating a photo frame effect. The type is outlined to continue the branding. An image from each project is displayed full bleed, in an automatic slideshow to demonstrate her work and entice the audience. Each IGOE letter becomes a menu option when the mouse hovers over.



When viewing her portfolio, each project is displayed in two tiles as it gives the best view of the work. The main navigation menu changes to a classic navigation menu bar along the top of the site. Still static, each menu option changes from filled type to outline when the mouse hovers over.



When the user hovers their mouse over each project, the IGOE corners from the landing page create a frame effect and the name of the project appears giving context to each project. The tile also turns blue, drawing from the original business card concept.


When viewing the photography work, the photos are static with an easy horizontal scroll, with arrows along bottom for easy navigation. The images fit the screen so the user doesn't have to spend time fitting it to the screen themselves. All of Charlottes other projects are viewable on the left for ease of navigation.




When the site breaks down to mobile, the navigation menu is changed to a hamburger menu. The blue overlay is continued in this menu.




Charlotte decided to opt for a website platform that she can access easily herself. She decided to use Adobe Portfolio, which meant a few assets had to be created that she could upload into the template.

This was no hassle as elements were from the already designed site. A few project titles were made, as well as tile overlays developed from the portfolio page. Charlotte uploaded these herself.


Charlotte also requested some last minute postcard designs. A few concepts were quickly put together and she gave feedback on which designs worked best.


The design uses the IGOE corner frames and follows a simple postcard layout. Charlotte preferred her details centralised along the bottom with a line dividing the address space.

On the reverse, Charlottes photography will make up the image of the postcard.

No comments:

Post a Comment