Wireframes

Wireframing is the practice of drafting a layout before building a fully functional web site. The idea is to figure out how a website will look and function before building it using code.

Starting with code before the design is finished is impractical. Code is slow and hard to work with, especially when you're making lots of rough drafts and iterative changes, or if you decide something's not working and need to make a sweeping change early in the design process.

Also—code is complicated! While it definitely helps to have an understanding of how the code works, it shouldn't be a prerequisite to design anything for the web. Designers should be able to focus on design, without having to know or worry about all of the complexities of how to build things using code.

So we save the code until after the design is (mostly) ready. Drafting layouts in a purpose-built, drag and drop application is much faster and easier.

In the earliest stages, wireframing is often done on good old fashioned paper for rapid sketching and prototyping, or white boards when collaborating in a team.

The next step is often creating a rough layout using vectors, often in grayscale. This allows designers to better see how objects interact with one another on the page, what takes precedence, where your eye is drawn, etc. Precision isn't too important at this stage, because the design will often go through multiple iterations.

As the final design gets closer, a high-fidelity wireframe with color and more exact detail is often created. This gives the developer (be they a team, a teammate, or yourself) a clear blueprint for exactly what to build.

Adobe Illustrator and even Photoshop are sometimes used for wireframing, but there are more purpose-built and specialized applications for this. Most have tools for mocking up responsive designs, collaboration with teammates, and even prototyping basic interactions like buttons and links.

One such application is Adobe XD, included with the Adobe suite. If you're already familiar with Illustrator and/or Indesign it should be easy to pick up, so this is the application we'll use for wireframing here in Web 1.

A final wireframe should be detailed enough that it can be translated directly into a web page. This often requires additional annotations and notes.