Andras/BoundlessFlowCampus2K
4
7
Fork 0
Code Issues 90 Pull requests 7 Projects Releases Packages Wiki Activity Actions

Create design in figma for out new design #843

New issue
Closed
opened 2026-05-08 09:57:02 +00:00 by a22erigr · 10 comments
a22erigr commented 2026-05-08 09:57:02 +00:00
Collaborator
Copy link

Description

After our customer meeting it were decided that we should implement the new design that we showed a mock up of. Images can be found here #700. The new design should follow material design including there official icons. A branch has been created to show a quick version of how it could look. As noted it is not yet polished
bild
bild

What should be done

General

  • The images are just mockup and you should refine them.
  • How should we use primary secondary colors?
  • What components should have what color?
  • Make sure that the design is accessible
    • Bad vision
    • Colorblind
    • Is the contrast good

Specific

  • How can we make it so that our logo is visible.
  • How should de buttons look like
    • Follow material designa
      • Radius
      • Color
      • Border color
      • How should they look when hoverd

Finlay

  • Create a version for both light and dark-mode
  • Use figma
  • IMPORTANT: In this issue you should focus on just designing the "Main body" of the page.
    • Ex Footer, the "navbars" general background color
## Description After our customer meeting it were decided that we should implement the new design that we showed a mock up of. Images can be found here #700. The new design should follow [material design](https://m2.material.io/components) including there official icons. A branch has been created to show a quick version of how it could look. As noted it is not yet polished ![bild](/attachments/4551f17f-aa52-47a3-a0b6-ab96ec871e9b) ![bild](/attachments/c2e92a43-b54e-413c-9a68-3d32c057f040) ## What should be done ### General + The images are just mockup and you should refine them. + How should we use primary secondary colors? + What components should have what color? + Make sure that the design is accessible + Bad vision + Colorblind + Is the contrast good ### Specific + How can we make it so that our logo is visible. + How should de buttons look like + Follow material designa + Radius + Color + Border color + How should they look when hoverd ### Finlay + Create a version for both light and dark-mode + Use figma + **IMPORTANT**: In this issue you should focus on just designing the "Main body" of the page. + Ex Footer, the "navbars" general background color
bild.png
43 KiB
bild.png
44 KiB
bild.png
75 KiB
bild.png
76 KiB
bild.png bild.png
a22erigr commented 2026-05-08 09:58:26 +00:00
Author
Collaborator
Copy link

bild

![bild](/attachments/d9f5ad31-b093-4d7f-b788-38d5649a47c4)
bild.png
42 KiB
a22erigr commented 2026-05-08 10:01:06 +00:00
Author
Collaborator
Copy link

bild

![bild](/attachments/6849728c-464f-432c-b679-52dfc599bab4)
bild.png
44 KiB
a22erigr changed title from Create designe in figma for out new design to Create design in figma for out new design 2026-05-11 06:40:02 +00:00
a22erigr commented 2026-05-11 06:49:04 +00:00
Author
Collaborator
Copy link

Material Design Figma kit

[Material Design Figma kit ](https://www.figma.com/community/file/1035203688168086460/material-3-design-kit)
a24julot commented 2026-05-11 07:16:53 +00:00
Collaborator
Copy link

Check branch 847-enhance-settings for the design in settings, made by @b24erika

Check branch 847-enhance-settings for the design in settings, made by @b24erika
a24vinla commented 2026-05-12 09:56:13 +00:00
Collaborator
Copy link

The following screenshots show the design of the home page, without any cards. The colours follow the Smaragd-theme (all colour codes can be found here)

The following screenshots show the design of the home page, without any cards. The colours follow the Smaragd-theme (all colour codes can be found [here](https://git.webug.se/Andras/BoundlessFlowCampus2K/wiki/Webpage-Design))
a24vinla commented 2026-05-12 09:56:58 +00:00
Collaborator
Copy link

Light Mode (we are not very satisfied with the colour, but it is the colour the university specified):
image

Light Mode (we are not very satisfied with the colour, but it is the colour the university specified): ![image](/attachments/200f0bf7-4b0e-444a-817c-4ba7aec0f254)
image.png
39 KiB
a24vinla commented 2026-05-12 09:57:27 +00:00
Collaborator
Copy link

Dark Mode:
image

Dark Mode: ![image](/attachments/4a761141-8c4d-43a7-9859-008811ad3bc7)
image.png
42 KiB
a24vinla commented 2026-05-12 09:58:32 +00:00
Collaborator
Copy link

Link to Figma Project:
https://www.figma.com/design/tJezQ4NGNpPtwbIWf6hxgI/BoundlesFlowDesign?node-id=0-1&t=cuxxlU7ebxITy5Mg-1

Link to Figma Project: https://www.figma.com/design/tJezQ4NGNpPtwbIWf6hxgI/BoundlesFlowDesign?node-id=0-1&t=cuxxlU7ebxITy5Mg-1
a24vinla commented 2026-05-12 10:42:02 +00:00
Collaborator
Copy link

I also want to remind whoever implements the design that the footer is only supposed to be visible when the user scrolls down

I also want to remind whoever implements the design that the footer is only supposed to be visible when the user scrolls down
a22erigr commented 2026-05-15 10:12:59 +00:00
Author
Collaborator
Copy link

The leaders are satisfied with the result

The leaders are satisfied with the result
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
#1236-edit-mode-txt
#1229-generic-themed-buttons
Add-an-option-to-set-no-image-to-image-view-1227
#1242-prog-bar-colors-fix
#1239-Remove-Vertical-Scroll
Image-view-error-1230
Make-the-card-title-and-header-of-card-uniform-1233
both_teams_week_8
team_2_week_7
team_1_week_7
temp_branch_week_7
team_2_week_6
team_1_week_6
team_2_week_5
team_1_week_5
temp_branch_week_5
team_2_week_4
team_1_week_4
week_4_temp_branch
temp-branch-week-3
team_2_week_3
team_1_week_3
team_2_week_2
team_1_week_2
temp-week-2-merge-branch
team_2_week_1
team_1_week_1
No results found.
Labels
Clear labels   
_CRITICAL_

Only use this label for critical tasks that are project-scope,and must be addressed ASAP.

  
API

   
app

   
backEnd

   
Blocked, waiting for further changes

   
bug

Something is not working

  
cleanup

Issues to cleanup the codebase (restructure folders, remove deprecated or smelly code)

  
close

Issue to close

  
design

   
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
feature request

   
frontEnd

   
help wanted

Need some help

  
invalid

Something is wrong

  
low priority

   
needs input

Issue needs input from product owner or customer

  
needs review

issue is in need of review

  
project documentation

   
question

More information is needed

  
research

   
reviewed

This Issue has been reviewed

  
script

   
security

use this for security-related issues

  
SQL

  
style

   
testing

   
topLevel

Reserved for top-level, project-wide issues.

  
wontfix

This won't be fixed

No labels
_CRITICAL_
API
app
backEnd
Blocked, waiting for further changes
bug
cleanup
close
design
duplicate
enhancement
feature request
frontEnd
help wanted
invalid
low priority
needs input
needs review
project documentation
question
research
reviewed
script
security
SQL
style
testing
topLevel
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
a24vinla
3 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#843
No description provided.