

Crash Course: Design for Startups - PStamatiou
http://paulstamatiou.com/startup-web-design-ux-crash-course

======
nsfmc
i don't know, i'm a little conflicted here because really, really, i know this
is gonna sound stupid but the best way to get good is to _make a lot of shit_
and then, after you don't feel weird about what you made, you _show it to
people_ who have taste (or that you value) and _get critique._

I think you should design the way that you ______. Do you code? Apply that
mindset to your design. Do you just hammer something out or do you try to
improve it? Do you look for inspiration from other projects on github? Do you
look for inspiration in orthogonal things like architecture or nature or
industrial design or _____. Apply that to your design. Apply the same
standards from something you're _passionate_ about to your budding design
work, it'll show. The more you make this _your process_ the more your design
will be _your design._

as with all other things, there's a whole lot of cargo cult design where you
toss in a grid and you dutifully build up some crazy type hierarchy or you use
_appropriate fonts_ or just plop down a müller-brockman layout or a tschichold
page proportion or three sizes, two weights of helvetica neue, etc. You can
convince yourself this is "correct," but sometimes you're just going through
the motions. I've made a ton of absolute crap but sometimes i make something
and i'm like "oh wow, _that's_ an actually appropriate use for a grid, man
what a total cock up that other project was."

It's very easy to make and parrot the current zeitgeist (just look at forrst),
but it's hard to go out on a limb and try to make something that comes from
_you._ It's even harder to make it something that other people will see and
say "oh neat, i like that even though it's a little weird," and that's what
_practice_ does to you, but it doesn't come overnight, it takes effort, like
anything worth doing, like programming or cooking or sports or _____.

The things that make you great in design are the things that make you great in
any other field: passion, curiosity, exploration, failure, practice,
communication and critique. all in great quantity. this is the moral you see
on hn a lot, so it's like preaching to the choir, but go outside your comfort
zone and try to make what's in your brain; it's a humbling and rewarding path.

i don't want to knock the post, it's fine, but also keep in mind that not
everything needs to look like a startup website. I'm _tired_ of friendly blue
all the time, i want to see new designs, i want to see people going on a limb.
I guess what i'm saying is: this is design for conversion sake, not for
design's sake, and those are _two totally different pots of gold._

~~~
swah
Next time, don't prepare the reader to read shit and then... gives us a very
sensible comment. It loses vigor :)

------
kmfrk
Mark Boulton's posts really are some of the best typography eye-openers.
Especially his "Five Steps" posts[1][2] were what got me into design and made
me "get" it. And it didn't take a lot of time to read through them. I
recommend that people skip his book and read these two pieces instead.

Bear in mind that the grid guide is more of an intro piece; you probably won't
be able to create grid-based websites after reading it (I know I wasn't).

Another good resource is Typography for Lawyers[3]. I'm actually very
surprised (and disappointed!) that Paul didn't mention it. It's recently
undergone a redesign, which has rendered all its former links broken, and it
seems a little harder to navigate and browse for fun, but you _must_ flip
through the digital pages. It's probably the best typography resource for
newcomers along with Boulton's 5-step guides.

I also just combed through my bookmarks to see if Boulton had anything else,
and a great presentation popped up[4]. It, too, is great to get you into the
typographic mindset.

These are really the best way to get someone into typography, and they are
quick to read; no resounding _THUMP_ from dumping seemingly insurmountable
literature on your desk.

Of course, once you've got the bug, it'll never leave you, and a lot of the
world will look a lot worse and be more painful for it. Educate yourself at
your own risk.

[1]: [http://www.markboulton.co.uk/journal/comments/five-simple-
st...](http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-
better-typography)

[2]: [http://www.markboulton.co.uk/journal/comments/five-simple-
st...](http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-
designing-grid-systems-part-1)

[3]: <http://www.typographyforlawyers.com/?page_id=1876>

[4]: <http://webtypography.net/sxsw2007>

NB! At some point, Boulton has changed his site, which has rendered the links
to the other parts invalid. To remedy this, replace the underscores (_) in the
links with dashes (-).

------
nopal
I've seen several of these on HN in the past few months, and this one is
definitely my favorite.

This post is well-written and covers a huge range of topics. I found the
information detailed enough to point me in the right direction without going
over my head. I also appreciate the tips on which design resources the author
found valuable. Good stuff!

~~~
PStamatiou
Wow, that's great to hear. I honestly had no idea if this was going to be
helpful.. it kind of felt like a raw, disorganized brain dump when I was
writing it.

~~~
waterside81
You're too hard on yourself. This has to be one of the most informative HN
articles I've ever read. You gave very specific advice rather than waving your
hands around. You provided sources where others can learn what you've learned.
This is a template for a "how-to" post.

------
bradya
Using LittleSnapper (or equivalent tool) to take and archive screenshots of
well-done page designs is a really good way to enhance brainstorming.

After months or years of doing this, you build up an asset that has real value
to you and other designers.

You should consider posting your screenshot library - I'm sure quite a few
designers would be interested in it (or at least links to the pages, to avoid
any copyright issues). New webapp idea?

~~~
philfreo
I've used Delicious for this for years. I used to just tag stuff as "design"
but over the years my taste has changed and so now the good stuff is more
like: <http://delicious.com/philfreo/design+amazing+inspiration>

------
gbog
If I can take an opposite view, I think this article on design is far from
useful. It is stuffed with unproven generalizations (like, why the hell should
plain edges be "boring"? why should we "adjust opacity"?). Better read Jacob
Nielsen on this.

------
Dramatize
Something I find helpful is to start coding the basic outline in a browser,
then take a screenshot and cut up the design in Photoshop.

It's then really quick to experiment with different layouts and adjustments.

------
fuzzythinker
Wow, this is the damn best design blog post I've seen. Down to earth
explanations, plenty of examples & resources, can't ask for more, thank you so
much for taking the time to write & share this!

------
rgrieselhuber
I've been wanting someone to write a post like this for the longest time.
Thanks very much, Paul.

------
AndyNemmity
That's a ton of information, and the more I read it, the more confused I feel.

I run a website called <http://deeproute.com>

It's a football general manager website with fake players. It's a full game.
Take just the front page. There are all sorts of theoretical things to do, but
I just want people to join.

Should I chop it up, and put jquery picture viewers all over the place with
any half way relevant picture towards the game?

Maybe buy some stock photos of attractive, diverse people looking excited,
which surely would be about any topic other than this game.

I don't know. I get lost in all the options, and a huge post like this doesn't
help.

~~~
pkteison
I came across <http://carwoo.com/blog/design-tips/> the other day, I think on
a post from here but not sure. I think it speaks directly to these specific
questions.

~~~
AndyNemmity
Thanks, reading it now

------
rits
I know the hacker's absolute weapon for testing quality of web design. Just
make a screenshot of your site. And try to write a program that can recognize
on this picture all the important stuff (headings, paragraphs, links, phones,
keywords...) and determine the UI elements and other stuff (headers, footers,
menus, buttons, ADs, etc). If writing such program would be easy deal, then
your design is good enough.

------
mcdowall
If that's your stencil in that pic, any idea of where I can get a hold of one,
would be great for my notebook mockups

~~~
PStamatiou
<http://www.uistencils.com/>

~~~
mcdowall
Wicked, thanks!

------
d_r
What an excellent post. If nothing else, and you're a coder who wants to spend
the bare minimum amount of time improving your designs, I highly recommend
grabbing "The non-designer's designer book" mentioned in the text.

------
JoelSutherland
You need to bring back your logo! I thought it was well designed and
memorable. It wasn't until I scrolled down and saw it in a previous design
that I realized that this new design was your site.

~~~
PStamatiou
That has been on my mind a bit recently.. I think I might play with that this
weekend!

------
vitorbal
sorry if this is completely OT, but as seen on footnote 4, holy shit, they are
making mib 3 ? thats awesome!

~~~
PStamatiou
Filming got delayed a bunch of times, is ridiculously over budget and one
actor quit but they still have Will Smith and Tommy Lee Jones onboard.
<http://www.imdb.com/title/tt1409024/>

------
farout
I would add Logo Design Love to your excellent reading list!

Thank you for putting this together. I am going to use your checklist this
weekend to fine-tune my latest creation, cardealerquotes.org. Maawaaahhaha :)

~~~
PStamatiou
Didn't think to mention logo design as that would come far after mastery of
general concepts I think and when starting to describe illustration too.

Though, you can get some logo design experience with studying typography...
many companies just have logotypes. I say "just" but there's a lot that goes
into it.. I digress.

~~~
farout
I mention it because I thought many of the ideas in there can be also used in
website design. I particular liked how they consider brand and incorporating
that in. I loved all the examples - so many. Not just talk. But prototype and
evolutions.

I would also include "The Advertising Concept Book". To me a website is an ad.
This book actually shows what worked what didn't - ads from the last 40 years
for the masters. I love sketches to actually ads run. A lot of analysis on
Apple ads. It was just an awesome, eye-opening book. So many case studies.

Side note; I think of account about typography in one of the books about
FLICKR. Where if you were not careful what type you choose you would very much
offend many people since the capital L and I might merge to be U.

