Design

[egoullaud]

Description

This document will serve as the design home base for our project. Come here to see what design tasks need doing and what is done!

User Story

As a user, I want the design to meet accessibility requirements, so that anyone can play.

Tasks

Sprint 1: May 1- May 7

• [x] create Figma file
• [x] send invites to team members

  Style Tile

• [x] create short list of color palettes,
• [x] fonts
• [ ] buttons
• [ ] bots
• [ ] check accessibility contrast

Design Features

• [x] Scoreboard
• [x] Arena
• [x] Bot Designers with dropdown menu
• [x] Bot - Packman
• [x] Footer
• [x] Reference Corner
• [x] Light and Dark Mode button
• [ ] "start the game" button on Game Page
• [ ] add a grid design

Screenshots of Design

	Dark Mode	Light Mode
Landing Page
Home Page

References and Links

Create a Wireframe in 3 Easy Steps: https://elementor.com/blog/wireframe-website/ Project requirements: https://github.com/chingu-voyages/voyage-project-tier2-boolebots

[GillianTrethewey]

This looks great. With new information, the layout only needs to be desktop. We would want to add accessibility in the user story. As a user, I want the design to meet accessibility requirements, so that anyone can play. The MVP has been started for components on Issue 20 :) Great start for your first issue!!

[rselvasoyak]

To add with Lee at meeting:

• Accessibility concerns
• Edit user story
• Make a list of items to design
• Check details on Desktop-First approach (Instructions of Jim according to @GillianTrethewey)

[rselvasoyak]

Color Palette Idea #1 with Accessibility Check: Color Names and Hex Codes:

• Light Grey: #E0E0E0
• Light Blue: #17C9ED
• Blue: #2B4CA1
• Dark Blue: #172957
• Orange (pop color): #FF5F2E
• Peach: #FF9675
• Light Brown: #8A1E00
• Black: #000000;

Contrast Ratio According to Accessibility Standards (WCAG AA and AAA) -> Background: Dark Blue + Foreground Color: Light Blue = Contrast 7.11 (Pass) -> Background: Light Grey + Foreground Color: Dark Blue = Contrast 10.66 (Pass) -> Background: Light Grey + Foreground Color: Light Brown = Contrast 7.01 (Pass) -> Background: Dark Blue + Foreground Color: Peach = Contrast 7.04 (Pass) -> Background: Black + Foreground Color: Orange = Contrast 7.04 (Pass) -> Background: Light Brown + Foreground Color: Light Grey = Contrast 7.04 (Pass) -> Background: Light Grey + Foreground Color: Blue = Contrast 6.1 (Pass AA - Not Pass AAA)