Web Design PRO Tutorial For The Wanna Be Amature Designer

This tutorial on website design assumes the following:

  • You’re using WordPress and a WordPress theme 
  • You’re not a programmer
  • You’re not studying programming
  • You’re new to website design and need the fundamentals
  • You’re smart
  • You have no experience with HTML or CSS

Designing a website…

is just one piece to successfully “creating” a website (the other parts being planning and promotion). I don’t expect you to become a proper web designer, but if you’re going to be successful online it’s one of your skills you MUST develop some competency in.

Design also takes a level of…

experience with these programs as well as an understanding of programming languages like CSS and HTML to be able to fully customize your website as you wish. With anything, you have a lot of skill you’re simply going to have to develop.

Design is also difficult because your design…

also needs to be competent and professional as a way to inspire trust in order to achieve your online goals (don’t be sketchy).

Lastly, design is difficult from a psychological perspective.

  • What do you want people to do when they visit your site?
  • How are they going to navigate your site?
  • What are they going to click on?
  • What things do you need to exclude and include?
  • How is your design going to accomplish all this?

This is why the advent of WordPress and “Themes” are so advantageous. They take care of a lot of the heavy lifting. It allows you to forgo any formal web design training. You just pick a theme and done, you have a properly designed site from a technical perspective, but you’ll still need to customize it.

This is wonderful because it allows the average person to build a good website. However, you don’t want to have a generic website. You want to build something unique and brandable that will become something valuable in the future. This is why I strongly recommend using WordPress as your content management system because of it’s ease of use, it’s free, and it’s highly customizable. Get a theme from:

Free WordPress Directory

Theme Forest

Studio Press

*For more, please check out our short and sweet guide on WordPress themes.

What about website editors? Do I need one?

Unless you’re a web designer, or wish to be one, it’s stupid and crazy to spend hundreds of dollars and countless hours learning how to design and upload your own web pages with programs like Artisteer or Dreamweaver.

These programs were necessary 10 years ago, but today you can use more intuitive, effective and less technical options like WordPress with quality themes and still achieve a better outcome in less time than figuring out an HTML/WYSIWYG editor.

With all the consideration that goes into good design like conversion, psychology, and professionalism found in today’s WordPress themes, to not leverage this already existing body of work and knowledge base is a tremendous mistake as you will be wasting large amounts of time trying to become an amature designer.


AN EASY-TO-UNDERSTAND WEBSITE DESIGN PLAN

Do you understand the phycology of good web design? How your visitors will interact with your site? Do you know color theory, the knowledge assumption mistake, or how your keywords affect your content?

The header is the top part of a website where the logo is located.

It has a certain size in pixels (px). Pixels are the unit you use to describe the sizes of elements within a web page.

Your overall site dimension will directly limit your website header width. If your website is 1000 pixels wide, then your header must be 1000 pixels wide to fit properly.

You can hire someone to design you a header. This is a good idea because your header defines your website. Apart from typography, your logo design is the most important design element.

The body

The body is the main content area where you will be publishing your written content and any additional media you wish to embed into your content like a YouTube video, podcast or slideshow.

The sidebar

The sidebar is the content that is off to the left or right and serves as space to make your website more interactive by linking to any products or services, popular posts, an email opt-in form and and social media links and proof.

The footer

The footer is the bottom of the website. It’s where additional links go. In particular your legal pages, a contact page and a link to a sitemap as well as any copyright.


How to find designers?

Google search is a good place to start as well as online design magazines (look in the comment section of articles as most will be from designers).  Upwork is another potential spot as well as 99designs.com.

The price for a proper header is $100 (usd). Why so much? Because designers are college educated professionals who typically charge anywhere from $25-90 an hour. Also, to design a logo takes hours.

Remember: Large headers are stupid. They may look beautiful, but they take up too much real estate and take too long to load. Slowing down your websites performance.  Try to keep your logo image under 80 KB.

The best logos are memorable, durable (they stand the test of time), still look good with or without color, and look good regardless of size.

A lot of popular website use very simple logos, some even use a simple font based logo.

How to choose a logo designer:

  • Look at there portfolio, what is their style and quality? 
  • Where is the designer located and how will you communicate with them?
  • What is the time frame for completion?

You should also understand your website, your unique selling point, and who your right people are. A proper designer will ask questions to understand this. If they don’t, that’s a red flag.

Do it yourself

To create your own logo is challenging but it can be done. You can use expensive programs like Photoshop or Illustrator or you can download blog header or website header templates that you can then upload to a photo editor like PicMonkey.com or GIMP.com etc to add text and special effects.

The text and lines were added with Adobe Illustrator to finish off the logo. But again, no need to purchase – just find a design program that offers a free trial.


CREATING A MENU FOR YOUR WEBSITE

The navigation bar of  a website is the menu section made of text links that helps a visitors navigate your website.

Appropriate locations for a navigation bar are either either directly above the header or directly below the header.

The navigation bar should be kept as simple as possible with only need to know information.

In WordPress your navigation is managed by the “menu” feature in WordPress.

Use the <br/> (break tag) in the menu section of WordPress to separate two word navigation titles as to make About+Contact into a nice square shape with about on top and contact underneath.

Keep navigation items logical.  No cute or clever titles – It turns visitors away and shows you’re unprofessional.

One site during a review we noticed the navigation had common titles like “blog” – “About” – “Toolbox”. Good. But then we saw “Dusty Shelf”  and “7EShow”.  Dusty shelf was for a bunch of links for career building resources and 7EShow was a link to a not-yet-released Podcast.

If the Podcast is not released yet, don’t link to it, also call it PODCAST or AUDIO – not some random name that only means something to you the producer. Same with the title “dusty shelf”.

The font family for your navigation bar should be the same as your font family family for your page and post titles.

Keep some space between each item. Good design incorporates space.

Have a link to your contact page in your navigation bar.

DON’T have links to your privacy policy or terms of use page in your nav bar.

Drop down menus should be used sparingly for your navigation bar. If every item in your navigation bar has an additional 3-4 item drop down menu you’re over doing it.


LOCATED AT THE BOTTOM OF A WEBSITE IS YOUR FOOTER

The footer is the bottom section of your website that follows after the page content. It has a few purposes in web design.

First, it clearly frames the end of the web page for any of your visitors. It does this by being stylized with a different color from the body of the content. Typical colors are grey (as white transitions to grey naturally) and black.

Your website should made up of 3 core colors, so make sure your footer color is one of those core colors.

Second, the footer is used as a link section to some very important pages.

What to include in your footer:

SITEMAP

You NEED a sitemap for your website, and you should link to it in your footer.  How to get a sitemap:

With WordPress, you can install various plug-ins that instantaneously create for you a sitemap. One of the most popular is a plug-ins is called WordPress SEO that incorporates a sitemap functionality.

A sitemap is a file that lists out all your content for search engines to crawl. It’s also useful for people to find specific content.

CONTACT 

Provide a simple contact form in the footer, and email address or phone number, or provide a link to the contact page.

LEGAL PAGES

All websites need to provide a privacy policy and a terms  of use page at a minimum so visitors understand the relationship between themselves and the website they’re on.

COPYRIGHT

Is your site copyright or UNcopyright? Either way you need to show this status and the footer is the perfect spot.

ANY DISCLAIMERS?

Disclaimers are mean’t to make know information that is not obvious. If you have any vested interests or relationships that affect the relationship between visitors to your website and yourself, you need to make this clear via a disclaimer (again, don’t be sketchy).

MORE NAVIGATION OPTIONS

Established websites tend to have an a diverse amount of content. The footer provides and excellent opportunity for visitors to navigate to other areas of your website. The Firefox website browser website is a good example:

Included are links to the necessary legal pages, copyright, and specific content pages like support, features and additional resources that would not make any sense to link to anywhere else BUT the footer.

SOCIAL MEDIA

The footer is an ideal spot for social media links as well.

EMAIL OPT-IN FORM

The footer is also an ideal spot for collecting emails as the footer can act as a secondary navigation menu. So it makes sense to also offer a call to action.


SIDEBAR: THE SPACE OFF TO THE RIGHT OR LEFT

The sidebar with regards to a website is the content that is found on the left or right hand side of the core content of a website. Some designs make use of a double sidebar, one on the left, one on the right, and content in the middle.

What to include in your sidebar:

EMAIL

When you start an email list, create a custom email opt-in box with a call to action like “yes, send me the course”. There should also be a free give-away for those who sign-up as well as some short copy explaining why anyone should care.

You would typically need to hire a designer to design and code for you something like this. There are also many free template you can use. We recommend though you launch an email list after your site is getting 300-400 visitors a day minimum as anything less than this you will not be justifying the costs associated with running an email list.

CREDENTIALS

credentials

Any relevant credentials you have, make them noticeable by having them at THE TOP of your website where it’s positioned as one of the first thing people see. This of course will  increase trust with your website.

Likely you have not been featured in the New York Times, and probably have minimal to no publicity starting out. But no worries, as part of finding your unique selling point with planing a website the question “what are my credentials” and “why am I different from my competitors” should be crystal clear at this point.

Leverage the answer to those credentials in a quick bio in your sidebar on your homepage explaining your value in an elevator style sales pitch.

If you have no credentials, no reason why anyone should listen to you then maybe you should figure out another website to start.

LATEST CONTENT

Add additional functionality to your content by displaying the latest posts with a thumbnail image next to them. Images help increase click through rates and make your site visually more appealing. HuffingtonPost.com does this well:

pin board

Not only do they include a picture, they include a Facebook Like button to show popularity. You too can do this, by showing social media proof with you content, or content that has the most comments, or was emailed the most.

This sort of layout is call a pinboard design.

THE MOST POPULAR CONTENT

With WordPress you’re able to show your websites most popular content as determined by your visitors. Show this content off. It’s popular for a reason. It gives new visitors to your website a compelling reason to stick around if you’re able to prove with your content that your website has the answers to their problems.

For example. When I first found MatthewWoodward.co.uk I hated the design. It looked like an amaturish website by a guy pretending to know what he talks about. That is until I found his link building tutorial series via his sidebar which proved to me that this guy is really talented.

Same with BoldandDetermined.com and StevePavlina.com.

Both these website have a content heavy sidebar with catchy titles which help you go deeper into the website as well as allowing you to “fall in love” with the content. Don’t underestimate the value of the sidebar. You need to prove to new visitors quickly that you’re the real deal.

SHORT BIO

It’s also a good a use of design space to include a short bio with a picture of yourself introducing the site and WHY anyone should care. Keep it brief as possible.

TOPICS

As your site grows and develops it may become a sound idea to list out the different topics your content covers so visitors can navigate your site to find relevant and helpful information. Example:

SOCIAL MEDIA PROFILES

is there a social media platform that is a good fit for your website? One where you’re gaining traffic and growing quickly? Add your profiles after you have a small following. 500 likes on a FB page, a couple hundred Twitter followers and so forth. Social proof is important. If you’re just starting out and your social profiles are undeveloped it’s a terrible idea to link to them. You’ll suffer from NEGATIVE social engagement.

SIMPLE IS THE WAY TO GO

Less is more in web design. Add to your sidebar only what is needed and only what is appropriate to add to the user experience, increase conversions, and to help people successful navigate your site and all it has to offer.


BEAUTIFUL THEMES TO HELP YOU DESIGN

WordPress themes are a set of programming files put together in a nice easy-to-use downloadable file designed to enhance the visual appearance of your website. All you do is simply download then upload a theme you like to WordPress and for the most part you’re done.

You still have to do basic customization: Read up on how to make the site yours as well as essential plug-ins you should consider installing. You still need to add your own content, your own images, your own logo BUT for the most part, the design is taken care of.

With WordPress you have thousands upon thousands of Themes to choose from.

For amazing free themes check out design focused websites like SmashingMagazine.com or do a Google search for beautiful free WordPress themes for example. You can also try other related searches till you find a theme you like.

For paid themes check out:

Paid themes are higher quality as the theme author has a financial incentive to produce quality work. Paid themes tend to be forward thinking and current to today’s design standards (while many free themes are now simply out-dated former paid themes).

Theme Frameworks:

Headway – Visually based framework that allows you to build beautiful websites without any coding skills (but knowing how to code is definitely a benefit).

Genesis – Very different from Headway. More of a text based editor framework that requires you to have stronger programming skills to make changes. The upside is that Genesis has some very clean pre-built set-ups called “child themes” you can use right out of the box and the cost is affordable.

ADDITIONAL CONTENT RELATED TO THIS FREE TUTORIAL:

Web Design Best Practices In this material I outline the some of the most common mistakes I see from new websites. Namely, the knowledge assumption mistake.

Copywriting for The Web – Here we take a look at how content and design work together to enhance your message.

Negative Social Engagement People look to others for how they should act. Learn how to take advantage of social media and avoid negative social engagement.


 

Back to Top