The UI/UX Wireframe Hack Schools Don’t Teach
Вставка
- Опубліковано 19 кві 2023
- 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 File: www.figma.com/file/wpbBVtlQnQ...
➡️ Master Figma Playlist: • Crash Course: Master F...
➡️ Subscribe To The Channel: / @timgabe
#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!
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 ;)
Tim, I just started learning Figma this week. And I’m currently getting comfortable with creating wireframes. This method is so useful! Thank You 🙏🏾
that's awesome! thank you!!
No doubt Tim you are one of the best UA-camrs 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
thank you so much for this, Matheus!!
and thank you for the video suggestion, I'll definitely add that to my list. 🤩
That's a really interesting and useful technique. Thanks for sharing it with us!
really glad you found it useful!! 🤩
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!
thank you so much, Nithysh! really appreciate the support!! 😃
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!
thank you so much, my brother 🙏💜
yes!! the inspector tool is so versatile and useful 🤩
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
thank you for the candid comments, Mona! so glad you enjoy the videos and that they're helpful for you 😃
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?
I use this technique from the 1st video you published. It's really helpful to design better UI web pages. Thank you 🎉❤
so cool to hear that you're using it, Sayekat! 😃
You say it makes no sense doing it with a non functional landing page.. but you are using a non functional landing page as example. The goal of a wireframe is to do the information design and the information is coming from the usergroup. You are taking interactive elements from competitors... don't think this makes a lot of sense.
Edit: How is this even UX Design? There is not even a sentence about the process.
Thank You !!
Best part for me is how you used opacity and lock in the end of video..
Your videos have good values, i learned a lot. keep up the good work of teaching us
that's nice to hear. thanks for supporting!!
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!
thank you so much, my friend!!
check out this tutorial for more responsive stuff:
ua-cam.com/video/tJCv91c6Krk/v-deo.html
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!
Thank you 👍
my pleasure, my friend 🤩
Loving this content, Tim! Could you do a review of Penpot?
great to hear, my friend 🤩 not a user of Penpot, but maybe in the future!! 😃
This was great; thanks!!
thanks a lot!! appreciate the comment
what was the example he gave for inspirations? I couldnt quite make it out. thanks for the great content.
Thanks a lot for great tips as always. What would be your ideal go to dimensions for tablets?
hey CD!! thanks a lot 😃 I think it really depends on what kind of design it is, but in the end something in-between desktop and mobile will mostly be a good bet (so maybe an iPad mini, for example)
This is damn good idea!
thank you!!
Once again, doing the lords work. Thank you.
Hi Tim! I've just finished all your course in Figma and I have to say thank you for all your work ^^ Great video, straightforward to the point, and also include all the things we need to know in the simplest way. VERY HAPPY TO LEARN. Look forward to seeing more videos from you!
that's amazing! thanks a lot, lee!
This is super cool 🔥
glad you liked it, ardian!
wow thank you!
thank you for commenting and supporting! 😃
I used to do actual wireframe but it instead makes me less productive and inefficient. I found that I work well with doing wireframe along with the high fidelity design at the same time
Assuming I already have good understanding how the website should feel and aesthetics of the website, I would have pen and paper and brain dump random layouts. Do 10 second personal A/B testing and just start designing (or coding)
i think everyone has to go with what works best for them in the end!!
Best designer around here!❤
mi galletita 💜
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.
hey Jamie, thanks for commenting! 😃 you get into the dev tools > change from a specific device to responsive > then change as you want!
@@TimGabe sorry for my ignorance. Is that a n extension or do you mean inspect?
Not sure how to access the dev tool.
@@jamiefrost3356 You right click anywhere on the page and select 'inspect'
Thanks for the help mate
Woow! Super useful, thanks
happy to help, Shimerli!! 😃
Alhamdulillah.
Thanks, man, it really helps me as a beginner who is stressing out about how to create a wireframe.
your technique is spectacular 🎉🎉🎉🎉🎉🎉🎉🎉
Uauuuu. Very useful tip. Thank you Clint Eastwood from the inverted world.
This is exactly how I always do my designs lol
haha, cool that someone else does the same as me!
Awesome lifehack ❤👍
lifehacks are the best!! 💜
this is gold
thanks a lot Maciej!! 🥳
@@TimGabe Do you take all sections from one site or you pick your favourite section from different sites?
Hi Tim, could you make interactive landing page in figma tutorial for beginner?
hey my friend 🤩 when you say interactive, what exactly do you mean?
@@TimGabe I mean could you make a tutorial video how to design stunning landing page with prototype interactions and animations inside.
cheat code! Thanks time! 🤯
haha!! thank you for commenting, friend!
How can we contact you?
I’m on Twitter (@timgabedesign) 😃
isn't that redesigning?
Thanks Tim its very useful hacks for us.
happy you liked it Ritche!! 🥳
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?
Ikenna, my dear friend!! 😃 thank you for always being nice and commenting!
well, personally I've only used it for landing page design, but thinking of it I think it could really be used for anything. the problem with dashboards is that they're very contextual and thus it might not be as useful as for the landing pages. still could be very useful though!!