#learnuxdesign #howtodesign #uxdesign #webdesigner #productdesign #framer #designinspiration
Get 3 FREE MONTHS on a Pro annual Framer subscription When you sign up for Framer using this special link
www.framer.com?via=sharononyinye_
Hey guys! This is a 15-minute tutorial on designing a hero section for your personal website or portfolio using Framer.
I will show you a step-by-step process to create a structured website page optimized for both web and mobile.
Who this video is for:
This video is ideal for people who have just started using Framer. This video will guide you in creating a well-structured and responsive website page.
Don't forget to like, comment, and subscribe for more helpful content on UX Design and the tech industry.
Check out my curated resources for learning UX design on your own
sharononyinye.gumroad.com/l/JJPQf
Looking for 1:1 mentorship, feedback on your portfolio, design challenge, or your resume? Book a session with me on Coachli: www.coachli.co/sharononyinye
Join my mailing list: sharononyinye.ck.page/
Please support my channel by buying me a coffee: www.buymeacoffee.com/sharononyinye
Follow me on Twitter: sharononyinye_
Follow me on Instagram: sharon.onyinye
Send me an email: Hello@sharononyinye.com
www.sharononyinye.com/
Timestamps
0:00 - Introduction
00:59 - An Overview of Framer
04:31 - Getting Started on the Hero Section
05:10 - Designing the Hero Section
05:27 - Adding Rows in Framer
05:37 - How to Add Stacks in Framer
06:28 - Adding an Image
07:00 - Adding Padding to the Stack
07:28 - Adding Layout for Text
10:17 - Adding Navigation
11:00 - How to Create a Scroll Effect
12:18 - Editing the Navigation
13:37 - How to Change & Highlight the Text
14:01 - Adjusting the Text Spacing
14:36 - How to Make it Responsive with Breakpoints
15:33 - Optimizing for Mobile
15:52 - The Finished Design
16:17 - The End