Web Design for WordPress Users

This video explores 10 of the most common web design mistakes and how to avoid them. These are some of the things we'll be covering in this course.

I want you to evaluate some websites to decide where the web design is poor. We'll also look at the evolution of Google, and how they worked hard to keep a visitor focused design with clear call to actions.

This video describes the tools a designer has to help them implement a layout and design that looks great and accomplishes a goal.

This video provides some examples of how a site design can impact conversions.

When a visitor trusts your site, they are more likely to trust you. This video looks at some trustworthy indicators you should try to integrate into your site design.

The development of a website traditionally involved designers and developers. You may be one or other, or both. This video describes the roles and scopes of these two jobs.

The discovery process is the traditional method of discovery used by web designers working for a client. We cover it more for completion than anything else, but it is interesting to see the full scope of the designer.

This video provides an overview of the type of worksheet you should be using with clients to come up with a design plan.

This video goes through some examples of using a site demographic to come up with design ideas.

In this video, we'll use the output from the previous ChatGPT session to suggest colors and fonts to use on the site.

This lecture looks at the benefits (and limitations) of installing WordPress locally.

This video shows you how to get setup with Local, and create a new local WordPress installation.

In this video we'll discuss WordPress themes, and which one you should use for this course.

This lecture covers the main SEO basics for any site, but specifically for WordPress sites.

Do you use Fluid or fixed designs? Old sites tended to use fixed, but that was because there were no mobile devices. Learn why you need to use fluid design.

This video looks at white space, and how using it effectively can increase readability and focus.

The box model is an important model that all web designers should know. This will make it clear how and when to use padding and margin.

This video describes the grid system used by designers for laying out their designs.

This video looks at how size can create a visual hierarchy, directing the visitors eye towards your call to action.

This video looks at using color to create visual hierarchy.

This video looks at the visual hierarchy that is so important in web design.

Proximity is an important concept in web design.  Elements that are too close look cramped. Elements that are too far apart look unrelated.

This video considers symmetrical and asymmetrical balance

This video discusses serif and sans serif fonts, and which font pairs work well together.

In Gutenberg and Elementor, you may have a choice to make between font units. Do you want to use pixels or em? Or perhaps something else? This video looks at what these units mean.

This video looks at what a font clamp is, and whether you need to use one.

This video looks at a free tool you can use to decide on the size of headings and body text.

This video looks at how colors have been used in websites and advertising to trigger an emotional response.

This video explains the hex code system of colors.

This video looks at some of the most popular color schemes.

Let's have a look at the Coolors website and create a color scheme.

When you start designing your site, you'll probably want to create wireframe diagrams to help you visualise what the site will look like. This video discusses the tools you need for that.

This video discusses how your designs on paper will translate into WordPress.

In this video, we'll play with some CSS to work out the best spacing between elements on a page using the fonts we've chosen.  We'll use CSS, but don't worry, if you don't know CSS, AI can help out.

In this video, we'll create a document we can use as we develop the site so that we can ensure consistent fonts, colors and spacing throughout.

In this video we'll install the fonts we need for our design.

In this video, we'll install our custom color palette.

In this video we'll look at the global styles so we can connect the correct fonts and colors to the various elements.

This video looks at the automatic spacing your theme (& Gutenberg) will add to blocks in your design

The elements in Gutenberg have default padding and pargin. This video shows how you can change the default settings for individual elements. We also look at !important; as something you need for Custom CSS.

This video looks at the blocks that can change when switching from Desktop to Mobile, like columns, buttons, media & text, etc.

Elements tend to resize when changing the viewport, like and images. This video looks at these.

This video looks at the content & wide width settings, and how to make use of them.

Let's create a header for the website.

And now the footer.

The homepage template is actually quite easy to create, but we do want to have a sticky header.

Let's create the hero section at the top of the homepage.

Let's complete the homepage.

And the final part of the homepage.

Let's create a landing page without header or footer.

Now you've finished the Gutenberg section, what next?

In this video, we'll install some custom fonts to use on the site.

In this video, we'll install our custom color palette.

We've defined out styles, now we need to connect them with the relevant HTML tags.

Global styles allows use to set up the typography and colors for all of the elements on our page, using Theme Styles.

This video looks at some settings you need to bear in mind if you want total control over pixel-perfect layouts.

Breakpoints allow point and click mobile responsive design - something not offered by Gutenberg.

Elementor uses a responsive grid system. On desktop, columns sit side by side. But when screen size shrinks, Elementor automatically stacks columns vertically to fit smaller screens. This helps make sites more readable, but sometimes it doesn’t look good.

Being able to hide elements on different breakpoints is really useful.

This video looks at padding and margin in Elementor

In this video we'll create a header template to be used on the demo site.

In this video, we'll create the footer.

In this video we will create a template to define the homepage.

In this video we'll create a Hero section at the top of the homepage.

Let's finish this homepage.

This video shows you a new technique of fixed positioning to arrange elements on a page.

What now that you've finished the section on Elementor?