First starting out in the design world coming directly out of school, I was constantly testing the waters on what the quickest, but most efficient way was to getting a project from initial idea to completion. The program I graduated from didn’t specifically tell me a certain direction to take when planning out a project, but instead just wanted a completed project. The task of figuring out how to layout a website for best usability, for example, was ultimately up to me to convey my ideas to a client. How to go about this was always key to keeping a project from over running a deadline.
I toyed around with starting out on paper doing simple mockups, jumping into Illustrator for a little more robust mockup, or even diving straight into photoshop where it was almost a completed design. Being an artist, I still love to doodle on a piece of paper, but overtime have found that I am a lot more proficient when I utilize the computer to help create a mock up. Unfortunately, Illustrator doesn’t translate well into the web world for me as I do not look at it like a layout program more so an art board. Photoshop is ultimately where I end up to create the final designs for production, but for initial layout, it’s very cumbersome. This is where doing very simple black and white wireframes are key.
Word of caution
One word of caution I will say is that the rest of the team, be not the designers, should be able to have a decent visual imagination on how the final product might look. I say this because the wireframes I typically rely on to produce are very crude. They consist of boxes outlining content sections, simple textual headings, and multiple note tags explaining what could be in certain areas. To me, these rudimentary wireframes are more so for layout of content focusing less of exactly what this content will end up being. Hopefully at this point, the team has a visual concept of how a page would be laid out.
A step further
Sometimes these crude wireframes have gotten to a point where the layout and “content” will be, but some more visual cues are needed. As a designer, I have found that it is best practice to not introduce a product that could be considered final. This is to protect you from shooting yourself in the foot to a point where there is no return. Also, considering your client or the rest of your team, this will prevent them from being caught up in the visuals to a point where all the do is focus on the color or how big the logo should be.
Just this past week, Real Travel] had the opportunity to sit down with a past product manager of Netflix. I won’t get into too much detail on why we met with her, but I will say that good new things are in store for us at Real Travel. She went on to tell us how her past endeavors and where she is currently at CoolIris have gone about product development and their best practices. In her talk, she mentioned creating Lo-Fi mockups which they would use for usability testing to groups of people.
Lo-Fi mockups are similar to wireframes, yet they go one step further. They are are completely black and white, use little to no imagery — use of logo, symbolic areas for photos, simple icons, etc. They allow for more messaging and actual content to be designed in. When realizing this, it reminded me of my wireframes I do on a regular basis for product development. Occasionally I use icons and symbolic imagery with minor messaging, but only to a point where I need to then jump into Photoshop to complete the design for more visual representation.
In the past at Real Travel, we had relied on the internal team to make the decisions for content and design. Now, we are moving into a realm where we will need to be doing usability testing to groups of users to make sure they get what we are trying to do. Using Lo-Fi mockup mentality will definitely go a long way in this next step so that we do not blind the importance of the test group with pretty colors on a site that could be considered a final product.
My Tool of the trade
As mentioned above, I toyed around using tools from paper and pencil to Illustrator to finally Photoshop. As comfortable as I am using these tools for other types of workflow, I have not found a better tool than the use of Omigraffle. I find it very simple create nice wireframes on the fly and there is a big developer community who have created free stencils for use in the app that coincide with wireframe making. To find a good selection of free stencils, please be sure to check out Graffletopia.com. Another resource for a great selection of stencils for wireframes comes from Konigi.
Of course there are other apps out there that do this same thing that do not cost as much as Omnigraffle, but I found that this application best suited my workflow needs.
Other apps of recognition
Omnigraffle is great for simple wireframes, but what if you had multiple designers on the team with their own opinions of how things are laid out. Of course you can share the graffle file between each other, but that can get cumbersome making revisions and seeing what is current. If this is the case, I have found a few online web app options.
Hotgloo
[Hotgloo](http://hotgloo.comis a pretty good tool for this purpose. It allows you to share multiple projects across a team and allows the ability to set roles on a team such as publishers, editors, etc. to control who can change what.
Seeing that I am more comfortable doing my wireframes on Omnigraffle, I found doing this web based was a little cumbersome —there were many more clicks to get the outcome I needed. Another draw back that could be considered is that is it Flash based utilizing Flex technology. If you are one to shy away from using Flash, this is probably not a consideration.
Mockingbird
Mockingbird currently in Beta, very similar to Hotgloo in functionality and options, but this is the cool cousin of Hotgloo. I say this because it uses Cappuccino to render and control everything on the art board so it is Flash free. Only draw back to this is if your team is still in the dark ages of Internet Explorer, it’s about time to upgrade to something better.
Let the ideas flow
These wireframes are key to getting your project out and running. Everyone has his or her own ideas on how a web project or even a print brochure should be laid out. Why waste the time to put blood, sweat and tears into a design that is ultimately ripped apart by the client. Start out small, but always have final visual ideas in the back of your head.