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