My Personal Website Design Process w/
In October 2022, Framer announced it's first Framer Awards competition.
The brief was simple: Design a crazy portfolio or personal blog. Anything goes. We took on the challenge for fun and somehow managed to win at 6th place.
This is our design process for our award winning site.
👉🏽 Here's the final site: omarfarook.framer.website
00:00 Introduction
01:23 Step 1: Brand Attributes Exercise
02:25 Step 2: Customer Profiles
03:12 Step 3: Moodboards & Stylescapes
04:51 Figma Site Mockup
05:58 Framer Scroll Variants
07:50 Final Website Presentation
08:11 Mobile Responsive Work
08:32 Winning Framer 2022
08:57 Final Thoughts
#framer #webdesign #startup #nocode #figma #uiuxdesign #webdevelopment #developers #webbuilder #webdesigner #ai #aidesign #aiwebsite #review
------------------------------------------------------------------------------------------------
Check out @Framer's FREE Canvas Based Website Builder
Sign up here → bit.ly/413WCab
(Affiliate link)
Free Templates: www.framer.com/templates/cate...
Framer Awards 2022 Brief: dribbble.com/shots/19686981-F...
Framer Awards 2023: www.framer.com/awards/
------------------------------------------------------------------------------------------------
Check out all the awesome tools & resources in this video:
- www.screen.studio - What I used to record my screen for this video
- The Core Brand Strategy Framework by @thefutur - thefutur.com/course/core
------------------------------------------------------------------------------------------------
Check out these videos next:
How Figma changed the MVP model forever
• How Figma changed the ...
Framer - 2hr Responsive Web Challenge
• Framer - 2hr Responsiv...
------------------------------------------------------------------------------------------------
Follow me here for more content:
📱 TIKTOK ‧ / buildwithomar
📷 INSTAGRAM ‧ / buildwithomar
🐦 TWITTER ‧ / buildwithomar
🌐 LINKEDIN ‧ / buildwithomar
💻 INDIE HACKERS ‧ www.indiehackers.com/buildwit...
------------------------------------------------------------------------------------------------
Startups I am currently building:
👉 www.Glorify.com - A VC-backed SaaS design tool startup
👉 www.collabify.design (previously Together.Design) - A productized UI/UX service platform
👉 www.Blitzit.app - a personal productivity tool that keeps you in flow state👉🏽
Пікірлер: 24
Awesome overview video of your process . 💪
@BuildwithOmar
Ай бұрын
Thanks buddy!
would love to see videos on the scroll components and also a template :) Thanks for sharing your journey! I'm just moving things over to Framer, too.
Omar, amazing process. Thanks for sharing it with us!
@BuildwithOmar
5 ай бұрын
Glad you like it! Steal the process 👊🏽🧡
This was such a great dive into your thought process. Loved it 🔥
@BuildwithOmar
5 ай бұрын
Thanks guys 🙏🏽🔥
🔥 A master 👏
Masha-Allah, it was quite inspiring Omar!
@BuildwithOmar
4 ай бұрын
Thanks bro 🙏🏽
Love to see Core Strategy from theFutur ❤
@BuildwithOmar
4 ай бұрын
TheFutur, and Jose Caballer's Core Framework SLAPS
How can I learn more in depth about your branding process? awesome work 🤙
@BuildwithOmar
3 ай бұрын
Thanks buddy! This video covers an overview, but I’m planning to roll out a free community where everyone can access key resources! Stay tuned. ✌🏽
Make the tutorial Farook thx
@BuildwithOmar
5 ай бұрын
Let's make it happen!
make the tutorial by building your personal website.
the scroll doesn't really work, you need to scroll more than 3 times to go to the next frame
@BuildwithOmar
5 ай бұрын
Strange, works for me with 1 scroll. Does that happen across all the sections? What screen size are you on?
@ChronicleContent
5 ай бұрын
@@BuildwithOmar maybe you have mac and works only there?
@BuildwithOmar
5 ай бұрын
Let me test! @@ChronicleContent
@TatraHraje
3 ай бұрын
Same for me, I need to do 3 times scrolls.
@TatraHraje
3 ай бұрын
1920x1080