learn-design

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

View the Project on GitHub cjbarber/learn-design

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:

A Quick Fix

For small projects, or projects launching soon

Firstly

Skim through these three ultra short summaries.

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:

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

In a similar vein, check out:

Email/SMS/Manual first startups:

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:

Free images:

Fonts:

Icons:

Background patterns:

Logos:

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

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:

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:

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