Скачать или смотреть What Is a Wireframe? | Graphic Design

Watch more How to Have a Career in Graphic Design videos: http://www.howcast.com/videos/509223-...



So what are wire frames? Wire frames are basically the skeleton of the site before any design or any type of visual emphasis or aesthetic is placed on the site. So you're basically trying to see, 'Okay, I have a site in mind. What is it going to look like? How is it going to function? And what's the layout going to be. How is it going to react to the person that accesses it?'. In this case, I'm going to actually show an example of how I came up with the CHD Collective site, our site, which basically started off from an idea with me being on the train and utilizing my iPad to come out with an idea.

So I originally just started sketching out some things and it's very rough and there's very different types of wire framing. There's low fidelity, which could be something like a sketch, or maybe just a few boxes placed on somewhere so that you can get a good idea as to where you're going to place things. There's half-fidelity which is a little bit more detailed and you have more of a visual sense as to where things are going to show up or where they're going to be placed, and even, almost, what colors they're going to be but you're still not applying them yet. And then after that you go to the visual design.

So here you'll see sketches where I wanted the image and the tagline to be at the top and then I wanted the about us and then projects to be underneath. I knew that I wanted it to be all on one page and I knew that I kind of had an idea as to what the layout looked like, but I just wanted to get the idea out of my head. So once I did that, I used Axure and basically put together a more refined approach as to what the site should look like. So you'll see actual boxes and more of the navigation. Rather than just a box that says 'navigation,' you'll see our mission, our history, our strategy, who we are. And this can go through many different iterations because in this stage you're able to actually see what's important. What plays hierarchy on the website? What do I want the user to do first? And then from that, without any colors applied, you're able to sense; 'Okay, this is what I need for them to do. This is what needs to be changed.', and once you're able to settle on that, then you can actually come up with an actual design.

So here, you'll see that the design was applied from the wire frames; the about us section, with the side nav, the artwork section, the blog, and even the footer. So you're able to do this for a number of different pages and it can be as simple as a one page wire frame or it can be more complex like when I did a iPad map application and I had over 70 pages of wire frames to make sure that I knew each thing was going to work, and that worked and functioned effectively before any visual design was applied.

The software I used to develop my wire frames is called Axure, A-X-U-R-E. You can also use Balsamiq, which is really cool, Omnigraffle, and then Microsoft Visio. So there's a number of different ways. And then there's a number of online wire framing tools that you can use as well.