Wednesday, October 9, 2013

17 Sites for Web Design Inspiration

Now that anyone can learn to code, and probably should, web design and development are becoming more and more personal in both approach and learning curves.

There's a plethora of ways to tackle web dev and code, and professional designers and developers are no different. We asked several developers from various online publications what their favorite sources are for design and code inspiration, and the results are as varied as the projects these professionals make themselves.

In addition to following various makers on Twitter, these developers cited everything from Reddit to social web apps to coding blogs and general inspiration sites.

Check out their responses below, and let us know what your favorites are in the comments.

GreatDiscontent1Image: The Great Discontent

Tim Wong, senior designer at The Washington Post, pointed to The Great Discontent, a site that features interviews of people in creative fields and presents them with a focus on engaging visuals.

"The site is stunningly simple, and the visuals are grand and are always executed at a compositionally high level," Wong says.

PolygonImage: Polygon

Founded in 2012, Polygon is dedicated to video game news, features and reviews geared toward both professionals and consumers. Like The Great Discontent, there's a lot of attention to design in the makeup of the site itself.

"Polygon, along with many of the other news products from Vox Media, stylistically falls right in line with how I like to discover content," Wong says. "As far as design is concerned, they take a strikingly different approach from The Great Discontent and unabashedly have a lot going on. This style suits my short attention span and promotes serendipitous discovery of new content."

CharlesApple2Image: CharlesApple.com

Wong also keeps up with the blog of Charles Apple, a visual journalist and former graphics director of The Virginian-Pilot and The Des Moines Register. Apple's commentary includes news design, job opportunities and basic design aesthetics.

"While I might not personally agree with all of the points in his blog, he regularly promotes healthy discussion on ethics and standards for design and graphics," Wong says. "Charles often curates the work of other news organizations, so I don't have to go digging every day to find what's going on in the news design community."

WebDesignLedgerImage: Web Design Ledger

Chock-full of tutorials, free templates and resources, Web Design Ledger is a blog dedicated to designers and developers alike.

"It's a well-curated listicle destination highlighting beautiful design work, tips and tricks and fun and/or useful jQuery plugins," Wong says.

SourceImage: Source

Source, a Knight-Mozilla OpenNews project, is a community for journalism coders, developers and designers. Full of commentary and tutorials, Source has a giant pool of contributors from various publications and outlets, including many blogs by developers who analyze their own projects.

"I particularly like sites that give you some 'how-to' or explain the backstory, thinking and prototyping and experiments behind cutting edge visualizations," says Peter Aldhous, San Francisco Bureau Chief for New Scientist magazine.

ChartsNThings2Image: chartsnthings

Aldhous also cited chartsnthings as a source of inspiration. A personal blog that offers insight behind the work of The New York Times graphics team, chartsnthings is a Tumblr maintained by Kevin Quealy, a graphics editor at the Times.

The blog includes the steps that the team takes to make the finished products featured on the Times site, complete with screenshots and intermediate graphics.

RBloggersImage: R-bloggers

Aldhous also follows R-bloggers, a blog dedicated to the open-source R language used by statisticians for web development data analysis. R-bloggers aggregates posts from participating R blogs to create a community for users to learn and discover new commentary.

NICARImage: NICAR Listserv

The National Institute for Computer-Assisted Reporting (NICAR) is part of Investigative Reports and Editors, Inc. and the Missouri School of Journalism. NICAR has been training journalists in the skill of data analysis since 1989, and now hosts a large database of records and code sheets.

"In terms of keeping abreast of what's happening with data analysis and viz in journalism, and getting practical tips and help, the NICAR listserv is phenomenal," Aldhous says. "IRE, from which it sprung, is the best organization in journalism in my view â€" fantastic focus on skill-building."

He also cites ProPublica's News Apps Style Guide as a handy tool for journalist coders.

ffffoundImage: FFFFOUND

FFFFOUND is an image bookmarking community that depends on users to aggregate, post and share images found elsewhere on the web.

"I like to look at sites that just have a lot of visual ideas â€" art, design, photography," says Andrew Garcia Phillips, senior graphics editor at The Wall Street Journal. "I'm a big believer in just exposing your brain to lots of unrelated concepts and letting them stew together. I spend a lot of time scrolling through FFFFOUND and then following those links to their sources."

Garcia Phillips says that a painting of a skyline he once came across on FFFFOUND became the inspiration for a poster for his side project, Chartball.

ChromeExperimentsImage: Chrome Experiments

Garcia Phillips also looked to Chrome Experiments, in addition to other data visualization sites such as Information Is Beautiful and FlowingData, just to stay updated on what others in the coding community are doing.

As the name suggests, Chrome Experiments is from the people behind Google. The site features select projects in the creative coding community, all built in HTML5 and JavaScript with open-source tools. Creators submit their own projects, and the site moderators then choose which ones to feature based on a set of criteria.

PostGraphics2Image: Post Graphics

Similar to chartsnthings from The New York Times, the Post Graphics Tumblr takes a behind-the-scenes look at the projects from The Washington Post.

Alyson Hurt, news apps designer at NPR, cites the blog â€" alongside the blog of Juan Velasco, art director at National Geographic magazine â€" as a useful way to learn about how particular projects are made in well-read publications.

SmashingMag2Image: Smashing Magazine

Hurt points to Smashing Magazine as a resource for coding and web design. Covering a wide range of coding, graphics, mobile design and UX, the Germany-based online magazine offers free resources, best practices and even workshops.

PlanetHaskellImage: Planet Haskell

In addition to Reddit's /r/haskell, Erik Hinton, interactive news developer at The New York Times, checks Planet Haskell, a blog dedicated to the open-source programming language, to stay updated on coding news.

"Even if the projects that I'm working on aren't in Haskell, the community has a pretty strong academic heritage," Hinton says. "This culture results in rigorous, ambitious writing and ideas that really demand close reading."

Hinton also recommends /r/programming and /r/math, which are "useful for getting excited about paradigm-shifting and mapping from one thought domain to another."

EscapistImage: Escapist Magazine

Aside from coding blogs, Hinton looks to game design and review sites such as Escapist Magazine and Rock, Paper, Shotgun for further inspiration.

"Game designers are lightyears ahead of most app and web makers in asking questions about what interactivity entails and how meaningful play happens," Hinton says.

Escapist Magazine, founded in 2005, delivers video gaming news, features and reviews, all revolving around the culture of the contemporary gaming community.

GitHub2Image: GitHub

An essential tool for collaborative coding, GitHub is a staple in the open-source community. Matt Andrews, client-side web developer at The Guardian, also praises GitHub for its native design.

"It's a beautiful, usable interface, which hides a lot of power and complexity, and the developers have clearly gone to great effort to pack in small but crucial features," Andrews says.

He points out that the URLs update dynamically when navigating via JavaScript, and that a comparison tool pops up when showing changes to graphics.

"Attention to detail on this level is key to a brilliant product," he says.

ThisIsMyJamImage: This Is My Jam

A social app that allows users to share single music tracks, This Is My Jam is a simple site that serves one purpose and does it with good design basics in mind.

"In execution, it's genius," Andrews says. "They take the album's artwork and apply a variety of creative image filters to it to produce full-page backgrounds with video and audio overlays. The smartness of taking something as varied as album art and turning it into a web canvas for multiple media is really clever, and beautifully done."

AListApartImage: A List Apart

Started in 1997 as a mailing list, A List Apart is an online magazine with a focus on web design and development commentary, as well as perspectives on the industry in general. With a tagline that says, "For people who make websites," A List Apart is centered around the standards and best practices of web design and content.

"They're the pioneers of the standards-based web design movement, so their recent design refresh shows off their bold, pack-leading mindset," Andrews says. "[A List Apart] is confident and old enough to be able to innovate and rethink things like no one else. A beautiful reading experience and continual influencer."

Image: Flickr, Riebart

Share This!


2 comments:

  1. Hey i like the beginning point of this article where you have discussed about the importance of web design and website development.Thanks for sharing your view.Your post is very informative.Keep on updating.

    http://insigneacademy.com

    ReplyDelete
  2. WIPL is a global leader in providing it services and solutions, software solutions and software solutions services in Delhi.

    For more info : Software Development Company India

    ReplyDelete

Powered By Blogger · Designed By Mashable Articles