fruda - designer, entrepreneur, creativist, polack

The trend lately has been to discuss and teach the conceptual theory that ’simple’ is better. Why did I draw your attention to the word simple? That’s what I’ll be talking about in this post. Show of hands, how many of you deeply understand the meaning of simplicity over complexity and how to achieve it? One? Two? You in the red - is that a hand?

Okay, my point is, we’ve all got the theory down. Take away until there’s nothing left to take from, right? But when is that time when there’s nothing left to take from, when there’s a blank white screen in front of you and you set your design ship sail to make a new creation? No! Elaboration below, enjoy the very mini guide.

Part One: Tips and Tricks

Rule 1: When people talk about simple, they don’t mean boring. You’re out there trying to create the most complex layout you can in the simplest way you can, to achieve pure 2.0 bliss and function out of your effort. Here are some things you can do to prevent your layout from being boringly-simple, yet still not being complex.

1. Underlines. That’s right, links should always be defined, and one of the best ways to define a link in the midst of content and body is to underline it. We’ve been underlining links ever since the internet was born, and throughout the years when CSS came along we now have total control over our link styling. Every web designer will tell you content is the strongest part of a design. I’ll add on, saying PRETTY content is stronger than strong content. I use this method of link styling on my blog, too, and I’ll use it for generations yet to come - because its an incredibly simple, yet incredibly complex style to add to your links. What is it? Its called the border-bottom attribute! Here’s how to do it. Find the color of your link text, and open that color up in a color palette. Then, slide the picker down a pinch and choose a color half as light (or so…) as your link text color. That color you just chose is the color of your underline. To achieve this effect in actual HTML, simply add this to your line of attributes in your CSS style-sheet. ” a:link { styling; styling2; etc; border-bottom: #hexYOUchose; } ” - Here’s what you should end up with (varies dependent upon color you chose):
2. Tip: Colors. Colors are what make anything possible, because without color, what would web design be? One should choose a color scheme to act as a main scheme. There are applicable secondary and so forth sets and pallets of colors which you can choose and are encouraged to use on layouts. But, the main thing is the main color scheme. I personally believe it should consist of no more than five colors. One incredible tool I found recently is called Kuler, by Adobe. You can find it here: http://kuler.adobe.com/. Why is it important to stick to one main color scheme? To keep everything in balance. You want your website to provide perfect harmony for your visitors. Without a color scheme, everything is wild. Then again, colors can also be blinding. Pick your colors to contrast to your background, don’t ever use yellow typography on white backgrounds, and try to avoid the ultra vivid colors as well. Keep your visitors happy by providing a good visual experience for them as well.
3. Gradient Harmony. Gradients are incredibly popular these days, and its hard to find a modern design anywhere without a gradient. BUT, key to simple design is harmony between effects. Yin and Yang. Keep your effects in balance. For example, if you plan on having a heavily ‘gradiented’ navigation bar for your website, make up for that by having simple sub-effects. An even better, specific example is sidebar headers. If you plan on separating header identifiers and sub content with colors and gradients, make sure they’re both not in full gradient blast. Sure, have your main definition headers carry gradients, but then don’t go heavy with them on the content carried by the header.
4. Page Structure. The structure of your page is very important in simple design. You could have the greatest design in the world, and it could’ve only took you 45 minutes to create thanks to your structure. Its easier to design when you have a layout or framework to work off of. Tip: Before you go on and design your next website, try to whip up a quick page structure and compare how much easier your design was without doing this. Its like a puzzle, if you have a great structure, the next step is to fill it with raw content. Fill it with text, with headers, with everything. Then, then next step is to add your CSS (in Photoshop). Style everything up, add your gradients, make your balance, and create a focus point.
1. Focus Point. This is a sub-category of page structure. Your focus point is an important part of your page’s structure. This just basically means, don’t have a bunch of random elements on your page, structureless, popping out from every corner. Yes, of course there are exceptions, but my point is that when you have a ton of mumbo-jumbo flying in the wind, your visitor will have a tough time focusing on your content. Make sure everything is nicely and neatly in line and calmly flow every element on your page together.

And that’s my mini-guide! I know it was small, and I know many people briefly went over these points before over time, but this is just a reminder based on my observations. If you liked this mini-article, please discuss it in the comments, or DIGG THIS POST!

Ciao!