Redesigning Crypto's Most Insane Project (Using Framer)
In this stream we'll use Framer to redesign Balaji's web3 project The Network School. All the way from concept to live website, in 2 hours.
⚡ Work with our agency: https://zipzap.design
🎥 Master Framer: https://timgabe.com/framer-course
Timestamps:
0:03 - Intro and testing the live stream setup
0:38 - Going live on X and YouTube
1:04 - Welcoming early viewers and chatting
3:30 - Starting the stream and explaining the process
3:55 - Overview of the stream’s goals
4:43 - Introducing the project: The Network School
5:09 - Background on Balaji and the project
5:53 - Explaining the Network School’s objectives
6:22 - The three key aspects of the Network School
7:22 - Focus on technology, fitness, and currency
9:03 - Discussing career counseling and support
9:50 - Stream structure and time allocation
10:08 - Mention of design and animation goals
10:28 - Checking the chat and engaging with viewers
11:04 - Moving to the presentation and research
12:16 - ChatGPT-generated key value propositions
12:59 - Importance of targeting the right audience
14:08 - Discussion of continuous lifelong education
14:42 - Reflecting on key audience demographics
17:01 - Identifying and targeting key user personas
18:18 - Importance of speaking to the main user
19:29 - Evaluating hero section copy ideas
20:31 - Critique of “next generation of leaders” phrasing
21:22 - Pain points copy discussion
22:16 - Viewer engagement and shout-outs
23:03 - Refocusing on outcome-based messaging
24:40 - Outcome-based copy revision
25:53 - Refining hero section copy
26:56 - Finalizing copy and transitioning to visuals
27:04 - Beginning visual inspiration search
28:20 - Discussion of 3D usage in design
29:49 - Emphasizing clean, light-themed design
30:55 - Collecting visual inspiration on Pinterest
34:44 - Analyzing layout and contrast
37:52 - Transitioning to Framer for design
42:49 - Setting up the Framer workspace
43:43 - Choosing fonts for the design
47:09 - Exploring Fontshare for font options
52:26 - Adding and adjusting buttons
56:54 - Troubleshooting video upload in Framer
58:25 - Adding network school logo
1:00:56 - Experimenting with different video options
1:06:04 - Adding avatars for social proof
1:10:13 - Adjusting contrast and layout
1:16:02 - Adding a countdown timer for application
1:24:58 - Refining the navigation
1:30:03 - Building the next section with cards
1:36:02 - Organizing card layouts
1:46:08 - Midjourney exploration for images
1:52:01 - Working with image masks and layout
1:56:54 - Finalizing cards and adding shadows
2:07:13 - Animating the hero section
2:12:00 - Wrapping up the stream and reflections
