Tuesday 31 January 2017

OUGD504 - Studio Brief 02 - Final Design Website Mockups


Working from hand rendered wireframes, mock-ups were then able to be created. The wireframes gave a clear guide as to where certain things should be place, like text and images. They also provided a clear guide as to how things moved and how the user would be able to navigate around the interface.

The first mock is the home page.



The home page had to be simple, and easy to navigate. Similar to that of a website profile but not really a website profile. More a profile of work. The centre of attention for each page on the website will be the logo, which will be at the top centre of each page. The logo will also act as a web page button which when pressed will activate a drop down menu. to access other pages on the website. 

The user will need to figure this out for themselves; pressing the logo to activate the menu, although the user will be prompted to press the logo by animation. the logo will be an animated piece on the home page (an on and off animation), that way the user will know that something is going on and will investigate by hovering over the logo. 

The design of the first page had to be simple, no over firing information at the user. Most of the home page will be taken upon with six animated boxes which will display work/projects and every few seconds a piece of work in one of these boxes will fade away and a different piece of work/project will fade in. the user will be free to hover and press on any one of these boxes to release more information about that certain work/project. 

I feel that an easy to navigate and simplified Home Page is the foundation for a good website.

The design of the menu is an easy task, which can be accessed as soon as the user understands how to make it appear on the interface



As the menu appears the current page will fade making the menu boxes and text more visible. The menu is designed to be simple and easy to understand, achieving this by using simple faded grey rectangle shapes and plain white text for the page names. 

However after looking at more website designs I feel that possibly scrapping 'The Team' page on the website and keeping it purely a website that represents the brand name, the work would be better for a simplistic design, also the biggest reason is that I cannot pretend that the business has a website 

The next page to work on is the 'work' page, which will show off any past projects.

For this page a lot of inspiration came from the Apple.com website. Each one of there pages navigates by having the user constantly scroll down the page to see more content. it is a very nice way to create a smooth a perfect feel and look to the website. A lot of modern websites that are being created, now use the same navigating technique because it is so effective. 



The same style will be applied for the 'Work' page of the website instead of something traditional.




This is a much better way to present work. I did also think about using sliders on the web page to navigate through projects, however because the apple website (personally i think) is one of the best modern website designs in the world at the moment. I would like to reflect some of apples personalities onto the business website design, as seen above I've tried to replicate the design.

The contact page will be placed at the end of the the work page, so similar to the Apple.com website, the website pages will flow nicely as one.







No comments:

Post a Comment