mattshroom / Agile-Project-2022

CITS3403 Final Project
0 stars 0 forks source link

Construct Figma UI Design #2

Open mattshroom opened 2 years ago

mattshroom commented 2 years ago

Basic Info

The goal of this task is to layout the following:

Interface planning is important in reducing the amount of wasted work:

With tools like Figma, it is fast to create user interfaces with a simple drag and drop. There will be no logic/coding involved, just purely elements for visual. These helps designers focus on what's truly important - the visual aspect and not get caught up with other nuisance (such as... why won't the div center)

In the perspective of the developer that will be using this interface plan, they don't have to think about what the interface will look like (often time, there are developers that try to code it straightaway and wasting many hours just to make something look decent, and erasing something and trying something new. Not really the most efficient way, hence planning is important there.

Figma Link

https://www.figma.com/file/tn4Bsz7LHcRCxrgEauJxAj/Blurgo-Figma-Board?node-id=4%3A64

Colour Accessibility

https://color.adobe.com/create/color-contrast-analyzer

Using Figma with Bootstrap UI Kit

https://www.figma.com/file/X18xyiavDRwyd0fEgBtfNG/Bootstrap-UI-Kit-(Community)?node-id=0%3A1 Find the component we like above, then search for its source code on following: https://getbootstrap.com/docs/5.1/components/card/

mattshroom commented 2 years ago

Nice Colour Scheme:

image

Fonts:

Titles: Bodoni MT Black Regular text: Segoe UI

nic-chua commented 2 years ago

Draft Login Screen

Logos

LKBEAST commented 2 years ago

Wow great work Nic!