Getting Started with Website Building

Overview #

There are many platforms and applications out there to create websites and you should use what you are most comfortable with. If you have no experience with website building, this page includes tool recommendations and basic tips to help you get started.

This guide covers general advice for getting started with web design. If you are looking for the specifics of getting started with Domain of One’s Own or Sites@UMW, you can find those guides here:

Platforms #

At UMW we offer two platforms to support building a website:

Sites@UMW uses WordPress as a way to build your site while Domain of One’s Own allows you to install a variety of applications, including WordPress, to build your site. Read about the difference between these platforms in one of our Domain of One’s Own guides.

Prototyping #

Building and designing a website can get complicated once you move beyond a simple splash page. We encourage you to create mock-ups of your site before you start building. For simple sites you can use a whiteboard, post-its, or draw it on on a piece of paper. There are also digital prototyping tools like Figma that can give you a richer sense of what the user experience.

Web Design: Some Considerations #

There are many principles that are important for web design, but some things you may want to consider are:

Purpose #

The first step in web design is to get a clear understanding of the purpose of the site. It should be clearly defined and aligned with the goals of your assignment or project.

Layout #

Layout is a subsection of usability but we want to highlight some specifics when considering the overall structure and organization of the website. A well-designed layout can greatly enhance the user experience by making the website easy to navigate, visually appealing, and easy to understand. Some considerations for layout in web design include:

  • Hierarchy: Creating a hierarchy of information helps guide users through the website and make it easy for them to find what they are looking for.
  • Grid system: Using a grid system allows for a consistent layout across the website and helps to create a cohesive design.
  • White space: The use of white space can help to create a clean and uncluttered design, making it easier for users to focus on the content.
  • Responsiveness: Layout should be responsive to different screen sizes and devices, making the website accessible to users on different devices.

Usability #

Usability focuses on how people interact with your site and accomplish their goals. A website that is usable is one that is easy to navigate, understand, and use. Some of the key considerations for usability in web design include:

  • Navigation: Navigation should be intuitive and easy for users to find what they are looking for.
  • Consistency: Consistency in design elements, such as layout, typography and color, can help users understand how to interact with the website and make it easy for them to navigate. See the Visual Appearance section below for more details.
  • Accessibility: The website should be designed with accessibility in mind, to ensure that users with disabilities can easily navigate the website. See the accessibility section below for more details.
  • Feedback: The website should provide clear and immediate feedback to users on their actions, such as error messages when they make a mistake.
  • Performance: The website should load quickly and be responsive, to ensure a good user experience.
  • Content: The content should be clear, concise, and easy to understand, and presented in a way that makes sense to the user. See the Content section below for more details.

Visual Appearance #

Visual appearance of a website includes elements such as color, typography, and imagery. It can greatly impact the user’s first impression of a website and the overall user experience. Some of the considerations for visual appearance in web design include:

  • Branding: The visual appearance of the website should align with the overall branding of the organization or individual creating the site.
  • Visual Hierarchy: The use of color, typography, and imagery can create a visual hierarchy that guides users through the website and makes it easy for them to find what they are looking for.
  • Contrast: The use of high contrast between text and background can make the website easier to read and navigate.
  • Typography: The choice of font and its size, spacing, and weight can greatly impact readability and the overall look and feel of the website.
  • Imagery: The use of imagery can greatly enhance the overall look and feel of the website, and can also be used to communicate a message or convey a certain mood.

Content #

Content is why people are visiting your website! Well crafted content can greatly impact the success of a website. Some considerations for content in web design include:

  • Relevancy: The content should be relevant to the purpose of the website and the audience that the website is trying to reach.
  • Quality: The content should be well-written and error-free, with a clear and consistent tone of voice.
  • Organization: The content should be organized in a logical and easy-to-understand manner, with appropriate headings and subheadings.
  • Scanability: The content should be easy to scan, with short paragraphs, bullet points, and images to break up the text.

Accessibility #

Accessibility should be a central focus and “baked in” to how you build your site so that it can be used by as many people as possible, including those with disabilities. It is important for several reasons:

  • Legal Compliance: In many countries, accessibility is a legal requirement. For example, in the US, the Americans with Disabilities Act (ADA) requires that all public-facing websites be accessible to individuals with disabilities.
  • Inclusivity: Accessibility helps to ensure that everyone, regardless of their abilities, can access and use the website.
  • User Experience: Making a website accessible can improve the user experience for everyone. For example, providing alternative text for images can make the website easier to navigate for users with visual impairments, but it can also be useful for users with slow internet connections.
  • SEO: Accessible websites are often better optimized for search engines, which can help to improve the website’s search engine ranking.

See our guide on Accessible Web Design for an overview of things to consider when starting.

Example Sites #

Want More Help? #

Updated by Shannon Hauser 09/23/2024