Web Design 102

You've got the basics down, now it's time to design a website.

This page is your complete guide to learning intermediate web design skills.  This includes design concepts, WordPress plugins that you should have and posts specifically created for your skill level.

Intermediate Web Design Concepts

Below are four essential concepts that you need to understand to turn your default WordPress installation into a work of digital art and make it go "live".  We'll be creating resources for each section soon.

The Design (How the website looks)

How a website looks will be the first thing that catches peoples attention (website visitors AND your clients).  The concept of designing a modern website is massive and it's actually about 80% of what we talk about on this website.  You've already got a WP install and now you're ready to start designing how the website will look and to do this, you need the best framework to design in (hint: it's what we're using on this page right now!), scroll down to the next section to see what it is.

Once you get the framework we recommend (below), stick with learning the basics for now like using the Customizer for general options, adding a simple page, adding that page to the navigation menu, adding a PDF to a page, replacing the default template photos with your own, etc...

Need some quick inspiration?  Checkout our series on Designs We Love, where we present and analyze gorgeous websites (you should use these sites as design inspiration).

The Functionality (What the website does)

Once people are drawn in by your gorgeous design now they need a reason to stick around... that's called functionality, and every website has some sort of functionality.  Whether it's to sell something online, play a song or simply give out contact information - you'll need to provide some sort of functionality.  The easiest way to do this is to use a WordPress plugin.  A plugin gives the website extra features and makes it more exciting (think of it like when you got fire power while playing Mario Brothers... that was awesome right?).

We recommend you install some interesting (and free) plugins that you find in WP Plugin Repository so you can learn how most plugins work and so you can see what's possible.

Once you have a good basic understanding of plugins in general you should buy one premium plugin that is so useful, you'll never make a website without it (more in this further down the page).

Graphic Design Skills

Something that shocks most beginner web designer is the amount of graphic design that is needed in order to make a website.  On a standard website you might need to design a logo, resize a bunch of photos, eye drop colors from an image, create callout graphics, crop large photos and more.  A good graphics design program can make your life so much easier and there is one that is the industry standard and the only one we recommend.

At this phase in your learning you'll need to start learning how to use a graphics design program to do basic things like getting familiar with the basic tools, saving, resize images, moving layers, draw shapes, etc...

In order to experiment around with Photoshop you need some images right?  Well we've compiled an always up to date guide of the best places to find stock photos and stock videos (aka free to use).

Moving A WordPress Site

If you've taken our advice so far, you're experimented on your SandBox domain name and you've made something kinda cool.  It's probably not the most amazing thing ever, but you're just getting started and you'll get better.  While this type of experimentation is key to your learning, at some point you'll need to move that site to a real domain.

For example, if you are designing a website for a client you need to move your sandbox WordPress install to your clients actual domain name.

Like a lot of things in life, there are many ways to do this... however the easiest and fastest way is to use a plugin to make a painless move (see below).

4 Things You Need Right Now

Things are moving along and now you need the tools to design something unique and amazing!  Clicking a button below will take you to the website to get the resource.

The Best WP Framework

Don't mess around with various free themes from various theme designers, that will only slow you down and confuse you.  With a framework, you'll be able to design anything you want.

We only recommend one framework to use... the website that you are on right now is built using Beaver Builder, it's a silly name but it's the most amazing framework out there (and we've tried them all).

The Best Graphic Design Program

Graphics are such a huge part of the web so you need to be using the absolute best program to edit them.  Not only do we think it's the best, it's been the best for about 30 years and we're sure you've heard of it.  It's called Photoshop by Adobe.

The Most Useful WP Plugin

There are plugins that do one thing well and there are plugins that do many things well... this plugin will open a lot of doors for you.  On the surface it's just a contact form plugin but once you learn how it works you'll be creating quote forms, performing calculations, building shopping carts and more... it's called Gravity Forms.

The Best Way To Move Websites

Back in the day we used to have to FTP html files from one domain to another, then came WordPress and we had to manually migrate databases across domain.  Sound terrible?  It was.  Now we use one plugin called BackupBuddy that does it all flawlessly.  This plugin is SUPER IMPORTANT to have.

Intermediate WDA Posts You'll Find Most Helpful

We categorize every post according to skill level.  Below are the posts that you'll find most helpful now.

COMING SOON - When you are comfortable designing a simple website, creating a web form and moving a site from one domain to another... it'll be time to checkout the Web Design 103 guide for the next steps in your learning.

Specify a start and stop time when embedding YouTube videos

YouTube videos have changed the way we watch things on the Internet, but what if YOU wanted to change YouTube videos? Specifically what if you didn’t want the ENTIRE YouTube video to play… just a portion of it? This super-short tutorial will walk you through doing just that. The Default YouTube Embed Code To walk…

Gravity Forms Tutorial: Understanding Standard Fields

So you’ve made your first Gravity Forms form and now… you’re hungry for more… so let’s do this. In the video below we’ll cover some of the standard form fields in Gravity Forms. Here is a brief description of each form field: Paragraph – Allow lots and lots of text with this field (great for…

Learn Gravity Forms Fast: Creating your first form (VIDEO)

NOTE: This video is for Gravity Forms beginners that have no idea how to use GF.  If you are familiar with GF, you might want to skip this one.  Or just play it to enjoy the smooth sounds of Ian’s voice… it’s like chocolate for your ears.  🙂 So you’ve just bought your shiny new copy of…

What is the difference between padding and margin?

This is a beginner tutorial, if you’re familiar with margin and padding you might want to skip this one. We love getting emails from you guys with all sorts of interesting questions and ideas and one recurring question that we’ve received many times is “what is the difference between margin and padding”? This guide will…

Yay! It’s a free Photoshop Promo File (with tacos)!

Getting people to pay attention to your message is the hardest thing to do. Sure… you may have an amazing, ground breaking product or service but let’s be honest with each other… to most people… it’s just like the rest of em’ out there. So, what’s a girl to do? The answer is simple: do your…

Filling the void OR “Wow hunny… It actually helps people!” [VIDEO]

To be honest.. the majority of the time we have NO IDEA what people think about the Web Designer’s Academy.  None.  Seriously. I know we always try our best to create super-useful products and tutorials… but the life of a married couple who works at home creating websites then blogging about web design to a…

How to make a Branding Guide that makes people happy (and saves you time)

“Hey, you got a copy of that logo?” “What about the logo that we use on white backgrounds?” “What color and font should I make this button?” Branding Guides are a simple way to eliminate a lot of questions about colors, fonts, etc… and to provide quick access to useful artwork files. Yesterday, I was creating…

LOOKIN’ GOOD: How to add icons to your menu navigation

Notice anything new here? Look up.  Up. No, not at the ceiling… up above this text in the menu bar. Checkout the menu entries for the Toolkit, Designs and Wp Triggers… see those icons? [looks up… starts to salivate] BOOM! Awesome sauce in tha house (actually.. it’s on the menu!) Want some of that sauce?  This…

A little trick to make a hyperlink start a phone call

It’s 2015 and everyone has a smartphone.  Everyone. Since 2008 over 1 BILLION iPhones have been sold and my wife and I are personally responsible for 7 of those sales. You are welcome Apple. Anyway, add that billion to the number of Android phone out there and you’ve got a lot of people browsing the web on…