Grafisk Workflow & produktion REDESIGN AF HJEMMESIDE

Transkript

1 Grafisk Workflow & produktion REDESIGN AF HJEMMESIDE

2 redegørelse Hvad går opgaven ud på Inhouse Graphic (IHG), skulle have rede signet hjemmesiden. Hjemmesidens struktur under samme ombæring kigges på og virksomhedssamt skolepraktik delen skulle plittes op i hver sin sektion. Afsender Inhouse Graphic Hvad har været mit bidrag til projektet? Jeg har stået for projektet alene, men dog med hjælp fra IHG. Hjælpen har hoved sageligt været sparring og hjælp til delopgaver, da jeg ellers ikke ville kunne det deadline. Komposition og Layout Jeg ville gøre sitet nemt at finde rundt i, og skabe en klar difference mellem de to sektioner. IHG havde i forvejen to hoved farver, neon-grøn og mørke-blå. Jeg kiggede herefter på de to farvers komplimentærfarver, med kuler-værktøjet i Photoshop. Valget faldt den blås modsætning; lilla, fordi man i vesten forbinder denne farve med især kreativitet. Det blev klarlagt tidligt, at sitet ville blive tekstung. Derfor var det også vigtigt, at vi fandt en god, læsbar typografi. Brugervenlighed Det var en selvfølge, at sitet skulle være responsivt. Der blev tilført en Til-Tops-Knap, som brugeren let kan trykke på, for at returnere til topmenuen. Hele blev designet som en lineær førstegangsoplevelse, som samtidig fungerer som et returnérbart site. Browserkompabiltet Igennem hele kodningsprocessen blev hjemme siden tjekket flere gange dagligt, i alle de større browsere. 2

3 proces Briefing: Opgaven forklares Problemformulering udformes i samarbejde med Phillip Generelle Spørgsmål afklares. Tegnebrættet: Sitets generelle layout bliver tegnet op. Kodningsfase: Den digitale skitse bliver interaktiv. Rettelser: Siden bliver kigget igennem Alle mand fra IHG inddrages fejl bliver udpeget og rettet. Rettelser og test: Brugertesten afslører optimeringer Fejl og mangler bliver nu rettet til Alle former for links testes Alle browsere testes. Idéudvikling: Muligheder udforskes Ideer skabes Problemformulering revuderes med nye ideer til sitet, såsom to forskellige sektioner. Design fase: Ideerne fra papiret bliver digitale Sidens layout kommer til live med Photoshop. Responsiv kodningsfase: Siden bliver nu responsiv Siden bliver kompatibel med telefoner og tablets. Brugertest: Der bliver oprettet et spørgeskema Ca 30 personer fra Aarhus TECH bliver inddraget i en brugertest Både elever og lærere med og uden forstand på webdesign. Test & Launch: Sitet går officielt i luften. 3

4 idéudvikling Flowchart: Inspiration: Behance var en stor inspirationskilde Herudover brugte jeg også patterntap, som nævnbar kilde. Skitser: Skitserede først alle siderne på papir Herefter printede jeg mockups af laptops og forskelige telefon modeller. Index.html pages/skp/ skp.html pages/ihg/ ihg.html pages/skp/ pages/skp/ pages/skp/ pages/ihg/ pages/ihg/ pages/ihg/ team.html elevinfo.html kontakt.html portfolio.html arbejdsprocess.html kontakt.html Lightbox Ekst. links Send Lightbox Send Ekst. link Send Ekst. link 4

5 idéudvikling Mockups i Photoshop Desktop Photoshop Mockup: Mobile Mockup: Lightbox Mockup: Case presentation: Mockup til portfolio-presentation i Galleriet. 5

6 æstetik Fontvalg Hpkxm Hpkxm Rubrikker Da genkendelighed gerne skulle sikres, valgte vi at anvende PT Sans Caption, da den mindede mest om den først tiltænkte font, Baron Neue, som anvendes i resten af IHGs materiale. Brødtekst Akzidenz Grotesk bliver normalt anvendt til trykt materiale, men da dette desværre ikke er en webfont, måtte Roboto gå an. Det vigtigste er trods alt læsbarheden, hos en brødtekst. PT Sans Caption: The Quick Brown Fox (Bold, versaler): THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG Roboto: The quick brown fox (regular) The quick brown fox jumped over the lazy dog Font-styling: p { font-family: Roboto, sans-serif; font-size:1.6rem; line-height:150%; font-weight:400; h1,h2,h3,h4.h5.h6 { font-family: PT Sans Caption ; texttransform:uppercase; font-weight:700; Implementering: Nedenstående kode blev indsat øverst i CSSen Google indlæser nu fontene inden brugeren læser url( url( amily=pt+sans+caption:700); Font-størrelses omregning: Font-size defineres til 62.5%, i HTML-tagget Her starter nedarvningen Herefter defineres body-taggets fonts-size til at være 1.6 rem Em/Rems standardværdi er 16 px 62.5% af 16 svarer til 10, derfor kan vi nu regne i 10 ere, nu svarer 1.6em til 16px. html { font-size:62.5%; body { width:100%; background:#eee; font-size:1.6em; line-height:1; 6

7 indblik i det tekniske workflow Variabel ex til farver: $ihg: rgba(189,207,0,1); $skp: rgba(143,17,216,1); Mixin ex i transition($transition) { -webkit-transition: $transition; -moz-transition: $transition; -o-transition:$transition; transition: $transition; Resultat efter CSS Compiling: Synthetically Awesome Stylesheets I mit workflow har jeg oprettet nogle såkaldte _ partial -filer, som på næsten alle måder opfører sig som et almindeligt SASS-dokument, dog med en enkelt forskel; Disse filer kræver ikke HTTPrequests, for at blive hentet ind i et css dokumentet, da SASS importerer dem selv. Dette er godt, da det at holde styr på CSSen i større projekter, ofte kan være en udfordring. På denne måde kan jeg seperere mine dokumenter, i mit arbejdsworkflow, men stadig holde det enkelt og samlet når det skal sendes ud på nettet. Variabler SASS kan anvendes til ret kompliserede ting, men fungerer også helt fint til små ting, såsom variabler. Sitets farver er pre defineret i brugernavngivne variabler, som jeg til enhver tid kan bruge i mit workflow. Mixins Mixins kan fx anvendes som en slags skabelon for indstil linger til elementer som ofte bliver anvendt på sitet. Der er jo ingen grund til, at skrive det samme igen igen, som ved vendor prefixes. Her har jeg lavet specifikke skabeloner til forskellige indstillinger: Simple Grid Siden er bygget i forskellige moduler med Simple Grid, et CSS-Grid framework på 1140 px fordelt på 12 kol lonner. Sådan ser en typisk opbygning ud: Opbygning Første boks grid-div, grundliggende fungerer som en container. Herefter kan der indsættes en padding-boks udover, hvis noget skal fremhæves. Herefter indsættes antal ønskede kolloner, hvis bredde er udregnet i procent: Grid opsættelse i CSS: grid { width: 100%; max-width: 1140px; min-width: 75; margin: 0 auto; overflow: hidden;.grid:after { content: ; display: table; clear: both; grid-pad { padding-top: 2rem; padding-bottom:2rem; padding-left: 2rem; padding-right: 0; Grid opbygning i HTML: [class*= col- ] { float: left; padding-right: 4rem;.col-1-1 { width: 100%;.col-1-2,.col-6-12 { width: 50%;.col-1-4,.col-3-12 { width: 25%; jquery Jeg har på sitet kodet enkelte scripts selv, såsom gå-til-top-knappen. Når du scroller et bestemt antal pixel vertikalt-nedad, vil knappen poppe op, som en lille hjælper. Definér hvornår den skal vises: $(window).scroll(function(){ if ($(this).scrolltop() > 1150) { $( #scroll_btn_skp, #scroll_btn_ihg ).fadein(); else { $( #scroll_btn_skp, #scroll_btn_ihg ).fadeout(); ); Knappen gøres herefter klikbar: $( #scroll_btn_skp, #scroll_btn_ihg ).click(function(){ ); $( html, body ).animate({scrolltop : 0,800); return false;.element { transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; <div class="grid grid-pad"> <div class="col-1-2"> <div class="content"> <h3>col-1-2</h3> </div> </div> </div> 7

8 indblik i css en 1 01 (Navigation): width: 100%; 02 (Bannersektion): max-width: 100%; 03 (Lead): padding:40px+2.5% (of 04 (Main):.col (Footer): border-top: 1px #8f11d8 solid; line-height: 1; W/H: px; viewport); width: 50%; width:100%; Farve: #24303B outline: 1px #8f11d8 solid; max-width:1140px; float: left; background: footerbg.jpg; 2 Logo: W/H: 144x144px.Banner-overlay-wrapper: position: absolute; min-width:750px; background:#eee; padding: px; h5: margin: 0 auto; padding:70px 20px 0 0; billed-type:.svg margin: 8px auto 0 auto; article > h2 : font: /25px #333; position:relative (bottom: 0;); Menu: h3.text-shadow { font-size:50px; P: margin: 0 auto; font-size: 28px; line-height:135%; font: /27px #333; padding: 15px; color: white; font-weight:700; a.button-skp: text-size: 14px; text-shadow: 0px 1px 5px margin:0 0 25px 0; outline: 2px rgba(143, 17, 216, 3 4 font-weight: 700; text-transform uppercase; color: #eee; # a#ihg { margin: 25px auto 0 auto ; border:2px solid #8f11d8; H/W: 50x250px; box-shadow: 0 0 5px 0 background: #8f11d8; font: px/100%;.bigTextField>p: font: normal 25px/150%; 0.5); border: 2px rgba(143, 17, 216, 0.75); box-shadow: 0 0 5px 0 #8f11d8; min-width: 25rem; height: 5rem; letter-spacing: 0.175rem; transition: all 2s ease-in-out; 5 8

9 indblik i den responsive opsætning Graceful Degradation Da jeg begyndte med sitet, startede min proces med desktopversionen. Altså Desktop først og de mobile enheder herefter. Da sitets desktop version, var klar, skulle den gøres responsiv. Jeg benyttede mig af media-queries, som jeg hvis opsætning jeg lavede i SASS. 01: Breakpoints defineres. // 80rem / 800px $break-small: em; // 128rem / 1280px $break-large: 80em; // 160rem / 1600px $break-xlarge: 100em; Breakpoints i SASS Jeg anvendte SASS til at definerer mine Media- Queries, som jeg definerede som en Mixin. På denne måde kan jeg ved at i CSSen, hurtigt og meget præcist, gøre mit site responsivt. 02: Scriptet sættes respond-to($media) $media == handhelds handheld, screen and (max-width: $break-small),(max-device-width: if $media == medium-screens only screen and (min-width:$break-small + 1 ) and (max-width: if $media == wide-screens only screen and (min-width: $break-xlarge + 1) 03: Breakpoints indsættes i CSS. // regulær css fra siden // #logo respond-to(handhelds) { margin:0 auto; 9

10 optimering Klargøring af grafik Alle grafiske elementer gennemgik en klargøringsproces, i enten Photo shop eller illu strator, afhængigt af grafik-type. Al raster grafik skulle en tur igennem Photoshops "Save for Web and devices", for at fjerne unødvendige kilobits. Vektor processen foregik ved, at gemme som SVG-fil, i Illustrator (Se screenshot for indstillinger). Loading tider Jeg har fra start haft sitets indlæsning højt prioriteret, og dette er der blevet taget hensyn til på flere områder. Jeg sørget for at samle mest mulig ekstern kode i samlede filer. I min HTML struktur har jeg adskilt CSS og JavaScript/jQuery filer, for at undgå flaskehalse når der siderne skal indlæses. Jeg har sørget for at anvende både raster- og vektorgrafik, med et stort rasterbillede pr. side. Sidst men ikke mindst, sørgede jeg for at minify alle eksterne JS- og CSS-filer. <head> <!-- Her indsætter jeg CSS --> <link rel="shortcut icon" type="image/x-icon" href=" <link rel="stylesheet" href="../../css/main.css"> </head> <body> <!-- Content /--> <script type="text/javascript" src="../../js/plugins.js"></script> </body> 10

11 optimering forsat Crossbrowser kompabilitet Der blev fra start anvendt Normalize.css, for at fjerne browserens egne settings. Herefter måtte jeg tilpasse css med browser prefixes, for at sikre et ens udtryk, browsere imellem. For at undgå repetition i workflowet, lavede jeg en prefix-mixin i SASS, som der kan ses et eksempel på, til venstre. Jeg sørgede for at anvende Rem værdier, fremfor pixel. Svagtseende brugere afhjælpes nu bedre, hvis f.eks. der skal zoomes ind på indholdet. SEO HTML-kodningen er foregået i HTML5, i en semantisk struktur, så browsere lettere kan forstå sitets opbygning. Der er i Head sektionen oprettet forskellige meta-tags, som har til formål, at give google informationer, som vi gerne ser havner i dens søgemaskine. I body-sektionen har jeg gjort plads til Google Analytics, men komenteret koden ud, da denne først skulle bruges efter launch. Jeg nåede dog ikke at implementerer det. Jeg har til sidst også gjort det nemmere for google at kortlægge siden, da hjemmesidens struktur er uploaded til roden af serveren, i en tekst fil. Doctype-fix: Til Internet Explorer version 8 og nedad. <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="da"> <!--<![endif]--> Meta Tags <head> <meta charset="utf-8"> <meta name="keywords" content="aarhus TECH, IHG, Inhouse Graphic, SKP, Skolepraktik"> <meta name="author" content="inhouse Graphic"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=0"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ihg / Inhouse Graphic - Skolepraktikanterne</title> </head> 11

12 kvalitets vurdering Mange op og nedturer igennem processen Dette er det hidtil største projekt jeg har været igennem, og helt sikkert også den hidtil mest udfordrende, både på det personlige plan, i form af sund træning af overblikket og samtidig at kunne dykke i detaljen. Det var sgu svært at skifte imellem de to stadier. I slutningen af processen, skulle jeg stå for et photoshoot med IHG. Vi skulle have opdateret vores portrætbilleder, og der skulle tages billeder af bemandingen i forskellige situationer, som skulle bruges til banner-billeder. Flere medarbejder afhang pludselig afhang af mit overblik, og det havde da også sine komplikationer, men endte dog med at gå rigtig fint. Hvad kunne gøres anderledes? Jeg ville gerne, set i bakspejlet, have brugt mere tid på, at arbejde mere struktureret, med f.eks. afkrydsningslister, måske have brugt Phillip noget mere til sparring og hjælp til overblik. Final thoughts Jeg er stolt af, at have sat mit spor på Aarhus Tech og hos IHG, hvilket forhåbenligt er til det bedre. Alt i alt en stor opgave, som jeg fik meget ud af at prøve kræfter med. 12