7 ms·
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?
- pers3us 16y agoWhat exactly are you looking for, and on which development platform?
- whatwhatwhat 16y agoYou come to me for the good stuff...
- misterbra 16y agoThere's Smashing Magazine and Six Revisions that I follow.
- jarin 16y agoColourLovers, 0to255.com, css3please.com, Smashing Magazine
- forcetenhen 16y agoSmashing 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 16y agoI 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 16y agoThat'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.
- nnash 16y agoTheir 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.
- jack7890 16y agoPattern tap (http://patterntap.com/ http://patterntap.com/) is great for finding examples of individual design elements.
- photon_off 16y agoYou could also try any of the sites listed here: http://www.moreofit.com/get_matches.php?url=http%3A%2F%2Fpatterntap.com%2F http://www.moreofit.com/get_matches.php?url=http%3A%2F%2Fpat...
- metamemetics 16y agoPerhaps 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 16y ago> 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-realistic-looking-button-with-css3/ http://blog.anomalyinnovations.com/2010/03/creating-a-realis... http://net.tutsplus.com/tutorials/html-css-techniques/build-kick-ass-practical-css3-buttons/ http://net.tutsplus.com/tutorials/html-css-techniques/build-... http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-practical-css-shapes/ 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.
- metamemetics 16y agoCSS3 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 16y agoI wish I had enough karma to down-vote you for insinuating that the current browser implementations of the CSS3 draft aren't CSS.
- csmeder 16y agoI'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-Williams/dp/0321534042/ http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia... * Visual Language for Designers - http://www.amazon.com/Visual-Language-Designers-Principles-Understand/dp/1592535151/ http://www.amazon.com/Visual-Language-Designers-Principles-U... * Tuft's Envisioning Information - http://www.amazon.com/Envisioning-Information-Edward-R-Tufte/dp/0961392118/ http://www.amazon.com/Envisioning-Information-Edward-R-Tufte... * I have found some good online articles http://delicious.com/csmeder/ux 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 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/dp/0131345559 http://www.amazon.com/Design-Sites-Patterns-Creating-Winning... * And again Tuft's Envisioning Information - http://www.amazon.com/Envisioning-Information-Edward-R-Tufte/dp/0961392118/ http://www.amazon.com/Envisioning-Information-Edward-R-Tufte... * Information Design Workbook http://www.amazon.com/Information-Design-Workbook-approaches-inspiration/dp/1592536271/ http://www.amazon.com/Information-Design-Workbook-approaches... ---------------------------------------------------------- c. (software design and coding) * Bulletproof Web Design - http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321509021/ http://www.amazon.com/Bulletproof-Web-Design-flexibility-pro... * Handcrafted CSS - http://www.amazon.com/Handcrafted-CSS-More-Bulletproof-Design/dp/0321643380/ http://www.amazon.com/Handcrafted-CSS-More-Bulletproof-Desig... * jQuery in Action - http://www.amazon.com/jQuery-Action-Second-Bear-Bibeault/dp/1935182323/ http://www.amazon.com/jQuery-Action-Second-Bear-Bibeault/dp/...
- caffeine 16y agoExcellent! What a helpful list. This is one of my major stumbling blocks as a programmer trying to build usable apps.
- lowglow 16y agoThe newest I've seen is http://forrst.com http://forrst.com, I love it there.
- nnash 16y agoYou should check out http://dribbble.com/ http://dribbble.com/
- Sember 16y agoInvite-only
- kylebragger 16y agoemail kyle at forrst.com with the subject HN invites and I'll hook you up.
- Sember 16y agoThanks I sent out an e-mail, here's mine just in case mirsad.saci AT gmail.com
- alexyim 16y agoThe Smashing Book is good
- superuser2 16y ago(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 16y agoA pretty sweet site our design intern pointed me at was: http://siteinspire.net/ 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.
- zacharyvoase 16y agoI’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/0321344758 http://www.amazon.co.uk/Dont-Make-Me-Think-Usability/dp/0321...
- guiseppecalzone 16y agoThis 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.
- UXMovement 16y agoIf you like UX philosophy and principles, http://www.UXMovement.com http://www.UXMovement.com is a great resource for learning about user experience.