For those of you asked (and because I didn't explain very well in the video)... The keyboard shortcuts I'm using: Spacebar + Click = Grabs the artboard and moves around without zooming in or out Command + "+" = Zoom in Command + "-" = Zoom out "a" = Direct select tool, or how I was grabbing those anchor points "v" = Selection tool, how I would grab everything "i" = Eye dropper tool to select different colors "t" = Text tool "m" = Shape tool Hope this helps explain a bit more!!

@milanhakajprodakshn

9 жыл бұрын

Mackenzie Child Where can I get these mockups toolkit?

@mackenziechild

9 жыл бұрын

Milan Hakaj You can get them here (mackenziechild.me/wireframe/) OR I also give them away to use in the Unicasts courses (because we go through the wireframing process... www.unicasts.com/courses)

@seanbarryuk

8 жыл бұрын

+Mackenzie Child Did you make that Wireframe kit?

@mackenziechild

8 жыл бұрын

Sean Barry I did :) Do you have any questions or anything about it?

@seanbarryuk

8 жыл бұрын

I'm just really impressed that you made that yourself. It looks great & seems really useful. Good job!

Glad I found this! Thanks for sharing and making the process straight-forward and clear.

@mackenziechild

8 жыл бұрын

+MakeDestroy So glad I could help make things clear :)

Finally someone with a serious 101 :) Thank you!

Amazing how you explained this better then my prof. and you made it more interesting with real world examples. Can't wait for your next video's!

@mackenziechild

9 жыл бұрын

Thanks :)

Found this video both informative and useful. I bought you kit. A must have asset Mackenzie Child!

Great tutorial! Just started learning how to design UX and this was so helpful!

Awesome presentation, great Job. Thank you.

Thanks, Mackenzie, for all of your amazing tutorial. Every of your tutorial is a masterpiece.

@mackenziechild

7 жыл бұрын

Glad you enjoyed it dude!

so far this has been the best wire-framing / mockup video I've ever seen and I saw a lot.. hats off to you my friend..

@mackenziechild

7 жыл бұрын

Thanks :)

Thank you for making this video. I appreciate it. I'm getting into web design and I really love it.

thank you,. i am about to start with web design and that was very helpful.

Thank you for taking all this time to explain! :D

Thank you, I found this very helpful, articulated like a boss.

@mackenziechild

9 жыл бұрын

***** Haha thanks :)

I really enjoyed the video. Got many useful tips from it. Keep them coming! It's better to make wireframes in Illustrator and end mockups in Photoshop?

Great Video Mackenzie, Keep the awesome work.

@mackenziechild

9 жыл бұрын

Thanks Michael :)

Love the user flow kit 👍 thanks mate

Very useful tutorial, I love it. Thank you very much!!

@mackenziechild

9 жыл бұрын

Khun Emz :)

great tutorial one of the best I have seen on UX

Thank you very much! it's nice to look at the work of a top-class specialist

quite interesting, thanks for your efforts

Thank you very much for this tutorial.

Thank you , this video was very helpful 👍

That was really good. Thanks!

Great stuff Mackenzie Child. Ive fully subscribed.

Could you elaborate on the keyboard shortcuts you used.

@Mackenzie Child Thanks for going through the how and why of this process. Do you have other videos going over the other phases in the UX process? Personas, Information Architecture?

Thanks man! Your tutorials are awesome! :D

@mackenziechild

9 жыл бұрын

Thanks a bunch Marius :)

Thanks Mackenzie .. was excellent .. you should definitely do more tuts on wireframing .. I'll be heading over to purchase ur kit .. perfect timing for me.

@mackenziechild

9 жыл бұрын

Paul Saunders Awesome, thanks Paul :) I'll try to do more in the future!

God, Thank you! I really needed this! Appreciate this in-depth video! Once again thank you!

Interesting video. Just what I wanted, to see another designers process. I tend to go from a text editor or mind-map app to a sketchpad to Hi-fi. I don't really do digital wireframes. So it's cool to see another designer I respect use them and talk about why. My favorite part was seeing you wield that sharpie. More please!

@mackenziechild

9 жыл бұрын

Thanks man! When I first started in design I didn't do any of this... Just jumped straight into photoshop. But these does really help me think through the different avenues & options to explore.

@OfficialDevTips

9 жыл бұрын

Yes. I think people go hi-fi to early very often. When I did a series called "how to ... whatever... from start to finish" we spent the first episode talking about personas, needs, goals and the different means of discovery. The second video was about 15 min of wireframes and 2 min of PS. Didn't code till the fourth video. Every now and then I get a comment like "just get to the code!!" But honestly the most important thing is putting the work up front, the rest is just follow through. I get a lot of people saying that this was the missing part of their process.

@mackenziechild

9 жыл бұрын

Yes! I very much agree :) The majority of the work is done even before you hop into any software program.

Amazing Tutorial, amazing voice and background music too... :)

Great video - thank you

Thanks a lot for this video !

Great Content man !! awesome explanation .. thanks :)

@mackenziechild

8 жыл бұрын

+S.D. Feels Thanks man :)

That was a very interesting tutorial! Thank you :)

@mackenziechild

9 жыл бұрын

Glad you like it :)

You, sir, are awesome.

hey, awsome work! May i ask about how long it takes you to do each of the four steps for one page of a website? (except for the userflow, here i would like to know the whole thing) cheers m

thank you mackenzie

I drew my first wireframe the other day. I was so proud of it but the way you do yours is so beautiful. I definitely want to purchase this wireframe kit in the future.

@mackenziechild

7 жыл бұрын

Yay! Nice work Julia :) I'm actually in the process of creating a new wireframe kit for Sketch that I think is going to be awesome!!

Hi, Mackenzie! Happy New Year:-) Very nice set; I just purchased it. You may want to revisit the symbols when resized; in Sketch 48.2, they all need to be anchored and given fixed widths and heights-since Sketch did away with that functionality in this latest iteration. Thank you, Doug

I loved this tutorial, how can i get this user flow web pad kit?

Good info, thanks Mackenzie. But before wire-framing. How do you initially come up with the design idea? Where do you go for inspiration?

sangat bermanfaat sekali video nya...Lanjutkan Gan..

Great work! Thanks Mackenzie :)

@mackenziechild

9 жыл бұрын

Vesta Jakstaite Thanks :)

Very helpful. Thank you.

@mackenziechild

7 жыл бұрын

You're very welcome :)

Great videos Mackenzie, subscribed :)

@mackenziechild

9 жыл бұрын

Alberto F.G You're the best, thanks!

great workflow

@mackenziechild

9 жыл бұрын

Thanks :)

Nice one ..loved it :)

@mackenziechild

9 жыл бұрын

Sakshi Jaiswal Thanks Sakshi :)

Hello Mackezie, Thank you for this video, Im planning to develop a web application, Which of the kits mentioned can convert wireframes to html to maka my development easy?

Nice work , Thanks a lot

@mackenziechild

8 жыл бұрын

+Abed abu assa Thanks dude!

never knew wireframe could be this much imp , thnx mac

@mackenziechild

9 жыл бұрын

Lalit Yadav :)

Instead of Awesome video, I would say very thoughtful and systematically presented video. Thanks for sharing the info. It has cleared lots of my doubts. Keep it up the good work and share more.

@mackenziechild

9 жыл бұрын

Thanks :)

This is awesome stuff :) :Thumbsup:

Great vid as always. What camera and mic do you use to record yourself?

@mackenziechild

9 жыл бұрын

Thanks :) I use a Canon Rebel T3i with just the standard lens & a Blue Yeti mic. Eventually I want to upgrade both, but they're working really well for what I'm doing as of yet!

Your Wireframe Kit is awesome ... ! Keep going ;) Great vid btw.

@mackenziechild

8 жыл бұрын

Awesome! Glad you like it :)

@productnerd

7 жыл бұрын

+Mackenzie Child Awesome vid! Id love to use your wire framing tool but the link appears broken :/ can i find it elsewhere? thanks!

Gracias Mackenzie :)!!

@mackenziechild

9 жыл бұрын

:)

Hey Mackenzie, really enjoyed your video. I found it informative and easy to follow. I am looking to expand into the world of UX design in hopes of one day becoming a UX designer myself. However, I am a complete newbie from the outside. I became interested in the profession because it easily combines all my interests: Technology, creativity, communication/people oriented, project management etc. I really would like to know if you would be willing to offer any advice or resources for a person building their knowledge from scratch? I also wanted to know if you would be open to mentoring on occasion?

Great Video ! Waiting more for the development process after Wireframing ! I noticed one thing in the process.. Web Designers want everything pixel perfect :)

@mackenziechild

9 жыл бұрын

Thanks! Haha yep, as it should be ;)

Great work! Friend Mackenzie Child

@mackenziechild

9 жыл бұрын

:)

beautiful, thank you

@mackenziechild

8 жыл бұрын

+Mohamed Hak You're very welcome :)

thanks!

that's a cool file. where can I get it?

boss...you are fantastic :)

@mackenziechild

8 жыл бұрын

+Gazi Tarique Mahmud Thanks dude :)

what is that website you are using sir?? im begginer

you are fantastic!

@mackenziechild

8 жыл бұрын

+Aleisa Ribalta Aww, thank you :)

than you!!!

Wow 😮 I saw all of it in my head and all he did was explain it

How did you create the wireframe kit library? I see there are a lot in your illustrator file. The reason I asked is I also want to create my own wireframe kit library. If you can give me some idea that will be great!

Dude, what type of camera are you using? Your video looks awesome.

@mackenziechild

7 жыл бұрын

I use a canon 80D with a 10-22mm lens 👍

Hey Mackenzie, great video... I've been learning coding for about six months and I'm having some trouble with the design it self, any tips beside watching the amazing videos of yours?

@mackenziechild

8 жыл бұрын

+Eduardo Reis Nobre I would try your hand at replicating some designs you like... Do that A LOT ;) After a while you'll begin to pickup some things as you go.

@reisnobre

8 жыл бұрын

Where do you recommend me to look up things on the same "mood" that the things that you do?  I really like the things that you do...

@mackenziechild

8 жыл бұрын

***** Dribbble.com or Behance.net are great places :)

Thanks you sir 💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗

Great video. Really learnt a lot. Would you possibly do a video detailing the next step after wireframing in the future?. So how you would go about creating the design in Photoshop step by step. That would be really helpful and also interesting!

@mackenziechild

9 жыл бұрын

Yep.. I'm still debating it, but I may do another 12 in 12 challenge, but for Redesigns. So I'd take a site, like Reddit for example, wireframe it, then take that wireframe into Photoshop or Sketch and do the design. Then possibly after that is over, I may do another 12 in 12 and code each of those designs :)

@EzeikelPemberton

9 жыл бұрын

That would be awesome! That idea definitely has my vote (Y)

@mackenziechild

9 жыл бұрын

:)

What do you mean by low fidelity, high fidelity and mid fidelity? are you talking about complexity of the wire frame or simplicity of the layout? thanks

@kimfucku8074

8 жыл бұрын

@ roughly 19:00 low fidelity @ roughly 26:00 mid fidelity No example of high fidelity here but there are tons of explanations on the internet (also pros and cons of high fidelity wireframes)

Amazing Video both information wise and visual presentation as well. I would like to know what tools you used to develop this video.

@mackenziechild

8 жыл бұрын

+Amit Singh Thanks dude :) I use screenflow to record the screen & final cut pro to edit everything together to make the videos :)

@amitspecially

8 жыл бұрын

Mackenzie Child I am gonna try it. I will be glad if I could match even 50% of your video quality :P. Wish me luck.

@mackenziechild

8 жыл бұрын

Amit Singh Good luck :)

What is that Link submission Page for? I didn't get it.

Thank you for uploading. Does your wirekit link still work?

@mackenziechild

7 жыл бұрын

Hey Chantel, use this link instead 👉 mackenziechild.withcoach.com/wireframe-userflow-ui-kit.html :)

@chantelxchantel

7 жыл бұрын

Mackenzie Child Thank you!

Great clip.

@mackenziechild

8 жыл бұрын

+Julian Oczkowski Thanks Julian :)

great... !

@mackenziechild

9 жыл бұрын

Vic Brain Thanks :)

Schweet, will consider doing first rough drafts in this way and getting your UI-Flow kit and only the more detailed wireframes with dedicated tools.

@mackenziechild

9 жыл бұрын

Robert LC - Digital Artist Awesome :) Let me know if the process helps!

Hi nice bumper video. May you give me a template .aep ?

Can you upload more design related videos?

@mackenziechild

9 жыл бұрын

I definitely want / plan too... I just have to work out how to go about them. Design videos take a lot longer to create than my development videos.

I love you! THANK YOU ;)

@mackenziechild

7 жыл бұрын

You're welcome :)

you good THANK YOU

@mackenziechild

8 жыл бұрын

+Sunil KOMMU You're welcome :)

3:30 basalmiq, mockingbird, mockflow are the wire framing apps he talks about

@pedromcfernandes

8 жыл бұрын

+Dennis G Daniels Thanks man!

@Matonias

8 жыл бұрын

+Pedro M. C. Fernandes You should try sketch. Its also super nice and professional.

@pleabargain

8 жыл бұрын

+Matonias thank you

Thanks for the amazing video tutorials. You are the best design channel in the net! If you are come to İstanbul, Turkey just leave a massage, we have tea every time :) Thanks again.

Where can I get the Wireframe kit?

@mackenziechild

7 жыл бұрын

Hi Paula, you can find the wireframe kit here if you're interested: mackenziechild.withcoach.com/wireframe-userflow-ui-kit.html

Thanks

@mackenziechild

8 жыл бұрын

+Shuvo Khan :)

Really inspiring wallpaper behind you, "GET SHIT DONE".

@mackenziechild

9 жыл бұрын

:)

I really appreciate this tutorial, (it's so relaxing too), but I wouldn't think I need to make the wireframe model on the computer as well...I feel like that would be too much extra work; I think doing it just on paper would be sufficient.

@mackenziechild

7 жыл бұрын

Yeah for sure! You should do whatever works best for you :) Some projects I use my kit to wireframe and really think through / get an exact idea of what I want... Other times I just quickly sketch it out on paper.

Please make more article after you learned RoR, did you land any job with your RoR skills? I like your article.

@mackenziechild

9 жыл бұрын

Thanks Datin :) Nope, didn't get a RoRs job, but I wasn't looking for a new job (I really like my current one). Got more videos in the works!

There are user and site flow

Can we get Logo Designing tutorial and flowchartting the community like sites

@mackenziechild

9 жыл бұрын

Bharath M That's a good idea! I'll add that to my list of potential videos / courses :)

Just watched the whole video, and while you made a lot of great points i also think it's far from an optimal way to work. Low wireframe is always paper... just like you said But mid & high can be done solely in Balsamiq, and much faster that the way you are doing it. After all, wire framing is all about speed... not looks. Which brings me to my last point. You high fidelity would be really hard for any client to really make sense of. Not because they are not great looking, but you should really make it clear by colours, what is links, buttons etc. Besides that, great video ;)

can you explain difference between Ui(user interface) and user experience(ux). will wait for you r this video.

@mackenziechild

9 жыл бұрын

The simplest way to put it would be: The UI is what people use to interact with your product, and the UX is how they feel while they do.

@mackenzie child Thank you!! your link is down mackenziechild.me/wireframe, do you have another way to try it out?

@DouglasButner

6 жыл бұрын

ah i see now, in description if anyone else is looking

In your opinion, is scaffolding bad? trying to understand why programmers are saying its bad and wondered if you use it.

@mackenziechild

9 жыл бұрын

Yeah I tried *not* to use it in my 12 in 12 challenge apps simply because I was trying to learn what was happening, and yes I have used it before... But no, I don't think scaffolding is bad. Its just a starting point. It gets you up and going quickly, then you'll refactor & add your own code. (Although I know, like you said, other developers may disagree with that).

@alliaskistrust

9 жыл бұрын

I was thinking as long as you refactor and add my own code, what could be the problem. They make it seem like it's a matter of security. I was expecting you to say something like that. But as usual, thanks!

@mackenziechild

9 жыл бұрын

Haha, no problem :)

I would love to see you code a website like cars.com or something complex like ebay with RoR.

@mackenziechild

9 жыл бұрын

Yeah maybe I can do that in the future :)

@davidofug

9 жыл бұрын

Mackenzie Child Sometimes coding all that won't prove everyone of us, I already know you are great and with a team. You can code ebay or Amazon or whatever in just days.

@mackenziechild

9 жыл бұрын

:)

You need to include pictures of this on the site where you sell your wireframing kit. It's really hard to gage the value of your kit with one small thumbnail pic. And a 43 minute video is a large investment for a consumer

link to your pack is dead. is it still out there?

@mackenziechild

9 жыл бұрын

Chris Mccaslin Heres a direct link: gumroad.com/l/MEsVf (Also, I'm giving away my wireframe bundle as part of my site Unicasts Subscription if you're interested: www.unicasts.com/)

@Chris-qw2iz

9 жыл бұрын

I haven't played around with ruby yet so ?I might check out your tutorials :D but thanks a ton!

@mackenziechild

9 жыл бұрын

Sure thing :)

Why muse nd not Dreamweaver

@mackenziechild

9 жыл бұрын

Marquese Hauptman Huh?

@theblackq3772

9 жыл бұрын

Mackenzie Child I see that you are using MUSE instead of Dreamweaver. Was just curious of which do you think is better to use for creating layouts.

@mackenziechild

9 жыл бұрын

I use Adobe Illustrator in this video... Don't use Muse. But I usually start with Photoshop or Illustrator to start the layout, then use Sublime Text to code it. I prefer not to use something like Dreamweaver so I have full control over the code (instead of having it generated for me)

@theblackq3772

9 жыл бұрын

Mackenzie Child Alright, thanks for the information and great video as well.

@mackenziechild

9 жыл бұрын

Thanks Marquese Hauptman :)