HN Explorer

Ask HN: How can I get better at design?

163 points by nudge ↗ HN
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.

102 comments

[ 4.5 ms ] story [ 141 ms ] thread
s3b
This is a good set of tutorials to get you started : http://www.noupe.com/tutorial/the-ultimate-collection-of-bri...
Robin_Message
They are all very Web 2.0-ey, which is fine but it's hard not to make something look nice when you pull in a lot of pretty visual elements (as long as you don't overdo it.) I felt as though the OP was more concerned with layout and how to present information and use columns and so on, especially since the sample he posted looked pretty enough but was just one long column of text in sections.

Also the only corporate looking tutorial "Design a Professional Business Web Layout Use drop-shadows and gradients to create a stylish 3-D look." (about a third of the way down) looks terrible! Unbalanced, unfinished and instead of professional just looks deliberately boring and stereotyped.

Having said all that, they are a nice set of tutorials, thanks!

maushu
You can also read about design and user interfaces, it will not help you directly in making "pretty interfaces" but it will help you make "interfaces that just work".

Believe it or not one book that helped me with designing web/desktop interfaces was a game design book.

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.

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.

base
subscribe some design feeds like smashing magazine. Read them a few times a week and practice, you will get much better in few months.
l4u
i love smashing magazine too. also try to read some design books, e.g. Universal Principles of Design, The Non-Designer's Design Book
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?
[dead] access_denied
Meta-meta question: do you mean "software design" or do you mean "user interface design"?
[dead] access_denied
A layout is similiar to code in some ways. There is 'flow' like 'program flow'. So you have to get the 'loops' of your layouts 'right'. To discern how to do it, think mainly of 2 things. How the reader scans the page with his eyes and the relative importance of the various elements on the page.

What is the most important element, wha comes after that ect? What do you want to get noticed first and so on.

Design is also a lot about associating things in the reader's mind. What kind of color sheme is fitting? Also look at how good designs work through a color sheme of a few selected colors that complement each other. Reddit is a good example.

And as always: less is more, or rather: less is less.

andycroll
I always recommend Mark Boulton's book:

http://fivesimplesteps.com/books/practical-guide-designing-f...

It's more about the theory of design, but presented in an accessible style and 'web' context.

There's also the Pragmatic Programmer's 'Design for Developers' book, but I haven't gotten around to anything more than skimming that one yet.

http://www.pragprog.com/titles/bhgwad/web-design-for-develop...

Hope these help.

blaix
I've been meaning to read Web Design for Developers myself and was going to recommend it as well. I've heard good things.
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.

edanm
Helped me a lot too.

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

cageface
For a design book that is an ugly cover.
nailer
yes - they just a lost a sale for me. The yellow and the purple tones are too close.
tokenadult
That's the publisher's house style, I'm pretty sure. Author's rarely have control over book covers or book titles--publishers think they know more about such marketing issues than authors do.
zackattack
That sounds reasonable, but Steve Krug's Don't Make Me Think is a design book that embodies its own principles, from cover to cover.
csmeder
Yes the cover sucks, it sucks horribly, however, the book is by far the best book I have found for people new or intermediate to design.

This seems like a dichotomy but its not. The reason the cover sucks is that Williams is not naturally good at design. This means for her to get good at it she had to actually learn and understand it. This is why this book is so good. However, she never learned how to design with color. Most of the designs she makes using color I feel are bad.

That said this book ROCKS, is hands down the best book when it comes to design basics of: Proximity

Alignment

Repetition

Contrast

Typography

edanm
You're right, this is often brought up.

But trust me, this book is one I'm very glad to have read. More importantly, glad to have read first. It's a list of no-nonsense principals which teach you the basics in an easy-to-understand manner. I really can't recommend this highly enough, cover or no.

Note that the book I linked to is the wrong one. One of the comments has the correct book.

Also note, this book doesn't talk about color, but only the other basics.

jayliew
Steve Blank's "Four Steps to the Epiphany" also has a horrible design and the "manufacturing" quality of the book is just plain crappy. But the content in the book is just absolutely golden, a must read for tech startups.
isleyaardvark
I've always seen those 4 principles listed in the reverse order, you can form an easy to remember mnemonic.
chmike
You gave the principles in the wrong order. It should be Contrast, Repetition, Alignment, Proximity (CRAP). ;)
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.
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.

tom_ilsinszki
Consider working with a designer even on small projects, because it's a low-cost and low-risk way to get to know designers and filter out the ones, you'd love to work with on bigger projects.

Also, I don't have proof for this, but based on my experiences, designers need to be less analytical, and a little more intuitive. While programmers need to try to be as analytical as possible (while programming at least). So, I think it's not really easy to be good at both (again, my opinion).

Advice: develop an eye for design, so you know what's good and what's not, and learn how to communicate with designers more effectively than most programmers.

jolosan
Sometimes you need to find a mentor to give you a direction. Additionally, surround yourself with smart and talented designers.
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)

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.

ErrantX
Yes; I wouldn't disagree... in general.

But as a "pretty bad designer" gradients tend to be territory that is destined to fail. :)

impactsignbc
Unfortunately, not all designers plan their designs to incorporate signage. I own a sign company in Canada and we have this issue all the time.
impactsignbc
Sorry, forgot to put in my last post. Check out my blog at http://www.impactsignbc.com/ . I try and put out useful tips and ideas for different types of signage. Hope you find it useful
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/
epochwolf
Of course it has to be a flash application. facepalm

Can they make the buttons any smaller or the scrolling any more touchy?

jacobolus
The interface is glitzy/flashy, but the “methods of relatedness” provided are unfortunately pretty much arbitrary (with respect to human color perception). Alas. If one does the trick, go for it, but don’t feel bad if one looks awful: it’s not you, it’s the site’s model.
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.

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...

ErrantX
You make a good point r.e. gradients. Honestly, though, even the most subtle gradients can go very wrong - I'm usually referring to background or header gradients where it justs wrecks the emphasis of the page or clouds text etc. Speaking for myself I prefer highlighting as a more unobtrusive way to add the "extra touch"

Also I think it is about personal taste; my designs tend towards the same minimalist, centered, coloured menu bar, links in a certain way etc. design because I vastly prefer sites like that :)

(also the beauty of minimalism is that you can "impact" buttons and so forth really easily if you have a good colour scheme - Startup Wiki is an example of where I got this pretty wrong...... :))

alanh
Forgive me if I am making a baseless accusation, but is your sketch art copied from XKCD?
ErrantX
It is; actually there should be an attribution somewhere on there - thanks for the catch (not sure where it went)
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.

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.

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.

generalk
I'm doing the same thing right now, and I'm approaching it the same way I learned to code in the first place: look at something someone else has done and try to duplicate it. This is a good starting point but a horrible end point.
gibsonf1
Travel the world.
gibsonf1
This is actually a serious recommendation, and as a building architect, helped me a great deal in designing in general.
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/

samdk
Practice, experiment, and get feedback

Especially if it doesn't come naturally to you, getting good at design takes a ton of practice. But if you do practice, you can definitely improve your design sensitivities and skills.

Make sure you're getting feedback--and not feedback that says "I like that" or "I don't like that". Specific feedback is really really essential to improving what you're doing.

Purpose and focus

I think purpose and focus are the key to a good design. Never do something without a reason. Remember that the reason you're doing design, at a very high level, is probably not to make something pretty. It's to help whatever you're designing better accomplish its purpose. Making pretty might be (and likely is) part of that, but it's not all of it. Always keep that in mind.

Typography

The other stuff mentioned here is also essential to know, but don't forget type. Type can (and will) make or break a design. I recommend taking a look at Typography for Lawyers (http://www.typographyforlawyers.com/) to get a start, even if you're not a lawyer. It has a good overview of a lot of the things you need to be thinking about, and you can ignore the lawyer-specific details. Type, like everything, takes practice. I recommend finding a couple of fonts (1-2 sans-serif, 1-2 serif) and getting very familiar with them.

If you'd like more help, or feedback on something you're doing, feel free to send me an email--it's in my profile. I'm far from an amazing designer, but I am pretty good at giving feedback.