
Ask HN: What do you wish you knew about UI/UX design? - akrakesh
I'm a UI/UX designer interested in writing about design. I've written about the principles of iOS design, a case study on how I designed an iPhone app, etc., in my blog (http://radesign.in/blog/).<p>Instead of writing what I think is useful I want to write what the audience finds useful. So, what about UI/UX design you wish you knew? What would help you? What do you find interesting? What would you like to know?
======
anujkk
1\. Color Theory. How to decide which colors to be used for particular type of
project/audience?

2\. Typography. Which types of fonts to use for given situation and that works
on all windows/mac/linux/android/ios? Categories of fonts and where to find
free fonts/web-fonts.

3\. Layouts. What different types of layouts are possible and how to decide
which one to use?

4\. Responsive Design Techniques.

5\. CSS3 art. How can we use CSS3 to create things like Text Logos, UI
elements?

6\. Design Case Studies. Pick up a good well known design and redesign it
explaining the design decisions taken in the process.

~~~
akrakesh
Thanks for the list :) I'll see if I can address them all

~~~
anujkk
Focus more on 2, 3 and 4. All my designs end up having almost similar fonts
and layouts. They look good but not different. Most of my(and everyone else's)
designs end up having header-content-footer layout or sidebar-content layout
but there are other layout patterns that can be used :

\- <http://www.themealings.com.au/>

\- <http://landor.com/>

\- Metro UI Look

\- <http://captaindash.com/>

\- <http://www.thebullittagency.com/#!/home/>

\- <http://www.360langstrasse.sf.tv/page/>

\- <http://www.wingcheng.com/>

~~~
hnriot
thebullitagency.com is a _seriously annoying_ website. Not to mention a total
hog of bandwidth for no particularly good reason.

------
AskHugo
Typography. I'm still not sure which types of fonts to use for different
situations (titles, paragraphs, attention-grabbing).

~~~
akrakesh
Thanks for the input

------
joeld42
My #1 want is some kind of process or hints for taking a screen that is
crowded with controls and options and simplifying it. Often I am faced with
this and just don't know where to begin.

~~~
nnq
do it the other way around: start with a blank screen and start adding the
controls from your crowded screen, thinking for every one of them if you
really need it and throwing it away if not. this process also makes sure you
are exhaustive, you consider each element and don't forget weird controlls in
weird places (of course, the ideal would be to start from a blank screen and a
vision of what the user needs to see and do - but lacking such a vision a
"cluttered mess" --> filtering --> "blank sheet UI" process helps a lot)

EDIT: + do it the pen(cil) and paper way, and implement a mockup UI only
after, it really clears your mind from the "this should be here because that
event expects..." crap you end up thinking about when the interface is
implemented the "lipstick on a pig" way - for web, think tangled mess of HTML
& Javascript DOM manipulation + unimaginable PHP horrors on the server site

------
foz
I don't see why so many people think of typography and color as central to
UX/UI. I believe these are just as small part of the puzzle. Great interfaces
are not just nice to look at - they communicate well. For me, great UX/UI is
about the use of clear, consistent visual metaphors. It's about choosing the
right words in your navigation, picking the best controls and form elements,
and about removing anything that distracts or confuses the user. It's also
about listening to your customers and understanding how they use your
software.

~~~
corford
I don't know about other coders but as one myself, I find the visual
metaphors, wording and control selection parts much less daunting than the
other stuff. They're just as important (maybe more so) but I find them easier
to tackle because the choices feel less subjective and easier to reason about.

On the other hand, choosing colours, typography and designing the general
"chrome" for a site is a nightmare. It's so subjective and non-intuitive (to
me at least), yet has a huge effect on making or breaking the overall design.
It's maddening!

------
knowuh
I would like to hear about the larger process:

    
    
      * Evaluating an interfaces usability quantitatively.
      * The ROI profile for good design. What's the sweet spot, and when do you start yack shaving?
      * How do 'cool looking', 'compelling' and 'usable' relate to value. 
      * Which of the above fall are squarely in the domain of UI designer?
      * What does a UI team look like? What skills? How are decisions made?
      * From a Designers perspective, how should a software product begin its life?

------
elisehein
I'd like to learn more about two things:

1\. Designing and prototyping in the browser -- how to do it as quickly as
possible and get rid of the distraction of details (I always find details
difficult to ignore when trying to do quick mockups in the browser, hence why
I resort to pen and paper)

2\. Case studies of user research activities that have led to particular
design decisions -- what are the first steps I should take in order to create
an interface that is specifically targeted towards a certain user group or
demographic

------
talGX
I find the correlation between UI/UX and conversation rate very interesting.
Based on my experience these blog posts are usually very popular. For example
: where to locate call to action buttons, location of the title, number of
screenshots, etc. I made several tests on my web site, changing the design and
location of the social networks buttons. After all the changes I increased the
click rate from 2% to 8%. I couldn't find any good posts or references about
this topic.

------
corford
Typography, colour and techniques for visual priority (i.e. how to guide a
user's attention to different sections within a page) are all things I
struggle with.

I also wish a photoshop or illustrator "cook book for coders" existed which
contained just enough recipes to learn the essential techniques needed to
quickly mockup and experiment with how a page might look.

~~~
adrianhoward
_Typography, colour and techniques for visual priority (i.e. how to guide a
user's attention to different sections within a page) are all things I
struggle with._

I point people towards Robin Williams' "The non-designers design book" for all
of these. It's not about the web - it's about some graphic design basics like
contrast, balance, etc. - but they apply.

 _I also wish a photoshop or illustrator "cook book for coders" existed which
contained just enough recipes to learn the essential techniques needed to
quickly mockup and experiment with how a page might look._

If you want to do quick mock ups and experiments then Photoshop is not the
tool you want. What you want is pen, paper and post it notes. Learn to do
paper prototyping. Todd Zaki-Warfel's book "Prototyping" has a good section on
it (<http://rosenfeldmedia.com/books/prototyping/>) and Paper Prototyping by
Carolyn Snyder is the definitive book on the topic
(<http://www.paperprototyping.com/>).

~~~
corford
Thanks very much for the Robin Williams tip.

Re: prototyping

I use Balsamiq a lot and am comfortable in it (and I usually play with pen and
paper before touching Balsamiq) but sometimes I'd like to produce a mock up
that looks a lot closer to reality and I just wish I had enough command of the
basics to be able to do this in photoshop or illustrator rather than cobbling
together some html and css (which is what I do now).

Edit: to expand on the cook book idea, I'm thinking of recipes along the lines
of:

\- This is how you can quickly draw a button (and here's how to give it a
gradient or a shadow)

\- This is how you setup your canvas as a grid

\- This is how you do layering (so you can try different headers, footers
etc.)

\- This is how you embed an image and clip it (and here are some tips on
choosing images that are easy to work with and fit in to a design)

\- This is how you make a repeating background

\- This is how you blend one colour in to another

\- This is how you do transparency

\- These are some common gotchas to look out for

\- These are some good practices you should follow (e.g. do it _this_ way so
that if you want to change all the buttons to a different colour you can do so
with one click)

\- This is a run down of some common layouts and what sort of content they're
suited to

\- Here are some solid online resources for fonts, background patterns, stock
photography, icons, showcases of good design, forums/sites where real
designers hang out

Basically, enough information and resources in a single reference book so a
non designer can fire up photoshop or illustrator and be able to end up with a
PNG file that's somewhere between a wire frame and the finished version you'll
get when a real designer has worked their magic on it.

~~~
mneu
Fireworks is a good option, with pages and hotspots with browser export. Easy
to create mid-high fi mockups, much faster than in photoshop for prototyping
and user testing. Faster to learn also.

Here's a start to your cookbook:
[http://fireworks.smashingmagazine.com/2012/07/03/interactive...](http://fireworks.smashingmagazine.com/2012/07/03/interactive-
prototypes-timesavers-adobe-fireworks/)

------
fudged71
Metaphors and complexity. How do you take an innovative _new_ idea and make it
instantly relatable and familiar to people? How has it been done in the past?

I'm struggling with page/group/stream/profile designs and don't know how to
make it different than everyone else while still keeping it intuitive and fun.

~~~
anujkk
Is it necessary to make it different unless the changes made improves its user
experience? If a particular design pattern works and one is unable to improve
its usability isn't it better to not change it? Slight change in colors,
typography etc may give it a different look.

~~~
fudged71
The main difference is that it's page/group-centric rather than user-centric
like most of the sites I would relate it to. Maybe it will just take a lot of
iteration to find the right design.

------
brutuscat
Color theory, layouts and a better sense of design as a whole. Actually
because of this very question I bought:

    
    
      * The Non-designer's Web Book
      * Designing the Obvious: A Common Sense Approach to Web & Mobile Application Design (Voices That Matter)
    

I'll read those and tell ;)

------
thisone
How to convince designers that just because it looks nice in photoshop doesn't
mean that the people using it will find it "usable".

But seriously. This probably exists somewhere: What are the conventions that
have emerged in web design and mobile design, and why have these become
conventions?

------
zachgalant
How to use background photos well.

What makes a good photo choice? What sort of text/font/color goes well on top
of it?

------
jameshsi
I'm extremely interested in UI/UX workflows, especially compared between
differently sized teams.

A documentation of user-centric design, from the sketch/ideation phase all the
way through to a product postmortem would be absolutely phenomenal.

~~~
akrakesh
Thanks. You might be interested in the series of design case studies, I've
started on my blog. Here's the first post <http://radesign.in/how-i-designed-
zsnuz-for-iphone/>

------
pairing
People don't read. Sounds simple, but I find it one of the greatest
challenges.

------
stevewillows
A little off-topic, but I'd love to see more of these Ask HN posts. As a
graphic designer, I cant say how great it would be if coders understood UI/UX
as much as I did :)

------
MaxGabriel
Oddly specific, I know, but since you design for iOS: should I be reversing
the shadow direction on the text of buttons when they are pressed?

~~~
akrakesh
Not necessarily. If the text is embossed on a button, when you press the
button only the button gets pressed but not the embossed text. You show the
button pressed state by darkening the button a little (not necessarily the
text) and maybe also by reducing the size the button's shadow. Hope it helps
:)

------
riffraff
dirty tricks. One cannot become a designer without a _lot_ of effort, but one
can learn some tricks.

E.g. making them up

* "don't try to do a complex logo/header design just use one big custom font with distinct personality"

* "use stuff from subtlepatterns for the page background"

* "use a pattern repository such as YUI's for standard interactions instead of reinventing basic UX"

etc

~~~
adrianhoward
Yes - that sort of thing would be useful. To some extent this is the sort of
thing bootstrap like frameworks are giving people. A default visual design
that, well, doesn't suck ;-)

A few other things that I suggest to folk who don't have design skills in-
house:

* Pick a single font face and 3 sizes and use throughout

* Pick a palette of five colours (use kuler or something) and use throughout

* Go mobile-first (not because of the 'mobile' - but because of the constraints - it forces a focus on core features & usability)

The problem is that there's a fine line between giving people some rough rules
of thumb to help them - and people then taking this sort of advice and seeing
it as "best practice" and applying it inappropriately.

~~~
stagas
Just a note here, a single font face is boring. I prefer picking a serif and a
sans serif font, using one for the headings and one for content text.

~~~
adrianhoward
Boring? Depends how you use it. You can do a lot with weight, size, colour,
etc.

Going for a serif/sans-serif pairing is a classic choice - and can also work
well. But it can also lead to more opportunities to get things "wrong".

Constraints are useful in design.

Also in most UX situations boring is _way_ better than bad ;-)

------
abeh
I'd like to see an article that explains the difference between UI design and
UX design, with examples.

~~~
adrianhoward
_I'd like to see an article that explains the difference between UI design and
UX design, with examples._

The problem there is that if you ask three different designers you'll get at
least four different answers ;-)

UX is a relatively new term. Coined by Don Norman on 1993 for his role at
Apple it's morphed and tweaked in the intervening time and still means
different things to different folk. The Elements of UX diagram from Jesse
James Garrett is as good a definition as any
<http://www.jjg.net/elements/pdf/elements.pdf>.

UI Design used to be generally read something as a pretty broad domain -
similar to UX - see <http://en.wikipedia.org/wiki/User_interface_design> for
example. However, I sometimes see it used now to refer to somebody with a
narrower speciality of doing the visual design work on interfaces that have
been designed by others.

The communities of practice are still rapidly evolving. Hard and fast
definitions don't really apply.

------
ky3
I wish I didn't have to know anything about it, cuz life's complicated enough
as it is!

------
dylanhassinger
Photoshop mechanics. How to take an idea and get it fleshed out in PSD

~~~
akrakesh
For a behind-the-scenes look at how an idea of iOS app got fleshed out into an
app try my case study, <http://radesign.in/how-i-designed-zsnuz-for-iphone/>
It talks about the design process and principles.

------
chib
I would say the thing I struggle most with is also Typography.

~~~
ChrisNorstrom
That might not be a bad thing.

It's very rare that I see a website using custom fonts that are actually easy
to read. They bloat pages, are non-standard, can be hard on the eyes.
Sometimes it's so bad I go into Chrome's developer view and just disable them
entirely so everything defaults to Black Arial 14px.

~~~
akrakesh
Valid point. I find most designers are using custom fonts that are too thin to
be readable. They look clean but not readable. But Arial is not a readable
font either. Next time try defaulting to Verdana.

~~~
ChrisNorstrom
Sorry that's what I meant to say, Verdana for paragraphs, Arial for headers.

------
sachingulaya
Framing elements on a page. I struggle with this a lot.

~~~
akrakesh
Can you please elaborate a little on what you mean by framing?

------
msutherl
For those interested in typography, while I found blog posts helpful in
teaching myself, if you really want to understand, I recommend reading one of
the canonical texts depending on your particular interest. Typography is a
deep field with a lot to know before you can really know what you're doing.

The Elements of Typographical Style is a beautiful book and an elegant,
literary introduction and guide:
[http://www.amazon.com/gp/product/0881792063/ref=as_li_qf_sp_...](http://www.amazon.com/gp/product/0881792063/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0881792063&linkCode=as2&tag=morgasuthe-20)

Thinking with Type is full of contemporary examples to give you new ideas:
[http://www.amazon.com/gp/product/1568989695/ref=as_li_qf_sp_...](http://www.amazon.com/gp/product/1568989695/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1568989695&linkCode=as2&tag=morgasuthe-20)

Ruder's Typographie is the book that established modern typography and is the
de fact guide to modernist typography:
[http://www.amazon.com/gp/product/3721200438/ref=as_li_qf_sp_...](http://www.amazon.com/gp/product/3721200438/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=3721200438&linkCode=as2&tag=morgasuthe-20)

As an introduction to typography, I also recommend watching Helvetica:
[http://www.amazon.com/gp/product/B002RIOGI0/ref=as_li_qf_sp_...](http://www.amazon.com/gp/product/B002RIOGI0/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B002RIOGI0&linkCode=as2&tag=morgasuthe-20)
– it will give you a personal perspective on different philosophies of choice
of type-face

For that matter, the same goes for color theory.

Here's a nice introduction to color in general from the Adobe website:
[http://www.adobe.com/products/adobemag/archive/pdfs/9611febf...](http://www.adobe.com/products/adobemag/archive/pdfs/9611febf.pdf)

The Wikipedia entry is worth reading: <http://en.wikipedia.org/wiki/Color>

Kandinsky's Concerning the Spiritual in Art is a beautiful manifesto on art,
but contains a very interesting theory of color:
[http://www.amazon.com/gp/product/1619491532/ref=as_li_qf_sp_...](http://www.amazon.com/gp/product/1619491532/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1619491532&linkCode=as2&tag=morgasuthe-20)

Itten's The Elements of Color is the classic text on color:
[http://www.amazon.com/gp/product/0471289299/ref=as_li_qf_sp_...](http://www.amazon.com/gp/product/0471289299/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0471289299&linkCode=as2&tag=morgasuthe-20)

Albers' Interaction of Color will teach you that colors are no absolute
reference ponts – they interact with each other to create all sorts of effects
(this text pairs well with the Kandinsky):
[http://www.amazon.com/gp/product/0300018460/ref=as_li_qf_sp_...](http://www.amazon.com/gp/product/0300018460/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0300018460&linkCode=as2&tag=morgasuthe-20)

To get really deep into color, check out the IESNA handbook:
<http://www.ies.org/handbook/>

All this is not to obviate OP's impetus to write posts on these topics. Blog
posts are crucial as introductions and I find tend to work better as
references than books, which tend to be overwhelming and ignored in this
digital age. But if you want to go deeper, these are my favorite references
after moderately exhaustive research.

------
wildranter
Take a look at this <http://www.webtypography.net/>

That's gonna get you started in typography.

------
kurrent
Dell just announced a 13.3" laptop with developers in mind:

<http://www.dell.com/us/soho/p/xps-13-linux/pd.aspx>

This looks like a really great machine.

~~~
kurrent
oops, this was supposed to be in reply to the ask HN developer laptop thread

