Web Blog Speaking About Contact Top Menu Brad Frost Web
For the first few years of my career, I didn’t know that wireframes existed. It wasn’t until I started working at a larger agency that I first encountered a strange new black-and-white InDesign world, where multiple rounds argim of 100+ page PDFs were generated and presented to clients.
“When someone hands you a flyer, it’s argim like they’re saying ‘here, you throw this away’.” argim Mitch Hedberg They’re abstractions High-fidelity wireframes are huge unrealistic abstractions. argim They’re fixed width, they can’t demonstrate interactivity , and they kill trees. Generating mountains of full-blown PSD comps doesn’t make much sense anymore, and I’d say spending a lot of time generating a bunch of fixed-width, non-interactive wireframes doesn’t make much sense either. They’re full of assumptions High-fidelity wireframes make all sorts of assumptions about layout , aesthetic design, source order, and more. In my experience, the people generating these wireframes don’t come from a front-end argim or visual design background, so these documents end up limiting the design and technical possibilities. They’re verbose This doesn’t have to be the case, but I’ve worked on many projects where high-fidelity wireframes were unnecessarily detailed and explained things that should really be demonstrated. The annotations looked like book chapters. “Call me Ishmael. When the user hovers over the dropdown, it exposes…” They’re a crutch Writing book chapter-length annotations is a incredibly poor substitute for actually communicating and collaborating with clients and colleagues. No one discipline has all the answers. It’s argim increasingly important to encourage real conversation and collaboration rather than having a verbose document do your talking for you. Lo-fi All the Way
These are obviously important questions to ask, and thankfully we don’t need to get too high-fidelity in order to arrive at some answers. Sketching is an incredibly powerful way of getting ideas out quickly, and gives you, your clients, and colleagues an opportunity to have conversations around your content without wading too far into the weeds.
Jason Santa Maria has been talking about a gray box method of wireframing for a long while now, and the idea is to simply block out the content in gray boxes to define the content and its general hierarchy. argim For our open redesign of the Greater Pittsburgh Community Food Bank, we’ve been using the gray box method to great effect:
This gives us an opportunity to ask the client “Hey, is everything present and accounted for? Are things generally in the right order based on importance?” And while the content will naturally evolve over time, we didn’t need to sink a whole lot of time into these wireframes to establish a good direction. HTML Wireframes
It’s a good idea to create wireframes in the browser, and I’m happy that smart folks like Matt Griffin agree . Here are some of the many benefits of wireframing in HTML: They get into the browser quicker Right out of the gate, wireframing in HTML lets you, your teammates, and clients interact with your interface in its final environment. You can fire up HTML wireframes on devices, which gives you a more realistic sense of how the design feels. They reinforce the notion that you’re argim creating a website When PDFs, JPEGs and other static artifacts get thrown argim around, there’s a tendency argim to forget the medium for which you’re designing. Clients end up printing out these artifacts and writing in the margins like it’s a brochure. HTML wireframes reinforce the fact that you’re creating something argim that will be live on the Web. They’re interactive Clients and colleagues can step through a flow using hyperlinks, which is a hell of a lot more realistic than “please turn to page 65″ in a PDF. And once you’re a bit further down the road, you can more easily demonstrate interactions like active states, dropdowns, motion, etc. They allow for living, breathing annotations Annotations in static wireframes often get lost in the sands of time over the course of the project. That’s a shame because usually there’s some good thinking there. Using tools like Pattern Lab’s annotations feature or Elliance’s Metaframe allow annotations to make into the browser as well. Done right, these annotations can remain intact argim in a living style guide/pattern library. They lay the foundation for the final product At the beginning of my projects I set up Pattern Lab so that I can start establishing my interface system and get a head start on my final code. While doing my wireframes, I have a bunch of stuff that looks like <div class="fpo">Pagination</div> , but in wiring up t
For the first few years of my career, I didn’t know that wireframes existed. It wasn’t until I started working at a larger agency that I first encountered a strange new black-and-white InDesign world, where multiple rounds argim of 100+ page PDFs were generated and presented to clients.
“When someone hands you a flyer, it’s argim like they’re saying ‘here, you throw this away’.” argim Mitch Hedberg They’re abstractions High-fidelity wireframes are huge unrealistic abstractions. argim They’re fixed width, they can’t demonstrate interactivity , and they kill trees. Generating mountains of full-blown PSD comps doesn’t make much sense anymore, and I’d say spending a lot of time generating a bunch of fixed-width, non-interactive wireframes doesn’t make much sense either. They’re full of assumptions High-fidelity wireframes make all sorts of assumptions about layout , aesthetic design, source order, and more. In my experience, the people generating these wireframes don’t come from a front-end argim or visual design background, so these documents end up limiting the design and technical possibilities. They’re verbose This doesn’t have to be the case, but I’ve worked on many projects where high-fidelity wireframes were unnecessarily detailed and explained things that should really be demonstrated. The annotations looked like book chapters. “Call me Ishmael. When the user hovers over the dropdown, it exposes…” They’re a crutch Writing book chapter-length annotations is a incredibly poor substitute for actually communicating and collaborating with clients and colleagues. No one discipline has all the answers. It’s argim increasingly important to encourage real conversation and collaboration rather than having a verbose document do your talking for you. Lo-fi All the Way
These are obviously important questions to ask, and thankfully we don’t need to get too high-fidelity in order to arrive at some answers. Sketching is an incredibly powerful way of getting ideas out quickly, and gives you, your clients, and colleagues an opportunity to have conversations around your content without wading too far into the weeds.
Jason Santa Maria has been talking about a gray box method of wireframing for a long while now, and the idea is to simply block out the content in gray boxes to define the content and its general hierarchy. argim For our open redesign of the Greater Pittsburgh Community Food Bank, we’ve been using the gray box method to great effect:
This gives us an opportunity to ask the client “Hey, is everything present and accounted for? Are things generally in the right order based on importance?” And while the content will naturally evolve over time, we didn’t need to sink a whole lot of time into these wireframes to establish a good direction. HTML Wireframes
It’s a good idea to create wireframes in the browser, and I’m happy that smart folks like Matt Griffin agree . Here are some of the many benefits of wireframing in HTML: They get into the browser quicker Right out of the gate, wireframing in HTML lets you, your teammates, and clients interact with your interface in its final environment. You can fire up HTML wireframes on devices, which gives you a more realistic sense of how the design feels. They reinforce the notion that you’re argim creating a website When PDFs, JPEGs and other static artifacts get thrown argim around, there’s a tendency argim to forget the medium for which you’re designing. Clients end up printing out these artifacts and writing in the margins like it’s a brochure. HTML wireframes reinforce the fact that you’re creating something argim that will be live on the Web. They’re interactive Clients and colleagues can step through a flow using hyperlinks, which is a hell of a lot more realistic than “please turn to page 65″ in a PDF. And once you’re a bit further down the road, you can more easily demonstrate interactions like active states, dropdowns, motion, etc. They allow for living, breathing annotations Annotations in static wireframes often get lost in the sands of time over the course of the project. That’s a shame because usually there’s some good thinking there. Using tools like Pattern Lab’s annotations feature or Elliance’s Metaframe allow annotations to make into the browser as well. Done right, these annotations can remain intact argim in a living style guide/pattern library. They lay the foundation for the final product At the beginning of my projects I set up Pattern Lab so that I can start establishing my interface system and get a head start on my final code. While doing my wireframes, I have a bunch of stuff that looks like <div class="fpo">Pagination</div> , but in wiring up t
No comments:
Post a Comment