Week 7: Website Planning Guide

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

Why Plan?  

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:

Marketing

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. 

Branding

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)
  • Graphics
  • Sounds (like McDonald’s jingle)
  • Movement

All of these contribute to a website’s marketability that appeals to a user and keeps them scrolling on their site.

Elements of a Brand

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. 

Intake Meeting

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 
  • Competition 
  • 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

  1. 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. 
  2. 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. 
  3. 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. 

Internal Stakeholders:

Depending on the company, this can be one person or a small group. They represent the best interests of the company.

Project Manager:

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.

Content Strategist:

They are the go-to person for all things content and structure. In smaller projects, this role may fall under the project manager. 

Content Creator:

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. 

Copywriter/editor:

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. 

Web Designer:

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:

This role involves converting images and visuals into HTML, CSS, or JavaScript. This is done so Google and other search engines can interact better with the site.

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: 

  • Photos
  • Videos
  • Interviews
  • Audio
  • Documents

Special attention is paid to both the photography included in the website as well as the written content.

Photography

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.

Bad Photography from Medium
Good Photography from Medium

Writing

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.

Sitemaps

Sitemap

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

Responsive Content

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:

  • Breakpoints
  • Navigation
  • Sizing
  • Images

Breakpoints

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
Example of a full screen version

Example of a minimized window

Navigation

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.

Sizing

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. 

Images

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.

  1. Scale down to the width of the screen 
  2. 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. 

Sources

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. 


This Post Has 8 Comments

  1. Hi Kylie! I think you did a great job on your blog post. The organization of everything is super helpful, especially for grab-and-go information. You have a strong start about why it’s important to plan for the website and continue with many solid points on how to do so. One of the topics I found super interesting is “How to Choose Professionals.” I didn’t realize the amount of people that go into making a website. You did a good job of explaining their roles and their importance. I looked into how to write a proposal a little more, since you didn’t have much about it. This website, https://www.bidsketch.com/proposals/web-design-proposal-template/ , has a good example of “What you need to know about website proposals (and why this proposal template works). I think it could be helpful for anyone looking to make a proposal for their site. Overall, I think you did a great job on the blog and it will definitely be helpful to our class.

  2. Hi, Kylie! Something that I found interesting within this post was the explanation of a Needs Assessment. This explained an assessment of what content is needed for the website so the designer and organization are on the same page. The thing that I found really interesting about this was that it has a lot to do with marketing and branding. This ranges from making sure the website has the correct logos to their mission statement being clear and concise. The explanation of these needs made me think of SEO, which would be needed for a brand’s website as well. This was briefly mentioned within your blog post, but this article (https://moz.com/learn/seo/what-is-seo ) goes into detail about what SEO is, why it’s important, and how it works for websites! Using SEO is something that’s important to consider when planning a website because it works to make sure that your website is staying relevant to users and is actually showing up in search results! This will improve the traffic to the website overall, which is why it’s so important to think about when planning a website. Great blog post!!

  3. Kylie, awesome job doing the blog post this week! I especially love your cohesive use of headings, including the unique banner dividers, as well as coherent placement of the imaging and bullet lists. It’s quite enlightening to read about how intricate every step in creating the right professional team and strategic plan to move forward can be. Nonetheless, the aspect of your blog that really got me thinking was the written content for a website. I like how you established that the writing portion of creating a website is just as important as incorporating the right photography. In another blog I found, https://blog.alexa.com/the-complete-guide-how-to-write-content-for-a-website/, it gives a lists of steps you can use as a reference in creating the right content for a website. Two major concepts that stuck with me in this blog were being mindful of your audience and researching competitors.

    In terms of audience, understanding the knowledge your target audience has is important. You don’t want to throw advance terminology regarding the breakdown of a plant to someone who only learned about it in high school. In regard to competition, we all know it’s an insanely competitive market we live in, regardless of your website’s focus. Seeing how your major competitors maintain and adapt to the ever changing internet is essential if you want your website to survive, and even thrive. Overall, great work!

  4. Hi Kylie! I thought your blog post was awesome! It was very informative and brought to light things I’ve never even thought about in web design. I thought it was cool that in the section where you talked about collaboration with a professional, you also included tips on how to find someone who will do a good job. Additionally, you go really in-depth about the team composition and what each person’s roles look like. I thought this was interesting as we get to see a bit of what goes on behind the scenes and the part each person plays in making this process happen. I found this site (https://webstyleguide.com/wsg3/1-process/2-development-team.html) that delves even deeper into each of these team roles you talked about and how they contribute to the website planning process. I think this is a super helpful resource for people going into the field so they can get a feel for the kinds of people they’ll be working with further down the line. It also allows you to gain a deeper understanding of the industry and how all these different fields mesh together to create one project. This topic is super cool and there’s a lot that goes into it, but you did a great job of summarizing and providing tons of useful information!

  5. Hi Kylie, I really enjoyed your blog post. I think you summarized the content the readings very well. I felt very informed after reading your post. I especially enjoyed the responsive design section, because we have learned about that in class, but I feel like I now know so much more! I think that continuing to bring in Ben Siegals article in Smashing Magazine was really helpful for the reader in bringing it full circle. Your description of roles in projects is very thorough and will help people to assign the right roles to their employees. One article I found that could go along with website planning, is https://www.digitalsilk.com/website-planning
    This article covers a lot of the same things you cover. I thought the opening sentence with the statistic of “88% of website users won’t come back after a bad experience” is very strong. I almost wonder if you added some statistics in your opening section or somewhere it fits, if your sections would be even more compelling to your audience!

  6. Hi Kylie! Your blog post is well-structured, readable, and user-friendly. Great job! I agree that planning a website allows for a clear understanding of the website’s purpose. I also think the designing process is easier and more organized once you have all the information required to make the site! I am interested in the use of sitemaps and found a blog post that explains how to find the sitemap for your website, but I also believe it can be used to find the sitemaps of other websites as well. It states that finding a sitemap may help you to see other competing websites’ structuring of their sitemaps as well as getting a list of all pages on a website. (https://www.seerinteractive.com/blog/how-to-find-your-sitemap/) I think creating a sitemap has the potential to be extremely beneficial to the organization and planning/editing of a website as well, which you also touched on.

  7. Hi Kylie, I thought this was a fantastic blog post! Website planning is a multifaceted process, and you did a fantastic job breaking it down into “chunks” that really helped me understand the planning process. I especially appreciated when you pivoted towards ‘choosing professionals’ because it really made me think of website planning in the context of a teamwork effort. You mentioned how copywriting/editing is influenced by SEO and done with consideration, which got me thinking: how does SEO copywriting differ from traditional copywriting? I found this article: https://backlinko.com/seo-copywriting that went through how a company can slowly dominate its niche through strategic SEO copywriting. While the article discusses the importance of keyword relevance, it suggests a deeper link between SEO copywriting and rankability – a helpful structure that delivers content in a shorter time, but that leads a user to “linger” on the page and read several times. I thought these considerations were interesting because they could be included in the elements of a brand – a small set of target keywords and a familiar structure that is designed and optimized for a niche. Consistent SEO copy standards could also aid in collaboration between the team of content creators, web designers, and copywriters – so everyone is working towards the same goal. Again, I really appreciated your post!

  8. Hi Kylie! I really enjoyed how you structured your blog! The rectangular pink headings were definitely eye catching! One section of your blog I particularly liked and enjoyed to read was the content creation part. As a small business owner this is one part I struggle on my site. Creating content and make it look professional and stand out. I really liked how you structured it under this heading, with bullet points and sub headings. There is so much that goes into content for sites (or even social medias for that matter) that you don’t think about before you do it. One website that I have referred to for content creation is https://www.wix.com/blog/2019/12/writing-website-content/. I really like how they structured this site and went into great detail about each of their bullet points, like you did! Again, thank you so much for this information Kylie! I really enjoyed reading it!

Leave a Reply

Close Menu