Project: Design Teardown (v1)

Introduction

In this simple project, you’ll be breaking apart the website for a popular design magazine with which you’re probably familiar by now — Smashing Magazine. The goal for this exercise is to start training yourself to think in terms of visual hierarchy, typography and design principles.

Your job is to create a grayscale heat map of the website that indicates which elements have the greatest weight in the visual hierarchy. For inspiration, check out this image from vanseodesign.com which compares a site layout with no differentiation on the left to one with a thoughtful hierarchy on the right. Your final product will look much like the site on the right.

This is also an opportunity to get better at positioning <div> elements without worrying too much about what’s inside them, which will serve you well later.

Instructions

Playing with Visual Hierarchy

  1. Go to Smashing Magazine’s website and check out their homepage. Think about where your eye got drawn to first, second, and third on the page. What elements on the page carry the greatest visual weight?

  2. Think for a minute about whether or not they’ve achieved the right hierarchy for getting you to consume content on their site. What’s distracting?

  3. Set up a private Github repository for this project.

  4. Create a new HTML document.

  5. Think about all the elements on the Smashing homepage and how they are grouped together.

  6. Copy the basic structure of the page using empty semantic HTML elements that are appropriately sized and positioned.

  7. Now make the background colors of those divs different shades of gray which correspond to their visual weight on the Smashing homepage. If you squint your eyes and look from your solution to their page, does your eye get drawn to the same places?

Playing with Typography

  1. Add in some meaningless text to those divs (whether copied from the homepage or a lorem ipsum generator) for the main headlines and paragraphs. You’ll obviously want to change the div backgrounds back to white for those elements. You only need to add text to the main content areas, don’t worry too much about the side areas and navigation.

  2. Change around the font styles and weights and see how that affects the visual weight and feel of the page. You should see some major differences between using serif and sans-serif fonts as well as moving from font-weight 100 to 700.

  3. Load in a few web fonts from the Google Web Fonts page you saw in the lesson on fonts to test those out too.

  4. Find a font/weight combination that approximates that of the original Smashing homepage and apply it to your solution.

  5. Push your solution to Github and Submit the URL in the Quiz below.

Additional Resources

  • Suggest some in the comments below!
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

Grids (v1)

Introduction

Grids are another extension of the design world. There’s just something much more pleasing about navigating through a site that properly uses a grid to lay out the content than one which has ignored all the C.R.A.P principles and put things in place willy-nilly.

In this section, you’ll get a look at how to use CSS to lay out the elements of your page using a grid.

Learning Objectives

  • Why are grids effective for helping site layout?
  • What are the major different types of grids in use today?
  • How could you design your own grid (on paper)?
  • How can you implement your own grid in CSS?

Study

  1. Read Basic Grids from CSS-Tricks.

  2. Read Fluid Grids from A List Apart.

  3. Read through the Responsive Grid with Media Queries Tutorial from TutsPlus. You don’t need to actually build it, but feel free to.

  4. Glance through Unsemantic, which is a fluid grid system which can be really useful for building layouts. They have demos that you can take a look at. Just look through the site; we’ll be covering the Bootstrap and Foundation grid systems later.

Additional Resources

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

Fonts & Typography (v1)

Introduction

Something like 95% of the web is text and yet most web developers don’t pay any heed whatsoever to typography — it’s this mysterious esoteric subject reserved for designer geeks and their lattes. You are not "most web developers".

Typography is important stuff! It can have a major effect on how your page feels when the user is reading through it and can also influence how easy the page is to digest, both major factors in your user deciding to continue or turn back. You got introduced to it in the section on Design and UX, and here you’ll see it implemented.

Do what you can to get at least a familiarity with the high level decisions involved with choosing a typeface and font sizes. You don’t need to dive into kerning and what ligatures are, but you should understand when it’s appropriate to use serif vs sans-serif fonts and how font weights and line heights impact readability (recall how to build a good visual hierarchy).

Learning Objectives

  • Why do fonts matter?
  • What’s the difference between a serif and sans-serif font?
  • What are font-family attributes used for?
  • How is the active font determined in a font-family?
  • Where does the browser actually get its fonts from?
  • Where can you get additional fonts from and how do you get them onto your page?
  • What are the disadvantages of using web fonts? Of loading your own?
  • What are the important properties of fonts that you can specify using CSS?

Study

  1. Read Shay Howe on Fonts and Typography

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

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

  4. 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

Fun Time

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 01.02.2021

CONTRIBUTORS:

Introduction to Design and UX (v1)

Introduction

You can’t code the front end and ignore design and user experience (UX). Not everyone is cut out to be an artist and you don’t have to be. But you do have to actually use your design brain a little bit if you want a site your users actually care about visiting. That doesn’t mean just having beautiful graphics, which is a common misconception about design.

User Experience is really about focusing on three things — can the user get done what he/she is trying to do effectively, efficiently, and with satisfaction. Half the battle is just having the mindset of trying to optimize those three things by talking to your users. The other half is about actually building and measuring those things.

Web design is more than just building "pretty" things; it’s about crafting useful and effective experiences for your users. It starts with making your site fast and reliable. Then you need to properly set up the structure and information architecture of the page so users have a logical schema for navigation. Then you will build your user interfaces for optimal user experience. Only then, finally, can you worry about aesthetics.

Given the focus web design has on crafting an effective user experience, which is the only way to have a successful website, it’s probably worth spending a little time to absorb the high level stuff, huh? You don’t want to go too crazy, though — this is definitely a rabbit hole where you can spend way too much time trying to learn everything there is to know about UX or Design.

Remember that your goal here is to absorb the most important concepts and continue on your way. You can always come back when you’ve got enough experience to start asking the right questions.

Learning Objectives

  • What is design?
  • What is user experience?
  • What’s the difference between UX and UI?
  • What are the three things UX is meant to focus on?
  • What is visual hierarchy and why is it so important for websites?
  • What are the primary ways to achieve visual hierarchy?
  • What is the design hierarchy pyramid?
  • What are the CRAP factors of effective layout and what are they used for?
  • What is A/B Testing?
  • What is Web Accessibility (A11y) and why should I care?

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

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 29.03.2021

  • Added 5 Things Developers Need to Know About Design video link
  • Embedded UX 101 Infographic from Visually

CONTRIBUTORS:

Project: Design Teardown

Introduction

The goal of this project is to start training yourself to think in terms of visual hierarchy, typography and design principles. Therefore in this project you will create a grayscale heat map of the Smashing Magazine’s website that indicates which elements have the greatest weight in the visual hierarchy.

For inspiration, you can check out this image from vanseodesign.com. This image compares a site layout with no differentiation on the left to one with a thoughtful hierarchy on the right.

Your final product will look much like the site on the right.

In addition this is an opportunity to get better at positioning <div> elements without worrying too much about what’s inside them, which will serve you well later.

Instructions

Playing with Visual Hierarchy

  1. Go to Smashing Magazine’s website and check out their homepage. Think about where your eye got drawn to first, second, and third on the page. What elements on the page carry the greatest visual weight?

  2. Think for a minute about whether or not they’ve achieved the right hierarchy for getting you to consume content on their site. What’s distracting?

  3. Set up a private Github repository for this project.

  4. Create a new HTML document.

  5. Think about all the elements on the Smashing homepage and how they are grouped together.

  6. Copy the basic structure of the page using empty semantic HTML elements that are appropriately sized and positioned.

  7. Make the background colors of those divs different shades of gray which correspond to their visual weight on the Smashing homepage. If you squint your eyes and look from your solution to their page, does your eye get drawn to the same places?

Playing with Typography

  1. Add in some meaningless text to those divs (whether copied from the homepage or a lorem ipsum generator) for the main headlines and paragraphs. You’ll obviously want to change the div backgrounds back to white for those elements. You only need to add text to the main content areas, don’t worry too much about the side areas and navigation.

  2. Change around the font styles and weights and see how that affects the visual weight and feel of the page. You should see some major differences between using serif and sans-serif fonts as well as moving from font-weight 100 to 700.

  3. Load in a few web fonts from the Google Web Fonts page you saw in the topic on fonts to test those out too.

  4. Find a font/weight combination that approximates that of the original Smashing homepage and apply it to your solution.

  5. Push your solution to Github and Submit the URL in the Quiz below.

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.

  • Suggest some in the comments below!

The archived old version of this post can be found here

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

Grids

Introduction

Grids are another extension of the design world. There’s just something much more pleasing about navigating through a site that properly uses a grid to lay out the content than one which has ignored all the C.R.A.P principles and put things in place willy-nilly.

In this topic, you’ll get a look at how to use CSS to lay out the elements of your page using a grid.

Learning Objectives

  • Why grids are effective for helping site layout
  • The major different types of grids
  • How we can design our own grid (on paper)
  • How we can implement our own grid in CSS

Study

  1. Read Basic Grids from CSS-Tricks.

  2. Read through the Responsive Grid with Media Queries Tutorial from TutsPlus. You don’t need to actually build it, but feel free to.

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.


The archived old version of this post can be found here

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

Fonts & Typography

Introduction

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


The archived old version of this post can be found here

UPDATED: 04.06.2021

CONTRIBUTORS:

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

Introduction to Design and UX

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.

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.

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

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.


The archived old version of this post can be found here

UPDATED: 04.06.2021

  • Added 5 Things Developers Need to Know About Design video link
  • Embedded UX 101 Infographic from Visually

CONTRIBUTORS:

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack