Ask HN: Learning Web Design 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? The question is inspired by the recent design about startup web design [1]. 1. http://news.ycombinator.com/item?id=1604693 |
# 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/... 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...
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.
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.
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.
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.
I do interface design as a living, and that's my tip.
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.
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.
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.
Web Developer: Backend. Databases, app-logic, server
Web Designer: Frontend. HTML\CSS\JavaScript\PNG web graphics
Graphic Designer: Planning. Creates mockups.
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.
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.
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.
My point though is that it's first in recent years that we've had tools like these, and they made a huge difference for me helping me undesrtand what the hell goes on with the styles. It's a much nicer workflow than the old edit-reload-check-edit-reload-check model, where you inserted coloured borders to see exactly how large your divs were, and moved things a few pixels at a time until it looked right.
For simple CSS you probably want to be changing it in a seperate text editor that auto-refreshes your web-browser so you have the benefit of being able to save.
The CSS-changing feature you mentioned is of questionable use while the JavaScript features are essential.
I switched to Webkit's JS debugging tool not long ago, it has much better warnings than Firebug.
Usually, I draw a basic sketch on a piece of paper, then write the HTML file in TextMate, and then spend a lot of time in CSSEdit.