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.

Making your first Gravity Forms Form

If you haven’t noticed yet, we love Gravity Forms.  It’s like the swiss army knife of form plugins, it does everything! If you just installed Gravity Forms, now it’s time to make your first form.  Thankfully, this will be easy and only take a few minutes. Let’s do this Once installed, there should be a new…

Create A Virtual Scavenger Hunt Using WP Triggers

NOTE: The new version of Wp Triggers now includes redirection built in! See demo from video See ebook video (for redirection code) VIDEO TRANSCRIPTION A virtual scavenger hunt is a great way to get web visitors interested in your city or town. This is especially useful for chambers of commerce or office of tourism. The…

Create a Zip Code Search in WordPress

See demo from video VIDEO TRANSCRIPTION This video is going to show you how to create a zip code search for a website. It’s a really great way to get users interacting with your site especially if you have like a delivery type of business or have a specific service area. Let’s get started. In…

Make a curved banner in WordPress

Meretta asks “Rectangle banners are boring, how do I make a curved banner?” Brewing the perfect cup of green tea is no simple manner. Neither is making a curved banner in a rectangle world, but the Ninja has mastered the art of the curved banner many moons ago… (more info under the video) Lessons from this video:…