What type of website do you want?
If you’re not sure what features or functionality you need, and you’re not planning on developing it yourself, it’s a good idea to create a web design plan or work with someone who can help put one together for you. The web design plan will help you communicate with a developer or web designer what the vision is that you have for the website. The web design plan should show where the navigation, buttons, text, images, special functionality, call out boxes, etc. will be located on a webpage – and at different levels of the hierarchy. This plan should be created before work commences to ensure everyone agrees upon expectations and results. When done correctly, a web design plan will help you maintain a consistent look and feel across your website and help you determine where to add future content so long as basic principles are followed. If you have never designed a website from scratch, it’s helpful to think about one as if you were building a house.
Building a website is similar to building a house
- Your home page is the front door; the colors, images, navigation, and messaging you use is the first impression of who you are.
- You need a solid foundation with proper infrastructure – such as walls, plumbing, electricity, windows, and heating – similar to a website that requires basic features to work; link descriptions direct to relevant content, the navigation is intuitive, there are no error pages, and so on.
- Aesthetically, you want to be comfortable and enjoy the surroundings similar to a website where the colors should work well together, and the branding should be consistent. When you develop your website content, the important information is typically at the top of the page or “above the fold.”
- The layout should be functional and somewhat predictable. Bathrooms have sinks and toilets, the kitchen is near a table or area for eating, and there’s a sitting room that’s convenient to all; this is similar to a website’s navigation bar or file structure, which follows general principles. For example, “About us” or “Company” would provide company information and is easy to find.
- A blue print or architectural design is used to convey how your house should be built just as a wireframe and use cases are created to plan your website. A wireframe shows the navigation layout, company logo, placement of key information and images placed on a webpage before any actual coding takes place. As such, it helps organize content and shows areas that need further development – whether graphical or navigation elements, or additional content. If you choose to outsource the development of your site, a wireframe is a helpful aid for communicating your website vision to developers and designers; it can also speed your website’s roll out by aligning competing interests upfront and limiting programming changes later, which add to your development cost. With your wireframe in place, it’s time to create use cases that tell how your website will operate or be used, detailing features that programmers and users can test to verify objectives were obtained.
- Just as you would document load bearing walls, paint colors used, and other details to reference later about your home, you should do the same with decisions about your website. Develop a style guide to obtain a consistent look and feel. As you grow your business and website, you will likely find it very helpful.
- Once your house is built, you must maintain it. Just as a house requires fresh paint, plumbing to be fixed, and fire detector batteries to be changed, your website requires maintenance too – fresh content, new images, special features, and offers to entice visitors to keep coming back for more. Search engines and visitors like new content, so it’s good to plan a regular schedule of content updates.
- The costs for building a website is similar to building a house in that it depends on the size (number of pages), complexity of the architecture (features), and the time frame for building it. Depending on how crucial your website is to your business operations, costs for rolling out a website can range from being virtually free (if one’s time is not included and a freemium offering is used) to well over $50k if your site is e-commerce related, incorporates a social network, unique features, portal, extensive storage, special hosting, and/or requires paying multiple content managers, developers, and engineers to build and maintain the site.
Developing a web design plan
Set objectives for your website – i.e. education, lead generation, product delivery, hosting webinars, e-commerce, or other. See setting objectives for more information.
Look at multiple websites for ideas and inspiration. The websites don’t need to be related to your subject matter, but be sure you consider those that are so that your website doesn’t leave out key features appealing to your target customer profile. Take note of what you like such as color palettes, navigation elements, large background images, and whether you prefer single-page or multi-page site structures. With this list in hand, you will have a tool for communicating the features you would like to incorporate, helping web designers and other interested parties understand the project plan and scope.
Evaluate who your target audience is and how they will use the site – review your customer profile(s) for expectations on the type of content you’ll need. If you’re unsure, visit competitor websites and those offering substitutes to see what they have included or left out. Be sure to check their mobile sites and applications too. Your competitive advantage may be an important feature they neglected. You can also conduct focus group testing or ask prospects to answer a customer survey to learn more about their preferences. Also, don’t forget to consider accessibility issues for those with disabilities.
- Identify the type of information you’ll need to have and prioritize what would be nice to have. For instance, product/service information, company information, and where to buy your offering may be ‘must-haves,’ while a blog or success stories may be ‘nice to have’ once the rest of your site is built. With an understanding of the type of information needed, start drafting content for the highest priority pages or content areas.
- Create a high level navigation structure that is intuitive so that users can easily find information on your site. The navigation structure is similar to creating a report outline; it shows the topics and content areas.
- Develop a wireframe to visualize how your website will look and operate. Depict where the navigation will be placed – left column, across the top, right column, etc. – and whether there will be drop-down menus. Show where your company logo will be placed, key features, the main content area (center, left two columns, etc.), and any other aspect that tells how the user will interact with your site. As your website design takes shape, create a style guide to help maintain your website and ensure consistent branding to the market.
- Develop use cases for your website detailing how the site should function, operate or be used. These use cases will help you communicate with programmers and refine messaging to your users on the website capabilities.
- Identify key features needed at launch versus features that can be added later. For instance, is social media important to your audience or do you simply what to make your website and its content easily sharable? Do you want sales tools such as collateral or product demos available? Some features will be easy to implement while others will take more time to develop. Prioritizing needs will help you achieve the results you seek and help you, or your website developer, look for pre-exisitng widgets or tools that can be used to facilitate implementation.
- Follow basic principles of web design and layout and don’t forget to keep the site updated to encourage users to come back.
Define resources – people and money – required to build and maintain your website so that content is fresh and inviting. With an outline of requirements, identify who will:
- Design and build the site
- Provide content
- Ensure security is intact
- Test the site on various platforms and browsers
- Confirm performance is adequate
- Create a schedule of features and topics to introduce after the site’s initial launch
By planning ahead, you can forecast additional organization support needed and whether some tasks will be outsourced.
Be sure to follow any corporate web guidelines that may be available. You’ll want to make sure branding, features, technology, and layout are consistent and aligned to minimize headaches associated with incompatible technologies and ensure employees are making the most of their time.
Evaluate technology needs and options for the web design platform, web content management system, web analytics, device-friendly layouts (if important), social media management, performance management, e-commerce, and database tools (if needed). Your budget and objectives will determine your implementation. Don’t forget: You’ll want your website to be accessible and readable on multiple mobiles devices, so be sure to consider how mobile access impacts your development needs.
Assess whether partners or other channels are needed to help market your website and what support they will require. Depending upon your offering, these needs may be considered after launch.
- “CMS Comparison 2020: The Most Popular Open Source Systems.” 1 & 1 IONOS Inc.. Last modified November 29, 2019 . https://www.ionos.com/digitalguide/hosting/cms/cms-comparison-a-review-of-the-best-platforms/.
- Biddle, Toby. “User Testing for Web Accessibility.” Six Revisions. Last modified January 23, 2020. http://sixrevisions.com/usabilityaccessibility/user-testing-web-accessibility/#more-6817.
- Ellice. “How to Wireframe a Website (In 6 Steps).” DreamHost Inc. Last modified June 27, 2019. https://www.dreamhost.com/blog/how-to-wireframe-website/.
- “Five Tips for Writing Use Cases.” CastComplete. Accessed August 20, 2019. http://casecomplete.com/lessons/writing-use-cases.
- Gordiyenko, Svetlana. “Website Development Process: Full Guide in 7 Steps.” XB Software (blog). Last modified December 14, 2015. https://xbsoftware.com/blog/website-development-process-full-guide/.
- “How Much Does It REALLY Cost to Build a Website? (Expert Answer).” WPBeginner LLC. Last modified January 3, 2020. https://www.isitwp.com/how-much-does-it-cost-to-build-a-website-expert-answer/.
- Kucheriavy, Andrew. “How to Perform a SWOT Analysis for Your Website.” Intechnic (blog). Accessed on January 23, 2020. http://www.intechnic.com/blog/how-to-perform-a-swot-analysis-for-your-website/.
- Seigel, Ben. “A Comprehensive Website Planning Guide.” Smashing Media AG. Last modified June 9, 2011. http://www.smashingmagazine.com/2011/06/09/a-comprehensive-website-planning-guide/.
- Sitkins, Patrick. “5 Questions to Ask Before Doing a Website Redesign.” Business 2 Community. Last modified April 6, 2016. http://www.business2community.com/web-design/5-questions-ask-website-redesign-01502553#fYELIAA6OQ0XB0Q2.97/.
- Stover, Karri. “Single-Page Vs. Traditional Site Design: How Many Pages Does Your Website Need?” Business 2 Community. Last modified June 5, 2014. http://www.business2community.com/online-marketing/single-page-vs-traditional-site-design-many-pages-website-need-0904998.
- “User Experience Basics.” U.S. Department of Health and Human Services. Accessed May 8, 2020. http://www.usability.gov/what-and-why/user-experience.html.
- “Website Planning & Developing Your Website Blueprint.” 1stWebDesigner. Accessed May 8, 2020. http://1stwebdesigner.com/website-planning/#things-to-consider.