Web Design Site

There are many ways to improve your efficiency when working in any media based industry. One of the simplest and most effective ways I’ve found is to “draw your map”. Drawing your map is essentially the process of taking your task at hand, and mocking it up into a visual form. This can be anything as simple as writing down words with arrows and create a visual workflow, to creating a series of thumbnails or storyboards to show the progression of an idea. When relating this to web design, developers will often use a method known as wireframing.

website wireframe sketch on digital tablet screen
Image Source: Wireframe Sketch via Shutterstock.

If you don’t know what a wireframe is, it’s basically a generalized mockup representing the layout of a website. There are no definitive rules for this process, and that is why it is so effective and adaptable. Some people will make quick paper sketches of simple shapes and scribbles for text to show elements and their general orientation to each other. Others prefer to create digital wireframes that can be more precise and contain more detail. As long as it succeeds in creating a foundation for your mind to flow off of and reference quickly, it’s doing its job.

There is a bit of a debate on whether wireframing is worth your time or not. As you have likely gathered from my previous statements, I find wireframing to be very much worth the time. That being said, there are a few things that should be considered and taken into account that make wireframing worth the effort.

Don’t be clingy, keep an opened mind

Some designers dislike wireframing because they feel it limits creativity and creates boundaries. You may put a lot of heart, thought, and time into the initial wireframe and don’t want your time to be wasted, and thus push the final design in a direction that works with your original concept.

To avoid this passive mental crutch, you need to create a separation between wireframe and final design. Know the wireframe is a nothing more than a reference point, and if you come up with a design that better suits the user experience, or will in anyway alter the site for the better, don’t be resistant to change. Your best idea is seldom your first.

Gauge your time

The overall purpose of a wireframe is to save time in the long run. There is nothing more frustrating than being happy with a final design, and then finding out you forgot to account for an extra set of text, or a specific call to action. You then have to push things around, or redesign elements to accommodate. This is your chance to give yourself a visual checklist that minimizes that additional time wasted.

The question must then be asked, how much time is acceptable to spend on this mockup phase? Well, this changes depending on your situation and preference. If you are making a site for a client and have a very small time budget, you probably don’t want to spend more than 10-15 minutes so you have more time allotted to the more detailed art and design. If you have more of a flexible timeframe or it is a personal project, it may be beneficial to flesh out your ideas a little more and even mockup multiple wireframes. Overall, this is something you will have to weigh for yourself on a case by case basis, and find what suits your best interests.

Find your own flow

Like anything else you do on a regular basis, as you make a habit of wireframing, you will become better at it. The key to improving the efficiency and effectiveness of this process is for it to feel so second nature you start establishing a system that works. Maybe it is using a consistent naming convention for large amounts of labeling, or the use of quick symbols to represent elements that are unique but consistently used. My point is, do not be discouraged if you feel you are not fast enough. You can only get better, and will.

Simple pixel perfect browser frame for presenting your prototypes and portfolio works to clients
Image Source: Browser Frame via Shutterstock.

After getting used to this pre-planning mindset, you will likely start to connect the dots on ways “Drawing your map” can be applied to other aspects of your work. Using myself as an example, I am both a designer and front end developer. Starting out skinning, with my first few websites I began to realize the majority of my time was wasted on backtracking due to something that initially seemed simple, but ended up using a CSS trick, and altered HTML.

Since then, whether it is for my own design or someone else’s, I always start by making a wireframe of my skinning process. Rather than overall design elements, I layout my div structure, mark up my common classes, and jot CSS notes for dimensions, main colors, or positioning. This easily cuts my skinning time by a quarter or more, depending on the sites complexity. I’ve gotten to the point where I can code out the HTML and CSS and have the skin 80% finished and flawless the first time I load it up in a browser. It took time to nail my system, and I keep adapting it, but you can apply the same concept to anything you do. You are your most valuable asset, make yourself evolve.

Your mind is a terrible thing to waste

Employers love to see your thought process and how you handle the entirety of a project. No matter if you are fresh out of college or just looking to upgrade your current career status, wireframes can be a great tool to have in your back pocket. It sends a really strong message when you can go into an interview with a few wireframes, a couple of digital designs mocks, and a final product.

Doing this, you can walk through the mentality behind one or two of your best pieces of work, rather than pulling up your two best sites and a few better than average ones in a browser. This plays on the simple principal of quality over quantity. If you explain the way you work, it separates the thinkers, from the drones.

With this idea in mind, be sure to save your wireframes and various design compositions, even if your final design ended up nothing like your original wireframe. Approaching projects with this kind of mentality, gives even more justification to wireframing. Now not only are you mocking up your thoughts for the immediate task at hand, but also making a personal investment that you can later utilize to market yourself and display how you can work a project in full, from start to finish.

This mindset also works off of the first two issues I brought up. If you feel that diverging from your original wireframe makes your original time and effort wasted, you are sadly mistaken. When referring to a portfolio, this simply shows that you are willing and able to adapt your own creativity. It also shows that you can prioritize the website’s quality over your own sense of perfection to ultimately produce the best possible end product.

Concluding

Overall, it does not really matter what I or anyone else tells you, the decision to wireframe is yours alone. Most designers tend to be very “right-brained”, so mapping out your ideas in a visual fashion will make it easier to channel your thoughts. However, if you tend to be more calculating and work best from memory and written words, perhaps this would be more cumbersome than what you feel it is worth. If nothing else, I hope you can take away a different sense of what wireframing can be. A tool, that if properly used, can increase efficiency, make you a psychologically better designer, and assist in marketing yourself in the years to come.

This weeks freebie has been created and kindly released by Nick Zoutendijk, a graphic designer based in Amsterdam. What we have for you is a versatile and modern line/glyph styled icon set called Stripes & Co.

In total there are 65 icons in the set and they come in both AI and EPS formats so you can edit and re-size the icons as per your needs. You can also freely use these icons in both your commercial and p[ersonal projects.

Here they are:

Stripes & Co line glyph Splash Preview