GRAFISK WORKFLOW Personligt website
Andreas Ernst Tørnqvist
Grafisk Workflow
Redegørelse
Opgaven
Arbejdsproces
Opgaven er en personlig hjemmeside lavet i min fritid. Siden skal bruges som en reklamesøjle for potientelle kunder, elevpladser eller blot grafisk interesserede.
Sådan foregik arbejdsprocessen til min hjemmeside: »» Inspirationssøgning til idé »» Skitsering af idé »» Udarbejdelse af flowchart »» Mockups i Photoshop »» Udarbejdelse af skelet »» Udarbejdelse af storyboard »» Slicing af endeligt layout i Photoshop »» Billedoptimering til Web (Save for Web and Device) »» HTML kodning af index side i Dreamweaver »» CSS udarbejdelse i Dreamweaver »» SEO optimering (Metatags, description og keywords) »» Template opsættelse til yderligere sider og herefter resten af siderne opsat »» Crossbrowser testning (FF, IE og Chrome) »» Upload til webhotel »» Test af diverse links
Personlige krav Mit formål med siden er at give de besøgende et billede af, hvem jeg er. Derfor skal nedenstående gerne være på plads efter et besøg på siden: »» At jeg er mediegrafiker-studerende »» Vide hvem jeg er og hvor jeg er fra »» Se det arbejde jeg har lavet samt danne sig et (positivt) indtryk af min stil. »» Have set mine uploads (Portfolio, anbefalinger og CV) »» Vide præcist hvor mine kontaktoplysninger foreligger og kunne huske min webadresse.
Layout Sitet er designet med inspiration fra den nye Windows 8’s flade design trend - dog med mine egne forbehold. Jeg har anvendt Google Web Fonts, fordi det giver mig ret stor kreativ frihed, da disse er serverside fonts og dermed websafe. Farverne er alle holdt i en lys cremenuance, som spiller godt med hinanden og samtidig har gode kontraster.
Usability Det vigtigste element ved mit sitet er navigationen. At kunne navigere ubesværet rundt er alfa og omega for besøgendes tilbagevenden og grundlaget for et godt site. Jeg har sørget for, at alle vigtige informationer kan findes i footeren på alle siderne. Designet er flat og enkelt og med klare rammer for nye afsnit eller andet. Ønsker man at se mine mange projekter igennem, kan man gøre det hele på den samme side - uden at skulle gå frem og tilbage.
Browserkompabilitet Hjemmesiden er testet i Firefox, Internet Explorer 9+, Google Chrome og Opera. De er dog kun testet med PC.
Portfolio for H1
Kvalitetsvurdering Generelt er jeg tilfreds med mit site. Jeg har dog nogle enkelte rettelser, jeg ønsker at se på, når jeg har tiden til det. Jeg vil gerne implementere en slider på forsiden, som kommer til at erstatte min nuværende velkomsttekst. Denne vil indeholde de seneste opgaver, jeg har uploadet. Herudover ønsker jeg at implementere muligheden for at kunne gå frem og tilbage uden at gå ud af min lightbox. Sitet skal gøres lige godt dobbelt så bredt, så elementer kan stå 2 og 2 ved siden af hinanden. Dette vil jeg gerne, da jeg så kan undgå alt for meget scroll for at komme til bunds. Min SEO skal kigges igennem og rettes til. Til sidst skal sitet gøres responsivt, så det vil fungere til alle slags platforme. Sitet er langt fra færdig - det er en konstant proces, hvori jeg videreudvikler så snart nye kompetencer læres.
Andreas Ernst Tørnqvist
2
Grafisk workflow Flowchart
Portfolio for H1
Andreas Ernst Tørnqvist
3
Grafisk workflow Skelet
INDEX
Struktur
ABOUT .textfield: 225x180 *
»» »» »» »»
Body: Bredde og højde er begge fleksible. Wrapper: Bredden er 960 med en fleksibel højde. Navigation: Denne foregår via Imagemap. Tekstboksene: Disse er alle med variabel højde, da indhold selvfølgelig variere. »» Alle mål er i pixels.
PORTFOLIO
.textfield: 335x180
.headline
* sorthvid_web_small.png 218x190 Margin-bottom: 20 Margin-left: 20
.textfield
Faste mål »» »» »» »»
.image_template: 135x135 .image_template_portfolio: 160x116 .textfield: 600, margin-top: 20, padding: 10 .headline: 620x141
.textfield
.headline Margin-top: 20 Margin-bottom: 10
BANNER block_print. jpg: 137x137
Banner_bg: 930x380 (Repeat-x)
.textfield Margin-top: 0
.textfield
billedbehandling.png .image_template_portfolio
grafiskdesign.png .image_template_portfolio
typografi.png .image_template_portfolio
vektor.png .image_template_portfolio
workflow.png .image_template_portfolio
.textfield
.headline .image template Alle billeder bruger .image_template
Banner.png: 960x600 .textfield: .headline
FOOTER block_ logo.jpg: 137x137
Footer: 580x50 - Margin-top: 20, Padding: 20 Footer links: 32x32
.image template
block_ vector.jpg: 137x137
block_ps.jpg: 137x137
Adobe.png: 590x383 Margin-bottom: 20 Margin-top: 20 .image template
.textfield: web_skill.png: 429x429 Margin-bottom: 40 Margin-top: 10 Margin-left: 85.5
.image template
coming-soon.png 308x299 Margin-bottom: 20 Margin-left: 146
.textfield #showcase_placeholder: 620 (fleksibel højde) Padding-top/bottom: 30 #div: 560 (fleksibel højde)
Portfolio for H1
Andreas Ernst Tørnqvist
.textfield
.textfield
4
Grafisk workflow Storyboard
NAVIGATION Generel navigation
Kategorier
1. http://www.donernst.dk/index.html 2. http://www.donernst.dk/about.html 3. http://www.donernst.dk/portfolio.html
6. block_print.jpg 6. block_logo.jpg 6. block_vektor.jpg 6. block_ps.jpg
Imagemap koordinater 1. 477,290,202 2. 346,544,381,525,411,496,422,480,461,489,444, 531,425,554,411,574,397,584,396,545,347,544 3. 490,478,506,522,534,561,561,589,562,546,608, 546,573,524,546,496,527,469,513,473w
Figur: 1. Cirkel 2. Poly 3. Poly
Footer links 4. http://www.donernst.dk/da/ 4. http://www.donernst.dk 4. http://www.facebook.com/ernst2k 4. http://www.linkedin.com/in/ernst2k 4. http://www.andreasernst.pinterest.com 4. mailto:kontakt@donernst.dk 4. tel:26247322
BILLED LINKS Sitets billeder 1. banner.png 5. bg_banner.png 4. da.png 4. en.png 4. facebook.png 4. linkedin.png 4. pinterest.png 4. mail.png 4. call.png 8. headline.png
Portfolio for H1
5
1
Showcase (Thumbnails og fulde billede) 7. thump_ssc_.jpg (ssc.jpg) 7. thump_teater.jpg (teater.jpg) 7. thump_25_jubi_Thump.jpg (25_jubi.jpg) 7. thump_DD1.jpg (DD1.jpg) 7. thump_DD2.jpg (DD2.jpg) 7. thump_DD3.jpg (DD3.jpg) 7. thump_tina_dickow.jpg (tina_dickow.jpg) 7. thump_jule_plakat.jpg (jule_plakat.jpg) 7. thump_sko_reklame.jpg (sko_reklame.jpg) 7. thump_jazz_reklame.jpg (jazz_reklame.jpg) 7. thump_folder_berlin_1.jpg (folder_berlin_1.jpg) 7. thump_folder_berlin_2.jpg (folder_berlin_2.jpg) 7. thump_eksamen_logo.jpg (eksamen_logo.jpg) 7. thump_ernst_logo.jpg (ernst_logo.jpg) 7. thump_sportslege_logo_1.jpg (sportslege_logo_1.jpg) 7. thump_sportslege_logo.jpg (sportslege_logo.jpg) 7. thump_skib_vektor.jpg (skib_vektor.jpg) 7. thump_thors_hammer.jpg (thors_hammer.jpg) 7. thump_ernst_vektor.jpg (ernst_vektor.jpg) 7. thump_anja_julegave.jpg (anja_julegave.jpg) 7. thump_GG.jpg (GG.jpg) 7. thump_ernst_pirat.jpg (ernst_pirat.jpg) 7. thump_optimization_1.jpg (optimization_1.jpg) 7. thump_optimization_2.jpg (optimization_2.jpg) 7. thump_some_doors.jpg (some_doors.jpg) 7. thump_ernst_stars.jpg (ernst_stars.jpg) 7. thump_futurism.jpg (futurism.jpg) 7. thump_earth.jpg (earth.jpg)
1
2
3
6 7 6 6
6
4
Andreas Ernst Tørnqvist
5
Grafisk workflow Storyboard
Anbefalinger
Skills
Portfolio
Andre billeder
9. Skatepro.png 9. olefly.png 9. ihg.png 9. jp.png 9. fkn.png 9. giv.png
10. adobe.png 10. web_skill.png
11. billedbehandling.png 11. grafiskdesign.png 11.typografi.png 11. vektor.png 11. workflow.png
12. cv.png 13. sorthvid_web_small.png 14. coming-soon.png
T X E me About T X 13Downloads TE12
T
Download my CV
Recomendations
T X TE 9
Technical skills Adobe creative suite 5.5
11
T X TE 10 Downloads Web Coding
Main year portfolio
14
Download my CV
Recomendations
Will be completed in August 2013
Portfolio for H1
Andreas Ernst Tørnqvist
6
Grafisk workflow Storyboard
CSS: LAYOUT
CSS: TYPOGRAFI
CSS: ORANGEBOX 3.0
Body
#footer
p
#ob_overlay
#ob_title
background-color: #eee;
width: 580; height:50; background-color:#D8D5CF; padding:20; display:block; clear:both; margin-top: 1.1em; margin-right: auto; margin-bottom: 0; margin-left: auto;
text-align:left; letter-spacing:.05em; padding:0 0 .8em 0; margin:0; font-family: ‘Open Sans’, sans-serif; font-size: 1.3em; line-height: 1.438em; font-weight: 400; color: #1F1E1D; display:block; word-wrap:break-word;
background-color:#333; height:100%; left:0; position:fixed; top:0; width:100%; z-index:1000;
color:#fff; left:auto; position:absolute; margin-left:15; right:0; text-align:right; z-index:1004; line-height:1em; cursor:auto;
.textfield width:600; background-color: #D8D5CF; padding:10; margin: 1.1em auto 0 auto
.Showcase_placeholder width:620; height:100%; background-color: #D8D5CF; color:#D8D5CF; margin:0 auto; padding:30 0 30 0;
.headline padding:0; margin:0 auto; height:141; width:620; background-image: url(img/images/ headline.png); background-repeat: no-repeat;
.image_template padding:0; margin:0 auto; border: 1 solid #ACA08C; width:135; height:135; opacity:0.45; filter:alpha(opacity=45); -ms-transition: all .6s ease; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -0-transition: all .6s ease;
Portfolio for H1
Hover effekter opacity:0.60; filter:alpha(opacity=60); -ms-transition: all .6s ease; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -0-transition: all .6s ease;
h1
text-decoration:none; margin:0;padding:0;
text-align: center; font-family: Domine, serif; font-size: 4em; line-height: 1em; font-weight: 700; color: #5A564D; margin:0; padding:0.5em 0 0.5em 0; clear:both;
a:link
h2
color:#ACA07C;
font-family: Domine, serif; font-size: 1.7em; font-weight: 700; color: #5A564D; padding:0 0 .4em 0; margin:0; text-align:center; line-height: 1.1em;
a
a:visited color:#ACA07C;
a:hover color:#9B662F;
a:active color:#1F1E1D;
#ob_content clear:both; cursor:default; position:relative; margin:22 auto 44; background-color:#fff; border:0 solid #fff; line-height:0; display:none; z-index:1003;
#ob_load
#ob_caption font-family: „Libre Baskerville“, serif; font-size: 1em; line-height: 1.5em; font-weight: 500; color: #191610; display:block; margin: 0; padding: 10;
-moz-border-radius:5; background:url(loading.gif) no-repeat center; background-color:#fff; border-radius:5; height:40; left:50%;position:fixed; top:50%;width:40; margin:-25 0 0 -25; padding:5; -webkit-box-shadow: 0 0 8 2 #222222; -moz-box-shadow: 0 0 8 2 z-index:1002;
h3 font-family: Domine, serif; font-size: 0.7em; font-weight: 700; color: #1F1E1D; padding:0 0 .2em 0; margin:0; text-align:center;
Andreas Ernst Tørnqvist
7
Grafisk workflow
HTML highlights
SCRIPTS AND PLUGINS
TEMPLATE
Facebook plugin
Orangebox 3.0
XHTML
Footer
<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 &appId=324266047589313“;fjs.parentNode. insertBefore(js, fjs);}(document, ‘script’, ‘facebook-jssdk’)); </script>
<link rel=“stylesheet“ href=“orangebox/css/ orangebox.css“ type=“text/css“ /> <script type=“text/javascript“ src=“http:// code.jquery.com/jquery-latest.min.js“></ script> <script type=“text/javascript“ src=“orangebox/js/orangebox.min.js“> </script>
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd“>
<div id=“footer“> <h3>All content of this site belongs to Andreas Ernst Tørnqvist</h3> <h3>&copy; All rights reserved 2013</h3><hr style=“margin:0.5em auto 0.5em auto;“ /> <div style=“width:250;margin-left:165“><a href=“da/index.html“><img src=“img/ Elements/icons/flag/da.png“ width=“32“ height=“32“ alt=“danish language“ /></a><a href=“index.html“><img src=“img/Elements/ icons/flag/en.png“ width=“32“ height=“32“ alt=“English language“ /></a><a href=“http:// www.facebook.com/ernst2k“ target=“_ blank“><img src=“img/Elements/icons/ facebook.png“ width=“32“ height=“32“ alt=“Facebook page“ /></a><a href=“http:// www.linkedin.com/in/ernst2k“ target=“_ blank“><img target=“_blank“ src=“img/ Elements/icons/linkedin.png“ width=“32“ height=“32“ alt=“My linkedIn profile“ /></ a><a href=“http://www.pinterest.com/andreasernst/“ target=“_blank“><img src=“img/ Elements/icons/pinterest.png“ width=“32“ height=“32“ alt=“My Pinterest account“ /></a><a href=“mailto:kontakt@donernst. dk“><img src=“img/Elements/icons/images/ mail.png“ width=“32“ height=“32“ alt=“email“ /></a><a href=“tel:26247322“><img src=“img/Elements/icons/images/call.png“ alt=“Call me: 2624 7322“ width=“32“ height=“32“ /></a></div>
Synes-godt-om-boksen <div class=“textfield“> <h2>Show your appreciation<hr style=“width:60%;“ /></h2> <div class=“fb-like“ data-href=“http:// www.donernst.dk“ data-send=“true“ datawidth=“800“ data-show-faces=“false“ datafont=“verdana“></div></div>
Kommentar-boksen <div class=“textfield“> <h2>Give me your feedback<hr style=“width:60%;“/></h2> <div class=“fb-comments“ data-href=“http:// donernst.dk“ data-width=“600“ data-numposts=“3“></div></div>
Eksempel <!--Kategori billedet loades --> <img src=“../img/Elements/images/block_ print.jpg“ alt=“Print design“ height=“137“ width=“137“> <!-- Selve lightboxen loades--> <a href=“../img/showcase/ssc.jpg“ data-ob_ width=“596“ data-ob_height=“842“ rel=“lightbox“ data-ob=“lightbox“ data-ob_ caption=“Flyer made for a international skate event, held in Copenhagen. I made this at SkatePro, where i am currently working, and is going to be handed out in some European countries.“ data-ob_share=“false“> <!-- Thumbnail indsættes --> <img src=“../img/showcase/thumps/ thump_ssc_.jpg“ alt=“Billedbehandling“ class=“image_template“/></a>
Meta tags <meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /> <meta name=“keywords“ content=“graphic, grafik, graphic design, grafisk design, Andreas Ernst Tørnqvist, Andreas, Ernst, Tørnqvist, Photoshop, Illustrator, Mediegrafiker, print design, flyer, poster, plakat, donernst.dk, donernst“ /> <meta name=“author“ content=“Andreas Ernst Tørnqvist“ /> <title>Andreas Ernst Tørnqvist // Personal Portfolio</title>
Eksterne scripts og stylesheets <link href=“css.css“ rel=“stylesheet“ type=“text/css“ /> <link href=“http://fonts.googleapis.com/css? family=Domine:400,700|Open+Sans:400it alic,400,600’“ rel=“stylesheet“ type=“text/ css“ />
… Og så videre
Portfolio for H1
Andreas Ernst Tørnqvist
8
Grafisk workflow
HTML highlights: Template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <!-- TemplateBeginEditable name="prime scripts" --> <!-- TemplateEndEditable --> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="graphic, grafik, graphic design, grafisk design, Andreas Ernst Tørnqvist, Andreas, Ernst, Tørnqvist, tPhotoshop, Illustrator, Mediegrafiker, print design, flyer, poster, plakat, donernst.dk, <meta name="author" content="Andreas Ernst Tørnqvist" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Andreas Ernst Tørnqvist // Personal Portfolio</title> <!-- TemplateEndEditable --> <!-- Stylesheets --> <!--Main css --> <link href="../css.css" rel="stylesheet" type="text/css" /> <!-- Google webfonts --> <link href="http://fonts.googleapis.com/css?family=Domine:400,700|Open+Sans:400italic,400,600'" rel="stylesheet" type="text/css" /> <!-- Orangebox css --> <link rel="stylesheet" href="../orangebox/css/orangebox.css" type="text/css" /> <!--// Stylesheets --> </head> <body> <!-- Global scripts--> <!-- Orangebox Lightbox script --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="../orangebox/js/orangebox.min.js"></script> <!--// Global scripts--> <div id="wrapper"> <!-- Local scripts --> <!--// Local scripts --> <!-- Hotspots in banner --> <div id="banner"> <img src="../img/images/banner.png" usemap="#mainpage" border="0" alt="banner" /> <map name="mainpage" id="mainpage"> <area shape="circle" coords="477,290,202" href="http://www.donernst.dk/index.html" alt="Mainpage" title="Back to mainpage" /> <area shape="poly" coords="490,478,506,522,534,561,561,589,562,546,608,546,573,524,546,496,527,469,513,473" href="../pages/portfolio.html" alt="Portfolio" title="Portfolio" /> <area shape="poly" coords="346,544,381,525,411,496,422,480,461,489,444,531,425,554,411,574,397,584,396,545,347,544" href="../pages/about.html" alt="About" title="About me" /> </map> </div> <!-- TemplateBeginEditable name="Workspace" --> <!-- TemplateEndEditable --> <!-- Footer --> <div id="footer"> <h3>All content of this site belongs to Andreas Ernst Tørnqvist</h3> <h3>&copy; All rights reserved 2013</h3> <hr style="margin:0.5em auto 0.5em auto;" /> <div style="width:250px;margin-left:165px"> <a href="../da/index.html"> <img src="../img/Elements/icons/flag/da.png" width="32" height="32" alt="danish language" /></a> <a href="../index.html"> <img src="../img/Elements/icons/flag/en.png" width="32" height="32" alt="English language" /></a> <a href="http://www.facebook.com/ernst2k" target=" _ blank"> <img src="../img/Elements/icons/facebook.png" width="32" height="32" alt="Facebook page" /></a> <a href="http://www.linkedin.com/in/ernst2k" target=" _ blank"> <img target=" _ blank" src="../img/Elements/icons/linkedin.png" width="32" height="32" alt="My linkedIn profile" /></a> <a href="http://www.pinterest.com/andreasernst/" target=" _ blank"> <img src="../img/Elements/icons/pinterest.png" width="32" height="32" alt="My Pinterest account" /></a> <a href="mailto:kontakt@donernst.dk"> <img src="../img/Elements/icons/images/mail.png" width="32" height="32" alt="e-mail" /></a> <a href="tel:26247322"> <img src="../img/Elements/icons/images/call.png" alt="Call me: 2624 7322" width="32" height="32" /> </a> </div> </div> </div> </body> </html>
Portfolio for H1
Andreas Ernst Tørnqvist
donernst"
/>
9