(UI UX Designer) Exercise 07‐19‐02024 Visual Design Exercise - Quad22-Technologies/game_rec_wiki GitHub Wiki

Visual Design


  • Visual design is essential for creating an engaging and aesthetically pleasing user interface. This phase focuses on establishing a cohesive visual style and ensuring consistency across the website.

Tasks Breakdown:

1. Design a Cohesive Visual Style:

1.1. Define Visual Identity:

  • Develop a visual identity that aligns with the brand’s personality and target audience.
  • Include elements such as logos, icons, and imagery that reflect the gaming theme.

1.2. Color Schemes:

  • Choose a color palette that enhances the user experience and aligns with the brand.
  • Ensure colors are accessible and provide sufficient contrast for readability.

1.3. Typography:

  • Select fonts that are legible and visually appealing.
  • Define font sizes, weights, and styles for headings, body text, and other textual elements.

1.4. Branding Elements:

  • Incorporate branding elements like logos, taglines, and other visual cues consistently across the site.
  • Ensure branding elements reinforce the site’s identity and appeal to the target audience.

2. Create High-Fidelity Mockups of Key Pages:

2.1. Homepage:

  • Design a visually engaging homepage that introduces the site’s features and invites user interaction.
  • Include elements like featured game recommendations, latest reviews, and navigation menus.

2.2. Recommendation Page:

  • Create a layout that highlights personalized game recommendations.
  • Include visual elements such as game thumbnails, ratings, and brief descriptions.

2.3. User Profile:

  • Design user profile pages that showcase user information, gaming history, and social connections.
  • Ensure the layout is user-friendly and visually cohesive.

2.4. Reviews Page:

  • Design a page where users can read and write game reviews.
  • Include clear call-to-action buttons for writing reviews and rating games.

3. Develop a Style Guide:

3.1. Document Design Elements:

  • Create a comprehensive style guide that documents all design elements, including color schemes, typography, and branding elements.
  • Include guidelines for using images, icons, buttons, and other UI components.

3.2. Consistency Guidelines:

  • Provide guidelines for maintaining visual consistency across the website.
  • Ensure all team members and stakeholders understand and adhere to the style guide.

3.3. Accessibility Considerations:

  • Include accessibility guidelines to ensure the site is usable by all users, including those with disabilities.
  • Specify requirements for color contrast, font sizes, and interactive elements.

3.4. Update and Maintain:

  • Regularly update the style guide as the design evolves.
  • Ensure that any new design elements are added to the style guide to maintain consistency.


  • A cohesive visual design enhances the user experience and reinforces the brand identity.
  • High-fidelity mockups and a detailed style guide ensure that the website is visually appealing and consistent.