Design Inspiration

How to Create a Successful Website Design Business Design Inspiration

Watch This Lesson

Lesson Overview

One might argue that building a web page is easy; knowing what to build is the challenging part.

In this lesson, we’ll learn Where to Find Design Inspiration for the:

Website Design
Color Scheme
Font Families

Lesson Transcription

Welcome! I’m Leighton, your webmaster. In the last lessons we learned how to build a website using WordPress and the Divi theme. One might argue that building a web page is easy… knowing what to build is the challenging part. Where do you even start? Well… think of an artist with a blank canvas. Where does the artist go from there? Well, they can just designing, see what happens, or look around for inspiration. Look at what other artists have created. For the art of web design, you can do the same for your websites.

In this lesson, we’ll consider how to find inspiration for the design, color scheme and fonts.

First, Design: One of my favorite places to start is the competition. Let’s say you’re building a website for a local plumber. How do other plumbing websites look? Let’s see for ourselves.

DEMONSTRATE: Google search for plumbers in various major cities.

Let’s pull up a big city like Miami, with the assumption that companies in bigger cities would have higher marketing budgets…….

Additionally, you could look up other quality websites that aren’t necessarily in the industry you’re designing for. Why might you do that? Let’s answer that by looking at a few examples:

DEMONSTRATE apple.com, BNI.com, squarespace.com, BlackBerryMountain.com

Having looked at those brilliantly designed websites, what can you learn from them? Well… if you’re learning art, whom do you study? The amateur artists, or the famous ones? If you want to be good, learn from the famous ones! In fact, watching and copying the experts is one of the most effective ways to learn any skill. So when you look at other websites with a critical eye, you can train your eye to separate quality from crap. Focus on quality. Bookmark it, save it, learn from it, so when you’re designing a website for your client, you’ll have plenty of beautiful websites to reference.

And if you’re still feeling a little guilty for shopping around for design ideas, think of this: When you set forth to build a house, do you build a 100% unique house that doesn’t look remotely similar to any other house in history? Highly unlikely. In fact, one of your first steps is to decide whether you want a victorian home, farm house, 1-story, 2-story, etc. REMEMBER: It’s not plagiarism. It’s inspiration.

What else goes into planning a website? Color.

One thing I have studied extensively over the years is color theory. Basically, different colors evoke different emotions.

For example: What comes to mind when you think of purple? Blue? Red? Yellow? Green? Purple carries the idea of royalty. Blue is associated with technology and professionalism. Red and yellow are hot colors that encourage impulse buying and quick decisions. Green is associated with both money and nature.

What does this all mean? Well, if I’m planning a website for a landscaper, it’s probably going to be reliant on the color green. I want people to feel like they’re on a landscaper’s website. Photography sites are often black and white so the focus is on the photos. Tech companies tend to use the color blue on their websites (Twitter, Facebook, LinkedIn, etc). You’ll see trends like these across several websites within the same industry.

Now, if we’re taking on a client who already has a logo, you would just use a color picker to find the 6-digit HEX code of the dominant color in the logo. We want to build a website to fit their brand, so the colors need to look the same across the logo, printed materials, website and social media. And, if you’re helping them with their branding, make sure their logo & colors are the same on the website and all social profiles! We want consistency!

So what can help you create a color scheme around their dominant color? Let’s look at the free Adobe Color tool. (Demonstrate Adobe Color)

Finally, we have an idea of the overall design and color, but what about the font? How do we choose the right font for our project? Fonts are so important… When chosen properly, fonts can subtly evoke a feeling. For example:

Sans-Serif — (these fonts don’t have serifs, or the little bars on the edge of letters. These fonts convey: Modern, fresh, sleek, tech, design, etc.
Serif — Conveys contemporary, professional, traditional, experienced… Serif fonts will have more personality than sans-serif, and you’ll commonly find serif fonts in the headers and sans-serif as the body text.

Where do you go for fonts? Divi is designed to work with Google Fonts. What is Google Fonts? Let’s see! (Demonstrate Google Fonts)

In review, where can we look for design inspiration?

Research the competition. Notice what impresses you.
Surf the Web with design in mind. Notice the quality of the websites themselves.
Strategically plan the base color and research complementary colors.
Choose the right font to fit the company branding.

By taking those steps, you will not simply build a functional website. You will build a beautiful one. One that draws the visitor in and encourages them to stay… And share… And return… And most importantly, buy! Buy whatever good or service the company is marketing. That’s the ultimate goal of you as a web design business — to convert your client’s visitors into their paying customers.

I’m Leighton, and now you know… design inspiration!