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.

See What’s New In The WP Triggers 4.0 Guide

In a little over two weeks you’ll be able to make even more powerful websites when the new version of WP Triggers is released.  But you can see how it works without waiting! YES! It’s almost ready! After months of research, development and testing we’re super-excited to let you know that the NEW version of…

The Lost Art of Footer Design – Some Inspiration To Make Great Footers

It’s hard to make every single element on a website “pop”. You know what, I really hate that word “pop”. Clients use that word all the time… Can you make my logo “pop” a little more? That banner needs a little more “pop”!  That text needs to “pop” more. Really? WTF is POP anyway? From years…

Stuck In Maintenance Mode? Here’s How To Fix It…

I try and update WordPress as soon as I can… but sometimes…. sometimes… things go wrong. Here’s what happened.  I saw the “WordPress has a new update” notification message in the admin area and I thought to myself “self… I should do this”. So I clicked the update link. But without thinking I closed my browser tab.…

5 Sites To Get Beautiful FREE Stock Photos So You Can Finish Client Websites

Let’s be honest with each other… clients can’t take good photos. They’ll tell you that they have good photos (they don’t), they’ll tell you that their brother-in-law has a nice real nice camera and he’ll do it next week (he doesn’t), they’ll tell you just to go “grab some photos” from their old site (when…

Web Design Inspiration: The Happy DropBox Homepage

While this series of inspiration for web designers is all about the design of the website and NOT about the actual company/product… this one happens to be both. First off… the product. If you don’t use DropBox, stop reading this and go get it. That is NOT an affiliate link, it’s just a smart thing…

Making Facebook Ads? Use this as a Photoshop template!

The Learn Gravity Forms is going great! It hasn’t even been a month since it launched and we are already getting positive feedback and a lot of happy customers! One of the ways in which we got some of those happy customers is by running ads that directed interested people to http://learngforms.com and once there they…

Web Design Inspiration: Get Inspired By Harvest Time Tracking

Get inspired by the web design of a simple time tracking service called Harvest.  We’ve never used the Harvest time tracking service, but if the people that designed the website are the people that designed the Harvest interface… then it’s probably awesome. Here’s why we like it: Overall: Harvest is a great combination of eye-candy and…

Create An Alert Bar / Contact Info Bar At The Top Of A Site

Helping visitors find useful information quick goes beyond the technical side of web design… it’s about creating a great user interface. How many times have you visited a website just to find their contact details and after clicking around 10 or so pages, you still can’t find it!  How annoying, right? There is something that…

Don’t be afraid of the snake in the next room (Creative Confidence)

You: Hey Ms. Client, I’ve got great news! I just completed your design and I’m super excited to show you! Click on the link I sent you and let me know what you think! Ms. Client: Sure! Ok… let me login to my email… ok I see the link… I am clicking on it now……

Get Gravity Forms To Bookmark Down To The Form Upon Submission

You know what really sucks? When you have a GravityForms form on a page… but the form is placed waaaaayyyyy down the page and someone fills it out… BOOM! WTF just happened? The problem is that if you just have a confirmation message displaying upon form submission the page reloads and sends the user back…