What are wireframes?
Wireframing is a key first step to a successful web design. Before we start to actually design or code a website, we must do some planning. Wireframes show structure, content, information architecture, and functionality. They are not meant to represent the visual design so they use minimal color and font styling. The idea is to make sure that all of the necessary pieces of content are on the page and that they are laid out and function in a way that aligns with the goals of the project.
What is the Delphic Wireframing Process?
New and useful tools for wireframing are constantly being released. Over the years we’ve developed a process that works for our team. We start with an initial meeting with the client to understand goals and expectations, then we can get started with the planning. Every company has a different approach to planning out a web design project, and different types of projects may require a different process. This is our process for a standard web design project: list of required pieces, sketching, wireframing, business logic, visual, code.
Gathering the pieces
First: make a list of everything that will be included in the header, footer and the homepage. This list could include items such as logo, main navigation, search bar, rotating banner, news feed, copyright, etc. This list is usually a combination of what the client has requested and some recommendations that we make. We may also create an ordered list, placing the most important items towards the top.
Once we understand all of the pieces, we can start putting it together in a way that makes sense from a hierarchical standpoint. Rough sketching is a good way to get ideas out on paper quickly. We usually sketch a few homepage ideas and any other unique pages. Sketching is also a great collaboration tool. It’s easy for a team to come up with ideas quickly rather than worrying about getting all of the details perfect.
All About Wireframing
Now that we have some ideas sketched out, we can create the wireframes. There are many different types of tools but we have found a process that we are comfortable using. We always choose the unique template pages to wireframe, which can include homepage, sub-pages, news list and details, search results, etc.
We start by wireframing in Photoshop and then save those images and place them in a Google presentation.
Wireframing in Photoshop allows us to work at the correct scale and it gives us a foundation to work from when we start the visual designs. Although this is not an exact reflection of what the final design will look like, it should still be easy to understand and show good craft.
Wireframing Do’s and Don’ts
Wireframes should be free of distractions. This includes inappropriate use of color, too much fine detail, unusual fonts, and ornamentation. Wireframes can contain different levels of fidelity, which is basically the amount of detail.
Low-fidelity may be just gray boxes whereas high-fidelity could include text and images. The amount of detail varies based on the project. For example, a very content-heavy site may benefit from the use of text since it may be difficult to represent certain messages with just gray boxes. A suggestion for pages that are very long: comp in a paper tear effect at the bottom and start the second half on the next page with the tear along the top.
I mentioned earlier that after we’ve created the wireframes in Photoshop, we drop them into a Google presentation. Including business logic, which are notes about the functionality of the site, is a very important step in the wireframing process . This is particularly useful for the front-end and back-end developers when they are building the site. Clients also benefit from this, as it can help them understand the scope of the project, as well.
A Nod to Google
Another reason we use Google presentation is for the ease of collaboration. Design, front-end dev, back-end dev, and the project manager should all have a part in the wireframing process. This makes it easy for any team member to easily update business logic or put in comments.
Wireframes are our project blueprints. They create the structure necessary to have a successful web design. There are many ways to create wireframes, but this is the process that we’ve found works for us. Share your own process for wireframing in the comments section below; maybe we can learn a little something from you too!