{' '} {' '}
Limited time offer
SAVE % on your upgrade.

Page 1

EdQu Design Manual

A

STUDENT PROJECT


EdQu Design Manual Copy Guidelines 1.1 Copy guidelines

Color Guidlines

1.3 Primary and supporting colors 2.3 Color tints 3.3 Assigning colors

Font Guidlines

1.6 Font Usage 2.6 Font Usage 3.6 Example on usage 4.6 Example on usage 5.6 Example on usage 6.6 Type in buttons

Button Guidlines 1.2 Button design 2.2 Example on usage


EdQu Copy Guidelines

Copy Usage 1.1 Call to Action Buttons To empower EdQu's button's functionality and feedback, the action. This will help communication between the platform and the user and it promotes personality to the platform. To have in mind when designing call to action buttons: +Always start with a verb that describes the action. Think about what your user would say if you asked it what it was trying to do.

How it is now:

+Buttons have a dual function: they are both calls to action –

A tool that provides a way of evaluating every designed button "I would like to".

Publish Test How it is now:


EdQu Color Guidelines

Colors Usage 1.3 Primary Colors The two primary colors choosen are Purple to create a playfull and energetic feel, and also green to pronounce friendlyness, youth and freshness.

Supporting Colors The suppporting colors are used to empower the consistency of the overall application. They are not only there to compliment our primary for the UI design.

Dark Purple Screen Color HEX #320649 R:50 G:6 B:73

EdQu Purple

Orange

Screen Color

Screen Color

HEX #7400A9 R:115 G:0 B:170

HEX #F89200 R:248 G:146 B:50

Light Green

Red

Screen Color

Screen Color

HEX #32CB32 R:50 G:205 B:50

HEX #D5001A R:213 G:0 B:26


EdQu Color Guidelines

Colors Usage 2.3

Supporting Colors

Tints Tints of the primary and secondary colors can be used as background colors, interaction functions and in charts or diagrams when a clear visual hierarchy of information is needed.

Dark Purple

Primary Colors

#320649

EdQu Purple

#7400A9

#7F22A9

#46D046

#846A92

#AD9BB6

#D6CDDB

#EAE6ED

#F9A833

#FBBE66

#FCD399

#FBE0B9

#FDEFDC

#D52B40

#D55666

#D58089

#E4ABB1

#F1D5D8

Orange

#8844A9

#9466A9

#B996C7

#DCCBE3

Light Green

#32CB32

#5B386D

#F89200

Red

#70DB70

#98E598

#C2EFC2

#D5EED5

#D5001A


EdQu Color Guidelines

Colors Usage 3.3 Assigning Colors on how and where to apply the colors shown below.

>Purple

Purple is used for direct interaction with EdQu, such as loging in, dignify Navigation or Accesibility to more options such as Edit.

>Light Green

Light green is used for actions such as Add, Create, Publish and Accept.

>Dark Purple

Dark purple is used as a Supportive Color for menus background or other assets

>Orange

Orange is used as a Supportive Color for giving feedback, menus background and other assets.

>Red

Red is used for actions such as Cancel, Delete or Exit.


EdQu Font Guidelines

Font Usage 1.6 Fira Sans is an open font, which means that everyone can use it for free. It is a font well suited for EdQu because it contains several font weight that shows both the serious and the playful side of the application. It was commissioned by the Mozilla

Fira Sans Bold: abcdefghijklmnopqrstuvwxyzåäö ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 0123456789 Medium: abcdefghijklmnopqrstuvwxyzåäö ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 0123456789 Medium Italic: abcdefghijklmnopqrstuvwxyzåäö ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 0123456789 Regular: 0123456789 Light: abcdefghijklmnopqrstuvwxyzåäö ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 0123456789

>

What is the bigger number, a googol or a billion?

>

Mike had 9 boxes of 26 pencils. A friend gave him 3 more pencils. How many pencils does he have now?

>

Sam had 18 boxes of 39 stamps. A friend gave him 21 more stamps. How many stamps does he have now?

>

He met a friend and gave him 12 small cars.

>

Steve had 3 bags of 45 cards. A friend gave him 15 more cards. How many cards does he have now?


EdQu Font Guidelines

Font Usage 2.6 The guide shows when the different font weights should be used and which size it should be displayed in.

H1. Header one. Font size: 37px, font weight: Bold, colour: 87% black H2. Header two. Font size: 35px, font weight: Medium Italic, colour: 87% black H3. Header three. Font size: 24px, font weight: Light, colour: 87% black

H4. Subheader. Font size: 27px, font weight: Medium, colour: 87% black colour: 87% black

P3. Tips text. Font size: 16px, font weight: Medium, colour: 87% black P4. Link text. Font size: 16px, font weight: Medium, font style: Underline, colour: light green #32cb32

P6. DETAIL TEXT. FONT SIZE: 10PX, FONT WEIGHT: BOLD, COLOUR: 87% BLACK


EdQu Font Guidelines

Font Usage 3.6 P3 H4

functionality of the typeface and when the different headers, the body and the caption will be used.

H1 H4 P2 P3

P1 P5 P6

P1 H4 P3

P2


EdQu Font Guidelines

Font Usage 4.6 functionality of the typeface and when the different headers, the body and the caption will be used.

Ställ in inställningar för testet

H1

1. Välj det innehåll du vill testa

H2 P2

2. Välj datum och tid

H2


EdQu Font Guidelines

Font Usage 5.6 functionality of the typeface and when the different headers, the body and the links will be used.

Test i att skapa mönster från ekvationer Resultat för Aggelos Elevens kunskapsnivå:

Konstruera mönster med utgångspunkt i ekvationer Fråga

Andel rätt

Fråga 1

3 av 3

Fråga 2

2 av 3

Fråga 3

0 av 3

H1

H2 H3 H4 P3 P4 P1


EdQu Font Guidelines

Font Usage 6.6 Font usage for buttons Font weight: Regular


EdQu Button Guidelines

Button Usage 1.2 Example below Button on the left shows the correct usage of the button. Button on the right shows incorrect usage of the button.


EdQu Button Guidelines

Button Usage 2.2 Button example:

#70db70


EdQu Design Manual

Project by: A Hyper Island student project Project Manager: Beatriz Ricci, www.beatrizricci.com Design: Aggelos Malikoutis, www.behance.net/at_tension Design: Mali Sagmoen, www.malisagmoen.com

Profile for Mali Sagmoen

User Experience Design Manual for EdQu  

A redesign manual for the education platform EdQu.

User Experience Design Manual for EdQu  

A redesign manual for the education platform EdQu.

Advertisement