Creating Wireframes: Examples, Advice and Tips

http://www.mlwebco.com - In the video I discuss the benefits of creating wireframes for your website projects. I explain the benefits of using low fidelity wireframes versus high fidelity wireframes. Create wireframes online using Mockingbird (http://www.gomockingbird.com).

Category:

Howto & Style

Tags:

• Mockingbird
• Wireframes
• Creating Wireframes
• Low Fidelity Wireframes
• High Fidelity Wireframes
• Website
• Website Design

[wiswis77]

Hello Ml, I'm not a java script programmer as yet, is it possible if you can recommend a site to get some good scripts. By the way thanks for the vid on wireframing

Thanks,

Wiswis77

[mlwebco]

@wiswis77 I would check out a site called "Dynamic Drive" ...they have some really nice scripts you can pull and use on your site. Great resource!

[ghanes14]

I'm going to go check it out now and bookmark it. I remembered something I been meaning to ask during the video. How do you do the blog post section like on your wife's site?

Like, how do I create it so when I post a new post on my blog it automatically updates that section on my site?

[mlwebco]

@ghanes14 regarding the blog posts on the home page, I created a video on that a while back that shows you how to do it. /watch?v=2N4-WvgFFwo

;)

[Conceptskatemedia]

Hello Mike,

This is a fantastic video. Mockingbird will prove very useful for me in the future so I have bookmarked it :)

Also the website you made for your wife looks amazing! Clean, easy to navigate and bold.

Keep up the good work!

Jack

[mlwebco]

@Conceptskatemedia thanks for the kinds words! much appreciated.

[tilemarron]

pretty well explained tutorial about what i was looking for!!! Loooooove it Mike! I'm developing the web site of my church but was looking for a way to do it according to a certain development process... You explained it very simply and well! Thanks a lot!! By the way, your wife is kind of pretty... and i'm a woman! and the website after the wireframe is looking like wooooww!

Beautiful.

[whanganuiwiththeh]

We've just started learning about wireframes for Uni (as part of IA) and this was a really useful tool. I liked the comparison you gave between low fidelity and real life web site - made the process clear and easy to follow. Thanks so much :o)

[GreenyLiveshow]

Great Advices and tips.

[schuaozven]

Great tips and advice! Thanks for introducing us to Mocking bird :) It will really help us Web designers. Keep it up!

[sylviaklop]

Hi, how do you procede from mockingbird into a more hifi wireframe or mockup in Fireworks? Do you import the mockingbird file or something? Sorry I'm a newb to the subject... but your vids are helping me a lot!

[tonyblade67]

Thanks Mike your work is very nice, I use paper >> omnigraffle >> Axure >> then PS html / css / js/ php or a cms :) I was thinking of trying Catalyst any thoughts on that ?

I just don't have the time to invest on learning another software at the moment but if it's worth the time I will look into it

-Cheers

[myxylplx6]

Great tut, Mike. I'm a new developer. Gave me a lot of good info.

I admire your work. Please keep it up.

[Whisperland]

Very helpful - great intro to wireframing. Gomockingbird looks easy to use and makes very clean wireframes. You are SO right about the danger of getting caught up in the creative process if doing this in Fireworks or another creative tool. That would be my weakness. :)

[girlfridayproject]

This is such a great tip. I'm looking to create a wireframe tomorrow and just happened to come across this. I'll give it a try. It sounds like it will save a lot of time. Thank you!