Review of Concepts

A brief recap of the key points we've covered in this mini-course.

Scroll down...

Content

Resources

Comments

In this mini-course we covered a lot of ground, congratulations! For many of you, it was also probably a bit outside of your comfort zone -- most developers view design work with the same trepidation as they would flesh eating bacteria or a baby in the next seat over on an airplane.

By now, you should realize that it's not all that bad. Even if you can't draw worth a damn, you're more than capable of thinking user-first to create good UX, understanding the fundamentals of good visual design, and expressing yourself using mockups.

The Design Process

As a quick recap, we do the design process before we even start writing code because it makes sure we're building the right thing and that our site will be effective at delivering on the goals of our user (and our business). This design process really has 3 main parts:

  1. Discovery -- where you figure out who the user is and what they want to do.
  2. Strategy -- where you map out your site's architecture, navigation and interactions to deliver a good user experience (UX).
  3. Design -- where you specify the actual look-and-feel of the site and ultimately produce the mockups that will drive development.

On UX

We learned that UX is all about thinking from the perspective of your user and trying to figure out how to get that user to his or her goal as efficiently, effectively, and satisfactorily as possible.

To create good UX, you need to reduce friction (e.g. clicks, thinking, submission of information) between your user and his or her goal. The tools at your disposal for doing so include:

  1. Site Information Architecture -- the layout of pages on your site. Typically, you want a shallower architecture.
  2. Site Navigation -- how your user will flow from the start page to their goal and what style that navigation will take. Each page along that flow should answer the following key questions for your user through a combination of well placed content and navigation:

    1. Where am I and how did I get here?
    2. Where should I go next and how do I get there?
  3. Interfaces and Interactions -- the specific places in your site where the user will need to interact with it. Your goal is to make these interactions (which include things like menus, forms, and dashboards) as simple, consistent, forgiving, and unsurprising as possible for the user. Good interfaces require next to no thinking at all.

On Visual Design

We learned that design is also about getting your user to their goal effectively, efficiently and with satisfaction but the visual design tools handle doing that with each individual page. Your objective in using them is to make sure the user's eye smoothly flows through your content in the best possible way to achieve their goal(s).

On the highest level, the layout and composition of the page determines the basic pattern your user will follow. Thus, sticking to existing patterns like a main-column-plus-sidebar can save your user effort and save you headache by providing a familiar layout.

Getting more specific, the information hierarchy of each page (plus the user's natural tendencies to follow a certain flow like the "F" or "Z" pattern) will actually decide where the user's eye is drawn. The hierarchy is determined by the characteristics of -- and relationships between -- elements on the page as dictated by their:

  1. Size
  2. Color
  3. Contrast
  4. Repetition
  5. Alignment
  6. Proximity
  7. Density and Whitespace
  8. Style and Texture

Four of these in particular, which form the acronym CRAP (Contrast, Repetition, Alignment and Proximity) are important also in showing relationships between elements on the page.

To help you when you're building your own sites, designers often work with grid systems which use mathematically specified column widths to achieve desirable alignments and sizings.

Typography is another element that's often overlooked, but the style (e.g. serif vs sans-serif) and spacing (e.g. line heights) of text on your page will also play a significant role in both drawing the user's eye appropriately and improving readability.

You learned about the fundamentals of using color and some simple examples of color schemes you can choose between like monochromatic, triadic and complementary.

On Mockups

Finally, you learned how to express all these ideas by creating mockups (which, in our case, are sort of a combination of a wireframe and a prototype). We introduced you to a tool called Balsamiq Mockups which is one of the easiest ones out there but by no means the only one.

You got the chance to create several mockups of your own during the project and you've hopefully gained an appreciation for how useful mockups can be when you're figuring out the Design Process.

Final Thoughts

All-in-all, you shouldn't feel like an expert in anything but you should have a much better appreciation for the thought that goes into building a website before it even begins. You should have a toolkit which includes techniques for figuring out the overall strategy of your site's flow and design and the tools necessary to rapidly create mockups of these things.

Most importantly, your eyes should be open to design elements in the sites you visit all around you. As you learn how to build your own sites in the coming mini-courses, you should also find yourself absorbing more and more information about design just through observation of the sites you use every day.

high five



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: Test Yourself