5 unusual ways to create website mock-ups
Ivan | Thu, 2010-07-08 19:12
One of the most important phases of website design is creating mock-ups. Some of the key factors that you should consider when creating wireframes is ease of use for the readers, flexibility for future development and simple hierarchy for the CSS layout.
Here are a couple of tools you can use to create your mockups.
Pencil and paper
You can simply use the old-school pencil and paper setup if you don't mind using an eraser to make corrections. You could create preset grid templates and use a specialised UI stencil kit that helps you draw the user interface elements.
Fingers and iPad
If you own an iPad you should try out iMockups. It's a simple drag and drop application that makes the task a lot of fun.
Keynote and iPad (or Mac)
If you like the easy interface of Keynote you will love the Keynote Kungfu wireframe toolkit. It saves you a lot of time and produces beautiful website mockups. This will also work on the iPad.
Web and Collaboration
If you need to share your work and build a mock-up together with a team of designers or the client you may want to try using one of the many cool collaborative wireframing web apps: MockingBird, Mockflow or Creately.
Firefox and Plugin
If you don't want to leave your favorite Firefox web browser you can try the open source free Pencil project.
If you decide to go with traditional tools like Photoshop and Illustrator check out these useful kits: Yahoo stencils, Janko's Sketching and Wireframing kit and Johnny Nines' Wireframe Symbols.
What do you use to create your mockups?
- Ivan's blog
- Login or register to post comments
Pencil & Paper. It's how good things start.
Terrell Thornhill
e-zign Design Group
nice looking sketch! :)
if I could stretch that good, I wouldn't need one of these programs. lol
Thanks Ivan for the links!
Don't forget Balsamiq. Great for wireframing and interaction design.
Thorny, love your sketch!
----
Dirt and Rust
I invite those that use an Eclipse IDE like Aptana, Flash Builder or Zend Studio take a look at WireframeSketcher for an integrated mockup tool.
Thanks all,
I tell my clients to expect a rough, pencil sketch whenever we're concepting, and usually show them a similar sketch from another project along with the final (which usually looks somewhat like the sketch).
What this does, is it allows the concept idea to stay somewhat fluid, without getting too concrete in the initial presentation stage.
I hope this makes sense.
Terrell Thornhill
e-zign Design Group
Pencil & Paper. It's how good things start
True.
I also use white boards, A LOT. It's just easier and faster to draw on, make changes and keep constant content in the design. Then I just take picures for each one of the pages, as I advance trough the whole concept. That way, I could keep a memory and I could send / show it immediately to the client: a rough look that will always change a little bit when doing the real thing.
I agree. I use whiteboards a lot too. Sometimes even the kitchen fridge. :)
Thanks! But i think simple looking website is very effective.
Webdesign Company
best web hosting
Awesome list! Thanks for sharing, Ivan.
I found that using Keynote for prototyping much faster than even paper prototyping. It's quickly replacing OmniGraffle and Fireworks for me.