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.
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!!
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.
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.
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
)
Great Advices and tips.
Great tips and advice! Thanks for introducing us to Mocking bird
It will really help us Web designers. Keep it up!
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!
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
Great tut, Mike. I’m a new developer. Gave me a lot of good info.
I admire your work. Please keep it up.
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.
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!
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!
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
Oh ok I’ll go check it out, thanks. I know, I’m slacking again, geez I need to prioritize better! LOL.
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
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?
thanks for the kinds words! much appreciated.
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.
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
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.
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.
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
Good !!!
Great presentation video. Thanks you verry much.
Hey Matt, I was just wondering what are your thoughts on the Twitter Bootstrap?
thanks for informative tutorial
Wow nice good stuff.
Great presentation video
Thanks
good but easy
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.
Great presentation
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.
and now some tutorials on how to use foundations. step by step 5 minute tutorials would be nice
very interesting… gonna try it asap, btw he didn’t show an example of the response of the web in horizontal mode at phone