Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Ask HN: Modern web design resources?

news.ycombinator.com

Post reply on HN
Print view View original

11–20 of 37 posts

Re: Ask HN: Modern web design resources?

#11

Post by 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...

* 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?

#13

Post by caffeine »

csmeder wrote: post #11

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…

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?

#14

Post by daleharvey »

csmeder wrote: post #11

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…

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?

#16

Post by 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.)

Re: Ask HN: Modern web design resources?

#18

Post by ewoodh2o »

csmeder wrote: post #11

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…

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?

#19

Post by nnash »

metamemetics wrote: post #10

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…

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

Post reply on HN