How do you make a website and how do you decide what your website will look like?
These questions are part of a larger whole: Making a website with web design in mind.
For some, the focus is on search engine optimization. For others, it’s the user experience at the forefront of everything they do. Some people swear by color psychology, while others aren’t even sure how free blog sites differ from professional ones.
There are so many stages when making a website: from the choice of your typography to the color selection, sidebar layout, and plenty more. Given all that, it’s hard to know where to start.
Today, we’ll start from the beginning.
Table of Contents
III. User Personas
I. Issues With Your Homepage
II. Text and Link Mistakes
III. Graphic Elements and Multimedia Pitfalls
IV. Navigation Problems
V. The Mortal Sins of Web Design
When I was younger, I used to think that owning a website was something that only the rich and powerful could achieve.
Fairly quickly, I learned how to create a website, and I was blown away by how easy it was! Not only that, but it wasn’t very expensive and I had the potential to make some serious income.
3 Simple Steps to Learning
How to Make a Website
Step #1: Choosing Your Website Platform
If you’re a beginner looking to see how easy it can be to create a website, you’re just as welcome! Anyone can take advantage of this guide. The first step is to choose which platform you want to use.
Whoa Matt, slow down! What’s a platform?
This is a good starting point. You see, when the internet was still a baby, websites were built from scratch using HTML coding. Trying to build a site this way required huge amounts of training.
Seriously, the only way you were going to build a site like this is if you spent the majority of your life studying HTML in a secluded temple in the Himalayas.
Fast forward to 2016, and suddenly creating a website isn’t so bad. With the rise of content management systems (CMS) like WordPress, anyone can get into the world of website building with little to no training. All you need a good guide (like this one).
So, which CMS platform should you choose?
The Top 3 CMS Platforms
- WordPress – This is the best platform overall because it combines beginner-friendly tools with the ability for advanced users to dig deeper. All it takes is a quick look at some CMS statistics to see that WordPress is used by 59 percent of all websites that use a CMS!
- Joomla – This platform caters to online commerce more than anything but it does have some user-friendly elements as well, which makes it one of the top CMS options. There are over 2.6 million live websites using Joomla right now.
Drupal – I’ve used Drupal in the past and while it gives structure to website building, it relies on at least a basic understanding of HTML to create any substantial content. Just shy of 800,000 websites call Drupal their CMS.
What Platforms Do the Top Websites Use?
WordPress is the preferred choice for a website platform. Notice how there are very few Wix or Squarespace websites in the top 10k websites on the internet. The most successful websites clearly choose WordPress.
But why is this? I mean, Wix and Squarespace offer things like drag-and-drop builders, plus they will act as your host. It’s a perfect platform, right?
Well, yes and no.
While simple platforms like these offer equally simple methods for building and editing your site, you’ll quickly outgrow the training wheels and you won’t have any other options.
Here’s the deal:
WordPress is a flexible platform that might as well have “options” as its middle name. Between the themes, plugins, and the feature-rich editor, WordPress matches your skillset and grows with you.
And that, my friends, is why people choose WordPress.
Data from Builtwith.
The Ultimate Choice: WordPress
WordPress is the best choice overall but simply saying that isn’t going to win you over, so let’s look at some of the top reasons why I always recommend it over every other CMS platform:
1. It’s Completely FREE
Using WordPress doesn’t cost a dime. You can your website up and running without paying anything at all. You’ll even have access to free layouts and tools too.
2. Everything is Easy to Use
User-friendly CMS platforms are few and far between. WordPress is the king in this arena as well. The setup it uses is extremely similar to Microsoft Word, so if you’ve used that program (who hasn’t?) then you’ll feel right at home with WordPress.
WordPress also offers tools called plugins that add all kinds of functionality to your website. Whether you’re designing the perfect blog posts, or a business website, WordPress can do it for you.
3. Big, Small, Busy or Quiet, it Doesn’t Matter!
You’ll start out small like any other website, but rest assured that WordPress can handle everything you throw at it as you scale upward towards the stars. Did you know that WordPress is used by companies like Facebook, eBay, CNN, and NASA?
4. Support for Mobile Devices
Having a website that looks great on mobile devices is so important right now if you want your website to have a chance to rank in Google. In terms of SEO (Search Engine Optimization), it’s practically a must.
So clearly WordPress is the best choice for beginners and in most cases it’s also the perfect option for advanced users too.
Choosing Your Website Platform
- The top 3 website platforms are WordPress, Joomla, and Drupal.
- WordPress is the most popular, allows for mobile friendly sites (great for SEO)
- Drupal is great for experienced web developers, but not for beginners.
- Joomla is best used for eCommerce websites.
Here’s what you need to do right now:
- Don’t worry about downloading WordPress just yet, that will come in the following steps 🙂
- Choose a platform for your website. I think WordPress is the best and a half, but the decision is up to you.
Step #2: Purchasing a Domain Name and Hosting
In order to start your website, you’re going to need two things: a domain name and hosting. For the uninitiated, here’s a quick explanation of what these things are:
- A domain name is the web address that you’ll type into the search bar to navigate to your site.
- Your Web Hosting is the company you choose to put your website online and make it publicly available all hours of the day, each day of the year.
Choosing these things is the most important decision you’ll make as a website owner. Before we move into the process, though, you should know that free websites are not smart for the long term.
What do I mean by free websites? I’m talking about places like these:
These sites will give you a website to call your own, but it’s not really yours. Not only do they own it (and have the ability to shut it down at a moment’s notice) but they also make you share the URL with their company’s title.
- Completely owned by you
- Monetize and earn money
- Loads super fast
- 24/7 Support
- Complete design customization
- Not yours (owned by the provider)
- Can be taken down at any moment (without notice)
- Provider will put their own ads on your site
- Can’t make money
Bottom Line: If you want to look professional and you have plans to make money through your website, you need to have your own domain and hosting. I use Bluehost.com.
It’s as simple as that.
“Hey Matt? So, where do you get your Hosting?”
I’m so very glad you asked, dear reader.
My exclusive choice of hosting is BlueHost, but you’re welcome to use a wide array of hosting choices. I’ve been with BlueHost for several years now and I’ve never had an issue. Not only that, but I’ve also been extremely happy with their customer service.
For the most part, I knew the ropes, but every time I called to speak with them, they were always courteous and polite. In fact, I like them so much that I’ve been recommending them to my readers since I started On Blast Blog.
Choosing Your Domain Name
While it may seem like a simple thing, your domain name is an integral part of your website. You want people to easily find your site and remember the name so they can tell their friends, family, and their pets about it.
In short, your domain should encompass three key characteristics:
- Relevant to your business or website
- Easy to remember
If you own a business, then the best approach is to make the domain the name of your business. The same goes for the name of your blog, or even your own name will work as well.
Keep in mind that there cannot be any two identical domains on the internet, so if you’re first idea doesn’t work, it’s not your fault. You’ll also choose the extension for your domain (.com, .net, .org). if the .com version is taken, you can try .net instead.
A quick review before we move on:
Purchase Domain and Hosting
- Free websites offer a limited experience and aren’t valuable for long-term growth and success.
- WordPress.com is the free site, WordPress.org is the self-hosted CMS platform.
- Your domain name should be relevant, easy to remember, and uncomplicated.
- Hosting options are wide and varied.
Here what you should be doing before you move on to the next step:
Step #3: Setting Up WordPress
Installing WordPress can be easy, or it can be really, really hard. This is yet another reason why I always recommend WordPress and by extension, Web Hosting Hub. Here are the two ways you can install WordPress:
- One-Click Installation (as easy as it sounds)
- Manual Installation (Needlessly complicated)
Oftentimes, the best sign of a good hosting provider is the existence of a one-click option for installing a CMS like WordPress, Joomla, or Drupal.
- Step One: Log into your account
- Step Two: Head over to the control panel
- Step Three: Choose your domain and click on the WordPress icon
- Step Four: Click the “Install Now” button.
Once you’ve installed WordPress, you’ll be able to log into the dashboard which looks like this:
To get here, simply type in your url with the WordPress admin tag on the end. It will look like this:
This is where you’ll log in and see the dashboard pictured above. As you can see, there are a lot of options to choose from. Let’s start with choosing your website’s theme.
How to Choose Your Theme
The basic WordPress theme is all well and good, but we’re about to turn the dial up to eleven. WordPress offers a massive amount of design templates to give your site a look that fits your needs. The best part? These designs are incredibly easy to install.
When it comes to WordPress, easy is the word of the day. Head over to your dashboard and look for the Appearance button on the left side. Click that and then click Themes. Go ahead and click the Add New button at the top of the screen
Here’s what you should see:
Now you get to browse the options like a kid in a candy store. There are free and premium options that you’ll come across. If you’d like to invest in a theme, there are some awesome options.
If you’re just starting out, then don’t worry about spending anything just yet. You’ll find plenty of free options. As you’re browsing, be sure to consider these characteristics of a great WordPress theme:
The Elements of a Great Theme
- A User-friendly option that makes everything clear. Navigating your site should be quick and easy for visitors.
- Pleasing design that pops, but doesn’t hurt your eyes with an overload of color. Look for something clean and simple.
- Mobile responsive, I cannot stress this part enough. Your site needs to look great on mobile devices. Don’t forget, Google has a tool you can use to check. A non-responsive site is killer for your rankings and your user experience.
- Make sure it doesn’t have too much coding or poorly written code that slows your site down
- It should be easy to use on the back end, and it should be optimized for SEO. Also, ensure that the theme is regularly updated and maintained.
Once you’ve found the theme for you, click the install button and then make sure you also click activate on the next page. One important thing to remember as well:
If you need to change themes, don’t worry about anything disappearing. Now that you’ve chosen a look for your website, let’s move on to creating content for it, shall we?
How to Add New Pages
Before we delve into the process of creating new pages, let’s clear up the difference between posts and pages.
- Posts are dynamic (this is the best choice if you’re starting a blog)
- Pages are static like the ones you find on a company website. Your “About Us” page is a perfect example.
Okay, so when you’re ready to start with your first page. Just click Pages -> Add New on the left side of your dashboard. The next screen will look very familiar to those who have used Microsoft Word.
Here you can add in your text, images, and all the elements of the page you’re creating. When you’re finished, click the Publish button. If you want buttons for these pages on the navigation bar of your site, we’ll cover that next.
Adding Pages to Your Navigation Bar
Start by heading to Appearances -> Menus. Click the checkbox of the page you want to add and then click Add to Menu.
Creating a Static Home Page
Since we’re setting up a website, you’ll want your home page to be static and unchanging. If you don’t take this step, your posts will show up here each time you create one.
For may website owners, they want their blog to be separate, which will discuss momentarily. To create a home page, follow these steps:
Creating a Static Homepage
- Go to Settings -> Reading
- Choose the page you want (Front Page is your home page and Posts Page would be the page for your website if it’s separate)
Adding Posts and Categories
Most websites will also have a blog attached to them. While coming up with blog post ideas can be tricky, once you have them you’ll need to set up your website to handle these posts.
Posts can be found on the left side of the dashboard where the pages option is found. Your blog posts can be organized into different categories based on your topic, or you can simply make a category called “blog” if you wish.
To do this, click on Posts -> Categories on the dashboard. Once you’ve created your category or categories, all you need to do is check the proper box in the categories section when you’re finished writing posts.
It looks like this:
Let’s regroup, here are the takeaways from step three:
- Great hosting providers offer one-click installation
- Installation can be done through your hosting control panel.
- Once installed, head to www.yourdomain.com/wp-admin to login.
- Create posts for a blog (dynamic) or pages for a website (static)
- Add pages to your navigation bar by going to appearances -> menus.
- Go to settings -> reading to set your front page (homepage) to static if needed.
- Organize posts into categories by going to posts -> categories.
[BONUS] Step #4: Housecleaning & Final Touches
At this point, your site is up and running, but there are a few more tweaks we need to take care of before we can call it a day. Don’t worry, these won’t take long.
Your Title and Tagline
These elements refer to what people see on search engines when your site’s pages show up in the results. To change these, head to Settings -> General. The page should look like this:
The title is the first thing people see in the search results.
Depending on your site, you may not want people commenting on pages or posts. If that’s your preference, Click Settings -> Discussion -> uncheck “Allow Comments.”
This is our last stop on the road to your website’s epic launch. WordPress has a huge library of programs called plugins that perform a wide variety of tasks on your site. Like themes, some of these are free and some are paid.
The best WordPress plugins will expand your site’s features and give you exciting new capabilities. Here are just a few of the things Plugins can do:
- Track your SEO efforts in each post
- Speed up your website by caching pages
- Handle your social media efforts and schedule posts
- Add surveys, social sharing buttons, and other engagement items
Installing Plugins on WordPress
- Go to Plugins -> Add New and you’ll be able to search through all of WordPress’ 50,000+ Plugins!
- When you find one you want, click Install.
- A word of advice, not every plugin is created equal. Also, too many plugins will slow your site down. Do your research before you decide to start installing.
House Cleaning and Final Touches
- If you don’t want comments, go to settings -> discussion -> uncheck ‘allow comments’.
- Install plugins by going to plugins -> add new
- Research before installing plugins, not all of them are worth your time.
How to Start a Website With Great Design
Congratulations on learning how to make a website! See, it wasn’t that hard at all!
But we’re not done yet.
A long-term plan should be be put in place for how you want to design your website.
This is where the real fun begins!
Next, we’re going to look at the major tenants of web design and help you form a picture of how you want your website to look and feel for the foreseeable future.
The Four Pillars of Web Design
Pillar #1: Size
- The page size in correlation with the screen size (desktop or mobile)
- The content within the page
- Whether you want the reader to skim or save it for thorough reading at a later time.
- The amount of bandwidth needed to load the page.
The Difference Between Online and Print Graphic Design
- Print allows the user to see a full two-page spread
- Online web pages only show one page at a time
- Divide into “screens” based on what a user sees as they scroll
- Link to home page on logo
- Content divided into headers
- Global links easily visible for users, structured as a list
- Breadcrumb navigation (optional) above the main content/integrated into the header.
- Shopping cart icon for eCommerce in the top right corner of the page
- Scan columns can be used for navigational links on the left for best results.
Content Area Structure
- Page Title – use H1 format headers at the top of the page to clearly show what the page is about for readers and search engines.
- Rules – Use CSS to keep the page rules in check as they can become cluttered. If you’re concerned, rules can be skipped and instead whitespace or visual content can be used to create separation.
- Page Navigation – For multi-page layouts, offer navigation at the top and bottom of the page to move forward and backward in the sequence.
- Publication dates – Dates for when content was published or updated should be placed at the top of the site for news and magazine sites, while others can included it at the bottom.
- Footers – Keep these out of the way and use them for legal attribution such as copyright statements, contact information, and page authors.
- Page length is not as much of an issue than it has been in the past. Users will scroll.
- Multiple input devices and screen sizes require a responsive web design.
- CSS and HTML should focus on flexible and fluid design. Static elements can be used (sidebar) combined with flexible elements (content).
Pillar #2: Color and Spacing
- Colors work together to complementation, contrast, and vibrancy
- Three types of color complementation: Triadic. Compound, and Analogous.
- Contrast is used to divide elements on a page (an example being background and text color contrast)
- Vibrancy refers to the brightness of color. Brighter colors create more energy (useful when trying to sell a product). Darker shades are relaxing and allow the mind to focus.
- Choose colors on opposite ends of the spectrum for visual harmony
- High contrast helps make elements easily readable and guides attention
Triadic Color Scheme
- Composed of three colors on a wheel
- Start with base color and draw an equilateral triangle from the first color
- The three points of the triangle create the color scheme.
- Example: Yellow, Red & Blue
Compound Color Scheme
- Choose two colors from opposite sides of the spectrum.
- Allows for more freedom in color choice.
- Colors chosen will have complementary features.
- Example: Orange & Purple. Orange & Blue
Analogous Color Scheme
- Selection of color within the same area of the spectrum.
- Colors are represented through vibrancy and contrast
- Two examples: Yellow/Orange or a monochromatic.
- Color psychology looks at how colors influence human behavior.
- Customers take 90 seconds to form an opinion about a product. 62-90% of that decision is based on color.
- Surveys show women prefer blue, purple and green. They don’t like gray, orange or brown.
- Men prefer blue, green, and black. They don’t like brown, orange, or purple.
- The color blue represents trust, loyalty, and calmness.
- Yellow typically represents caution, but it can also trigger excitement centers in the brain.
- Colors are closely tied to memories and experiences.
- Green is a great color for outdoor and environmental products/services
- Green works well as a color for CTAs when paired with the isolation effect.
- Black can be used to convey sophistication, luxury, and exclusivity.
- Bright and primary colors are ideal for calls-to-action.
- White space helps alleviate overload and allows for a ‘breathable’ design.
- Use a visual hierarchy to differentiate what’s important and what is secondary.
- Keep related elements in groups to facilitate structure.
- A grid-based layout with groups of content creates a scannable layout.
- Consistency is important across typography and layout
- A visual balance between text and graphics is paramount. For general audiences, this is a balance of text and links with smaller graphics that load quickly.
- Web designers should look to color palettes inspired by nature for an example of harmonious color schemes.
- Strive for simplicity and utilize white space to separate differing visual elements.
- Check out the world’s most advanced and responsive front-end framework in the world.
Pillar #3: Layout & Navigation
- Clear and consistent design across graphics and text gives the reader confidence in finding what they need.
- It’s crucial that users understand where they are in relation to the rest of the website.
- No dead-end pages. Subsection pages should have links back to the homepage or local category pages.
- Design your navigational hierarchy with efficiency in mind. Users should reach their destination in as few steps as possible.
- All of your pages should be designed with a consistent layout grid and hierarchy of visual information.
- Feedback can be received through analytics and heatmap data to see how users interact with the navigational aspects of the site.
- Design your sidebar with universal usability in mind. Identical or equivalent across all of your pages.
- The design should be flexible and useful for a wide range of preferences and experience on the internet.
- It is easy to use and organized so that important information is most prominent.
SEO (Search Engine Optimization)
- Keywords or Queries – Varied use of related keywords and long-tail variations that target specific subjects.
- Alternate Text – Use of alternate text in images to provide a description for search engine crawls.
- Headers – Incorporating relevant keywords and topics within <title> and <h1> tags to establish topical depth.
- Entity Salience – Defining major subjects (entities) and connecting them to other related topics (Example: Marvel heroes connects to The Avengers, Spider-man, etc.)
- Sitemaps – Creating a sitemap and robot.txt will allow spiders to more easily crawl your web pages and allow you to differentiate between indexed and non-indexed pages.
- URL Structure – Describe what the page is about and be succinct. Don’t use 10 words when 3 will do.
- Image Optimization – Use consistent image width and tools like optimizilla to keep the file size down.
- Website Speed – Focus on serving fast-loading pages for a positive & fruitful user experience .
- Link Building – Utilize email outreach and influencer networking to earn relevant backlinks to your content.
- Google Analytics – Monitor meaningful metrics like bounce rate, time on page and how engagement impacts conversions/sales.
Pillar #4: Style
- Great typography is dependent on visual contrast and font choice (how they relate and work with surrounding white space).
- Consistent margins are a must, with a consistent use of white space to create structure and separate text from the other page elements.
- Never use centered, justified, or flush-right designs in website text.
- Left-justified text is the best option, with headlines that are flush left.
- Fixed-width layouts offer control over line length, while flexible layouts fill the browser window.
- For fixed-width, set columns no wider than 365 pixels which is roughly 10 words per line. In flexible design, use CSS leading controls to adjust line spacing.
- Utilize leading to increase legibility. Best practices are 2 points above the size of the font. Example: 12-point font should have 14 points of leading.
- Indenting can be done as a way to introduce new paragraphs, or blank lines spacing can be used as a means to provide white space between paragraphs (better for scanning web pages).
Finding Your Style
- Don’t rely on fads or solely on trends. Choose a style that is appropriate and relevant to your audience.
- Understand your user’s needs and what problem you’re trying to solve for them. Look at competitors, create mood boards, and set branding guidelines.
- Keep everything clean and visually pleasing. Find the balance between engaging visuals and usability.
- Your style should reflect your beliefs and values. Your passion should be present in your design.
- Don’t mimic others, be inspired by them to create something wholly unique.
Creating High-Quality Content
- Online readers prefer to skim pages instead of reading them.
- Break your text into smaller paragraphs (3-4 lines per).
- Provide descriptive and short headers.
- Use bold and italics to highlight important points within text.
- Use an inverted pyramid style (most important points near the beginning and easy to find).
- Use HTML tags to define headers, paragraphs, bullet-point lists, etc.
- Vary your types of content: listicles, editorials, how-to-guides, videos, podcasts, infographics.
- Cite sources in your articles with relevant anchor text and hyperlinks.
- Use images to further break up long stretches of text.
- Provide actionable advice.
- Write a good balance of informative and promotional content (80/20 rule applies here).
- Always provide a CTA (call-to-action) at the end telling the reader what to do next.
Designing For The User Experience
- Use survey software to collect data like basic demographic information to understand your website users.
- Ask questions about usability like how often they visit and how they would rate major functions.
- Responses will give you a basis for how your current design is or isn’t working.
Using a program like Google Analytics or Adobe’s SiteCatalyst can help you identify data like this:
- How long a user stayed on your website
- The number of pages visited during that session
- The number of engagements that user made
- The browser and operating system used (along with screen size)
- Whether they were new to your site or a returning visitor
- The process of creating personas is crucial to understanding the motivation, desire, and intent of your users.
- You create these personas by boiling down your research and customer engagement into a representation of your average customer base.
- Here are two examples of people who would visit OnBlastBlog:
- Name: Frank Ramsey
- Job Title: Office worker/manager
- Demographic: 20+ years old, single and has a degree.
- Goals: To leave his job and go into business for himself.
- He is familiar with computers, possibly even with WordPress, but he doesn’t know how to start a website.
- Name: Lisa Warner
- Job Title: Stay-at-home mom with two kids
- Demographic: 35+ years old, married
- Goals: to start making money from home to help accommodate her turbulent schedule.
- She uses Pinterest on a daily basis but is unsure of how to start a website. She’s also unsure of what niche is worth pursuing & how she’ll monetize.
Web Design Mistakes to Avoid
In this section we look at some examples of horrific web design mistakes so you can avoid these pitfalls in your own work.
Issues With Your Homepage
Here’s a homepage from 2011. Zero direction. Took me 1 minute and 30 seconds to really understand what this website is offering. Believe this, a new website visitor won’t give you that much time.
It’s 2016 and there are people still having trouble with this basic concept.
Had the pleasure to review 415 websites’ homepage & in about 20% of the cases couldn’t tell what’s the site about by staring at the homepage
— Gary Illyes (@methode) August 3, 2016
- The design is focused on the company and not the user (overly promotional)
- There’s no easily-visible focal point on your homepage.
- Website loading speed is longer than four seconds
- Users must refresh to see new content.
- There’s no accessibility for users with disabilities.
- Coding errors cause the website to break.
- The homepage looks different in various browsers
Here’s how AmazingThings.org’s homepage looks like these days.
Text and Link Mistakes
- Multiple text styles on a single page (left-aligned, justified, etc.).
- Not enough contrast between the text and background color
- Centered or wholly justified text is used.
- Text besides links are underlined.
- The tone changes throughout the content.
- Links aren’t clearly labeled with relevant anchor text.
- Many of the links are dead or broken.
- Link structure is too complex with too many words in a URL.
Graphic Elements and Multimedia Pitfalls
- The logo isn’t above the fold or present on all subpages.
- Clicking the logo doesn’t take you to the homepage.
- Banner ads and graphics are too close (people ignore ads so they may ignore both)
- Image file sizes are way too big and take long to load.
- Graphics are used as links.
- The color scheme isn’t complementary.
- Too many animated gifs.
- Flashing graphics or animations that can cause seizures.
- There’s no alt-text on graphics.
- Videos or music auto plays when the visitor hits a page.
- Navigation sidebars aren’t obvious or present.
- There’s a popup/page that explains how to navigate the site.
- No indication of the site’s layout (i.e. Breadcrumb navigation).
- Navigational terms are vague or confusing.
- No shortcuts to popular pages/content on the homepage.
- Navigational links are inconsistent from page-to-page
- Some or all of the pages require users to scroll horizontally.
- Users must follow four links or more to find the information they’re looking for.
The Mortal Sins of Web Design
- The website doesn’t have a search engine.
- Graphics are used as links
- The CSS or HTML files aren’t optimized.
- Dates are present on content that isn’t consistently updated.
- The content is full of needlessly complex jargon.
- There is no contact information readily available.
- Using JPG images when you should be using GIF.
- The text isn’t black.
- Headings are all capitalized.
- Documents and graphics have incomprehensible file names.
- When clicking an image or graphic it doesn’t show a larger version of the image.
- Documents that span multiple pages don’t have the option to view it as a single page.
- Bullet-point lists aren’t used for organizing information.
- The back button doesn’t work because it’s been disabled.