Ask HN: What do you wish you knew about UI/UX design?
59 comments
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.
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.
For #5 - no no no! Hacking logos together with CSS is, well, a hack. Use SVG - modern browsers support it out of the box , its future proof (no use of -moz/-webkit vendor css prefixes which break all the time), the authoring tools rock (checkout Sketch if you have a Mac) and your images scale well to any size.
May I recommend David Kadavy's Design for Hackers, which covers #1, #2, #3, #6, and more.
Thanks for the list :) I'll see if I can address them all
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/
- 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/
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.
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
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
Noted your point, thanks.
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.
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!
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!
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?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
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
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.
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.
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.
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/).
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/).
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.
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.
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...
Here's a start to your cookbook: http://fireworks.smashingmagazine.com/2012/07/03/interactive...
Love the cookbook idea, thanks :)
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.
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.
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.
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.
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)
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?
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?
How to use background photos well.
What makes a good photo choice? What sort of text/font/color goes well on top of it?
What makes a good photo choice? What sort of text/font/color goes well on top of it?
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.
A documentation of user-centric design, from the sketch/ideation phase all the way through to a product postmortem would be absolutely phenomenal.
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/
People don't read. Sounds simple, but I find it one of the greatest challenges.
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 :)
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?
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 :)
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
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
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.
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.
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.
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 ;-)
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 ;-)
Love the dirty tricks idea, thanks :)
I'd like to see an article that explains the difference between UI design and UX design, with examples.
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.
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.
I wish I didn't have to know anything about it, cuz life's complicated enough as it is!
Photoshop mechanics. How to take an idea and get it fleshed out in PSD
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.
I would say the thing I struggle most with is also Typography.
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.
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.
My user agent styles include covering almost everything with font-family: Ubuntu !important. I did it as an experiment, but very rapidly decided I was never going back on a long-term basis (I've switched back once and couldn't bear it after a day or so).
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.
Sorry that's what I meant to say, Verdana for paragraphs, Arial for headers.
Seems typography is elusive to many. Guess I'll write a post on typography basics.
Framing elements on a page. I struggle with this a lot.
Can you please elaborate a little on what you mean by framing?
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_...
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_...
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_...
As an introduction to typography, I also recommend watching Helvetica: http://www.amazon.com/gp/product/B002RIOGI0/ref=as_li_qf_sp_... – 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...
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_...
Itten's The Elements of Color is the classic text on color: http://www.amazon.com/gp/product/0471289299/ref=as_li_qf_sp_...
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_...
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.
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_...
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_...
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_...
As an introduction to typography, I also recommend watching Helvetica: http://www.amazon.com/gp/product/B002RIOGI0/ref=as_li_qf_sp_... – 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...
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_...
Itten's The Elements of Color is the classic text on color: http://www.amazon.com/gp/product/0471289299/ref=as_li_qf_sp_...
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_...
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.
[deleted]
Take a look at this http://www.webtypography.net/
That's gonna get you started in typography.
That's gonna get you started in typography.
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.
http://www.dell.com/us/soho/p/xps-13-linux/pd.aspx
This looks like a really great machine.
oops, this was supposed to be in reply to the ask HN developer laptop thread
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?