Anna Skak • Mediegrafiker
Grafisk workflow
opgaven Journaliststuderende Mai Jessen skulle have en website, for at promovere sig selv i søgningen på en praktikplads. Websitet skulle indeholde en masse omkring Mai, lige fra praktiske oplysninger, nice to know, billeder af hende og artikler som hun har skrevet. Siden skal oplyse praktikstederne om Mai og forhåbentlig gøre dem interesserede i at have Mai som praktikant.
programvalg I Adobe programmet Photoshop, lavede jeg layoutet til websitet. I Dreamweaver oprettede og kodede jeg sitet.
Layout Noter og frimærkeskitser blev tegnet i hånden i idéprocessen. Jeg fandt inspiration fra andre journaliststuderendes websites, for at se hvad de havde af oplysninger og hvordan de opbyggede deres site. Mai havde også selv nogle idéer til hvad sitet skulle indeholde og se ud. I Photoshop opsatte jeg layoutet efter den valgte skitse og lavede justeringer undervejs efter Mais feedback. I Dreamweaver kodede jeg websitet til at være responsiv, så den kunne tilpasse sig både computerskærme, tablets og smartphones. Breddemålene på websitet er derfor opgivet i procenter og ikke i faste pixels. Af virkemidler til sitet har jeg brugt billeder, links til artikler, tv-reportager og radioprogrammer som Mai har stået bag. Billederne gav sitet liv og mere forståelse for emnerne. Af typografiske virkemidler, brugte jeg fonten, Arial i både Regular og bold. Fonten er en web-venlig font som de fleste systemer understøtter og den er behagelig at læse på en skærm.
komposition samt modulopbygning
Anna Skak • Mediegrafiker
Mais signatur og telefonnummer er placeret i øverste venstre hjørne, derfra føres øjnene ned over siden. Menuen er placeret i modsatte højre side. Sidens indhold er opsat midt på siden og indeholder overskrift, brødtekst, billeder og evt. links til andre sider. Sitet er enkelt, uden forstyrrende farver og for mange elementer. Hver side er opbygget så den ikke er for lang og uoverskuelig. Så brugeren ikke mister interessen undervejs ved at scrolle, enten på computer, tablet eller smartphone. Så kan man altid med tiden, putte mere stof på siderne.
usability Målgruppen er mellem 22 og 60 år, og er både mænd og kvinder som er interesserede i journalistik. De kan være bosatte over hele Danmark, og ellers danskere i udlandet, eftersom sitet kun er på dansk. Da målgruppen favner bredt, skulle sitet være overskueligt, brugervenlig, og give brugeren det han/hun kom efter. Hovedformålet er at vække lysten til at kontakte Mai, vedrørende et praktiksted.
aktualitet Brugere skal nemt kunne se at websitet er nyopdateret og aktuelt. Sitet bliver også oprettet i Wordpress, så Mai selv kan gå ind og tilføje eller ændre på siderne. På den måde kan hun
sørge for at holde hendes profil på sitet opdateret. Mais Twitterprofil er også tilknyttet sitet, så der kan man også følge hende på det nyeste.
browserkompatibilitet Websitet kan ses på computeren i browserne Safari, Mozilla Firefox, Google Chrome og Internet Explorer. Og som sagt, er sitet også lavet sådan, at man kan se den på tablet og smartphone.
procesbeskrivelse qq qq qq qq qq qq qq qq qq qq qq qq
Holde møde med Mai Søge inspiration på internettet Flowchart laves Notater skrives og Frimærkeskitser tegnes Tekst, billeder og links modtages fra Mai Udarbejde layout i Photoshop Få feedback og godkendelse fra Mai Grafikoptimere billederne til web Fremstilling af Storyboard Skelettet over sitet tegnes Påbegynde kodning af websitet Sætte websitet online, men holde det uofficiel indtil april.
adresselinje www.annaskak.dk/maijessen/
kvalitetsvurdering Mai var rigtig glad for resultatet af hendes nye website. Jeg håber at den kan være med til at sikre Mai en praktikplads på Panikdagen den 24. april. Jeg synes helt sikkert også at hendes website er blevet fin og brugbar. Den har været en udfordring at lave, jeg har lært meget mere om Dreamweaver og de responsive værktøjer Foundation.
Inspiration
Grafisk workflow • side 2/10
Flowchart, skitser & billeder
Forside
Kontakt
Artikler
Radio
CV
TV
Maijessen_underskrift.png flat-mail.png
Anna Skak • Mediegrafiker
Om Mai
twitter.png
user.png
flat-iphone.png
Mai_fodbold.jpg
bgnoise.png
Mai_1.jpg
Mai_2.jpg
Mai_gartneri.jpg
Mai_3.jpg
Mai_bold_i_bunkeren.jpg
Mai_comingup.jpg
Mai_kommunalvalg.jpg Mai_kvindefodbold.jpg
Mai_fc_chelsea.jpg
Mai_medspiller.jpg
Mai_pokal.jpg
Mai_tv.jpg
Mai_stadion.jpg
Mai_vaert.jpg
storyboard Generelt
Curriculum Vitae (3)
Body Baggrundsbillede bgnoise.png
h2, h1, h4 og p i to spalter. Mai_medspiller.jpg
Wrapper Baggrundsfarve #FAFAFA med box-shadow #999.
1
Menulinje Den er fastsat i toppen til højre med en størrelse 16 px. Dropdown menuen på tablet og smartphone er placeret ude i venstre hjørne. Rækkefølge på menupunkter: Forside, Om Mai, Curriculum Vitae, Produktioner, Kontakt.
Om Mai (2) Signatur Placeret oppe i venstre hjørne, modsat menulinjen. Til højre for signatur er Mais telefonnummer klubbens navn med størrelsen max 18 px. Maijessen_underskrift.png Font Arial med fontfarve #222. h1: størrelse på 30 px, line-heigt på 1.2 em. h2: bold, størrelse på 20 px, line-heigt på 1.4 em. h3: bold, størrelse på 16 px, line-heigt på 1.4 em. h4: bold, størrelse på 14 px line-heigt på 1.4 em. p: Brødtekststørrelsen 14 px, line-height på 1.6 em. li: listestørrelse 16 px, line-height på 1.6 em.
Forside (1) h1 og p. Maijessen_underskrift.png Mai_1.jpg Mai_2.jpg
3
Mai_fodbold.jpg Mai_pokal.jpg Mai_stadion.jpg h2, h1 og p i to spalter. 2 boxe med baggrundsfarve #fff og en border på 1px, solid, #CCC og med en h3 og li som liste med bullet.
2 Grafisk workflow • side 4/10
Tekstindhold Maijessen_journaliststuderende.doc
Citater Baggrundsfarve #809A78. brødtekst med farven #FFFFFF.
Storyboard Artikler (4)
TV (5)
Product-nav med baggrundsfarve #fff og border på 1px, solid, #CCC. Fontstørrelse på 16 px. Navigationspunkter: Artikler, TV, Radio.
Opbygning ens med Artikler (4) Mai_tv.jpg Mai_comingup.jpg Mai_vaert.jpg
h2, h1 og p. hr: horisontal ruler som solid og med farven #dddddd. Mai_gartneri.jpg Mai_fc_chelsea.jpg Mai_kommunalvalg.jpg 1 link: http://maijessen.mediajungle.dk/2013/09/19/ jeg-vidste-ikke-engang-at-der-er-kommunalvalg-til-november/
2 link: http://www.comingup.dk/ http://www.youtube.com/watch?v=Rn4sVhk1Z8Q
2 link: http://www.mixcloud.com/Genl%C3%BCd/bold-i-bunkeren-hobro-ik-special/ http://www.mixcloud.com/Genl%C3%BCd/bold-i-bunkeren-kvindefodbold/
6
5
4 Radio (7)
Anna Skak • Mediegrafiker
h2, h1, li, h3. Box ens med Om Mai (2). flat-mail.png, flat-iphone.png, twitter.png, user.png, Mai_3.jpg
7 Radio (6) Opbygning ens med Artikler (4) Mai_bold_i_bunkeren.jpg Mai_kvindefodbold.jpg
Resultat i browser, på tablet og smartphone
Grafisk workflow • side 6/10
Styles.css /* CSS Document */ .content-wrapper .om-mai-images div {padding: 0 25px 25px 25px;} /* General styles */ .text-columns {column-count:2; -moz-column-count:2; -webkit-column-count:2;} body {background: url(../img/bgnoise.png) repeat;} .info-box {background: #fff; border: 1px solid #CCC; border-radius: 5px; padding: 20px;} .round-image {border-radius:999px; border: 5px solid #fff; box-shadow:0 1px 2px 0 #999;} .info-box h3 {font-size: 16px; font-weight:bold;} .content-wrapper {position:relative; background-color:#fafafa; padding: 10px 50px 50px 50px; box-shadow:0 2px 5px 0 #999; border-radius:5px; margin-bottom: 40px;}
/* Curriculum Vitae */
.content-wrapper p {font-size:14px;}
.content-wrapper .cv {margin-bottom:20px;}
h1, h2, h3, h4, h5, h6, p, a {font-family:Arial, Helvetica, sans-serif;}
/* Produktioner */
h1 {font-size:30px; line-height:1.2}
.production-element {margin-top: 120px;}
h4 {font-size:14px; font-weight:bold;}
.button-group {width: 100%; border-radius:5px; border: 1px solid #CCC; box-shadow: 0 1px 1px 0 #CCC; margin-bottom: 50px;}
hr {margin-top: 40px; margin-bottom:40px;} .button-group li {width: 33.33%;} .page-title h2 {font-size:20px; font-weight:bold;} .button-group li a {width: 100%; border: 1px solid #CCC;}
Anna Skak • Mediegrafiker
.page-title {margin-bottom: 25px;} /* menu styles */
.product-nav {background: #fff; color: #000; margin-bottom:0; padding:12px;} .product-nav:hover {background: #CCC; color: #000;}
header {margin-top:15px!important;}
.middle-button {border-left: 1px solid #CCC; border-right: 1px solid #CCC;}
header img {margin-top:8px}
/* Kontakt */
header h1 {font-size:18px; display:inline; margin-left:3px;}
.contact-list {font-size:24px; line-height:56px; margin-bottom: 50px;}
header ul li {line-height:56px;}
.contact-list li {margin:20px 0;}
header ul li a {color:#000; font-weight:bold;}
.list-phone {background:url(”../img/flat-iphone.png”) no-repeat 9px 6px; padding:0 0 1px 67px; list-style-type:none; vertical-align: middle;}
/* forside styles */ .home-box {padding:80px 50px;} .intro-text h1 {font-size:37px; font-weight:bold;}
.list-mail {background:url(”../img/flat-mail.png”) no-repeat 0px 6px; padding:0 0 1px 67px; list-style-type:none; vertical-align: middle;} .list-twitter {background:url(”../img/twitter.png”) no-repeat 0px 6px; padding:0 0 1px 67px; list-style-type:none; vertical-align: middle;}
.left-image {width:250px;} .list-twitter a {color: #000;} .right-image {width:350px; margin-top:-170px; margin-left: 160px;} /* om mai styles */
.list-phoner {background:url(”../img/user.png”) no-repeat 0px 6px; background-size:40px; padding:0 0 1px 57px; list-style-type:none; vertical-align: middle;}
.content-wrapper .om-mai-images {padding: 0 40px 20px 40px;}
.phoner-list {font-size:18px; line-height:46px; margin-left:5px; margin-bottom:0;}
Styles.css fortsat .phoner-list li {margin:0;}
.info-box-phoner {width:100%;}
.phoner-list li.list-phone {background:url(”../img/flat-iphone.png”) no-repeat 7px 6px; background-size:25px; padding:0 0 1px 57px; list-style-type:none; vertical-align: middle;}
.contact-list {font-size:18px;} .info-box-phoner h3 {font-size: 18px;}
.info-box-phoner {background: #fff; border: 1px solid #CCC; border-radius: 5px; padding: 20px; width:83%;}
.phoner-list {font-size:14px;}
.info-box-phoner h3 {font-size: 20px; font-weight:bold;} /* Navigationsbar */ nav.tab-bar {background-color: #fafafa; box-shadow: 0 1px 2px #999;} a.menu-icon span {-webkit-box-shadow: 1px 10px 1px 1px black, 1px 16px 1px 1px black, 1px 22px 1px 1px black; box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black;}
} @media (max-width: 640px) { /* General mobil styles */ .main-section {padding:10px 5px;}
nav.tab-bar h1 {color: #000; font-weight: normal; display: inline; font-size: 14px;}
.content-wrapper {padding: 10px 20px 50px 20px;}
section.tab-bar-section {text-align: center;}
/* Forside */
@media (max-width: 1024px) { /* General tablet styles */
.right-image {margin-top: 20px;}
.main-section {padding:20px;}
/* om mai styles */
.content-wrapper {padding: 10px 30px 50px 30px;}
.text-columns {column-count:1; -moz-column-count:1; -webkit-column-count:1;}
/* Forside */
/* Produktioner */
.right-image {width:100%; margin:0;}
.production-element {margin-top: 0px;}
.home-box {padding: 40px 20px;}
/* Kontakt */
/* Om Mai */
.info-box-phoner {margin-bottom:20px;}
.content-wrapper .om-mai-images {padding:0;}
}
.info-box {margin-bottom: 20px;} /* Produktioner */ .production-element {margin-top: 40px;} /* Kontakt */
Grafisk workflow • side 8/10
.content-wrapper .om-mai-images div {padding: 0 15px 15px 15px;}
.home-box {padding: 30px 20px;}
Html-kode af forside <!doctype html> <html class=”no-js” lang=”en”> <head> <meta charset=”utf-8” /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0” /> <title>Mai Jessen | Forside</title> <link rel=”stylesheet” href=”css/foundation.css” /> <link rel=”stylesheet” href=”css/style.css” /> <script src=”js/vendor/modernizr.js”></script> </head> <body> <header class=”row show-for-large-up”> <div class=”medium-5 columns”> <a href=”index.html”><img src=”img/maijessen_underskrift.png” width=”150px”></a> <h1>- 23 93 12 28</h1> </div> <div class=”medium-7 columns”> <ul class=”inline-list right”> <li><a href=”index.html”>Forside</a></li> <li><a href=”om-mai.html”>Om Mai</a></li> <li><a href=”cv.html”>Curriculum Vitae</a></li> <li><a href=”artikler.html”>Produktioner</a></li> <li><a href=”kontakt.html”>Kontakt</a></li> </ul> </div> </header> <div class=”show-for-medium-down off-canvas-wrap”> <div class=”inner-wrap”> <nav class=”tab-bar”> <section class=”left-small”> <a class=”left-off-canvas-toggle menu-icon” href=”#off-canvas-navigation” ><span></ span></a> </section>
<li><a href=”artikler.html”>Produktioner</a></li> <li><a href=”kontakt.html”>Kontakt</a></li> </ul> </aside> <aside class=”right-off-canvas-menu”> <ul class=”off-canvas-list”> <li><label>Users</label></li> <li><a href=”#”>Hari Seldon</a></li> ... </ul> </aside> <section class=”main-section”> <div class=”row content-wrapper home-box”> <div class=”large-5 medium-7 columns intro-text”> <h1>Velkommen til. Bare lad som om, du er hjemme</h1> <p>Jeg har ventet på dig. Glædet mig rigtig meget til, at du kom. Og nu er det endelig ved at være på tide, at vi skal være sammen. Jeg skal nok sørge for, at vi får det rigtig godt.</p> <p>Det er nemlig noget, jeg altid har været ret vild med. Om det er mine kilder eller egentlig bare mine venner, så er jeg mest tilpas, når de også er. Jeg vil gerne udfordre, undre, fascinere, underholde, bidrage, arbejde, knokle, kæmpe, juble, vinde, give og ikke mindst imponere. Det håber jeg meget på, at du kan hjælpe mig med at få opfyldt ved at give mig en plads den 24. april. Vi ses!</p> <img class=”right” src=”img/maijessen_underskrift.png”> </div> <div class=”large-7 medium-5 columns”> <img class=”round-image left-image show-for-large-up” src=”img/Mai_1.jpg”> <img class=”round-image right-image” src=”img/Mai_2.jpg”> </div> </div> </section>
Anna Skak • Mediegrafiker
<a class=”exit-off-canvas”></a> <section class=”right tab-bar-section”> <a href=”index.html”><img src=”img/maijessen_underskrift.png” width=”120px”></a> <h1>- 23 93 12 28</h1> <!--<h1 class=”title”>Mai Jessen</h1>--> </section> </nav> <aside class=”left-off-canvas-menu”> <ul class=”off-canvas-list”> <li><label>Menu</label></li> <li><a href=”index.html”>Forside</a></li> <li><a href=”om-mai.html”>Om Mai</a></li> <li><a href=”cv.html”>Curriculum Vitae</a></li>
</div> </div> <div class=”row content-wrapper home-box show-for-large-up”> <div class=”large-5 medium-7 columns intro-text”> <h1>Velkommen til. Bare lad som om, du er hjemme</h1> <p>Jeg har ventet på dig. Glædet mig rigtig meget til, at du kom. Og nu er det endelig ved at være på tide, at vi skal være sammen. Jeg skal nok sørge for, at vi får det rigtig godt.</p> <p>Det er nemlig noget, jeg altid har været ret vild med. Om det er mine kilder eller egentlig bare mine venner, så er jeg mest tilpas, når de også er. Jeg vil gerne udfordre, undre, fascinere, underholde, bidrage, arbejde, knokle, kæmpe, juble, vinde,
Html-kode af forside fortsat give og ikke mindst imponere. Det håber jeg meget på, at du kan hjælpe mig med at få opfyldt ved at give mig en plads den 24. april. Vi ses!</p> <img class=”right” src=”img/maijessen_underskrift.png”> </div> <div class=”large-7 medium-5 columns”> <img class=”round-image left-image show-for-large-up” src=”img/Mai_1.jpg”> <img class=”round-image right-image” src=”img/Mai_2.jpg”> </div> <script src=”js/vendor/jquery.js”></script> <script src=”js/foundation.min.js”></script> <script src=”js/foundation/foundation.offcanvas.js”></script> <script> $(document).foundation(); </script> </body> </html>
Grafisk workflow • side 10/10