

ASK HN:Good web design? - mx2323

hi everyone.<p>does anyone have tips for a software engineer on how to do good UI web design?<p>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.<p>basically,  resources on ui design for the software engineer would be very helpful...<p>where do i about learning about professional front end web ui design?<p>it appears that having a nice accessible website... from the colors, to the round corners, to the general look &#38; feel... can make or break a web site.
======
vitovito
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.

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

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

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

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

------
msencenb
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!

