A High Level Overview

A gentle introduction to design, user experience, and implementing them with mockups.

Scroll down...




As we mentioned in the introduction, we'll be covering three major areas in this mini-course -- User Experience, Visual Design, and Mockups. Think of the three areas as first starting from the big picture strategy, then determining how it will need to look, and then finally putting those ideas onto "paper".

User Experience

Happy User

User Experience (UX) is an often misunderstood area of product design and development and it can seem a bit "buzzy" (and fuzzy). Strip away everything you've heard and just think of it like this -- UX is how the user feels when they are using your site. It's closely related to usability -- can the user achieve her goal quickly and with satisfaction?

UX, as with every broad title, can take on many different forms. Sometimes UX designers act more as traditional designers and sometimes they focus more on higher level issues around product development. For our purposes here, it essentially involves working with the users to identify the key goals they need to achieve and building the right flows within the site to make those goals happen.

What's the point of building a site if your users can't use it and have a terrible experience?

Visual Design

Design Stuff

"Design" is an even broader term than UX and can cover anything from illustration to site architecture to, well, UX. In our case, we will tend to use it more to mean "Visual Design" but, like engineering, "design" is really just a method of problem solving.

For us as web (and product) developers, the problem we need to solve with visual design is a bit more specific. We want to make sure that the user consumes the information she needs to in order to achieve her goals on the site and that she is satisfied in doing so.

That might mean arranging the layout in a way which prioritizes the proper information or choosing a color scheme which conveys the appropriate level of friendliness or using typefaces which promote ease of reading.

You might notice how similar this is to UX. They have a lot of overlap, but, in order to separate the two in this case, think of UX as a higher level look at "what do we need to do?" and visual design as the implementation of "how will we do it?". UX will help you arrive at how the user will need to flow through your site and design will help you decide how to encourage that flow.

In this mini-course, we'll tend to focus on higher level issues like those in the example above and avoid getting into the really detailed design work. So don't worry if you can't draw a stick figure, failed ceramics class and are a terrible artist (most of us are).


mytube mockup

How do you actually figure out your user flows and designs? Your best friend is a pen and paper or a whiteboard where you can sketch out and brainstorm tons of rough ideas for flows and layouts. But once you've narrowed things down a bit, it makes sense to turn your very rough sketches into something a bit closer to the final product. For that, we use mockups.

A "mockup" is really just a sketch with a bit of extra detail. There's no single definition for what constitutes one -- there are "high fidelity" mockups which contain a whole lot of detail (like a photoshop image file) and "low fidelity" mockups which have very little detail (like your rough whiteboard sketches). For our purposes, consider the following definition:

A mockup is a sketch with just enough information to tell the developer or the client what the final site is going to look like and then guide its production.

It's a pretty rough definition but that's really the point. In our process, you'll use mockups to give you an easy way to iterate on your ideas without getting stuck in a bunch of code and also as your guidelines for building the final site. The mockup will contain information about your site layout and design, though not enough to be "pixel perfect".

For our mockups, you'll learn to use one of the industry standard tools: Balsamiq Mockups. Balsamiq is a web-based mockup tool that's incredibly easy to use and which will allow you to save and share your mockups.

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: What is 'Product'?