Lessons

Lesson Info

Wireframing

Doing designs, like super detailed, high level of fidelity. Fidelity by the way is a word, for anyone who doesn't know what it means. Fidelity is a word for level of detail. So high fidelity means very high level of detail, low fidelity means paper sketch, napkin sketch. So doing super high fidelity designs takes very long. You can spend, even when I was in my prime, of designing high fidelity stuff, I could do maybe five mock ups, high fidelity mock ups a day. And that was really pushing it, it was more like two or three. So you can't even really design an entire flow that way. Cause you'll get stuck on, is this pixel just right, or this type face isn't quite the way I want it to be. So in order to save time and focus on the high level, the best designers again, stay in the lowest possible fidelity for as long as possible. And it's interesting because when you follow this process, when you for a long time it seems as if you're not doing anything at all. I've had more than one scenario...

, where I was working with a client, and we were like two thirds or three quarters through the project, and I was still just showing them some wireframes and some Word documents trying to get some clarification on ideas and you could sense their anxiousness increasing because we were almost done and supposed to launch and they still haven't seen anything good looking, just a bunch of weird sketches they didn't even really completely understand. But, if you use this process, you're actually much much faster in the long run. Even though it doesn't feel as if you're going faster, you're actually going much faster than if you focus on the super detailed designs too soon. But then the question is, how do we go from a paper sketch to a super high fidelity defined design? And the answer is wireframes. Wireframes are that bridge between the paper sketches and the polished UI. Wireframes can take many forms and many different levels of details. Some of them have color in them, some are black and white, some have text some don't. Some have annotations that explain what happens, some have a blue background on them. Some wireframes are just mapping out the general layout of the page and don't include any super intricate details. The biggest difference is that you're doing these wireframes in most cases on a computer. Wireframes can look very sketchy, but you'll notice that they're just a slightly higher fidelity than a paper sketch. And they also have the advantage that they're done on a computer, so you can share them out more easily. The point of wireframes is to give you a sense of where you're goin to place things on a page. I mean the way I use wireframes is and this is not how everybody works, but this is how I work, is, when I use wireframes I'm doing an inventory of all of the content, and also a prioritization of the content, all by putting it out on a page, and then cross checking with people that everything's there. That to me in my flow, works better than spreadsheets, with each form field or whatever that you put on a page. Okay why are they useful? What I like about wireframes is they're almost as fast as paper sketches, but you can communicate with more detail and you can send them out in an email more easily. So the cool thing about wireframes is, you know I've been in a couple of situations a couple of times in my career, like if you stay in this process of wireframes you can get feedback much more often. And there was this one time, this one company that I worked at where he didn't understand this, so I would, he always wanted super high fidelity mock ups of everything that they could review on their biweekly design reviews. So what that meant was that I could only get, like my boss was this guy, who, if when I showed him a wireframe or a sketch, he was like, I don't know about that. But when I showed him the exact same thing in super high fidelity he was like yes that's what I want. What that meant was that it would take forever to build these super high fidelity frames. So what that meant was that I could only get feedback maybe once a week, twice a week, while doing wireframes is so fast you can get feedback five times a day, and make adjustments really quick. So I think wireframes are to communicate just the general design concept. And the hierarchy. And you can get a little more detailed on page layout and proportion, than you can when you're doing it on paper. But wireframes at their core, they can be as simple or complex as they need to be. Every wireframe that you make asks a certain question. Okay so why does it matter? Wireframes show who you are as a designer. Because with wireframes a lot of people can make things pretty, not as many people can think through an entire process, and figure out what's important and what isn't and think about where the flow is. Yeah, wireframes, and I noticed this when I started teaching design too, where, no matter when someone shows me a wireframe, I could just immediately see where their thinking was and how far they were and what they were making, right. So it really shows, how advanced you are in your craft, depending on how you do your wireframes. Some tips to do good wireframes. If you compare these two, here's the emphasis on information hierarchy. On the right, you have the actions are much stronger than on the left. So you have the grayscale here to emphasize certain things, and you have the date grayed out to de-emphasize it because it's less important than the title. While here everything has the same emphasis. In this one, so wireframes aren't pixel perfect designs, but they are tooled to estimate, sort of, how much you can fit into the space, roughly. So you want to make sure that they scaling is accurate, or more accurate, than it would be in a paper sketch. And you can't just shrink your nav to make sure that the content fits. Something that I've encountered a lot early on in my career, is I would put in Lorem Ipsom for the text, and I would show it to a client, and they would be like what does that mean, lorem ipsom? What is that? You want to make sure that the content that's in there, doesn't have to be final, but it does have to sort of represent the content that might be in that place. Something that I like to do, if I'm redesigning something that already exists, is I'll have the product open over here on one screen and I'll have my wireframes open in another screen, and I'll just copy and paste content over because a classic mistake that designers will also make is they will, put in just enough content so that it doesn't break their layout, but you have to design for real cases. So taking content from the existing site, and putting it into your wireframes gives you a better idea of real scenarios that your design has to support. I need to get some water. Finally, order and alignment. You don't want your wireframes to look sloppy. I mean the one on the left, it still gets the point across, I guess, but it looks kind of sloppy. You want to make sure that things are ordered and aligned. And alignment is so important, I want to talk about it some more. Cause alignment is one of those things that, it's not a very difficult concept to understand, it's not very hard to execute, but if you do it well it makes a huge difference. So in this example, how does this look to you guys? Kind of messy right? You don't really know where to look. Just sort of all over the place. There's so many different variations here between the text, here's it's justified on both sides, here it's centered, the distances are different. And now look at the difference that it makes. With a little bit of alignment. Here everything is left aligned. And what this does is, that's probably why they call it alignment because there is a line here, and a line here, and another line there, like, if you position your elements in the right way, your eye automatically creates these invisible lines that are like orientation points. If you don't do that... Like for example in the original example. Each one of these has a different starting point. So every time you get here, it's a lot harder to figure out where to go next with your eye. And when you just have three lines, that's not super hard, but when you have a lot more text, like here, it's really really difficult to read. If you're just starting out, and you're working in the western world, just align everything left. I wouldn't use any type of other alignment for like, the first year of your career. Because aligning everything left is what people understand and it aids in readability. Something you never wanna do when you're working online is justified text on both sides. That's something that you see in books. But books have very sophisticated software in them that can help figure, books don't have sophisticated software, books are made with very sophisticated software, that helps determine how many words are in each line, and online you don't have that. So you end up having paragraphs with like five words in them which looks ugly and is hard to read. So just align everything left. Especially when you're just starting out, you have so many other things to worry about, you don't need to worry about alignment. Just line it up. The next concept is repetition. And that's repeating elements over and over, to create a sense of consistency on the page. So here, the links are all blue. You don't have a blue link and a red link. The headers except for the top one are all the same size. The distance between them is all the same. So that creates a rhythm across the page, that makes it easier for the eye to scan it, and makes it look more inviting to read. Some other examples of repetition from the real world are, each one of these video elements on the right look the same, they have the same format. The headers and footers, even though you don't see them here they all look the same. The comments styling is the same. Each comment has the same blue header, has a date next to it, it has the comment, and then it has actions that you can take upon that comment. Another example of repetition here, the links all look the same, both the visited links and the non-visited links both look the same. So it gives you this sense of familiarity where you're like, aha. A visited link is always purple, a non-visited link is always blue. And the layout is so similar, the distances between everything are the same. So you can, more easily scan the content. Another thing you should do, or that I recommend you do, is header and footer styling, most of the time, it makes sense to just keep it the same, unless you have a reason not to, or you know what you're doing. A lot of times when you're designing in real life, you will design the entire page, and you get to the footer and you're like, well what am I gonna do now? What do I put in there? And an easy way to solve that problem and to give you a starting point is to just pull the header down, add a few links, add some copyright, and then you have not only visual consistency, but you also have an ending point and giving people something to do at the bottom. Something else you wanna do, and this ties into what I said earlier where you, cause I said that I copy content from the real site, into my wireframes if there is a real site to draw content from, as I'm redesigning, because that gives you real cases to work with, doesn't give you lorem ipsom that looks great under one certain layout, it gives you content that, is accurate, yeah. Wireframes will be judged according to those criteria. Another thing that I would add to this is, I like keeping my wireframes as low fidelity as possible. I don't like to add a single color into my wireframes. And I like to make them look like paper sketches. Because as soon as you add in one color, even though you might know, that what you're making is not finished yet, you'll start getting different feedback than you would. You really want to illustrate that at this point in the process, you're just focused on getting feedback on layout and flow, and inventory, if all the content's there. But yeah as soon as you add a color, people start giving you feedback on, well I don't know about that color, you start getting feedback on visual specifics, and at this point in the process, that's not a question you wanna answer yet. I like keeping those two steps really discrete. Anything you would like to know? Earlier with personas you had out, the sketched out ones, what's wrong with doing just sketched out ones with wireframes? Isn't that sort of easier to get them out in the world so you can actually see them and maybe even paper prototype them? Yeah, that is a lot easier and a lot faster. I mean, it really depends on how you wanna define things. You could technically define a paper sketch as wireframe, you could also define wireframe as a sketch. And I know we're not getting into any software demonstrations anything like that, but inevitably people have a lot of questions about this. John had posted, Jake had posted a similar question about similar tools to use for creating fast wireframes, if you haven't done any wireframing before if you're just getting into it for the first time today, what's the best way to get started? The tools that I prefer using, I mean if you ask five different designers which tool do you use, you're gonna get five different responses. There are a lot of good tools out there. And you need to remember that the point of wireframes is not the tool that you use, but the idea that you're trying to communicate. You can communicate that idea on pen and paper, you can communicate that idea on a PowerPoint slide. That said though, there are some tools that are more effective than others. A tool that I really like, well, there's a few ways to do it. The process that I really favor currently is, I do the wireframes in Sketch. So I use only two tools now, I use Sketch and I use Principle. In the past I would use Photoshop, then I would transfer and I would use Acture to do the wireframe and the prototypes. But the cool thing about Sketch and Principle together, is you can create the wireframes in Sketch, and then you can import them with Principle and make them interactive. And you can keep your entire workflow, from low fidelity to high fidelity just in those two programs. I would recommend just sticking with Sketch, when you're just starting out, it's a really versatile tool, in a lot of different scenarios.