Episode 56: Wireframing
Podcast: Play in new window | Download
Help clear your vision by using Wireframing.
Geek Tool
Webapps
- 04:58 - JumpChart - Collaborative site map and content preparation
- 05:26 - Hot Gloo – The Online Wireframe Application
Topic
- 07:37 – Wireframing
- What is it?
- A basic visual representation in interface design focusing on physical information layout
- Why?
- Allow for design variations while maintaining consistency
- Develop global and secondary navigation areas
- Ability to “try out” lots of layout choices without spending a tremendous amount of time developing the artwork for each one.
- Provide areas for consistent utilities like search, notices
- Frequently aid in exposing new features
- Help flush out questions that nobody has thought about yet
- Keeps a paper trail of design decisions
- Getting clients to think about their site on a page level will help avoid changes later on.
- If you skip this step clients will often focus on design rather than functionality and usability
- Can be used again for creating your next design for that same site while keeping the physical layout consistent for your users
- How?
- Wire framing is most commonly done with paper
- Start with a sitemap, then create wire frames for each of the major pages
- Software
- Visio
- InDesign
- Photoshop
- OmniGraffle
- Protoshare – Used by: Sony, BMG, SAP, 3M, Salesforce
- What is it?
February 17th, 2010 at 4:02 pm
I do wireframes, specifically for myself, because it makes actually designing faster than just jumping into photoshop. A lot of the times my designs drift from the wireframe due to me thinking of new ideas at the moment, but its a good way to start a design. I haven’t gotten to the point of showing the client a wireframe yet, but im not a sales guy, so I let them worry about that.
February 18th, 2010 at 8:39 pm
Interesting. I guess I really only thought about it as a business process not a personal one. Thanks for sharing Cedric!
February 19th, 2010 at 12:01 am
Another cool wireframing tool is Balsamiq. I know they are just about to release an online version very shortly.
But the cool thing is the company and how it’s run. If you have a look at their blog it has some great detail about their financials and how they started etc etc. Here’s an example of how open they are on their blog – http://www.balsamiq.com/blog/2010/01/03/a-look-back-at-2009/
It’s a really useful tool, built by an inspiring man and company.
February 19th, 2010 at 10:24 am
Wow! Balsamiq is pretty freaking awesome. I saw them mentioned as a desktop application but they do have a web one available. Thanks Craig!
February 23rd, 2010 at 9:17 am
Hi Jade,
Thanks for including ProtoShare on your list! As you have found, there are a lot of options when it comes to wireframing programs and ways to use them personally or incorporate them into a process.
ProtoShare is strictly web-based, but can be exported to HTML and is great if you need to share prototypes with remote teams or clients.
If you’ve tried the application, we are always open to feedback, so feel free to contact me if you have comments or questions.
Best of luck in your wireframing activities!
Cheers,
Andrea
@ProtoShare
February 27th, 2010 at 8:35 am
Balsamiq is an interesting company and a great story.
Another one I have used is http://creately.com/
I usually just sketch the wire frame for myself. I tried some wire framing with customers before but they just didn’t get it. We use JSF which is component based so we wire frame using the actual components that will be used in the application so the user gets to see the actual design. This would be much like wire framing with html. Like you mentioned though it does have its cons because the users get sidetracked by little things like fonts, etc…
February 27th, 2010 at 9:44 am
I think I’ve seen creately before as well.
Yeah there are quite a few tools out there for fireframing. Almost any generic diagramming tool can be used for it!
I’m actually hearing quite a bit that people wireframe internally, but don’t really show them to their client which is the total opposite of what I thought!
Thanks Brian!
February 27th, 2010 at 11:27 am
I did some wire framing with Balsamiq and when I showed the client they just didn’t get it. They couldn’t get past the fact that it looked cartoony. LOL.
June 2nd, 2010 at 6:04 pm
Hi Jade,
Since listening to this podcast I’ve checked out HotGloo. Seems a bit pricey to me for what you get, however it’s definitely the most polished of the wireframing web apps I’ve seen.
One that I’ve taken to recently and purchased is called ‘Mockflow’. It’s a combo online and Adobe AIR application that runs on your desktop. There are a few UI quirks but overall very solid.
My favorite aspect of MockFlow, that I haven’t seen on any others is the ability to submit components from your wireframe into their ‘MockStore’ for others to use free of charge. When you really get down to it, it’s quite possible that someone has mocked up that little item that you need – say a video player or modal window. The MockStore let’s me grab the component, and use it as is or modify it to my heart’s content.
The service also has tons of templates for mobile apps, software, different browsers and devices. It has great export options as well, including HTML and PDF – huge when working with clients.
My biggest grip about the service is that there’s no way to show a certain interaction with an element – a JavaScript popup for example. There’s also no way to link a mockup element to anything other than an internal page.
However, they seem to be fairly quick with updates, so… finger’s crossed!
June 3rd, 2010 at 12:40 am
Awesome! I will definitely have to check it out!
June 3rd, 2010 at 8:51 am
@Phil: yeah Mockflow is very nice, and much more competitively priced than HotGloo. The Mockstore is a great feature that can save you SO MUCH TIME.
Great find!