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
