Grafisk Workflow Personligt website

Transkript

1 Grafisk Workflow Personligt website Andreas Ernst Tørnqvist

2 Grafisk Workflow Redegørelse Opgaven Opgaven er en personlig hjemmeside lavet i min fritid. Siden skal bruges som en reklamesøjle for potientelle kunder, elevpladser eller blot grafisk interes serede. 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. Arbejdsproces 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 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. Andet Hjemmesidens indhold er sidenhen blevet opdateret, hvilket bevirker at den ikke passer med denne portfolios indhold. Derfor har jeg oprettet en kopi af siden, som den så ud da jeg skrev dette. Link til hjemmeside: Alternativ version: Portfolio for H1 Andreas Ernst Tørnqvist 2

3 Flowchart Portfolio for H1 Andreas Ernst Tørnqvist 3

4 Skelet Struktur 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. Index About : 225x180 * : 335x180 * sorthvid_web_small.png 218x190 Margin-bottom: 20 Margin-left: 20 Portfolio Faste mål.image_template: 135x135 : 160x116 : 600, margin-top: 20, padding: 10 : 620x141 Banner Margin-top: 20 Margin-bottom: 10 billedbehandling.png Margin-top: 0 grafiskdesign.png typografi.png Banner_bg: 930x380 (Repeat-x) Banner.png: 960x600 block_print. jpg: 137x137.image template Alle billeder bruger.image_template vektor.png workflow.png : Footer Footer: 580x50 - Margin-top: 20, Padding: 20 Footer links: 32x32 block_ps.jpg: 137x137 block_ logo.jpg: 137x137.image template.image template block_ vector.jpg: 137x137.image template Adobe.png: 590x383 Margin-bottom: 20 Margin-top: 20 : web_skill.png: 429x429 Margin-bottom: 40 Margin-top: 10 Margin-left: 85.5 coming-soon.png 308x299 Margin-bottom: 20 Margin-left: 146 #showcase_placeholder: 620 (fleksibel højde) Padding-top/bottom: 30 #div: 560 (fleksibel højde) Portfolio for H1 Andreas Ernst Tørnqvist 4

5 Storyboard Navigation Generel navigation Imagemap koordinater ,290, ,544,381,525,411,496,422,480,461,489,444, 531,425,554,411,574,397,584,396,545,347, ,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 tel: Billede-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 Kategorier 6. block_print.jpg 6. block_logo.jpg 6. block_vektor.jpg 6. block_ps.jpg 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) Portfolio for H1 Andreas Ernst Tørnqvist 5

6 Storyboard Anbefalinger 9. Skatepro.png 9. olefly.png 9. ihg.png 9. jp.png 9. fkn.png 9. giv.png Skills 10. adobe.png 10. web_skill.png Portfolio 11. billedbehandling.png 11. grafiskdesign.png 11.typografi.png 11. vektor.png 11. workflow.png Andre billeder 12. cv.png 13. sorthvid_web_small.png 14. coming-soon.png TEXT About me Downloads Download my CV TEXT Recomendations TEXT 9 Technical skills Adobe creative suite 5.5 TEXT Main year portfolio Web Coding Downloads Download my CV 10 Recomendations Will be completed in August 2013 Portfolio for H1 Andreas Ernst Tørnqvist 6

7 Storyboard CSS: Layout CSS: Typografi CSS: Orangebox 3.0 Body background-color: #eee; 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: ; 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; #footer 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; 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; a text-decoration:none; margin:0;padding:0; a:link color:#aca07c; a:visited color:#aca07c; a:hover color:#9b662f; a:active color:#1f1e1d; p 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; h1 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; h2 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; h3 font-family: Domine, serif; font-size: 0.7em; font-weight: 700; color: #1F1E1D; padding:0 0.2em 0; margin:0; text-align:center; #ob_overlay background-color:#333; height:100%; left:0; position:fixed; top:0; width:100%; z-index:1000; #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 -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: ; padding:5; -webkit-box-shadow: #222222; -moz-box-shadow: z-index:1002; #ob_title color:#fff; left:auto; position:absolute; margin-left:15; right:0; text-align:right; z-index:1004; line-height:1em; cursor:auto; #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; Portfolio for H1 Andreas Ernst Tørnqvist 7

8 HTML highlights Scripts and plugins Template 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 &appid= ;fjs.parentnode. insertbefore(js, fjs);}(document, script, facebook-jssdk )); </script> Synes-godt-om-boksen <div class= textfield > <h2>show your appreciation<hr style= width:60%; /></h2> <div class= fb-like data-href= 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= donernst.dk data-width= 600 data-numposts= 3 ></div></div> Orangebox 3.0 <link rel= stylesheet href= orangebox/css/ orangebox.css type= text/css /> <script type= text/javascript src= code.jquery.com/jquery-latest.min.js ></ script> <script type= text/javascript src= orangebox/js/orangebox.min.js > </script> 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> Og så videre XHTML <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN w3.org/tr/xhtml1/dtd/xhtml1-transitional. dtd > 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= family=domine:400,700 Open+Sans:400it alic,400,600 rel= stylesheet type= text/ css /> Footer <div id= footer > <h3>all content of this site belongs to Andreas Ernst Tørnqvist</h3> <h3> 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= target= _ blank ><img src= img/elements/icons/ facebook.png width= 32 height= 32 alt= Facebook page /></a><a href= target= _ blank ><img target= _blank src= img/ Elements/icons/linkedin.png width= 32 height= 32 alt= My linkedin profile /></ a><a href= 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= /></a><a href= tel: ><img src= img/elements/icons/images/call.png alt= Call me: width= 32 height= 32 /></a></div> Portfolio for H1 Andreas Ernst Tørnqvist 8

9 HTML highlights: Template <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" 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, donernst" /> <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=" 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=" <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=" 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> 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=" target=" _ blank"> <img src="../img/elements/icons/facebook.png" width="32" height="32" alt="facebook page" /></a> <a href=" target=" _ blank"> <img target=" _ blank" src="../img/elements/icons/linkedin.png" width="32" height="32" alt="my linkedin profile" /></a> <a href=" 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=" " /></a> <a href="tel: "> <img src="../img/elements/icons/images/call.png" alt="call me: " width="32" height="32" /> </a> </div> </div> </div> </body> </html> Portfolio for H1 Andreas Ernst Tørnqvist 9