The process of a simple web design

As a designer we’ve all tried it. The client who wants a simple site, but don’t have any content, text, pictures, no identity really, no nothing. So there you stand, with a client who expects you to do magic with nothing. To invent something brilliant. I always find these kind of projects the hardest though it’s like creative freedom. Often the most simple design is the hardest to accomplish, because simple design will not work unless there is some kind of central idea. It could be a special navigation, big picture backgrounds, some simple AJAX functionality, or just something that won’t leave the user back with the feeling of a unfinished or boring site.

The “less is more” idea really requires some talent.

Recently I had one of those projects, and thought, why not share the process? Maybe one or two could use my thoughts for something.

Identity

Do the client have some kind of existing identity? Logo, corporate colors, fonts, whatever… Something you should be aware of before you start the design process.

In my case, there were only a logo and a outdated web-design. Nothing else. In a situation like that, personally I like to make some guide-lines for myself. Meaning, I spend some time finding typography which would fit this client. I think about colors, compositions and style. Generally thinking of a kind of profile for this design. What kind of business is this, what do we want to express? There’s a huge difference between corporate and fashion…

From the old site, we chose to keep;

01. The logo
02. The use of numbers and relatively big typography
03. The architecture with the centered ribbon-like content-container which, as in the old design, should be 100% width of the browser

Trends

Take a look at the trends. Read some magazines or use an hour or two surfing the Internet, check your RSS feed for new stuff to get your creativity to flow… For this project I found a lot of inspiration in the Computer Arts Projects issues about “Design Trends in 2009″, “The Art of Web Design”, and off course Smashing Magazine‘s article about “Web Design Trends for 2009“

Kind of quick I found what I was going for. A web-design heavily based on typography and some kind of letterpress-use, spiced up with the use of colorful, full screen background-images. I wanted to keep it clean and “flat”.

I wanted to let the beautiful Helvetica dominate the content-area. My inspiration were;

I love when small details is made with typography. Like ending a line or a paragraph with a “/”-sign, a “+”-sign or a “_”-sign

Credits;

01. 50 years of Helvetica
02. Thank fuck for Helvetica

Kind

You have to make up which kind of business you are designing for. In this case it was 0% corporate and 100% lifestyle. In my opinion that means less text and more visual appealing content.

Big pictures

I wanted to base this web-design on big pictures. So I went online and bought some dummy content at iStock. From that I could begin designing something to show my client. My first mock-ups looked like this:

Pictures for the presentation are bought at iStock.

Typography

Find suitable typography is just as important as the whole webdesign. Again you should take a look at the business. In this case I was designing for a business in the fashion industry, which made me go with a sans-serif font.

Actually I never had any doubt. From the beginning I was kind of sure of what kind of typography I was going to use. Helvetica is the perfect font for this kind of use, and at the same time it fits the business well. The other thing I thought of, was that the typography would be an integrated and central thing in the design, why it should be a font capable of that use. Furthermore there’s a ton of different weights in the Helvetica family…

Navigation

Even though you’re a designer, some things you don’t have to invent. Meaning, something central as the navigation of a website, isn’t supposed to leave people go “what the hell?!”. It have to be intuative and easy to use the site. Or else people will leave the site…

I made this navigation very simple, but still with the “letterpress  / mask”-effect.

The idea

Because of the simple design and the fact that this site never was meant to carry a lot of content, I wanted to make it special in another way. Because of the fullscreen slideshow in the background, the site is very easy to give a make-over. A photoshoot, 10 new images, and you have the impression of a new site, because of the central use of the images.

I wanted to make the site useful but at the same time, I thought it would make the site memorable if the user had the oppoturnity to just watch the slideshow. So with jQuery I made the whole content div fade when the mouse isn’t around the div (the fade functionality is disabled in wonderful IE because of it’s lack of png-transparency handling)

Conclusion

The client “bought” the idea and the photoshoot. Powered by WordPress, the site is maintained by the client herself, and we’re hosting the site as well.

Below you find some screens from the final site…

Links

- Our Theia case
– Visit Theia.dk

Grab the RSS feed of these inspirational sites

- Best Web Gallery
– CSS Remix
– Design You Trust
– Website Design Awards
– Smashing Magazine