I woke up this morning to it snowing outside for the first time this winter so I decided a nice little festive banner would be appropriate Anyway… It’s the weekend and I need a break so I wanted to talk about designing a website. Many people underappreciate the value of a good design. There’s a limit to how far you can go with the development of a website but there is no limit to design. This post that I classify as a tutorial won’t have a step-by-step walkthrough to a successful design. Doing that would not benefit you in the least. A good design takes time, creativity and inspiration. You mustn’t confuse inspiration with copying. Inspiration allows you to develop your own design thanks to your personal creativity by looking at other people’s work. It doesn’t look anything like the design you were inspired by because your of your creativity. Copying is taking what others did and using it as your own. In fact I often saw people copy so well that it was hard to tell if they didn’t just have a copy of the original back when I used to moderate the forums as videocopilot.net. Designers have been arguing about the point where inspiration and copying meet for a long, long time so I won’t try to continue that here.

THE BUILDING BLOCKS

As I said, I won’t tell you how to create a good design but I will give you some tips to get there yourself. When we build a common website, we split it into 3 main parts: the head, the main (main content), and the footer. We do this because 1. It organizes the code and 2. It separates the parts that will be reused from the ones that will not. Why do would we need to reuse parts? When you go to a website, what parts don’t change? …the header and the footer, right? (I kinda gave it away when I listed the parts). For now we will consider designing a website with this setup but you don’t need to conform to this standard by any means… but for the purposes of this post, we will be taking about the standard column setup.

In the header of the page you usually need a few things. Most important of all is the navigation. You have to allow your users some way of getting around the website. There must be some logical structure for the user to find his way around.
Second, you may want something that describes the website. This is in no way essential but it usually looks nice and who wouldn’t want to know what website they are at, right?
Ok now that you know what you should include in your design for the header, “think different” – Steve Jobs…. But not too different because the standard user expects things to be familiar and if you change it up too much, you may discourage them from viewing your website.

The main content section of your browser may require many different designs because the content will be changing but you never want to make it too different. If it’s too different, you will make the user have to get used to a new look and they don’t usually like that.

When a user finishes reading something on a page, they usually find themselves closer to the footer than the header therefore you should design the footer with that in mind. You can place a smaller version of the navigation in the footer, a logo, maybe some social buttons.

Basically you need to keep the user in mind and do your best to give them the best user experience. Just use these three parts as a structure for your design. Don’t let it control your design.

LET’S TALK ABOUT COLORS

When I first started designing websites, my designs were dark (hard to imagine since now my website is basically white haha). They became sad to look at. When designing websites try to keep them bright. Let me take that statement even further.

Make your websites simple, intuitive and bright.

That’s in no way some magical formula but it should keep you on track to a good looking website (depending on what your project requires though of course).

Back to the colors though. The best way to really understand what type of colors work together is to go look at good designs (example of inspiration).

The more you try to find a good way to learn how to create studding designs, the more you find that looking at example designs helps. Don’t look only at great designs though. Look at bad ones and figure out what you could do to make it look better. Start a collection of textures and fonts (maybe I’ll do a post on fonts later on because they can make or break a design). Maybe, while surfing the web, take screenshots every time you come across a good design keep a collection of them. All this is nothing though if you copy. Don’t copy. It destroys your reputation, it makes you look lazy, and it’s completely uncreative.

I hope this post helps you in some shape or form because it’s late here and it’s getting hard to follow what I’m writing. I’ll probably end up editing all this tomorrow… or probably not. Cheers.