A wireframe is a two-dimensional depiction of a website’s interface to help visualize and brainstorm formatting and customization options before development. Wireframes take the stress out of website-building by acting as a rough draft of what you hope your WordPress or Scalar site will look like. Without wireframing, a website will often lack complexity because the developer did not take the time to think about formatting and navigational errors that a quick sketch could have fixed. So, to safe yourself time later building out your site, consider brainstorming on paper or digitally your ideas.

How to Start:

Building out your wireframes can seem like a challenge when you don’t know where to start. Here are some facts to remember before starting the brainstorming process.

  • There are two types of wireframes: You have the option to either brainstorm on paper or use digital tools. From sticky notes to Microsoft Word or Powerpoint, wireframes can take on many forms and mainly depend on how you see yourself best brainstorming. Do you enjoy illustrating your ideas on a whiteboard or large piece of paper? How about sketching out you plans using the formatting tools available on your computer?

The following pictures show multiple examples of past wireframes from students and faculty.

  • Paths help to visualize the viewer experience: Oftentimes people can get caught up trying to brainstorm what their main pages will look like, completely forgetting about navigation and how they hope to guide the user through their website. Creating a separate wireframe for pathways is a smart step to take when trying to properly sketch out and visualize the path of “clicks” your audience will be taking to visit different pages on the site. Pathways can remind us in a way of a sports bracket sheet or large family tree when trying to sketch out. Staying organized is a challenge, so remember to give yourself plenty of room.
The diagram is an simple digital wireframe to build out this website’s pathways for navigation

  • Keep in mind aesthetics: Writing for the Web teaches us about how users tend to scan websites instead of reading every line of text. You can make your website more interesting to the viewer by incorporating spaces for possible photos, videos, infographics, and digital tools in your wireframes. These additional sketches will help you as the creator see what parts of your website may appear more boring or easily clicked through by your viewers.

From Wireframing to the Final Product