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.

How to Create Bookmarks / Anchors (aka Linking Within Pages)

An anchor simply scrolls you down to a predetermined place on a page.  See it in action on our Resources page. How many times have you gone to a webpage that you need to find some information on, only to realize that it’s a mile long… and you silently cry on the inside? See, really long pages…

Understand Photoshop layers in just 9 minutes [VIDEO + DOWNLOAD]

When people think about creating websites, most people think of creating thousands of lines of HTML code. But that’s not entirely true. A lot of the technical stuff is already done for you when you setup a site with WordPress, however there is one thing is almost always overlooked… Graphic design (aka Photoshop skillz). One…

How to link to a specific page in a PDF

Sometimes the first page of a PDF isn’t very exciting. Sometimes there is something super-duper amazing on the 7th page… or the 23rd page. But how do you make a link that goes to specific page in a PDF? Here’s how: http://mysite.com/uploads/documentname.pdf#page=8 The purple part should look familiar to you, right?  That’s just a regular ol’…

7 Inspiring Website Designs (#5 Is Our Fav)

Inspiration comes in many forms. Sitting in the sand, watching the sun slowly lower behind the ocean. The song you and your husband/wife first danced to at your wedding reception. That amazing future that you envision in your mind that keeps you pushing forward. All beautiful inspiration. Today inspiration is going to come in the form of…

Make Images Spin Using a Bit of CSS

Sometimes just a little WOW makes a big difference. Ever since we launched the Web Designer’s Academy, people have been asking about that fancy red spinning nametag in the sidebar. See it over there? Move your mouse over it. It spins! Cool, right? It’s a simple css effect that adds just a little something interesting to a page.…

install google fonts into photoshop

Adding new Google Fonts to Adobe Photoshop CC

** This is part 2 in a series on using Google Fonts when designing a website (if you missed part 1, learn how to add Google Fonts to Dynamik Website Builder) ** Having too many different fonts in a website is like wearing the striped pants with the plaid shirt that’s crumpled on the floor near your…

How To Get Really Good At Web Design

Take the next 5 minutes and watch this video. Please. After watching it I was inspired to tell you guys a little bit more of our story. If you would have asked me 15 years ago if I would be in a position where I would be helping web designers all over the world improve…

Helping clients understand the difference between Portrait VS Landscape photos

You: No, that photo is not going to work for the banner area. Client: Well.   HHhmmm.  What about this one? You: Now that one is too tall. Client: UUUmmm.  Can you try this one instead? Doesn’t that suck?  And it usually goes on and on and on. Education is the key The problem is…

Creating Your First Gravity Form

If you haven’t noticed yet, we love Gravity Forms.  It’s like the swiss army knife of form plugins, it basically 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…

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…