Fundamentals of User Experience Design

What it is

By now, you have a pretty decent handle on HTML & CSS, but the prospect of building a real website may still feel intimidating. It's like standing in front of a blank canvas: just because you know how to hold a paintbrush doesn’t mean you can paint.

Our goal is to make websites, not learn HTML & CSS, so it’s time to learn some web design and put the paint to the canvas.

Web design is a creative process, but there are some basic principles you can learn that can allow even the most analytical person to approach it systematically.

Following some basic guidelines will allow you to make websites that are both easy to use and that look good. Respectively, you'll need to learn the fundamentals of user experience and visual design.

User experience (UX) design is a broad field that deals with crafting products in such a way that they are intuitive and enjoyable for the end user. By starting from the user’s needs, the UX approach will inform how you should structure and lay out your site’s content effectively.

Why it matters

Many developers scoff at the idea of learning design. After all, you aren’t training to become an artist, you want to write code! Web design a whole career, and its unrealistic to hope to master it while your plate is full with programming.

Still, it's helpful learn enough design to not be embarrassing, because regardless of where you end up, it's likely that you’ll need to build some simple interfaces at one point or another. Even if your team has a dedicated web designer, knowing the basics will allow you to communicate with them clearly and give you the independence to make changes on your own.

Most of all, it is important to form a mindset that your job as a developer is to make great products, not to merely write code. Creating good UX is all about having empathy for your users, and this empathy is the key to building things that people will want.

What you'll learn

You can’t expect to become an expert in web development, design and UX, at least in any reasonable amount of time. At this point, it’ll suffice to take away the high-level principles and start thinking user-first.

In this lesson, we’ll cover:

• What visual and user experience design are
• The design process
• The components of good UX
• How to evaluate UX

How to learn it

First of all, let’s establish some vocabulary. The this article explains the subtle differences between graphic design, visual design, UI design, UX design, and web design. Our goal in this lesson is to learn the fundamentals of UX.

Viking Code School offers free web design lessons as part of the prep work for their coding bootcamp. Work through the first two sections: Introduction and User Experience (UX) (numbers 1-11).

I want more!

This lesson is just a brief primer into the world of UX because we have more pressing things to learn on the road to becoming a developer. Later, if you’d like to continue learning about UX, here are some great follow-up resources:

• Don’t make me think! is a classic book about usability on the web that you can read in a couple hours.
• Springboard has a full online UX Design curriculum with a wealth of great links.
• This handy UX checklist can help you avoid common problems. Use it on every project.
• UX a day is a daily list of new articles, tools, and inspiration to keep you up to date.

Comprehension

• What is the difference between a graphic designer and a UI designer?
• What is User Experience (UX)?
• What is visual design?
• What are mockups and why do they matter for UX?
• What are the three phases of the design process?
• What is the discovery phase of the web design process?
• What is the strategy phase of the web design process?
• What is the design phase of the web design process?
• What is “friction" in the context of UX? What are some examples?
• What is user flow?
• What is information architecture?
• What is a simple way to visualize a site’s information architecture?
• What two navigation-related questions should you site answer at all times?
• What is Human Computer Interaction (HCI)?
• What is the “principle of least astonishment” in UX?
• Why is it important to follow established patterns to achieve good UX?
• Why is feedback important for good interaction design?
• What does KISS mean?
• What is the Pareto principle (aka the 80-20 rule) in UX design?
• What is 'functional layering' in UX design?
• What are the 6 steps to follow to develop a site with good UX?

Tasks

At the end of the UX section, Viking Code School instructs you to perform your own UX teardowns. Think them through and then read some of the other students’ write-ups and compare them to your own.

It isn't necessary to do a whole write-up, but soon you'll be creating a portfolio website. You might choose to add a technical blog to it, and if so this could be good fodder for your first content.

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.