
Ask HN: Learning Web Design - notnoop
I'm a developer who is interested in doing some web (and CSS) design.  Are there good introductory online tutorials/courses for learning design and best practices?  Any long term tutorials with design exercises, instead of simple How-To's?<p>The question is inspired by the recent design about startup web design [1].<p>1. http://news.ycombinator.com/item?id=1604693
======
nsfmc
Ok, so as someone that walked this path and is currently on the other end as a
freelance graphic and web designer, i'll put out a brain dump.

# Development

1\. For web _development,_ you'll find tons of best practices (i.e.
alistapart, smashingmag, diveintohtml5, etc). This is the easy part, you can
browse these or skim them whenever you get bored. HTML is pretty
straightforward, but css is a bit trickier.

1.5. _An too-long aside on css._ CSS is one of the most important things to
try to master as you actually start implementing design. CSS is pretty gross,
it's alright and not that difficult, but it's gross and it's nearly always a
mess. There are lots of frameworks around that try to remedy this, but i
recommend that you actually try to figure much of it out before you start
adopting frameworks. Similarly, before you _use_ a css reset, you should
actually try doing some work _without_ them (the big problem is that each
browser's default css is rendered inconsistently, so you make some assumption
about webkit and find that opera and mozilla think you're a fool).

EXERCISE ZERO: try to see if you actually understand a) the box model and b)
floats and c) positioning. These are the trickiest things. You can only really
understand these if you try to figure out _how_ you would use any of these
things in practice. I put up a page with some stuff about those topics when i
was teaching a web design class recently: <http://risd.generic.cx/review.html>

# Design

2\. Learn typography. This is a long process. I don't even know how to explain
it correctly, but the most important thing is that you become _incredibly
sensitive_ to typography. Look at stuff around you, think about what's
happening; be critical: ask what about something is successful and if not,
why? Don't be an ass. The first year that you're really getting into
typography, you'll see bad kerning or questionable typography _everywhere_ and
you'll annoy the hell out of your friends, it's usually best to keep these
observations to yourself unless you're geeking out with other type nerds.

EXERCISE ONE: make it a goal of yours to take a photo each day of type
somewhere in your environment. This isn't very hard, but it gets you _looking_
I just did it: <https://twitter.com/nsfmc/status/21232532041>

3\. Learn some art-history. You don't have to learn very much, but the more
your learn, the more you'll have a grounding in what has been
seen/done/discussed/etc. Most importantly, you will be able to be eloquent
about form/aesthetics that you like. It is hard to talk about visual things,
so in this way, it is imperative to have a good set of words when talking
about form. A few great books: Robert Hughes' The Shock of the New, Reyner
Banham's Theory & Design in the First Machine Age, Rosalind Krauss' Passages
in Modern Sculpture.

4\. Make things. this is perhaps the most important thing. Make things and be
critical of them. it is difficult to be critical of things you make, so the
corollary of this is that you should surround yourself with people smarter
than you and that are better designers than you. talk to them about what
you're doing, the worst thing you can do is work in a bubble (this is true in
programming as well, c.f. the myth of the genius programmer [motgp])

5\. There are some books you can look at, i would probably recommend the
following: Armin Hofmann's Graphic Design Manual, Emil Ruder's Typographie: a
manual of design, Josef Mueller-Brockman's Grid Systems in Graphic Design,
Robert Bringhurst's Elements of Typographic Style. Ellen Lupton's Thinking
with Type and John Kane's Type Primer are good intro resources. Also, these
are interesting books:
[http://www.flickr.com/photos/joekral/sets/72157594264845751/...](http://www.flickr.com/photos/joekral/sets/72157594264845751/detail/)
With the Hofmann and Ruder and Lupton books, try to do the exercises with
basic form and type studies, don't just look at all the pretty things they
make.

6\. Develop your taste: nobody is going to tell you what to like and when
you're working with a client, you should be pushing for the union of what you
like and what they need. This is impossible if you have no taste or if you
have no idea what you like. It's possible to have diverse tastes, but you
should start developing the things you like and things you do not. Try to
rationalize your taste and be critical of why you dislike things, this will
help you in critiquing your own work. Your taste and your individual style
will define the work you do as a designer.

EXERCISE TWO: Offer to redesign your friends' blogs. All of them. Blogs are
great examples of typography, hierarchy, systems, and generalized design at
its best. An added bonus, most blogs are not incredibly complex, tumblr, i'm
looking at you :)

7\. Look at five or six of your favorite things that you've made. What can you
tell from this? what do you see? Do you like grids? (i do!) Do you keep using
one font over and over again? Do you fall back on certain things? Do they all
appear to be _yours._ This is sort of designer as auteur, but it's good to
look at yourself and see what you're doing collectively from time to time.

8\. Always try to make whatever you do better. It's easy to stop and say
"sure, that looks fine" but it's more challenging to push something further in
different directions. This is an uncomfortable process because often you don't
know what you're doing when you step out of your comfort zone. Keep working,
you'll either discover things that don't work (useful discoveries!) or things
which are inappropriate. it's easy to become complacent, avoid it at all
costs.

9\. Really, i can't stress this enough: _learn and practice and do your best
to be a good typographer._ Typography is the one thing that sets apart the
field of graphic design. Design is many things, but it nearly always includes
the use of letters to communicate. If you're on the web, you're probably _not_
using hand-drawn type, so you can focus on using foundry type in novel and
creative ways. Really, focus on typography.

10\. Some current magazines and things i like to look at: Dot Dot Dot is
always a good read and is tangentially design related. their DDDG compilation
book is great. Baseline magazine is always worth a read and always has
fantastically written articles. Eye magazine is equally fantastic. I look at
graphic hug [graphichug.com] all the time, it's up there with
swissmiss[<http://www.swiss-miss.com/>], under consideration
[<http://www.underconsideration.com/>] and but does it float
[<http://butdoesitfloat.com/>]

Sorry, this went on really long, but there's really a ton to learn if you want
to go the traditional rout. If i look back on this post, i'd say take a gander
at the books listed and the periodicals and make stuff and learn as much as
you can by being critical of yourself and things you see.

\--

p.s. Don't be a mean typographer when a friend makes something with papyrus or
comic sans, at least they were unafraid to make something they thought was
beautiful. Having taste is ok, being a cruel snob is _not_ ok.

[motgp]:
[http://code.google.com/events/io/2009/sessions/MythGeniusPro...](http://code.google.com/events/io/2009/sessions/MythGeniusProgrammer.html)

~~~
henrikschroder
When it comes to CSS, the best tool I've ever used is firebug,
<http://getfirebug.com/>

It's invaluable to have a tool that lets you inspect everything on your page
and show you _why_ each element is styled as it is and _where_ in the goddamn
CSS file the line is that caused you to start tearing out your hair.

~~~
seanlinmt
The best part about firebug is that it allows you to change the css on the
spot and you get to see how that affects your layout immediately.

~~~
alinajaf
I think I'm in the minority but I've never really seen the appeal. I've always
much preferred chromes developer tools. Right click on anything and choose
'inspect element' to see what I mean.

~~~
pierrefar
But that's how Firebug does it in Firefox!

And on my Chrome, there is a regular inconsistent bug that when I want to
inspect an element, the new tool UI is displayed but the element is not
selected.

------
kloncks
There are a ton of books on the subject, most are fine.

Regarding graphic design, I would check out something like Pixel2Life
(<http://www.pixel2life.com>) as it provides a lot of tutorials and step-by-
step exercises.

Regarding the bigger issue of web design, my best advice to you would be to
start following those in the industry that are proven leaders. Most big
designers write blogs; follow them and read up on their tips. There are also a
number of design magazine-like sources on the Internet, including sites like A
List Apart, Drawar, and Smashing Magazine.

That would be a good mix of both contemplating theory and actual exercises.

------
pbogdan
From the previous threads about design I would recommend "Non-designer's
Design Book" which includes simple exercises. I also found this
(<http://www.betaversion.org/~stefano/linotype/news/169/>) article very
helpful. And "Designing for the Web" book (<http://designingfortheweb.co.uk/>)
which focuses on core principles of design and how to apply them for the web.
For basic understanding of usability I recommend "Don't Make Me think" by
Steve Krug which is an excellent book.

------
hnal943
For CSS, Andy Clarke is my favorite. He wrote Transcending CSS
(<http://www.transcendingcss.com/>) which was very impactful in my
understanding of "semantic" markup, as well as general design philosophy.

------
kmfrk
Read about the basics on <http://htmldog.com> and try it _immediately_. After
running through the entire tutorial, find a project, actual or fictitious.
Visualize what you want it to look like and stick with it and start reading
books once you run into problems.

Smashing Magazine and A List Apart are good places to search for answers to
CSS and HTML in detail. If you read five books before you get your hands
dirty, you can be fairly sure to have forgotten most of it by the time you
actually try it in the wild.

After that, you can check out resources and literature, but don't overtheorize
it. Many people keep researching, when they seem afraid to try the actual
subject.

------
olalonde
As a side note, you don't have to know CSS/HTML to be a web designer. As a
matter of fact, in most places I've worked, web designers did the graphic part
on Photoshop and web developers sliced the images and wrote the HTML/CSS.

~~~
DrJokepu
I don't know why this was downvoted, I totally agree with that. In fact, my
co-founder, who is a graphic designer, knows next to nothing about HTML and
CSS and I like it that way. It's his job to come up with nice designs and it's
my job to make them work on a computer screen. Obviously we discuss things so
he doesn't design stuff that are completely impossible to do in HTML/CSS or
simply infeasible for some reason, but I try to give him as much artistic
freedom as possible while shielding him from technical constraints. It worked
out well so far.

~~~
pbhjpbhj
>It's his job to come up with nice designs and it's my job to make them work
on a computer screen. Obviously we discuss things so he doesn't design stuff
that are completely impossible to do in HTML/CSS or simply infeasible for some
reason, but I try to give him as much artistic freedom as possible while
shielding him from technical constraints.

IMO you are the web designer he is acting like an apprentice. I can see how
you might want to insulate from the technical constraints in effort to push
the boundaries, but if the design is not considering the user's interactions,
accessibility, browser limitations, SEO as well as things like calls to action
and the design goals (profit or throughput or whatever) then they're not doing
web design.

I'd say from your description you're a web designer employing a graphic
artist.

Just 'shop-ing a design and transforming it to markup and styles tends to be
print design that is put online rather than web design.

~~~
metamemetics
^^this.

Web Developer: Backend. Databases, app-logic, server

Web Designer: Frontend. HTML\CSS\JavaScript\PNG web graphics

Graphic Designer: Planning. Creates mockups.

~~~
DrJokepu
Not so sure about that. JavaScript is a quite advanced language, below the
surface. To be able to do anything non-trivial in JavaScript, you have to be a
developer and have to have a good understanding of Computer Science.

Also, I don't do any "design", in the creative sense. I implement the design
of my partner. So I think your terminology is wrong.

~~~
metamemetics
JavaScript for AJAX and loading new information would be developer yes,
because that is all about querying and interfacing with the back-end.

Simple visual JavaScript effects for enhancing presentation and interface
would be web-designer.

To me the key part of the term "web-designer" is web... you are creating
design using the assembly languages of web browsers: HTML, CSS, JavaScript,
and small quick-to-load chunks of graphics. Drawing is just the first planning
step and there is nothing that makes it "web" specific other than an
intention. Whereas in "graphic" design this is the end result. A graphic
designer designs instructions for a graphics display process to display
graphics, a web designer designs instructions for a web browser to display web
pages.

------
peng
View source and attempt to recreate websites you like. I suggest copying
designs from other media too: there's plenty of untapped potential in print.
Keep a scrapbook with bits of design you like looking at. You'll develop a
personal style over time.

I do interface design as a living, and that's my tip.

------
dublinclontarf
Do a rough sketch on paper, then a heavily detail diagram in GIMP/Photoshop,
then spend your time trying to make the site look as much like the pic as
possible.

Pull out your hair when you then view your site in a different browser when
you realise you'll have to do the same for that one.

------
samdk
Web design is a really broad field. You need to understand HTML and CSS, you
need to understand the limitations of web browsers as a medium, you need to
understand how users interact with webpages, and you need to have a decent
handle on typography/visual design. I don't have good tutorials/articles for
all of these areas, unfortunately: they're things I've learned over a pretty
long period of time by reading a lot of different disparate articles. In
general, A List Apart (<http://www.alistapart.com/>) is an excellent resource
for articles on design. While it's frequently linked, a lot of the stuff on
Smashing Magazine (<http://smashingmagazine.com/>) is awful. Their articles on
how to do things with HTML/CSS are usually decent, but their articles about
actual _design_ usually demonstrate a complete lack of understanding of what
good design is. I'm also haven't really found any resources with good
exercises. One of the things about design is that you really need to be
getting feedback from a real person. If you're doing things and would like
design-related feedback, I'm usually happy to give it. (My email is in my
profile.)

For learning HTML and CSS I recommend HTML Dog (<http://htmldog.com/>). It's a
bit dated and won't cover HTML5/CSS3 stuff at all, but it does teach good
practices, and I haven't found anything better.

I also haven't found a good article/tutorial on web browser limitations. You
need to be aware of web browser width (people generally design for a 1024px
wide browser these days, which means about a 960px wide site), how colors work
on different monitors (some monitors display colors a lot more nicely than
others), serif fonts don't display well at small sizes, it's important to use
fonts designed for the screen, different browsers look different, and a bunch
of other things.

You also need to be aware that not everyone using a computer can see as well
as you, and that it's important to design so that people who are colorblind
can use your site (there are a lot more of them than you might think), and so
that people who use screen readers are able to understand and navigate your
site.

For learning how users interact with your websites, I recommend Jakob
Nielson's writing (<http://www.useit.com/>). I don't agree with all of the
conclusions he draws from his research, but the raw data he presents is
informative. One other important thing to note is that some of the information
about how people interact with websites has changed a lot over the past ten
years. A study done ten years ago isn't necessarily accurate today, because
people are generally a lot more comfortable with using a web browser than they
used to be.

My general rule for web usability is to not play too much with people's
expectations. People know that things that are underlined are often links, and
so I avoid underlining things unless they're links (there are nicer ways to
emphasize something visually, anyway). Similarly, if you have a hover effect
on a button, make sure you can click the whole button, and not just the text
inside the button. Make sure to keep your styling relatively consistent across
a site: it will make much more sense to the people trying to use it. One of
the best things you can do for usability is to put someone who's never seen
your site in front of a computer and watch them try to use it. People do some
things that may seem _very_ strange, and it's really hard to catch all of
them.

Visual design itself is a huge field: I recommend you get started with
typography because it's extremely important, most people don't understand it
at all, and you can decent designs out of boxes and type. Typography for
Lawyers (<http://www.typographyforlawyers.com/>) is one of the best general
overviews of typography I've seen online. There are lawyer-specific details,
but the basics are mostly all there. It's important to remember it's more a
guide for print than for the web though, and that influences things like the
font choices presented.

In general, remember that design is about _purpose_ , not about making
something look pretty. Decide what the point of your design is, and do
everything with that in mind. Are you designing to make people buy a product?
To interest people in a subject? Are you trying to make a point, or to start a
conversation? Every time you're making a decision, remember what the purpose
of your design is, and let that be what makes your decisions for you.

~~~
samratjp
<http://www.quirksmode.org/> is pretty good for what you can do with a
particular browser and realize its limitations.

~~~
gmac
Also <http://www.positioniseverything.net/>

I'd go so far as to say that the only really difficult thing on the technical
side of web design is working round the millions of bugs in IE (and
occasionally the odd one in other browsers). That's usually where over half my
coding time is spent on a new site, client-side.

------
andrewljohnson
When I began, my friend had me start here: [http://www.amazon.com/Think-
Common-Sense-Approach-Usability/...](http://www.amazon.com/Think-Common-Sense-
Approach-Usability/dp/0789723107)

------
abhayv
See also [http://www.quora.com/What-are-the-best-books-on-UI-UX-
design...](http://www.quora.com/What-are-the-best-books-on-UI-UX-design-for-
software-engineers)

------
prasanmishra
Finding better way to learning is always a difficult task. Especially for
those whom english is not the first language. We faced some hard problem and
still facing. To solve this we started a very small attempt. Created a user
generated tutorial site where reader can find simple tutorial post. Please
have a look on our CSS section here already some bunch of basic tutorials
added which we think very helpful for the newbie.

<http://www.codesnipr.com>

------
sharvil
<http://www.cs.washington.edu/education/courses/cse190m/10su/>

------
cmykgraysacale
I would recommend you check out <http://www.reddit.com/r/webdesign> there are
tons of articles submitted and I've learnt a lot from it. Although its a news
aggregator, I learn a ton from the comments.

------
tgandrews
The <http://boagworld.com> podcast/blog is great. They are on hiatus at the
moment but they talk about really interesting parts of web design; tools,
techniques and inspiration.

