I'm a developer and writing code comes naturally to me. However, I feel that user interface design is a weak area for me and I want to improve. All my UI development is web based, HTML, CSS, and JS. Can you recommend any books or other resources that helped you improve you UI skills?
I'm a developer too, for the last year I've been working on my UI & UX skills - and I've somehow managed to get paid to built out product features for the web (UI, UX + code) professionally.
Here's what I figured out (YMMV):
---
For UI design
Books aren't that helpful, you have learn by doing.
Instead, for theory Treehouse offers a primer on HTML, CSS & UI design which provided a great foundation, they have courses on things like colour theory. Really really helpful.
Practice. I designed & launched a bunch of complete web apps, each one with a landing page + full functionality. Each attempt had a visible improvement in UI & UX over the last. I got tons of great feedback and encouragement (you're gonna need it) from forrst. So I'd highly encourage posting there and asking for feedback (tell people you're learning).
Learn Photoshop.
Check out Sacha Greif's ebook on UI design http://sachagreif.com/ebook/ it comes with a PSD and has a great intro into UI stuff.
Check out Lighting & Realism In Interface Design by Mike Rundle (developer + designer) here http://designthencode.com
Get a bunch of freebies from dribbble and deconstruct and remix them to your taste.
-----
For UX
Watch this https://peepcode.com/products/ryan-singer-ux then watch it again. Ryan Singer is an absolute UX god - he understands how to navigate the problem space very very well.
To really improve UX measure how people use what you make (mixpanel, click tracking) & conduct user studies - watch people use an interface to really understand what works UX wise.
Developer as well here - mainly server side Java and Node.js on my spare time.
I started looking into useful material to help improve my non-design skills, because well... they are non-existent.
I started with Twitter Bootstrap but I don't think it is the way forward if you want to learn design the proper way. I recently bought this book: The Non-Designer's Design Book (http://www.amazon.com/Non-Designers-Design-Book-The-Edition/...) and would warmly recommend it to anyone who wants to put one foot or their whole body into the design world.
I now try to spend more time analyzing the design of websites, brochures, menus, etc. It is very fun and I believe it is my observing and analyzing other peoples' work (mistakes included), then practising, that you can improve your eye(s) for design.
Thanks for recommending my eBook! I wrote it specifically to give non-designers an overview of my design process, in the same spirit as Ryan Singer's screencast.
But of course, just like with everything else you get better by actually doing, not just reading about it. Still, I think reading case studies like this can at least show you good design is a logical and iterative process, and anybody can master it with some hard work.
As you can in other fields, you can learn a lot by studying what the leaders do, understanding it, and imitating it.
You've got to get away from people who say "We can't do it the way Google or Amazon does it because they're big and they can afford it." You've got to think instead "Google and Amazon are big because they did things right."
You've still got to think about (small) scale though.
Back around 2000 I was interested in user management and authentication and back then the main challenge across the industry was conversion rate, and it was very good to imitate what Yahoo did.
A few years later, Yahoo's signup and login process had become quite complicated because they had a notoriously foolish user base that was vulnerable to fraud and phishing. If you imitated them you'd quadruple your development costs, kill your conversion rate, and get your email box flooded from people who forgot their passwords.
(Funny, Yahoo started to go downhill around they time they did this!)
So look at the leaders and think about what they do critically. Don't listen to voices that say "we can't afford it" -- you can't afford to have employees that are lazy like that or for that matter, to be working for a project manager who won't do what it takes for your projects to succeed.
I'm going to go out on a limb here and say that books, articles and conferences are totally insufficient to become a good (UI/UX/User centred/etc) designer.
Here's an analogy with physical fitness. If you want to reach "competition level" fitness you don't just watch youtube videos and read books. You have to practice. And if you practice alone, you'll never hit competition level. You need formal TRAINING. You need an experienced professional giving you advice, critiquing your performance and stretching your abilities. You need them to help you track your own performance, to become acutely aware of your weaknesses and focus on them relentlessly.
A lot of organisations don't get this. A few books, a conference and a spot of mentoring doesn't turn a team of front end developers into UX designers.
There's a certain extent to which you can be your own coach. You still need to practice, but you can monitor your own performance if you can train your eye faster than your abilities. Training your eye involves a combination of noticing and analyzing interfaces around you (good & bad), reading texts on design, watching talks, and having conversations with friends and colleagues about design. It's especially important, as a self-teacher, to accept a broad range of influences extending beyond what you might call "UX". That includes, but is not limited to, graphic design, psychology, object design, information design, information architecture, HCI, and fine art.
But, if you can find a mentor, that is always the best way.
agreed; there are some things you just can't learn without proper training, but if it’s something fairly straight-forward, you can get pretty far in studying common practices and trying things out yourself.
there’s a huge wealth of knowledge out there in just looking around you. my approach (not a pro at all) when designing anything really is just to look for cues from others. there are a lot of resource-rich players that have invested a lot in UI/UX design, and, the great thing here, is that much of the pay-off from those investments is freely available; just look at their products.
this is especially true on the web where it’s so easy to find and compare sites or apps related to what you’re doing. if you take the time to examine them closely and look for commonalities, you’ll generally find many of the more successful sites share a lot in common when you get down to fundamentals (though they may look and ‘feel’ very different). the ‘artistic’ aspect of UI/UX gets the majority of attention (and, in my opinion, is the hard part to master), but what makes or breaks a design is usability, and that you can learn fairly easily.
at the very least you end-up with a product that works; and this is the most important element in UI/UX. from there you can learn to perfect it and make it look amazing, but that takes time and experience.
99% of UI/UX design is people copying each other. The remaining 1% advance the narrative. Becoming great at UI/UX means becoming the 1%, but there's no shame in just being good.
Great UI can be created without adding anything new. Use old things well, in intuitive ways, and you already are ahead of 99% of your competition anyway.
If the best chance for practice you have, is on personal projects - so be it.
Find sites for inspiration. Design is ALWAYS changing. Things you're just getting sick of now (chunky buttons, ribbons, page tears etc.) other designers first saw a long time ago - those thing slowly saturate the design community before they're everywhere.
Browse Dribbble.com every day.
When you have to design a site, use sites likes patterntap.com, and uiparade.com to see great examples of slick UIs.
Most importantly, "eat your own dogfood." Use the products you've made, non-stop. Just keep testing and testing. If things feel weird, or unnatural, iterate, and eat more dogfood.
Design should never be something someone gets "right" the first time - its an iterative process of learning user behavior based on what does or does not perform well.
I think it is important to distinguish UX from UI design. UI Design is a facet of UX, but actual user experience design delves deeper and is multi-faceted.
This diagram[1] shows the facets of UX exceptionally well. In the same vein, this article[2] defines UX accurately.
Ignore the ugliness and you'll find practical advice in the reports and Alertbox articles although his opinions are sometimes controversial and shouldn't necessarily be followed to the letter. Nevertheless they'll undoubtedly increase your awareness of the variety of user types out there and encourage you to think from their perspective, which is ultimately what good UI design is all about.
Doesn't it seem like a bad sign to say: "Here is where you should learn about UI - just ignore the bad UI." For all I know there is lots of good content there, but I'm immediately turned off of learning about UI from someone who can't even be bothered to make it easy to parse his frontpage.
It's good to read these guys, but it's nowhere near sufficient. Over time I've lost my fondness of Nielsen. He's too much of an engineer and doesn't understand subjective factors. Ever notice that his website has very poor usability due to inappropriate (read: lazy) use of typography and proportion?
Its not that interface design is a weak area for developers. The thing is, we tend to spend very little time thinking about user interface (we like to jump directly to books instead which will do the thinking for us).
I've found you can achieve quite a massive improvement by simply spending a decent amount of time thinking about / working on / testing your UI.
Draw sketches, think about usage patterns, explain how things would work on paper, ask random people to try out your designs after you're finished implementing them, get feedback, identify actual usage patterns and optimize for them. Repeat.
If possible, become a user of the product. It helps a lot.
The second most important thing is to copy other people's good interface designs. Or less harshly put, use existing patterns, especially those widely accepted by users. Check out popular websites and applications, see how they solve your current UI subproblem, copy their solution, perhaps improve upon it. Read about UI patterns and when to use them.
note: We're trained to think that copying is bad, originality is good. In UI, the reverse is true - by copying you save time on user training as users are already familiar with the design. There is nothing shameful about copying other people's good UI design (and I don't mean the visual aspect of it)
Of course, this is not really a substitute for proper training - but quite often its a really good first step which we seem to miss .
Also, create a bookmarks folder (or even just a regular folder on your Desktop) just for collecting UX/UI designs that jump out or appeal to you. Either bookmark them, or take a screenshot, and use good, descriptive tags (e.g "Search Results", "Dashboard", etc). Then block out a small amount of time each week(I usually spend like a half hour or so over Sunday morning coffee) to review them; ask yourself why you like the designs/patterns, what appeals to you, why its effective, how could it be more effective etc. You'll start to recognize patterns and develop a sharper eye for effective UX/UI design throughout the web.
Finally, accept and embrace the idea that good UX/UI design is very much an iterative process, it's OK (and actually pretty common) to not get it perfect the first time around.
As far as UI goes, spend a lot of time on design sites such as dribbble and try to identify patterns and discover the purpose of them on your own. UI design becomes more engrained when you discover trends (and their purposes) rather than simply reading about them imo.
Just want to pipe in and say this is a fantastic resource. It's a great place if you have random questions like "Is it better to do this... or this?". Posting lets you tap into the collective previous experiences of tons of fellow UXers, which I've always had a good experience with. It's also nice for just browsing and getting little tips on ways to design.
– Now you understand that UI design is actually graphic design, so start with graphic design fundamentals. They are: Drawing, Layout, Typography, Color, History.
– Drawing: understand how images are created on a canvas. Includes concepts of how to use line, shade, and color to create forms, volumes, depth, etc. Art historians talk about "color and line" in painting. Understand the distinction. Pick up a used copy of Janson's History of Art. Peruse some other books about drawing. Go to the museum. Whatever you come across. Have fun with it.
– Layout: I haven't found a great resource for this. You can have a look at Grid Systems by Josef Müller-Brockman, which set the tone for layout in the 20th century. Making and Breaking the Grid is a modern spin on grid-based layout. Read about book design since that's the oldest and most developed layout system. You can start with Wikipedia: http://en.wikipedia.org/wiki/Book_design. Generally pay attention to how websites are arranged. Is there a top-bar or a side-bar? How many sections of content are there? What is their relative proportion? How does the layout relate to the borders of the browser window? Take some time to investigate 'responsive design'. Understand what it means to design from the content out rather than from the edges in. Understand the fact that book design has a rich set of systems of proportion while web designers completely ignore this for the most part. Look up 'golden ratio typography'.
– Typography: there are a number of well-regarded classics on typography. The Elements of Typographic Style is great. But you should start with this: http://webtypography.net/. Then check out the Wikipedia entry and Google around for blog posts about typography. Once you understand the basics, then attempt an in-depth text. The most important thing to understand is that typography can be used to create structure. People who do not understand this use lines, planes, and volumes to create structure around content. A good place to learn about this is in Edward Tufte's The Visual Display of Quantitative Information (as well as its sequels). He vigorously recommends removing as much "non-data ink" as possible. Beyond structure, there is the issue of choosing typefaces. Let me just get this one out of the way: serif faces are not significantly easier to read than sans-serif faces. Beyond that, understand that typefaces are created by designers for different uses. Use typefaces according to what they're designed for. Understand how typefaces are used to create a stylistic feel, to evoke associations, nostalgia, emotion. Understand that some typefaces are expressive and some are not. The web so far has favored non-expressive typefaces. Now that we have @font-face and Google Fonts, people are going crazy using different type-faces will-nilly. Web design will evolve. Watch the documentary "Helvetica".
– Color: there are many resources on color, but the study of color is an endeavor that can last a lifetime. There are a few things to understand about color: what it is (light frequency / a sensation), how it is modelled (Newton vs. Goethe, HSL/RGB, color spaces, Pantone), how it is created, how colors are combined, the fundamental nature of each hue, and psychological meaning of color combinations. Start with the Wikipedia entry. For more scientific information, check out the IESNA handbook. Understand the difference between Newton's and Goethe's studies of color and how current theories descend from those. After them came Maxwell, Helmholtz, and others. Munsell's text is responsible for much of the exploration of color in early modernist painting (impressionism, etc.): http://www.gutenberg.org/files/26054/26054-h/26054-h.htm. Study color combining by way of texts from the early 20th century by Albers, Itten, etc. But, as others have mentioned, the only way to truly understand color is to use it. Try different combinations, see what they do. Ask questions like: why are most websites blue? Why aren't websites ever yellow? Beyond cultural associations, each color has a fundamentally different nature and use. It's not just a spectrum. Why is red so special? Notice that blue and yellow are, in Goethe's theory, the fundamental colors from which all colors are created. Does this have something to do with their neutrality? The sun is yellow, the sky is blue, the ocean is blue... what does it all mean? Why are the road signs green?
– History: web design didn't just come out of nowhere, though most web designers are uneducated and the tools have been very primitive up until the last few years, so it kind of seems that way. Find a copy of Meggs' History of Design. Understand what it is, where it comes from, how book design is the father of graphic design. Then, something crucial to understand: that web design is constrained by the concepts of the past, which were developed in a world with different constraints. Do you know how graphics were created before computers?
Unfortunately there is no good book that gives an overview of all of this material. You need to piece it together. Here's a screenshot of my library of design books: http://img823.imageshack.us/img823/7795/screenshot20120731at.... Plus you should have a library of design inspiration. I have mine spread out between LittleSnapper and ZooTool right now. Evernote is another good way if you can stand all the visual noise in their interface. Other people use Pinterest, etc.
What you should take away from this is that UI design is actually part of graphic design, which is a relatively old discipline (though still young compared to, say, architecture).
On the other hand it can be said that UI/UX rather encompasses graphic design since UX brings in the notion of user-centered design from HCI, which has its own history in psychology and the US military industrial complex. Two great historical reads here are MIL STD 1472F: http://www.hf.faa.gov/docs/508/docs/milstd14.pdf and The Ecological Approach to Visual Perception by J.J. Gibson (from whence the concept of "affordance" comes). The classic synthesis of these ideas can be found in The Design of Everyday Things by Donald Norman. Bill Buxton is another person to follow in this space. A modern synthesis of UX is About Face 3: The Essentials of Interaction Design.
— Now you understand that UX design is actually cognitive psychology + sociology. Of course, most cognitive psychology/sociology books will only be slightly relevant to UX design. Here's a short selection to get you started:
— Don Norman, Design of Everyday Objects
— Don Norman, Emotional Design
— Brenda Laurel, Computers as Theater
— Kim Goodwin, Designing for the Digital Age: How to Create Human-Centered Products and Servicesa
— Bill Moggridge, Designing Interactions
Bonus:
— Raph Koster, A Theory of Fun for Game Design (meant for video game design, but has a lot of lessons that can be applied to good UX)
For UI design, I'd also heavily recommend "Semiology of Graphics: Diagrams, Networks, Maps" by Jacques Bertin, and anything by Tufte. These titles are more about data visualization, but most UIs need a way to visualize data in some shape or form.
Thanks dude. Totally agree about Designing with the Mind in Mind. Another similar book is 100 Things Every Designer Needs to Know About People. Here's a little gem that summarizes some of that material: http://uxmag.com/articles/psychological-usability-heuristics
Excited to check out some of the stuff I haven't come across there.
To me, a turning point in my feelings on UX was reading Alan Cooper's "The Inmates are Running the Asylum" [1]. It's a little anti-engineer (he argues that engineers cannot do this right and you always need dedicated UX people), but he explains core interaction design principles very well.
E.g., he draws a distinction between mere UI design and interaction design: UI design is just layering another abstraction (the interface in question) on the underlying software architecture, whereas interaction design starts with what the user wants to accomplish, and adapts the underlying pieces to enable that.
Note that this is not a UI book, or even really all that much of a UX book, but it does make a great argument for the importance of user interaction.
Chris - can you elaborate a bit more on this newsletter? What sort of content it covers, how you source data, etc.? Just signed up and am interested to learn more.
Hey Maerek, thanks for signing up! I try to cover typography, frontend techniques, interviews with designers, industrial design, and branding. It's a broad range of topics that I'm interested in learning more about since I come from a backend coding background.
I've been finding that just simply mocking up the sites/apps I'm building or even just pieces of their functionality has helped me refine what I feel is implementation of good user experience. The marker comes down to "Would I use that?", and more often than not, as fast as I can get a page up it's no match for a mockup that comes to fruition even quicker. Check out Balsamiq (http://www.balsamiq.com/) for the app that I choose to use. I also lurk ux.stackexchange.com, as mtrn suggested it's a great resource.
I've been fortunate enough to attend talks given by both Luke Wroblewski (LUKEW, http://www.lukew.com/) and Joshua Clarke (Global Moxie, http://globalmoxie.com). Both have written excellent books on design principles and UX/UI implementation (Luke on web form design, Joshua on app interfaces and design).
If you're interested in web standards and design, http://www.alistapart.com/ is also a great site to follow.
A lot of resources mentioned here are great and a really good starting point. If you decide that you want to get serious about UI/UX, I would highly recommend looking into a graduate or certification program. I have heard good things about Human Factors (humanfactors.com) and a number of universities offer HCI certificates. I am currently working toward one at Missouri S&T.
There were lectures and assignments built around design heuristics, different aspects of prototyping and you have to design your own application as part of the course grade.
Getting involved in your local UX community can be a good way to find mentors and experts who can help you grow. Be a sponge, and try to understand how these people look at the world.
Focussing on being a better UI designer is not the way to start.
Be a better problem solver first (more so a UX Designer). You should not just start working on being a better UI designer without knowing what context your work will exist in. Specialize in UI later.
A quick overview on how to be a better UX designer
- Figure out and write down in minimum words the goals and reasons for undertaking the exercise
- Figure out the main types of users you are designing for (don't try to design for everyone). Find out what relevant mental model they already have.
- Break down the problem via concept maps (involve others to brainstorm).
- Sketch several solution hypothesis using flow diagrams (boxes containing major concepts connected to each other) (involve others to brainstorm).
- Compare these flow diagrams and identify the best hypothesis to develop and test first. (Failure is okay)
- Now do UI design for each aspect of the selected flow diagram (as you will know how each page/area in the flow diagram works with the entire picture, you'll know what to show the user when.)
- Do not try to complicate your test by adding features/distractions that are not extremely crucial.
- Put in some love and care. Ideas that spawned from your brain have the possibility of giving so many others so much joy.
(Hint* For a lot of products it is about making MOST users get engaged for the LONGEST period. For many others it is about solving a user problem in the Simplest+Quickest+Most-Painless+Most-Joyful way possible.)
A bit more on how to be a better UI designer
- Go back to the basics and learn how humans sense, how the brain perceives, and what makes us get ideas, form opinions and take action. This is a big part of what UX and UI design is about (this is useful to understand and remember too - http://en.wikipedia.org/wiki/Gestalt_psychology#Properties)
- It is also about having a two way conversation between an interface and a human. Follow protocols of a decent and efficient conversation. Empathize. Introduce if you haven't met before. Maintain a flow. Be focussed on the goal. Don't distract and value their time. Be terse. Don't disrespect.
- Know that content is always more important than the user interface. Strive for harmony between what you have to say with how you are saying it with the best UI for that purpose). Use the help of a copy editor or a technical writer. Ensure they don't write more than is needed.
- Learn about the medium and context you are designing for (e.g. how users use computers, web etc)
- Learn about the existing UI patterns that you can leverage
- Browse a lot. Note down what you like, store it as a pattern in your head. Note what irritates you and think about how it could be done better for more users.
- Practice. A Lot.
- Get hold of a good designer and sit next to them. See them work. See how they make their life faster and easier while designing. Optimize your workspace continuously. Look out for new tools that can help your workflow.
- Generating consensus around the flow and UI solution is your job. Get the stakeholders to see the way you think.
-Don't use Colors initially, they derail conversations quickly as humans are prone to judging colors instinctively. Use grayscale and rough way of doing stuff first. Finalize (visual design) after that.
- Ensure that the colors did not change the flow of user's attention on a page.
-Figure out if the flow of user's attention on a page is the way you intend
- Grab five people, give then some basic context and do RITE (http://en.wikipedia.org/wiki/RITE_Method ). Don't listen to all feedback. Designers usually give feedback based on heuristics. Try to get more designers to give you feedback.
- Use web based tools as often as you can. It is easy to share your work and get feedback quickly. There are tools for getting feedback online. But have a meeting at least once initially to explain the context and thinking behind your design decisions.
Here's what I figured out (YMMV):
---
For UI design
Books aren't that helpful, you have learn by doing.
Instead, for theory Treehouse offers a primer on HTML, CSS & UI design which provided a great foundation, they have courses on things like colour theory. Really really helpful.
Practice. I designed & launched a bunch of complete web apps, each one with a landing page + full functionality. Each attempt had a visible improvement in UI & UX over the last. I got tons of great feedback and encouragement (you're gonna need it) from forrst. So I'd highly encourage posting there and asking for feedback (tell people you're learning).
Learn Photoshop.
Check out Sacha Greif's ebook on UI design http://sachagreif.com/ebook/ it comes with a PSD and has a great intro into UI stuff.
Check out Lighting & Realism In Interface Design by Mike Rundle (developer + designer) here http://designthencode.com
Get a bunch of freebies from dribbble and deconstruct and remix them to your taste.
-----
For UX
Watch this https://peepcode.com/products/ryan-singer-ux then watch it again. Ryan Singer is an absolute UX god - he understands how to navigate the problem space very very well.
To really improve UX measure how people use what you make (mixpanel, click tracking) & conduct user studies - watch people use an interface to really understand what works UX wise.