Grafisk Workflow by Helena Maria

GRAFISK WORKFLOW Dokumentation af Helena M. Schmidt

HvadGRAFISK tiltaler og DESIGN KIDS fanger mig?WORLD

WORKFLOW KIDS WORLD

OPSTART PÅ WEBDESIGN OG MIN EGEN VURDERING Opgaven Jeg er startet op på et website til Kids World. Jeg har lavet et redesign af deres nuværende website http://www.kids-world. dk. Sitet er beregnet til børnenes forældre, som skal kunne skrive til pædagoger omkring information og evt nye børn skal optages i børnehaven. Så skal det designes personligt, moderne og spejles i logoets farver.

det så enkelt og stilrent som muligt. Det er vigtigt at Kids Worlds farver sparkes igennem når der endelig er farver. Sådet bliver deres genkendelighed og udstråler deres identitet. Usability Sitet er nemt at gå til uden problemer og forvirring. På kontakt siden er der en formular hvis en bruger har spørgsmål.

Hensigt

Arbejdsprocess

Jeg vil forsøge at skabe ro, struktur, genspejling af identitet og farver, mindre farve forvirring, moderne og indbydende look på index, galleri og kontakt sites.

• Søgning på nettet til inspiration • Skitser • Præsentation i Photoshop - Grid. • Udarbejdelse af flowchart • Udarbejdelse af skelet • Udarbejdelse af storyboard • Billeder behandling i Photoshop RGB og 72 ppi, jpg- png filer. • Opsætning i DreamWeaver • Benytte html, jqery og css. • Favicon • Metatags: Keywords og descption, for synlighed for søgning på nettet • Testes i Google Chrome, Firefox, Safari og Internet Explore • Oploade til http://helenaschmidt.dk/kidsworld/ • Mailformular testes

Layout • Indbydende og enkel • Brugervenlig - Nem at gå til • Lyst og positivt Layout • Bygges i html5 • Korrekt billedbehandling til web • Jquery slider på forsiden • Et fleksibelt layout med min. 2 kolonner på desktop version. Mobil version skal overgå til enkelt kollone visning. • Brug af CSS3 • En formular • Responsiv design / fleksibelt • Basal SEO. • Enkelt, moderne og “ungt” design. Tekst og farver Jeg har valgt fonten ‘Lato’, Calibri, Arial, sans-serif. Både til p og H2. Jeg synes at teksten skal være læsevenlig og tydelig så de voksne/ældre ikke får problemer med at læse siden. Fonten er rigtig god på en skærm. Farverne træder i kraft igennem min bund, logoet og et par markeringer på min slider/billeder. Jeg forsøger at holde-

Browserkompatibilitet Er testet i både Firefox, Safari, Google Chrome og Internet Explore. Desuden er mailformularen også testet, og den virker. Kvalitetsvurdering og udfordringer Jeg synes websitet er blevet udemærket. Det udstråler den korrekte målgruppe og er brugervenligt. Det er ikke uoverskueligt, men meget indbydende og positivt. Jeg har haft et par problem stillinger under vejs med b.la fleksibel bund, a hover på billeder og formular. Min wrapper er ikke udnyttet helt som jeg havde regnet med fra starten. Da min slider ligger i min wrapper, så “#head” b.la ligger ovenpå wrapperen.

02 REDESIGN AF DETTE WEBSITE Kids World nuværende site har dette design. Websitet tilbyder både børne fashion og reklamere for en børnehave under et par undersider. For mit er sitet meget rodet og jeg vil forsøge at rette op på følgende; Struktur Undersider Reklamer Farver Informationer Gentagelser Personlighed

GRAFISK DESIGN KIDS WORLD

03 INSPIRATION TIL WEBSITET Jeg har fundet en del inspiration på nettet. Dog synes jeg det er ret avanceret og forvirrende for “nye” brugere. Så jeg laver noget mere enkelt, men med udgangspunkt fra disse sites.

Dette site er super enkelt og brugervenligt.

Super fin og blikfangende opsætning. Slider og menu fungere rigtig godt sammen.

Jeg kan godt lide de stærke farver og de sjove fonter på dette site. Logoets farver spejler sig i sitet.

GRAFISK DESIGN KIDS WORLD

DESIGN LAYOUT Påstart til keywords af websitet. Hvad vil jeg gerne udstråle og hvad skal der lægges vægt på?

Mindmap workflow

Børn 0-4 Positivt Enkelt Nemt Børn Farver Billeder Overskueligt Indbydende Forældre login

05 TEKNISKE VIRKEMIDLER En kort genopfriskning af de tekniske virkemidler.

Mindmap

web virkemidler og teknik

workflow

Bygges i html5 Korrekt billedbehandling til web Jquery slider p책 forsiden Brug af CSS3 En formular Responsiv design / fleksibelt Basal SEO.

GRAFISK DESIGN KIDS WORLD

KONTAKT OG GALLERI SKITSER Jeg er hermed gået igang med at tegne skitser til mit digitale produkt. Designet bliver enkelt og moderne.

Her laves skitser af undersiden “kontakt” med formular til.

Her laves design til undersiden “galleri”. Her skal vi præsentere et par af børnene med a:hover

07 INDEX SKITSER Jeg er hermed gĂĽet igang med at tegne skitser til mit digitale produkt. Designet bliver enkelt og moderne.

Her laves design og opsĂŚtning af index. Skillet til de andre undersider vil ligne index nĂŚsten 100%

08 PHOTOSHOP LAYOUT OG GRID 960 Opbygning og struktur • Opbygning i 960 Grid System, for kant, enkelt og overskueligt udtryk. • Det giver ro for øjet at kunne følge linjerne.

690 Grid system er et hjælpeprogram til at anvende dimensioner, baseret på bredde på 960 pixels. Der findes 3 varianter: 12, 16 og 24 kolonner. Jeg har anvendt 12 kolonner i mit design, da jeg ikke har brug for yderligere. Systemet er ideel til at hjælpe med at opnå en ensartet struktur og overblik over størrelser, samtidig med at man kan holde ensartede afstande. Jeg downloadede en action fil til photoshop, som automatisk blev integreret i min psd fil, inden jeg gik igang med designet.

09 FLOWCHART Således ser mit flowchart ud med opbygning. De blå markeringer er dem som er online.

Index.html

mad.html

Forældrelogin.html

hvem.html

contact.html

www.helenaschmidt.dk/kidsworld

formular

contact2.html

Galleri

GRAFISK DESIGN KIDS WORLD

SKELET INDEX • Wrapper: Bredden er 100% og højden er fleksibel

• Content-wrapper holder samme på 3 elementer; colum-wrapper, image, h1 og .

• Header med fast element: Logo

Et skelet er en stor hjælp for programmøren, da det skaber et hurtigt overblik over afstande og størrelsesforhold.

• Footer med faste elementer: “footerkasse” og tekst

• Jquery slider er brugt fra valgfag “avanceret webdesign” og har fået koden uddelt.

Logo:

Header:

334 px 148 px

960 px 180 px

Menu: 700px 35 px

Slider show

Footer: 1869px min-height: 100px

colum-wrapper 316px 357px

column-image

277px 176px

column-header 277px 46px

column-content

267px 78px

footerkasse 320px 100px padding-top; 10px

column-header 277px 46px

footerkassekasse2 padding-top: 10px

footerkasse padding-top: 10px

footerkasse 320px 100px padding-top; 10px

content-wrapper 960px 357px

1869 px min-heigh: 584 px

Footer: 1869px min-height: 100px

11 SKELET KONTAKT

Logo:

Header:

334 px 148 px

960 px 180 px

Menu: 700px 35 px

form#contact 561px 303px

input 541px 25px

kontakt-wrapper 1869 px 350px

input 541px 25px input.contactcolum 243px 25px

input.contactcolum 243px 25px

input 541px 25px

textarea 541px 38px

Footer: 1869px min-height: 100px

colum-wrapper 316px 357px

column-image

277px 176px

column-header 277px 46px

column-content

267px 78px

footerkasse 320px 100px padding-top; 10px

column-header 277px 46px

footerkassekasse2 padding-top: 10px

footerkasse padding-top: 10px

footerkasse 320px 100px padding-top; 10px

content-wrapper 960px 357px

buttom 541px 25px

Footer: 1869px min-height: 100px

GRAFISK DESIGN KIDS WORLD

SKELET GALLERI

Logo:

Header:

334 px 148 px

960 px 180 px

Footer: 1869px min-height: 100px

colum-wrapper 316px 357px

column-image

277px 176px

column-header 277px 46px

column-content

267px 78px

colum-wrapper 316px 357px

column-image

277px 176px

column-header 277px 46px

column-content

267px 78px

colum-wrapper 316px 357px

column-image

277px 176px

column-header 277px 46px

column-content

267px 78px

footerkasse 320px 100px padding-top; 10px

column-header 277px 46px

footerkassekasse2 padding-top: 10px

footerkasse padding-top: 10px

footerkasse 320px 100px padding-top; 10px

content-wrapper 960px 357px

colum-wrapper 316px 357px

content-wrapper 960px 357px

colum-wrapper 316px 357px

content-wrapper 960px 357px

Menu: 700px 35 px

Footer: 1869px min-height: 100px

13 STORYBOARD INDEX.HTML Hvilke elementer, actions og links som er på dette site.

Elementer Slideshow med 3 billeder: 1.jpg - 2. jpg - 3.jpg head: logo.png colum-wrapper: 4.jpg - 5.jpg - 8.jpg Links: Links videre til galleri, contact og contact2. Billederne på colum-wrapper er bygget til at være et link. Men i øjeblikket linker de ikke til noget.

14 STORYBORD CONTACT.HTML Hvilke elementer, actions og links som er på dette site.

Elementer head: logo.png colum-wrapper: 4.jpg - 5.jpg - 8.jpg Links: Links til index, og galleri. Billederne på colum-wrapper er bygget til at være et link. Men i øjeblikket linker de ikke til noget.

GRAFISK DESIGN KIDS WORLD

15 STORYBORD GALLERI.HTML Hvilke elementer, actions og links som er på dette site.

Elementer head: logo.png colum-wrapper: a.jpg b.jpg c.jpg d.jpg e.jpg f.jpg g.jpg h.jpg i.jpg

Links: Links til index, contact2 og contact. Billederne på colum-wrapper er bygget til at være et link. Men i øjeblikket linker de ikke til noget.

16 SAVE FOR WEB Følgende billeder bliver gemt igennem “Save for web” og gemmes i RGB 72 ppi. Udover logoet som er en PNG.

GRAFISK DESIGN KIDS WORLD

17 BILLEDUDVALG Her ses mit billed antal og alle billeder er gemt i RGB og med 72 ppi. Udover logoet som er gemt som PNG fordi den er transperant.

18 FAVICON Jeg har vedlagt min favicon i min header. Favicon er 16 x 16 px i format. Det er fin detalje.

GRAFISK DESIGN KIDS WORLD

19 BASAL SEO / METATAGS TIL SØGEOPTIMERING Metatags er vedhæftet i index.html for at gøre min bruger synlig for kunder.

<meta name=”description” content=”Website for en boernehave”> <meta name=”keywords” content=”børnehave, kids world, børn, kærlighed, leg “> <meta name=”author” content=”Kids World”> <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1”> <meta name=”viewport” content=”width=device-width,initial-scale=1”> <meta charset=”UTF-8”>

20 BROWSERKOMPATIBILITET Siden fungere i Safari, Firefox, Chrome (tekst bliver lidt mindre)

Safari

Firefox

Chrome

GRAFISK DESIGN KIDS WORLD

21 DREAMWEAVER Her ses min opsĂŚtning af billederne i Dream W. De 4 undersider er hermed opsat. index.html contact.html contact2.html galleri.html

22 CSS3 CSS3 funktion er brugt på følgende billeder. Der er lavet runde hjørner. webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

GRAFISK DESIGN KIDS WORLD

23 FORMULAR Formular den virker og er knyttet til min online shop hos one.com

24 A HOVER VIRKEMIDLER. En lille detalje som mouseover. Så kommer der lidt flere farver ind i billedet. Det er et godt virkemiddel og lækker detalje.

GRAFISK DESIGN KIDS WORLD

STYLE.CSS

/* Responsive Mobile Menu v1.0 Plugin URI: responsivemobilemenu.com Author: Sergio Vitov Author URI: http://xmacros.com License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/ */ html { height:100%; } body{ min-width:512px; min-height:100%; background-image: url(../images/bg.jpg); /*background-size:cover;*/ background-attachment: fixed; background-position:center bottom; background-repeat:no-repeat; } header{ height: 180px; } .rmm { display:block; position:relative; width:100%; padding:0px; margin:0 auto !important; text-align: center; line-height:19px !important; padding-bottom:15px;

} .rmm * { -webkit-tap-highlight-color:transparent !important; font-family:Arial; font-size:10px; } .rmm a { color:#000000; text-decoration:none; } .rmm .rmm-main-list, .rmm .rmm-main-list li { margin:0px; padding:0px; } .rmm ul { display:block; width:auto !important; margin:0 auto !important; overflow:hidden; list-style:none; } /* sublevel menu - in construction */ .rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a { } /* */

display:none !important; height:0px !important; width:0px !important;

.rmm .rmm-main-list li { display:inline; padding:padding:0px; margin:0px !important; } .rmm-toggled { display:none;

width:100%; position:relative; overflow:hidden; margin:0 auto !important; } .rmm-button:hover { cursor:pointer; } .rmm .rmm-toggled ul { display:none; margin:0px !important; padding:0px !important; } .rmm .rmm-toggled ul li { display:block; margin:0 auto !important; }

-webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .rmm.graphite .rmm-toggled { width:95%; background-color:#FFFFFF; min-height:36px; } .rmm.graphite .rmm-toggled-controls { display:block; height:36px; background-color:white; border-style:solid; border-width:1px thin; border-color:#e2e2e2; /* GRAPHITE STYLE */ text-align:left; position:relative; .rmm.graphite .rmm-main-list li a { background-image:url(‘../rmm-img/graphite display:inline-block; menu-bg.png’); padding:8px 30px 8px 30px; background-repeat:repeat-x; margin:0px -3px 0px -3px; } font-size:15px; .rmm.graphite .rmm-toggled-title { background-repeat:repeat-x; position:relative; } top:9px; .rmm.graphite .rmm-main-list li a:hover { left:15px; background-image:url(‘../rmm-img/graphite- font-size:16px; menu-bg-hover.png’); color:#000000; } } .rmm.graphite .rmm-main-list li:first-child a { .rmm.graphite .rmm-button { -webkit-border-top-left-radius: 6px; display:block; -webkit-border-bottom-left-radius: 6px; position:absolute; -moz-border-radius-topleft: 6px; right:15px; -moz-border-radius-bottomleft: 6px; top:8px; border-top-left-radius: 6px; } border-bottom-left-radius: 6px; } .rmm.graphite .rmm-button span { .rmm.graphite .rmm-main-list li:last-child a { display:block; -webkit-border-top-right-radius: 6px; margin-top:4px;

GRAFISK DESIGN KIDS WORLD

height:2px; background:#000000; width:24px; }

} .rmm.sapphire .rmm-main-list li a:hover { background:#3e597b; } .rmm.sapphire .rmm-main-list li:first-child a { .rmm.graphite .rmm-toggled ul li a { -webkit-border-top-left-radius: 5px; display:block; -webkit-border-bottom-left-radius: 5px; width:100%; -moz-border-radius-topleft: 5px; background-color:#FFFFFF; -moz-border-radius-bottomleft: 5px; text-align:center; border-top-left-radius: 5px; padding:10px 0px 10px 0px; border-bottom-left-radius: 5px; } } .rmm.graphite .rmm-toggled ul { .rmm.sapphire .rmm-main-list li:last-child a { background-color:#FFFFFF; -webkit-border-top-right-radius: 5px; text-align:center; -webkit-border-bottom-right-radius: 5px; padding:10px 0px 10px 0px; -moz-border-radius-topright: 5px; border-style:solid; -moz-border-radius-bottomright: 5px; border-width:1px thin; border-top-right-radius: 5px; border-color:#e2e2e2; border-bottom-right-radius: 5px; border-top:none !important; } } .rmm.sapphire .rmm-toggled { .rmm.graphite .rmm-toggled ul li:not(:first-child) { width:95%; border-top-style:solid; background-color:#537b9f; border-top-width:1px; min-height:36px; border-top-color:#e2e2e2; border-radius:6px; } } .rmm.sapphire .rmm-toggled-controls { .rmm.graphite .rmm-toggled ul li a:hover { display:block; background-color:#444444; height:36px; color:#FFFFFF; color:white; } text-align:left; position:relative; /* SAPPHIRE STYLE */ background-image:url(‘../rmm-img/sapphire- menu-bg.png’); .rmm.sapphire .rmm-main-list li a { background-repeat:repeat-x; display:inline-block; border-radius:5px; padding:8px 30px 8px 30px; } margin:0px -3px 0px -3px; .rmm.sapphire .rmm-toggled-title { font-size:15px; position:relative; text-shadow:1px 1px 1px #3e587b; top:9px; background-color:#537b9f; left:15px; border-left:1px solid #3e587b; font-size:16px; background-image:url(‘../rmm-img/sapphire- color:white; menu-bg.png’); text-shadow:1px 1px 1px #3e587b; background-repeat:repeat-x; }

.rmm.sapphire .rmm-button { } display:block; .rmm.minimal a:hover { position:absolute; opacity:0.7; right:9px; } top:7px; .rmm.minimal .rmm-main-list li a { width:20px; display:inline-block; padding:0px 7px 0px 7px; padding:8px 30px 8px 30px; border:1px solid #3e587b; margin:0px -3px 0px -3px; border-radius:3px; font-size:15px; background-image:url(â&#x20AC;&#x2DC;../rmm-img/sapphire- } menu-bg.pngâ&#x20AC;&#x2122;); .rmm.minimal .rmm-toggled { background-position:top; width:95%; } min-height:36px; } .rmm.sapphire .rmm-button span { .rmm.minimal .rmm-toggled-controls { display:block; display:block; margin:4px 0px 4px 0px; height:36px; height:2px; color:#333333; background:white; text-align:left; width:20px; position:relative; } } .rmm.sapphire .rmm-toggled ul li a { .rmm.minimal .rmm-toggled-title { display:block; position:relative; width:100%; top:9px; background-color:#537698; left:9px; text-align:center; font-size:16px; padding:10px 0px 10px 0px; color:#33333; border-bottom:1px solid #3c5779; } border-top:1px solid #6883a6; .rmm.minimal .rmm-button { text-shadow:1px 1px 1px #333333; display:block; } position:absolute; .rmm.sapphire .rmm-toggled ul li a:active { right:9px; background-color:#3c5779; top:7px; border-bottom:1px solid #3c5779; } border-top:1px solid #3c5779; } .rmm.minimal .rmm-button span { .rmm.sapphire .rmm-toggled ul li:first-child a { display:block; border-top:1px solid #3c5779 !important; margin:4px 0px 4px 0px; } height:2px; background:#333333; width:25px; /* MINIMAL STYLE */ } .rmm.minimal .rmm-toggled ul li a { .rmm.minimal a { display:block; color:#333333; width:100%;

GRAFISK DESIGN KIDS WORLD

text-align:center; padding:10px 0px 10px 0px; border-bottom:1px solid #dedede; color:#333333; } .rmm.minimal .rmm-toggled ul li:first-child a { border-top:1px solid #dedede; }

display: block; margin: 0 auto; } .menu { display: block; width: 100%; margin: 0 auto; position: fixed; left: 0; top: 0; float:right; }

.column { padding: 20px; margin: 0px; text-align: left; }

.menu li { list-style: none; display: inline-block; }

.column-content { text-align: left; padding: 5px; } .column-image { margin-bottom: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; overflow:hidden; } .column-header { text-align: left; padding: 5px; } @media (max-width: 767px) { .column { display: block; width: 90%; margin: 0 auto; } .footerkasse{ width: 100%;

img { width:100%; } } @media (min-width: 768px) { .column { display: inline-block; width: 33%; } .menu { display: block; width: 100%; margin: 0 auto; position: fixed; left: 0; top: 0; } .menu li { list-style: none;

}

display: inline-block;

.contactColumn{ width:45% !important; float:left; } img { max-width: 100%; } #wrapper { margin: 0 auto; text-align: center; overflow:hidden; } #kontakt_wrapper { text-align: center; height:350px; overflow:hidden; } .content-wrapper{ background : rgba(255,255,255,0.5); } #contact{ padding:5px 10px; width:30%; margin:0 auto; } #contact input,textarea,button {

}

padding: 5px; margin: 2% 5px; border-radius:5px; border: 1px solid #e2e2e2; width:100%;

textarea { resize: vertical; } #footer { background : #9E193D; min-height:100px; } .kasse2 { padding-left: 0px; padding-top: 0px; width: 80%; max-width: 960px; margin: 0 auto; font-size: 11px; } .footerkasse { width:33.3%; float: left; color:#ffffff; padding-top:10px; display: block; } .class { clear:both; } #column1-hover:hover{ content:url(“../images/small/8_farve.jpg”); } #column2-hover:hover{ content:url(“../images/small/4_farve.jpg”); } #column3-hover:hover{ content:url(“../images/small/5_farve.jpg”); }

26 DESIGN PROCESS Her ses den fĂŚrdige designlinje til Kids World. logo, farvestyring. brevlinje, bonus opgave, workflow og digitale produkt.

GRAFISK DESIGN KIDS WORLD

I need ever Give me y single on my the rainbow colour! shirt!

For th e babyg perfect irl KIDS WOR LD

WORLD KIDS

GRAFISK WORKFLOW Dokumentation af Helena M. Schmidt