Resources and tools for hacking design together and (alternatively) learning design.
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.
I'm a Student from Stanford University, and this summer I'm launching a bunch of things. This is one of them. Check out my Quora blog to follow along and see more.
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
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/
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
Before I forget, I was thinking of a tool that would be neat. I choose most of my books based on Quora searches. I'd love to build something that just ranks books in different topics based on the number of mentions (and the weight/votes of those mentions) on Quora.
Here's how you can impact where I take this.
Let me know which design 'thing'/info you are most interested in by clicking 2 buttons in a survey here.
##Did you miss that?
###Click here to find out when/if I make this/it's cousin/long-lost twin or something of that nature
(Surprise bonus for anyone that does that - I interviewed a few tech companies. You can pick what content I release first :D)
Did you already fill out the survey? I hope so!
Also - this page is definitely intended to stay up to date. Hence why it is on Github! Submit pull requests as you please.
I'm a computer science student from Stanford University, and this summer I'm trying to launch a few cool things. Join my journey for inspiration and learning.