Learning Objective: Create the design of your website like a pro so that it accurately represents your message and personality.

Getting your website live on the web with a strong domain name is just the beginning of your process. Next, we’ll turn our attention to design—and make sure that design meets functionality and focus for both your needs and your visitors’.

Step One: Create a Powerful Design

Web designers come in all shapes and sizes; from designers who are all about the design and can win art awards, to the other end of the scale—web designers who are all about powerful, clean code. You can hire web designers who operate with a team of twenty specialist coders or you can hire someone who only knows how to set up a blog. And out of all these different types of web designer, a relatively small percentage understand what a consulting website needs. That’s why clients come to us. We specialize in web design for consulting websites.

You will still need to clarify:

  • Your mission
  • Your message
  • What customers/clients should work with you
  • Who customers/clients work with you
  • Your story
  • Why it matters to the right reader
  • What you do and why it is unique
  • What pain point it will address
  • What solution you can help him/her find
  • How you do it

As web designers, we can help you with that part too—but you know that it is especially important that people feel they are connecting with the real “you”.

Can we design a powerful site that represents you and your message accurately? Absolutely. But you’ll need to do your part.

At Aztec Design Studio, we use a CMS (Content Management Solution) called WordPress a platform that makes this easy, with so many incredible apps to facilitate functions and shortcut hours of coding; and so many design choices that allow us to quickly set up a site that feels right to you.

Managing Content with WordPress

WordPress helps us build and manage content-rich websites and online communities that are accessible from any device. Sites that are much more secure than simple HTML websites

Planning for powerful design starts in knowing what you want. Identifying the feel of your site, the general look that resonates with you (and that will resonate with your ideal client).

You also have to know what you want to say. The minimum you need to have, when it comes to pages, is:

  • A landing page

Yes. You can get away with just that—particularly if you are promoting a single powerful product or program.

If you want to do more than that, the minimum you should consider is:

  • Home page/landing page
  • Contact page
  • About page
  • Products and programs section or page
  • Media section or page
  • Contact form

Testimonials are also vital—but you can decide if you want to put these on your home page and/or About page (especially if you don’t have more than a couple) … or in a separate “Client Success Stories” section.

You will need to decide also if you wish to lump all your products, packages or programs together in one section; or have drop-down menus separating multiple offerings into categories:

  • Books
  • Products
  • Programs
  • Special event, program, challenge, etc.

Finally, if you are offering “Discovery Sessions” (or whatever you want to call them), you might want to put these on their own tab—and include a set of qualifying questions potential candidates have to answer, in a contact form format. Or you may prefer just to let them know they will be “expected to answer a question sheet” which you will send them by email.

And there is one other website element whose placement you need to decide on: Your red hot sign-up incentive or gift. Will it go on your home page? A separate landing page? In a widget allowing it to appear on every page? In its own unique section?

These are a lot of choices to make, but deciding what is absolutely essential to say to the right visitor is a good first step to avoid overloading your site and becoming a “kitchen sinker”, with all sorts of unnecessary sections.

Don’t be afraid to make a rough plan, at first—the beauty of DNN is that it is incredibly easy to add a page or section later on… or consolidate two pages, if you come to feel that you’re dealing with a split message.

But start with your absolute basics:

  • Your home page
  • Your about page
  • Your contact form

If you take this route, your Home page should tell visitors:

  • Who you are
  • What you do
  • What pain you can help relieve
  • How this will benefit them
  • Why you do it

Tell your story in as little as one sentence or one paragraph on your home page—start with the most dramatic or important point—and tell the rest of your story, for those you have hooked, on your about page.

Step Two: How Design Can Make Your Message—or Break it

Remember that design is all about your message. You can let people know who you are—gain an impression of you and your personality—through more than just reams of text. You can do it through:

  • A single qualifying, “knife edge” question
  • A single statement or tag line
  • Your photograph
  • The colors you are using
  • Accessories, props or background in your photographs
  • Design elements
  • Your theme’s style

You can make choosing these elements an easy process by pre-qualifying them yourself with your own “knife edge” design question:

“Will this support the message and image I wish to convey?”

(What do knives do? They slice, with absolute precision. And when they have cut, the object slice is halved. One falls one way … and the opposite half, the other. You need to use this type of questioning process everywhere in your website: For design elements, pages, messages—does it attract people … or drive them away.

You will want to do both, when it comes to getting people to sign up.)

The more you plan at this page, the stronger your website design will be.

Your accompanying Exercises for this Module will include studying eight specific websites, seeing which ones resonate most with you, then writing down why. This process should help you crystallize in your mind what you want your site to look like (and what you don’t want it to look like)—so don’t skip your Action Plan and Exercises!

Let’s take a sneak preview at these very different but successful websites:

One thing should leap out at you instantly in these “thumbnail” views of these top websites: Notice how much of the message gets lost when reduced in size on some of the most gorgeous ones … and what remains.

When designing your home page especially, you need to consider what mobile viewers will see and what will catch their attention—THINK LARGE when choosing design elements!

Let’s quickly start an analysis of each website seen at this size:

David Neagle sumptuously-designed website fails on: His name (which is hard to read)His messages (which disappear) But his photo is a good size. (This website is typical of a pro web designer “design-comes-first” approach.)Leonie Dawson succeeds spectacularly in presenting her originality, playfulness and creativity—but if we were judging on photo and message, this site at this size would be a spectacular fail. However, she has branded her playful graphics style and colors so well, and she has such a huge client base, the sizing and hard-to-read fonts are really not an issue.  
Laura West does a wonderful job with her bright, happy coral signature color, lightened up with a lot of white space; as well as her cheerful photo—which really gets across her personality—and the photo and colors totally support the business name she is branding (Joyful Business).  Byron Katie’s giant photograph and assertive forward pose totally gets across her powerful “no compromise, no b-s” personality. Her “knife edge” question is prominent and powerful too—but her soft, smoky-mauve color scheme accurately promises a spiritual or metaphysical slant to whatever she is sharing.
Allyson Chavez has a gorgeous site whose spiritual mauves, whites, and soft focus give a big tip off that her emphasis is likely to be on the spiritual side—and sure enough she’s all about energy and miracle manifestation. Her photo and name are just prominent enough to scrape through with a pass. (The script font works well with representing flowing energy, but is hard to read at this size.) Her main message doesn’t come across—but if you’re looking for a spiritual/metaphysical approach in your coach, you might be forgiven for checking out her site based on the colors, script and atmosphere her design elements create. Nisha Moodley succeeds even at thumbnail size for branding herself, with strong: PhotoColorsMessage Signup form Each element doesn’t waste a single stray word or graphic. She cuts straight to the point, and her rich, dark colors give the impression of a luxurious, perhaps even exotic lifestyle, as well as power and wealth. The simplicity of the design, combined with her prominent photo and blunt message, give the impression of a young but powerful woman.
Shawn Driscoll gets top marks for the visibility on: Her nameHer photoHer “big question” A deceptively simple site, it heads the pack here for catching the right client’s attention and getting across her branding.  Amanda Moxley gets a thumbs up for instantly conveying personality and lifestyle—sure to appeal to people who want that type of freedom too. The cool, sea colors reinforce this impression and her site is reminiscent in style, informality and color of Denise Duffield-Thomas’ Lucky and, Melissa Ingold’s site. This visual message appeals to a creative, younger, action-oriented and wealth-seeking demographic, judging from their combined testimonials.
Shawn Driscoll gets top marks for the visibility on: Her nameHer photoHer “big question” A deceptively simple site, it heads the pack here for catching the right client’s attention and getting across her branding.  Amanda Moxley gets a thumbs up for instantly conveying personality and lifestyle—sure to appeal to people who want that type of freedom too. The cool, sea colors reinforce this impression and her site is reminiscent in style, informality and color of Denise Duffield-Thomas’ Lucky and, Melissa Ingold’s site. This visual message appeals to a creative, younger, action-oriented and wealth-seeking demographic, judging from their combined testimonials.  

So which one of these examples would work best for you? We’re not suggesting you copy them, but it’s to be hoped this exercise has helped you get a clearer idea of your ideal style.

Step Three: The Secret World of Color

It may be you’ve already decided on the colors for your website and are already using them in other online and offline areas—your Facebook Page, your Twitter background, your business cards and so on. But even if you know your colors, read through this short section, because there are things about the online and color you need to know, right now. You need to know—and record in a safe place:

  1. The hex codes, RGB values and CMYK values for your brand colors, so you can make sure they are consistent in all your content
  2. Whether or not they are “web safe” colors—and whether or not you care if they are

Not every color shows up perfectly on every browser—especially subtle colors. Using the hex code instead of your eyeball is a good way to ensure your colors display as accurately as possible on every website. Use these three tools to accurately find and identify your perfect colors:

Colorzilla – use this color-picker tool to select areas of your existing colors online to quickly identify and give you the hex values and RGB or CMYK values.

(Colorzilla comes as an add-on extension for the Chrome and Firefox browsers)

To use it: (A) Select the eyedropper icon in your browser menu; (B) select Color Picker in the drop-down menu, (C) position the cursor on the page item color you want to analyze—and your RGB color (#1) and Hex values (#2) appear up top, in the analyzer bar.

  • ColorCodeHex – if you’d rather just choose a color from scratch, use ColorCodeHex’s handy chart as a quick reference for web-safe color choices.
  • — Use this site to play with different color schemes. Not only will it display and compare colors in CMYK and RGB, it will display a preview of the color scheme you have chosen on the left-hand side of the slider bars. (A) Select the element you wish to change; (B) Move the slider bars in the appropriate color model (e.g. CMYK) till you get the change you want in (C) the preview layout.

Hint: Use CMYK color values when you are creating content for print output (e.g. A KDP Amazon book cover for a hard copy book)

Use RGB color values for digital (e.g. an eBook) ” width=”639″ height=”3″ />

Step Four: Your Dream Theme

Of course, most design problems can be solved before they are ever created by using the right theme.

As we saw from our earlier eight website snapshots, there are many designs to suit your style, personality and audience.

What is currently hot? Full-page themes that hit the visitor above the fold with your key eye-grabbers, with three round or square widgets directly below the above-fold area (either sending you to alternate pages or different types of offers) and optional section for current promotions or “About” information at the bottom.

  Why do we use customize designed themes? Free themes:

  • Often contain harmful scripts or hidden coding that can harm your Google ranking—or even your site
  • Don’t have the sophisticated functionality of premium paid themes
  • Often include no or little customer support
  • Are frequently not updated and kept current with new software releases

Step Five: Getting Ready to Install Your Theme

Before we return to your website set-up, let’s recap what you need to have, planned and ready:

  • The number of menu tabs (pages or sections) in your site
  • Categories you want to use (if you are including a blog, or operating as a blog)
  • At least one main offering
  • An incentive
  • A logo, if that is important to your branding
  • A photo of you that is big enough to be seen on mobile (and which supports your message)
  • Your brand colors chosen, in both HEX and RGB code

Even if you are not quite ready to deal with contact forms and autoresponder’s lists yet, we’ll get started anyway—and you will learn a simple alternate for installing and creating an effective contact form.


Action Guide – Module 3

Checklist – Module 3