Ministry of Genius //*MoG*\

Follow these 10 simple rules, and your designs will instantly improve. Although, like everything, there are exceptions, doing the opposite of any of these generally results in outdated, cheap or unprofessional design.

These are not tips to create nice designs, they’re vital base rules any good design should follow. Look at any good design, including any of mine, it’s likely they will follow most if not all of these rules. They also don’t focus on an overall design, instead simply the concepts and techniques used while designing, and can apply to print as well as web design.

New designers especially will often excentuate various elements of a design, such as corners, gradients and colors to make them stand out - and make people realize they’re there. But what you should be aiming for is subtle design touches that end-users don’t consciously notice, but provide a clean, usable experience.

Design is a creative process, which inherently has no boundaries - so remember these are ground rules and not intended to limit your creativity. But they must be followed, mainly.

1. Keep rounded corners to less than 6px corner radius
Otherwise they just look sleazy. This is a simple one, but incredibly effective, and a vital rule.

2. Keep your gradients simple; almost consciously invisible
The best and most effective gradients are those that people don’t consciously see. In general, keep the difference between the start and end of the gradient to less than 20-30% in lightness, assuming the hue on the start and end is the same. If it’s different, be vary gentle and careful - starting a gradient off in green and ending in blue will almost certainly look crap.

3. Don’t over-use the color pallete
One or two base colors, such as those for the body background and content background, along with a few highlight colors - generally contrasting with the backgrounds their on, and some text colors is enough. The text and highlight colors can be inverts of each other. Adding in some different lightness along the same hue of those colors for certain elements and areas is fine, but when a site starts to have 10 different colors flying around the place it can get messy. Of course this rule applies to design elements and text, not graphics or icons. There are exceptions - for example colorful text and highlights on a black or dark grey background can work well.

4. Don’t over-size body text
11 or 12 is generally fine. Larger text in small amounts is ok for attention-grabbing, but not for anything more than a few sentences.

5. Use no more than 3 fonts
2, ideally. This doesn’t include any fonts in a logo or graphical advertisements or promotions.

6. No animations
Minimize, and ideally eradicate all animations. There are exceptions - certain classy animations, product demos e.t.c. are fine - but little animated dinosaurs or advertisements should be avoided.

7. Borders
Borders around photos or box elements work. But they mustn’t be obvoious. Borders arund photos work best as a mid-tone grey when on white when directly around the graphic or a lighter grey with one or two pixels padding. These colors are not fixed rules, of course, just a general pointer. Borders around boxes or elements should be less than 25% darker than the background of the element they contain, and never lighter, unless the containing element AND the area behind it are darker than the proposed border.

8. Don’t over-elaborate on patterns
Patterns can be a great way to improve a design. But keep it subtle. This is like the gradient thing - make patterns consciously almost un-noticeable, and most of the time they’ll look 10 times better.

9. Don’t put photos next to each other
As in, don’t bunch photos in a line filmstrip-style. If you must, give them a few pixels margin, or give them around 5 pixels and round off the edges (following rule number 1, of course).

10. Create a defined structure
Unless you’re going for the “floating mashup” style, clearly defining the structure of a web page is absolutely vital. This can mean having containers, lines, boxes - anything that separates different parts of the content and defines each section.