Creating a website can be a daunting task. Many people have no idea where to begin. In this article I'll be sharing with you some practical steps you can take to craete a website that has both structure and flow.
Perhaps you're not sure what I mean when I say "structure" or "flow". To put it smply the structure of your website refers to putting things in order and the flow refers to the direction that order will provide for the people who visit your website.
The first thing I always ask someone to do when they begin planning their website is to decide on the primary goal. What is the thing you want to get the most out of your website. For some people it's to sell a product start to finish, for other people it's to generate a phone call, while still others may be simply trying to share information. Whatever you want your website to do for you the most, write it down.
Here are some examples of primary goals....
> Sell a product or service
> Captpure lead data like an email address and/or phone number
> Generate a call for your business
> Get people to engage with your blog or other content
> Share examples of your work
While thinking about the primary goal of your website you probably thought of multiple things you'd like your website to do for you. Maybe they're not quite as important as the primary goal, but they're still important. I call these secondary goals, and you should write those down to. Once you have a list of secondary goals try your best to put them in order of importance. Writing down the primary goal as well as ordering the secondary goals is going to be a helpful tool when making design decisions about your website.
Examples of secondary goals might be things like these...
> Educate someone about your products or services.
> Provide a way for your customers to obtain support.
> Establish credebility with customers.
> Share important times, dates, and events.
> Provide a central hub for your online presence.
If you completed the exercise above you probably have a pretty good list of things you want to get out of your website. So now lets talk about how you can create a structure to your website and create a method to the madness.
A website is generally made up of multiple web pages. Each page of your website should be dedicated to accomplishing one or more of your goals. By spreading your content over multiple pages you're breaking your content down into bitsize chunks that are easier for your site visitors to find and consume. Here are some examples of common pages you'll find on a website and what they're typically used for. While looking over the examples think of how each one of these pages might acheive some of the goals you wrote down.
1. Home page - A home page is where people land when they enter your web address into a browser. As the name implies it's the home or hub of your website. Typically you'll find links to all the other pages of your website somewhere on the home page.
2. Landing page - A landing page is where people will "land" when they click on a link in your advertising and marketing promotions. Many times it will have a form where people can subscribe to a mailing list.
3. About- The about page will typically have a few paragraphs about who you are, what you do, and how you got started. It may alos have short biographies of prominent team members and other notable information about your organization like accolades and awards.
4. Contact- The contact page will typically share phone numbers, email addresses, physical addresses, maps, and a contact form.
5. Portfolio - A portfolio page will have examples of work like before and after photos.
6. Products - Product pages will contain detailed information about products. It will have the name of a product, photos, and description.
7. Services - Services pages will list names and descriptions of services.
8. Features - A features page is a place where you can list features of the product or service you're selling along with a description of the features and the benefits they provide.
9. Calendar - A calendar page is typcially used when an organization wants to share upcoming event times and locations.
10. Solutions -Solutions pages are used by businesses that solve problems often using a combination of both products and services. On the solutions page you'll usually see a description of the problems someone commonly faces along with how they provide a soltuion to that problem.
11. Why choose us - A why choose us page explains why people choose you.
12. How it works - How it works pages explain how your products and or services work.
13. News & Events - News and events pages usually list the latest news and events surrouding your organization or subject matter.
14. Our work - This is a page where you'd list examples of your work with photos and descriptions.
15. FAQs - This is a list of frequently asked questions and answers.
16. Pricing - This is where you list your pricing.
17. Gallery - Galleries are places to show off creative works like art, photos you've taken and the likes.
18. Photos - Photos are just a collection of photos you'd like to display on your website.
19. Our team - An our team pages is where you share information about your employees, volunteers, and other team members. Usually there will be photos, titles, and descriptions.
20. Booking - Booking pages are where you'll allow people to book appoinments.
21. Case studies - Case studies are pages where you'll share examples of case studies.
22. Bio - This is where you share a short biography about you or your organization.
23. Splash page - A splash page in usually a replacent for your home page. It's designed to give your website a little more delight.
24. Menu - A menu page is for restaurants that want to share their menu items.
Hopefully you're beginning to think of which pages you need for your website. So lets talk a little bit about how the pages themselves should be layed out. In the case of WebStarts each page you create is going to consist of three sections. The top sections is called the header, the bottom is called the footer, and everything in between is called the body.
The content you'll place into each of these sections are refered to as design elements. These can be just about anything you've seen on the web like text, images, videos, forms, audio players, really anything.
Design elements placed in the header or footer of a page appear in the same place on each page of your website. So things you're likely to find in the header are your name, logo, and navigation menu. This is done to establish continuity for your site visitors, making it easy for them to navigate around your website and ensuring them they're still on your site when they move from page to page.
Now that we've covered the structure of your website lets talk more about the flow. Keeping your primary and secondary goals in mind try to begin to map out the paths you'd like your site visitors to follow.
Once again at this stage it helps to bring out a pen and paper. With pen in hand begin to draw a circle for each page you think you'd like to include on your website. Write within the circle both the name of the page and the goal you want to accomplish with that page. Once you've drawn enough circles to represent the pages of your site try to put them in the order you'd prefer a visitor see them.
At this stage it's likely there will be some dependencies. For instance if someone came to your website to get your address then of course that person would expect to see the contact page first. But for this exercise we're going to assume that your site vistiors are coming through the home page.
With the above exercies complete lets discuss the content you'll be including on the home page, the order you'll be displaying, and where it will be taking your visitors.
Since the home page is the first page people see when typing in your web address it's important the design elements at the top of the page reflect the thing you do. Studies show visitors will only give you around five seconds after a page loads to verify they came to the right place.
To ensure visitors they came to the right place I like to include a compelling headline across the top of the body of the home page. The headline should be bold, straight to the point, and re-enforce to the visitor they came to the right place. Just below the headline you can include smaller text with a subheadline if you feel like you need to provide a little more detail.
Below the headline I typically include a call to action. A call to action answers the questions "What do I do next?". If someone comes to your site, and is interested in what you're presenting they're going to wonder what to do next. Don't make it a mystery, tell them straight away what to do next. The answer by the way should be aligned with your primary goal. So if for exmaple they came to your online store to shop a big button that says "Shop Now" may be in order. If they came to your site to learn about something maybe a button that says "Learn More". It all depends on the goal of your website.
There are times where people are going to come to your website, they're going to see your headline, and your call to action but just want to get more information before clicking that button, giving you a call, or taking whatever action. For that reason I like to include a pointed summary of the features and benefits the person will get along with some other confidence builders like customer testimonials on my home page.
Since establishing credbility is a common goal for a website this is a good time to talk about using supporting pages like the "About Page" to accomplish just that. The supporting pages of your website liek the about page can be used to share things like founders stories, biographies, and inforamtion that helps build trust with your audience.
If you're able to get someone to click on your call to action think about the map you made earlier and where you'd like them to go after they've done that. If your main goal was to get someone to submit a form on your home page maybe you want to send them to a page that confirms someone will be getting back with them, or maybe you'd rather send them on to your store. Once again this all depends on the goals you've set and the order you want to acheive them as somoene moves about your website.
Like anything in life to become better you have to practice. So don't be afraid to jump in and start creating. If you make a mistake you can always turn back, as you follow the exercises I've laid out above you'll begin to think of new ideas. So much of how we learn is trial and error. Don't be afraid to take a shot. Finally if you're ready to begin go to WebStarts.com, sign up and create a free website, online store, or blog.