Learn the basics of WordPress theme design but from a “design system” perspective! Get inspired by the WordPress themes and plugins, fonts, and icons available on Envato Elements: https://elements.envato.com/wordpress...

Instead of designing the theme page by page and button by button, we’ll start by defining a few key parameters: colors, typography, spacing, and sizing. Based on these, we’ll design basic and advanced patterns and document them along the way.

As a demonstration of how to use the design system, we’ll then design a full page: the index. By following this process, you’ll then be able to design your own pages in a consistent and efficient way.

Links:
* WordPress themes and plugins on Envato Elements https://elements.envato.com/wordpress...
* Fonts on Envato Elements https://elements.envato.com/fonts?utm...
* Icons on Envato Elements https://elements.envato.com/graphics/...
* Introduction to Design Systems https://webdesign.tutsplus.com/course...

* Color of the Year 2020 https://www.pantone.com/color-intelli...
* Adobe Color https://color.adobe.com/create
* Make Tints and Shades https://maketintsandshades.com


1 - Introduction
00:00:00 1.1 - Welcome to the Course
00:01:55 1.2 - Design Considerations for WordPress Themes

2 - Preparation
00:08:32 2.1 - A Design System Approach
00:16:15 2.2 - Defining Colors
00:31:13 2.3 - Defining Typography
00:52:28 2.4 - Defining Spacing and Sizing

3 - Basic Patterns
01:00:36 3.1 - Buttons
01:16:18 3.2 - Forms
01:32:41 3.3 - Menus
01:41:03 3.4 - Icons and Images
01:53:27 3.5 - Tables
02:00:02 3. - Separators and Spacers
02:06:11 13 - Grid System

4 - Advanced Patterns
02:12:35 4.1 - WordPress Widgets
02:19:25 4.2 - WordPress Posts
02:38:43 4.3 - Headers and Footers

5 - Page Layouts
02:48:10 5.1 - Creating Page Layouts
02:54:25 5.2 - Designing a Full Page: The Index

6 - Final Words
03:02:40 6.1 - Conclusion

Forums: https://forums.envato.com/c/project-m...

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt...

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_camp...

► Subscribe to Envato Tuts+ on YouTube:    / tutsplus  
► Follow Envato Tuts+ on Twitter:   / tutsplus  
► Follow Envato Tuts+ on Facebook:   / tutsplus  
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -