OUGD504: STUDIO BRIEF 2 - Design for Web // Presentation Boards
Anthony White
The layouts for my website adopts the rule of thirds, divided down into further thirds, turning them into ninths. The navigation bar remains the same on all the pages, and the icon/logo at the top of the page returns you to the home page. The website will scroll vertically.
OUGD504: STUDIO BRIEF 2 - Design for Web // Presentation Boards
Anthony White
These are screenshots from the website. You can see that they are very similar to the final layouts. I was happy I was able to create something similar to the layouts. It uses the same grid system as the layouts. I used a very minimal colour scheme, black, with a white background, appealing to the sophisticated nature of Bond.
OUGD504: STUDIO BRIEF 2 - Design for Web // Presentation Boards
Wirefame. The Wireframe is the structure which tis thr website. The container, which fits in the middle five columns of the wirefame has a width of 680px. However, the height ultimately depends on the page. Some pages are longer than others. Fonts font-family:�Helvetica Neue�, Helvetica, Arial, sans-serif;
Anthony White
Site Map The site map shows how the pages will be linked together. You can get from one page to another in a single click. The logo will be used as a link back to the homepage. The navigation bar at the top of the page will be in a fixed position.
OUGD504: STUDIO BRIEF 2 - Design for Web // Presentation Boards
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec consequat odio. Mauris non blandit justo. Nunc dignissim metus ac nisi posuere eleifend. Duis consectetur turpis ut tellus elementum, a dapibus augue vehicula. Maecenas elementum libero eu
Anthony White
ultrices porta. Pellentesque tristique mi eu lacus laoreet, et ultricies urna sodales. Quisque pellentesque convallis fringilla. Phasellus sagittis fermentum facilisis. tincidunt tincidunt sed egestas sapien
dui et Integer metus, lobortis
Digital Mock Ups I digitally mocked up the site, using my wireframe and scamps to fit might site around. Some of the sites have been cropped off, due to their lengths. Colour Scheme I’ve decided to use a very small colour range, black, 50% black, and white. Sophistocated, minimal, formal colours to represent the ‘class’ asossiated with James Bond.
OUGD504: STUDIO BRIEF 2 - Design for Web // Presentation Boards
Mobile Version Proposal I can’t code a website to dynamically adjust it’s screen size to mobile devices, such as tablets and smart phones. So I’ve proposed how the site would look on other devices. The iPad version looks similar to the web version, except slimmed down, without as much side padding. Whereas the phone version has been compressed into more rows in replace of columns, a more vertical naviagation, taking advantage of the screen size.
Anthony White
OUGD504: STUDIO BRIEF 2 - Design for Web // Presentation Boards
Anthony White
Visual Research As part of my visual research I looked at websites which uses a smilar minimalist technique as I do in my own website. Websites which use a similar centeral aligned low colour count websites. I also looked at some which have interested ways of conveying information, which I was able to implement into my own designs.