News for hackers. Stuff that matters.

Ask HN: Modern web design resources?

What are some modern web design sites/resources?

It appears nettuts has some good stuff, as does themeforest... most of my searching led to crappy, outdated resources, worlds inferior to these. (I'm looking at you, SitePoint...) Where do I go for the good stuff?

( 36 comments | 111 points | on HN )
Re:Ask HN: Modern web design resources? by csmeder on Saturday July 10, 2010 @12:19PM (#1503878)
I'm not sure I know exactly what you mean by web design. So lets start there.

a. The look: the graphic design of the page.

b. The interaction: Usability and UX

c. Designing and coding with good software design principles.

d. Some thing else?

I can point you to some good books for b. or c., however a. is the holy grail. I have never found a good book on web design from a graphic design perspective. That said Ill share with you what I would consider the closest I have found.

----------------------------------------------------------

a. (Web site Graphic Design)

* The non Designer's design book - http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...

* Visual Language for Designers - http://www.amazon.com/Visual-Language-Designers-Principles-U...

* Tuft's Envisioning Information - http://www.amazon.com/Envisioning-Information-Edward-R-Tufte...

* I have found some good online articles http://delicious.com/csmeder/ux

----------------------------------------------------------

b. (Usability and UX)

* Web Form Design: Filling in the Blanks - http://www.lukew.com/resources/web_form_design.asp

* The Design of Sites: Patterns for Creating Winning Web Sites - http://www.amazon.com/Design-Sites-Patterns-Creating-Winning...

* And again Tuft's Envisioning Information - http://www.amazon.com/Envisioning-Information-Edward-R-Tufte...

* Information Design Workbook http://www.amazon.com/Information-Design-Workbook-approaches...

----------------------------------------------------------

c. (software design and coding)

* Bulletproof Web Design - http://www.amazon.com/Bulletproof-Web-Design-flexibility-pro...

* Handcrafted CSS - http://www.amazon.com/Handcrafted-CSS-More-Bulletproof-Desig...

* jQuery in Action - http://www.amazon.com/jQuery-Action-Second-Bear-Bibeault/dp/...

Re:Ask HN: Modern web design resources? by irondavycole on Saturday July 10, 2010 @05:23PM (#1504374)
For (a) I would recommend Mark Boulton's book, Designing for the Web, which is available free online:

http://designingfortheweb.co.uk/book/index.php

It has really competent sections dedicated to aesthetics: typography, color, and layout. That he made it free is unbelievable. It's a resource I always recommend to the developers I work with (I'm a designer) who want to understand more about design.

Re:Ask HN: Modern web design resources? by photon_off on Tuesday July 13, 2010 @10:15AM (#1511416)
Here are some other related websites that might interest you:

http://www.moreofit.com/similar-to/?url=http%3A%2F%2Fdesigni...

Re:Ask HN: Modern web design resources? by ewoodh2o on Saturday July 10, 2010 @01:39PM (#1504022)
I found the SitePoint book "The Principles of Beautiful Web Design" (http://www.amazon.com/Principles-Beautiful-Web-Design/dp/097...) to be very informative as well. It's a great introduction to a lot of different aspects of design that programmers generally don't think about when trying to mimic more professionally-designed sites. I read it two years ago, and it was a bit easier to digest at the time because most of the designs presented still felt current.

However, keep in mind that while the designs presented in many of these resources may look outdated, the principles behind them are solid. Tastes and trends may change, but running through a few Photoshop tutorials will get you up to speed on the execution of the latest styles. More importantly though, design basics such as readability, whitespace, proximity, alignment, proportion, color, texture, etc are timeless. If you can distill those important aspects from the materials you're reading, you'll be much better off in the long run than if you just try to copy techniques from whatever the most modern resource currently is.

Re:Ask HN: Modern web design resources? by jamesbritt on Saturday July 10, 2010 @03:31PM (#1504205)
(a) is quite the tough one. Large part of the problem is taste. You need it, as does the author of any guidelines, and you and the author need to be in sync.

Worth looking into are grid layouts, and CSS frameworks that making working with grids easier. I'm a fan of 960gs, but there are a few good ones.

http://www.thegridsystem.org/

http://delicious.com/jamesbritt/Grid

Re:Ask HN: Modern web design resources? by DenisM on Saturday July 10, 2010 @04:09PM (#1504252)
I suggest you read the non-designers design book. A lot of it is pure math - colors, alignment, contrast, repetition, and proximity. Even if you won't learn how to design you will learn to tell good design from bad, and what makes it so.

Stay away from Kindle version though - in a twist of irony the book's layout has been severely corrupted, serving more as an anti-example to its own content.

Re:Ask HN: Modern web design resources? by daleharvey on Saturday July 10, 2010 @12:48PM (#1503930)
great list, thanks

I wrote a blog post the went very briefly about design tips for programmers

http://arandomurl.com/2010/07/07/design-tips-for-programmers...

there is also a few linked resources from there, the video and the book at the end are really good.

Re:Ask HN: Modern web design resources? by csmeder on Saturday July 10, 2010 @05:37PM (#1504397)
Ha, yes I liked it. In fact your actually part of the list above under:

I have found some good online articles http://delicious.com/csmeder/ux

Re:Ask HN: Modern web design resources? by barmstrong on Saturday July 10, 2010 @02:32PM (#1504113)
Added yours to this list (with some voting) in case anyone is interested:

http://buyersvote.com/categories/the-best-books-to-learn-gra...

Re:Ask HN: Modern web design resources? by caffeine on Saturday July 10, 2010 @12:39PM (#1503915)
Excellent! What a helpful list. This is one of my major stumbling blocks as a programmer trying to build usable apps.
Re:Ask HN: Modern web design resources? by jack7890 on Saturday July 10, 2010 @12:00PM (#1503840)
Pattern tap (http://patterntap.com/) is great for finding examples of individual design elements.
Re:Ask HN: Modern web design resources? by photon_off on Tuesday July 13, 2010 @10:14AM (#1511412)
You could also try any of the sites listed here:

http://www.moreofit.com/get_matches.php?url=http%3A%2F%2Fpat...

Re:Ask HN: Modern web design resources? by metamemetics on Saturday July 10, 2010 @12:12PM (#1503865)
Perhaps HNers could share general design tips as well?

These are the two most important to me:

1) Don't use Adobe Photoshop. Use Adobe Fireworks. It's faster and simpler and everything you need for web stuff (gradients, masks, etc.). Use PNGCrush on any PNGs to remove all the extra info and layers before deploying.

2) Spacing\padding is one of the most important things that determines how professional a site looks to users, even if they can't verbalize it. For navigation buttons or tabs, a background height to inner font-height ratio of 2:1 looks way more professional than 1:1.

Re:Ask HN: Modern web design resources? by nnash on Saturday July 10, 2010 @01:56PM (#1504050)
> Don't use Adobe Photoshop

I'll disagree and say that Photoshop is faster and simpler, why? Because I'm better with it.

Use whatever graphics program you're best with.

First of all if you're only using gradients and layer effects like multiple borders most of that stuff can be done with CSS now.

The links below are for buttons and shapes but you can apply those effects to anything:

http://blog.anomalyinnovations.com/2010/03/creating-a-realis...

http://net.tutsplus.com/tutorials/html-css-techniques/build-...

http://net.tutsplus.com/tutorials/html-css-techniques/quick-...

Also photoshop is just as competent at saving images with those effects if you convert it to a smart object and rasterize it first.

Re:Ask HN: Modern web design resources? by metamemetics on Sunday July 11, 2010 @02:16PM (#1505883)
CSS3 or webkit extensions or mozilla extensions != CSS. I would never use any of those methods (for say, the next 2 years or if it was only a personal site I didn't care about and not a customer site).

Also the learning curve to do stuff faster with Fireworks than Photoshop is maybe 30 minutes, it's that simple.

Re:Ask HN: Modern web design resources? by nnash on Monday July 12, 2010 @08:28AM (#1507584)
I wish I had enough karma to down-vote you for insinuating that the current browser implementations of the CSS3 draft aren't CSS.
Re:Ask HN: Modern web design resources? by metamemetics on Tuesday July 13, 2010 @12:50AM (#1510401)
1. CSS==CSS1, CSS3==CSS3. CSS3!=CSS1. 100% of users see CSS1, 50% see CSS3.

2. Everything was explicit, there were no insinuations.

3. You aren't allowed to downvote replies to your own comment even if you had higher karma.

Re:Ask HN: Modern web design resources? by superuser2 on Saturday July 10, 2010 @01:00PM (#1503945)
(This was an intentionally vague question, but I'm talking about visual design of websites and applications. That could be anything from principles/theory to reusable elements/templates to Photoshop/HTML/CSS tutorials. There seems to be less trash floating around in the usability world.)
Re:Ask HN: Modern web design resources? by kineticac on Saturday July 10, 2010 @01:35PM (#1504014)
A pretty sweet site our design intern pointed me at was: http://siteinspire.net/

It has some really nice designs that are more trendy now a days than ever before. UX less tried as usual, but looks visually cool and super modern.

Re:Ask HN: Modern web design resources? by lowglow on Saturday July 10, 2010 @12:37PM (#1503910)
The newest I've seen is http://forrst.com, I love it there.
Re:Ask HN: Modern web design resources? by nnash on Saturday July 10, 2010 @01:59PM (#1504056)
You should check out http://dribbble.com/
Re:Ask HN: Modern web design resources? by Sember on Sunday July 11, 2010 @05:38AM (#1505275)
Invite-only
Re:Ask HN: Modern web design resources? by kylebragger on Sunday July 11, 2010 @09:22AM (#1505439)
email kyle at forrst.com with the subject HN invites and I'll hook you up.
Re:Ask HN: Modern web design resources? by Sember on Monday July 12, 2010 @05:10AM (#1507284)
Thanks I sent out an e-mail, here's mine just in case mirsad.saci AT gmail.com
Re:Ask HN: Modern web design resources? by zacharyvoase on Saturday July 10, 2010 @05:59PM (#1504437)
I’ve heard very good things about Steve Krug’s ‘Don’t Make Me Think’: http://www.amazon.co.uk/Dont-Make-Me-Think-Usability/dp/0321...
Re:Ask HN: Modern web design resources? by guiseppecalzone on Sunday July 11, 2010 @05:56PM (#1506221)
This is perhaps one of the best books on usability that I've read. Steve Krug also walks the walk and makes this book super usable to read.
Re:Ask HN: Modern web design resources? by jarin on Saturday July 10, 2010 @11:55AM (#1503821)
ColourLovers, 0to255.com, css3please.com, Smashing Magazine
Re:Ask HN: Modern web design resources? by forcetenhen on Saturday July 10, 2010 @11:57AM (#1503828)
Smashing Mag's Twitter feed I find to be be more useful than the site itself. There's a fair bit of fluff but there's a lot of good stuff too. Plus, it's updated at a furious rate.
Re:Ask HN: Modern web design resources? by ThomPete on Saturday July 10, 2010 @12:00PM (#1503841)
I can't stand Smashing Mag. Yes there are some good articles, but seriously most of that is simply linkbait articles, 10 this and 25 that.
Re:Ask HN: Modern web design resources? by forcetenhen on Saturday July 10, 2010 @12:03PM (#1503849)
That's why I like the twitter. It's more "look at this X" and a direct link without all the padding that would go into justifying an article.
Re:Ask HN: Modern web design resources? by nnash on Saturday July 10, 2010 @02:00PM (#1504058)
Their twitter feed is good, but there is a lot of stuff that will pop up on there that I've known about for a month already.
Re:Ask HN: Modern web design resources? by misterbra on Saturday July 10, 2010 @11:45AM (#1503808)
There's Smashing Magazine and Six Revisions that I follow.
Re:Ask HN: Modern web design resources? by alexyim on Saturday July 10, 2010 @12:59PM (#1503943)
The Smashing Book is good
Re:Ask HN: Modern web design resources? by pers3us on Saturday July 10, 2010 @11:15AM (#1503754)
What exactly are you looking for, and on which development platform?
Re:Ask HN: Modern web design resources? by UXMovement on Sunday July 11, 2010 @09:39AM (#1505457)
If you like UX philosophy and principles, http://www.UXMovement.com is a great resource for learning about user experience.
Re:Ask HN: Modern web design resources? by whatwhatwhat on Saturday July 10, 2010 @11:44AM (#1503807)
You come to me for the good stuff...