Web Design Fundamentals

Menu

Before you get started

Did you ever stop and think that anything​ can be a website? From informational one pagers to corporate websites to property sites to event landing pages to sales/investment pitches to reports and beyond, the possibilities are endless. Does what you want to create have text and images? It can be a website!

Before you begin creating your website, there is some work to be done to ensure your website is successful. An effective website design should successfully convey its particular message while engaging the visitor and keeping them on the site as long as possible. Answering the following questions will help you outline your website to make it as impactful as possible.

Your goal

What is the purpose or goal of your website? When someone visits your site, what do you want them to do after their visit? Your website needs to guide the user to that end action, and your design should enforce that desired behavior.

Consider these examples:

Selling a product or service

Goal: Have the buy the product or service
Method:
Have a persistent method of contact, either in the navigation or as a floating button. Customer testimonials, case studies, and impactful images can sell for you.

Resource hub

Goal: Enable users to answer their questions themselves
Method:
Well structured navigation, clean typography, search bar functionality, and a chatbot can help users find any information they are looking for.

Defining your goal and knowing what you want to accomplish beforehand helps guide your design.

Your audience

What is the persona of the users who will visit your site? Knowing who will be visiting your site will help you design effectively to keep them engaged. Are they:

Tech-savvy?

Go crazy with the design! These users know their way around the web and enjoy seeing new, creative sites that break all the rules in the right ways. Atypical navigation and page layout won’t confuse them.

Not tech-savvy?

These users don’t spend much time on the internet and can easily get lost or confused if you place elements not in their expected locations (like a navigation that sticks to the bottom of your page instead of to the top). Stick to traditional web layouts.

ADA compliance necessary?

If ADA compliance is important for your website, your design should reflect that. There should be high enough contrast of colors user, descriptive headings, no hidden content like carousels, and text should always be legible even if a user zooms in 200% on their screen, among other considerations.

There are many personas out there you could be building for, and understanding who they are, what they need, and how they think is critical to the success of your website.

Laying the groundwork

Before you begin building, it’s important to map out the flow of your website to help you visualize how you want users to experience the site and how you should build it. Whether you do that with a wireframing program, an illustration tool, a word document, or even with pen and paper, you should use whatever method is easiest for you. Ask yourself these questions:

One page or multi-page?

Does it make sense to put everything on one page, or should you break it up into different pages?Single page websites to allow for easy scrolling, are mobile friendly, and are better for low content. Multi page websites allow you to clearly divide information, provide better tracking, and contain more information without overwhelming the user.

What kind of navigation?

There are multiple ways your users can get around your site. What makes most sense for the purpose of your site and the persona of the user who will visit? Should it be:

  • Standard top of the page navigation
  • Persistent left bar
  • Hamburger/mobile menu for all screen sizes
  • No navigation
  • Something different?

We’ll cover this more in-depth in the next section.

Do you have your content ready?

Have you collected all the branding, fonts, images, colors, and copy needed for the site? Designing with real content gives you a better representation of how the website will look and function and gives you the opportunity to make changes earlier in the design process. Everything doesn’t have to be finalized before you begin building, but at least knowing what the header sections are, a rough idea of how much copy goes into each section, and where images and videos need to go will help tremendously.

Next