Design Resources

March 26, 2014


Thinking with Type —One of the books I used in school for learning type basics, dos-and-donts, and hierarchy. It's print-focused (most design books are) but a lot of it extrapolates to web design such as when setting up hierarchies. CSS thinks in terms of H1, H2, etc. while print books think in terms of header, subheader, etc. The not the most exiting but important stuff nonetheless.

Making and Breaking the Grid — This is all about setting up a space with a grid (columns and such). In school we read the part about setting up the grid (probably ~16 pages) to get the gist. Most important takeaways: how long should columns be? How many words, roughly, should be in one row of each column? How do you set up a vertical rhythm? (fancy way of saying, things should line up down the page - it looks nicer).

Wired, Lucky Peach, Kinfolk, Living/Real Simple —All magazines (some of which you might already read) that do different things well. Wired has very strong layout design for feature articles and commissions beautiful photography. Lucky Peach has cool illustration work. Kinfolk has gorgeous photography and does a great job at turning the everyday into a good story. The Martha Stewart magazines both have great hierarchy, typography choices, and photo/text integration. (They commissioned Archer, which is a really beautiful typeface.) Looking at print is just as important as looking at web work; the principles are still the same and lots of incredible designers don't do web work. There are precedents set in print end that end up in web that you can only find if your inspiration comes from lots of different places.


I spend an inordinate amount of time looking at other people's work. These are some of my favorite sites for it:

Dribbble —Snapshots of people's work and process. It's invitation only which keeps the community small and the work quality high. A lot of people use it only for their best work, but Dribbble works best when people use it for progress shots and discussion on how to make their designs better.

Behance —This site is meant for design portfolios rather than snapshots. The best is when people set up overarching project stories, like this one.

Github—Where I find front-end frameworks and jquery plugins among other things. There are a lot of other virtues about Github and the version control system Git it sits on top of, but that would require another article. I use it to follow my favorite developers (such as @fat and @mdo, the creators of Bootstrap, for example) and see what they're up to.


Smashing Magazine — Design advice for web and mobile specifically.

A List Apart —Longer more in-depth articles on web design and typography.

CSS-Tricks— CSS tutorials and other helpful tips on Javascript and jQuery. If you've ever googled something CSS related, Chris Coyier probably came up. The online editor he runs is also great (Codepen) since you can specify HAML instead of plain HTML for example, or SASS without prefixes instead of CSS, making it better for certain things than JSFiddle is.

Popular Designers/Typefoundries

Stefan Stagmeister— Famous for having an intern carve words into his body for a poster. Runs a studio that does really interesting work in NY.

Frank Chimero —Influential designer in NY. Wrote an article called What Screens Want that got a lot of buzz.

Chip Kidd —Jurassic Park book cover dude. Has a really great Ted talk here that is on what design is all about.

Jessica Hische —Letter-er. Runs a small studio with one other guy with some pretty huge clients for such a small team (most recently off the top of my head, Moonrise Kingdom's hand-lettered title).

Hoefler & Frere-Jones —Foundry that owns a lot of really famous typefaces (Gotham from the Obama Campaign, Archer _from Martha Stewart, [Didot_]( __from Harper's Bizarre). Pioneers for web type improvements along with Typekit.

Lost Type Co. —Free display fonts. Hard typefaces to use in a way that's elegant but once you poke around this foundry you'll realize you see these fonts everywhere.

Of course, there are a lot of designers I'm not mentioning (Saul Bass, Milton Glaser, Paul Rand) but these are the designers I actively follow.


Finding templates and stuff you can use normally means just… googling it. These are places I often poke around or subscribe to, though:

Creative Market —Free to join and subscribe and you get free stuff weekly. Ocassionally you'll get useful things like design portfolio templates or stock photo packs.

New Old Stock, PicJumbo, LittleVisuals, Unsplash, Death to the Stock Photo, Superfamous, Gratisography, Free Refe, IM Free, Splitshire, Creative Commons —Free stock photos. Best advice I can give is to check the licenses on everything before you charge ahead. Unfortunately with some of the smaller sites there isn't the best index of what's available. A lot of these are sites I go to when I need placeholders/something non-specific.

Iconmonstr, TheNounProject— Free icons. Like my advice above, I'd check licenses on anything you use. Best for really common icons that you shouldn't make from scratch like search icons, user icons, and logout icons.

Pttrns —Setting up apps/websites is often about making sure you follow precedents other have set if you can help it. Pttrns indexes UX patterns for mobile searches, navigations, etc.

Teehan+Lax— Free photoshop templates for all Apple products. Literally the best on the market as every template comes with all of the iOS elements already built so you don't have to build them from scratch.