Grafik Workflow....2 Opgave Kunden Min opgave Nuværende Design...4 Overvejelser Brainstorm...6 Målgruppe Signalværdi Sitemap Nuværende sitemap...7 Kommende sitemap...7 Mockup...8 Opsætning... 10 Programmer mappestruktur Kodning.... 12 Source code Billeder.............................. 14 Størrelse Profil Kvalitets Vurdering.... 16
GRAFISK WORKFLOW
GRAFISK WORKFLOW Opgave Målet var at give Actonas online identitet et mere moderne look. Her lavede jeg et re-design forslag til en ny hjemmeside, som senere hen skulle sendes til et webbureau for at integrere det i et cms (content manage system). Kunden Actona Company er et verdens omspændende firma, som sælger møbler til møbelbranchen hele verden over. De handler kun med b2b varer, så målgruppen er ikke til slutbrugeren. Min opgave Projektet er et selvstændigt produkt som jeg selv 100% har stået for. lige fra( idégerering= idégenerering eller idé-redigering?) og skitser til layout og kodningen. Har sideløbende været i dialog med kollegaer for at kigge mig over skulderne i form af konstruktive og kreative inputs. 2 3
NUVÆRENDE DESIGN Actonas hjemmeside er meget gammeldags bygget op, da hjemmesiden kun er tilgængelig i et format. Uanset hvilken platform man vælger at se hjemmesiden på vil den altid være i samme format. Overvejelser Da den nuværende hjemmeside er fastlåst, vil den kommende hjemmeside blive opbygget i et grid. Gridet har den fordel af hjemmesiden også vil kunne fungere på ipad, som vil give sælger og indkøbere en fordel når de er ude ved kunderne. 4 5
BRAINSTORM Inden jeg begyndte på noget design, fik jeg noteret følgende punkter, efter en lille brainstorm. NUVÆRENDE SITEMAP Forside Målgruppe Sælgerne og de købende firmaer Let læselighed (ingen kringlede skrifttyper) Produkter Profil Nyheder Forhandler Leverandører Jobs Signalværdi Friskt og moderne men stadig troværdigt Den besøgende skal forstå budskabet om firmaet Sitemap Efter brainstormen, gik jeg i gang med at lave sitemaps for at skabe et overblik over hvordan hjemmesiden er bygget op som den er nu. Salg- og leveringsbetingelser Vedligeholdelse Designrights Sofaer Sovesofaer Sofaborde Spiseborde Stole Home Office Energimærkninger til lamper Produkter Velkommen STAR værdier Design og kvalitet Produktion Social ansvarlighed Levering Mød os overalt Actona gruppen Actonas historie Actona er sponsor Firmaprofil Organisation Messer Downloads Lederelsen Vejviser Salgs organisation Fra Holstebro og Herning Med fly Med skib I bil Logo service Login Login Karriere hos Actona Ledige stillinger Søg uopfordret Elever Rekrutteringsproces Tips og råd til din ansøgning Studerende Trainees Charlotte Bech Stephan S. Larson Claus T. Nielsen Marianne R. Møller Mød dine kolleger Havemøbler Øvrige Møbler Accessories KOMMENDE SITEMAP Forside Presse Produkter Profil Nyheder Login Logo service Sofaer Ipapers Sovesofaer Energimærkninger Sofaborde Spiseborde Stole Home Office Havemøbler Kontakt Om Actona Tidslinie PhotoBank Leverandør login Forhandler login Øvrige Møbler Accessories 6 7
MOCKUP Ud fra disse resultater, lavede jeg mockups af, hvordan opstillingen skulle være på hjemmesiden/forsiden, så de vigtigste elementer og ønsker kom med. SKJULT NAVIGATION VELKOMMEN screen LIDT OM FIRMAET PAYOFF CITAT PRODUKT NYHEDER LOGIN SOCIALE MEDIER FOOTER 8 9
OPSÆTNING Til opsætningen af hjemmesiden bruger jeg følgende sporg for at gøre mit workflow så nem som muligt. HTML5 CSS3 PHP Jquery Programmer Til at skrive de forskellige koder har jeg gjort brug af komodo edit, som er et gratis program. ROOT Fordele ved at jeg har brugt komodo edit, er den melder fejl samt den afslutter hvert tag jeg har skrevet. Den giver også mulighed for at gemme direkte ned på ftp-serveren. Da jeg ikke har gjort brug af en ftp-server til at starte med, har jeg sat en mamp-server op for at kunne arbejde på en localhost. mappestruktur _includes js css animate.min.css bootstrap.min.css animatescroll.js bootstrap.min.js jquery.js scripts.js footer.php front_nav.php frontpage.php login_nav.php main_nav.php photobank.php profil.php retail.php sale.php For at kunne holde det hele overskueligt har jeg delt filerne op i forskellige mapper. Hver mappe har deres egen file-speciale så man undgår at linke til den forkerte mappe. img style.php space_produkut.jpg photo_bank.jpg logo.png index.php imac_front.jpg elise_produkt.jpg alpini_produkt.jpg actona_profil.jpg actona_astro.jpg actona_amanda.jpg 10 11
KODNING Hele hjemmesiden er styret igennem index.php grunden til dette er for at gøre kodningen lettere at navigere rundt i ved hjælp af noget php kodning. Dette giver fordelen ved at jeg kan bygge siderne op ved hjælp af moduler. f.eks. hvis jeg skal have tilføjet/opdateret et link i footeren, så skal jeg kun gøre det et sted, i stedet for at skulle ind på hver side.. Source code <?php ob_start(); session_start(); if(isset($_get[ side ])){ $side=$_get[ side ]; }else{ $side= forside ; }?> <title>actona Comapny Møbler til hjertet</title> <!doctype html> <meta charset= utf-8 /> <html> <head> <!-- Google Fonts -->... </head> <body> <!-- Template Styles --> <?php switch($side){ case forside ; include( _includes/front_nav.php ); include( _includes/frontpage.php ); break; <meta content= width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no name= viewport > <link href= css/bootstrap.min.css rel= stylesheet media= screen > <link href= http://fonts.googleapis.com/css?family=source+sans+pro... rel= stylesheet type= text/css > <link href= http://fonts.googleapis.com/css?family=roboto+condensed... rel= stylesheet type= text/css > <link href= css/style.css rel= stylesheet media= screen > case profil ; include( _includes/main_nav.php ); include( _includes/profil.php ); break; case login ; include( _includes/main_nav.php ); include( _includes/login_nav.php ); include( _includes/sale.php ); include( _includes/retail.php ); include( _includes/photobank.php ); break; default; include( fejl.php ); break; }?> <?php include( _includes/footer.php )?> <script src= js/jquery.js ></script> <script src= js/bootstrap.min.js ></script> <script src= js/animatescroll.js ></script> <script src= js/scripts.js ></script> </body </html> 12 13
BILLEDER Efter hjemmesidens skelet er bygget op, skal der indsættes grafik så den bliver mere visuel lækker at se på. Størrelse Til at starte med indsamler jeg billederne hvor efter de kommer en tur ind i Photoshop hvor jeg indstiller den optimale størrelse på billederne. Profil For at overholde en standart har jeg tilføjet en srgb IEC61966 profil til alle billeder. Denne profil gør at alle billederne vil blive gengivet så vidt mulig ens på alle skærme over hele verdenen. Profilen bliver tilføjet ved hjælp af Photoshops save for web. Her kan man også få mulighed for at komprimere filen. Dette gør at filen ikke bliver for stor, da det kan nedsætte hjemmesidens loading hastighed. 14 15
KVALITETS VURDERING Synes opgaven har været udfordrerne da jeg har valgt og lave et redesign af en hjemmeside, hvor man førhen skulle igennem mange klik for at finde frem til den ønskede information. Ved hjælp af php delen har det gjort mit workflow en del nemmere, men det kan selvfølgelig give nogle problemer fremad rettet hvis der er en anden der skal overtage produktet og lave nogle ændringer, hvis personen ikke forstår dette kodesprog. 16 17