How-to's on current (design) trends in Web Design?

March 26, 2013 2:30 PM

My web design skills have gotten a bit rusty over the past few years (too much coding, not enough Photoshopping!) and I'm in a hurry to get back up to speed for a huge job I'm starting on next week. Normally I would figure this all out on my own but there's no enough time for that so... I need recommendations for good resources (blogs, books, magazines) on current trends in web design and on how to implement/execute elements of these trends in software like Photoshop. This article on the Smashing Magazine site is a good example of the sort of thing I'm looking for, except it doesn't include any how-to's. Pointers to useful templates / frameworks / web design kits are most welcome as well.
posted by dinkyday to Computers & Internet (9 answers total)

You must check out Twitter Bootstrap. It works out-of-the-box on desktop and mobile so you cover the biggest "trend" of all, which is, Responsive Design.

Another important "trend" is Retina Web.
posted by rada at 2:50 PM on March 26, 2013 [6 favorites]

Check out this book on Responsive Web Design. Their bundle of HTML5 and CSS3 books are also good.

Some of the Photoshop effects in the article you linked are tutorialized here and links to more tutorials here.
posted by dayintoday at 3:12 PM on March 26, 2013 [2 favorites]

I get that you want tutorials on what will have been the design and layout cliches of 2013, but maybe look at HTML5/JS-based Flash replacements like CreateJS and Adobe's Edge Tools (coincidentally including Edge Reflow, a tool for responsive design that they have in preview apparently). I can't say I'm thrilled about it, but animations will probably come around again as performance and platform issues disappear.
posted by Monsieur Caution at 3:23 PM on March 26, 2013

Foundation is a good front end framework to work with.
posted by juiceCake at 4:10 PM on March 26, 2013

Honestly, I would pursue some of the things you can do these days with CSS3, things that previously were only available with images. It really is pretty amazing the sorts of things you can do now, that work very well indeed anywhere other than older IE versions (as usual). I think you'll find that a lot of what is current in terms of design trends eschews the kind of image-heavy photoshop-sliced stuff of the past and goes more for simplicity and elegantly-degrading designs using CSS3, judicious scripting, and (increasingly) HTML5.

Here's another SmashingMag article from a year ago that talks about some of that.
posted by stavrosthewonderchicken at 7:02 PM on March 26, 2013

Best answer: To your question, though, speckyboy is one of the sites I keep an eye on for resources and tools and freebies (including psd stuff), and stylesinspiration is one I have a look at once in a while to see what's current in design trends and stuff.
posted by stavrosthewonderchicken at 9:17 PM on March 26, 2013 [1 favorite]

Cordrops is also a good resource to follow - a mix of tutorials and inspiration. Their weekly "collective" has the right blend for me.
posted by motdiem2 at 5:28 AM on March 27, 2013 [1 favorite]

Best answer: Agile Designers -- great compendium of web development resources. Web Platform Tools is a similar thing...

Tuts+ is the granddaddy of web design tutorial sites. The quality isn't always awesome, but there are some great tutorials if you sift through it. Also, they do keep on top of design trends.

Web Platform Daily is a new one, and does a great job of compiling all of the day's best web development news and resources into a single page. (Like a daily -- but broader -- version of JavaScript weekly or HTML5 Weekly, which you should also be reading)

Hack Design has some design lessons geared toward developers.
posted by schmod at 7:29 AM on March 27, 2013 [2 favorites]

Web Resources Depot has a lot of pdf freebies, too, if that's the way you want to go. Webappers usually has good stuff as well.
posted by stavrosthewonderchicken at 4:29 PM on March 27, 2013