Take a look at the video content
5 Modules - 86 Lessons - 20 hours Total
Forward
2 mins
Introducing George and myself (Adrian) as two developers with similar backgrounds and why we put this book together to help others like us to design better websites and applications.
Course Introduction
10 mins
Find out what is involved as part of this course, what you will learn and why you should. Design isn't just about making good user interfaces, and we will explore exactly what that is.
Color Theory
10 mins
Learn what color theory is, why it's used in web design and how to begin using it yourself.
Colors - Primary, Secondary & Tertiary
20 mins
The three main types of colors used as part of color theory and how they expand the color wheel.
Hue - Saturation, Tint, Tone, Shade
25 mins
What exactly are terms like hue and saturation, and how do we customize colors.
Color Psychology, Monochrome Colors
25 mins
How do colors influence a web design and their viewers.
Color Weights, Contrast, Schema
25 mins
Create a color schema for your next website using various color weights.
Typefaces, Fonts
10 mins
Introduction to typography and typefaces which are based on fonts.
Serif Fonts, Sans Serif Fonts
20 mins
Learn the difference between serf and sans serif fonts and where to use them.
Bold, Italics, Underline, Capitalization
25 mins
How to correctly use bold, italics and other font modifications for your website.
Letter Spacing, Line Height, Font Size
25 mins
The important of spacing for line height, letter spacing and even font sizing as a whole.
Legibility, Text Hierarchy, Schema
25 mins
What exactly is good legibility and how to use text hierarchy to make reading easy.
Spacing, Baseline Units, Grids, Columns
10 mins
How to setup proper spacing structures for your site using grids, units and columns.
Buttons, Borders, Shadows, Icons
20 mins
Looking at the core components that make up a site like buttons, etc.
Forms, Inputs, Labels, Dividers
25 mins
Building better designs for user interaction with forms, inputs, etc.
Checkbox, Radio, Textarea, Toggles
25 mins
How to ensure you are making your inputs well spaced and useable.
Dropdown, Toasts, Breadcrumbs, Tabs
25 mins
Ensuring users understand your inputs that are more advanced, like dropdowns etc.
Tables, Lists, Tooltips, Cards
25 mins
Displaying complex data using tables, lists and other components.
Icons, Avatars, Accordions
25 mins
Supplement your designs with visuals and functions such as images, icons and accordions.
Visual Patterns, F Pattern, Z Pattern
15 mins
The visual patterns that users read websites by influences design, learn the F and Z patterns to design better looking sites.
Sizing, Text, Buttons
230 mins
Learn how sizing, text and buttons play a vital role in the visual hierarchy of web design.
Inputs, Colors, Contrast
30 mins
How to use color, contrast and inputs to influence how users view and access a site.
Proximity, Alignment, Consistency
60 mins
Visual hierarchy relies on good use of patterns such as proximity, alignment and consistent design.
Negative Space, Harmony
60 mins
Find out how to properly space elements to make them visually appealing and easy to identify.
Wireframe
10 mins
An introduction to creating wireframes and what elements are important for their creation.
Styleguide
20 mins
Put together earlier chapters of to create your own style guide for a website or application.
Colors
25 mins
Create the final color schema based on color theory principles.
Typography
25 mins
Create the template of text types that will be used as the typography for a website.
Imagery
25 mins
Create the logos and images which can later be used in in different layouts and sizes.
.jpg)
.png)
