Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Figma Complete Pet Care Website UI/UX Design Course | Part 6: Tablet Layout
Play lesson

Figma Complete Pet Care Website UI/UX Design Course - Figma Complete Pet Care Website UI/UX Design Course | Part 6: Tablet Layout

4.0 (1)
16 learners

What you'll learn

This course includes

  • 10 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

In this video, I walk you through the complete design process of creating a pet care website built entirely in Figma. In this part of the course, I'll create the tablet layout. This video will give you a behind-the-scenes look at how I approach a real-world web design and UI/UX project from scratch. Text and images used in the project: https://github.com/KT3XS/Pet-Care-Website Course Playlist - https://www.youtube.com/playlist?list=PLJKCMC6sE_3T_ZEJts8dMi30V_Ooe0d1J Part 1 | Mood Board and Wireframe - https://youtu.be/8pl8agc3VLc Part 2 | Desktop Homepage - https://youtu.be/PRI8lJv3iJA Part 3 | Desktop About Page - https://youtu.be/l6A9Yao5zM4 Part 4 | Desktop Services Pages - https://youtu.be/ocPLOMylMI0 Part 5 | Blogs and Contact Pages - https://youtu.be/jYXHKmVQjfQ Part 7 | Mobile Layout - Part 8 | Prototype - -------------------------------------------------------------------------------------- Tablet Style Guide ----------------- Pet Care Tablet Hero ----------------- Font - Otomanopee One Weight - Regular Size - 60 Line Height - 68 Letter Spacing - 0px ----------------- Pet Care Tablet Heading ----------------- Font - Otomanopee One Weight - Regular Size - 44 Line Height - 52 Letter Spacing - 0px ----------------- Pet Care Tablet Sub-Heading 1 ----------------- Font - Otomanopee One Weight - Regular Size - 40 Line Height - 48 Letter Spacing - 0px ----------------- Pet Care Tablet Sub-Heading 2 ----------------- Font - Otomanopee One Weight - Regular Size - 28 Line Height - 36 Letter Spacing - 0px ----------------- Pet Care Tablet Medium Heading ----------------- Font - Otomanopee One Weight - Regular Size - 18 Line Height - 26 Letter Spacing - 0.25px ----------------- Pet Care Logo ----------------- Font - Otomanopee One Weight - Regular Size - 32 Line Height - 40 Letter Spacing - 0px ----------------- Pet Care Tablet Blog ----------------- Font - Nunito Weight - Regular Size - 12 Line Height - 18 Letter Spacing - 0.25px ----------------- Pet Care Tablet Blog Date ----------------- Font - Nunito Weight - Regular Size - 10 Line Height - 14 Letter Spacing - 0px ----------------- Pet Care Tablet Header ----------------- Font - Nunito Weight - Regular Size - 16 Line Height - 22 Letter Spacing - 0px ----------------- Pet Care Tablet Body ----------------- Font - Nunito Weight - Regular Size - 16 Line Height - 22 Letter Spacing - 0.25px ----------------- Pet Care Tablet Button ----------------- Font - Nunito Weight - Regular Size - 16 Line Height - 24 Letter Spacing - 0px ----------------- Pet Care Tablet Subscribe Button ----------------- Font - Nunito Weight - Regular Size - 18 Line Height - 24 Letter Spacing - 0.25px ----------------- Pet Care Tablet Footer 1 ----------------- Font - Otomanopee One Weight - Regular Size - 24 Line Height - 32 Letter Spacing - 0px ----------------- Pet Care Tablet Footer Heading ----------------- Font - Otomanopee One Weight - Regular Size - 18 Line Height - 24 Letter Spacing - 0.5px ----------------- Pet Care Tablet Footer Body ----------------- Font - Nunito Weight - Regular Size - 13 Line Height - 16 Letter Spacing - 0.4px ----------------------------------------------------------------------------------------- What type of website should I design next? Let me know below! Like this video if you found it helpful Subscribe for more UI/UX design content Comment your thoughts or questions below #figma #uidesign #petcare #wireframe #moodboard #uiux #uxdesign #uidesigntutorial #uidesign #uidesigntips #webdesign #webdesigner #uiuxdesign #uiuxdesigner #uiuxdesigners #uiuxdesigncourse #moodboard #wireframe #wireframes #prototype #prototypedesign #figma_tutorial #figmacourse #uiuxcourse

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere