Designing for WordPress (Using a Design System)

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?utm_campaign=yt_tutsplus_y-UA8SIhWG4&utm_medium=referral&utm_source=youtube.com&utm_content=description

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?utm_campaign=yt_tutsplus_y-UA8SIhWG4&utm_medium=referral&utm_source=youtube.com&utm_content=description
* Fonts on Envato Elements https://elements.envato.com/fonts?utm_campaign=yt_tutsplus_y-UA8SIhWG4&utm_medium=referral&utm_source=youtube.com&utm_content=description
* Icons on Envato Elements https://elements.envato.com/graphics/icons?utm_campaign=yt_tutsplus_y-UA8SIhWG4&utm_medium=referral&utm_source=youtube.com&utm_content=description
* Introduction to Design Systems https://webdesign.tutsplus.com/courses/introduction-to-design-systems?utm_campaign=yt_tutsplus_y-UA8SIhWG4&utm_medium=referral&utm_source=youtube.com&utm_content=description

* Color of the Year 2020 https://www.pantone.com/color-intelligence/color-of-the-year/color-of-the-year-2020
* 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-making/envato-courses-and-tutorials?utm_campaign=yt_tutsplus_y-UA8SIhWG4&utm_medium=referral&utm_source=youtube.com&utm_content=description

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
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_tutsplus_y-UA8SIhWG4&utm_medium=referral&utm_source=youtube.com&utm_content=description

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_campaign=yt_tutsplus_y-UA8SIhWG4&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

source