Create a Figma design for Add cards menu #868

Closed
opened 2026-05-11 08:14:41 +00:00 by a22erigr · 5 comments
Collaborator

Description

In the parent issue #843 the general design of the website is created. In this issue you should design how the Add new cards menu should look.
The design should be aligned with material design philosophy. Pls use https://www.figma.com/community/file/1035203688168086460/material-3-design-kit
(Ai mockup for insperation bild bild)

What should be done

  • Create the design for both add new cars
    • Light mode
    • Dark mode
  • How should the main and secondary colors be used?
  • Can or should we use material design icons
  • How should the hover effects and select effects look like
  • How should the buttons look like
  • How should the preview look like #860
## Description In the parent issue #843 the general design of the website is created. In this issue you should design how the Add new cards menu should look. The design should be aligned with material design philosophy. Pls use https://www.figma.com/community/file/1035203688168086460/material-3-design-kit (Ai mockup for insperation ![bild](/attachments/86cf5464-dc1d-4cba-b81f-c8d28c0ba044) ![bild](/attachments/dfbffbcd-d10e-4490-9513-26751815689c)) ## What should be done + Create the design for both add new cars + Light mode + Dark mode + How should the main and secondary colors be used? + Can or should we use material design icons + How should the hover effects and select effects look like + How should the buttons look like + How should the preview look like #860
Collaborator

Colorcodes used:

  • From emerald theme:
    • #2b3b11
    • #4c6322
    • #9ab30c
    • #e7f5ab
  • Backgrounds:
    • Darkmode: #141714 bg
    • Darkmode: #1B1F1B cardsview bg
    • Darkmode: #20251F preview bg
    • Lightmode: #F6F8F0 bg
    • Lightmode: #E6EBD7 preview bg
Colorcodes used: - From emerald theme: - #2b3b11 - #4c6322 - #9ab30c - #e7f5ab - Backgrounds: - Darkmode: #141714 bg - Darkmode: #1B1F1B cardsview bg - Darkmode: #20251F preview bg - Lightmode: #F6F8F0 bg - Lightmode: #E6EBD7 preview bg
Author
Collaborator

Feedback from the top bild

  • The search bar should be a bit more square
  • add a "bar" to visualy show select card. (Se image )
  • The height of "preview" and the list of views should have the same height (se image)
    If anything is unclear please send a message
Feedback from the top ![bild](/attachments/e69644e4-6245-4438-b68c-251fc3a9c5bf) + The search bar should be a bit more square + add a "bar" to visualy show select card. (Se image ) + The height of "preview" and the list of views should have the same height (se image) If anything is unclear please send a message
397 KiB
397 KiB
Collaborator

image
image

With changes, also moved the preview modal a bit to the left to have equal space left and right of the preview-field.

![image](/attachments/65163863-4d54-4974-a007-79c462201252) ![image](/attachments/245b1ebb-9b1f-4393-86c3-9821329cb06f) With changes, also moved the preview modal a bit to the left to have equal space left and right of the preview-field.
116 KiB
153 KiB
Author
Collaborator

The project top things this design very good and is ready to be used as a guide for implementation.

The project top things this design very good and is ready to be used as a guide for implementation.
Author
Collaborator

The icon design solves issue #40

The icon design solves issue #40
Sign in to join this conversation.
No milestone
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Andras/BoundlessFlowCampus2K#868
No description provided.