Practical No. 8 Recreate Given Website for UI Design, Color, Images, Interactions, Menu

Practical No. 8

Recreate Given Website for UI Design, Color, Images, Interactions, Menu

(Using Figma)

1. Aim

To recreate a given website interface using Figma by applying appropriate UI layout, color schemes, typography, images, navigation menu, and interactions based on standard UI/UX design principles.

2. Practical Significance

Recreating a website helps students understand real-world UI design practices. It strengthens skills related to visual hierarchy, usability, accessibility, and interaction design, enabling the creation of user-friendly and aesthetically pleasing interfaces using Figma.

3. Industry / Employer Expected Outcomes

After completing this practical, students will be able to:

  1. Design user-centered websites and interfaces

  2. Analyze and replicate professional web page designs

4. Course Level Learning Outcomes (CLOs)

  • CO3: Select appropriate visual design for a given problem while minimizing usability barriers

  • CO4: Create interactions using a design tool

  • CO5: Create an innovative design prototype for given applications

5. Laboratory Learning Outcomes (LLOs)

  • LLO 8.1: Use frame, shape, text tools, and components of the design tool to replicate given web pages

  • LLO 8.2: Use interactions and menus to replicate web page design

6. Tools / Software Required

  1. Figma (Web or Desktop version)

  2. Internet browser (for reference website)

  3. Given website URL or screenshots (provided by instructor)

7. Stepwise Procedure (Using Figma)

Step 1: Analyze the Given Website

  1. Open the given website in a browser.

  2. Observe:

    • Page structure (Header, Sections, Footer)

    • Navigation menu layout

    • Color palette

    • Typography styles

    • Buttons and interaction behavior

  3. Identify reusable elements such as buttons, cards, and menu items.

Step 2: Create a New Figma File

  1. Open Figma → New Design File

  2. Select Frame Tool (F)

  3. Choose Desktop – 1440 px

  4. Rename the frame as:
    “Website Recreation – Home Page”

Step 3: Apply Layout Grid

  1. Select the main frame.

  2. Enable Layout Grid from the right panel.

  3. Set:

    • Columns: 12

    • Margin: 80 px

    • Gutter: 20 px

This ensures proper alignment and consistency.

Step 4: Design Header and Navigation Menu

  1. Draw a rectangle at the top for the header.

  2. Set height between 80–100 px.

  3. Apply background color as per reference.

  4. Add:

    • Logo (Text or Image)

    • Menu items (Home, About, Services, Contact)

  5. Use Auto Layout (Shift + A) for menu alignment and spacing.

Step 5: Apply Typography

  1. Select fonts similar to the reference website.

  2. Maintain text hierarchy:

    • Heading (H1)

    • Sub-heading (H2)

    • Body text

  3. Ensure consistent font size and spacing.

  4. Save styles using Text Styles.

Step 6: Apply Color Theory

  1. Use Eyedropper Tool (I) to pick colors from the reference.

  2. Define:

    • Primary color

    • Secondary color

    • Background color

    • Text color

  3. Ensure sufficient contrast for readability.

  4. Save colors as Color Styles.

Step 7: Create Content Sections

  1. Design sections such as:

    • Hero section

    • Content/About section

    • Services or card section

  2. Use rectangles and text for structure.

  3. Align elements using the layout grid.

  4. Apply Gestalt principles:

    • Proximity

    • Similarity

    • Continuity

Step 8: Add and Optimize Images

  1. Insert images using Place Image.

  2. Resize using Scale Tool (K).

  3. Maintain proper aspect ratio.

  4. Ensure images enhance content and do not clutter the interface.

Step 9: Create Buttons and Components

  1. Create buttons using rectangle + text.

  2. Apply corner radius and suitable colors.

  3. Convert buttons into Components.

  4. Create variants:

    • Default

    • Hover

    • Active

Step 10: Add Interactions (Prototype Mode)

  1. Switch to Prototype tab.

  2. Select a button or menu item.

  3. Set interaction:

    • On Click → Navigate To → Target Frame

  4. Apply:

    • Smart Animate

    • Ease In / Ease Out

    • Duration: 300 ms

  5. Preview using Play (▶) button.

Step 11: Design Footer

  1. Add a footer rectangle at the bottom.

  2. Include:

    • Website name or logo

    • Quick links

    • Contact information

  3. Use smaller font size and subtle colors.

Step 12: Final Review

Verify:

  • Similarity with the reference website

  • Proper alignment and spacing

  • Consistent colors and typography

  • Functional menu and interactions

  • Overall usability and accessibility

8. Relevant Affective Domain Outcomes

  1. Follow safety practices in the lab

  2. Maintain tools and equipment

  3. Follow ethical practices in design

9. Ethical Guidelines

  • Use copyright-free images and icons

  • Do not claim ownership of original website design

  • Recreate strictly for academic purposes

10. Expected Output

  • One fully recreated website UI in Figma

  • Proper layout, colors, images, menu

  • Clickable prototype

  • Design closely matching the given website




Popular posts from this blog