Ask HN: How can I get better at design?

[nudge]

While for larger projects it makes most sense to partner with a designer, I would like to be able to make my own hobby projects/sites look a bit better (http://vowsjs.org/ is a fantastic example - I wouldn't even know where to begin). The problem is, I'm not terribly artistic. I understand HTML/CSS fine, and I can tell what (I think) looks good, but I wouldn't have a clue how to do it myself. Is this something I can improve at, and if so, how? Thanks.

[justinph]

I'm a designer. Many sites I see that are made by non-designers suffer from two major flaws:

- Lack of white/negative space: You need room for your elements and type to breathe. Along this same line, you need to give generous padding and margins to things. If you ever have type squished up against the edge of a box, that's guaranteed to look bad. Have a repertoire of spacing that gets used in multiples: 5px, 10px, 20px, etc.

- Lack of hierarchy/scale: I think these two go hand in hand. One of my typography teachers in school had a saying: "Don't just make it 60pt, make it 600pt." Rather than bumping the heading up 10px, bump it up 30 or 40.

Bonus tip: Read about Gestalt Theory and you'll start to understand the psychology behind design. Might work for you if you're a techie: http://en.wikipedia.org/wiki/Gestalt_psychology

[alanh]

Agreed. Allow me to add a few “avoids:”

For me, biggest tell-tale of a new designer is overuse of design elements and frills. Adding gradients, shadows, faux 3D, outlines, images, etc. should not be done without a good reason, and sparingly.

Your user’s attention is limited. Plan for this. Visually emphasize only the most important thing(s) on the page — 2 or 3, maximum. This often means not using many saturated colors (ever notice how much there is grey in OS X? It stays out of the way. I find Aero Glass unbearably distracting at times.)

You don’t have to make your content (as opposed to nav) hyperlinks use a color from your branding palette. In fact, don’t, as rule of thumb. Make them a decent blue (not super saturated like #0000FF), and do vary them for :visited.

If it sounds like I am saying “don’t have fun,” I apologize; I tend to be overly minimalist. Do the fun stuff, just use them as demos, not in production (music band sites excepted).

[rbreve]

Others I have seen - using too many fonts - using too many colors or weird combinations of colors - not using a grid to align elements

[awt]

A book I've found to be very useful for picking the absolute basics of graphic design (which applies to web design in many ways) is "The Non-Designer's Design Book."

It covers the basic principles of graphic design:

Proximity

Alignment

Repetition

Contrast

It also covers the basics of using color in design.

Universal Principles of Design is also a fascinating read.

I've found that reading these books, then trying to design something is helping. It helps if you've tried to design something before reading the books as well.

[isleyaardvark]

I've always seen those 4 principles listed in the reverse order, you can form an easy to remember mnemonic.

[edanm]

Helped me a lot too.

Amazon link: http://www.amazon.com/Non-Designers-Design-Book-Typographic-...

[steamer25]

I found and read this book without having ever heard of it. It does a good job of laying out design principles in a way that analytic/hacker-type personalities can understand. Now I even find myself conscious of how the text in my emails are laid out.

[fara]

A designer once told me that good design books have great covers. I can only think the other way around of this book.

[chmike]

You gave the principles in the wrong order. It should be Contrast, Repetition, Alignment, Proximity (CRAP). ;)

[Robin_Message]

A nice piece of advice I've seen is to start in black and white (and shades of grey) and get the contrast and lines and so on right first. Once that looks good, either leave it, or then add colour and texture (and maybe remove some of the lines and borders if the colour or texture changes make them unnecessary.)

Sketch designs on paper on a grid, with a nice pen. It's easier to try out ideas and evolve when they only take a minute.

Practice.

[ErrantX]

I'm pretty bad at design but what I have found has sufficed for me in the past [1][2] is:

- bold colourful blocks

- tend towards minimalist

- use no more than 3 colours in a design

- use colourlovers.com for palettes

- copy nice bits/ideas off other people (obviously without ripping off entire designs)

- avoid gradients

EDIT: oh, one other thought. One or two fancy bits of design or JS magic == good. Too many == very bad :)

1. http://www.errant.me.uk (minamilist) 2. http://www.startupwiki.co.uk (bold colours, blocks)

[powrtoch]

I've also found great success tending towards minimalist. The advantage is that you're mistakes will be of the variety "this could have been a little more impactful" and not "Dear God why would anyone do a 3d rainbow extrude with 17 different grunge fonts on a space background???".

In short, you embarass yourself less. You already know how to make a 'good enough' simple design. You might prefer to make a glorious, exciting complex one, but odds are you don't know how. Which makes sense, because this is hard to pull off. If you stay simple, you get 'good enough'. Try to get complex and fail, you get visual torture. If you'd like to make more interesting designs, learn the techniques little by little, but make your finished products no more complex than you can be confident in.

Regarding gradients: when you do use them, be subtle. A gentle shift from one color of red to a slightly deeper one can be nice and help draw attention. A shift from red to a green will make babies cry. As a general rule of thumb, colors should only gradient towards different shades of themselves or towards black or white. Seems obvious, I know, but...

[jcromartie]

In design for the real world, absolutely avoid gradients. But in design for the screen, subtle gradients can help add a nice shade of realism or texture.

For example: Holiday Inn Express just redesigned their logo to look like some Web-2.0-style icon thing with gradients and drop shadows. They look absolutely horrible on signage. They look like gas station signs now.

[jakevoytko]

In addition to this list, you absolutely need feedback from someone who's honest. I know some designers (and live with one), and they always want opinions on their latest work.

In the limited design work I've done, I've found it extremely helpful to look at the subject's face when they see your design. You want to see their gut reaction: you'll see displeasure in their eyes long before they'll verbalize it. You can break the social tension around criticism by saying, "Oh, I see there's something you don't like. Where are you looking right now?"

You want feedback to be a conversation - if your subject knows what you intended, they can give you hints on what you actually wanted to design.

[JeffJenkins]

I'm a bug fan of Adobe's Kuler for palettes. It gives several different methods of relatedness for your colors, and is really easy to tweak: http://kuler.adobe.com/

[alanh]

Forgive me if I am making a baseless accusation, but is your sketch art copied from XKCD?

[erenemre]

When thinking about getting better at design, do not think making things pretty.

Instead, think how you can solve problems, how you can make your users' life easier. And this actually begins with a lot of thinking.

I cannot recommend you any specific sources but most of the people learn design by trying. If you want to improve your visual skills, look at other designers' works. Try to copy them (do not steal :), read tutorials.

[mebassett]

I'm a terrible designer too, so I'm really not in any position to give advice, but I can share my process. I figure, like any other technique, the way to get better is to do it a lot. I usually get so frustrated after trying to make a decent design for one website that I don't do it again for several weeks. Anyways:

0) learn new design techniques. Try to do this regularly. Its like adding new tools to your toolbox. A list Apart has a bunch of great tutorials, and checking out design galleries (http://html5gallery.com/ has some nice sites) helps to give you inspiration and give you something to try to duplicate on your own. I don't mean to duplicate good designs for your own work, but to duplicate good design so you can learn the techniques used.

1) Sketch a design on paper. I don't focus on making it look cool or pretty because I don't know how. I try to focus on solving the user's problems. I do several sketches, and ask friends to glance at each. At the very least to see if they get the idea of the website from looking at, but also to know which ones they like best.

2) Graphical Mockups. I use the gimp or adobe fireworks. Again, I make several different mockups from my best sketches (between 2-4). And again, I have friends and colleagues review them and get their feedback. I put as much detail as I can into each - hover effects, shading, et cetera. I try to make a pixel-for-pixel mockup of what the actual html/css will look like.

3) Finally write the html/css for my best design.

[telemachos]

A slight tangent, but something I did recently:

1. Apply Eric Meyer's CSS reset to strip all presets from your site.

2. Fix your site.

It doesn't necessarily help you to reach good design, but it forces you to consider how many things you need to worry about.

Link to Meyer's reset: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

[SandB0x]

Learn about typography. This will start to change how you think. A fantastic and accessible starting point is:

"Stop Stealing Sheep and Find Out How Type Works", by Erik Spiekermann

http://www.amazon.co.uk/Stop-Stealing-Sheep-Find-Works/dp/02...

[sublemonic]

Another good typography resource: http://www.typographyforlawyers.com/

[fjabre]

I believe in free trade for the most part: everyone doing what they do best.

Focus on what you're good at. Design is serious trade that takes designers years to get good at. If you need a quick design then check out some free css template sites or the many sites that will sell you a prefab design for cheap.

About the only thing you need to be able to do is edit the design with a program like Photoshop or Fireworks so you can make minor changes if you need to.

Again, focus on what you do best and be resourceful instead of trying to become a designer yourself. Also, once you have a good design in place don't forget to make use of PSD to HTML services like w3-markup.com or psd2html.com. They're cheap and will save you a lot of precious time.

[metageek]

Specialization is useful, but it's also useful to have some minimal level of design competence, just so that you can make a prototype and not have people reject it just because the design is lousy.

(Also, having a basic grasp of design will help you decide whether your designer is doing a good job.)

[seanlinmt]

"Bad artists copy. Good artists steal. " - Picasso

Seriously... probably looking at examples of beautifully design sites and getting some 'insipration' from them. Articles on smashing magazine are pretty good, http://www.smashingmagazine.com/

And I've recently found http://www.metalabdesign.com/

I reckon it just boils down to practice and lots of redoing your design over and over again. I don't like doing it because it seems like a waste of time compared to the amount of code I could have written.

[idan]

I gave a talk on the subject at DjangoCon.EU recently, so shameless self-plug:

http://blip.tv/file/3685673 - Design for developers: Making your frontend suck less.

[idan]

Also the slides for the talk: scribd.com/doc/32311867/Design-for-Developers

[csallen]

While I'm not an amazing designer by any means, my design skill have improved drastically in the last couple years. I'd say the most important things are practice, iteration, and inspiration.

Practice - Get a tool like Photoshop. Make a mockup, then turn it into a real website using HTML/CSS. Design at least 4 or 5 sites. You'll get better at Photoshop, better at HTML/CSS, and better at design.

Iteration - Don't expect to get a mockup right the first time; don't be satisfied with a mediocre first revision. Keep iterating on a design, tweaking it and changing it until it looks great. This part always takes me longer than both the initial design and the coding.

Inspiration - Coming up with designs from scratch is difficult. Instead, hang out on design-related websites (I especially like SmashingMagazine.com). Check out the numerous web design galleries online. There are also some cool UI galleries out there. Make note of what inspires you, and mix and match elements from different designs to create designs of your own. Or, just blatantly steal haha. I laugh, but I'm not kidding -- copying someone else's design is decent practice. And once you start iterating, it will become your own.

What's important is to realize that becoming a good designer is a path you must traverse; it's not a destination you can simply teleport to. So start walking!

[prawn]

Pick a colour scheme and try to keep it consistent. One or two core colours and then black, white and/or grey. Select one colour and use it as your action colour.

Padding has been mentioned also. One common mistake made by non-designers is to pack everything in. Have fat padding on bordered boxes or separating elements.

But something I didn't see in a skim through the comments was alignment. The single biggest improvement you can make with your work is with horizontal alignment (ErrantX, if you spot this comment, you could easily do this with the URLs you provided as examples). It will make your design appear neater and simpler - less chaos can mean that your target-points are more obvious. So, in a simple design, make sure your top-left logo is aligned with your H1 down the page which is aligned with your paragraphs.

FWIW, I co-wrote Web Graphics for Non-Designers around 2002/03: http://www.amazon.com/Web-Graphics-Non-Designers-Nick-Boyce/...

My chapters were Color Theory, Visual Elements, Layout and maybe another one - can't remember. Parts of the Color Theory chapter were put online as a sample when it was published:

http://www.webreference.com/authoring/graphics/color/nondesi...

If you're in South Australia, I have a few spare copies of the book lying around if you want one (too lazy to post, sorry!). As I said, it's ancient in Internet-years now, but might be more useful to someone than it is to my bookshelves.

[rguzman]

One thing to keep in mind is that "graphic design" and "user interface engineering" tend to get conflated. They are not the same thing, but pretty closely related.

I find that the best way to proceed is to design an "overall style" for the site first. That means, pick a color scheme, typography, and base layout according to the principles mentioned in other comments (e.g. CRAP). Thereafter, the problem becomes user-interface engineering (which, in turn, may lead you to change your design).

I found this talk to be really helpful: http://37signals.com/svn/posts/1952-i-gave-a-talk-on-ui-fund...

Also, +1 on The Non-Designer's Design Book.

I've also found many useful articles here: http://www.azarask.in/blog/

In particular, http://www.azarask.in/blog/post/know_when_to_stop_designing_... and http://www.azarask.in/blog/post/how-to-critique-an-interface...

[larrywright]

I saw Ryan Singer's UI Fundamentals talk in person at Windy City Rails. It was worth the cost of admission by itself, and I can't recommend it enough.

[nandemo]

Meta-comment: I really dislike the trend of abbreviating "web design" to "design". In a software context, I take "design" to be "software design", though even this abbreviation is usually unnecessary. Why pollute the namespace?

[stefs]

1. find an existing design you like, e.g. the vowsjs website. use it as a starting point.

2. find another existing design you like, e.g. the designiskinky.net - they doesn't have to be related.

3. try to combine them. what do you like about each of them? what do you dislike? try to replace the parts you dislike with your own variations. get inspiration from other sites. also, change some of the basics: color scheme (there are online color scheme generators), fonts and -sizes, spacings, ...

4. cobble it all together.

5. it will look horrible, so change a few things and iterate.

6. it will still look horrible. the color scheme doesn't fit somehow. the font - looking good on its own - is still terrible for headlines. the menu is not where others expect it. you notice that the one cool gimmick you invented is not only useless, but totally distracting. you'll find you took a great website, took all the good parts out, replaced them with other good parts that totally make no sense in this context and that the result is horrible. also, the site will look boring. you'll want to throw it away and start again. you'll start to notice those sites were made by experienced designers and there was a reason their sites were built that way. now your website is ugly, your motivation is gone and also time ran out. you'll put it online anyway because you don't have an alternative, but it wont cost you any money because the site sells nothing and - be honest - it's still better than most of the sites out there.

great, you learned a lot of valuable lessons!

but i tell you as much: you'll never be happy with your designs. they will always look dull and boring - that's because you made them and stared at them for hours. don't worry, just put them online. you can always redesign them in a year.

[jarin]

Most of my design comes from 4 basic ingredients:

- http://colourlovers.com

- http://0to255.com

- border-radius

- text-shadow

[azharcs]

These were some of the books which taught me a lot about Design were:

Don't make me Think by Steve Krug http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/032134...

Non-Designer's Design Book http://www.amazon.com/Non-Designers-Design-Book-Typographic-...

Universal Principles of Design http://www.amazon.com/Universal-Principles-Design-Revised-Up...

Also make sure you go through design's everyday on Behance.net, they have some really amazing designers and design.

[neves]

Non-designer's book is really a great introduction.

[joshuacc]

First of all, don't get locked into Photoshop tutorial mode. Tutorials can be helpful, but unless you understand the reasoning behind what you're trying to achieve, you're only going to be learning how to do that one thing.

For a broader perspective that will serve you well, I recommmend:

1. Take an art history course - Or watch a video survey of the subject

2. Learn to draw - Drawing on the Right Side of the Brain is a good introduction

3. Learn the basics of typography - Bringhurst's The Elements of Typographic Style is a classic

4. Visit museums of art and design

Since you're talking about web design in particular, I'd recommend reading Jakob Nielsen, as well as Steve Krug's Don't Make Me Think to make sure your design ideas don't clash with usability.

[edanm]

I'm no great designer, but a few things I did:

1. Read "Non Designer's Design Book" (amazon: http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...).

2. Subscribed to a lot of web-design blogs (try Six Revisions, NetTuts etc.).

3. Learned to work well with Photoshop. I especially loved Lynda.com's Photoshop courses.

4. Designed, designed, designed. As with everything else, actually doing is the most important thing.