1. Set goals and priorities before you dive in

When many think of successful web design and development they think of domain names, a reliable web host, website color schemes and content management systems. However, successful website design has its roots in clear priorities. Start your website project by determining what matters most to your business so that you know what your website should include.

“Write down what success looks like, and work backward from there,” says Jonathan. “This process will help you decide what will be part of your site.”

It can be helpful to look at other websites in your industry for design inspiration. Browse through their pages, and take note of the information they provide, how they communicate their brands, and what they offer to attract and keep visitor's attention. Note what you think works well and where you want to do better with your own design.

This list of important website elements will help you create a sitemap. A sitemap, as the name suggests, maps out your website by establishing the pages you’ll have and how the pages will link to each other, and will help to establish your information architecture later on.

Consider including these basic types of web pages on your site.

• Homepage:

  This is the main page of your website, so it will often be the first page new visitors see. They should see the most important information they need first, to understand what you offer, and easily know how to navigate to what they need to do next.

• About us:

  Here, visitors can discover the basic information about your business, such as how you got started, where you’re based, your mission, and profiles of your top team members. You can also include links to store hours and locations (if you have them), links to social media pages, and contact information.

• Services:

  Depending on what your business or organization does, a page with short explanations of the services you offer or visual content of your products and links to detailed pages to learn more about those services can be very helpful for new visitors.

• Careers:

  If you often have a need for new team members, consider a page where you can highlight available positions, or have a form where people can inquire about openings.

• Blog:

  If you regularly publish content, a blog page can be a central location for visitors to find it. This could include product or service updates, articles related to what you offer, profiles of new projects, and any other content that will help educate website visitors about your organization.

2. Craft a wireframe to visualize your website

A wireframe is a skeletal outline for your website. Much like a blueprint for a house, it gives you a two-dimensional picture of the layout, structure, and functionality of your website.

Wireframes can be created with simple pen and paper, or digitally using website design tools or a website creator that can help you to visually communicate the structure of your site. There are 3 types of wireframes, and as you develop your website, you’ll iterate from one to the next, gaining more “fidelity,” or detail, as you go along.

Consider including these basic types of web pages on your site.

• Low-fidelity wireframes:

  These early, rough sketches—which typically have simple shapes and placeholder text—are good for mapping out navigation flow. “At this stage, just focus on the content and how the user will interact with it, rather than how the site will actually look,” says Jonathan. “This is the planning level, so you’re just roughly sketching out the website and thinking about hierarchy.”

• Mid-fidelity wireframes:

  At this stage, you don’t yet have images or live text. You’re creating black-and-white renderings that show an accurate representation of the website layout. There are tools available to create these renderings that offer free trials, such as Sketch or Balsamiq . “This stage is the skeleton of your website,” says Jonathan. “You don’t need specific design, but you do need clean lines and accurate sizing.”

• High-fidelity wireframes:

  At this latter stage of the design, you’re creating a mock-up that looks like your actual website, with images, color scheme and real copy. Now, you can design things like your menus and interactive content. “This is where you add color and copy, but don’t mistake this for a functioning prototype,” Jonathan says. “It’s still only an example of your website hierarchy.”

3. Design with your audience in mind

As you move through the phases of website design, focus on building an asset to serve your audience. After all, that’s the whole point. Be sure at each stage of your website development—from setting priorities to formating to determining navigation—you think about the needs of your target audience.

“As exciting as it may be to create a completely unique and unorthodox website, the end user should always be considered first,” says Jonathan.

Consult this checklist to create a positive user experience (UX)

• Provide a visual hierarchy:

  Solid hierarchy makes it easy for visitors to quickly gather information and understand where to go on your website to learn more. Visual hierarchy includes spacing, colors, white space, repetition, and more.

• Keep it simple:

  As you design, maintain a visitor-friendly experience by considering whether all elements are needed by the users. You may be adding features that complicate the website and make it more difficult for your audience to navigate.

• Have a clear call to action (CTA):

  “Place an order,” “Buy now,” “Sign up,” “Contact us,” and other CTAs should be easy to find and intuitive. Keep asking yourself if your website design makes it easy for your audience to know where you want them to go next on your website.

• Make it accessible:

  Your website should be responsive and accessible from any device. Review how different aspects of your website look and perform on PCs, tablets, and mobile phones. Make sure users can view text and images properly on different devices, and that buttons and CTAs are easily clickable on various-sized screens.