Learn Web Design For Beginners - Full Course (2024)
Flux Academy・173 minutes read
The course covers full web design process from planning to publishing, divided into five chapters for easier navigation. It aims to equip students to build simple websites, emphasizing creativity, technical skills, and collaboration.
Insights
- The course covers the entire web design process, from initial planning to final publishing, making it beginner-friendly and accessible to all.
- The professional web design process involves detailed planning, structuring, designing, and development, highlighting the complexity and depth of creating effective websites.
- Utilizing digital tools like Figma and Reoom AI Site Builder streamlines the design process, offering suggestions and guidance for creating wireframes and layouts efficiently.
- Visual elements like color palettes, typography choices, and unique graphic design play a crucial role in creating engaging and visually appealing websites.
- The importance of responsive design, content management systems like WordPress, and platforms like Webflow are emphasized, showcasing the significance of adapting websites for various devices and utilizing efficient development tools.
Get key ideas from YouTube videos. It’s free
Recent questions
What is the goal of the web design course?
To equip students to build simple websites.
Related videos
Summary
00:00
"Web Design Course: Planning to Publishing"
- Course covers full web design process from planning to publishing
- Crash course in Figma for designing and Webflow for development
- No prior knowledge required, beginner-friendly
- Instructor Ron Sea, 20 years of design experience
- Goal is to equip students to build simple websites, potentially charge for them
- Web design is creative, technical, collaborative, and in demand
- Course divided into five chapters for easier navigation
- Professional vs. amateur web design processes explained
- Professional process involves planning, structuring, designing, and developing
- Different types of websites: eCommerce, marketing, content, educational, portfolio
14:16
"Building Credible Websites with Effective Layouts"
- The product overview is essential for establishing credibility.
- Utilizing logos of partnered medical and research institutions enhances credibility.
- Including a contact section is crucial for interested investors and collaborators.
- A footer is necessary to conclude every page effectively.
- Creating a sitemap is the initial step before expanding into wireframes.
- Wireframes can be sketched on paper for a quick visualization of website layout.
- Utilizing digital tools like Reoom AI Site Builder can streamline sitemap creation.
- Reoom AI Site Builder suggests sections like navbar, hero, about, team, FAQ, call to action, and footer.
- Adjusting and customizing suggested sections in Reoom AI Site Builder is essential.
- Figma can be used to create wireframes digitally, starting with a desktop frame and adding placeholders for logo, sections, headings, and text.
28:47
Designing Contact Form and Footer for Website
- The text discusses creating a contact form, including a message and a submit button.
- A footer is also mentioned, which will include investor contact information and an email.
- The footer will also contain copyright information.
- The created wireframe will serve as the basis for future design work.
- The design phase is highlighted as the creative and fun part of the project.
- Graphic design is emphasized as a core aspect of web design, focusing on visual communication.
- Examples of posters with the same message but different visual storytelling are provided.
- Collecting inspiration and references is recommended before starting the design process.
- Keywords related to the project, such as healthcare and scientific, are suggested for searching for inspiration.
- Various sources like Behance, Pinterest, and Dribble are recommended for finding design inspiration.
43:45
Creating Color Palette and Typography for Design
- To develop a color palette, start by organizing colors and creating rectangles for each color.
- Use the eyedropper tool to select white and black colors from references.
- Add a gray color as a reference and duplicate the process to include it in the palette.
- Create a gradient by extending a rectangle, selecting the gradient option, and adding stops for different colors.
- Be cautious of using gradients similar to competitors to ensure uniqueness.
- Explore typography options by comparing fonts like Iner and Google Fonts' Raleway.
- Consider premium font alternatives like those from YouWorkForThem for a more unique look.
- Purchase desired fonts, like Saffron Grotesque, for both desktop and web use.
- Choose fonts based on their suitability for headings and body text, ensuring readability.
- Finalize font choices for headings and body text to create a cohesive design.
59:06
AI for Cost-Effective Custom Website Assets
- Using AI to generate assets is a new, cost-effective option for creating custom content.
- The project involves utilizing three methods: traditional illustration, AI-generated assets, and photography.
- Creativity is key in brainstorming and developing concepts for website images.
- Unique aspects of the company, like natural sourcing and GMP standards, need to be visually represented.
- Ideas for visual representation include a manufacturing line with a rainbow effect and a product shot with nature elements.
- AI image generation through Mid Journey involves multiple iterations to achieve desired results.
- Images are upscaled for higher resolution and further customization.
- A man in a lab setting experiencing a psychedelic treatment is visualized with a rainbow light effect.
- Custom photography in the lab is suggested for showcasing the product and its processes.
- Adobe Bridge is used to review and select the best lab photos for website inclusion.
01:13:43
"Design Prep: Vector Files, Text Styles, Layout"
- Vector files allow for easy scaling and copying into design software like Figma.
- Assets are prepared for design work by copying and pasting them into the design file.
- The logo is converted into vector shapes for scalability and pasted into the design.
- Navigation links are set up to scroll to different sections, styled for consistency.
- Text styles are created for easy application and global changes in the design.
- Alignment and spacing are adjusted for a visually appealing layout.
- Heading sizes and styles are adjusted for hierarchy and readability.
- Text styles are created for headings, subheadings, and body text for consistency.
- Layout elements are given rounded corners for a cohesive design.
- A gallery layout is planned for multiple photos, with rounded corners applied to sections.
01:28:21
"Enhancing Website Design with Consistent Spacing"
- Consistent spacing is crucial for alignment and aesthetics.
- Adjusting the contact form and partner sections for better spacing.
- Adding round corners and increasing button size by 30 pixels for a nicer look.
- Selecting and pasting images into the design, ensuring equal spacing and alignment.
- Editing images in Photoshop to match color tones and proportions.
- Brightening images and adjusting colors using Photoshop filters and adjustment layers.
- Resizing images for optimal website display and cropping for focus.
- Enhancing images in Adobe Camera Raw for brightness and color adjustments.
- Aligning and distributing partner logos with equal spacing.
- Incorporating a colorful gradient in the footer for added visual appeal.
01:44:03
"Design Tips, Webflow Demo, CMS Introduction"
- The text discusses selecting colors for design, suggesting a purplish hue for buttons and a gray tone for a circle.
- It mentions using an eye dropper tool to sample a gray color from a mood board.
- The text includes searching for an email icon on Iconfinder, copying it as an SVG, and pasting it into the design.
- It talks about grouping elements together into a "contact" section and adding gradient lines for better organization.
- The author considers experimenting with different layouts and designs but opts for a simple design due to time constraints.
- Responsive design is briefly mentioned, with the author expressing a preference for not focusing on it during development.
- The text transitions to explaining how the internet works, detailing the translation of domain names into IP addresses and the role of hosting platforms.
- It delves into the core files of a website, including HTML for structure, CSS for styling, and additional files for images, videos, and JavaScript.
- Content management systems (CMS) are introduced as tools for clients to easily edit websites, with WordPress highlighted as a popular option.
- The author recommends Webflow as a preferred solution for professional web design, leading to a demonstration of creating a website in Webflow, starting with uploading assets like images and fonts.
01:59:21
"Webflow Navar Component: Mobile Design Essentials"
- Pre-built Navar component used for Mobile design in Webflow.
- Webflow's native navigation element facilitates customization.
- Structure includes body, navbar, container, brand, and menu.
- Logo and menu links added and customized within the navbar.
- Styling panel in Webflow controls design elements.
- Container maintains content alignment and width consistency.
- Constraints and styling ensure responsive design for various screen sizes.
- Classes like "navlink" and "logo" applied for consistent styling.
- Box model concept utilized for spacing and padding adjustments.
- Section and container elements organized for layout control in Webflow.
02:13:09
"Webflow Design Tips for Hero Images"
- To style the hero image, apply round corners by giving it a class named "round image round corners" with a corner radius of 30 pixels.
- Align elements to the center by selecting the left cell and adjusting the alignment to Center in the layout options.
- Automatically generated classes by Webflow can be renamed for reusability, like renaming "cell" to "vertically centered cell."
- Customize typography by setting the H1 to the saffron font at a size of 50 with adjusted line height for better readability.
- Modify the subheading to uppercase, bolder font, and load the medium and semi-bold inter fonts for consistency.
- Create a section class for consistent spacing and padding, ensuring elements are aligned and spaced uniformly.
- Design a new section with a div block named "Mission block" for text over an image, setting a height of 700 and applying a background image with round corners.
- Center text elements within the Mission block and add padding for better presentation.
- Group text elements within a div block named "Mission texts" to limit width and center text for improved readability.
- Duplicate and modify the structure for a more complex grid layout in the third section, adjusting column and row settings to accommodate different content.
02:28:29
"Styling Images, Logos, and Contact Form"
- The image height is 290 pixels, and a combo class "top lab image" is added to it for unique styling.
- The width of the image is set to 100%, but it gets stretched, so the "cover" setting is used to fill the space without stretching the image.
- Another image with the same height is also styled with the "top lab image" class for consistency.
- A partner section is created with gradient divider lines running across the page and logos inside a container.
- The gradient for the divider lines is created with multiple color stops, and spacing is added between the lines and the container.
- Logos are added to the partner section, resized to 90 pixels in height, and spaced out evenly.
- A two-column section is duplicated for a contact us section with a form block for name, email, and message fields.
- Styling is applied to the form fields with a gray background, rounded corners, and increased padding.
- A submit button is styled with a purplish color, increased size, and bold text.
- An email button with an email icon is created as a link to send an email with a specific subject.
02:44:43
Website Design: Styling, Responsive, Optimization, Navigation
- The text discusses navigating through different sections like Mission, Product, and Contact on a website.
- It explains the process of styling an email link to match the website's design, including changing the color and size.
- Utilizing a div block to organize elements together and manage spacing between them effectively.
- Transitioning the layout to a flex box to align and space elements appropriately.
- Adding an email link and styling it to match the website's design, ensuring it functions correctly.
- Creating a footer section with a gradient background and adding text content, aligning it centrally and adjusting padding.
- Planning to make the website responsive by adjusting styling for different breakpoints like tablet and mobile.
- Modifying the navigation menu's appearance, changing the background color and text color to enhance the design.
- Adjusting spacing and font sizes for various elements to ensure readability and visual appeal on different devices.
- Optimizing image sizes and layouts for mobile devices to improve the overall appearance and functionality of the website.
03:00:49
Optimizing Website Layout for Better Readability
- The text discusses adjusting the layout of a website, focusing on elements like headings and logos to ensure proper alignment and spacing.
- Specific changes are made, such as reducing the size of headings to 28, adjusting logo sizes to 200 and 180, and decreasing text size to 27 for better readability on mobile.
- The spacing between elements is modified, with gaps reduced to 20 and section spacing adjusted from 50 to 30 pixels.
- The process concludes with the website being reviewed across different breakpoints, ensuring a satisfactory appearance before publishing it on a free domain provided by Webflow.
