learn-design

What is this?

Resources and tools for hacking design together and (alternatively) learning design.

My thought process when building this.

Every so often, a post pops up on Hacker News, that sounds something like 'how can I learn design'. There have been a few blog posts and such that attempt to tackle this, however the issue is that those are one time projects, and are soon irrelevant.

So this is my attempt at creating something pretty basic and easy to update, that still captures the important resources needed when learning design.

How could I organize this?

I was first thinking of just going by categories, e.g. Frameworks, Typography tools, Typography books, UX books, Inspiration sites, and so on. Instead, I decided to focus on goals:

• Someone who is about to launch a tool/site/presentation deck and needs a quick fix
• Someone who is (or plans to be) working on a project of their own and wants to learn to design well
• Someone looking to learn or improve their skills to have a career as a designer

A Quick Fix

For small projects, or projects launching soon

###Firstly Skim through these three ultra short summaries.

• http://www.slideshare.net/Wolfr/design-for-developersonlineversionlong
• http://www.scribd.com/doc/32311867/Design-for-Developers
• http://www.slideshare.net/storyviz/purins-tips-on-visual-design

####Prototype + Email/SMS Always worth seeing if you can get away with just a prototype, and then just create a service around email or SMS. Note: This is me thinking about UX. You are reading this because you want to learn design. Maybe you want to do that because you are trying to design something for a project/startup of yours. And maybe just doing a prototype would solve 80% of your problem and be much easier!

For prototypes, try:

• OmniGraffle
• Keynote (with http://keynotopia.com)
• Balsamiq
• Easel.io
• Jetstrap
• Antetype

And a bunch more prototyping tools can be found here, or here.

In a similar vein, check out:

• Launchrock (free)
• Launch Effect (paid)

Email/SMS/Manual first startups:

• http://ryanhoover.me/post/43986871442/email-first-startups
• http://ryanhoover.me/post/48126005449/sms-first-startups
• http://viniciusvacanti.com/2013/05/07/the-manual-first-startup/

####Simple websites Luckily, simplicity and minimalism still (and always) in. So you can try bootstrap with a white background theme and a few buttons and do pretty well.

Adding things like a semi-custom logo, some nice images, nice icons, cool and clean typography can go a long way.

[Sorry, it's super late at night and I'll have to trust that you can Google these names]

Site design kits:

• Bootstrap (+ MagicBootstrap for a theme)
• Foundation
• PureCSS
• Flat UI

Free images:

• Wikimedia Commons
• Flickr CC

Fonts:

• Google Web Fonts (search Beautiful Web Type fonts in google)
• TypeConnection matches

Icons:

• The Noun Project
• Carsonified Toolkit
• Google search: icon search
• http://www.icondeposit.com
• http://somerandomdude.com/work/

Background patterns:

• Subtle Patterns
• Patternizer

Logos:

• Fontorie
• Lettering.js
• SlabText
• TypeButter

Parallax one page sites: (warning, can easily lead to a bad user experience)

• Scrollorama
• Skrollr
• http://zachholman.com/posts/parallaxing-parallax-on-ios/

Also, FYI adding a Themeforest premium theme to a bootstrap site can make it look awesome.

####iPhone prototypes For iOS mockups, check out tools here, here, here and also check out the POP app.

http://www.teehanlax.com/tools/iphone/ The above link is an amazing photoshop PSD of the iPhone interface for high fidelity mockups.

All of these work great combined with this tool for putting your iOS screenshot in a placeholder that makes it look extremely professional. http://placeit.breezi.com/

What's next.

That's up to you.

Currently, I'm planning on extending with a sections on:

Designing for your own projects This will be a bit more resource heavy. Things like:

• Hack Design
• Step by Step UI Design
• Bootstrapping Design
• http://uxdesign.smashingmagazine.com/2010/11/29/persuasion-triggers-in-web-design/
• http://newtome.wordpress.com/2011/12/27/the-design-of-everyday-things-action-summary-and-outline/
• Human-Computer Interaction Course

This is definitely aimed at those doing their own projects who want to be able to design them, rather than:

Designing as a career The most resource heavy section. Lots of books. Things like:

• Hacker News: Learn what UI design is, then learn drawing, layout, typography, color and history
• http://www.quora.com/Which-books-can-help-me-becoming-an-expert-in-UI-UX-and-usability-standards
• Niice - a site to search for inspiration

Also - this page is definitely intended to stay up to date. Hence why it is on Github! Submit pull requests as you please.