Figma Complete Pet Care Website UI/UX Design Course - Figma Complete Pet Care Website UI/UX Design Course | Part 7: Mobile Layout

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 mobile 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 6 | Tablet Layout - https://youtu.be/I8B8j78tmVk Part 8 | Prototype - -------------------------------------------------------------------------------------- Mobile Style Guide ----------------- Pet Care Mobile Hero ----------------- Font - Otomanopee One Weight - Regular Size - 48 Line Height - 56 Letter Spacing - 0px ----------------- Pet Care Mobile Heading ----------------- Font - Otomanopee One Weight - Regular Size - 40 Line Height - 48 Letter Spacing - 0px ----------------- Pet Care Mobile Sub-Heading 1 ----------------- Font - Otomanopee One Weight - Regular Size - 36 Line Height - 44 Letter Spacing - 0px ----------------- Pet Care Mobile Sub-Heading 2 ----------------- Font - Otomanopee One Weight - Regular Size - 30 Line Height - 38 Letter Spacing - 0px ----------------- Pet Care Mobile Medium Heading ----------------- Font - Otomanopee One Weight - Regular Size - 20 Line Height - 28 Letter Spacing - 0.25px ----------------- Pet Care Logo ----------------- Font - Otomanopee One Weight - Regular Size - 32 Line Height - 40 Letter Spacing - 0px ----------------- Pet Care Mobile Blog ----------------- Font - Nunito Weight - Regular Size - 14 Line Height - 20 Letter Spacing - 0.25px ----------------- Pet Care Mobile Blog Date ----------------- Font - Nunito Weight - Regular Size - 12 Line Height - 16 Letter Spacing - 0px ----------------- Pet Care Mobile Header ----------------- Font - Nunito Weight - Regular Size - 18 Line Height - 24 Letter Spacing - 0px ----------------- Pet Care Mobile Body ----------------- Font - Nunito Weight - Regular Size - 18 Line Height - 24 Letter Spacing - 0.25px ----------------- Pet Care Mobile Button ----------------- Font - Nunito Weight - Regular Size - 16 Line Height - 24 Letter Spacing - 0px ----------------- Pet Care Mobile Subscribe Button ----------------- Font - Nunito Weight - Regular Size - 18 Line Height - 24 Letter Spacing - 0.25px ----------------- Pet Care Mobile Footer 1 ----------------- Font - Otomanopee One Weight - Regular Size - 24 Line Height - 32 Letter Spacing - 0px ----------------- Pet Care Mobile Footer Heading ----------------- Font - Otomanopee One Weight - Regular Size - 18 Line Height - 24 Letter Spacing - 0.5px ----------------- Pet Care Mobile 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