Web Design for WordPress Users from Udemy

What's inside

Learning objectives

Understand core web design principles for creating user-friendly, visually engaging websites.
Use visual hierarchy and typography to enhance readability and design structure.
Apply color psychology and color schemes to influence user behavior and appeal.
Implement responsive design using gutenberg and elementor for mobile, tablet, and desktop.
Optimize site structure, metadata, and images for improved seo and discoverability.

Plan and structure websites by defining goals, target audience, and content layout.
Build real-world website features like headers, footers, and hero sections.
Design with gutenberg fse and elementor to create custom layouts and templates.
Set up and manage a local wordpress environment for safe design experimentation.

Understand core web design principles for creating user-friendly, visually engaging websites.
Use visual hierarchy and typography to enhance readability and design structure.
Apply color psychology and color schemes to influence user behavior and appeal.
Implement responsive design using gutenberg and elementor for mobile, tablet, and desktop.
Optimize site structure, metadata, and images for improved seo and discoverability.
Plan and structure websites by defining goals, target audience, and content layout.
Build real-world website features like headers, footers, and hero sections.
Design with gutenberg fse and elementor to create custom layouts and templates.
Set up and manage a local wordpress environment for safe design experimentation.

Syllabus

Learn About the Course and the Instructor.

This video introduces the course and what it includes, as well as the instructor.

Understand what web design is and why it is important.

This video looks at web design fundamentals. What is web design and what does it involve?

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.

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?

Some things to think about as you publish your site.

Before you launch your site, read through this checklist.

Career center

Learners who complete Web Design for WordPress Users will develop knowledge and skills that may be useful to these careers:

Web Designer

A Web Designer crafts the visual and interactive elements of websites, ensuring they are aesthetically pleasing, functional, and user-friendly. This course provides a comprehensive foundation for aspiring Web Designers, focusing on core design principles such as typography, color theory, layout, and visual hierarchy. You will learn how to implement these principles practically using powerful tools like Gutenberg and Elementor within WordPress, enabling you to build responsive and engaging websites. This course is particularly valuable for those aiming to enter this field, as it directly teaches the skills needed to create professional-grade, performant, and accessible web experiences from planning through to launch.

See salaries and explore the career path for Web Designer

User Interface Designer

A User Interface Designer focuses on the visual and interactive aspects of a product, ensuring a seamless and intuitive experience for users. This course directly addresses critical skills for a User Interface Designer, emphasizing how to create visually appealing layouts, establish clear visual hierarchy, and implement responsive designs. By mastering principles like whitespace, typography, and color theory, and applying them with Gutenberg and Elementor, learners can build interfaces that are both beautiful and highly functional. This particular course is an excellent resource for anyone looking to specialize in crafting user-centered digital experiences, providing practical application of design theory to real-world website construction within WordPress.

See salaries and explore the career path for User Interface Designer

Freelance Web Creator

A Freelance Web Creator designs, develops, and manages websites for various clients, often handling the entire project lifecycle independently. This course is exceptionally well-suited for an aspiring Freelance Web Creator, as it covers the full spectrum of practical skills needed to conceptualize and build professional client websites. From understanding web design fundamentals, wireframing, and planning content structure, to implementing responsive designs with Gutenberg and Elementor, you gain the expertise to deliver high-quality, performant, and user-friendly sites. The focus on accessibility and a launch checklist further equips you to confidently manage projects from start to finish, establishing a strong foundation for your independent career.

See salaries and explore the career path for Freelance Web Creator

User Experience Designer

A User Experience Designer crafts the entire user journey and interaction with a product or service, ensuring it is intuitive, efficient, and satisfying. This course helps build a foundation in essential areas for a User Experience Designer. It emphasizes creating functional, user-friendly, and trustworthy websites by applying principles such as layout, visual hierarchy, and responsive design. Understanding how color psychology and typography influence user behavior, and planning content structure based on a target audience, are critical skills honed here. This course is particularly beneficial for those looking to ensure that the websites they design are not just visually appealing but also provide an optimal and accessible experience for every visitor.

See salaries and explore the career path for User Experience Designer

Blogger

A Blogger creates and publishes content online, often managing their own website to share information, stories, or expertise with an audience. This course is expressly designed for a Blogger who wants to elevate their online presence. It equips you with the knowledge to create aesthetically pleasing, functional, and professional-looking websites using WordPress, Gutenberg, and Elementor. Learning core web design principles, from typography and color theory to responsive layouts and SEO basics, enables you to build a site that attracts and retains visitors. This course is ideal for bloggers aiming to enhance their site's performance, trustworthiness, and visual appeal, ensuring their content is presented in the most effective and engaging way.

See salaries and explore the career path for Blogger

Visual Designer

A Visual Designer focuses on the aesthetic elements and overall visual appeal of various media, including websites, branding, and marketing materials. While broader than just web, this course provides highly relevant skills for a Visual Designer seeking to apply their expertise to digital platforms, specifically websites. It delves deeply into color theory, typography fundamentals, whitespace, and layout principles, which are universal to visual design. You will learn to implement these concepts on WordPress using Gutenberg and Elementor to create coherent and impactful visual experiences. This course is valuable for those who wish to adapt their artistic and design sensibilities to the dynamic world of web presence, ensuring their creations are both beautiful and functional.

See salaries and explore the career path for Visual Designer

Small Business Owner

A Small Business Owner often manages various aspects of their enterprise, including their online presence, which is crucial for attracting customers and building brand credibility. This course is directly relevant for a Small Business Owner looking to create or significantly improve their company's website. It provides practical skills in designing visually appealing, functional, and professional WordPress sites through hands-on application of web design principles using Gutenberg and Elementor. Learning about SEO basics, responsive design, and ensuring site trustworthiness empowers you to build a high-quality online storefront or platform that effectively represents your brand and serves your customers. This course provides autonomy and control over your digital footprint.

See salaries and explore the career path for Small Business Owner

E-commerce Specialist

An E-commerce Specialist manages and optimizes online stores to drive sales and enhance the customer shopping experience. For an E-commerce Specialist, a well-designed website is paramount for conversion and customer retention. This course helps provide essential skills in creating aesthetically pleasing, functional, and user-friendly websites with WordPress, an extremely popular platform for e-commerce via plugins like WooCommerce. Understanding layout, visual hierarchy, responsive design, and optimizing for performance and discoverability through SEO basics, directly translates into a more effective online store. This course is particularly helpful for those aiming to build or refine e-commerce sites that offer a seamless and trustworthy shopping journey.

See salaries and explore the career path for E-commerce Specialist

Accessibility Specialist

An Accessibility Specialist ensures that digital products, like websites and applications, are usable by people with a wide range of abilities and disabilities. This course emphasizes crucial aspects for an Accessibility Specialist, including the importance of user-friendly design and provides an accessibility checklist for site auditing. Understanding how design principles like visual hierarchy, color contrast, and responsive layouts contribute to universal access is fundamental. This course helps build a foundation in creating inclusive web experiences using WordPress, Gutenberg, and Elementor, ensuring that sites are not only visually appealing but also meet important standards for broad user access and compliance.

See salaries and explore the career path for Accessibility Specialist

Front-End Developer

A Front End Developer builds the user-facing parts of websites and applications, focusing on presentation and interactivity using languages like HTML, CSS, and JavaScript. While this course does not dive into coding languages, it may be useful for a Front End Developer by providing a deep understanding of core web design principles and their practical implementation using visual builders. Learning about layout, responsive design, typography, and color theory, and applying these concepts with Gutenberg and Elementor, can improve a developer's eye for design and ability to collaborate with designers. It helps bridge the gap between pure code and intuitive user interfaces, ensuring the visual aspects are well-executed.

See salaries and explore the career path for Front-End Developer

Web Content Manager

A Web Content Manager oversees the creation, publication, and organization of content on a website, ensuring it is accurate, engaging, and aligns with site objectives. This course may be useful for a Web Content Manager as it provides a comprehensive understanding of how content integrates with web design principles. Learning about planning core content structure, visual hierarchy, layout, and responsive design helps ensure that content is presented effectively across all devices. Understanding the tools like Gutenberg and Elementor means a content manager can actively design and arrange content within the WordPress platform, ensuring consistency and an optimal user experience, as well as basic SEO for discoverability.

See salaries and explore the career path for Web Content Manager

WordPress Developer

A WordPress Developer specializes in building and customizing websites using the WordPress content management system, often involving coding and database management. While this course does not focus on coding or advanced WordPress development, it may be helpful for a WordPress Developer by providing a profound understanding of applied web design principles within the platform. The course emphasizes creating visually appealing, functional, and responsive sites using Gutenberg and Elementor. This knowledge allows a developer to better understand client design needs, implement custom designs more effectively, and ensure the front-end user experience is optimized, enhancing their ability to collaborate with designers or wear both hats.

See salaries and explore the career path for WordPress Developer

Digital Marketing Specialist

A Digital Marketing Specialist strategizes and executes online campaigns to promote products, services, or brands across various digital channels. This course may be useful for a Digital Marketing Specialist by providing a fundamental understanding of effective website design, which is a cornerstone of any successful digital marketing strategy. Learning about user-friendly design, visual appeal, responsive layouts, and basic SEO principles directly contributes to higher conversion rates, better search rankings, and an improved overall brand perception. Understanding how to build and optimize a WordPress site ensures that marketing efforts lead to engaging and high-performing landing pages and online assets.

See salaries and explore the career path for Digital Marketing Specialist

Search Engine Optimization Specialist

A Search Engine Optimization Specialist focuses on improving a website's visibility in search engine results through various strategies and technical adjustments. This course may be helpful for a Search Engine Optimization Specialist, as it directly addresses crucial web design elements that impact SEO. You will learn how to optimize site structure, metadata, and images for improved discoverability, and understand the importance of responsive design and site performance. A solid grasp of how visual hierarchy and content layout influence user engagement also contributes to SEO success. This course will help ensure that the websites you optimize are built on a strong, search engine friendly design foundation.

See salaries and explore the career path for Search Engine Optimization Specialist

Content Strategist

A Content Strategist plans and oversees the creation, delivery, and governance of all content assets to meet business objectives and user needs. This course may be useful for a Content Strategist by deepening their understanding of how content is presented and consumed on the web. It covers planning core content structure, wireframing, and how design decisions (like typography and layout) impact readability and user engagement. Understanding responsive design and visual hierarchy ensures that content is effectively communicated across devices and prioritizes key messages. This knowledge helps a strategist develop content plans that are not only compelling in text but also visually optimized for maximum impact within a WordPress environment.

See salaries and explore the career path for Content Strategist