University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2024

Jump to navigation

Design Template by Anonymous

The Five Elements

Strategy

The most abstract of the elements is strategy. This is where the initial brainstorming of the project takes place- determining what goals a user has that this product can meet, and how those fit the objectives of clients and stakeholders. In the strategy plane, we want to understand what the big picture of the project is.

The strategy plane
Figure 4, the strategy plane

There are five important steps to go through when preparing your design strategy to determine what the end users want.

  1. Identify the goals of the business
  2. Identify the goals and needs of the end users
  3. Craft your vision for the product
  4. Break down the vision into the goals that the product will meet
  5. Write a plan for the steps that need to be taken to reach those goals

With the strategy in place and finalized, the design team is ready to move on to the next element of the process.

Scope

The scope plane
Figure 5, the scope plane

After the strategy has been decided, the next step is to determine the scope of the website and decide on the features and details that will be presented. The scope will lay out not only the functionality features that the product will have, but also the information that will reach the end user, from content to marketing and communication. Here, the design team takes the why they decided on in the previous plane and starts to put it towards what they are going to make.

Structure

The structure plane
Figure 6, the structure plane

With the scope of the project serving as a guiding outline, the next step is to start laying out a more detailed structure. In this plane, information architecture and the interaction design that will allow users to navigate that architecture is planned out. In the context of a website, this is where the design team decides where each page is and where you can navigate to from that page. This dictates not only how users interact with the site and how the system will respond to their inputs, but also how the content is structured. For the overall user experience, it is important to have the content structured in a way where users can quickly understand where to find their solution and how to get there.

Skeleton

The skeleton plane
Figure 7, the skeleton plane

As the design process moves towards a more concrete final product, the skeleton plane is where the team begins laying out the navigation and fundamental elements that the final design is composed of as well as the positioning of buttons, images, text and other elements. This element is a physical manifestation of the earlier more abstract design stages, where the structure was determining the architecture that the skeleton begins to implement.

Skeleton Screens

A skeleton screen
Figure 8, an example of a skeleton screen

A popular tool used during this process that can be repurposed for the final product is known as a skeleton screen. These screens show the empty containers and elements that make up a website without any of the inner content being shown, and helps to visualize the layout of the website. Along with other loading tools and indicators (such as a spinning wheel) skeleton screens are a popular choice to display when a website is still buffering.

Surface

The surface plane
Figure 9, the surface plane

The most concrete and final element of the design process is the surface plane, where sensory design and visually pleasing UI are culminated into a final product. In this plane, UI and UX intersect the most to determine how effective use of colors and textures can drive navigation as well as overall understanding of what the website is offering. A consistent yet clean design can ultimately create a more positive and seamless experience for the end user.