Design 101

Whether your goal is to grow your creative skillset or to make a career switch, design is a
vital part of why we experience what we do. Think about all of the digital products that we
interact with on an everyday basis. Everything from social media to a weather or banking
app, all of these products were intentionally designed to function a specific way. Design is
about more than learning a piece of software. It’s about recognizing needs and wants,
making choices, and paying close attention to detail.

With this course you’ll learn that design, just like programming, has fundamental

concepts and best practices that will help you build a foundation for your journey

toward becoming a designer.

OVER FOUR WEEKS, WE WILL COVER

Unit 1: Learning to See Design

Design is about problem solving. It is often closely associated with art, but in
actuality aesthetics are just part of what makes a well designed product. Before
you begin learning the theory and foundations of design, it is helpful to have a
solid understanding of “why”. This unit is intended to help you begin thinking of
design as a thought process, and how to start observing what makes something
well designed.
Projects: Why Do You Want to Learn Design?, Evaluate Design

Unit 2: Ideating & Sketching

Creativity often involves the process of being willing to generate as many
divergent ideas as possible, and then moving forward with ideating the most
promising ones. We’ll take a closer look at why ideation is important, how
designers come up with their best ideas, and what techniques they use.
Projects: Generate Ideas, Sketch Your Design, Sketch Your Logo

Unit : olor & y ogra hy

3 C T p p

Designers consider color and typography both a science and an art. Although the
principles of these two areas can consume a lifetime of study, don t worry! We ll go
' '

through the fundamentals so you ll make solid color and typography decisions
'

every time !

Projects: Practice reating olor Palettes, Practice Selecting y e, reate Your Provisional Style ile
C C T p C T

DESIGNLAB H E R E ’ S TO T H E M A K E R S Questions? Drop us a note!

 Unit : magery
4 I

Have you ever wondered how designers select imagery and icons that are
memorable, visually integrated, and perfect for a particular brand? In this unit, we’ll
cover the ins and outs of selecting imagery and designing icons, as well as share
practical tips for how to help train your eye so you select images that make a
long-lasting impact and connect with your desired audience.
Projects: Set Up a Photographic Li rary, Gather Your cons, Vectori e Your Logo, Final Style ile
b I z T

Unit 5: Layout & Composition

A layout is more than finding room for all your content on a given page. It's about
visual harmony, guiding the user's attention, and creating an enjoyable, efficient
reading experience. In this unit, we’ll learn the foundations of building great layouts
and composition, resulting in cohesive designs every time.

Projects: Deconstructing Grids

Unit 6: Designing the Details

Frictionless interaction design is based on common design patterns, which appear
everywhere—from set heights on staircases in architecture, to brand names on
digital interfaces that behave like buttons and return us to the homepage of a
product.
Projects: Find the Right Patterns, Practice Visual Hierarchy, Create and Explore Your Sections

Unit 7: Going Hi-Fi

There's a popular belief among designers that polishing is 20% of the work, but it
takes 80% of the time! Since high-fidelity designs are usually the final deliverable
before handing things over to developers, you'll focus most of your time on
polishing your final design in this unit. Every detail counts!
Projects: 2 High Fidelity Versions of Your Design, Final Version, Present Your Work

Unit : Design eams & Hando

8 T ff

In this final unit, we'll talk about design teams, roles, and collaboration across an
organi ation, including how to hand o your designs to the development team so it
z ff

can go from concept to reality!

Projects: Using a Hando ool
ff T

DESIGNLAB HERE’S TO THE MAKERS Questions? Drop us a note!

 tools we recommend

You can complete all of Design 101’s projects using any design tool of your choice—but we recommend the
following:

Figma
Sketch
Photoshop

Figma Inc. Bohemian Coding Adobe

Feel free to get a head start on learning these tools through our free tutorial courses linked above. Once you’ve
mastered the basics, your mentor will be able to teach you more tips and tricks moving forward.

what you’ll learn

Learn to recognize good design from bad Concept and create components for apps

Gain a basic understanding of typography, color Learn how to effectively communicate your ideas
theory, visual hierarchy, layout, and how to pick with clients, teammates, and others through your
and choose your own imagery and assets newfound understanding of visual design

Gain insightful feedback on your coursework from Come away with a beginning collection of
an expert mentor – Four hours of 1-on-1 dedicated designs for your own portfolio, and give yourself
call time to help you grow your skills a foundation to kickstart a new career

“I’ve started a new job at Microsoft as a Design Developer, three weeks

ago. The design principles I learned during the Designlab course
helped me during the interview process! Thank you so much.”

Frederic was a freelance developer living in Paris, looking for ways to improve his
design skills. He had tried other online tutorials and courses before, but nothing really
helped boost his abilities–so he signed up for Design 101 and was matched with his
mentor Daina.

As a senior designer who’d worked at companies like Dropbox and Hootsuite, Daina
was able to help Frederic take his design skills to the next level. Shortly after
completing the course, Frederic was able to move into a new role at Microsoft as a
design focused Front-End Developer.

DESIG NLAB HERE’S TO THE MAKERS Questions? Drop us a note!

 what you’ll create

Here are some past examples

of real student work.

DESIGNLAB HERE’S TO THE MAKERS Questions? Drop us a note!

 UI Design
Learn how to analyze the design of apps, apply visual design concepts to 

user interfaces, recognize and implement common UI design patterns, and 

design a complete, multi-page interface based on project specifications.

OVER FOUR WEEKS, WE WILL COVER

Unit 1: Introduction to UI Design

In the first unit, you’ll learn what an interface is, recap some fundamental design
principles, and look at how they apply to UI design. Then, you’ll duplicate an
interface of your choice as you tackle the first project.
Projects: Icebreaker, Duplicate an Interface

Unit 2: UI Design Process

Take a look at how user interface (UI) design relates to the bigger picture of user
experience (UX) design. You’ll also go through some key UX design techniques 

for effective interface design, and get started on the project you’ll be working 

on for the next few weeks.
Projects: Design a landing page, Create a task flow diagram

Unit 3: Color & Type

After recapping the basics of color and typography, take a look at how to create
color schemes that are functional and efficient in UI design, and examine the key
considerations when when choosing a font for your website or app design. 

There’s also a how-to guide on how to create natural color variations.
Projects: Practice building UI colors, Build a provisional style tile

Unit 4: Build a User Interface

In this unit, build on the decisions you took about color and type in your style tile,
and start designing the layout and components of your interface. This means
considering different device needs, which UI components or modules to create,
and how to stay consistent—even at the level of form fields.
Projects: Wireframe your application, Mobile wireframes (optional)

DESIGNLAB H E R E ’ S TO T H E M A K E R S Questions? Drop us a note!

 Unit 5: Creating Visual Assets
Images, icons, logos, and illustrations can add depth, character, and credibility to
an interface design—but only if they’re handled correctly. In this unit, you’ll look at
how to use photos effectively, and examine in detail the purpose of icons, logos,
and other visual assets.
Projects: Design the logo for your app, Update your style tile

Unit 6: Aesthetics and Interfaces

Although UI design should primarily be about usability rather than beauty, the two
are not completely separate. It’s now well established that users perceive a design
as more user-friendly if it is beautiful. In this unit, learn how to leverage this
“aesthetic usability effect” to enhance the user’s experience of your design.
Projects: Create high-fidelity desktop app mockups, Create hi-fi mobile app mockups

Unit 7: Prototyping and Testing

However rigorous your design work so far, there are certain insights that you can
only get through prototyping and testing. In this unit, learn about the different
options for rapidly turning your app design into a clickable prototype, and how
each one allows you to gather feedback and efficiently iterate on your designs.
Projects: Build an app prototype, Test your design (optional), Finalize your hi-fi mockups

Unit 8: Handoff
At the end of most digital design projects, the designer will be responsible for
packaging up the work into a format that is helpful for a development or
engineering team. In this unit, find out what needs documenting, how to handle
assets and file formats, and what tools are available to help with handoff.
Project: Compile your design in a handoff tool

DESIGNLAB HERE’S TO THE MAKERS Questions? Drop us a note!

 tools we recommend

You can complete all of our projects using any design tool of your choice. 

However we strongly recommend the following professional design programs:

Photoshop
Illustrator
Sketch
Figma

Adobe Adobe Bohemian Coding Figma Inc.

Your mentors are a great resource to discover tips and tricks to improve with the tools.

what you’ll learn

Consolidate existing knowledge of design Deepen knowledge of grids and layout,

fundamentals, and discover how they apply including component-level grid use,
to user interface design responsive design, and design systems

Situate UI design within wider UX design Discover how to use images, icons, and 

principles and techniques, including Laws 
 other visual assets effectively, and create
of UX, user stories, and flow diagrams your own responsive logo

Understand the special demands of user Find out how to turn your app design into 

interfaces when it comes to selecting fonts a clickable prototype, test it, iterate on your
and designing color palettes solution, and hand it off to a developer

“I’ve started a new job at Microsoft as a Design Developer, three weeks

ago. The design principles I learned during the Designlab course
helped me during the interview process! Thank you so much.”

Frederic was a freelance developer living in Paris, looking for ways to improve his
design skills. He had tried other online tutorials and courses before, but nothing really
helped boost his abilities–so he signed up for Design 101 and was matched with his
mentor Daina.

As a senior designer who’d worked at companies like Dropbox and Hootsuite, Daina
was able to help Frederic take his design skills to the next level. Shortly after
completing the course, Frederic was able to move into a new role at Microsoft as a
design focused Front-End Developer.

DES I GNLAB HERE’S TO THE M A KERS Questions? Drop us a note!

 what you’ll create

Here are some past examples

of real student work.

DESIGNLAB H E R E ’ S TO T H E M A K E R S Questions? Drop us a note!

 Interaction Design
Do you want to design products that are easy to use? Through this course you’ll
develop an understanding of the patterns and principles that govern interaction
design. You’ll become familiar with a framework for assessing the success of
interaction design, you’ll learn to structure the design of products around the
goals of users, and you’ll learn to sketch and wireframe your design ideas.

OV E R F O U R W E E K S , W E W I L L C OV E R

Introduction Interaction design is a major component of the user experience. It incorporates

information architecture and usability to define how a product will behave.
Projects: Business Goals, Competitive Analysis, Context of use Scenarios

Usability To create products that are easy to use, designers obey a set of usability
guidelines. These rules of thumb are good points of reference for making
decisions, and for communicating and justifying design decisions to others.
Project: Usability Competitive Analysis

Intro to Sketching Sketching is a fast and easy way for designers to get their ideas out and
discuss them collaboratively with team mates.
Project: Sketching Exercise

Information Architecture Information Architecture is the structural design of an interface that allows a
user to access the right content at the optimal time so that she can navigate
the product most effectively.
Projects: Card Sorting, Sitemap

User Flows User flows are the paths that a user takes through a product in order to
complete her tasks.
Project: User Flows

Wireframes Once a designer hashes out the overall structure and navigation patterns of a
product, she draws up the product’s blueprints, or wireframes.
Projects: Product Requirements, Wireframes, Sitemap with Wireframes
Design Patterns Effective interaction design relies on industry standard patterns for the
behavior of interface elements.
Project: Design Patterns

tools we recommend

You can complete all of our projects using any design tool of your choice. However we strongly
recommend the following professional design programs:

Photoshop
Illustrator
Sketch
Figma

Adobe Adobe Bohemian Coding Figma Inc.

Your mentors are a great resource to discover tips and tricks to improve with the tools.

what you’ll learn

Develop a strong foundation in Learn to evaluate interaction design by a set of

interaction design heuristic guidelines

Develop a portfolio of interaction design

work that demonstrates various principles

what you’ll create

Design patterns for site navigation and How to sketch and wireframe layouts effectively
recurring/foundation UI elements such as
dropdown, forms, and error handling.

Creating effective log in/sign up flows

DESIGNLAB Still have questions? Get help

H E R E ’ S TO T H E M A K E R S
 UX Research & Strategy
Most people still don’t know the difference between UX and UI. One of the main

differences is customer insight through research and validation. If you want a job

in UX, explaining how you would research, validate and gain insight is what would

make the difference between being taken seriously and getting thrown in the

“fake UX” pile. In this course you will not only learn different techniques, you will

do them on a weekly basis to gain experience. You’ll have real experience to

draw upon for that all important interview.

OVER FOUR WEEKS, WE WILL COVER

Introduction We learn about the human needs behind product design and how a user-centered

design process can help us deliver betters products.

Project: Design Thinking

Research You’ll learn how to build empathy through research techniques based on the

corse principles: Immerse, Engage, or Observe.

Projects: Empathy Exercise, Research Plan, Empathy Research

Define Now that you’ve done the research its time to take all the data and create

something meaningful. In this session we will look at the artefacts that we

create from user research, how we use them, and how we create them.

Projects: Empathy Map, Storyboard Exercise

Competitors How do we assess our competition? In this unit we will provide a structured

way for you to assess and report on competitors or your existing offering.

Project: Competitor Analysis

Point of Views Now that we have built empathy and have a deeper understanding of our

customers lives, we are in a good position to create some problem

statements or “Points of View”.

Project: Framing the Problem

Ideate We should always be aware that even though we have primary research, the

creation of our “Define” statements will be based on many assumptions. We

need to clearly define what these hypotheses are, work out how we will test

them, what success looks like, and either validate or invalidate the assumptions.

Projects: Brainstorm Exercise, User Flows, Learning Canvas

Prototype Prototyping is a big part of the design/build process, because it allows you to
iterate on ideas quickly. Making lightweight prototypes is much faster than
building a complete product. When you prototype early and often you are able to
reduce UX friction, eliminate errors, and uncover mistakes and false assumptions.
Project: Landing Page

Test When testing, our objective is to learn more about the people and the problem.
Using our ideation concepts (be they prototypes, storyboards, or other process
documents) our goal is simply to test our assumptions. Using the feedback we get
from our users, we then create the next iteration of our work and repeat the Design
Thinking process again as necessary.
Projects: Product Requirements, Wireframes, Sitemap with Wireframes

tools we recommend

You can complete all of our projects using any design tool of your choice. However we strongly
recommend the following design tools:

Post-It Notes Sharpies Sketch

Figma

Bohemian Coding Figma Inc.

Your mentors are a great resource to discover tips and tricks to improve with the tools.

w ha t y o u’ ll le a rn

Why understanding customers How to build empathy for your customers

is important in your team

Which methodologies to use When to research and why

for your projects

w ha t y o u’ ll cre a te

Research plan, Empathy Map, Storyboard Problem Framing, Learning Canvas

User Flows Landing Page Prototype

w ha t y o u’ ll cond u ct

User Interviews, Competitor Analysis User Testing, Storyboard Review

DESIGNLAB Still have questions? Get help

H E R E ’ S TO T H E M A K E R S