Transcript
Introduction
In this lesson, we will explore why it is a good idea to use the Site Editor for designing and prototyping. The lesson outcomes are identifying the advantages of using the Site Editor, using the Site Editor to preview styling choices and highlighting web-related design principles. The Site Editor is WordPress’s visual design tool that lets you customize everything from headers and footers to entire page layouts.
Advantages of using the Site Editor
The Editor offers several advantages:
- When you master blocks, you can easily manage everything on your site since it’s entirely built with them. Blocks replace all previous methods, including shortcodes, widgets, embeds, and custom HTML, simplifying your content creation process.
- By designing directly within WordPress, you streamline the journey from concept to implementation, facilitating easier updates and maintenance. This approach also reduces traditional handover challenges between designers and developers.
- The Editor provides real-time, interactive previews of your designs, enabling immediate testing and refinement.
- Moreover, by utilizing WordPress’s native tools for design, you ensure compatibility with the platform and reduce the learning curve typically associated with external design software.
Designing in the Site Editor
Next, let’s explore designing in the Site Editor. When you start out, make sure you install and activate a block-based theme, such as Twenty Twenty-Five, and then open up the Site Editor. Then we can make our way to Styles, followed by selecting the Zoom Out option. Then we can start styling. First, I will update the typography of my text, and then headings. Then I will move on to Colors and update my color palette. I will change the background color, as well as the contrast color and accent colors. Once I’ve updated the color palette, I’ll make sure to enhance interactive elements, such as buttons. So, let’s go ahead and select our Buttons block, and change the appearance of our text to semi-bold.
Next, we can move on to modifying our header and footer template parts. So, I will open up my Pages template, as templates, of course, provide the structure for a page, and then I will select my header in my List View. And then we have a selection of patterns to choose from. When you find the pattern that you are after, you can modify it to meet your design needs. And then move on to your footer template part. Once you are happy with your header and footer, you can customize your templates. For example, the All Archives template, the Single Posts template, or even the Search Results template. For this example, let’s modify the 404 template, which displays when no page is found. You can, of course, completely change this template, but I am merely going to tweak and modify the layout of the content. Once we have edited our templates, we can start selecting patterns and sections, and modify them to meet our design vision.
As a reminder, block first design means breaking down your website into smaller, reusable components that can be mixed and matched to create diverse layouts. In the first example, we can duplicate one of the patterns that come with our theme, save it as a synced or non-synced pattern, and then make our way to My Patterns, and then modify the pattern or reusable component accordingly. Then you also have the option to build a synced or non-synced pattern from scratch. When you return to patterns, you can click on Add New Pattern, name it appropriately, select a category, and then choose to sync or not sync. And then you can build your pattern or reusable component. And then you will notice that this pattern is also available below My Patterns.
Web-related design principles
To end off, let’s explore some key web design principles that will help guide you on your journey, also referred to as Gestalt Principles, namely Proximity, Similarity, Continuity and Closure.
- Proximity: Group related elements together to create a sense of organization and structure. In the example at the top, you will notice that not enough spacing has been utilized to group related parts together.
- Similarity: Use consistent styles for related elements to indicate their connection. In this example, the similarity between categories help users quickly find what they need. Let’s look at similarity from a different angle. In the example below, the call-to-action buttons use different colors to show different actions, but their similar size and shape make them feel connected. By using consistent styling such as color, shape or size for similar functions or content types across your website, you help users quickly recognize and understand the purpose of different elements.
- Continuity: Align elements to create a natural flow for the eye to follow.
- Closure: Allow users’ minds to complete shapes or patterns, reducing visual clutter. This principle is often used in logo design and icons to create simple yet memorable visuals. If we look at the WWF logo, you’ll notice we fill in the gaps to complete the image of the panda. By mastering the Site Editor and understanding these fundamental web design principles, you’re well equipped to create functional websites right within WordPress.
Conclusion
By mastering the Site Editor and understanding these fundamental web design principles, you’re well-equipped to create visually striking, functional WordPress designs.