Websites (at least ones that are effective) require careful planning. What will the menu include? What content will make the final cut? Which images should be chosen?
All that and more is discussed in the planning stages of a website. That’s why it’s so handy that Ben Siegel, an owner of a branding and web design firm, created a website planning guide!
“Planning for the web is just as important as planning for anything else associated with their business.”– Ben Seigel with Smashing Magazine
As the quote above stated, planning for a website is just as important as planning for anything else. Having a solid plan in place for your website will allow for a clear understanding of your website’s purpose. By taking into consideration the goal and purpose of your website, users will be able to easily navigate through the website. A website is sometimes the first interaction a user has with the company, so planning out carefully the website ensures it will be well organized and give a good first impression.
A common misconception of website planning is that it is an IT department’s responsibility, when in fact it’s the marketing department who should have the final say. After all, a website is a marketing opportunity to convince users to buy your product, read your information, etc.
What is a Needs Assessment?
Oftentimes, organizations will decide to contract out for their website planning. A needs assessment is a great tool to get both the designer and the organization on the same page. By taking the time to create a needs assessment at the beginning of the project avoids headaches down the road because costs, expectations, and deadlines are all agreed upon. It is important to be flexible as a website is not static and to keep the organization’s audience in mind at all times.
Parts of a Needs Assessment:
Again, a website is a marketing opportunity. By gathering all marketing information (branding, logos, color schemes, etc), the website will remain uniform with the organization’s existing brand.
Now a needs assessment relies on marketing already existing materials and branding. What do you do if the organization doesn’t have any branding?
A brand is a visual representation of the business and is an opportunity to be creative and allow the business to stand out among competition. It’s important for an organization to have a brand as it offers a sense of professionalism and creates a more authentic persona for the organization.
According to Marketing91, there are many key elements of a brand Including:
- Professional Logo
- Color Palette
- Theme line/motto
- Shape (like a Coca Cola bottle)
- Sounds (like McDonald’s jingle)
All of these contribute to a website’s marketability that appeals to a user and keeps them scrolling on their site.
Cost and Timeline
It is estimated that a needs assessment will cost around 5 to 15 percent of the total budget and take up around 10 to 30 percent of the allotted time. Remember, a great needs assessment will speed up the process later on.
This is the initial meeting with website developers and the higher ups in an organization. This is the chance for expectations to be set and questions to be answered. Topics could include:
- Target audience
- Mission Statement
- Perception of Organization
- Most Important Message
It’s important to take notes during this meeting to remember what the organization is looking for in their website and what their priorities are. If allowed, a follow-up meeting is recommended to dive even deeper into the topics listed above.
“Twenty hours spent on a needs assessment can easily save forty hours of development time during the building of the site.”Ben Seigel with Smashing Magazine
How to Write a Proposal
After the needs assessment is complete, a proposal is created for the organization to approve that details the plan for the website.
Elements of a Proposal:
- Background of the organization and their problems with their website
- Site map of pages
- Outline of Design Process and Deliverables
- List of Site Components (ex: contact form, blog)
- Terms and Legal Use
- Costs (software, services rendered, and hardware)
The proposal will also have key milestones for the project to keep everyone on track. For example, a proposal could be broken down into days or weeks with each marker having an element of the project due.
How to Choose Professionals
- Referrals: Referrals are always a great place to start because other business owners could provide recommendations based on their experiences. A word of caution though: even if someone is highly recommended they might not be the perfect candidate for every business. Someone who did an amazing job creating brochures for a lawn care business may not be the right person to create a website for a museum.
- Past Projects: When choosing a professional, looking at their portfolio can give amazing insight into the quality of work they produce. If possible, contact the professional for more information on the needs assessment, design process, etc to give a better clue as to how they operate.
- Meetings: When it gets down to the final contenders, it’s helpful to meet in-person or virtually to have an in-depth discussion of the project. Most are willing to meet for an hour to go over expectations, why they are the perfect candidate, and answer any questions.
Roles and Their Tasks:
Once a professional is chosen, the team for the website is assembled. A lot of people are involved in the planning process, so it’s important to understand the key players and their tasks.
Depending on the company, this can be one person or a small group. They represent the best interests of the company.
This is the leader who makes decisions regarding timelines, budgets, etc. This person should be familiar with the web development process. Project managers require many leadership skills that are valuable regardless of the project, which is why there is a dedicated institute to creating more project managers.
They are the go-to person for all things content and structure. In smaller projects, this role may fall under the project manager.
At a minimum, there should be one person dedicated to writing the content. It is recommended though to split this role among others to balance the workload.
An often overlooked role, this person is responsible for editing the content to be more engaging to the audience. Because website writing is geared toward SEO, it’s important that the content of the website is relevant. Hence the importance of a copywriter/editor.
This role is dedicated to the appearance of the website but also the functionality. The web designer will create all elements for the page, including typography, style, layout of photos, etc. They will complete these tasks with the user’s experience in mind.
Front End Coder:
Back End Coder (CMS):
CMS stands for Content Management System, which assembles all parts of a website into a usable format. According to Seigel, “The CMS developer will integrate the code and assets created by the front-end coder into the CMS, stitching the visible bits, called the markup, to the invisible bits and creating the site itself. The CMS developer also deals with the database that holds your content and the server on which the site lives.” There are so many CMSs out there that it’s important the back end coder is familiar with many and can pick the best one.
Creating the Content
Once the roles are assigned and the project guidelines are decided upon, it’s time to dive into the actual content. Content includes more than just text. It can be:
Special attention is paid to both the photography included in the website as well as the written content.
Perhaps one of the most important components of a website are its visuals. A good photo can elevate a website, so it’s paramount that photography is paid special attention. It’s often recommended to hire a professional, but oftentimes photographers can be found for cheaper at a local college or art center.
The website Medium, offers many examples of good vs. bad photography. Down below is one such example. The bad photo shows how just angling the photo offers a different perspective. In the second photo, the beautiful nature takes the center focus and offers a clearer image.
Besides visuals, the written text of a website is also important. According to Usability.gov, users skim information so it’s important to have information labeled clearly for users.
Some tips about Web Writing are:
- Use the words your user would
- Chunk your content together
- Write in active voice
- Use clear headlines and subheadings
- Utilize white space
After utilizing these tips, the article suggests to use Microsoft Word’s Readability Statistics feature in order to test how well the website is performing for users.
A site map is beneficial as it acts as a roadmap for all of the pages located on one website. Google offers an explanation of what a sitemap is by stating, “A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to crawl your site more efficiently”(Google).
A sitemap is necessary if the website is:
- really large
- posts aren’t properly linked
- includes multiple forms of media (videos, images, documents)
- has external links and is a newer site
A sitemap may not be necessary if the website is:
- small (less than 500 pages)
- internally linked correctly
- not many media files
Now, the website is built and the content and design plans are organized. What about other display methods? Segiel explains, “Responsive Web Design is an approach to presenting content and design that allows text, images, video and other elements to change in size, appearance and layout according to the capabilities of the device on which they’re viewed.”
There are several considerations when designing responsive content, including:
These are predetermined points that adjust the screen to fit better in the format. If you make a tab smaller, you may notice the elements of the page shift as the window gets smaller and smaller. These are breakpoints. The standard breakpoints are:
- “Big Screen”: 1100 pixels wide or wider
- Tablet: between 400 and 1100 pixels wide
- Smartphone: between 320 and 400 pixels wide
Next, the navigation of the site must be re-evaluated. For websites, it’s common to have tabs at the top of the page. For mobile devices, these tabs will turn into a menu button in order to minimize the screen space tabs would take up.
Even the sizing of fonts must be altered for different formats. Instead of having the text be 12 pt font in each format, the font must change depending on the size of the screen. This is determined by the breakpoints previously mentioned.
We’ve already discussed the importance of images when creating an effective and engaging website. An image might look amazing on a laptop, but the same image may not appear as well on a mobile device. There are two ways to fix this.
- Scale down to the width of the screen
- Provide an alternative image that won’t take up as much space
It’s preferable to include an alternative image because it won’t take as long to load and would convey the same meaning.
It’s clear there are many considerations when creating a new website. The good news is that there are predetermined steps that streamline the process. By replicating the process in this post, there is a clear road map to creating an effective website for a target audience.
Assistant Secretary for Public Affairs. “Writing for the Web.” Usability.gov, Department of Health and Human Services, 7 Dec. 2016, https://www.usability.gov/how-to-and-tools/methods/writing-for-the-web.html.
Bhasin, Hitesh, et al. “What Are Brand Elements? 10 Different Types of Brand Elements.” Marketing91, 17 Dec. 2019, https://www.marketing91.com/brand-elements/.
Caroll, Linda. “Good and Bad Photos of the Most Beautiful Places in the World.” Medium, Xo Linda, 13 Feb. 2017, https://medium.com/linda-caroll/good-and-bad-photos-of-the-most-beautiful-places-in-the-world-f4af03fb95c0.
Google. “Learn About Sitemaps.” Google, https://developers.google.com/search/docs/advanced/sitemaps/overview.
Seigel, Ben. “A Comprehensive Website Planning Guide (Part 1).” Smashing Magazine, 20 Feb. 2018, https://www.smashingmagazine.com/2018/02/comprehensive-website-planning-guide-part1/.
Seigel, Ben. “A Comprehensive Website Planning Guide (Part 2).” Smashing Magazine, 26 Feb. 2018, https://www.smashingmagazine.com/2018/02/comprehensive-website-planning-guide-part2/.
“Who Are Project Managers | PMI.” PMI, https://www.pmi.org/about/learn-about-pmi/who-are-project-managers.