- 47
- 10 795
Beyond Design with Jelissa
เข้าร่วมเมื่อ 3 ต.ค. 2011
Designing Experiences
Hey guys!
This channel is for aspiring designers and professionals looking to grow their careers in UX, graphic design, and web design.
From tutorials on how to use different design tools to succeed as a design professional in this highly competitive and AI-driven world: freelancer, in-house designer, agency designer or startuppers.
Don't forget to subscribe and like the videos😊
Hey guys!
This channel is for aspiring designers and professionals looking to grow their careers in UX, graphic design, and web design.
From tutorials on how to use different design tools to succeed as a design professional in this highly competitive and AI-driven world: freelancer, in-house designer, agency designer or startuppers.
Don't forget to subscribe and like the videos😊
Become a Pro! Design and prototype a modern team section or team page using figma - UX/UI Design
Learn how to design and prototype the team member section that can be added to any page of your UI/UX projects. But before we get into design, I'll introduce you to the importance of adding the team member page or section to any of your projects or clients' projects.
The team page or section allows the company to showcase the minds/brains behind the company. Organisations get to showcase their team's expertise and at the same time build trust and credibility with their customers, visitors or users.
Don't forget to like, share and subscribe
Link to exercise files
drive.google.com/drive/folders/1XP_cwgYa683ISH-QiBxTwKW5YXuJNMW2?usp=sharing
Design System: Typescale:
th-cam.com/video/Z-iGHrPap-8/w-d-xo.html&ab_channel=BeyondDesignwithJelissa
Design System: Typescale
th-cam.com/video/Z-iGHrPap-8/w-d-xo.html&ab_channel=BeyondDesignwithJelissa
Design System: Colour Palette
th-cam.com/video/9kGj90chM0A/w-d-xo.html&ab_channel=BeyondDesignwithJelissa
Design System: Icons
th-cam.com/video/ex4BT0Cnmew/w-d-xo.html&ab_channel=BeyondDesignwithJelissa
Outline
0:00 Intro
01:14 Start designing in figma
02:46 Designing a team card base
06:11 Import images (team members)
06:51 Remove Background from images
09:29 Create a team member card
12:34 Create Team member hover state
14:41 Create Team member figma components
17:18 Prototype team member card
18:06 Create a team section
21:58 Preview prototype
The team page or section allows the company to showcase the minds/brains behind the company. Organisations get to showcase their team's expertise and at the same time build trust and credibility with their customers, visitors or users.
Don't forget to like, share and subscribe
Link to exercise files
drive.google.com/drive/folders/1XP_cwgYa683ISH-QiBxTwKW5YXuJNMW2?usp=sharing
Design System: Typescale:
th-cam.com/video/Z-iGHrPap-8/w-d-xo.html&ab_channel=BeyondDesignwithJelissa
Design System: Typescale
th-cam.com/video/Z-iGHrPap-8/w-d-xo.html&ab_channel=BeyondDesignwithJelissa
Design System: Colour Palette
th-cam.com/video/9kGj90chM0A/w-d-xo.html&ab_channel=BeyondDesignwithJelissa
Design System: Icons
th-cam.com/video/ex4BT0Cnmew/w-d-xo.html&ab_channel=BeyondDesignwithJelissa
Outline
0:00 Intro
01:14 Start designing in figma
02:46 Designing a team card base
06:11 Import images (team members)
06:51 Remove Background from images
09:29 Create a team member card
12:34 Create Team member hover state
14:41 Create Team member figma components
17:18 Prototype team member card
18:06 Create a team section
21:58 Preview prototype
มุมมอง: 162
วีดีโอ
How to turn off, hide, or disable Figma UI Kits or Libraries
มุมมอง 4921 วันที่ผ่านมา
In this tutorial, learn how to manage your Figma workspace effectively by turning off, hiding, or disabling the Figma UI Kits and Libraries you no longer need. Whether you’re a beginner or an experienced designer, keeping your Figma environment organized is essential for a smooth workflow. I’ll guide you through simple steps to declutter your workspace, reduce unnecessary load times, and boost ...
How to revert back to Figma's old UI Design (2024) - Quick Fix
มุมมอง 9421 วันที่ผ่านมา
In this short tutorial, you'll learn how to revert to the previous or old figma UI design and return to the new UI design when you're more comfortable with the interface. The new UI design comes with a new learning curve which might be a little hindering especially if you are comfortable gliding through your projects with the previous UI.
How to design and prototype an accordion or collapsible on figma - UI Components for Beginners
มุมมอง 131หลายเดือนก่อน
Learn how to design and prototype an accordion or collapsible the right way on figma. 👉👉 Download the Exercise file here(includes icons and text): 👉👉 drive.google.com/drive/folders/1cVh0JRtRJJXFzDTSnu7-mgzcTxJEdAmF?usp=sharing I'll start with a brief introduction to accordions when to use them and when not to. Then, I'll go straight into designing and finally prototyping to ensure they animate ...
How to Design a Hero Section on Figma - UX and Web Design for Beginners - UI Elements
มุมมอง 167หลายเดือนก่อน
Feel free to dive straight into the design on Figma 02:14. To work with me, Download the Excercise file here: drive.google.com/drive/folders/1K6iuTqOrLdaBtduDCY2SPLn2j8ij4nQY?usp=sharing In this tutorial We'll be designing a Hero section for a website on Figma but before doing that we need to understand what they are. We often use hero sections in our design projects but why exactly will I choo...
How to design and prototype a website tab using figma
มุมมอง 1523 หลายเดือนก่อน
In this tutorial, learn how to Design and Prototype website tabs using Figma. This is an in-depth tutorial, covering the definition of tabs, the best practices you can consider when adding tab elements to your UX projects, the different types of tabs, designing and finally, prototyping tabs that you can add to your UI or UX projects. Tabs are essential, especially if you want to present large g...
How to design, prototype and animate a website slider or carousel using figma with auto-transition
มุมมอง 1144 หลายเดือนก่อน
In this figma tutorial, you'll learn how to design and prototype a website slider that transitions automatically. To achieve our slider designs and animation, we'll use a combination of content, a plugin and Figma's prototype feature. What You’ll Learn: - What is a website slider? - When to use a website slider or carousel - How to design a basic website slider or carousel - How to prototype a ...
How to design a responsive footer with figma
มุมมอง 8434 หลายเดือนก่อน
Hey designers! In this tutorial, I’ll walk you through creating a sleek, responsive footer for your next UI/UX project using Figma. What You’ll Learn: - Designing a modern footer layout using Figma's auto layout - Making your footer responsive for different screen sizes Don’t forget to like, comment, and subscribe for more design tips and tutorials. ⬇️ Download Figma Exercise Tutorial Files Dow...
How to create a three-level dynamic header for a website or web app UX project using Figma Part 3
มุมมอง 2255 หลายเดือนก่อน
In part three of designing Website/Web App UI Components/kit, we'll learn how to create a three-level dynamic header(top header, middle and bottom header) that can be used on your next UI/UX projects, using Figma. 📣 What covered and what's coming up In part two of the header style tutorials, we'll design a classic header with 1. Top header: info section, language switcher and button link 2. Bot...
How to create a dynamic header for a website or web app UX project using figma - Part two
มุมมอง 1105 หลายเดือนก่อน
In part two of designing Website/Web App UI Components/kit, we'll be learning how to create a two-level dynamic header(top header and main header) that can be used on your UI/UX projects, using Figma. 📣 What covered and what's coming up In part two of the header style tutorials, we'll design a classic header with 1. Top header: contact section and social media links 2. Bottom header: with a log...
How to design a dynamic website header UI component in Figma - Figma Header Menu - Part 1
มุมมอง 3875 หลายเดือนก่อน
In part one of designing Website/Web App UI Components/kit, we'll be learning how to create a dynamic header that can be used on your UI/UX projects, using Figma. A header is the upper section of a webpage that usually contains such as the logo, navigation menu, contact information, and sometimes a search bar or social media links. Headers are designed to be consistent across all pages of the w...
How to bulk or batch rename Figma layers or UI assets using Rename it plugin - Developer Handover
มุมมอง 3355 หลายเดือนก่อน
In this video, I'll demonstrate a productive Figma plugin, Rename It by Rodrigo Soares, which will make your design handover process easier, faster, and less stressful! The "Rename It" plugin is a useful tool designed for Figma, Sketch and Adobe XD users, streamlining the process of renaming layers and artboards efficiently. 148k users currently use the plugin. ✴️Link to figma plugin: www.figma...
How to design and prototype a Mobile App Login-Reset Password Flow using Figma
มุมมอง 2135 หลายเดือนก่อน
How to design and prototype a Mobile App Login-Reset Password Flow using Figma
How to design and prototype clickable checkboxes using Figma components - Figma Series
มุมมอง 1926 หลายเดือนก่อน
How to design and prototype clickable checkboxes using Figma components - Figma Series
How to prototype a single choice interactive radio button component in Figma - Design System
มุมมอง 1K6 หลายเดือนก่อน
How to prototype a single choice interactive radio button component in Figma - Design System
Figma for Beginners: How to Create a Button Variant Component Library
มุมมอง 1356 หลายเดือนก่อน
Figma for Beginners: How to Create a Button Variant Component Library
Figma for Beginners: Creating Button Variants Styles
มุมมอง 1226 หลายเดือนก่อน
Figma for Beginners: Creating Button Variants Styles
Figma for Beginners: Create Input Field Variants for your UX project
มุมมอง 1166 หลายเดือนก่อน
Figma for Beginners: Create Input Field Variants for your UX project
Figma Beginners Tutorial: Add Icon Components to your Design System
มุมมอง 2356 หลายเดือนก่อน
Figma Beginners Tutorial: Add Icon Components to your Design System
Figma Tutorial: Easily Add Spacing & Border-radius values to your Design System
มุมมอง 1186 หลายเดือนก่อน
Figma Tutorial: Easily Add Spacing & Border-radius values to your Design System
Figma Beginners Tutorial: Add a Colour Palette to your Design System
มุมมอง 2896 หลายเดือนก่อน
Figma Beginners Tutorial: Add a Colour Palette to your Design System
Figma Beginners Tutorial: Add Typography Scale to your Design System
มุมมอง 7876 หลายเดือนก่อน
Figma Beginners Tutorial: Add Typography Scale to your Design System
Illustrator Tutorial: Design A Fun Event Flyer | Flyer Design Process
มุมมอง 2619 หลายเดือนก่อน
Illustrator Tutorial: Design A Fun Event Flyer | Flyer Design Process
The Creative Process : Production Phase (Graphic Design for Beginners) -
มุมมอง 149 หลายเดือนก่อน
The Creative Process : Production Phase (Graphic Design for Beginners) -
The Creative Process : Ideation Phase (Graphic Design for Beginners)
มุมมอง 2610 หลายเดือนก่อน
The Creative Process : Ideation Phase (Graphic Design for Beginners)
The Creative Process : Research Phase (Graphic Design for Beginners)
มุมมอง 1310 หลายเดือนก่อน
The Creative Process : Research Phase (Graphic Design for Beginners)
The Creative Process: Creative Brief (Graphic Design for Beginners)
มุมมอง 1010 หลายเดือนก่อน
The Creative Process: Creative Brief (Graphic Design for Beginners)
Where Do Graphic Designers Work? Inhouse, Agency, or Freelance Explained (audio, listen)
มุมมอง 1610 หลายเดือนก่อน
Where Do Graphic Designers Work? Inhouse, Agency, or Freelance Explained (audio, listen)
Package Design: Design Professions/Categories (Graphic Design for Beginners)
มุมมอง 1611 หลายเดือนก่อน
Package Design: Design Professions/Categories (Graphic Design for Beginners)
Branding: Design Professions/Categories (Graphic Design for Beginners)
มุมมอง 311 หลายเดือนก่อน
Branding: Design Professions/Categories (Graphic Design for Beginners)
Great tutorial Jelissa. Thank u
@@vanessanjoume7976 you're welcome and thank you very much !!
Thank you Jelissa. Just what i needed.
Thanks a lot, you're awesome.
Feel free to dive straight into the design on Figma 02:14. ~~~ To work with me, Download the Excercise file here: drive.google.com/drive/folders/1K6iuTqOrLdaBtduDCY2SPLn2j8ij4nQY?usp=sharing
Great tutorial, very clear to understand.
Thank you. What is an easier way to do this without any animations, just when you click a box, it ticks and when you click it again it disappears?
Amazing tutorial Jelissa. Please keep up the good work
@@vanessanjoume7976 Thank you! ♥️☺️
Yaayy❤ have been waiting
@@maskedman0677 ❤️❤️
where is the figma file????? the link in the description is for icons and images only'
There are 4 files in the drive folder, the figma file is titled "How to Design and prototype website tabs.fig"
nice tutorial......
Thank you 😊
We are currently work on an org management system and this Video helped me to have a clear perspective of how I can deliver the Idea easily
@@noahalliance Oh, I am glad to hear this helped you! Thanks for watching ❤️☺️
You are a gem! Detailed and simple explanation. Thanks
@@HajaratAkanmu you're welcome❤️❤️. Your positive feedback means a lot! I really appreciate 🙏🏾🙏🏾
Finally ❤❤❤❤
@@maskedman0677 ❤️❤️❤️❤️☺️
🎉🎉🎉🎉 can’t wait for that ❤❤
❤❤ love it
🎉🎉🎉 finally
@@maskedman0677 yay!! ♥️☺️🎉
Great job Jelissa. 🎉
@@vanessanjoume7976 Thank you ♥️☺️
Super❤
@@obendesmond3516 ♥️♥️♥️😊
Hmm, interesting and awesome ❤😊
Thank u so much
You welcome 😊. More videos loading!
Thank u so much Jelissa. Just what I needed.
You're welcome Vanessa!! ❤️❤️
Love it❤, preparing myself for your next lesson 🫡
Thank you!♥️ Next lesson coming soonest 😊
@@beyonddesignwithjelissa i Wil wait eagerly ❤️
Thank you so much, this was very helpful, can you do one for colors and input fields?
You're welcome ☺️, there are already tutorials on colour and input fields. Checkout this playlist, you'll find it there th-cam.com/play/PLhWwl2ZeFrnmlZYTOh7p5PiyGDmRDfMWq.html&si=rPaaT_vD14O6TsT8
Input fields :th-cam.com/video/HwQn6b0NpTM/w-d-xo.htmlsi=9Rb0fGEd0-RZCZJs
Colors: th-cam.com/video/9kGj90chM0A/w-d-xo.htmlsi=VQ7035t3DVmCW-5w
What an amazing tutorial. I totally enjoyed it
Thank you so much ! I'm glad you enjoyed it
Great job Jelissa
Can't wait
Thank you so much. Ur amazing
You're welcome and Thank you too! 😊
very well explained . your tutorial helped me a lot 👍👍👍
You're welcome 😊. I'm glad it did!!!
Yes yes yes thank u for another amazing tutorial
You're welcome Vanessa 😊. Thank you too!!
Amazing video. Great job Jelissa. I love ur teaching style. Perfectly done.
Thank you so much!
❤️❤️❤️❤️
This is awesome !!!
Thank you Glenn ☺️
Keep going ❤ thank you for the efforts 💗✨
Thank you!!! 🙏🏾♥️
I've been waiting for this😊, thank you
You're welcome!! ❤️❤️
Awesome info.. Thank you and keep doing❤
You're welcome😊. Thank you too! More videos loading 🙏🏾
Amazing video. Thank you
@jenner214 you're welcome and thank you for watching 🙏🏾
Fabulous work. Thank you
You're welcome😊 and thank you for watching
Great tutorial Jelissa. Thank u for being an exceptional user experience designer. Ur explanations are well understood and straight to the point. U rock. Please keep bringing us more video's like this.
Thank you so much Vanessa 😊. Please stayed glued for the remainder of the series which will be released this week
@@beyonddesignwithjelissa ur welcome
Ok I'm waiting
so nice work
Thank you! ☺️
Amazing
Thank you 🙏🏾
Amazing 👏
Thank you Vanessa 🙏🏾☺️
Good job
Thank you ☺️
Wow so educative.
Thank you 🙂
😊😊😊❤❤❤
☺️☺️
Great job Jelissa. Thanks for all the tips ive learnt alot
Thank you so much Vanessa 🤗
Amazing content
Thank you!
❤
Thank u so much Jelissa
@@vanessanjoume7976 you're welcome ❤️
❤
❤️
😊amazing 👏 🙀
Thanks 😆
❤