This week’s chat topic was about Wireframing. We were assigned to read the following website articles and answer the subsequent questions.
A sketching wireframe tool:
What benefits can you gain by completing a wireframe?
It allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. It’s similar to an architectural blueprint and on a deeper level, very useful in determining how the user interacts with the interface. Wireframing is important because it allows the designer to plan the layout and interaction of an interface without being distracted by colors, typeface choices or even copy.
Do you think working coded wireframes are better for your workflow? Or sketches? Why?
The client can get a feel for the flow and have a much clearer picture of how the final product will work, not just what it will look like or what functions there are with a coded wireframe. However, I feel initial sketches have their place in brainstorming layout ideas, content, etc. In a perfect world where time was not of essence, I would prefer the sequence of “sketch, wireframe, hi-def wireframe, visual, code” or maybe a combo of that along with this sequence: “wireframe, interactive prototype, visual, code”. More than likely the scenario would be at best “sketch, wireframe, visual, code” with a more realistic view of “sketch, code” on simple sites.
This web article explains the case for coding your wireframes:
Another article about coded wireframes:
Article in favor of “ditching” traditional wireframes:
What are some cool things from the assigned articles that you’d like to try using for your next project?
There are several responsive tools from this article I would love to try out on another project: http://blog.woorank.com/2013/08/16-tools-for-responsive-web-design-part-1-grids-and-wireframe/
Two in particular are:
- Responsive Web Design Sketch Sheets
- Multi-Device Layout Patterns
As always, people’s perspectives on the Chat topic, as well as links provided, are great ways to learn. It’s also interesting to check the postings from the other Chat night I didn’t attend to see what links and information was exchanged there. Here are some links to check out from both Chat nights…
http://www.gliffy.com/uses/wireframe-software/ (Tried this out – it’s cool!)
The Wirify site allows you to turn any web page into a wireframe. Pretty nifty sounding – haven’t tried it out yet. The benefit of this tool allows you to see the big picture of a web page, focus on page structure by hiding the content, and analyze page layout. I could see this learning aid being useful because “if you continually observe what other designers or sites are doing for their wireframes, you will slowly get a picture in your mind of how a wireframe helps to organize information for the screen”.
Something to think about…
When designing for mobile device viewing, consider the “thumb test”:
“Try sketching out designs in various sizes and see how much room your own thumb takes up on the clickable area. The visitor should be able to click comfortably with no overlap into adjoining content and one tap should take them to the link. For mobile, ensure that clickable areas are clear, meaning that it must be apparent to the user that this is where they click.”