First Mock Up
- Static Image Background
- Background Feature Image: Emits warmth and represents bespoke craftsmanship. Edited via Photoshop, the light blues in contrast to the darker grainy shades of wood add visual depth.
- Scrolling content block: 80% opacity adding connection between the background image and content.
- Feature Image Carousel
- Heading: Blue lines associate with boating context
- Logo Typography (Thirsty Script Extra Bold): Modern and crafty
- Sidebar: Scroller of latest posts with images
- Content: Blocks high opacity (100%)
- Text: Typography Charter is professional and relates to boating
WIREFRAME & MOCKUP
Although I was pleased with the visual outcome of this mock up, I felt it was slightly outdated. The font suited the site’s context but is slightly outworn. The large background feature image in comparison to the content carousals drew attention away from the site’s text content.
Primarily, I wanted to design a clean looking, easily navigational modern site. Although the mockup is visually pleasing, it doesn’t quite meet my aims.
Second Mock Up
Prior to my first mock up, I wanted to modernise the website and, unlike many of the competitor websites I researched, I wanted to simplify the content and focus mainly on visual imagery provoking user attraction.
- Static top feature image displaying rustic wood relating to wooden boats and craftsmanship; I edited the image via Photoshop by adding contrast and brightening the pale blues of the wood.
- Static Bar merging the feature image and site content together by lowering the opacity and adding gradient for as a modern feature, so that the page was less flat but still fluent in layout.
- Primary Menu situated in the static footer of the page (So the user always has navigation options).
- Secondary Menu containing insightful information for the user, is located in the three block columns ‘Upcoming Projects’ ‘View Gallery’ and ‘Introducing Tim Loftus’. The initial idea would be animating the menu into a carousel of menu columns. I added three buttons underneath the menu allowing the user full control of the menu carousel.
WIREFRAME & MOCKUP
Due to the calming colors of blues, whites and grey in contrast to the grainy contrasted top feature image, the mockup was visually pleasing. From a visual perspective, I really liked the look of this mockup – it’s unique in comparison to other boating websites. It is modern and simple.
However, the mockup doesn’t meet all of my requirements. The layout and styling is suited more towards a portfolio site, which focuses more so on imagery as oppose to contextual information. The client’s website needs to have content in the form of text, and I don’t think this mockup would suite that aspect.
Final Mock Up
- Easy and Simple Navigation: Main menu located in the top navigation bar. Useful and insightful links (news feed post, active location map and brokerages) located in the fixed sidebar so the user always has access to navigate.
- Footer: Includes text content welcoming with the user to contact Tim without hesitation. Upcoming boating events, connected to an iCalender account which will automatically update new boating events. Small menu of primary pages in the footer bar so the user can easily go from page to page.
- Feature Image: On each page there is a feature image which breaks up the calming greys and whites of the website and entices the user.
- Layout: Simple, clean, easy to navigate through and professional. The main content block, featuring the feature images, draws the user’s attention towards the content. The sidebar menu on every page add a structured grid like layout to the page. The darker greys apparent in the main menu and footer also add structural integrity.
- Search Bar
- Image Carousals and Galleries
WIREFRAME & MOCKUP
STAGES OF DESIGN – ADOBE PHOTOSHOP
I have chosen to use this template as it not only meets the client’s brief, but is presented in a clean, modern and professional. The balance between imagery and content works in harmony with one another. The white blocks in contrast to the grey background draws user towards the content of the site. There is plenty of images throughout the site.
The ‘Brochure’ page explains Tim’s services in a simple and structured manner. The sub menu ‘Design Ideas’ shows the user the client’s passion and knowledge.
The ‘Gallery’ page gives the user great insight to the client’s projects, boats in action and sailing boats home. This welcomes the user to view Tim at work, lowering the formality of the site and adding a personal insight into the business.