Concept Layout for Gardenias
I'd been working on a new 'concept' logo for Gardenias ( a cleaning firm based in Philadelphia - USA ) [See Logo Concepts] and was trying to visualize how that might look on a home page. After a quick trawl through some pics of Philadephia I thought about continuing the Home and Office theme through the layout. Logo was pushed up to the top left and off the horizontal mid point. Colours matched (dark pastels) to the pictures. This style of layout tends to force the eye to look at the 2nd and 3rd columns - where the descriptions and tag lines for the cleaning services would go. Using strong graphics on the top third of your page it a pretty surefire way of holding your customers attention - long enough for them to start reading content!
Concept design ideas for a local "fine furniture" maker.
After visiting their current web site I thought about a site "makeover" based on some ideas I'd seen in one of the online design magazines and some layout techniques using the 'Phi' ratio (a mathematical formula invented ages ago and used by artists and architects).
Existing Design
The existing web site design is clearly functional and provides navigation and plenty of examples of Corwell's excellent work. Ok so the colours are a bit 'dated' and the groovy 'wood' effect buttons are not as hot as they used to be. All the essential elements are there... contact details, list of products, welcome message, 'about us' and even a little "union flag" as a visual clue to the country of origin.
fletrikdesign concept for Corwell
I've taken a different approach to the whole Corwell site to give it a more "up market" feel - reflecting the exclusivity and quality of their products. Copy, Photography, Colour swatch, Typography and Layout all play a part in the new design.
Some explanations of the approach can be found below this design screenshot. (Work in progress...)
"The Storyboard"
Part of the way I do designs is to have a "think". Get a feel for the subject matter. Grab some ideas from the net (drop them in to powerpoint / word / publisher or even a page on your Office Live site!). Check out some other sites in the same business / activity or occupation. Play with words that epitomise the subject area.
Looking at the existing menu I started to group the items of furniture into a time based sequence relating to an average day. Work (office frniture), Dine (Dining Tables, Chairs and cupboards), Relax (Other chairs, TV cabs, coffee tables), Read (Bookcases), Sleep (Beds and bedroom furniture). This grouping then became the initial main menu. Very minimalist but it engages the user to have to investigate further! The theme follows on to further pages - with larger photography on left hand side and copy on right. Still need to work out minor navigation elements and more words - but the concept is established.
Colours
The colour swatch was completely revised to strengthen the overall look. Strong dark browns were balanced with 'off' whites and 'latte' style shades to draw the eye to specific areas of the screen.
Layout
The layout was calculated using 'Phi' calculator - taking the widest length 800px to give a height of 494px. A perfect square 494 x 494 px was then put into the left hand side of the page.
The square on the home page was further segmented into 3 balanced elements (2 equal squares and a rectangle).
fletrikdesign concept for The Mother Load
This is an OLSB site that caught my eye when the owner asked for some feedback. The concept was to make the home page (also known as a landing page) as "punchy as possible while still keeping the most essential information on one page. A strong "active" graphic re-enforces the primary activity of the company "Freight". The idea of making "zones" of information by using colour (either complimentary or as a contrast) is well established and works for just about any design.
before
Using some of the same design concepts as in the first project. The whole layout was 800 (w) by 494 (h).
The graphic came from Microsoft Office Clip Art and was then cropped using Paint.net to fit into the top rectangle - 800 by 246. Three rectangles 248 by 266 were slotted into the bottom section of the layout. The first rectangle will hold the menu selections. Second and Third rectangles include basic information and contat details. A single colour was sampled from the truck and then put into a colour matcher to get the complimentary colour swatch. Small white area at the bottom was then included to show copyright info.