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

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   ## 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

a22erigr added the

design

unassigned

labels 2026-05-08 09:57:02 +00:00

a22erigr commented 2026-05-08 09:58:26 +00:00

Author

Collaborator

Copy link


bild.png

42 KiB

a22erigr added the

_CRITICAL_

label 2026-05-08 10:00:21 +00:00

a22erigr commented 2026-05-08 10:01:06 +00:00

Author

Collaborator

Copy link


bild.png

44 KiB

c24danli referenced this issue 2026-05-08 12:16:27 +00:00

Accessibility testing #183

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

a24vinla was assigned by a22erigr 2026-05-11 06:44:56 +00:00

a22erigr removed the

unassigned

label 2026-05-11 06:45:22 +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

a22erigr referenced this issue 2026-05-11 07:44:52 +00:00

Create Figma design for cards #860

a22erigr referenced this issue 2026-05-11 07:55:48 +00:00

Create a figma design for settings page #863

a22erigr referenced this issue 2026-05-11 08:01:29 +00:00

Create FIgma design for login "page" #864

a22erigr referenced this issue 2026-05-11 08:14:41 +00:00

Create a Figma design for Add cards menu #868

a22erigr referenced this issue 2026-05-12 08:47:16 +00:00

We need to redesign our logo so that it can be used in our new design #908

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):

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

image.png

39 KiB

a24vinla commented 2026-05-12 09:57:27 +00:00

Collaborator

Copy link

Dark Mode:

Dark Mode: 

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

a22erigr closed this issue 2026-05-15 10:12:59 +00:00

a22erigr referenced this issue 2026-05-15 10:16:45 +00:00

Implement our new "main" design #967

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

main

#964-Implement-Meue-Service

#1057-navbar-color-change

team_1_week_7

909-Save-PDFs

1072-update-support-page

#1073-remove-bottom-border

team_2_week_7

1052-UnixRebuild.sh-run-in-paralell

#1021-Missing-icons-in-add-new-cards-menu

1044-&-987-Create-script-expansion

write-in-wiki-about-the-playwrite-#1043

#1069-search-for-swedish-cards

1032-Better-and-X-for-the-cards

991-frontend-sign-up

#1033-fix-button-translate-view

#1030-landscape-view-bug

#1055-Add-Todolists/Translation-Tooltip-in-correct-file

1061-Rebuild-script-improvements

#1045-fix-shmi-temp-view

1064-todo-checkbox-enable-all-time

#1001-cleanup-middleware

1012-update-the-boundlessflowCampus2k-readme

765-fix-visible-rows-edit-mode

#1047-fonts-uniform-in-views

vasttrafik-clean

#934-solar-panel-mockup-v2

#900-logger-middleware-new

#1046-Fix-broken-localization-in-settings

#1039-dependencies-with-mid-vulnerabilities

#900-logger-for-middleware

#989

1008-localization-on-views-part-1

715_Create_tests_roomBooking

temp_branch_week_7

#1027-move-footer-down

1037-missing-login-functionality

1023-The-clock-pulsates-after-each-second

#1015-button-visibility

1029-fix-preview

#1027-fix-footer-bug

#961-new-card-design

fix-manage-toolbar-button

team_2_week_6

team_1_week_6

541-implement-vasttrafik-card

1006-update-css-in-frontend-pages

748_change_creation_endpoint_roomBooking

#977-Translator-API

#845-new-energy-endpoints

#937-Personal-to-do-list

#935-clock-view-expansion

991-login-and-signup

635-Sub-compose-files-re-branch

988-different-passwords-for-databases

#920-change-password

#934-solar-panel-mockup

946-Implement-the-new-settings-page-design

#967-implement-new-main-design

945-change-position-empty-card

#996-dependencies-with-high-vulnerabilities

1000_Fix-pg_cron-sql-setup-for-postgres-image

955-fix-mapview-responsiveness

982-enhance-toggle-toolbar

#861-localization-change-all-printed-text-Part-2

938-fix-view-button-mobile

#924-implement-new-add-card-menu

Add---remove-orphans-to-the-rebuild-script-#983

UnixRebuildDebug.sh

835-loginService-JWT-v2

962-new-button-temperatureView-sensors

#893-Create-test-in-frontend-for-responsiveness

933-water-sensor-mockup

#305-fileService

#949-fix-cards-in-alphabetical-order

#954-mobile-card-stack-bug

894-tempservice-class-diagram

934-solar-panel-mockup

Temp-Main-Week-5

915-Windows-deployment-script

835-loginService-JWT

#908-new-logo

#952-Center-Temperature-graph

team_2_week_5

#658-Options-dependenacy

team_1_week_5

873-implement-logger-for-tempservice

#921-login-logout-in-settings

#786-parkingApiMockup-unit-tests-are-broken

919-dark-mode-settings

#442-temp-month-and-year-styling

issue-836-add-card-placeholders

905-enhance-color-themes-settings

#922-Implement-a-fucntion-to-delete-a-account-

707-update-css-files-frontend-features

Remove-sudo-from-MD-installation-#877

#920-possibility-to-change-password

#47-Testing-SMHI

#885-new-login-page

#861-Localization-change-all-printed-text

#899-Implement-logger-for-energyService

#859-Create-Smooth-Transition-For-Dashboard

889-turn-off-season-themes

879-season-themes-functinality

737-Parking-restructure-re-branch

#876-logger-loginService

Enhance-logging-deploy-#838

#724-restructuring-of-roombooking-service-code

853-change-hamburger-menu-to-buttons

#752-implement-automatically-cards-update

866-views-get-scrollbars-eaven-when-they-fit

727-calculate-average-temperature-and-store-the-result

847-enhance-settings

803-update-css-files-frontend-components

798-add-card-horizontal-fix

731-Service-creation-script

837-temperature-error-messages-team1

662-solution-file-is-not-up-to-date

603-sort-cards-alphabetically

741-improve-text-view-card

#797-Restructuring-energy-service

840-move-logo-navbar

807-fix-button-layout

833-change-temperature-error-messages

#429-select-year-temperature

772-fix-localization-context

#799-Fix-mobile-preview-header

color-tech-test

#659-grid-cell-dimensions

#789-Socials-Page

Change-title-Description-#815

779-fix-scaling-map-view

Old-Navbar-On-Refresh-#770

#804-fix-preview-size

#778-default-card-sizes

800-enhance-toolbar-phone

#768-404-error-in-temp-sensor

#787-tempSesnorMockupTests-outdated-unit-tests

766-fix-preview-for-clock-view

788-footer-links-fix

776-hide-toolbar-button

643-Create-titles-for-all-cards

749-create-job-api

#762-refactor-the-function-GetLayoutNameAndID(int-userID)

#607-auto-view-registry

780-add-card-descriptions

767-error-add-no-card-selected

741-textview-card-improvements

fixes/solution-room-booking

#769-add-energy-view

temp_branch_week_5

team_2_week_4

#654-flashes-on-refresh

team_1_week_4

#691-move-ITempService-to-a-separate-file

#733-smhi-forecast-design

#709-unit-tests-for-layoutService

#730-energy-view

745-text-footer-fix

Deployment-script-#701

743-fix-position-logo-phone

722-fix-year-month-api-connection

#723-clcok-view

708-hamburger-position

#690-Implement-password-hashing

#703-missing-required-packages-in-install-scripts

#732-footer-centered

729-textview-cant-make-new-rows

#541-Västtrafik-card

#697-remove-mqtt-from-roombooking

#702-auto-update-temperature

693-fix-temperature-graph-preview-centering

649-Footer-not-moving-with-grid

673-fix-respond-remove-phone

feature/501-implement-loginservice-api

#620-update-prettier-config

#664-Logo-change-depending-on-device

663-responsive-add-card-modal

#672-centering-spans

#661-remove-header-zoomed-in-phone

week_4_temp_branch

667-fix-resize-textview

657-Code-cleanup-after-merge

#659-Grid-cells-should-have-the-same-dimensions-when-zooming-in/out

#628-Fix-team-2-tmp-service-V4

API-Calls-gets-resent-alot

#652-fix-scrollbars-on-cards

602-new-file-structure

#640-hamburger-bug

temp-branch-week-3

#628-Fix-team-2-tmp-service-V2

#477-Update-Electricity-Data

team_2_week_3

team_1_week_3

#459-TempratureGraph-Fix-and-APIhook

625-increase-size-URL-schedule

#628-Fix-team-2-tmp-service

#369-implement-hamburger-menu

#585-Implement-Mobile-toolbar

feature/expand-parking-#254

570-Add-weather-symbols

#630-add-max-sizes-view-config

#608-fix-tempreture-graph

544-fix-tooltip-styling

#610-reset-modal-background-not-displaying

539-add-card-modal

#578-Implement-navbar-to-be-responsive

616-fix-tooltip

#617-values-for-month-week-year

613-fix-logo-chrome-edge

#573-add-enough-grid-rows

#605-new-custom-button

#377-Implement-Sudoku-View

567-installation-script-missing-dotnet-dependency

#351-roombooking-functionality-and-restructuring

#552-Settings-Skeleton-page

551-add-new-logo

#484-weekly-aggregated-temperature

#507-breakout-danger-modal

AddNewView-Faulty-Parameter-564

#547-fix-schedule-card-resize

531-break-out-new-card-functionality

533-config-tooltip

525-fix-booking-card

#538-Footer-scale-bug

516-grid-background-update

527-stay-edit-mode-refresh

506-mode-and-style-bug

513-cards-button-panel

521-footer-is-too-far-up

483-temperature-latest-return-error

#377-sudoko-view

#500-fix-card-enlargement

fixes/parking-service-#478

forecastview-weather-fix

#499-Missing-unit-tests-for-tempService

#508-break-out-toggle-from-dashboard-with-css

#380-new-cards-with-doNotCompact-grid-setting

Remove-dropshadow-arrows-#510

#497-reset-layout-btn-in-edit-mode

Fix-empsensorMockup-WorkWhithMiddleware

#494-fix-map-view-scaling

#493-Optimize-build-script

492-standards-card-errors

team_2_week_2

team_1_week_2

#376-SMHI-forecast-view-design

#19-dynamic-table-database

469-bigger-resize-closing-buttons

#126-ElectricityDataMockup

#406-tempSensorMockup-fix

#452-Grid-background-does-not-expand-with-grid

#458-Cleanup-exports

#464-Saving-card-content

#335-empty-card

428-text-card-to-notes

#311-fix-outlines-when-moving-cards

263-show-grid-when-in-grid-mode

424-create-seperate-css-files-for-components

Change-tab-icon-to-new-logo-#446

feature/room-booking-#43

modalCard

#339-Big-card-for-all-temperature-sensors

#386-Xunit-tests-for-for-parkingApiMockup-roomBookingMockup

hotfix/parking-api-dependecy-issue-build-#378

#279-Grid-layout-breakout

392-edit-language-standards-all-files

#369-Implement-hamburger-menu-in-the-navbar-

#289-fix-interactivity-with-cards

#399-tempSensorMockupTest-stopped-working-after-weekly-merge

#341-add-cards-to-error-views

374-card-scales-when-moved-bug

#375-Change-background

#345-update-logo-homepage

#319-Add-test-directories-to-all-C#-dirs

Fix-tempSensor-fel-HTTP500

TEMP-Testing-script

#315-build-script-fix-team-2

#312-fix-btn-css-team-2-fix

#313-404-routing-fix-team-2

temp-week-2-merge-branch

team_2_week_1

feature/#127-parking-api-databas-connection

team_1_week_1

#295-fixed-bugs-on-cards

#266-make-a-footer

#219-&-#208-Build-script-optimization

#20-aggregated-temp-for-month-year

#228-parking-frontend

199-research-grid-opening-closing-cards

#221-User-tables-for-future-database

#161-Integrate-Jest-testing-framework-to-project

fixes-issues-132

#107-Create-front-end-component-for-dynamically-changing-graph

#173-Save-User-Settings

#202-local-server-solution

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

  

bug-only-on-server-for-mobile-not-webpage

  

Bug-Report-After-Merge

  

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

  

further-changes-needed

  

future-problem-not-fixint-this-period

  

help wanted

Need some help

  

invalid

Something is wrong

  

last-week-issue-to-fix

  

library

  

low-priority

  

needs input

Issue needs input from product owner or customer

  

needs review

issue is in need of review

  

not-implemented.

  

project documentation

  

question

More information is needed

  

research

  

reviewed

This Issue has been reviewed

  

Script

  

security

use this for security-related issues

  

SQL

  

style

  

Team 1

Team 1 is responsible for this issue

  

Team 2

Team 2 is responsible for this issue

  

team leaders

  

test-creation

  

testing

  

topLevel

Reserved for top-level, project-wide issues.

  

unassigned

  

Under-review

  

wontfix

This won't be fixed

No labels

_CRITICAL_

API

app

backEnd

Blocked-waiting-for-further-changes

bug

bug-only-on-server-for-mobile-not-webpage

Bug-Report-After-Merge

cleanup

close

design

duplicate

enhancement

feature request

frontEnd

further-changes-needed

future-problem-not-fixint-this-period

help wanted

invalid

last-week-issue-to-fix

library

low-priority

needs input

needs review

not-implemented.

project documentation

question

research

reviewed

Script

security

SQL

style

Team 1

Team 2

team leaders

test-creation

testing

topLevel

unassigned

Under-review

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

a24vinla

3 participants

Notifications

Subscribe

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.