Design manual App
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
E X W O R K<br />
J O B S F O R E V E R Y O N E<br />
Visuel Identitet<br />
E X W O R K<br />
Linda Jacobsen<br />
Mai 2016
BRUG AF DESIGN<br />
<strong>App</strong>en skal programeres af proffecionelle app designere. Denne <strong>Design</strong> <strong>manual</strong><br />
har til hensigt at vejlede dem der programerer appen om grund idéer af designets<br />
grund elementer.<br />
<strong>Design</strong>et er primært inspireret af facebook appen, facebook messanger appen<br />
og ios <strong>App</strong>le 2016.<br />
E X W O R K<br />
J O B S F O R E V E R Y O N E
INDHOLDSFORTEGNELSE<br />
Lag....................................................................................................<br />
Typografi.........................................................................................<br />
Farver................................................................................................<br />
Knapper og ikoner........................................................................<br />
Skærmovergange..........................................................................<br />
04<br />
05<br />
06<br />
07<br />
08
LAG<br />
Hver funktion skal ligge på<br />
forkellige lag efter priotet og<br />
funktion. System statusbar og<br />
system navigation skal ligge<br />
over andre elementer, medmindre<br />
en side er mere<br />
vigtig og derved dækker<br />
over disse. 3D effekten<br />
opnås ved brug af<br />
perspektiv og skygger.<br />
Rediger<br />
System<br />
statusbar<br />
Baggrund<br />
Floating<br />
knap<br />
Content<br />
card<br />
System<br />
Navigationbar
TYPOGRAFI<br />
Microsoft Sans Serif er<br />
appens primøre typografi.<br />
Der skrives i 5 forskellige<br />
størrelser: mini, lille, mellem<br />
lille, mellem stor og stor<br />
Dette kan ændres efter<br />
behov for dem der<br />
programerer appen.<br />
ABCDEFGHIJKLMN-<br />
OPQRSTUVWZÆØÅ<br />
abcdefghijklmnopqrst<br />
uvwzæøå<br />
1234567890#!”€%
FARVER<br />
<strong>App</strong>en har tre primær farver<br />
samt 4 nuanser af hvid/grå.<br />
Da Farverne kun bruges på<br />
skærme, er farverne kun<br />
oplyst i RGB og hex.<br />
3 primærfarver<br />
HEX: #154D5A<br />
RGB: 21, 77, 90<br />
CMYK: 76,6%, 14,4%, 0%, 74,7%<br />
HSV: 191 , 77%, 90%<br />
HSL: 191 , 62%, 22%<br />
HEX: #00AD80<br />
RGB: 0, 173, 128<br />
CMYK: 100%, 0%, 26%, 32,2%<br />
HSV: 164 , 100%, 68%<br />
HSL: 164 , 100%, 34%<br />
HEX: #333333<br />
RGB: 51, 51, 51<br />
CMYK: 0% , 0%, 0% , 80%<br />
HSV: 0 , 0%, 20%<br />
HSL: 0 , 0%, 20%<br />
4 nuanser af hvid/grå<br />
HEX: #FFFFFF<br />
RGB: 255, 255, 255<br />
CMYK: 0%, 0%, 0%, 0%<br />
HSV: 0 , 0% 100%<br />
HSL: 0 , 0%, 100%<br />
HEX: #D3D3D3<br />
RGB: 211, 211, 211<br />
CMYK: 0%, 0%, 0%, 17,3%<br />
HSV: 0 , 0%, 83%<br />
HSL: 0 , 0%, 83%<br />
HEX: #F4F4F4<br />
RGB: 244, 244, 244<br />
CMYK: 0%, 0%, 0%, 4,31%<br />
HSV: 0 , 0%, 96%<br />
HSL: 0 , 0%, 96%<br />
HEX: #D3D3D3<br />
RGB: 211, 211, 211<br />
CMYK: 0%, 0%, 0%, 17,3%<br />
HSV: 0 , 0%, 83%<br />
HSL: 0 , 0%, 83%
KNAPPER<br />
& IKONER<br />
Ikoner bruges oftest muligt, da øjet hurtigere<br />
aflæser symboler fremfor tekst.<br />
De ikoner, der bliver på siden efter der er foretaget<br />
en hanling ændrer udseende efter funktion.<br />
? 1<br />
Gem ændringer<br />
Gem ændringer<br />
i<br />
i<br />
i i<br />
Ansøgninger Chat Flag<br />
Ansøgninger Chat Flag<br />
tekst<br />
tekst<br />
Ansøgninger Chat Flag<br />
Søg...<br />
Søg...<br />
Næste<br />
HANDYMAN<br />
Cykelhjælp<br />
Flag<br />
Flag<br />
Chat<br />
Chat<br />
Find Job<br />
Tilbyd Job
SKÆRM<br />
OVERGANG<br />
Når der bliver tastet på de<br />
forskellige funktioner, sker der<br />
en overgang fra den forrige<br />
skærm til den ønskede<br />
skærm. Nedenfor ses,<br />
hvornår hvilke overgange<br />
bruges.<br />
INGEN<br />
POP<br />
HØJRE<br />
SLIDE<br />
VENSTRE<br />
SLIDE<br />
Ingen overgang sker,<br />
medmindre de passer<br />
under efterstående<br />
kategori.<br />
Pop overgangen sker,<br />
når en popup information<br />
skal informeres.<br />
Slide til højre sker, når ><br />
står på forrige sider og<br />
når < står på ønskede<br />
side.<br />
Slide til venstre sker, når<br />
< står på forrige side.<br />
SLIDE NED SLIDE OP FLIP<br />
Slide ned sker, når ’øjet’,<br />
’aftale’ og ’job info’ bliver<br />
klikket.<br />
Slide op sker, når der<br />
gås tilbage fra ’øjet’,<br />
’aftale’ og ’job info’ er<br />
udfylt<br />
Flip sker, når der skiftes<br />
mellem ’søg job’ og<br />
’opslå job’ og når undersiderne<br />
af ’job info’ bliver<br />
udfyldt
Change language