FREE TRAINING: 3 Steps to Build a Thriving Web Design Career 👉 https://bit.ly/3Tiua2G In this course you’ll learn everything you need to create a beautiful, fully functional website from start to finish. A lot of people in the comments are asking "Is it really worth designing in Figma if you’re just going to recreate the same design in Webflow?" For the answer and a demo, watch https://youtu.be/jD65fc_YGuI Get extra resources and bonus materials on our free 5-day email companion course 👉 https://bit.ly/49hSxDE Go all in on web design with the Flux All Access program 👉 https://bit.ly/482kE8O Chapters 0:00 Intro 1:48 Chapter One: The Process 5:26 Chapter Two: Strategy 10:17 Chapter Three: Structure 30:42 Chapter Four: Design 1:48:14 Chapter Five: Development Try Relume 👉 https://bit.ly/flux-relume Try Figma 👉 https://bit.ly/flux-figma Try Webflow 👉 https://bit.ly/flux-webflow 📱 Find us on SOCIAL MEDIA Ran's Instagram 👉 https://www.instagram.com/ransegall/ Ran's Twitter 👉 https://twitter.com/ransegall Flux Academy's Instagram 👉 https://www.instagram.com/flux.academy/ Flux Academy's Twitter 👉https://twitter.com/FluxAcademyHQ #webdesign
ADVERTISEMENT
In my whole life this is the first time I watched 3 hours plus course full of A to Z here in youtube.Thank you man for such a great course.
I cannot believe this is free. Thank you Ran!
I am a web designer / fullstack developer for over 2 decades, this course is on point! i absolutely love it.
Elon musk once said YouTube is today's havard university
A 14 year old watching this ❤😊
We’d love to hear how this introduction to web design has helped you. Let us know here in the comments. 👇 Don’t forget you access extra resources with our free 5-day email companion course: /49hSxDE
Personally I've been learning web design by myself for the last 5 or 6 months and even got a client that I'm currently in the strategy period with. Your channel has helped me lots with the entire process and this course is an absolute killer! Before I've started watching it I was always obsessing over layouts and was losing too much time when wireframing and when you said that you shouldn't do that and only focus on the content it made complete sense to me. Just that VERY valuable detail alone is one thing that has made the course worth watching for me even if I already knew the big majority of things presented already, and given that I didn't finish it means that there'll be even more new details that I never tought about and that I can make use of. Thank you Ran and Flux Academy!
I have been a web developer for the past 10 years and 60% of the topics you discussed is something that I have just learned from you. very helpful and informative and I'm so glad I found this video. Thank you.
time stamp 5:30 einstein said 6:15 list website 6:25 1 ecommerce, 2 b card 3 media card/ content, 4 education, 5 portfolio, 6 apps website 9:20 a brief template 10:45 sample pages 11:00 section in web - navigation sec, hero sec, feature section, CTA, testimonila, pricing, gallery, contact, footer section 12:25 elements in web - type, buttons links, images vids, forms, 12:50 sitemap, wireframe, 14:50 his wireframe 15:50 reloom site builder
Wow! This release is probably some of the best content i've seen on YouTube in recent years. Amazingly well produced, and packed with value! Nice work Ran / Flux Team! 🤩 🌟
Hands down the most valuable design video I had yet to watch in my life
As a student building a portfolio website, this content equipped me Everything from the ground up. The last 3 hours are worth far more than the time investment!! I just can't express my gratitude enough! Thank you!!
Great! I'm a senior citizen from the Philippines who grew on old tech. Some say I'm too old for this stuff, but I'm really interested in Web Developing, that is why I'm planning to go to school next school year. Thanks Ran for so many inputs, so precise, direct to the point, very fun and very technical, which gives me more interest to learn this stuff. Thank you so much!
Hey Ran, really glad to see you putting out long form detailed in depth videos. I’m not in need of beginner content, but I’ll be watching this video for the pleasure and as a refresher over the next few days. Thanks
Sept 01,2025 watching this video because I am wanting to be a web designer, with no experience but a college graduate of computer, though with a little bit knowledge of html programming using visual basic back in the days. I'm more than willing to learn and upskill since I have been fascinated about websites , wanting to debug, wanting to check its buttons and graphics and what could have been more useful. Been busy job hunting since January but got lots of rejections left and right. I will do my best to be a web designer. Will get back to you once I already am, and as of the moment, I just want to Thank God for this , so grateful for this intro to web design.
Brilliance can't be overstated when a person can dwindle down the PROPER QUESTION to ask. I LOVE how you show an adaptive approach to web design. I understand your desire to teach! You're not merely telling students "do this" or "do that", you're allowing them to take a pause, and to extract information (in order to fully understand the purpose of their proposed design). You have piqued my interest! Now I have to take your course to find more FLUX wisdom!
Timestamps (Powered by Merlin AI) 00:01 - Learn full web design process for beginners 01:58 - Two types of processes: amateur and professional. 06:04 - Understanding different types of websites is crucial for effective web design. 08:05 - Understanding the client's needs and vision for the website 12:06 - Website Structure and Elements Overview 14:06 - Creating a website wireframe to plan content and structure efficiently. 18:09 - Using wireframe tool to design sitemap and components easily 20:01 - Utilize wireframes as a reference for designing in Figma 23:44 - Learn how to write copy for websites effectively 25:32 - Adjusting layers and layout in web design 29:50 - Moving on to the next phase of web design 31:48 - Understanding how to use design tools to convey the right message 35:25 - Designing to set businesses apart from competitors through unique visuals and branding. 37:23 - Using medical design elements to build trustworthiness 41:22 - Utilizing psychedelics in a trustworthy medical context 43:19 - Creating a simple color palette and font selection based on provided images. 47:23 - Google Fonts is a great alternative for free fonts 49:20 - Exploring fonts for web design 53:18 - Exploring font choices and logo design process. 55:15 - Creating a logo and typography quickly using Figma 59:31 - Conceptualizing and sourcing creative imagery for website design. 1:01:15 - Combination of naturally sourced and GMP leads to unique standardization 1:05:09 - Exploring concepts for web design composition 1:07:04 - Revolutionize global mental health care with innovative products 1:10:50 - Photography and video assets for web design 1:12:48 - Adding an email icon for the contact form. 1:16:44 - Applying global styles for consistent design 1:18:33 - Adjust line height and text size for better readability 1:22:27 - Designing and formatting web content 1:24:21 - Implementing baseline alignment and link design for text 1:28:33 - Focus on spacing and design elements for a clean layout 1:30:43 - Resizing and color matching an image in Photoshop 1:34:40 - Adjusting filters and brightness to enhance image tones 1:36:30 - Enhancing images for better website fit 1:40:41 - Adjusting image, spacing, and aligning logos on web design layout. 1:42:45 - Adding gradient to the footer for extra color. 1:47:16 - Designing responsive breakpoints for mobile 1:49:03 - Host your website files on a hosting platform 1:52:40 - Understanding the difference between vector and raster images 1:54:45 - Exporting images in optimal size for Retina Display 1:58:43 - Setting up navigation in Webflow with pre-built components 2:00:34 - Styling the webpage elements 2:04:26 - Container defines maximum width and center alignment 2:06:19 - Changing font style for website consistency 2:09:52 - Creating organizational elements for layout control. 2:11:33 - Adjusting spacing and styling elements 2:15:25 - Adjust typography parameters and load custom font styles. 2:17:31 - Managing spacing and sections consistently is important in web design 2:21:16 - Align and center content on the webpage 2:23:15 - Limit text within a box and center it using wrapping div 2:27:34 - Resizing and styling images for web design 2:29:46 - Creating a divider line with gradient for partner logos 2:34:12 - Adjusting and styling logos for consistent display 2:36:12 - Creating a two-column section with a contact form 2:40:16 - Styling the submit button and creating an H3 heading. 2:42:27 - Designing an email button with an icon and link functionality 2:46:34 - Changing layout to flex box and managing alignment and spacing 2:48:29 - Recreating a gradient background and styling the footer section 2:52:21 - Customizing the navigation menu appearance 2:54:23 - Adjusting layout and text size for better appearance 2:59:06 - Optimizing web design for mobile by adjusting column layout, image sizes, and logo spacing 3:01:14 - Adjusting layout and text for mobile portrait view 3:06:00 - Showing the website to your client and having a positive reaction is a great feeling.
This is the best starter design course I've seen.
This is the best channel and community for Web Designers I have ever seen!! Just saying! Thank you for the content! You're rock Ran!
His voice is so clear and he explains so well.