- Overview
- Transcript
1.1 Welcome to the Course
Hello and welcome to this Envato Tuts+ course, during which you’ll learn the basics of designing a WordPress theme. Now, we’ll take a slightly different approach in this course. Instead of designing the theme page by page, we’ll build a design system for it. If you want to learn more about that, we also have a course on the topic that’s linked down below.
Essentially, a design system is a collection of components, guidelines, and best practices for a project. For this theme, we’ll start by defining our colors, typography, spacing, and sizing. Then we’ll design and document the core components. In the end, as a demo, we’ll design the index page based on this system.
With this information, you can then refer to the design system and design as many pages as you need.
We have a lot to cover, so let’s get started with the first lesson, where we’ll discuss some design considerations for WordPress themes. See you there.
Related Links
- Introduction to Design Systems
- WordPress themes and plugins on Envato Elements
- Fonts on Envato Elements
- Icons on Envato Elements
1.Introduction
1.1Welcome to the Course01:55
1.2Design Considerations for WordPress Themes06:36
2.Preparation
2.1A Design System Approach07:43
2.2Defining Colors14:57
2.3Defining Typography21:15
2.4Defining Spacing and Sizing08:07
3.Basic Patterns
3.1Buttons15:42
3.2Forms16:22
3.3Menus08:22
3.4Icons and Images12:24
3.5Tables06:34
3.6Separators and Spacers06:09
3.7Grid System06:23
4.Advanced Patterns
4.1WordPress Widgets06:49
4.2WordPress Posts19:18
4.3Headers and Footers09:27
5.Page Layouts
5.1Creating Page Layouts06:14
5.2Designing a Full Page: The Index08:15
6.Final Words
6.1Conclusion03:36
1.1 Welcome to the Course
Hello and welcome to a new Envato Tuts+ course. I'm Adi Purdila. And in this course you'll learn the basics of designing a WordPress theme. Now for this theme, we'll take a slightly different approach. Instead of designing it page by page, we'll build a design system for it. If you wanna learn more about designing systems, we also have a course on that topic, so make sure you check out the link down below. Essentially, the design system is a collection of components, guidelines, and best practices for a specific project. In our case, we're gonna start by defining our colors, typography, sizing, and spacing. We're gonna build our core components. And then at the end as a demo, we're gonna take all of this and we'll design the index page. So let's take a look at how we gonna structure this course. First we'll make the unit necessary preparations. The first elements in a design system are color, typography, spacing, and sizing. We'll define these in the first chapter. In the second chapter we'll start designing the basic components or patterns, things like buttons, forms, menus, tables and so on. The third chapter is about the more advanced patterns like WordPress widgets, posts, headers, and footers. In the final chapter, we'll define some page layouts. And also as a demo, we'll design the full index page based on our design system. All right, we have a lot to cover. So let's get started with the first lesson where we'll discuss some design consideration for building WordPress themes. See you there.
