Great websites are not built on a notion. They are planned and then built ( and frequently updated ) .
sol this guide will help you set you up for success with your newly web site by giving you a hearty design to start with. You can give this to an external developer/agency or use it as an internal reference if your own team is working on it. Regardless of how you execute, web site plan will make everything better.
If you want a document to fill out and then present, we have downloadable Word and Google Docs files which include some great Creately templates .
Get the web site plan templates here ;
Download the Word Document Template
Download the Google Docs Template
phase 1 : Pre Website Planning
Determine Your Website Objectives
A unclutter business objective is the first dance step towards creating a successful web site .
Whether it is to generate more leads or sell your merchandise in foreign markets, once you know what you want to do with the web site, everything else – from the type of data you should add on your locate to its design – will be so much easier to decide .
indeed first of all, list down your objectives that will fit your overall marketing strategies and capabilities .
Analyze the Websites of Your Top Competitors and Market Trends
once launched, your web site won ’ metric ton be the only one out there selling or promoting the type of product you ’ ve got .
This is why you need to see what ’ mho already out there and compare them with what you have in heed .
- Look into the websites of your competitors and other industry websites as well. They will not only inspire you but will also give you an idea as to what you should and shouldn’t include on the website.
- Examine what trends are leading your market at the time. This will help you create a website that is both relevant and useful to your potential customers.
Use the follow take care map to organize the information you collect on the websites of your peak competitors and market trends. Share it with your team and get their input vitamin a well .
Bringing all this into a single beware map gives you the gamble to spot patterns and understand the outer space in a different smell .
phase 2 : information architecture and User Flows
Organize information with Information Architecture
This is where you consider what the user expects to see and the message you want users to associate with each incision of the web site .
information computer architecture helps you determine the serviceability of your web site design – or in other words, make common sense of how data on your locate is displayed and accessed .
Learn how to properly create an information architecture of your web site in six steps here .
Define Your Website ’ mho Structure Using a Site Map
In layman ’ sulfur terms website map is a tool for planning and designing websites. Visualizing your web site using a sitemap ( besides known as a locate architecture map ) is a decisive gradation because it helps in creating coherent seafaring paths for users to follow through the web site. With this framework in put, you can think logically understand and consider how your users will navigate through the site, then cut contented to them .
Sketch your sitemap
Use a sitemap drawing instrument or plain playpen and composition to sketch your sitemap out. Using standard sheets of newspaper may not be enough to accommodate all your design thoughts and ideas, so you have to preferably use more wallpaper or to keep it dim-witted, barely use a sitemap tool to get this speculate done. And keep the design layouts organized in folders online or on your local anesthetic harrow rather of wasting clock looking round for papers you know you have somewhere .
Use a clean layout
What is the best layout to illustrate your web site ’ randomness structure ? Start by drawing a page icon in the middle, this will represent the home page. From there, more page icons will branch out horizontally to indicate early pages within the web site. Within minutes, you will have the horizontal diagrammatic representation of the structure of your web site in the top-down structure .
Color to create a visual treat
Color up the shapes on your sitemap structure to produce odd levels of aesthetics delivering a unique ocular regale and bringing the entire sitemap to biography. You can give the home page one coloring material and each of the subsequent sections can be shaded differently to show the hierarchy of pages .
Each Web page in the sitemap is represented as a page icon. Navigation links ( connectors ) are used to connect the page icons to illustrate the relationships that exist between the pages. These connectors can be either neat, curved, or sharp-cornered. See the trope below to understand how each of these connection styles affects the overall look of the sitemap .
Suggest URLs for each page
The importance of a world wide web page ’ s URL structure is constantly a consider subject. SEO experts consider placing keywords in the URLs crucial. therefore, suggesting URLs in the page icons will help clients understand the mean URL social organization as a part of the interface.
You are decidedly glad that the framework is ready to be sent for review. But it ’ randomness always best to test the model by linking the individual page icon to the respective wireframes of mockups to show the node a clear view of the overall web design project. This will save a bunch of time and campaign and besides help your clients evaluate the functionality and consistency of the existing sitemap structure .
Use the following sitemap template to get started on yours .
Identify the Navigation Flow of Your Visitor
This is where you dig into the data ( that you found while creating the information architecture of your locate ) on information-seeking behavior of your hearing and try to uncover a pattern in it .
Using a flow chart, you can map and identify all the pages and touchpoints your ideal visitor would interact with when navigating through your web site. User run is how you figure out what you need to give ( in the form of phrases, paragraph or images ) to your visitor to keep them from bouncing off your web site .
Phase 3: Design Layouts and Site Infrastructure
Identify Key Colors, Elements and Styles with a Mood Board
A mood board can help you create a web site look that matches your brand personality which includes your mark voice and brand style .
A usual web site temper display panel should cover
- color palette
- photography or illustration style
- fonts/ typography
- use of space
- navigation style
If you are looking for bang-up web site design inspiration, checkout www.pages.xyz .
Arrange Page Elements with Wireframes
Wireframes help you define the hierarchy of contented on your design. By referring to the information architecture you created earlier, form the layout of the web site pages with the help of a wireframe .
Keep in take care how you want your locate visitors to process information when doing so .
It ’ south besides the first base dance step in figuring out how each foliate on the web site is linked to each other .
tip : originate with wireframes for smaller screens and start your way up. It ’ s the merely hassle-free way to create a reactive web site design .
Click on the template to edit it online
Finalize the Design with UI Mockups
UI mockups allow you to identify issues with your final invention before you launch the web site. With it, you can flesh out your wireframe and visualize the final consequence of typography, iconography, color themes, layouts and navigation .
Phase 4: Promotion and Marketing
Brainstorm Ideas for Promoting Your Site
once the web site is launched, you need to attract visitors to it. This is where web site promotion comes in and it involves many tasks like search engine optimization ( SEO ), social media market, targeted advertising etc .
Get your market team together and brainstorm different ways to marketplace and promote your new web site. A judgment function can help you organize all your ideas and come up with a proper market scheme .
Website Development Flowchart
Click on the template to edit flowchart online
Ready to Plan Your Website?
We ’ ve covered planning a web site in 8 easy steps under 4 unlike stages of web site plan. Use our web site planning template to get started right aside .
Would like to add something to our web site plan guide ? Let us know in the remark section below .
And if you are ready for the following stage of your market plan, here ’ s a handy guide to mobile app plan .
Want to increase dealings to your web site ? here are 7 comfortable steps to increase traffic to your web site .
Read more: 50 Free Web & Mobile UI Templates for Figma