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.

Show and Hide Different Content On Mobile Devices & Desktops

You don’t always order the exact same pizza, so why display the exact same content on mobile devices AND on desktops? Here’s how to show and hide different content on mobile devices and desktops. The first thing you need to understand is that there are MANY ways to show and hide content on mobile devices…

What’s the difference between a Parallax and a Photo row background?

This question has been plaguing people for centuries. Back in 551 BC, the great Chinese philosopher Confucius once asked a group of meditating monks “What’s the difference between a Parallax and a Photo row background?”… and the answer they gave him has been passed down for centuries. It’s been kept and only allowed to be…

The Always Up-to-Date Guide to The Best Free Stock Photos & Videos

The Always Up-to-Date Guide to The Best Free Stock Photos & Videos In the past, if you wanted to have gorgeous photos or videos for your web project you had two choices: hire a photographer/videographer OR buy crazy expensive stock photos/videos.  Both options requires you to spend some money… however there is now a third…

Behind The Code Show: Shane Walton

“Build a team of talented people which will allow you to focus on what you do best.” ~ Shane Walton Shane is an entrepreneur, marketing genius, lover of hats and overall amazing guy.  He and his wife own Green Vine Marketing which is a Denver, Colorado based digital marketing firm that they have been operating for…

How to Sell Products From A WordPress Site WITHOUT Creating an Online Store

Retail store owners dream to sell their goods online. Every small business retail store owner I’ve ever met, eventually, bitches about the same certain things in regards to operating a physical retail store. Customers are being rude, waking up early to open the store, have to go to the bank and get enough ones fives and tens, employees stealing from…

Homepages We Love: The Newton (by CloudMagic) Homepage

It makes me happy when I stumble upon a website that understands good design… and the CloudMagic people really get it. This post has nothing to do with the Newton email product itself, but it has everything to do with the design of its new homepage which can be found here). Before I tell you why I…

5 Insightful Lessons For New Web Designers

Ever have those thoughts where you go “If I could just do it all over again, I would…” and then you come up with some Einstein-level idea that would have made your life so much better if you only did that thing when you started? Well today, I had that thought. I thought to myself…

Web Designer Inspiration: Old Evernote Homepage VS NEW Evernote Homepage

I love Evernote. It’s amazing… and I don’t call many things amazing. However most recently it was the mouth-gasm inducing hybrid food I found called, the Sushi Burrito, yeah it’s a thing… ya gotta try it. This post isn’t going to try and convince you to use Evernote for keeping track of client meets, scanning business receipts and…

Learn About Advertising + Get Free Photoshop Ad Banners

Ads. Ads. Ads. Ads are everywhere aren’t they? Ever stop and think about why there are ads packed into every tight little crevice of the internet? See, sites that offer things for free (like Google or Snapchat) aren’t doing it because they love you.  They might put some lofty, feel-good mission statement on their Company Bio page…

How to layout your next website…. on your phone.

Inspiration hits at the most random time.  Like yours, my brain is constantly flying off the rails of a crazy train. Some are great thoughts like the how how to create a multi-person interactive movie controller (true story), why does Florida homeowners insurance give you  protection against ice and snow damage and what would be a better taco topping…