Wire-framing

We are excited to continue our MakerHub web design module with a basic introduction to wireframing, but what is Wireframing? Wireframing is the foundation of all websites and is an essential part of web design. It allows you to organize the elements of your webpage for planning and testing. It’s also useful for stakeholders, people who need to see some form of the website before it launches.

Who is this technology for?

Software designers create wireframes frequently. Some common uses are:

• Test different design layouts with customers, gathering valuable user experience research information without breaking the bank
• Check new layout proposals before building them, allowing the team to catch missing or needed features before the code is written
• Web-based platform founders can approach early-stage funders with a wireframe to demonstrate and illustrate what initial funds will help to build

Fundamentals of wireframing

Wireframing a website is much like creating an architectural blueprint. Just as it is important for an architect to see the layout of the building before they begin working, a web designer must first create a diagram of the website before they actually build a website. You can also create several different versions of the design.

Wireframes should be simple and uncomplicated. They should showcase the overall site design and function and should include navigational information. The details should be limited to a few generic fonts and a few usability conventions.

You most commonly see wireframes in simple black and white. There is a very good reason for this. You don’t want to be distracted by colors, typography, and other things that take away from the main objective of laying out the foundations of the website.

It’s worth exploring a few well-established websites to get inspired and understand their layouts. If it’s a famous company’s website, you can rest assured that they hired some of the best designers around, and the layout of their website would likely reflect this.

This is why it’s a good idea to keep your eyes on The design of every website you run into. I recommend keeping a folder on your desktop where you store some screenshots of great-looking websites that you run into. 

Wireframing Software

Wireframing Software

Web designers use many tools to help them design a website layout. A classic and admittedly obsolete way of doing website layouts was just to create a website on Photoshop and cut and paste simple shapes. But in the past few years, many new website building software has been released, including Figma, Adobe XD, and the industry leader Sketch for Mac (to limit confusion, I will refer to this design tool as the Sketch app). These tools allow you to quickly giraffe a Website Layout.

Wire-frames are typically best built one page at a time, so get yourself set up with your preferred programs: one for design and one for links. Below are some of the tools we recommend checking out to get started.

Design and development – Figma is totally free. That’s right. .  Figma is not just for designing websites. You can also create entirely interactive websites right on these platforms. You can make buttons that you can click around with, and you can customize the CSS. The colors pretty much make it look exactly how you want it to look at the end-stage.

Design Sketch App – (paid) Sketch App is an industry-standard for web design. One of the many great things about sketch tools is that there are many online repositories containing tons of assets that you can use in your designs. This means we don’t have to start our wire-frames from scratch.

Design and Layout – Inkscape – A freeware program similar to Adobe Photoshop, Inkscape will let you create a page layout in .svg (vector file) format for later editing. You can then save each page as a .pdf file for use in your wire-frame.

User Experience Linking – Invision – This freemium website allows you to have one project for free at a time, which is usually enough for basic needs. The tool allows you to upload .pdf files and then connect them via buttons and links, showing a more complete user experience.

The design process

Every designer has a different workflow. There is no right or wrong way to go through a design. Some go straight from sketch to Wireframe to code, While others never create a sketch and just go from wire-framing to building out the website. Again there is no right or wrong way. But here are a couple of the more popular design processes.

• sketch > wireframe > visual >code
• sketch > wireframe > high def wireframe > visual >code
• wireframe > high def wireframe > visual > code
• sketch > code
• wireframe > interactive prototype >visual >code

Let’s explain some of these terms. 

Sketch

A sketch is a rough drawing of what your website’s layout should be. This is usually done with simple square blocks. No details.

Wireframing

Wireframing involves digitizing the rough sketch. This involves going into a tool like Sketch App or Figma and creating the website in a very basic format.

Visual

The visual stage is where you add your placeholder images, placeholder text, and colors, basically making the website look like it will ultimately end up looking like.

high-def Wireframe

After creating a wire-frame, some designers opted for something called a high-def wire-frame. This is basically the same Wire-frame but with much greater detail. This is also the phase where you start adding black and white or grayscale images just to flush out the design and make it look a little bit more like what it will ultimately look like. 

Coding

The coding stage is when we finalize our design and hand it over to the developer ready to be coded, or if you’re the person who is writing the code of the website or simply putting it together on a Content management system, then this is the stage where you will end up finishing the website.

I think it’s worth repeating that you don’t have to go through all of these steps. Some people go straight from a rough sketch on their notebook to working on the code, but the more steps in between, the less likely it is for any unforeseen design Evers to show up. And, you know what they say…

“measure twice, cut once.” 

They

Designing the layout

Now that we understand a little bit more about the design process, how do we actually start designing the layout? Well, it all starts with selecting a grid. Think of this as selecting the lames or roads that your elements will ultimately fit into.

Your layout can be as simple as four columns, so long as your elements fit nicely and evenly—Emphasis on evenly. You want all of your elements to be symmetrical. This is why we typically opt-in for even-numbered grids.

I should also note that you don’t need the same layout for every type of website. Think about it. A website that is supposed to be a shop, we’ll probably have a different layout than a website that is meant to be a blog. So, don’t be afraid to completely change up the layout and design of your website, so long as the design has a user-first approach. Remember, ultimately, they will be the ones that are going to be using the site.

Conclusion

During the design process, you should make changes and refine your Wire-frame to meet your clients’ requirements. That’s the basics of wire-framing in a nutshell. It really is quite simple. It’s all about planning before executing.

Introduction

Lesson One: Create a Blogs@Baruch site

Lesson Two: Introduction to HTML

Lesson Three: Introduction of CSS

Lesson Four: Introduction to UX/UI

Lesson Five: Wire-framing

Lesson Six: Typography