Sunday 7 April 2013

Quick Tips for a Better Design




Layout:

Don't use completely black font colors, something like #48484a works much better.

Try to use high quality images instead of crappy ones - but don't overdo it. If you have a crappy image, find a stock photo or leave it out.

Use web fonts (Open Sans works much much better than Arial!).  Never  use too much drop shadow.  No serif fonts for copy-text.

Use proper headline formatting (H1, H2, H3)  Use sub-headlines and try to avoid huge text blocks.

Use subtle gradients instead of heavy ones. 

Use the golden rule for design.

Use enough space between elements, 10px as a base line is fine.

Use enough space between elements.

Sometimes it may be easier to use a grid system 960.gs but if you do, break the grid sometimes.

Save your pictures for web in the sRGB color profile. In Photoshop, use "Save for web and devices" instead of "Save As"  When you use transparency, use PNG (you can use gif for most icons if you aren't able to use svg or something)

When you use huge images, save them as JPG with the progressive setting enabled. Works much better for slower connections since the image only gets sharper and sharper instead of not appearing at all when loading a page.


Navigation:

When it comes to navigation menus etc, don't make them too difficult or complicated.

The usual web page should be done with max. two levels of navigation.

Don't use three level drop-down menus.

No comments:

Post a Comment