Create a figma design for settings page #863

Closed
opened 2026-05-11 07:55:48 +00:00 by a22erigr · 26 comments
Collaborator

Description

In the parent issue #843 the general design of the website is created. We need some one to design how the settings page should look.
The design should follow meterial design. Please use https://www.figma.com/community/file/1035203688168086460/material-3-design-kit

What should be done

  • Implement how the settings page will look in both dark and light mode
  • How should the theme colors be used.
  • Can Material design icons be used
## Description In the parent issue #843 the general design of the website is created. We need some one to design how the settings page should look. The design should follow meterial design. Please use https://www.figma.com/community/file/1035203688168086460/material-3-design-kit ## What should be done + Implement how the settings page will look in both dark and light mode + How should the theme colors be used. + Can Material design icons be used
Author
Collaborator

The mockup look of the website
bild

The mockup look of the website ![bild](/attachments/397d43a4-31ce-4de7-803f-c6ee11a7cd2c)
Collaborator

Since I have not worked with Figma this design might not have been perfect but this is what I have done so far.

Since I have not worked with Figma this design might not have been perfect but this is what I have done so far.
Collaborator

Light mode

image

Light mode ![image](/attachments/13c95988-af57-4513-8bc2-fe0a77206a1b)
Collaborator

Dark mode
image

Dark mode ![image](/attachments/f9734a45-4648-49b5-aa82-9c328ced4aa7)
Collaborator

Please come with suggestions/improvements.

Please come with suggestions/improvements.
Author
Collaborator

Make sure to follows https://m2.material.io/design/guidelines-overview guidlines

Make sure to follows https://m2.material.io/design/guidelines-overview guidlines
Author
Collaborator

Here is how our loginpage is going to look like #864 (comment)

Here is how our loginpage is going to look like https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/864#issuecomment-9616
Collaborator

Should we not follow Material design 3?

Should we not follow Material design 3?
Author
Collaborator

I have taken insperation from this page https://m2.material.io/components?platform=web

I have taken insperation from this page https://m2.material.io/components?platform=web
Author
Collaborator

bild

![bild](/attachments/f4b1c67c-33e6-4c34-9ab9-6b36034b631b)
69 KiB
Collaborator

I like that we have buttons, but they should follow the theme, instead of the whole part being green, maybe only the buttons should be green?

I like that we have buttons, but they should follow the theme, instead of the whole part being green, maybe only the buttons should be green?
Collaborator

I also really like this layout for selecting theme:

I also really like this layout for selecting theme:
Author
Collaborator

I also thing it's a good ide that the select buttons have the color of the theme

I also thing it's a good ide that the select buttons have the color of the theme
Collaborator

should I try to replicate this layout? I think this design was really good.

should I try to replicate this layout? I think this design was really good.
Author
Collaborator

Feel free to do so. Just keep the buttons

Feel free to do so. Just keep the buttons
Author
Collaborator

bild SHould be a button there

![bild](/attachments/8eeab07c-6ab0-438f-9175-d02037b72635) SHould be a button there
303 KiB
Collaborator

Updated Light mode:
image

Updated Light mode: ![image](/attachments/b136d115-6ab0-422b-8eb9-db669706b515)
Collaborator

Updated Dark Mode:

Updated Dark Mode:
Author
Collaborator

The leadership finds this design the best bild. Is it possible to re create this one but add some polish. Ex buttons and. We also find that the corners are a bit to rounded

The leadership finds this design the best ![bild](/attachments/370b0aa7-d834-4468-9225-40877264b58e). Is it possible to re create this one but add some polish. Ex buttons and. We also find that the corners are a bit to rounded
95 KiB
Collaborator

Okay, i will try to do that.

Okay, i will try to do that.
Collaborator

I have tried to replicate the design that the leaders agreed upon. I have made changed to the "cards" to make them not rounded. I have also added buttons.

I have tried to replicate the design that the leaders agreed upon. I have made changed to the "cards" to make them not rounded. I have also added buttons.
Collaborator

Light Mode:

image

Light Mode: ![image](/attachments/1687f924-ab8c-4395-aea8-d5df808fcfe5)
107 KiB
Collaborator

Did not find the right icon to the left of the setting so I added a cogwheel

Did not find the right icon to the left of the setting so I added a cogwheel
Author
Collaborator

bild

(ai)

![bild](/attachments/d491b8f4-fff8-41b3-a069-886b3355ce9c) (ai)
23 KiB
Collaborator

Good job! I now this have been on the longer side, but we will now use these designs to start working on implementing the designs in practice

Good job! I now this have been on the longer side, but we will now use these designs to start working on implementing the designs in practice
Collaborator

Dark mode:
image

Dark mode: ![image](/attachments/6478ea48-aef0-42d3-a59e-de6d6f5f3005)
138 KiB
Sign in to join this conversation.
No milestone
No project
No assignees
4 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#863
No description provided.