About Course
Join Spectrum Film School’s online WordPress Development course for a hands-on exploration of website creation. From foundational concepts to the finishing touches, delve into themes, plugins, menus, and settings, gaining comprehensive skills in WordPress development. Elevate your digital prowess and craft impressive websites with this engaging and informative learning experience.
What Will You Learn?
- Create any website layout you can imagine
- Support any device size with Responsive (mobile-friendly) Design
- Add tasteful animations and effects with CSS3
- Use common vocabulary from the design industry
- A clear understanding of the principles and benefits of good UX and how to apply it to your website
- A strategy for making sure you know what people need from your website, and what you or your client needs from it in order to succeed
- The confidence to know what information should be included in your website, and how to design it to increase conversions
Course Content
Introduction To Web Design
-
What is Web Design
00:00 -
What We Will Cover
00:00 -
Who is this Course for
00:00 -
Why Should You be Interested
00:00
Basic Web Design Software
-
Softwares you need
00:00 -
Difference between Vector and Bitmap
00:00 -
Illustrator
00:00 -
Photoshop
00:00 -
Putting all together with Figma
00:00 -
Alternatives to Photoshop
00:00 -
Alternatives to Illustrator
00:00 -
An alternative to After Effects
00:00
Brief History Of Web Design
-
1894 Art Noveau
00:00 -
1954 Swiss Design / International style
00:00 -
1990 David Carson – Grunge design
00:00 -
Web Design in the 2000s
00:00 -
Web Design in the 2010s
00:00 -
Web Design Nowadays
00:00
Typography Overview
-
The purpose of a font
00:00 -
Major categories
00:00 -
Font properties
00:00 -
What fonts
00:00 -
What size
00:00 -
Practicing Typography
00:00
Choosing the Right Image for Your Web Design
-
3 steps to find the right images
00:00 -
Picking the right style
00:00 -
Picking the right image within a style
00:00 -
Putting images in context
00:00
Layout Introduction
-
Examples
00:00 -
What makes a good layout?
00:00 -
Trick Number 1
00:00 -
Trick Number 2
00:00 -
Exercises
00:00
How To Use Colors In Web Design
-
The meaning of colors
00:00 -
Psychology of color resource
00:00 -
Color combinations
00:00 -
Examples
00:00 -
Exercises
00:00
Why Is Hierarchy So Important in Web Design?
-
Examples
00:00 -
Demo
00:00 -
Summary
00:00
Using Wireframes In Web Design
-
Sketches
00:00 -
On the computer
00:00 -
UI Kits
00:00
Creating A Good Hero For Your Website
-
Answer these 3 questions
00:00 -
Demo
00:00 -
Choosing an image
00:00 -
Trick to make an image bigger
00:00 -
Bringing in the logo
00:00 -
Adding text and buttons
00:00
Website Content Structure
-
Understand the website’s goals
00:00 -
List all the content to achieve the goals
00:00 -
Organise content for it to make sense
00:00
Best Ux/UI Practices in Web Design
-
User Experience
00:00 -
User Interface
00:00 -
Copywriting
00:00 -
Buttons
00:00 -
Images
00:00
Photo Editing For Web Designers
-
Selection
00:00 -
Background
00:00 -
Shadows
00:00 -
Clean-ups
00:00 -
Editing colors
00:00
Design A Homepage With Figma
-
Figma interface overview
00:00 -
Page & grid setup
00:00 -
Designing the hero & navigation
00:00 -
Creating the background effect
00:00 -
Building the content section
00:00 -
Masking & blend modes
00:00 -
Using Gradients
00:00 -
Building the footer
00:00 -
Designing a form
00:00 -
Next steps
00:00
Getting Your Website Ready For Development
-
Design Styles
00:00 -
Export Assets
00:00 -
Export Layers
00:00 -
Compression
00:00
5 Website Types & How To Design Them
-
E-commerce
00:00 -
Marketing / Business
00:00 -
Blog / Media outlet
00:00 -
Educational
00:00 -
Portfolio
00:00
How To Find Web Design Inspiration To Stand Out
-
The steps to finding web design inspiration
00:00 -
Looking at other websites for inspiration
00:00 -
Websites I use for web design inspiration
00:00 -
Where I save all of my web design inspiration
00:00 -
Finding inspiration outside of web design
00:00
3 Psychology Principles Every Web Designer Should Understand
-
Understand human psychology
00:00 -
Mirroring
00:00 -
Social validation
00:00 -
Color psychology
00:00 -
The cognitive bias codex
00:00 -
Conclusion
00:00
Tools To Develop Your Website
-
Website development options
00:00 -
You can code the website
00:00 -
Easy but rigid website builders
00:00 -
Visual coding options
00:00 -
Content management systems
00:00
WordPress Development Themes, Plugins, Menus and Settings
-
Using the WordPress Customizer
00:00 -
Working With Themes
00:00 -
Working With Plugins
00:00 -
Adding and Managing Users
00:00 -
Customizing WordPress via Settings
00:00
Basic Coding For Web Designers
-
What to download
00:00 -
Creating our first web page
00:00 -
What is HTML5 & CSS3
00:00 -
Head vs body vs html tag
00:00 -
Title & description
00:00 -
What code editor should I use?
00:00 -
Using Div Tags
00:00 -
What is a CSS Class
00:00 -
How to nested divs
00:00 -
Class Project 01
00:00 -
External CSS
00:00 -
Creating our index style pages
00:00 -
Testing your website
00:00 -
Check your code for errors
00:00 -
What are HTML5 structure tags
00:00 -
Add html5 structure elements
00:00 -
How to color the background
00:00 -
Adding images to a website
00:00 -
How to center an image
00:00 -
Change the font size & color
00:00 -
Make a clickable link
00:00 -
Stretching background image
00:00 -
Making a div tag transparent
00:00 -
Simple website text navigation
00:00 -
CSS compound classes
00:00 -
Class Project 02
00:00 -
Class Project 02
00:00 -
Add a email button to a website
00:00 -
Add Google Maps to your website
00:00 -
Making a website live
00:00 -
Uploading via SFTP
00:00