The first thing to keep in mind about a great design is that there must be an overarching strategy. While focusing on technical matters such as coding, content management, and visuals is important--having an overarching strategy is key. Great websites aren’t great because they look good. They’re great because they attract visitors and help those visitors understand and then interact with a company, product, person, team--or anything for that matter. Therefore, every element of your website needs to work alongside an overarching strategy which is in place to accomplish your website’s  defined goal.

So, you must be asking: Where do I start? How do I make a website that has an overarching strategy? And how do I make sure that the website I created will accomplish my goals?

Well, you’re in the right place…

Just follow these 7 simple steps and you’ll be off and running:

1. Identifying your goal: What is your website’s purpose? What do you want to accomplish? Do you want to sell a product, advertise a service, or something else?
2. Setting Objectives: One we know your website’s goals, we can delve more into the specifics of the website: How much information do you want to convey? What design features will you need?
3. Sitemap and wireframe creation: With your objectives in place, we can start creating some outlines. Where do you we want your information to go? What should a visitor see first? What’s important, and what information do you need a visitor to understand?
4. Content creation: Now that we have an outline, we can start creating content for the individual website pages. In this step we’d use search engine optimization to make sure pages are focused on a single topic, to both avoid visitor confusion and boost SEO ratings.
5. Visual elements: After content creation, we can start working on your “brand’s” visuals. Depending on the client, this could be an already time and tested look, or we could be building a brand visually from the ground up. Nonetheless, all visuals are put in place to complete objectives and succeed in accomplishing your website’s goal.
6. Testing: By now, the website should be working. But we’ve got to test it first. By combining manual browsing of the site on a variety of devices with automated site crawlers to identify everything from user experience issues to simple broken links and other bugs, we can make sure visitors will have an easy experience on your website.
7. Let’s launch it! Once we ensure everything is working great, it's time to plan and then execute your site’s launch. But sometimes you might not want to make it live on the spot. When will you launch? And how will you let the world know? Are questions to ask if you want people to be both excited and ready for interacting with your website.

Now that you have a broad idea of the the whole process, let’s look at each step again individually.

1. Identifying your goal.

In this initial stage, the designer needs to understand the website’s goal. They need to know how to help their client, and what their client wants to get out of the website. If, for example, a designer is designing a website for a specialty cookie company, below are some questions too keep in mind.

Who is the site for? In this case, the website would be for visitors who want to learn more about the cookie company, who want to view the cookies, or who want to purchase the cookies.

Also, in the cookie business there are plenty of competitors, so a designer should find out whether or not their client wants their website to look like their competitors. In other words, does your client want to do something different with their website, or do they want to be more traditional?

Below are some other questions to keep in mind as well…

• Is this website’s primary aim to inform, to sell, or to amuse?
• Does the website need to clearly convey a brand’s core message, or is it part of a wider branding strategy with its own unique focus?
• What competitor sites, if any, exist, and how should this site be inspired by/different than, those competitors?

In the end, if a clear goal isn’t defined then a website has no purpose. What would end up happening is there would be an outline, content, and visuals, sure, but they’d lead nowhere.

2. Setting Objectives

One of the most common traps of web design is having too many objectives to accomplish. If a client sets out with one goal in mind, but that goal gradually expands during the design process, you could be overwhelmed with work and your client could end up with a website that is over overwhelmed with content, which isn’t enjoyable for viewers. To make sure your client isn’t overwhelming you with objectives, set only one main goal and do only the web design objectives that would end up benefiting that main goal.

Also, time-wise, if too many objectives are put in place, the time it takes to design a website could add up. By using systems like Gantt charts and other project schedules, designers and their clients operate at a level of transparency and honest. So if a client wants a lot of objectives (some of which might not benefit their goal), help them out by all means. Just make sure you get paid for doing so.

3. Sitemap and wireframe creation

The sitemap is the foundation for any well-designed website. It helps give designers a clear idea of the website’s information architecture and explains the relationships between the various pages and content elements. The next step of design is to build the wireframe. Wireframes provide a framework for storing the site’s visual design and content elements, and can help identify potential challenges in design.

Although wireframes don’t contain any final design elements, they act as blueprint guides for how the site will ultimately look. It doesn’t matter what you wireframe with, whether it be tools like Balsamiq or Webflow, or paper and pencil. Just make sure to wireframe.

Some tools for site mapping and wireframing:

• Pen/pencil and paper
• Balsamiq
• Moqups
• Sketch
• Axure
• Webflow
• Slickplan
• Writemaps
• Mindnode

4. Content creation

Written content is one of the most important pieces of web design. It’s how you give information to your visitors. There are two purposes of content.

Purpose ONE: Content engages visitors and gets them to act (for example, copy that says, “Buy a dozen get half-dozen free!” for the specialty cookie company both engages the visitors, because it’s a good deal, and it lets them take action by making a purchase on the site). Content is affected by both the content itself (how the writing is itself), and how it’s presented as well (the typography and structural elements, for example, where visitors saw cookie deal on the website).

Also, it’s important to keep in mind that long paragraphs of content don’t keep visitors attention for long. Short, snappy, and intriguing content grabs them and gets them to click through to other pages. Even if your pages need a lot of content, properly breaking up that content into short paragraphs that are then supplemented by visuals can help visitors feel like they aren’t overwhelmed with information.

Purpose TWO: Content is the main thing that boosts a website’s visibility for search engines. So, the practice of making content to rank well in search engines is known as search engine optimization, or SEO. To this end, getting your keywords and key-phrases right is essential for the success of any website. Google Keyword Planner is a great tool to use for optimizing websites. It shows the search volume for potential target keywords and phrases, so you can hone in on what actual people are searching on the web. Google Trends is also useful for identifying terms people actually use when they search. Even if your client produces the bulk of the content, it’s important that you supply them with some keywords and phrases that are SEO boosters. If not, their website is missing out on potential visitors.

5. Visual Elements

Often, the visual part of the design process will often be shaped by a client's existing branding elements (like their color choices, logos, etc.) Nonetheless, even if you’re given a blueprint for visuals, make sure to always use high-quality images because they give a website a professional look and feel. Using a professional photographer to get the images right is recommended. Just keep in mind that massive images can seriously slow down a site. So, using Optimizilla to compress images without losing quality can save on page-load times. Also make sure your images are as responsive as your site.

6. Testing

Once the site has all its visuals and content, you’re ready for testing. Thoroughly test each page to make sure all links are working and that the website loads properly on all devices and browsers. Errors may be the result of small coding mistakes, and while it is often a pain to find and fix them, it’s better to do it now than present a broken site to the public.

Some testings tools:  

• W3C Link Checker
• SEO Spider

7. Let’s launch it!

When everything has been thoroughly tested, it’s time to launch. Don’t expect the launch to go perfectly. There may be still some elements and bugs that need fixing. Web design is a fluid and ongoing process that requires constant maintenance.