Grafisk design / Frederik Aaen / Portfolio H2 45 GRAFISK WORKFLOW
FØR VI GÅR I GANG Opgavebeskrivelse En mindre virksomhed i Skanderborg ønsker en hjemmeside, som er simple at bruge samt vedligeholde. Siden skal fungere som et online visitkort. Mit bidrag til opgaven Til denne opgave har jeg lavet arbejdet selv. Jeg har derfor afholdt kundemøder, idégeneret og produceret en simple hjemmeside, som er klar til, at kunden tager den i brug. Valg af program Jeg har benyttet Sublime text2 til kode i HTML/CSS/ JS. File Zilla er brugt til at uploade hjemmesiden. Efterfølgende er siden implementeret i Umbraco(CMS). Arbejdsprocessen På de følgende sider vil arbejdsprocessen kunne følges. 46 47
Møde med virksomheden. Der afholdes endnu et møde, hvor skitser og tanker præsenteres for kunden. Hjemmesiden kodes i HTML/CSS/JS Kunden fylder indhold ind på siden. PROCES OPSTART AFSLUTTET Efter mødet med virksomheden laves der hurtige skitser. Der opbygges et skelet, som skal bruges som rettesnor, når hjemmesiden kodes. Siden implementeres i Umbraco, så kunden selv kan vedligeholde info og billeder. Der ydes hjælp til smårettelser og SEO. Hjemmesiden siden flyttes til offentligt domæne. 48 49
Hurtige skitser og tanker Ud fra mødet med kunden laves der hurtige skitser. Skitserne skal bruges til at lave et skelet, som der kan kodes efter. 50 51
TOPBILLEDE TOPBILLEDE BESKRIVELSE INFO TOPBILLEDE CYKLER MENU BAR Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu risus sollicitudin, consectetur ex a, semper diam. Vivamus placerat, mauris eu fringilla hendrerit, dui nibh pellentesque erat, nec tempus nisl ante fermentum orci. Aliquam erat volutpat. Fusce aliquam mauris vel justo eleifend aliquet. Ut nulla lacus, egestas vel ex et, feugiat rutrum nibh. Sed tincidunt, enim id lobortis vestibulum, est massa finibus lacus, ac scelerisque nisi enim eu felis. Vivamus lorem ligula, ultrices pharetra risus a, rutrum euismod felis. Mauris vulputate at turpis at tempor. Etiam erat velit, hendrerit sed egestas id, tempor vel felis. Etiam fermentum ante et congue lacinia. BESKRIVELSE KONTAKT Sed sit amet bibendum sapien, at consectetur odio. Duis cursus, velit placerat interdum consequat, nisi urna molestie eros, quis molestie mauris lectus nec ligula. Aliquam erat volutpat. Pellentesque id gravida metus. Nulla eleifend luctus nisl, et dictum lacus. Aenean ut massa magna. Praesent id hendrerit nisi, vel sagittis lectus. Pellentesque risus turpis, faucibus vel lectus a, dictum cursus diam. Quisque vitae sapien vestibulum ipsum mattis fringilla placerat quis enim. rhoncus. BESKRIVELSE KORT BESKRIVELSE MENU BAR KONTAKT Rentegning af skitser Jeg rentegner skelettet i Adobe Illustrator. Hvis jeg havde mere tid, ville jeg lave en visualisering af hjemmesiden i Photoshop. Visualisering og skelettet kan gives til en programmør. Men da jeg selv koder, vælger jeg at prioritere tiden anderledes. INFO KONTAKT KORT KONTAKT 52 53
Hjemmesiden kodes Jeg koder hjemmesiden i Sublime Text 2. Programmet hjælper mig med at holde styr på, at koderne lukkes rigtigt, og foreslår kode, når jeg skriver. Det er med til at kunne kode hurtigere og sikrere. Jeg benytter Media Querys til at lave break points. Break pointsene bruges til at lave siden responsiv og få designet til at opføre sig bedst mulig. 54 55
CMS Efter programmering af hjemmesiden blev den implementerede i CMS systemet Umbraco. Hvilket giver kunden mulighed for at holde siden updateret. De felter kunden skal kunne ændre i, ændres med Razer kode. Ændring af tekst og info Hjemmesiden er programmeret, så hvis et felt ikke er udfyldt, vises feltet ikke. Jeg har tilføjet valgmuligheder de steder, hvor det er muligt. Det gør, at teksten altid står ens, og kunden kan udfylde siden hurtigere. Når kunden har tilføjet teksten, hjælper jeg med SEO. 56 57
Hjemmesiden er færdig Hjemmesiden er nu klar til. at kunden fylder indhold ind. TEST.CYKLERSKANDERBORG.DK 58 59