Creating Wireframes: Examples, Advice and Tips

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

Matt Kelly, Lead Software Engineer at interaction design firm ZURB, discusses solutions for rapidly prototyping sites and web apps that work on any kind of device, at any resolution. Through code examples, we’ll look at creating complex layouts in minutes that let you easily try out different experiences and different interactions. **Check out marakana.com for additional videos regarding mobile development solutions.

34 Responses to Creating Wireframes: Examples, Advice and Tips

  • Monlam Makhampa says:

    hi Michael,
    very helpful as always.. i have a question, it seems you have designed the site in php but i can see dynamic contents (posts) from the wordpress blog on the homepage. how do i do that?
    thank you for your great videos!!  i just love it!!

  • tcgnow says:

    You should split this video into two smaller videos titled “Difference between Lo- and Hi-Fidelity Wireframes and When to Use Each” and another titled “Brief Overview of Mockingbird: How to Use Symbols and Some Wireframe Examples.” As is, it is misleading and uninformative for someone looking up how to create a wireframe as well as the process and decision-making behind it.

  • tilemarron says:

    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 says:

    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)

  • Greensa Livey says:

    Great Advices and tips.

  • schuaozven says:

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

  • Sylvia Klop says:

    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!

  • Tony Brown says:

    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

  • Gwai Lo says:

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

    I admire your work. Please keep it up.

  • Dora E. H. Crow says:

    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 says:

    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!

  • mlwebco says:

    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!

  • Wistler Charles says:

    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

  • Billy Haynes says:

    Oh ok I’ll go check it out, thanks. I know, I’m slacking again, geez I need to prioritize better! LOL.

  • mlwebco says:

    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

    ;)

  • Billy Haynes says:

    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 says:

    thanks for the kinds words! much appreciated.

  • mlwebco says:

    thanks, the scrolling images on my wife’s site was done in flash. I’ll be creating a video on that soon. ;)…it’s pretty simple to do.

  • Conceptskatemedia says:

    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 says:

    Hey thanks for the feedback. I’m glad you can take away something from these videos. We can all learn from each other. ;) much appreciated.

  • mlwebco says:

    Thanks Cornel, feel free to email me anytime with questions at mlocke(at)mlwebco(dot)com.

    For starters, there’s a lot you can do to start building your portfolio. You can design a few sites for fictitious businesses (a restaurant, flower shop, bike shop, etc.) just make it up. You can also redesign popular sites like craigslist, bank of america, youtube, etc. these are just ideas. But basically, picking any site and redesigning it is a good way of building a portfolio.

  • cuekutt says:

    Hey Mike, Thanks for the great video. I enjoy all the advice you give. I’m a new designer, just a month deep into my web design program. Do you have any advice for someone as new as myself, as far as starting a portfolio, looking for work, what type of work do you recommend for someone just starting out. Thanks again. Cornel

  • jorge luis dueñas says:

    Good !!!

  • Asep Apandi says:

    Great presentation video. Thanks you verry much.

  • Tom Bird says:

    Hey Matt, I was just wondering what are your thoughts on the Twitter Bootstrap?

  • Shruti Jog says:

    thanks for informative tutorial

  • James Stafford says:

    Wow nice good stuff.

  • rachana varun says:

    Great presentation video
    Thanks 

  • ashishanand25 says:

    good but easy

  • Tyus Durant says:

    I have a couple of Zurb tutorials up. I also included files on dropbox for you to pull down. I havent gone over everything but it will give you a good start.

  • NishPixels says:

    Great presentation

  • Kirk Kohler says:

    Go Matt! Great to hear your talk on html5 sponsored by Marakana. We just booked a training with them. Let’s grab lunch and catch up if you are ever in the city or east bay.

  • bawong415 says:

    and now some tutorials on how to use foundations. step by step 5 minute tutorials would be nice

  • grupo64bits says:

    very interesting… gonna try it asap, btw he didn’t show an example of the response of the web in horizontal mode at phone