UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma

UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma

by



Study the method of UI / UX design. On this tutorial you’ll find out how an expert designer builds a full web site design from scratch following the method of person expertise and person interface. The video covers wireframing, prototyping, and designing in Figma.

This course was developed by Adrian Twarog. Take a look at his channel: https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ

⭐️ Sections ⭐️
⌨️ (00:00) Introduction
⌨️ (01:27) Wireframing
⌨️ (30:58) UI Format
⌨️ (1:06:38) Mockup

—

Study to code free of charge and get a developer job: https://www.freecodecamp.org

Learn tons of of articles on programming: https://freecodecamp.org/information

source

44 thoughts on “UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma”

  6. I have learnt a lot in this video. Thank you 😊. But….. How can we animate,prototype between two pages? Can anyone explain me please 🙏 😅.
    And also how can we scroll that ciccles of sponsors (if we have many)?

    Reply

  8. Been struggling UI/UX design but watching this simplified design using wireframes has been awesome, great way to do low fidelity designs and come up with the structure of the website.💯😃.

    Reply

  16. First of all Thank you very Much Adrian to creat this stuff as this simple.
    I'm searching for learning figma some of that are offline which are charging highly fees,
    And also I searched alot on internet but not getted good one,
    Until I saw your channel you are teaching and giving information very neatly and indetail also that was very helpful..
    I started my Figma journey from watching this journey in 2-3 days cause I do repeat many times 😅for better understanding
    But I know I'll definitely learn high level of figma because of your
    Once again thank you so much
    Wish for your better future and keep supporting uss.

    We'll meet soon in real life once I get professional in this, too give a thank full wish in real life….

    Reply

  40. 00:03 Learn UI/UX design from wireframe to website
    02:07 Wireframing is a visual blueprint for website functionality and pages
    06:19 Wireframing creates basic representations of webpage elements.
    08:27 Creating labels and section breaks for website design referencing
    12:35 Labeling content for better understanding
    14:38 Designing a features page for a website requires engaging content and a consistent header
    18:34 Creating wireframes to represent features and adding footer across multiple pages
    20:28 Creating navigation from one page to another
    24:08 Creating mobile-responsive design for the home page
    25:59 Designing mobile responsive elements for the home page
    29:46 Creating a mobile design for the logo and contact information.
    31:42 Figma is a web-based design tool similar to Sketch and Adobe XD.
    35:22 Creating a grid layout for the website using Figma
    37:15 Creating a menu and adding a logo
    41:02 Adjusting menu and slider design elements.
    42:55 Designing the slider and additional elements
    46:45 Designing and editing the description and button in Figma
    48:41 Adjusting image sizes and layouts for better visual balance
    52:23 Designing and arranging elements in Figma
    54:25 Adjusting padding for sponsor and footer sections
    58:11 Setting up contact information and icons
    1:00:07 Designing form inputs and button in Figma
    1:03:57 Review of home page design
    1:05:52 Importance of consistent column design
    1:09:28 Optimizing header section design
    1:11:21 Designing the 'About Us' section and enhancing the layout.
    1:15:03 Adding testimonials and site map in the design.
    1:17:00 Creating a mobile version of the website
    1:20:43 Designing testimonial section in Figma
    1:22:32 Designing the footer section and copying elements across

    Reply

Leave a Comment