UI and UX Design Tutorial: Zero to Hero

A comprehensive guide to website design covering wireframing, UI prototyping in Figma, and creating responsive layouts. The course takes you from planning a site map and sketching wireframes to building a high-fidelity UI design.

Coursified Library ↗

source: freeCodeCamp.org

Outline · 12 modules · quiz after each

01Course Introduction and OverviewThe three main stages of the design process: wireframing, mock-up, and final UI design2 min

02Wireframing Basics and Site MapsDefinition of wireframing as a visual blueprint and schema for functionality4 min

03Building the Homepage Wireframe: Header and HeroDesigning the website header with logo and menu placeholders3 min

04Building the Homepage Wireframe: Content and FooterLabeling wireframe sections for clarity to clients and developers4 min

05Advanced Wireframe Labeling TechniquesBalancing page height and scrolling length in wireframes3 min

06Creating the Features Page and CopyrightDesigning a features page layout to promote products with images and bullet points4 min

07Navigation Flow and Contact Page WireframeIndicating navigation paths between pages using lines on the wireframe5 min

08Responsive Wireframing for MobileAdapting a desktop wireframe design for a smaller mobile screen width6 min

09Introduction to Figma and UI SetupTransitioning from wireframes to a digital UI mock-up in Figma4 min

10UI Design: Grid, Header, and MenuEstablishing a 12-column grid layout to structure the design7 min

11UI Design: Slider and Hero TextImporting and using SVG icons for slider controls3 min

12UI Design: About Us Section and ButtonsLaying out a content section with an image and text grid3 min

clones

learner

New

no ratings yet

modules

Cloning copies the outline, quizzes and assessment into your account. The video stays on YouTube; attribution to Coursified Library stays on the course.

Details

Duration1h 26m

Assessment26 questions · pass 70%

Quiz questions171

LanguageEnglish

CertificateYes · verifiable

NewNo ratings yet