My 10 Tips About Designing for the Web.

There is a thread on Forrst right now, asking people to share their top 10 design tips. So, I thought I’d write it out as a blog post and share with whoever can read this. I wrote this list fast, and probably could think of another 10, but lets start with this:

1. Get good at color.

Its important, and hard (at least for me it was). Start reading books, something by Pantone, and while you are there, start understanding the Pantone palette, if you have Photoshop, its built in (look for color libraries in the picker). Also colourlovers.com is a great website to browse and get inspired by.

2. Start thinking about texture.

http://bjango.com/articles/noise/ Filters > Add noise, monochromatic, 1.8%, get a felt feel or play around with it and find a plastic feel. Texture and depth are powerful design tools in a two dimensional world. Shadows behind text, 1px horizontal offset, 1px vertical offset, 0px blur, embosses text, makes it slightly more readable depending on the colors and backgrounds. try light colored text shadows against dark text and medium color backgrounds, they will start to pop more.

3. Configure your tools properly.

http://bjango.com/articles/roundrect/ Want great rounded rectangles? You need to configure your Photoshop to give them to you. Not everyone realizes this, I didn’t.

4. Use a stylesheet framework/system.

(Sass/Compass) For some, Sass might seem confusing or weird to use, but it you are a dev/design hybrid, it starts to make immediate sense. Compass is a framework on top of Sass that has amazing goodies baked in, ie: “mixins” for your stylesheets to get you rounded corners, in every browser possible, using CSS. They have entire CSS3 support via mixins, read to setup for every browser, with 1 line of code. Killer.

5. Design with the grid.

http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html) That is an amazing article on how the BBC uses the grid to design their entire visual language. My personal belief is that good design is constrained design. Grids provide a design constraint/thought methodology/process to any design task, and that can help you start moving in a direction more quickly, than say, a blank canvas. Also, many grid systems are available for CSS, and Compass/Sass has native support for all the popular grid systems out there (960.gs, Blueprint, 1kbgrid, etc ..)

6. Make your personal design elements repeatable.

Another plug for Sass, but it really changes my workflow. If you create an aesthetic over time (which you will), Sass lets you encapsulate it into “mixins” or functions that you can simply invoke in your stylesheets, this gives you a ton of flexibility and head start when working with designs, and keeps your design thinking at a higher strategic level, rather than “ugh text-shadow, blah blah”

7. Read about design AND usability, as much as you can.

Books I recommend:

8. Follow great designers on twitter, and see what they are reading/thinking/doing/making.

@putorti, @rhjr, @lukew, @swissmiss just to name a few. (also, not a great designer, but you can follow me :) @perezd)

9. Watch the documentary “Objectified”.

http://www.objectifiedfilm.com/ This is a great documentary about design, industrial design, and product design. I find, for myself, that thinking holistically about design is a great way to cross pollinate concepts/models into the web.

10. Go through a large body of work, and never stop.

The best way to get better is by doing. Don’t wait to do all of these things, just start designing, suck at it for a while, push through that gap between you being bad at design and you being happy with your design aesthetic. Its hard, you’ll feel discouraged, but its the only way to make progress.

I am done rambling, go make stuff.

blog comments powered by Disqus
  1. paginas-web-uruguay-blog reblogged this from perezium
  2. perezium posted this