Grafisk Workflow
OPGAVEN Fodboldklubben Egmont Rollators FC ville have en website, for at gøre klubben mere synlig for eventuelle nye medlemmer. Websitet skulle indeholde alle de praktiske oplysninger om klubben. Alt lige fra farven på spillesættet til placering af hjemmebane. Den skulle kunne lokke nye klubmedlemmer til med sit fede layout, og via billeder der giver indblik i sammenholdet i den lille lokale fodboldklub i Aarhus. Denne opgave lavede jeg i fællesskab med en anden, men vi bidrog begge lige meget gennem hele forløbet, både fra idéproces til det færdige og online website.
PROGRAMVALG Adobe programmet InDesign blev brugt til at lave Storyboard over sitet. I Photoshop lavede vi layoutet og I Dreamweaver oprettede og kodede vi sitet.
LAYOUT Noter og frimærkeskitser blev tegnet i hånden i idéprocessen. Andre klubbers websites blev studeret nøje, for at se hvad de gjorde for at oplyse om klubben, og for at se hvad der solgte og ikke solgte. I Photoshop opsatte vi layoutet efter den valgte skitse og lavede justeringer undervejs. Da det er en single page website delte vi kluboplysningerne op i menupunkter, som fik hver deres baggrundsfarve eller baggrundsbillede for at give et bedre overblik. I Dreamweaver satte vi websitet til at være responsivt, så den kunne tilpasse sig alle skærmstørrelser, både på computere, tablets og smartphones. Breddemålene på websitet er derfor opgivet i procenter og ikke i faste pixels. Af virkemidler til sitet har vi taget billeder af klubbens medlemmer når de var til kamp og træning, som blev brugt til stemningsbilleder for at vise sammenholdet og menneskerne bag. Vi lavede nogle iøjnefaldende topbannere, som slides, med henblik på at sælge klubben. Typografien bestod af samme font som klubben i forvejen brugte, nemlig Quantico, bold. Fonten valgte vi at genbruge for at give genkendelse, men samtidig også fordi fonten minder om fonten på bagsiden af amerikansk fodboldtrøjer og derfor har et godt sportsligt look.
KOMPOSITION SAMT MODULOPBYGNING Vi har fulgt konventionen om at placere klubbens logo i øverste venstre hjørne. Det første der falder i øjnene er de to slides som skiftevis bliver vist. Det var vigtigt at have disse bannere øverst, for at lokke brugeren til at se mere på sitet. Ved at scrolle eller klikke i menuen, som i øvrigt følger med lige meget hvor du befinder dig på websitet, bliver man ført ned over tekst og billeder. Det er minimalistisk, men med den nyttige infomation om klubben og dens spillere. Vi har forsøgt at holde sitet kort, så brugeren ikke mister overblikket og interessen undervejs ved at scrolle, da det jo er et single page website.
USABILITY Målgruppen er mellem 18 og 40 år, og er både mænd og kvinder som bor i Aarhus og omegn. Primær er det tidligere fodboldspillere der er flyttet til byen for at studere. Der søges derfor efter venskaber, selvrealisering, udfordring, sjov, sammenhold og ikke mindst motion. Da målgruppen favner bredt, skulle sitet være overskueligt og give brugeren den nyttige viden, samt
#Anna Skak #Mediegrafiker
vække lysten til at kontakte klubben for at komme i gang med at spille fodbold.
AKTUALITET Brugere skal nemt kunne se at websitet er aktuelt, og ikke forældet som mange andre sportsklubbers hjemmesider. Vi har nemlig valgt ikke at inddrage kampresultater, blog, nyheder, spillere og alt mulig andet, som skal opdateres løbende og som næsten aldrig bliver det. Vi ville gerne sørge for at holde den forholdsvis tidsløs, som var et meget bevidst valg. Sitet skal signalere at klubben har et godt sammenhold på kryds og tværs, og at den er åben for nye folk der kunne have interesse i et medlemsskab. Den er især aktuel for personer der leder efter en social fodboldklub centralt i Aarhus, og oveni har et billigt kontingent.
BROWSERKOMPATIBILITET Websitet kan ses på computeren i browserne Safari, Mozilla Firefox, Google Chrome og Internet Explorer. Sitet er også lavet sådan at man kan se den på tablet og smartphone.
PROCESBESKRIVELSE qq qq qq qq qq qq qq qq
Søge inspiration på internettet Flowchart laves Notater skrives og Frimærkeskitser tegnes Fotografering af klubmedlemmerne Udarbejde layout Få feedback og godkendelse fra klubben Grafikoptimere billederne til web Fremstilling af Storyboard
qq Skelettet over sitet tegnes qq Påbegynde kodning af websitet qq Sætte websitet live
ADRESSELINJE www.egmontrollatorsfc.dk
KVALITETSVURDERING Fodboldklubben Egmont Rollators FC er meget tilfreds med den website vi fik lavet til dem. Nu kan de sprede deres budskab ud til en bredere målgruppe end kun dem som har en bruger på Facebook. Jeg synes også at den var vellykket og flot, og også lærerig eftersom vi opsatte den som en single page website som jeg ikke havde prøvet før.
INSPIRATION Se på forskellige websites, især andre klubbers for at se hvad man kunne gøre og ikke skulle gøre http://www.danielepetrarolo.com http://onepagelove.com/page/2 http://demo.rocknrolladesigns.com/wp/versi-text/#!portfolio-item/mauris-nibh-arcu
#Grafisk Workflow
FLOWCHART, SKITSER & BILLEDER Flowchart over websitet
Notater og FrimĂŚrkeskitser over ideprocessen
Forside
Klubben
Udtalelser
Find os
Billeder som blev benyttet
Kontakt egmont-logo.png money-icon.png
slide1.jpg
formand.jpg
klub-bg.jpg play-icon.png
slide2.jpg
#Anna Skak #Mediegrafiker
holdaand.jpg
field-icon.png
bordfodbold.jpg
anna.jpg
STORYBOARD Storyboard for sitet
GENERELT
KLUBBEN (2)
Body Baggrundsfarve #FFFFFF.
Baggrundsbillede klub-bg.jpg
2
Menulinje Baggrundsfarve #222222. Den er fastsat i toppen og følger med når der scrolles. Dropdown menuen er placeret ude i højre hjørne. Rækkefølge på menupunkter: Forside, Klubben, Udtalelser, Find os, Kontakt.
1
Logo Placeret oppe i venstre hjørne på menulinjen. Til højre for logoet er klubbens navn med størrelsen 16 px. egmont-logo.png Font Quantico, bold. Fontfarve #282828. h1: størrelse på 3.33 em, line-heigt på 1.2125 em. h2: størrelse på 1.25 em, line-heigt på 1.2125 em. h3: størrelse på 0.875 em, line-heigt på 1.2125 em. Brødtekst: størrelsen 0.875 em, line-height på 1.6 em.
3
2
Formular Baggrundsfarve #282828 h2 i hvid, brødtekst i hvid og centreret. Knappen har farven #DD4324
UDTALELSER (3) Baggrundsfarve #A5C99B h1 øverst, citatnavnene nederst er h2. Citater Baggrundsfarve #809A78. brødtekst med farven #FFFFFF.
h1 og h2 Integreret Google map i 100 % width.
FORSIDE (1)
Ikoner money-icon.png play-icon.png field-icon.png
Slide holdaand.jpg bordfodbold.jpg
FIND OS (4)
Tekstindhold egmont_fodbold.doc
Slider slide1.jpg slide2.jpg
h1, h2, brødtekst og der er brugt span til at give farve til ”Herrerne” #284496 og ”Damerne”#6F0202.
KONTAKT (5)
4
Baggrundsfarve #78899A Al tekst med farven #FFFFFF. h1 øverst. Kontaktboks farve #596571. h2 og brødtekst, li. Billeder af kontaktpersoner formand.lpg anna.jpg
5
Integration af Egmont Rollators FCs Facebook stream.
#Grafisk Workflow
SKELET Da det er en single page website er skelettet tegnet pĂĽ 3 stykker papir hvor man skal forstille sig sammenhĂŚngen
#Anna Skak #Mediegrafiker
RESULTAT I BROWSER Browserkompatibilitet
Google Chrome
Kan ogs책 ses p책 tablet og smartphone
Firefox
Safari
#Grafisk Workflow
STYLES.CSS Vi brungte CSS-framework; Foundation til den barsale opbygning, samt til visse elementer så som slidere og topmenu. Det gjorde det lettere at kode websitet og gjorde det responsivt, så det lettere tilpasser sig andre skærmstørrelser.
.about-club h1 {margin-bottom: 0;} .about-club h3 {margin-top: 0;} .about-club .black-bar {background-color: #000; height: 0.250em; margin-bottom: 2.5em;} /* ----------- GENEREL ----------- */ .about-club-section {margin: 1em 0;} .center {text-align:center;} .herrer {color:#284496;} h1 {position:relative; margin-top:0.750em;} .damer {coh1 span {position:absolute; top:-50px;} lor:#6f0202;} .skygge-wrapper {height:10px; back.club-picture img {border: 10px solid #fff;} ground: url(”../img/skygge.png”) no-repeat; background-size:100%;} /*----------- UDTALELSER -----------*/ .skygge-wrapper-map {top:-3px;} .club-quotes-wrapper {background: #a5c99b;} button, .erfc-button { .quote-box-wrapper {margin-bottom: border-style:none; 3.333em;} cursor: pointer; .quote-box {backgfont-family: inherit; round: #809a78; padding: 2em; color: #fff; margin-bottom:0;} font-weight: 700, bold; .quote-box-speech {float:right; marline-height: 1; gin-right: 20px; width: 0; height: 0; border-top: 0px solid transparent; border-bottom: 50px solid margin: 0 0 1.25em; transparent; border-left:50px solid #809a78; } position: relative; .the-quoted-one {margin-right: 90px; text-decoration: none; text-align:right;} text-align: center; .the-quoted-one h2 {margin: 5px 0 0 0;} width: 100%; .the-quoted-one h4 {margin: 0; fontdisplay: inline-block; weight:400, normal;} padding-top: 0.25em; /*----------- FIND OS -----------*/ padding-bottom: 0.3125em; .find-us h1 {marfont-size: 1em; gin-bottom: 0;} background-color: #dd4324; .find-us h2 {marcolor: white; } gin-top: 0;} button:hover, button:focus, .erfc-button:hover, .erfc-button:focus { .find-us-map {width: 100%; background-color: #be3b22; } height:100%;} .top-bar a.logo {text-indent: -119988px; /*----------- KONTAKT -----------*/ overflow:hidden; text-align:left; background-image: url(”../img/egmont-logo.png”); backg.contact-wrapper {background: #78899a; positiround-repeat:no-repeat; on:relative; top:-2px; padding-bottom: 3.333em;} background position: 50% 50%; display:block; width: 287px; height: 42px; margin: 3px 0 0 15px;} .single-contact img {width:100%;} /*----------- FORSIDE -----------*/ .contact-wrapper h1 {color: #fff;} .top-selling {margin-top: 2.5em;} .contact-box {background: .top-selling img {margin-bottom: 20px;} #596571; text-align:center; padding: 0.750em 1.250em 1.250em 1.250em; margin-top:10px; /* Signup form */ color: #fff; margin-bottom:0; white-space:normal;} .sign-up {visibility:hidden; .contact-box h2 {color: #fff; mardisplay:none; background-color: #282828; color: #FFF; padding: 30px 10px 0px 0; margin-top: gin:0;} 2.5em;} .contact-box ul {margin-bottom:0;} .sign-up form {margin: 0;} .contact-box ul li {text-decoration:none; list-sty.sign-up h2 {text-transle:none; font-size: 0.750em;} form: uppercase; color:#FFF; margin-top: -0.3em;} .contact-box ul li a {color: #fff;} .sign-up .radio-button-group {margin-top: 0.675em; margin-bot.contact-box ul li a:hover {text-decoration:underline;} tom:0.675em;} .facebook-box {background: #fff; /*----------- KLUBBEN -----------*/ padding: 0;} .about-club-wrapper {/*background: .facebook-box * {width: 100% !impor#b4b9dc;*/ background: url(”../img/klub-bg.jpg”) center bottom no-repeat, url(”../img/klub-retant;} peat-bg.jpg”) top left repeat-y; background-size:100%; margin-top: 3.333em; padding-bottom: 3.333em; }
#Anna Skak #Mediegrafiker
HTML-KODE <!DOCTYPE html> <!--[if IE 8]> <html class=”no-js lt-ie9” lang=”en” > <![endif]--> <!--[if gt IE 8]><!--> <html class=”no-js” lang=”en” > <!--<![endif]--> <head> <link href=’http://fonts.googleapis.com/css?family=Quantico:400,700’ rel=’stylesheet’ type=’text/css’> <meta charset=”utf-8” /> <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1” /> <title>Egmont Rollators FC | Spil fodbold i Aarhus med Egmont Rollators FC</title> <meta name=”description” content=”fodbold i aarhus, spil fodbold, fodboldklub, fodboldklub aarhus, egmont rollators fc”> <meta name=”author” content=”Egmont Rollators FC”> <link rel=”stylesheet” href=”css/foundation.css” /> <link rel=”stylesheet” href=”css/styles.css” /> <script src=”js/vendor/custom.modernizr.js”></script> <!-- ANALYTICS CODE --> <script> (function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’); ga(‘create’, ‘UA-42267257-1’, ‘egmontrollatorsfc.dk’); ga(‘send’, ‘pageview’); </script> </head> <body> <!-- FACEBOOK PLUGIN --> <div id=”fb-root”></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “//connect.facebook.net/da_DK/all.js#xfbml=1”; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’));</script> <!-- FACEBOOK PLUGIN SLUT --> <div class=”row”> <div class=”fixed contain-to-grid”> <nav class=”top-bar”> <ul class=”title-area”> <li class=”name”> <a href=”index.html” class=”logo”>Egmont Rollators FC</a> </li> <li class=”toggle-topbar menu-icon”><a href=”#”><span>Menu</span></a></li> </ul> <section class=”top-bar-section”> <!-- Right Nav Section --> <ul class=”right”> <li><a href=”#”>FORSIDE</a></li>
<li><a href=”#klubben”>KLUBBEN</a></li> <li><a href=”#udtalelser”>UDTALELSER</a></li> <li><a href=”#findos”>FIND OS</a></li> <li><a href=”#kontakt”>KONTAKT</a></li> </ul> </section> </nav> </div> </div> <div class=”row”> <div class=”large-12 columns”> <ul data-orbit data-options=”bullets:false; slide_number:false;”> <li> <img src=”img/slide1.jpg” /> </li> <li> <img src=”img/slide2.jpg” /> </li> </ul> </div> </div> <div class=”row top-selling”> <div class=”large-4 center columns”> <img src=”img/money-icon.png” /> <p>Egmont Rollators FC har et af de billigste kontingenter i Aarhus. her får du lov til at spille fodbold i Aarhus, uden at smide hele formuen.</p> </div> <div class=”large-4 center columns”> <img src=”img/football-player-icon.png” /> <p>En fodboldklub er en god måde at møde nye mennesker. I Egmont Rollators FC har vi et godt sammenhold, holdene imellem.</p> </div> <div class=”large-4 center columns”> <img src=”img/football-field-icon.png” /> <p>Vi træner 2 gange om ugen på Læssøgadeskolen, en meget central fodboldbane i centrum af Aarhus. Her kan alle være med.</p> </div> </div> <div class=”row sign-up” <div class=”large-12 columns”> <div class=”large-4 center columns”> <h2>Vær med på holdet</h2> <p>Send os dit navn, nummer og mail, så kontakter vi dig angående
#Grafisk Workflow
en uforpligtende træning.</p> </div> <div class=”large-8 columns”> <form class=”custom”> <div class=”row”> <div class=”large-4 columns”> <input type=”text” placeholder=”Navn”> </div> <div class=”large-4 columns”> <input type=”text” placeholder=”Tlf. nummer”> </div> <div class=”large-4 columns”> <input type=”text” placeholder=”E-mail”> </div> </div> <div class=”row”> <div class=”large-3 radio-button-group columns”> <p>Kontakt mig via.</p> </div> <div class=”large-5 radio-button-group columns”> <div class=”row”> <div class=”small-4 columns”> <label for=”radio1”><input name=”radio1” type=”radio” id=”radio1” style=”display:none;”><span class=”custom radio”></span> SMS</label> </div> <div class=”small-4 columns”> <label for=”radio1”><input name=”radio1” type=”radio” id=”radio1” style=”display:none;”><span class=”custom radio”></span> E-mail</label> </div> <div class=”small-4 columns”> <label for=”radio1”><input name=”radio1” type=”radio” id=”radio1” style=”display:none;”><span class=”custom radio”></span> Opkald</label> </div> </div> </div> <div class=”large-4 columns”> <input class=”erfc-button” type=”submit” value=”SEND”> </div> </div> </form> </div> </div> </div> <div class=”about-club-wrapper”> <div class=”row”> <div class=”small-12 skygge-wrapper columns”> </div> </div> <div class=”row about-club”> <div class=”large-6 small-centered center columns”> <h1><span id=”klubben”></span>KLUBBEN</h1>
#Anna Skak #Mediegrafiker
<h3>Alt det du skal vide om klubben</h3> </div> <div class=”small-2 large-1 small-centered center black-bar columns”></div> </div> <div class=”row center”> <div class=”small-6 large-4 large-offset-2 about-club-section columns”> <h2>TRÆNING</h2> <p><span class=”herrer”>Herrerne</span> træner mandag og onsdag fra<br/> 19:00 - 20:30<br/> <span class=”damer”>Damerne</span> træner mandag og onsdag fra<br/> 19:00 20:30</p> </div> <div class=”small-6 large-4 about-club-section columns”> <h2>KAMPE</h2> <p><span class=”herrer”>Herrerne</span> spille kamp lørdag eller søndag.<br/> <span class=”damer”>Damerne</span> spiller kamp mandag eller onsdag.</p> </div> <div class=”large-2 columns”></div> </div> <div class=”row center”> <div class=”small-6 large-4 large-offset-2 about-club-section columns”> <h2>KAMPFORMAT</h2> <p><span class=”herrer”>Herrerne</span> spiller 11-mands i 90 min.<br/> <span class=”damer”>Damerne</span> spiller 7-mands i 60 min.</p> </div> <div class=”small-6 large-4 about-club-section columns”> <h2>NIVEAUET</h2> <p><span class=”herrer”>Herrerne</span> spiller i Serie 5<br/> <span class=”damer”>Damerne</span> spiller i C1</p> </div> <div class=”large-2 columns”></div> </div> <div class=”row center”> <div class=”small-6 large-4 large-offset-2 about-club-section columns”> <h2>HJEMMEBANE</h2> <p>Egmont Rollators FC har hjemmebane på Skjoldhøjskolen i Tilst. Inden for cykeldistance og bus 3A går hver 10.ende minut.</p> </div> <div class=”small-6 large-4 about-club-section columns”> <h2>INDENDØRS FODBOLD</h2> <p>Hver vinter træner vi indendørs. Det koster kun 100 DKK for en hel vinter med indendørs fodbold.</p> </div> <div class=”large-2 columns”></div> </div> <div class=”row club-picture”> <div class=”large-8 small-centered columns”> <ul data-orbit data-options=”bullets:false; slide_number:false;”> <li> <img src=”img/holdaand.jpg” />
</li> <li> <img src=”img/bordfodbold.jpg” width=”2592” height=”1936” /> </li> </ul> </div> </div> </div> <div class=”club-quotes-wrapper”> <div class=”row”> <div class=”small-12 skygge-wrapper columns”> </div> </div> <div class=”row”> <div class=”large-6 small-centered center columns”> <h1><span id=”udtalelser”></span>UDTALELSER</h1> </div> </div> <div class=”row”> <div class=”large-4 large-offset-2 quote-box-wrapper columns”> <p class=”quote-box”>”Egmont Rollators er en hyggelig klub, hvor vi har et godt sammenhold med dameholdet også. Det har jeg ikke oplevet på samme måde i andre klubber. Klubbens medlemmer er åbne og imødekommende og derfor er Egmont Rollators FC også en fodboldklub hvor man kan komme ind og sætte sit præg hvis man gør en indsats.”</ p> <div class=”quote-box-speech”></div> <div class=”the-quoted-one”> <h2>René Albertsen</h2> <h4>Egmont Rollators FC spiller</h4> </div> </div> <div class=”large-4 quote-box-wrapper columns”> <p class=”quote-box”>“Egmont Rollators FC 4-ewar!”</p> <div class=”quote-box-speech”></div> <div class=”the-quoted-one”> <h2>Peder Thomsen</h2> <h4>Træner/spiller - herreholdet</h4> </div> </div> <div class=”large-2 columns”> </div> </div> </div> <div class=”row”> <div class=”small-12 skygge-wrapper columns”> </div> </div> <div class=”row find-us”> <div class=”small-12 large-6 small-centered center columns”> <h1><span id=”findos”></span>FIND OS</h1> <h2>SKJOLDHØJSKOLEN I TILST</h2> </div>
</div> <div class=”find-us-map”> <iframe width=”100%” height=”350” frameborder=”0” scrolling=”no” marginheight=”0” marginwidth=”0” src=”https://maps.google.dk/maps/ms?msa=0&amp;msid=211545871244744571169.0004e0d4cec3916c57cb9&amp;ie=UTF8&amp;ll=56.16075,10.15061 6&amp;spn=0.027459,0.072484&amp;t=m&amp;iwloc=0004e0d4d5f2d91f64ecb&amp;output=embed”></iframe> </div> </div> <div class=”contact-wrapper”> <div class=”row”> <div class=”small-12 skygge-wrapper columns”> </div> </div> <div class=”row”> <div class=”large-6 small-centered center columns”> <h1><span id=”kontakt”></span>KONTAKT</h1> </div> </div> <div class=”row”> <div class=”small-6 large-3 single-contact columns”> <img src=”img/formand.jpg” > <div class=”contact-box”> <h2>Andreas Hansen</h2> <p>Formand</p> <ul> <li>+45 23 28 12 28</li> <li>andreasoue(a)hotmail.com</li> </ul> </div> </div> <div class=”small-6 large-3 single-contact columns”> <img src=”img/anna.jpg” > <div class=”contact-box”> <h2>Anna Skak</h2> <p>Holdleder for Dameholdet</p> <ul> <li>+45 40 18 91 50 </li> <li>anna_skak(a)hotmail.dk</li> </ul> </div> </div> <div class=”large-6 facebook-box columns”> <div class=”fb-like-box” data-href=”https://www.facebook.com/egmontrollatorsfc” data-width=”460” data-height=”295” data-show-faces=”false” data-stream=”true” data-show-border=”true” data-header=”false”></div> </div> </div> </div> <script> document.write(‘<script src=’ + (‘__proto__’ in {} ? ‘js/vendor/zepto’ : ‘js/vendor/jquery’) +
#Grafisk Workflow
‘.js><\/script>’) </script> <script src=”js/foundation.min.js”></script> <!-<script src=”js/foundation/foundation.js”></script> <script src=”js/foundation/foundation.alerts.js”></script> <script src=”js/foundation/foundation.clearing.js”></script> <script src=”js/foundation/foundation.cookie.js”></script> <script src=”js/foundation/foundation.dropdown.js”></script> <script src=”js/foundation/foundation.forms.js”></script> <script src=”js/foundation/foundation.joyride.js”></script> <script src=”js/foundation/foundation.magellan.js”></script> <script src=”js/foundation/foundation.orbit.js”></script> <script src=”js/foundation/foundation.reveal.js”></script> <script src=”js/foundation/foundation.section.js”></script> <script src=”js/foundation/foundation.tooltips.js”></script> <script src=”js/foundation/foundation.topbar.js”></script> <script src=”js/foundation/foundation.interchange.js”></script> <script src=”js/foundation/foundation.placeholder.js”></script> --> <script> $(document).foundation(); </script> </body> </html>
#Anna Skak #Mediegrafiker