

Ask HN: Modern web design resources? - superuser2

What are some modern web design sites/resources?<p>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?
======
csmeder
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...](http://www.amazon.com/Non-Designers-Design-Book-Robin-Williams/dp/0321534042/)

* Visual Language for Designers - [http://www.amazon.com/Visual-Language-Designers-Principles-U...](http://www.amazon.com/Visual-Language-Designers-Principles-Understand/dp/1592535151/)

* Tuft's Envisioning Information - [http://www.amazon.com/Envisioning-Information-Edward-R-Tufte...](http://www.amazon.com/Envisioning-Information-Edward-R-Tufte/dp/0961392118/)

* 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...](http://www.amazon.com/Design-Sites-Patterns-Creating-Winning/dp/0131345559)

* And again Tuft's Envisioning Information - [http://www.amazon.com/Envisioning-Information-Edward-R-Tufte...](http://www.amazon.com/Envisioning-Information-Edward-R-Tufte/dp/0961392118/)

* Information Design Workbook [http://www.amazon.com/Information-Design-Workbook-approaches...](http://www.amazon.com/Information-Design-Workbook-approaches-inspiration/dp/1592536271/)

\----------------------------------------------------------

 _c. (software design and coding)_

* Bulletproof Web Design - [http://www.amazon.com/Bulletproof-Web-Design-flexibility-pro...](http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321509021/)

* Handcrafted CSS - [http://www.amazon.com/Handcrafted-CSS-More-Bulletproof-Desig...](http://www.amazon.com/Handcrafted-CSS-More-Bulletproof-Design/dp/0321643380/)

* jQuery in Action - [http://www.amazon.com/jQuery-Action-Second-Bear-Bibeault/dp/...](http://www.amazon.com/jQuery-Action-Second-Bear-Bibeault/dp/1935182323/)

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

~~~
photon_off
Here are some other related websites that might interest you:

[http://www.moreofit.com/similar-
to/?url=http%3A%2F%2Fdesigni...](http://www.moreofit.com/similar-
to/?url=http%3A%2F%2Fdesigningfortheweb.co.uk%2Fbook%2Findex.php)

------
jack7890
Pattern tap (<http://patterntap.com/>) is great for finding examples of
individual design elements.

~~~
photon_off
You could also try any of the sites listed here:

[http://www.moreofit.com/get_matches.php?url=http%3A%2F%2Fpat...](http://www.moreofit.com/get_matches.php?url=http%3A%2F%2Fpatterntap.com%2F)

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

~~~
nnash
> 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://blog.anomalyinnovations.com/2010/03/creating-a-realistic-
looking-button-with-css3/)

[http://net.tutsplus.com/tutorials/html-css-
techniques/build-...](http://net.tutsplus.com/tutorials/html-css-
techniques/build-kick-ass-practical-css3-buttons/)

[http://net.tutsplus.com/tutorials/html-css-
techniques/quick-...](http://net.tutsplus.com/tutorials/html-css-
techniques/quick-tip-practical-css-shapes/)

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

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

~~~
nnash
I wish I had enough karma to down-vote you for insinuating that the current
browser implementations of the CSS3 draft aren't CSS.

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

------
superuser2
(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.)

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

------
lowglow
The newest I've seen is <http://forrst.com>, I love it there.

~~~
Sember
Invite-only

~~~
kylebragger
email kyle at forrst.com with the subject HN invites and I'll hook you up.

~~~
Sember
Thanks I sent out an e-mail, here's mine just in case mirsad.saci AT gmail.com

------
zacharyvoase
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...](http://www.amazon.co.uk/Dont-Make-Me-Think-
Usability/dp/0321344758)

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

------
jarin
ColourLovers, 0to255.com, css3please.com, Smashing Magazine

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

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

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

------
misterbra
There's Smashing Magazine and Six Revisions that I follow.

------
alexyim
_The Smashing Book_ is good

------
pers3us
What exactly are you looking for, and on which development platform?

------
UXMovement
If you like UX philosophy and principles, <http://www.UXMovement.com> is a
great resource for learning about user experience.

------
whatwhatwhat
You come to me for the good stuff...

