People always tell me that my wireframes are very pretty.I do put a lot of thought into making my wireframes as clear as possible. One way I achieve that is paying close attention to the design of my wireframes.
What . . . the “design” of wireframes.
I know you’re thinking that is kind of an oxymoron. Isn’t the point of wireframes to not contain any design? Isn’t the point of wireframes to focus on the information and user flows?
Yes, yes yes.
BUT … sometimes it pays to spend time considering the design of your wireframes.
Why Applying Light Design To Wireframes Is Important
Through applying light design to your wireframes, you can help convey very important things and eliminate assumptions and ambiguity that can often cause a client to be confused or check out. For example, through using different colors or shades of gray, you can convey information hierarchy on the page and help the team and designer see what information or action is most important on the page and where we hope to have the user focus their attention.
In addition to using color to help convey slight design details and information or action hierarchy, I often use real vector icons in my wireframes.
Click here for my free Omnigraffle Wireframe Template
Traditionally on a wireframe, when the designer intends for there to be an image on the page, the image is represented by a box with two diagonal lines in it. This is the universal symbol for a image placeholder.
I don’t like just having placeholders for images though. Too much can get lost in translation. To be cliché a icon is sometimes worth a thousand words. So, why not take the extra few minutes to think of an icon or image and just put it in your wireframe (in black and white of course).
I’ve been doing this for years and another one of the big benefits to using images and icons in wireframes is that it helps the client or customer grasp the wireframe much, much faster. It helps them see the vision of the experience. Sometimes, when you leave blanks in a wireframe, the client or customer can just end up not being able to see past that big image placeholder.
It’s crazy, I know. But trust me, I’ve seen it time and time again. The more realistic a wireframe is, the better the feedback you receive from the client, and the faster you get to a great experience.
How to NOT Approach Using Icons
Ok, I am going to make a little confession now. I know a lot of people are wondering, where does she get her icons? Well, over the years, I’ve been creating my own icon library that I have on Dropbox. Very early on, I used to draw my own icons in Illustrator. But now, in the past few years I stopped doing that and instead just grabbed icons from Google Images or the Noun Project (sidenote: since they are for wireframes, I don’t worry about rights etc).
It sounds easy enough right? Well, it’s actually very labor intensive. Here are the exact steps I used to follow to get an icon and bring it into Photoshop or Omnigraffle:
1. Find the image (roughly 1 – 5 minutes)
2. Copy the image or take a screenshot if copying is not accessible. (1 minute)
3. Open the image in Photoshop.
4. Isolate the image on a single layer and making it a transparent GIF or PNG. (1 – 3 minutes)
So in total I would spend 3 – 9 minutes creating a single icon.
I know, this is ridiculous. And I know I probably could have found icon sets to download etc. But for one reason or another, I just got into this bad habit. And, I practically had my icons memorized, so it took me no time to find the exact icon I wanted.
But here’s the thing, don’t be like me and waste your time! Do not try to create your own icons for wireframes. People have done this for you.
Here’s the easiest way to insert beautiful vector icons into Omnigraffle or Photoshop.
How To Easily Insert Icons Into Omnigraffle or Photoshop
One of the first things I ask a client is if they are using any specific design framework, such as Bootstrap. Within Boostrap, are many great tools such as a built in icon library called FontAwesome. This is a pre-made icon library that developers can just reference using CSS.
Well, a few of my clients use FontAwesome, so for the past few days I’ve been screen-shotting FontAwesome icons and then saving each icon as a transparent GIF or PNG.
I know, this is insane and I probably shouldn’t admit this! But, I just never took the time to find a library of the icons or figure out how to do this in a more efficient way.
Well today, I finally got sick of this. I thought, “there has to be a better way”! So, I searched, and it’s so simple.
Here are the exact steps you need to take in order to use FontAwesome icons with Photoshop and Omnigraffle.
1. Install the FontAwesome font from GitHub (you’ll most likely need to choose the TTF font)
2. Open Photoshop or Omnigraffle and choose the text tool.
3. Make sure that you’ve selected the font “FontAwesome” from your font list
4. Head over to the handy FontAwesome icons cheatsheet and find the icon you want.
5. Now use your mouse to COPY that icon from the FontAwsome icons cheatsheet (the icon itself not the text or codes after it).
6. Go back to Photoshop or Omnigraffle, make sure the text tool is selected (eg. the cursor is blinking like you’re going to type) and then just paste the icon that you just copied.
Amazing! Now you have a beautiful vector icon that you can do a few things with. You could change the icon size or color just the same as you’d change the size or color of text.
If you’re working in Photoshop, I recommend making the icon pretty large (say 200 x 200px) and then right clicking that layer in your layers panel and choosing “Convert to smart object”. This will make the icon a vector layer that you can then easily scale or apply Blending Properties to (Stroke, Color Overlay, etc).
That’s It.
Hopefully now you know why it might make sense to take a little extra time to make your wireframes just a tad more visual. And if you choose to do so, please don’t make your own icons and just use something like FontAwesome.
Do you know of other cool icon tools or fonts? Tell me in the comments below!
PS: Big shout out to Dave Gandy for creating Font Awesome. Merci.