A Beginner’s Guide to Website Planning

When creating a business or personal project that you want on the web, Website Planning is the first step before actually building the site. To have a functioning, aesthetically pleasing website, you must define your brand the it’s persona.

There are many steps that go into creating brand identity for a small or medium sized business. So, let’s get started!

Finding Your Purpose

Different websites have different purposes- from driving sales to informing an audience, your websites purpose could be anywhere in between. So, the first step to Website Planning is finding out what that is for your site. If your brand sells merchandise, it may be sales; however, if it’s a non-profit, your website should focus on informing the public. The goal of your company may change, so allow it to grow and change over time!

Planning with a Point

Once you define the purpose of your website, the next step is to plan EVERYTHING. According to Smashing Magazine, “Planning for the web is just as important as everything else associated with their business.” Many websites struggle when they leave the entire website in the hands of IT when, in reality, the responsibility should land on marketing. If you don’t have a marketing team, hire one.

The Waterfall Method

If you struggle deciding what responsibilities to give each employee, try avoiding the waterfall method. The idea of this method is that the phases of development flow downward with through the stages of website creation. This would work great- if the world was perfect and nobody ever made a mistake. This method only works if everyone is completing their assigned tasks the right way without necessary change down the line.

The Agile Approach

Instead, you may consider the Agile Approach. This allows employees to:

  • Collaborate on projects
  • Ask individuals for assistance over tools
  • Value working software over comprehensive documentation
  • Respond to change within projects.

Before you use this method, be sure to talk it over with your team!

The Waterfall Method vs Agile Approach

The Need for a Needs Assessment

According to Smashing Magazine, “Twenty hours spent on a needs assessment can save forty hours of developing time during the building of the website.” Without a proper needs assessment, many things can happen, including backtracking on projects, designers making incorrect assumptions about the website, communicating too much for small tasks, and client dissatisfaction.

Let’s Get Started

The first step in creating a needs assessment is doing needs intake. This can include asking questions like:

  • What are the core values of the company?
  • What do you want the viewer to feel when they load your site?
  • Who is your brands competition?
  • What makes your brand special, compared to the competition?
  • Who is your target audience?

Brand Identity

All of these questions define the brand and what they stand for. Next, you must create brand identity. Creating brand identity allows customers to see a logo, certain colors, or an aesthetic and immediately know that it is connected to your brand. Contrarily to some business owners’ belief, logos and brand identity should be reinvented in order to stay relevant.

One easy way to decide on a brand identity is to create a persona. Building a persona is like building a model that is your desired target market for the website. You can ask questions like:

  • How old are they?
  • What are their interests?
  • What gender might they be?
  • Where do they work?
  • What might a day in their life look like?

Creating a persona for your brand to have a goal-directed design. According to Alan Cooper, “Goal-directed design combines new and old methodologies from ethnography, market research and strategic planning, among other fields, in a way to simultaneously address business needs, technological requirements (and limitations) and user goals.” This helps build empathy for consumers, develop a specific target market, communicate with that market effectively, and predict the actions of customers.

Once you have an ideal customer, you can create a brand identity they would identify with. This can be done by choosing colors, fonts, images, and a domain name (Hint: Mood boards are a great way to find inspiration!). Below you can see the difference between a brand with a distinct identity vs one that doesn’t stand out.

The Differences in Logos

Creating a Design Proposal

Now that you have a plan for the branding in place, it’s time to move to the actual website design. This will focus more on the structure of the design and how to find the right people to build it.

First, you must create a plan for the design. This can include a background of the company, a site map with organizational tabs, specific design process details, and a list of features that will be on the website.

Figuring Out the Finances

Designing a website is not cheap, if done properly. Not only do you have to think about initial expenses, such as software, hardware, and your employees, but also the web professionals you bring in to design the site. Most won’t give a price until they know details about what the website requires, but finding a similar website and it’s price is an easy way to guesstimate.

Something many people forget to factor in to the price is website maintenance. Smashing Magazine states that, “Remember that successful sites are not built and forgotten, but maintained and improved.” The average fee for yearly upkeep may be between $2,000- $5,000. HTML Basic Tutor stresses the importance of knowing what your company is capable on it’s own, then hiring outside work when necessary.

Finding the Best Web Designer for You

It can be tricky to find the perfect match for your website. Here are some Dos and Don’ts on finding the best person for the job:

Do

  • Ask for referrals
  • Consider their other projects
  • Meet them

Don’t

  • Take the cheapest option
  • Use your employee that has a different job title
  • Only hire designers that have created websites in your field

How Many People Does it Really Take?

It may come as a surprise to many business owners that building a website isn’t a one person process. In fact, Smashing Magazine recommends roughly eight job titles to make the website the most successful it can be. (NOTE: this is NOT the perfect list for every company. It will depend on the resources and talent of every employee on the project.) They are:

  • Internal Stakeholders: Employees that run the business
  • Content Strategist: Organizes and prioritizes content
  • Content Creators: Handles writing and other content
  • Copywriter: Makes writing more appropriate and engaging
  • Web Designer: Designs layout and chooses elements
  • Front End Coder: Creates codes given by the web designer
  • Back End Coder: Finalizes all codes

Choosing the Right CMS

Content Management Systems (CMS) is the software that allows you to control your websites content. This includes publishing, editing, and displaying your companies information. Choosing the right program can be difficult. Before you do, Smashing Magazine urges you to ask yourself these questions:

  • Is it widely used and supported?
  • Is it relatively stable? Are there known security or other stability issues?
  • Does the person or team developing in it have the necessary expertise?
  • Will it support the layout, features and functionality the site requires?

One key point to consider when choosing your CMS is that some companies create their own CMS. If the company were to go out of business, there is no way to support the software. This means there is no way to make improvements on the site. Because of this, many people chose the most popular software- WordPress; however, WordPress is not the right choice for all business.

Other factors that may influence your choice is the designer of the website. Many designers specialize in a few softwares and suggest you use one they’re familiar with. Your IT person may also want a say in what program you chose.

Creating the Best Content

If you’re creating a website that people will enjoy browsing, it will be multimodal, meaning it has text, photos, video, audio, and more.

Photography

The most eye catching feature on a website is the photographs. Hiring a quality photographer to create content for your website is one of the best investments you can make.

Writing

Reading on a screen can lead to serious screen fatigue, so keep things easy. Use a lot of bulleted lists, short sentences, and simple vocabulary. If you think your work is short enough, shorten it more. Detailed headings will guide your audience to the right part of your writing. You want to focus on the reader.

What are their needs, desires, and fears?

Organizing Your Site

Creating structure for your website can be scary! It’s broken down into 4 easy steps below!

1. Create a Site Map

Similar to a flowchart, a site map allows you to breakdown aspects of your website into difference categories. This will be how you divide tabs on the finalized site.

Creating a site map forces you to define what will be on your website and where it falls in relation to the other information. If your website has many different audiences, you will need to distinguish which information falls under each audience.

2. Separate Design from Content

Design is how the information is presented, whereas content is what is presented. Although these aspects go hand-in-hand, they must be separate for one reason: mobile devices. Mobile browsers and desktop browsers must be broken down with different layouts to advertise the most important information.

Mobile designs may showcase the content in a hamburger menu; however, the computer browser may feature a horizontal menu.

Content needs to be divided further and you may not have full control of how your content is shown. This is because websites may use meta data, the basic information associated with an article or site page (ex. author or publication date)

3. Integrate SEO

Search Engine Optimization (SEO) can increase the placement of your on a search engine (in simple terms: bump up your rating on Google). According to Smashing Magazine, the best way to optimize SEO is

  • Quality writing
  • Well-defined content, including proper use of header tags (h1, h2, etc.)
  • Good meta data
  • Logical URL structure

4. Create a Layout

Wireframe

A wireframe allows you to create a basic layout of what your website will look like. It allows you to focus solely on the structure before you add additional content. There are many great softwares to use, including Adobe Photoshop and Illustrator; however, you may skip this step. Instead, jump straight to a prototype that you can skip through.

Responsive Design

To summarize responsive design, each device creates a different experience. Responsive design allows content to change size and place on the website to create a smoother viewing experience.

As technology enhances, breakpoints will too. Breakpoints are the code that change how a site is viewed on a different sized screen. They will change the navigation and sizing on your site.

The most important aspect of responsive design is content first. Don’t allow the design to control your website; instead, make sure your website is content focused.

Responsive Design Example

Designing a website can be an overwhelming task, but these tips should make your overall experience a little bit easier. Good luck and Happy Creating!

This Post Has 16 Comments

  1. Rylee,
    I think that you did a really great job with this blog post. From the headings, to the bullet points, to the images, to the chronological sequences it was very easy to follow as a reader. If someone were to go into reading this blog having no prior experience with web design or reading our chapters, this blog would surely give them all of the information they need. I feel that you highlighted all of the necessary sections while keeping it concise enough to offer guidance without overbearing the reader with too much information. Nice job!

    1. Hey Rylee! I found your guide to planning a website very interesting! I like how you used the different headings as a sort of timeline or checklist for completing this project. I especially liked the section about brand identity. I am an advertising and public relations major so developing a company’s brand identity is something we often talk about in class. This reminds me of an article we read from Hubspot, “How to Develop a Unique (& Memorable) Brand Identity in 2020”. I think making the brand recognizable to consumers via the logo, brand colors, and overall aesthetic really helps when creating a website. Especially because a website should be an extension of the brand. In my AD&PR capstone project, my group is creating an advertising campaign for Bridge Street Market. One thing I am focusing on is how the website isn’t really an extension of the store. It has a completely different “feel” from the store! The website is a lot less organized and way darker than the store. It was interesting to learn more about brand identity in your post!

  2. Great job summarizing all the week’s information in this blog, Rylee! I thought the steps you outlined were logical and understandable for your audience (our class). Something I found particularly interesting is the amount of people it takes to create, design, and maintain an effective website. It puts into perspective how important all aspects of the site that we’ve been talking about in class are.
    I also liked how you referenced both the waterfall method and the agile approach—two things I had never heard of before reading this. I like how in the agile approach there is more opportunity for team members to collaborate and test their ideas before moving on to next steps. I researched more into this and found that some disadvantages of the agile method include: less concrete planning and deadlines, necessity for highly-skilled team members, large time commitment from team members, potential neglected documentation, and the final product being completely different than intended (from smartsheet.com). However, I still think the agile method’s benefits far outweigh that because of the team’s ability to collaborate and review their work more often. It’s probable that if the project turns out different than intended after all that collaboration, it most likely wasn’t a perfect idea in the first place.

  3. Rylee, I really liked your blog! Before I discuss content, I want to say that the layout was organized, methodical, and easy to digest! All things I expect as a reader! The use of header 2 size headings made it clear when we were being introduced to a new section. The hyperlinks made your information easily identifiable, too. The graphics you added aided the understanding of the content instead of distracting or confusing the reader. I can tell you put a lot of thought into the structure of your post. The content had a solid foundation of what we learned in class, but then taught me may new things! The planning methods (waterfall and agile) were something I have never heard of before. I would love to implement them into my own projects and see which I prefer. You also went in depth about my favorite section…brand identity! The bullet points were the perfect way to quickly deliver the questions we ask when building a persona. After reading, I found myself visiting Smashing Magazine to learn a little more about what I learned from your blog. That’s entirely the point of writing these blogs. If you can inspire someone to take up your call-to-action (building their own site or learning more about doing so), your post has served it’s purpose! Good job!

  4. Rylee, I really enjoyed everything about your blog post this week, especially the layout and content organization! Summarizing a lot of information can get overwhelming, but you broke up the information and incorporated different elements very well. You used plenty of diagrams and charts without overusing them. Also, the images used supplement the content, instead of replacing the text or being unnecessarily redundant! Your use of ordered and unordered lists help break up the paragraphs well, too. I found it easily readable and following the content from start to finish was effortless. On the surface, it seems like website planning would be the simplest aspect of building a website, but it turns out it’s really not! You did a great job including just how much effort and how many people it takes to make a successful website plan.

  5. Hi Rylee! I really enjoyed reading your blog post for this week! The content is very well organized and easy to read through. The images you chose to include are helpful in supporting the content of the article and are spaced out well. I like the interactivity of your blog post, too; your use of questions throughout prompts thinking as well as makes us stop and consider the important factors that go into building a website. I found it really interesting to see the complexities that go into creating a site! The Agile Approach in particular was a new idea for me. I like how it creates multiple loops that imply constant progression and improvement rather than the “one and done” mentality of the Waterfall Method. I also liked your four-point summary of organizing a website, especially the second step, Separate Design from Content. While it may make sense to consider these two factors in tandem, the mobile audience must also be considered, making it crucial to separate the two factors. I think it’s interesting to see how much mobile devices have shaped website design in recent years. I looked a bit further into the Needs Assessment as outlined by NC State University: initiation, data collection and analysis, and final production. I found the second step to be particularly interesting. It discussed conducting PEST (political, economic, social, technological) and SWOT (strengths, weaknesses, opportunities, threats) analyses. The PEST analysis examines macro-level factors, while the SWOT analysis looks internally.

  6. Hey Rylee! You did really good on the first blog post! It is organized very well and it has lots of effective information. Using the pictures helped make the blog easier to understand and assisted with the topic. I am planning on starting a business within the next few months and after ready your blog, it got me thinking about what design I would want for my site. You blog helped me think about the questions I need to ask myself and where to start. I especially appreciate your section of the blog that tell who does what job in creating the website (Copywriter, content strategist, etc) and it got me thinking about the different jobs that have to be split up between my and my partners. Again, great blog!

  7. Rylee,
    Thank you for your amazing blog post this week!! The layout, the diagrams, and the lists made this post extremely enjoyable to read, while also making it easy to comprehend. You did an amazing job summarizing all the information, which was very helpful because we learned a lot of information about the beginnings of creating a website throughout the week. I found it very helpful that you included information that we have not learned about yet, such as sitemaps and wire frames, which I remember from CIS 238, but it is always good to have a refresher. I also learned some new information from your post, such as all the job titles needed in order to create a successful website and how much it costs to maintain a website. I never realized how expensive it was. For anyone else that is interested in the content creation side of website building, I found a great source, https://www.conductor.com/learning-center/content-creation/, that describes what the content creator does for/contributes to the website planning process as well as their role in the creation of a website. I read through the source you included, Smashing Magazine, and I found it to be really informative. I enjoyed the comparison the author made in the source between building a deck and creating a website because it allowed me to imagine what would happen to a website if there was no planning behind it.

  8. Rylee,
    I think this was a great first blog post. The content within the post is well organized and presented clearly. I found that including the images sprinkled throughout the post helped maintain further interest and give a slight break from reading. I also think the way you’ve handled lists was extremely effective, including bulleted lists within numbered lists, as well as on their own, to allow readers an opportunity to really navigate the processes involved in creating a website. I found it interesting that there were so many job titles involved in the creation and maintenance of a site. I think the responsive design image was extremely helpful, although the text regarding the pixel size is a bit difficult to read. I don’t know if there was any way to get around that issue or not. Links were easy to recognize and descriptive, which is helpful not only for accessibility for those with disabilities, but also for every user who’s potentially weary on clicking links. Outlining what they’re linking to could help negate that feeling.

    Good Job.

  9. Rylee,

    Let me start off by saying that you did a great job. You included the right amount of details in your blog post. As I was reading it I didn’t get overwhelmed, but I still received most needed information. I am a bit novice when it comes to designing websites and this post helped me a lot. It also, helped me realized things that I never thought about. Like you mentioned in the Figuring Out the Finances section “Something many people forget to factor in to the price is website maintenance.” This is something that I forgot about, but it makes since to factor in maintenance.

    The layout of your blog post flows well. It keeps the conversation going. I had a question that would pop in my mind and your post answered it. I like that your post is not all text, you included images that help give readers a mental break and that was relevant to the information provided. You included clear and concise headings with different sections this let readers “grab and go” and keeps the readers engaged.

    Great job!

  10. Hi Rylee! Your design and content for this blog post was very well done! The way you organized your information gave it a strong readability and I found myself engaged while reading due to the way you sectioned the text with headings, lists, and figures. I believe the information you provided from your sources was presented in a way that would really put into perspective for our class how much planning and effort goes into website design before the designing even begins! Creating a needs assessment seemed exceptionally important, I appreciated how your blog post had the questions that one should ask about the needs of a company and the website’s users. I found another source with similar information about website planning at https://www.hostgator.com/blog/9-practical-steps-planning-website/. It reiterates the importance, and explains what factors should be taken into account for a content strategy. I find this information very interesting and helpful because sometimes the first instinct is to start creating a website, but the information in all these articles show how crucial it is to do the work that comes before in order to have a successful website in the end. You did a great job showing that in your blog post!

  11. Rylee,

    Wow! What a great blog post. I think you’ve done an excellent job being the first one to set a perfect example of blog posts for the future. It was incredibly easy to read through and navigate, and your usage of varying headers, colors, photos, and links (among other things) all worked together very effectively to display all of this content in a palatable way. As someone who is far from an experienced web designer/developer, it was really helpful for me to read your blog this week. I’ve never considered the actual overarching process of creating a website, and your post has helped me understand and explore that more. I had no idea going into this that there were multiple specific approaches such as the waterfall and agile methods you mentioned. Reading the beginning of your post discussing finding purpose and needs assessments, I wondered if this process would be any different between an individual(s) that already has an established business and is only creating a site for it, compared to an individual that is starting their business with their site? Additionally, what stood out as interesting to me was both the amount of money that it takes to maintain a website as well as all the different roles required in the creation process. I really enjoyed your 4-step breakdown at the end of your post, and it feels like a good, simple way to get started without getting overwhelmed. Using your 4 steps in tandem with the 6 steps needed for a successful homepage in chapter 2 will make for great resources going forward.
    Thank you for writing!

  12. This is an amazing blog post! I have thought of creating a site for a project I want to start in a few years and this have given me all the information I could possibly need to start. I really enjoyed the fact that you integrated more than one way to approach the creation of a site, especially when working with a team of others. It’s important to get everyone’s input as well as understand the work and effort that goes into website building. The mention of creating the site with others involved made me happy because under the DONTS, was saying to not put someone else in charge of something they aren’t familiar with. This happens very frequently and I would hope that many would know that this is not a proper way to work on a site; it may end in disappointment and overall frustration. I also love the added in part about asking a web designer about previous projects. It’s important consider past work and how they can integrate that work into your potential site. Overall, this was very well done!

  13. Hello Rylee,

    This is an amazing blog post, especially for the first one! I loved your use of headings and lists to organize the content neatly, the post appeared extremely organized and very easy to follow, which is important to being user friendly! I also really appreciate the images that you used. They were very simple but connected perfectly and enhanced the point that you were trying to make in each segment. I know that I that personally I was concerned with finding appropriate images to include with my blog post, but you’ve set a great example for me to follow! I especially liked how you included alternative texts with the image, this helps people with disabilities navigate the post. Overall, great job!

  14. I find the differences between the Waterfall Method and the Agile Approach very interesting. I also find this information valuable to me because I am such a planner, almost to a fault. I also see the value in analyzing how an organization organizes. The waterfall method almost mimics a top-down management approach, which we see rarely succeeds. The Agile approach seems more realistic and leaving lesser room for human error. Surprising, thought, that the Agile approach is an approach to organizing a website while the approach’s website is not up to design principal standards. This article explains the details of the Agile Approach and how it does not negate the necessity for managers. Instead, it highlights how people work together when being lead by a manager.

Leave a Reply

Close Menu