Web Design Crash Course: 2-hour Challenge

Key Concepts

• Landing Page Design Challenge: A time-bound (2-hour) challenge to design a landing page and create a visual mockup for social media, aimed at taking the first step towards a web design business or side hustle.
• AI Tools for Design: Utilization of ChatGPT (or other LLMs) for brief generation and image asset creation, and Reloom for wireframing and design element generation.
• Figma: A design tool used for creating mood boards, fine-tuning designs, and exporting final mockups.
• Brief: A document outlining project goals, target audience, core offer, and desired vibe, generated with AI assistance.
• Wireframe: A skeletal representation of a webpage, focusing on content, text, images, and layout without visual design elements.
• Sitemap: A structural overview of a website, detailing its pages and content hierarchy.
• Mood Board: A collection of images, colors, and typography that define the visual style and feel of a project.
• Style Guide: A feature in Reloom that allows for the application of colors and typography to a design.
• Mockup: A visual representation of a design, often placed within a device frame (e.g., laptop, phone) for presentation.
• Prototype: An interactive simulation of a design, used to showcase transitions and user flow.
• Social Media Sharing: The final step of sharing the created mockups or videos on social media platforms to gain visibility and enter a scholarship competition.

Landing Page Design Challenge: Step-by-Step Summary

This challenge guides participants through the process of designing a landing page and creating shareable visual assets within a 2-hour timeframe. The primary goal is to encourage action and demonstrate the ability to create valuable design work, rather than achieving perfection.

1. Project Brief Creation (Approx. 5 minutes)

• Objective: To define the project's scope, target audience, and desired aesthetic.
• Methodology: Utilize AI tools like ChatGPT by pasting a provided template and filling in or allowing AI to suggest details.
• Key Elements:
  • Niche: The industry or type of business (e.g., Electric Vehicle Company).
  • Target Audience: The intended customer base (e.g., Rock Musicians).
  • Core Offer: What the landing page is promoting (can be left to AI if unsure).
  • Primary Goal: The main objective of the landing page (e.g., Join the waitlist).
  • Vibe: The overall feeling or style (e.g., Edgy and cool).
• Output: A detailed brief including company name (e.g., Voltrife Motors), project summary, audience insights, problem/desire, and required landing page sections (Hero, Lifestyle Imagery, Key Benefits, Testimonials, Specs Overview, Lead Capture Form, Footer).
• Example: The transcript uses "Voltrife Motors" for "EV electric vehicle company" targeting "rock musicians" with an "edgy and cool" vibe, aiming to "join the waitlist."

2. Wireframe Creation (Approx. 10 minutes)

• Objective: To create a structural skeleton of the landing page, outlining content placement and layout without visual design.
• Tool: Reloom, a web design tool with AI capabilities.
• Process:
  1. Create a Reloom Account: Access the free account.
  2. New Project: Start a new project within the site builder.
  3. Sitemap Generation: Describe the project (using the brief's summary) and generate a sitemap. For a landing page, this is simplified to a single page.
  4. Section Customization: Adjust the generated sitemap to match the required sections from the brief. This involves adding, removing, or renaming sections (e.g., replacing "Features" with "Lifestyle Imagery and Video," "Benefits," "Testimonials," "Specs Overview," "Lead Capture Form," and "Footer").
  5. Wireframe Conversion: Initiate the wireframe generation process within Reloom. This transforms the sitemap into a grayscale representation with placeholder text and basic layouts.
  6. Layout Refinement: Modify section compositions (e.g., image placement, alignment) and explore different layout options provided by Reloom.
  7. Content Placeholder Adjustment: Replace generic placeholders with more specific descriptions based on the brief (e.g., "gallery of images related to the provider service" for lifestyle imagery).
  8. Call to Action (CTA) Integration: Ensure the lead capture form section is present and clearly designated for the primary CTA (e.g., "Join the waitlist").
• Key Concept: Wireframing focuses on functionality and structure before aesthetics.

3. Mood Board Creation (Approx. 30 minutes)

• Objective: To define the visual direction, including colors, typography, and imagery, that aligns with the project brief.
• Tools: Figma and Pinterest (or similar inspiration platforms).
• Process:
  1. Figma Setup:
     • Export the Reloom Figma kit to use as a starter file.
     • Create a new page in Figma named "Mood Board."
  2. Keyword Identification: List keywords derived from the project brief (e.g., "electric," "rock," "edgy," "futuristic").
  3. Inspiration Gathering:
     • Use keywords to search for images on platforms like Pinterest.
     • Collect images that convey the desired feel, colors, typography styles, and overall aesthetic.
     • Copy and paste these images into the Figma mood board page.
  4. Narrowing Down Inspiration:
     • Analyze the collected images to identify recurring themes, color palettes, and typography styles.
     • Select a cohesive set of images that represent the final visual direction.
     • Example: For Voltrife Motors, the chosen palette was black and a lime green, with a preference for bold, narrow typography and imagery featuring long-exposure lights and a slightly digital, scratched effect.
  5. Visual Definition: Create visual representations within Figma to solidify the chosen direction. This can involve overlaying colors or applying blend modes to images to test the palette.
• Key Concept: Mood boarding bridges the gap between abstract ideas and concrete design elements.

4. Image Sourcing and Creation

• Objective: To obtain or generate images that match the defined mood board and fit the wireframe sections.
• Methodology:
  1. Image Idea Generation: List specific image concepts relevant to the landing page sections (e.g., "blurred car in that style," "rocker with tattoo and guitar leaning on the car").
  2. Stock Photo Search: Utilize free stock photo websites (e.g., Pexels) for readily available images, if suitable.
  3. AI Image Generation:
     • Use ChatGPT (or other AI image generators) to create custom imagery.
     • Provide descriptive prompts based on the mood board and desired content.
     • Example: Exporting a mood board image to ChatGPT and asking it to describe the style, then using that description to generate images of a futuristic EV with specific effects (e.g., "futuristic EV in this style," "car on a highway driving fast with blurred lines," "photorealistic modern EV interior dashboard without the effect and outside the window you can see the effect").
• Key Concept: Combining existing resources with AI-generated content allows for unique and tailored visuals.

5. Design Application and Refinement (Using Reloom Style Guide)

• Objective: To apply the defined colors and typography from the mood board to the wireframe.
• Tool: Reloom's Style Guide feature.
• Process:
  1. Access Style Guide: Navigate to the style guide section in Reloom.
  2. Color Palette Application:
     • Identify the primary and secondary colors from the mood board (e.g., black and lime green).
     • Use the color picker tool to extract hex codes from mood board images.
     • Replace default colors in Reloom with the chosen palette.
  3. Typography Selection:
     • Choose fonts that align with the mood board's typography style (e.g., bold, narrow).
     • Explore font suggestions within Reloom, prioritizing free options from Google Fonts if necessary.
     • Adjust font sizes and line heights for readability and visual impact.
  4. Image Integration:
     • Export the generated or sourced images from Figma.
     • Upload these images into Reloom to replace placeholder images in the wireframe sections.
     • Experiment with different image placements and selections to see how they affect the overall design.
  5. Design Review: Use the "Pitch Concept" feature in Reloom to preview the design with applied styles and images.

6. Export to Figma and Finalization

• Objective: To import the Reloom design into Figma for further refinement and mockup creation.
• Tools: Reloom plugin for Figma, Figma itself.
• Process:
  1. Figma Setup: Open a new, empty design page in Figma.
  2. Reloom Plugin Integration:
     • Access Figma plugins and search for "Reloom."
     • Log in to the Reloom account.
     • Select the project to import.
     • Choose to import the design (not Figma sites).
  3. Import: Initiate the import process. This will bring in both desktop and mobile responsive views of the design.
  4. Figma Refinements (Optional):
     • Make minor adjustments to text size, line height, or other elements as needed.
     • Navigate through layers to access and edit specific text elements.
     • Reloom prepares the design for development by including class names, which is beneficial for future development.
• Key Concept: Figma serves as the central hub for final design adjustments and mockup generation.

7. Mockup and Animation Creation

• Objective: To create shareable visual assets (mockups or short videos) for social media.
• Tools: Figma plugins (Mockup Studio), screen recording software (e.g., QuickTime Player).
• Process:
  1. Mockup Generation:
     • Use the "Mockup Studio" plugin in Figma.
     • Select a frame (e.g., desktop view).
     • Choose a mockup template (e.g., laptop, tablet) from the plugin's library.
     • Export the generated mockup as an image file.
  2. Full Page Showcase (Alternative/Advanced):
     • Export the entire landing page as an image.
     • Create a new frame in Figma sized for social media posts (e.g., Instagram Post).
     • Place the exported page image within this frame, potentially cropping to showcase different sections.
     • Duplicate frames to represent different sections of the page.
  3. Animation Creation (Optional):
     • Switch to Figma's "Prototype" tab.
     • Set up an interaction (e.g., "After delay") to transition between frames.
     • Use "Smart Animate" for smooth transitions between different sections of the page.
     • Adjust animation duration and easing for desired effect.
     • Preview the animation.
     • Use screen recording software to capture the animated transition as a video.
  4. Background Customization: Change the background color of social media frames to match the brand palette (e.g., black and white).
• Key Concept: Visual presentation is crucial for marketing and showcasing design work.

8. Sharing and Scholarship Eligibility

• Objective: To share the created mockups or videos on social media and become eligible for a scholarship.
• Process:
  1. Platform Selection: Share the visuals on chosen social media platforms (Facebook, Instagram, LinkedIn, Twitter, etc.).
  2. Hashtag Usage: Include the hashtag #fluxacademy to ensure visibility and eligibility for the scholarship.
  3. Captioning: Utilize provided template caption suggestions or create custom ones to describe the project and the journey.
• Scholarship Opportunity: Completing the challenge and taking action makes participants eligible for a scholarship to the "web career Ignite" program, which includes access to all web design and development courses, mentoring, and one-on-one calls.
• Key Argument: Putting oneself out there and taking action is the differentiator between aspiring designers and successful professionals.

Conclusion and Takeaways

This challenge emphasizes the importance of taking the first step in building a web design career. By leveraging AI tools and readily available design software, participants can quickly create a tangible design project and a shareable asset. The process, from brief generation to social media sharing, is designed to be achievable within a limited timeframe, proving that valuable progress can be made with focused effort. The opportunity to win a scholarship to an in-depth program further incentivizes participation and commitment to developing web design skills.