Intro to design, UX & Fonts Copy

Introduction

Design and user experience (UX) play essential role in a website if you want to attract users. As a front end developer you don’t have to be an artist, however you need to use your design brain a little bit. Design doesn’t mean just having beautiful and fancy graphics.

Learning Objectives

  • What design is
  • What user experience is
  • The difference between UX and UI
  • The three things UX is meant to focus on
  • What visual hierarchy is and why it is important for websites
  • The primary ways to achieve visual hierarchy
  • The design hierarchy pyramid
  • The CRAP factors of effective layout
  • What A/B Testing is
  • What Web Accessibility (A11y) is and why we should care

Study

Let’s see what user experience is? UX is focusing on three things:

  • effectiveness
  • efficiency
  • and satisfaction.

In other words, when a user visits you website he/she must be able to do what he/she is trying to effectively, efficiently, and with satisfaction. So on one hand you should have the mindset of trying to optimize those three things by talking to your users and on the other hand you need to actually build and measure those things.

Now let’s see what web design is?

Web design is certain more than just building pretty things. It is more about crafting useful and effective experiences for your users.

So you need to focus on these steps:

  1. Make your site fast and reliable
  2. Set up properly the structure and information architecture of the page
  3. Build your user interfaces for optimal user experience
  4. Worry about aesthetics

For the reasons already mentioned it’s probably worth spending a little time to absorb the high level stuff. Don’t go to crazy though. Remember that the goal is to absorb the most important concepts and move on.

And let’s start by watching this recorded live session:

Web Accessibility

Web Accessibility is crucial to the success of all web products and services. Watch the following video about web accessibility, take notes and make sure to keep these rules in mind when developing websites and web applications from now on.

Duration: 35 minutes

User Experience

You are probably familiar with the successful products and services of companies such as Google, IBM and Amazon, but what you might not know is that these companies have based their success and increased their profitability by investing heavily in the UX (User Experience) of their products.

Let’s see how UX can either break a website or make it successful by looking at the following Infographic: UX 101: What is User Experience?

UX 101: What Is User Experience?

From Visually.

Study

  1. Read Startups, This is How Design Works

  2. Get a more detailed look at what UX really is from Smashing Magazine. Don’t worry about absorbing all the tools and techniques… focus on the high level stuff at the top. Take a short break and grab a cup of coffee before diving into this one. You’ll need some time and a clear head for some serious studying.

"Does this website give me value? Is it easy to use? Is it pleasant to use?" These are the questions that run through the minds of visitors as they interact with our products, and they form the basis of their decisions on whether to become regular users. ~ What is UX Design, Smashing Magazine

  1. Read a very simple overview of Visual Hierarchy from 52weeksofUX.

Visual hierarchy suggests there is a proper way to view content visually: in a hierarchical way. ~ Visual Hierarhy, 52weeksofUX

  1. Read about the C.R.A.P Design Principles, which you’ve been subconsciously aware of for years.

Design matters. But design is not about decoration or about ornamentation. Design is about making communication as easy and clear for the viewer as possible. ~ C.R.A.P. Design Principles

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

Introduction to Typography

Typography plays an important role in a website. Although most developers don’t pay much attention to it, typography has a major effect on how your page feels when the user is reading through it. In addition typography has also an influence of how easy the page is to digest. That is important because this will determine the decision of the user to continue reading the page or turn back.

The goal of this topic is to help you get familiar with typeface and font-sizes. Although you don’t have to dive into kerning and what ligatures are, you be able to understand when it’s appropriate to use serif vs sans-serif fonts and how font weights and line heights impact readability.

Learning Objectives

  • Why fonts matter
  • The difference between a serif and sans-serif font
  • What font-family attributes are used for
  • How the active font is determined in a font-family
  • Where the browser gets its fonts from
  • Where we can get additional fonts from and how to get them onto our page
  • The disadvantages of using web fonts or loading our own
  • The important properties of fonts that we can specify using CSS

Study

  1. Read Shay Howe on Fonts and Typography

  2. The Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility article has very useful information and consists of the following sections:

    • Document Structure and Semantics
    • Get Your Color Contrast Right
    • Responsible Text Labels
    • Small Typography Tweaks With a Big Impact
    • Enhance Keyboard Support
    • Don’t Rely on Color Alone to Communicate State Changes
    • Wrapping Up

  3. Browse through A Beginner’s Guide to Using Google Web Fonts by DesignShack, but don’t get too lost in the details.

  4. Browse the Google Web Fonts and see if any of them seem interesting to you.

  5. 8 Typography Tips To Ensure Web Accessibility:

  1. Sans Serif Vs Serif Font — Which Should You Use & When (Approximate reading time: 8 minutes)

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

Fun Time

Back to Lesson