Design, UI, & UX

Textbooks: Don’t Make Me Think by Steve Krug. New DMA offering! Stay tuned… once it’s available, you can request your free copy of this book from your instructor.

It’s one thing to know how to code – it’s another to know how to code so your sites can be easily used and visually attractive. Design, user interface, and user experience are the essential soft skills of a front-end developer.

Remember: If you can code, but it’s ugly… nobody’s gonna hire you!


Introduction to Design

  1. Read through this intro to design. It is aimed at startups, but it gives a general overview of why design is important (and there are some good links for you to bookmark at the bottom). Notice how the website itself is well-designed – it’s easy to use and read, and it makes the experience fun as well.
  2. Optional (but recommended): Sign up on hackdesign.org. They will send you a new “lesson” each week of the year for you to look through to further hone your design skills. Note: you don’t have to do these lessons, but they should serve as inspiration. You will also not be able to access some of the pages if you are in class due to the school firewalls.

Design Principles

  1. Intro to Visual Hierarchy
  2. Whitespace is your friend (note: you may not be able to access this through the school firewall)
  3. An example of Google adjusting their whitespace
  4. Optional (but highly recommended): Review TeamTreehouse’s design introduction course. You can sign up for the free trial.

Web Typography

Choosing the right fonts takes experience, but using them correctly is also important. Here are some links for how to use fonts and some basic ideas on font pairings. We recommend you use no more than 2 fonts on your site.

  1. A general overview on type. Follow the links in the first section for some inspiring typographic use.
  2. AMAZING typography resource (at the very least, read through the Typography in 10 Minutes section)
  3. Read through the text section of this guide for basic ideas on how to use type
  4. A very cool little tool where you can adjust font size, line height, and other factors to affect a layout. The article is useful too.
  5. This page has some good links and bookmarks for future reference

Where you should get your fonts:


Color

Color can make or break the professionalism of your site. As a beginner, you may want to put a bunch of colors up on the page. But take a look at any professionally designed website and count how many colors they have – most have between 2 and 5, plus black and white. For this course, stick to those numbers.


User Experience

User Experience, or UX, is all about making our website as easy as possible for our visitors to use. Users are typically used to seeing certain patterns on the web, and we need to stick with those in order to make their experience a seamless one.

Take the time to read through Don’t Make Me Think (You can get the book from your instructor, later, or read through this PDF version). This book is the industry-leading textbook on user experience and contains a lot of great information that is explained in way that is easy to understand.

More resources for UX


Design Inspiration Resources (things to bookmark)


Project

Apply what you’ve just learned!
Redesign your business website using your newfound knowledge. Suggestion: Find an existing site that you like on the web and emulate the layout for your redesign. Here are your requirements:

  1. Make the site responsive
  2. Stick to a professional color scheme of 4 colors or less (plus black and white)
  3. Choose 2 fonts – one for the headings and one for the body copy
  4. Make sure to follow Steve Krug’s example – make your site easy to use! Easy to read, easy to navigate, etc.
    • Your navigation bar should be on the top or the left of every page
    • Your logo/company name should be clickable and in the upper left on each page
    • Provide enough color contrast so your site is easy to read
  5. Don’t forget to use whitespace!

Once you are done with the site, load it via FTP to the server and submit a link to your new website page through Blackboard.