Summary
Highlights
This course covers the entire web design process, from planning to publishing, using Figma for design and Webflow for development. No prior knowledge is required, and the course is project-based, allowing you to build a website for your portfolio. The instructor, Ron Seal, has 20 years of design experience and has taught thousands of designers. Web design offers a creative, technical, and collaborative career with high demand. The course aims to equip you to build simple websites, potentially for clients, and encourages excitement about web design for future professional development. The long course is broken into five chapters, and a free 5-day email course offers additional resources and materials to enhance learning.
The course focuses on the professional web design process, which starts from a blank canvas to create custom solutions, unlike the amateur process of customizing templates. The professional process is used by agencies charging high fees and is more resistant to AI automation. AI tools can be integrated to enhance this process. The professional process involves four key steps: planning and strategy, structure (UX), design (UI), and development. These steps ensure a comprehensive and effective website creation.
The first step, planning and strategy, involves understanding the website's purpose, target audience, goals, and success metrics. This is achieved through client conversations and research to create a project brief. Websites fall into five main categories: e-commerce, marketing/business, content/media, educational, and portfolio. Application-like websites (e.g., Google, Airbnb) are more complex and not covered. Website goals can include selling products, building trust, generating leads, or providing education. Strategy sessions with clients help understand their business, customers, and vision, informing essential content. A practical example involves building a website for Massix, a pharmaceutical company dealing with psilocybin, aiming to build trust and credibility. The process includes creating a brief and gathering reference websites from the client to align expectations.
The second step, structure or UX, involves translating the strategy brief into a structured, meaningful content layout. Websites are composed of pages (e.g., homepage, about, product, blog, contact) and sections within pages (e.g., navigation, hero, features, call to action, testimonial, pricing, gallery, contact, footer). Each section uses various elements like text, buttons, links, images, and forms. The process begins with creating a sitemap to map out pages and sections. Then, low-fidelity wireframes are developed, focusing on structure and content without design elements. The instructor demonstrates creating a sitemap and wireframes for the Massix project, opting for a single-page website due to its early stage. Sections include navigation, hero, mission, product overview, partner list, contact, and footer. The process is initially done with pen and paper for speed, then transferred digitally. Tools like Reloom AI Site Builder can automatically generate sitemaps and wireframes, including copy, and allow for component-based customization. However, the instructor advocates for initial manual sketching for beginners to encourage critical thinking before using AI tools. The wireframes are then created in Figma, serving as a basis for the design phase and for client review to ensure content and structure alignment.
The design stage, often called UI design, involves graphic design principles to communicate a message through color, typography, and visuals. This amplifies the literal message already established in the text. Inspiration and references are crucial, gathered from platforms like Behance, Pinterest, and Dribbble, as well as client-provided materials. For the Massix project, keywords like 'healthcare,' 'medical,' 'pharmaceutical,' 'psilocybin,' and 'scientific' guide the search. Competitor websites are analyzed for common design patterns and to ensure differentiation. The instructor curates an inspiration mood board in Figma, focusing on clean aesthetics, subtle rainbow effects (to hint at psychedelics within a medical context), and photography style. A color palette is developed from these inspirations, including black, white, gray, and a multi-color gradient. Font selection involves exploring free Google Fonts (like Inter) and premium options (like Saffron Grotesque for headings) to convey a unique yet professional message. A logo is created in Illustrator, abstractly representing a brain with connections, to replace the client's initial generic logo. The imagery strategy involves custom photography for the lab, free stock assets for icons, and AI-generated images using MidJourney for conceptual visuals. The instructor demonstrates generating hero images using AI, focusing on concepts like a production line or product shots infused with natural elements and rainbow reflections. AI is also used to generate an image for the mission section, depicting a blissful patient in a clinical setting. Custom photography is planned for the product section, involving a lab photoshoot to showcase the process and build trust. Free icons are sourced from Icon Finder for the contact section. This toolkit of logo, colors, typography, and imagery forms the foundation for the visual design.
The design toolkit is then implemented into a Figma file. The logo is vectorized and resized for the navigation bar. Navigation links are styled with a consistent font and spacing, using Figma's text styles for global changes. Headings (H1, H2) and body text styles are defined using the chosen Saffron and Inter fonts, adjusting size, line height, and capitalization for optimal readability and visual hierarchy. Section layouts are created using rounded corners, taking inspiration from the mood board. Imagery is integrated into the design: the AI-generated hero image is placed, and its color tone is adjusted in Photoshop to match the overall aesthetic. Photoshop's generative fill feature is used to expand image backgrounds and curves adjustments to unify image brightness and coolness. Custom lab photos are color-corrected in Camera Raw and resized before being placed into content sections, forming a bento box-style gallery. Partner logos are resized and aligned within their section, using gradients for visual separation. The contact form is designed with rounded input fields and a colored submit button. The email contact links are made functional, linking to email addresses. All sections are grouped and named for organization. The goal is to establish a solid visual design that aligns with the initial strategy and mood board. The instructor emphasizes that in real projects, more design exploration and iteration would occur across different layouts and styles, often involving creating duplicate pages for comparison. While responsive designs for mobile are not fully developed in Figma, the instructor notes that this consideration will be addressed during the development phase in Webflow.
The development phase involves transforming the static Figma design into a live, interactive website. The instructor explains the fundamentals of how the internet works: browsers translate domain names (like Google.com) into IP addresses to locate website files. These files (HTML for structure and text, CSS for styling, images/videos, and JavaScript for advanced functionalities) are typically hosted on a hosting platform rather than a personal computer. To allow clients to easily edit content without coding, a Content Management System (CMS) is used (e.g., WordPress, Wix, Squarespace, Webflow, Framer). Webflow is highlighted as a powerful all-in-one solution that includes hosting, CMS, and a visual builder, making it the preferred tool for this course. Starting with a blank Webflow project, the first step is to import all necessary assets: logo, email icon, and the processed images from Figma. Fonts (Google Fonts like Inter, and custom paid fonts like Saffron Grotesque) are uploaded and configured in Webflow's site settings, emphasizing the importance of loading only necessary font weights to optimize website performance. The navigation bar is built using Webflow's pre-built navbar component, which provides essential functionalities like responsive hamburger menus. The navbar's default gray background is customized to white, and individual links are styled. The concept of containers is introduced to manage content width and centering across different screen sizes, addressing how static Figma designs adapt to various display dimensions.
Building the website in Webflow begins by styling the navigation bar. The default gray background of the navbar is changed to white. A container class is applied to the navbar to control its maximum width and keep content centered, replicating the Figma design's width of 1300 pixels. Nav links are given a 'nav link' class, and their font (Inter) is globally set for the body element. The logo is given a 'main logo' class, resized, and padded for proper alignment. Each subsequent section of the website is built within a dedicated 'section' element for organization, and each includes a container to maintain consistent content width. The hero section uses a two-column grid layout for text and imagery. Headings are adapted to be H1 and styled with the custom Saffron font, adjusting line height and size. Subheadings are styled with Inter, made uppercase, and given appropriate spacing. The hero image is placed and given 'round image' class for rounded corners. The mission section is built using a 'div block' to house the text and serve as a background for the image. The div block is given a height, a background image (using the AI-generated image), and rounded corners. Text within this block is centered and wrapped in another div to control its maximum width, ensuring readability. The product section reuses the two-column grid but introduces a more complex grid structure for the images, spanning multiple columns and rows to create a bento box layout for the custom lab photos. Image classes are applied to ensure rounded corners and proper fit/cover properties. The partners section introduces gradient lines above and below a container holding partner logos. The logos are imported, resized, and given 'partner logo' classes for consistent styling and spacing. The contact section features a Webflow form block, customized with fields for name, email, and message. Placeholder text replaces labels, and fields are given gray backgrounds and rounded corners. An email button is created with a circular gray background and an imported email icon, functioning as a mailto link. Navigation links are made functional, scrolling to their respective sections using IDs. Finally, the footer section is created with a gradient background and copyright text, completing the Webflow build.
After building the desktop version, the website's responsiveness is addressed in Webflow across different breakpoints (tablet, mobile landscape, mobile portrait). Changes made at smaller breakpoints cascade down but do not affect larger ones. The instructor begins by adding universal left and right padding to all sections and the navbar to ensure consistent spacing on smaller screens, which is crucial for readability. On the tablet breakpoint, the hamburger menu is customized: its background is changed to a semi-transparent white with a blur effect (glassmorphism) for a modern look, and icon colors are adjusted. Heading sizes (H1, H2, H3) are reduced across breakpoints to suit smaller screens, maintaining visual hierarchy. Image positioning is adjusted to ensure focal points are visible. The product section's grid layout is reconfigured for tablet and mobile, stacking elements vertically as needed. Partner logos are adjusted for spacing and size. The contact form's width is made responsive. On mobile portrait, further adjustments are made: logo size is reduced, heading text sizes are further decreased to prevent single-word lines, and element spacing is tightened. The mission block's height is reduced to optimize screen usage. Image heights in the product section are also decreased to show more content. The process is iterative, involving constant visual checks and adjustments. Once all breakpoints are reviewed and adjusted for optimal appearance and readability, the website is ready for publishing. Webflow allows instant publishing to a free webflow.io subdomain, making the site live and accessible. For a custom domain, a Webflow hosting plan and domain purchase are required. The instructor concludes by reiterating the value of building a complete website and the satisfaction of delivering professional work to clients, encouraging students to continue their web design journey with additional resources.