Ask HN: How can I get better at design?

https://news.ycombinator.com/item?id=1474315

by nudge • 16 years ago

163 98 16 years ago

news.ycombinator.com

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.

gspyrou• 16 years ago

You could try Microsoft .toolbox http://www.microsoft.com/design/toolbox/school/default.aspx

s3b• 16 years ago

This is a good set of tutorials to get you started : http://www.noupe.com/tutorial/the-ultimate-collection-of-bri...

Robin_Message2• 16 years ago

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!

maushu2• 16 years ago

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.

blaix2• 16 years ago

What book?

maushu2• 16 years ago

Game Design: A Practical Approach - http://www.amazon.com/Game-Design-Practical-Approach-Develop... and for more focus on the interface (the obvious point of this thread): Game Interface Design - http://www.amazon.com/Game-Interface-Design-Brent-Fox/dp/159...

Both books teach interesting stuff about designing interfaces and the game itself that can be translated to software and web, specially the first book.

erenemre• 16 years ago

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_Message2• 16 years ago

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• 16 years ago

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• 16 years ago

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• 16 years ago

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?

andycroll• 16 years ago

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.

blaix2• 16 years ago

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• 16 years ago

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.

edanm4• 16 years ago

Helped me a lot too.

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

cageface• 16 years ago

For a design book that is an ugly cover.

steamer252• 16 years ago

There are a couple different titles, the one linked above is the typography-focussed volume.

The one on general design principles is here: http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...

There are also volumes specifically for web, powerpoint, etc.

isleyaardvark• 16 years ago

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

chmike• 16 years ago

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

steamer252• 16 years ago

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• 16 years ago

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

bombs• 16 years ago

The books suggested by SimpleBits were good for me, http://astore.amazon.com/simplebits-20/191-2738847-5476816?_....

mebassett• 16 years ago

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.

uggedal• 16 years ago

Read http://designingfortheweb.co.uk/book/

irondavycole• 16 years ago

As a designer, I highly recommend this book. It's beginner level but very comprehensive.

tom_ilsinszki• 16 years ago

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• 16 years ago

Sometimes you need to find a mentor to give you a direction. Additionally, surround yourself with smart and talented designers.

ErrantX4• 16 years ago

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• 16 years ago

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.

ErrantX4• 16 years ago

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

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

impactsignbc2• 16 years ago

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.

impactsignbc2• 16 years ago

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• 16 years ago

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• 16 years ago

Of course it has to be a flash application. facepalm

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

jacobolus• 16 years ago

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• 16 years ago

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• 16 years ago

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

ErrantX4• 16 years ago

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

alanh3• 16 years ago

> A shift from red to a green will make babies cry.

Yes. I want to share a design an unqualified team member once seriously proposed: http://img.skitch.com/20100630-m473a35wsrcwsis547mmxjetcq.pn...

alanh3• 16 years ago

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

ErrantX4• 16 years ago

It is; actually there should be an attribution somewhere on there - thanks for the catch (not sure where it went)

stefs• 16 years ago

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.

edanm4• 16 years ago

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• 16 years ago

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

jarin• 16 years ago

Most of my design comes from 4 basic ingredients:

- http://colourlovers.com

- http://0to255.com

- border-radius

- text-shadow

SandB0x• 16 years ago

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• 16 years ago

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

generalk• 16 years ago

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.

gibsonf12• 16 years ago

Travel the world.

gibsonf12• 16 years ago

This is actually a serious recommendation, and as a building architect, helped me a great deal in designing in general.

telemachos• 16 years ago

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• 16 years ago

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.

marknutter• 16 years ago

Here's how I was able to get pretty good at design:

Every day, visit a variety of CSS galleries and make sure to view at least 100 designs, saving the ones you like the best.

Start a personal website if you don't already have one, and begin creating mockups in Photoshop or Fireworks of what you want it to look like. Most likely, you will be unhappy with what you create more often than not, but it's important that you keep iterating.

When you finally create a design you personally like, subject it to outside criticism from designers who know their stuff. Do not take anything they say personally. They will probably rail on you about typography, whitespace, the grid system, proper color matching, and so on. Go through the process of fixing your design to address those critiques.

Last, and most importantly, redesign. Although I think that there is an element to design that's innate, I would argue that it's mostly about practice and pattern recognition. It's all about being able to pick out the best designs and have your opinions match up with the largest percentage of the population as possible.

Most of good design is just re-applying the best elements of other people's designs. Truly innovative design is a rare thing and hard to pull off. It's a bit like fashion or modern art - most people will balk at truly creative stuff, but it can make it into the mainstream with enough persistence.

TL;DR view css galleries obsessively and save your favorites, perpetually redesign a personal site, frequently ask for feedback from other great designers, accept criticism gracefully, practice, practice, practice.

nahumfarchi• 16 years ago

http://psd.tutsplus.com/articles/inspiration/teach-yourself-...

Outlines a self study course.

idan2• 16 years ago

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.

idan2• 16 years ago

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

mgrouchy• 16 years ago

I feel you here, I am a terrible designer. I just redesigned and relaunched my blog with no content. It is a huge step up from what I had before.

Do you have any friends who are designers? What I have been doing is when I see designs my friends make, I ask them constantly(they must be getting annoyed by me now) why they make particular design decisions. Using this knowledge helps me make better design decisions going forward. I'm still super terrible, but I am slowly getting better.

vessenes2• 16 years ago

I like this question as I have had an interest in design for many years, but largely hired designers to work for me, and focused on technology.

One thing that separates good designers from hacks (in my opinion) is their appreciation of the history of design. Say you take your text, shrink the font down, and then jam the paragraphs far away from each other in a two column layout leaving a giant gutter (is that the right word?) in the middle and no left or right margins. That's (whether you want to or not) referencing a period in design history; if my memory serves, starting with some reasonably high-concept magazines in the late 1960s.

Same idea, but add thin borders as if you cut the text out of a block of paper, rotate randomly and slightly, and you're referencing fanzines of nearly the same era, a little bit later.

Now, distress the text horribly, and make everything bigger like you photocopied on 'enlarge', and you've got '80s punk.

Now, sharpen filter it all, crisp the whole thing up, stylize the borders and cut-aways, choosing a font with built-in crispy distressing, add a muted dark distressed background with a large image pattern (and probably a little pink) and you've got some sort of 2010-era crispy new proto-punk / ironic nod to punk design.

All that to say, you still want to have some understanding of the 'rules' of design, and typography, but they will be nearly worthless to you without some experience of the mental and emotional connections people make with existing significant design movements.

Luckily, this experience is pretty easy to get. http://www.designhistory.org seems pretty cool, although I just found it for purposes of writing this response.

With some of that experience, you will be able to 'parse' design in a technical way alongside your own artistic sense -- and since you're a technologist, you'll be able to understand how the changing technology allows new design looks to spread as well on the web, and that will put you ahead of 95+% of 'designers' on the web. Early web 2.0 was puffy letters, reflections, and large fonts for forms -- all this enabled by browser changes, and design needs of the time.

Late web 2.0 looks like we're going to have a lot of rounded boxes, shadows, and browser-based gradients, since those things are getting easier to do; whether or not that's what happens, I will be able to assess the online designs when they come about with some sense of what's come before, and appreciation for what people are doing now.

On Typography: all this goes for typography as well, one of my pet nerdy subjects. I really love The Elements of Typographic Style by Bringhurst. Design's 'rules' are far less codified than typography's rules; despite that, there continues to be amazing work and amazing font design happening, in fact, maybe more and more high quality font design. A thorough understanding of typography is a great joy for anyone who reads, in my opinion. Check it out. http://www.amazon.com/Elements-Typographic-Style-Robert-Brin...

p.s. I was thinking about what design group HN falls into in my head while I wrote this, and I decided "neo-Greenspun". Thoughts anyone?

davidw• 16 years ago

> a lot of rounded boxes, shadows, and browser-based gradients, since those things are getting easier to do;

Interesting question: since they're easier to do, more people will do them, and they won't stand out. So the 'cool kids' will move on to something else?

vessenes2• 16 years ago

That's always the way; design definitely evolves for fashion reasons as well as new technologies / needs.

allenp• 16 years ago

I think something you need to consider is to use design tools for designing - paper and pencil, then gimp/photoshop.

The best designed sites out there aren't designed on the web, but rather designed for the web. Try to make a good design first and then use your html/css skills to adapt it to the web (and obviously since you know the limits of html/css you can keep yourself from going to far in a direction that would be overly complicated to implement).

Also, keep it simple to start and make incremental changes.

tbrooks• 16 years ago

Steal.

jtth• 16 years ago

Do it a lot, then talk to people.

csallen• 16 years ago

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!

jgv• 16 years ago

For starters, read "Grid Systems in Graphic Design" by Joseph Muller-Brockmann and "The Elements of Typographic Style" by Robert Bringhurst.

After that, practice all the time. Do a ton of self-initiated projects or design for friends pro-bono. Always be looking at designers who you admire and figure out what about their work is so admirable!

noodle• 16 years ago

the same way as everyone else.

study and practice.

you might never have the creative drive to be able to make something really interesting, but you'll be able to understand and apply trends and concepts. how artistically inclined do you think you have to be to create a nice looking gradient-based design?

kentf• 16 years ago

practice

justinph• 16 years ago

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

rbreve• 16 years ago

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

alanh3• 16 years ago

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

Vistico• 16 years ago

Well one important thing I would have to say is to first pick a style!

It's easier to mature and gauge your progress when you choose a style and then mature it progressively. The through constant practice and maturation, you willl become better at the process. Both a drawing with great detail and one with lack of therefore can be drawn by the same "talented" artist.

I'd say the three basic places to start are typography, proper padding, and style (which can be use of borders, rounded corners, sharp edges, or minimalistic as long as it's consistent). There defiantly is always a style that can be identified with each artist's work. And even with someone with the greatest portfolio you can usually identify elements that reveal the artist art work. So what you will have to do is iterate and experiment with the above until you develop.

1. A style to commercial (or your) liking.

2. Basic sensibility when it comes to web design or your relevant project space.. the sensibility changes with the medium at least to a small degree (design common sense).

Just like you use your judgement to decide to at least a small degree who's advice is worth listening to in this post, you need to build that same common sense up for design. I suggest doing mini front page fake products up to build up your skills. When you get better at that (you should notice significant improvement after 6-10 projects) try to go a little further and create an FAQ or about page for that product with that style it will become alot easier since you've already gave "definitions" to how some elements should work and the overall spirit of the project.

(One thing to note is it helps to have at least SOME Photoshop and Illustrator skills, at the very least you might want to add some texture to your products and custom gradients. IMHO it's alot easier to get great work out when you can over kill the project. Just barley getting through it with hard "Crusty the clown" colors will bleed your project. This is coming from someone who taught himself good web design)

I'd be glad to show you my latest projects for you to judge for yourself. Hope this helps.

vijaydev• 16 years ago

http://news.ycombinator.com/item?id=1103578 - Check this out. Has pointers to lots of good resources.

ivankirigin• 16 years ago

How do I get better at drawing in photoshop or illustrator? I feel like I have a good aesthetic but a newb grasp of those tools.

rguzman• 16 years ago

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• 16 years ago

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.

rajatmehta1• 16 years ago

The best way to improve is to practise and to look at the sites that you think are nicely designed , get inspired but never copy. Some of the best designed sites that i can think of are 37signals (all there sites are designed simply but elegantly), zengarden, mint.com

azharcs• 16 years ago

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• 16 years ago

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

fjabre• 16 years ago

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• 16 years ago

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

grandalf• 16 years ago

anyone have any thoughts on the best aspect ratio for portraiture?

joshuacc• 16 years ago

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.

wenbert• 16 years ago

Time and practice are the best teachers. If you can tell what (you think) looks good, then you have already solved half of your problem. Spend a few hours tweaking and improving on a design until you are able to come up with a design that you like. Look for inspiration on movies, photographs, nature or other websites.

I remember spending a couple of days on my old website design. I listened a lot to soma.fm and I noticed that the music kept me focused on the design I was working on. I remember dreaming about what I am going to tweak/change the next time I opened Photoshop.

Also, learning to imagine and think ahead on "how to do this and that in HTML/CSS" will save you a lot of time and effort.

sgoraya• 16 years ago

Practice. Try copying designs you like...add your own spin; Get proficient with design tools (Adobe suite or equivalent).

I also personally use lynda.com - they have great tutorials for all the adobe programs - also some good general videos about color theory and design principles.

I also liked this PDF by Massimo Vignelli: http://www.vignelli.com/canon.pdf

nnash• 16 years ago

If you have a design school nearby take some continuing ed. classes.

SkyMarshal2• 16 years ago

Good topic & advice. Tangential question:

Will Photoshop/GIMP be necessary for web developers now that we have HTML5? The various components of HTML5 can create many of the things we've used images for in the past - buttons, layout, etc. Do us non-designers still need to learn photo/image tools, or can we just focus on HTML5/CSS3/Javascript?

bad_user• 16 years ago

What are you going to do? Design your logo or your icons in HTML5? Make adjustments of your photos with HTML Canvas?

Of course, layout designing in Photoshop always seemed a strange habit to me, ever since I tried it 8 years ago ... because fonts rendering doesn't match; many HTML designs have fluid elements that aren't properly captured by Photoshop/Gimp; and in general you tend to make overly complex designs when working in an image editor.

Good practices transcend fashion IMHO.

SkyMarshal2• 16 years ago

Well icons and buttons can all be done in CSS3 now:

http://nicolasgallagher.com/demo/pure-css-social-media-icons...

Photos obviously can't, so I guess that's a reason to keep photo editors around. But is that all?

And yeah, I never liked mocking up sites in photo editors either.

rradu• 16 years ago

Find designs you like, then try to imitate them. Look at common elements among them and implement them into your own design.

prawn• 16 years ago

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.

niallsmart• 16 years ago

My approach was to find some designs I really admired and then recreate them in Photoshop from the ground up. That's a great way to learn PS itself, but more importantly in the process of (re-)creation many subtle design choices in the original are revealed.

Ask HN: How can I get better at design?

Related Stories