- \n
- Put your main content front and center (for eCommerce sites, you\u2019ll show products; for blogs, you\u2019ll show blog posts; for a video site, you\u2019ll show videos)<\/li>\n
- Figure out your customer conversion funnel, meaning, how you make money from your visitors. If you rely on advertising, then properly interlink content, use sidebars, and other pop-ups to encourage users to visit as many pages on your site as possible. If your site is an eCommerce store, make sure you have important tools such as reviews, comparisons, search bars, well-defined categories etc.<\/li>\n
- It\u2019s important to carefully plan the website creation, given that, once a web page loads, users form an option in .05 seconds<\/a>. There\u2019s a short attention span, and your website has no second chance for a positive evaluation. The website message should be clear right off the bat, so take all the needed time to formulate it the right way.<\/li>\n
- Prepare the information structure of the website with the users in mind. Research has shown that 55% of consumers will pay more for a better customer experience<\/a>.<\/li>\n
- Thorough understanding of the audience and planning ahead ensure your website will be well rated by visitors. You should treat this point seriously, as 94% of negative site feedback is design related<\/a>.<\/li>\n<\/ul>\n
<\/p>\n
General Principles for a Website Outline<\/span><\/h2>\n
There are some basic steps you should follow in creating the website outline.
\nBasic steps to follow:<\/p>\n- \n
- Brainstorm ideas, and note them down.<\/li>\n<\/ul>\n
In the first phase of creating the website outline, we recommend you should gather as many ideas as possible. They\u2019ll be the material from which you can choose what\u2019s needed for the site outline and site-building.<\/p>\n
- \n
- Organize the ideas, grouping them into categories and subcategories<\/li>\n<\/ul>\n
The second step involves reviewing your ideas, selecting the valid ones and analyzing them. In this phase, you should also group them by categories and subcategories. Depending on the content you\u2019re supposed to generate from them, and the correlation between the items, you should have, at this stage, a logical approach for your website outline.<\/p>\n
- \n
- Create a website map<\/u><\/strong><\/li>\n<\/ul>\n
In the first steps of drawing your website outline, you should draft a sitemap. It refers to the website information architecture.
\nA sitemap shows how pages are organized in the website and on how many levels. As a best practice, you should try and restrict the number of page levels to 3. However, it\u2019s not a standard you should strictly follow, if your website content needs a more complex structure, go for it.<\/p>\nTemplatelab.com provides a diversified list of sitemaps<\/a><\/u> you can start from. You can choose one that suits your content, and replace the sections with your own.
\nFrom simple sitemaps to more elaborate ones, there are many structures you can use for inspiration in the creation of your website outline.<\/p>\nHere\u2019s one such sitemap:<\/u>
\n![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/11\/sitemap-min.png\")
<\/a>
\nA sitemap helps you give a definite structure to the website, and map everything out before proceeding to the actual creation of the website.
\nAlso, a sitemap ensures all parts of the structure reinforce the purpose of the website. This way, the website outline will be the sure path to building an effective website of your own.<\/p>\nBelow we give 2 examples of website outlines, as they might define websites for eCommerce and websites for consulting services.<\/p>\n
\u00a0Website Outline for Ecommerce \u2013 an example<\/strong><\/h4>\n
- \n
- Home Page<\/strong><\/li>\n
- Products List<\/strong>\n
- \n
- Product Categories<\/li>\n
- Products<\/li>\n
- Checkout pages<\/li>\n<\/ul>\n<\/li>\n
- Services<\/strong>\n
- \n
- Shipping<\/li>\n<\/ul>\n<\/li>\n
- About Us<\/strong><\/li>\n
- Contact<\/strong><\/li>\n
- Terms of service and privacy policy<\/li>\n<\/ul>\n
Website Outline for Consulting Services \u2013 an example<\/strong><\/h4>\n
- \n
- Home Page<\/strong><\/li>\n
- About Us<\/strong>\n
- \n
- Expertise<\/li>\n<\/ul>\n<\/li>\n
- Services<\/strong>\n
- \n
- Consulting<\/li>\n
- Idem<\/li>\n
- Idem<\/li>\n<\/ul>\n<\/li>\n
- Testimonials<\/strong><\/li>\n
- Contact<\/li>\n<\/ul>\n
<\/p>\n
- \n
- Think of and search for a layout<\/li>\n<\/ul>\n
Now it\u2019s time to think of a layout. A website layout is a pattern that defines the structure of a website<\/a><\/u>.
\nYou should have in mind the content you intend to put on your website. It\u2019ll help you better understand what layout you should be looking for. Also for this step, you should browse through different versions of website layouts, carefully examine them and decide what to put on a shortlist. Then, you\u2019ll have to test the shortlisted layouts, against your content structure.<\/p>\n- \n
- Overlap content structure onto the several layouts you\u2019ve chosen<\/li>\n<\/ul>\n
This stage is useful for testing the validity of the selected layouts. Overlap your content structure onto the several layouts you\u2019ve chosen, and see what works best for you. You can use techniques to cut, crop, resize, rearrange, to find the best fit. The techniques could apply to content structure and also be reflected in advanced functionalities for adjusting the layout.<\/p>\n
- \n
- Draft the first version of the website architecture<\/li>\n<\/ul>\n
Once the layout has been chosen, you can draft the first version of your website architecture. Also, you should pay attention to keeping it simple and easy to browse through. Your users should have clear navigation paths that reflect your message coherence.<\/p>\n
- \n
- Write down some notes on website branding and design<\/li>\n<\/ul>\n
Branding and design principles used for your website will much influence its effectiveness. And the earlier you think of these aspects, the better you\u2019ll build your website. You need to only have a record of the main branding and design schema at this stage to know what functionalities & resources you need for building the website.<\/p>\n
- \n
- Make a quick draft regarding specific branding and design elements<\/li>\n<\/ul>\n
You should think of elements such as colors, typography, content types (text, video, audio, etc.), design style (formal, friendly, etc.). All these are things that will enliven the website and give it the force of expression.<\/p>\n
<\/p>\n
Website Content Outline<\/h2>\n
A website content outline is more specific than a general website outline. It refers to mapping out content elements within a website page. It involves deciding if a call-to-action button should be placed in the menu, or a section on the company\u2019s mission should be part of the About Us page.
\nOnce the general frame of the website has been created, you can start developing it and adding details for each page.<\/p>\n- \n
- You need to think of a content outline from the perspective of your company\u2019s message. It has to be clear, and it has to follow the users\u2019 website surfing behavior.<\/li>\n
- You should base your content outline on data (data regarding warm and cold areas, heatmaps, clicks, events generation, page scrolling, etc.). In the absence of such data, you should base the content outline on your assumptions, provided you know well your audience.<\/li>\n
- You can test 2 or 3 variants of one page, to gather actionable data for the final version of the website.<\/li>\n<\/ol>\n
Repeat the process for every page included in the website sitemap, then analyze the website content outline as a whole. There might be tweaks and refines you should make, before starting to actually build the website.<\/p>\n
Some useful tips and tricks<\/h3>\n
Do not plan in much detail, as you might make changes on the go. Instead, leave room for unexpected inspiration and creativity, that will make the website shine. Keep in mind that the website outline is not equivalent to making the website, it\u2019s just a pre-design stage. It has the role of helping you follow certain directions, work on a plan and stay organized.
\nIf you find it useful, include timelines in your website outline. However, be careful to set realistic timelines, that will really help you in the website creation process.<\/p>\n
- Make a quick draft regarding specific branding and design elements<\/li>\n<\/ul>\n
- Write down some notes on website branding and design<\/li>\n<\/ul>\n
- Draft the first version of the website architecture<\/li>\n<\/ul>\n
- Overlap content structure onto the several layouts you\u2019ve chosen<\/li>\n<\/ul>\n
- Contact<\/li>\n<\/ul>\n
- About Us<\/strong>\n
- Contact<\/strong><\/li>\n
- Products List<\/strong>\n
- Home Page<\/strong><\/li>\n
- Create a website map<\/u><\/strong><\/li>\n<\/ul>\n
- Organize the ideas, grouping them into categories and subcategories<\/li>\n<\/ul>\n
- Prepare the information structure of the website with the users in mind. Research has shown that 55% of consumers will pay more for a better customer experience<\/a>.<\/li>\n