The UI/UX Wireframe Hack Schools Don’t Teach

Wireframing is a very common UX practice. But is the traditional approach overrated in some cases? In this video we explore an alternative to the traditional wireframing for landing page design.

📕 Show Notes 📕

#figma #figmatutorial

➡️ QUESTION — Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video—I’m happy to answer!

[DarrenNorthcott]

I actually have started using a wireframe component library, that way you can just drag and drop your elements in to create very very fast wireframes, without the visual distraction of other products branding. This way you can actually duplicate the components and start adjusting them in design to basically design your page from the wireframes without a bunch of re-work. I'll be dropping a tutorial on this soon ;)

[d.o.nmuzic]

Tim, I just started learning Figma this week. And I’m currently getting comfortable with creating wireframes. This method is so useful! Thank You 🙏🏾

[matheuscardoso]

No doubt Tim you are one of the best YouTubers currently, I am very happy to be learning at the same time you are making these videos!

I believe that many who go to your channel are also beginners, a video tip would be to explain the whole process of designing a landing page to a fictitious customer, from the wireframe to the design in Figma and exporting to the frame, it could be a series, it would be interesting

[adilbek.ermekov]

That's a really interesting and useful technique. Thanks for sharing it with us!

[Mark-qlni]

I really like this approach, traditional wire framing feels like a relic of the past - the most that would be needed would be a in-depth sitemap like can be done with Relume then jumping into this phase for homepage and any prioritized top-level pages to then get sign-off and move on to the the rest of the build. Great stuff dude, thank you!

[nithyshkumar]

I recently came through your channel..such an informative video, from now on i'm going practice these figma animation tutorial daily., also for sure i'll refer your youtube channel for the ui/ux aspirants. great work! thank you!

[meowlgmeowmeow]

This is literally what I was doing yesterday after watched some other videos from your channel. It's so crazy that I'm watching your updated video now showing a much better way of doing the same work. Super duper nice work Tim!!!! Just love love your channel and can't wait for the next one

[ArafatHassan-uhbb]

Your videos have good values, i learned a lot. keep up the good work of teaching us

[sayekatchakraborty]

I use this technique from the 1st video you published. It's really helpful to design better UI web pages. Thank you 🎉❤

[hackwithharsha]

Thank You !!

Best part for me is how you used opacity and lock in the end of video..

[YashPatel-rguo]

Hold CTRL and drag for cropping images

[lemonline]

Loving this content, Tim! Could you do a review of Penpot?

[jeremyfultineer]

Once again, doing the lords work. Thank you.

[ikennagibson]

Tim my man! Always giving the community quality content. Tim I can remember you once did an elaborate video on this in the past, but do you use this concept for SaaS products, for ex: Dashboard designs?

[JaySnow]

Great approach! Thank you, it`s very usefull.

Armed! Now I have a whole series of questions.
1. Why do you put it into that specific 1440px before capture it to Figma, if you resize it in Figma anyway? Why not just capture without Dev mode?
2. What do for you capture every section, if you can capture whole webpage (can perform with Chrome extension, or I use Vivaldi and Capture whole page is already an option. And then you can duplicate it and cut into whatever section you need.
3. Why do you even cut them into sections?
4. What tool do you use to capture?
5. What other sites can you recommend to get designs for inspiration?

Thanks a lot, Tim! That`s very useful, as I said. I will definitely use it!

[fabioto-yw]

Uauuuu. Very useful tip. Thank you Clint Eastwood from the inverted world.

[xhongaronga]

Great video as always, my brother!

I didn't know you could change sizes within the inspector tool.

That's such a freaking hack to get mobile versions as well!

[Axis-udxs]

Hey Tim! Been watching your awesome content for some time now and its been a boon since I am just figuring out responsive design. Might I suggest you create a video where you design a whole responsive website or app in figma? I am still a little doubtful on using auto layout and constraints on a larger project because i have been practising it on smaller components like cards or navbars.
It'll be of great help!

[jamiefrost]

This is really helpful thanks a million. I’m not sore how I can set the dimension in the first step after opening the websites in different tabs.

[djashawe]

Thanks a lot for great tips as always. What would be your ideal go to dimensions for tablets?