ASK HN:Good web design?
7 comments
Practice.
If a designer asked you for good tips on how to program, you'd say it's not simple, recommend some books, and tell them to just start writing programs, and reading programs, and writing programs in other programs' style, etc.
So it is with design.
I favor traditional design (as in art) texts, because many people who consider themselves designers today don't have any training; they just know how to manipulate Photoshop. It's the design equivalent of cut-and-paste programmers.
Look at the reading list of a design class from your local community college. You'll find introductory texts new and old, like "Design Basics, 7th ed." and "The Art of Color and Design (1951)," but they'll all cover the same things: line, direction, shape, size, texture, value, color, repetition, alternation, harmony, gradation, contrast, dominance, unity, balance, proportion. Take the class and you'll do exercises that let you practice each one.
Learn layout and composition. There are community college classes for that, too. I have "Editing by Design," a newspaper layout guide, and other newspaper layout books on my Amazon Wishlist. Lay out text and design elements on paper. Cartography is also good: it's information design and layout and presentation and art all together.
Learn copywriting. Writing is design: the right word can explain a concept better than a big, shiny icon ever could.
Good web design is good design first, with accommodations made for low-resolution text, small viewports, backlighting, scrolling and pointers. Just as with programming, you can't learn it just by reading about it: you have to practice it.
If you're in Austin, TX, come out to a design workshop. I hold them every other week and we practice various elements of design (using the term broadly): http://vi.to/workshop/
If you're not, maybe there's something similar in your area.
Finally, I've recently come to believe that you're not a modern interaction or user experience designer unless you're testing your work. As a programmer, you might understand this better than traditional designers. UX designers aren't making art; it's not subjective. Once you get past color and composition and layout and into interaction, there are objective purposes in what we do, and we can create testable hypotheses around our craft and see the results and tweak it. A/B test your interactions. A/B test your colors. A/B test your layouts.
If a designer asked you for good tips on how to program, you'd say it's not simple, recommend some books, and tell them to just start writing programs, and reading programs, and writing programs in other programs' style, etc.
So it is with design.
I favor traditional design (as in art) texts, because many people who consider themselves designers today don't have any training; they just know how to manipulate Photoshop. It's the design equivalent of cut-and-paste programmers.
Look at the reading list of a design class from your local community college. You'll find introductory texts new and old, like "Design Basics, 7th ed." and "The Art of Color and Design (1951)," but they'll all cover the same things: line, direction, shape, size, texture, value, color, repetition, alternation, harmony, gradation, contrast, dominance, unity, balance, proportion. Take the class and you'll do exercises that let you practice each one.
Learn layout and composition. There are community college classes for that, too. I have "Editing by Design," a newspaper layout guide, and other newspaper layout books on my Amazon Wishlist. Lay out text and design elements on paper. Cartography is also good: it's information design and layout and presentation and art all together.
Learn copywriting. Writing is design: the right word can explain a concept better than a big, shiny icon ever could.
Good web design is good design first, with accommodations made for low-resolution text, small viewports, backlighting, scrolling and pointers. Just as with programming, you can't learn it just by reading about it: you have to practice it.
If you're in Austin, TX, come out to a design workshop. I hold them every other week and we practice various elements of design (using the term broadly): http://vi.to/workshop/
If you're not, maybe there's something similar in your area.
Finally, I've recently come to believe that you're not a modern interaction or user experience designer unless you're testing your work. As a programmer, you might understand this better than traditional designers. UX designers aren't making art; it's not subjective. Once you get past color and composition and layout and into interaction, there are objective purposes in what we do, and we can create testable hypotheses around our craft and see the results and tweak it. A/B test your interactions. A/B test your colors. A/B test your layouts.
The best advice I can give for someone wanting to learn good web design is get a feel for the aesthetics first - visit CSS and design galleries (cssremix.com, cssdrive.com, unmatchedstyle.com, drawar.com, etc.) and look through designs noting trends, styles and layouts. These designs are showcased because they are aesthetically pleasing, which in turn effects the presentation of your product.
Then start visiting tutorial and resource sites (smashingmagazine.com, tutsplus.com, etc.) and learn as much as you can on techniques and even more on current trends. After you do that it's a matter of imitating bits and pieces of proven designs and following trends. Steal until you are capable and skilled, then unleash your creativity for your final product.
Hope that makes sense.
Then start visiting tutorial and resource sites (smashingmagazine.com, tutsplus.com, etc.) and learn as much as you can on techniques and even more on current trends. After you do that it's a matter of imitating bits and pieces of proven designs and following trends. Steal until you are capable and skilled, then unleash your creativity for your final product.
Hope that makes sense.
I'd have to disagree entirely. I like good aesthetics, but they should be the last thing to learn. There's no point in putting CSS animations on something if it doesn't help the users do what they want, or worse, hinder their progress.
Start with UI/UX, particularly Steve Krug's "Don't Make Me Think". It's a short book, once you finish it I am confident you will agree with me. UI/UX not only affects the polish of the website, but you may find yourself changing your conception of how your website should be built on a fundamental level.
Start with UI/UX, particularly Steve Krug's "Don't Make Me Think". It's a short book, once you finish it I am confident you will agree with me. UI/UX not only affects the polish of the website, but you may find yourself changing your conception of how your website should be built on a fundamental level.
I didn't suggest adding CSS animations at all, but rather looking at CSS/design galleries that showcase great design. I recommended this (and still do) because understanding (and identifying) good design is something that takes time to learn and requires building a knack for. It's essentially doing research on what works and what doesn't.
User interface is critical to good design - I completely agree - which is why I suggested taking notes on all aspects of the featured websites, including their layouts. You can have a functional interface that is unattractive, just as you can have an attractive interface that isn't functional - they are both important in their own rights. Trends are also important to identify and learn from, as they highlight proven techniques and methodologies that you can build on.
I haven't read that book but I'll check it out, thanks for the suggestion.
User interface is critical to good design - I completely agree - which is why I suggested taking notes on all aspects of the featured websites, including their layouts. You can have a functional interface that is unattractive, just as you can have an attractive interface that isn't functional - they are both important in their own rights. Trends are also important to identify and learn from, as they highlight proven techniques and methodologies that you can build on.
I haven't read that book but I'll check it out, thanks for the suggestion.
This isn't bad advice. In particular, when you see a piece of design figure out exactly what you like about it. Is it the color palette? composition? typography? copy? The goal is to learn the rules so you can decide when to follow/break them. It'll also help you figure out who's actually a good graphic designer and who's merely aping the trendsetters.
Just be aware that both graphic and interaction design are fields that are as deep as software development. I say this because I talk to a number of developers who want to do the same thing and they're really not prepared to put in years of effort to be good. If you think you're good after a few months, you're the equivalent of that guy who thinks he's an awesome developer because he knows VB6. Fortunately, simply avoiding absolutely sucking design-wise is enough to get you through as long as your content/app is compelling.
Just be aware that both graphic and interaction design are fields that are as deep as software development. I say this because I talk to a number of developers who want to do the same thing and they're really not prepared to put in years of effort to be good. If you think you're good after a few months, you're the equivalent of that guy who thinks he's an awesome developer because he knows VB6. Fortunately, simply avoiding absolutely sucking design-wise is enough to get you through as long as your content/app is compelling.
Many software engineers make the mistake of treating UI design like configuration - the more configurations options, the better. Do not fall into this trap. The mark of good design is not when there's nothing left to add, but when there's nothing left to remove. Turn every configuration option into a sensible default value.
Some designers think good UI design is about polish. This is where Smashing Mag, PSD Tuts, CSS galleries, etc. come in. But often, that's putting lipstick on a pig. I bring this up because you mentioned drop shadows, rounded corners, gradients, etc.
I like to recommend Don't Make Me Think! and Jakob Nielsen's Alertbox articles (useit.com). Research things like the golden ratio, grid layouts, principal of least astonishment, etc. Those will really help understand the low level considerations that go into good UI design.
One thing I've learned to appreciate is that at a low level, good design isn't very brand or time specific. It's timeless. At a high level, it's very specific to the brand and current trends. The HN high level design (color, brushes, gradients, somewhat typography) wouldn't work for most companies, but the low level design would work. Too many people get caught up on the high level details (the "web 2.0" look), and fail to see much deeper and more important low level design flaws.
Some designers think good UI design is about polish. This is where Smashing Mag, PSD Tuts, CSS galleries, etc. come in. But often, that's putting lipstick on a pig. I bring this up because you mentioned drop shadows, rounded corners, gradients, etc.
I like to recommend Don't Make Me Think! and Jakob Nielsen's Alertbox articles (useit.com). Research things like the golden ratio, grid layouts, principal of least astonishment, etc. Those will really help understand the low level considerations that go into good UI design.
One thing I've learned to appreciate is that at a low level, good design isn't very brand or time specific. It's timeless. At a high level, it's very specific to the brand and current trends. The HN high level design (color, brushes, gradients, somewhat typography) wouldn't work for most companies, but the low level design would work. Too many people get caught up on the high level details (the "web 2.0" look), and fail to see much deeper and more important low level design flaws.
Previous comments are correct in that interaction design/ design is a very deep field. There are some general ideas (Fitts's Law is a very basic one), however I would like to point out that really the user dictates good design.
Do A/B testing, as well as physical user tests. Two types of user tests I find most helpful are the following:
1) Let the user use your website/product but don't necessarily give advice unless he/she is really struggling. Afterwards you can interview them and ask questions such as trouble spots and/or anything confusing.
2) Have a user "think aloud". This is one of my favorite because it allows you to more easily see what is going on in a users head (although its a far from perfect technique). The general idea is to have the user say aloud everything that pops into their head. Anything from "How do I find that link?" to "I liked that feature".
While I don't suggest you do backflips for your users I am also of the opinion that good design can't be done totally behind a desk. You have to get out there and talk to your users!
Do A/B testing, as well as physical user tests. Two types of user tests I find most helpful are the following:
1) Let the user use your website/product but don't necessarily give advice unless he/she is really struggling. Afterwards you can interview them and ask questions such as trouble spots and/or anything confusing.
2) Have a user "think aloud". This is one of my favorite because it allows you to more easily see what is going on in a users head (although its a far from perfect technique). The general idea is to have the user say aloud everything that pops into their head. Anything from "How do I find that link?" to "I liked that feature".
While I don't suggest you do backflips for your users I am also of the opinion that good design can't be done totally behind a desk. You have to get out there and talk to your users!
does anyone have tips for a software engineer on how to do good UI web design?
It's not as simple as it appears, I know, and doing stuff like drop-shadows. matching colors. layouts. having a toolkit of UI tools like different brushes, gradients, etc.
basically, resources on ui design for the software engineer would be very helpful...
where do i about learning about professional front end web ui design?
it appears that having a nice accessible website... from the colors, to the round corners, to the general look & feel... can make or break a web site.