Kunsten på Silkeborg Højskole - en online kunstregistrant

Transkript

1 GRAFISK DESIGN Design af responsiv hjemmeside til Silkeborg Højskoles nye kunstregistrant. Oprettelse af ny side på Silkeborg Højskoles primære hjemmeside.

2 Kunsten på Silkeborg Højskole - en online kunstregistrant OPGAVEN I samråd med Silkeborg Højskole og Zebra Media udarbejdede jeg et responsivt design til hjemmesiden Kunsten på Silkeborg Højskole. Silkeborg Højskole ønskede, som et supplement til deres primære hjemmeside, en ny side, hvorpå de kunne registrere skolens omfattende kunstsamling. Den nye hjemmeside skulle afspejle et tilhørsforhold til Silkeborg Høskoles primære hjemmeside, men skulle også kunne stå alene på en seperat platform. Kunsten på Silkeborg Højskole skulle have som hovedformål, at være et opslagsværktøj til underviserne (og med tiden, eleverne) på Højskolen. Lærerne skulle kunne bruge hjemmesiden i deres undervisning. Derforuden skulle den kunne fungere som en dataregistrering af kunstværkerne i et forsikringsøjemed. Se hjemmesiden her Brugernavn: test Password: test_sh PROGRAMMER Bridge, Camera Raw og Photoshop CC til billedbehandling. Dreamweaver CC til programmering. XAMPP Apache server program. FileZilla til upload af Html og PHP filer.

3 AFSENDER Silkeborg Højskole har med tiden samlet næsten 300 kunstværker, som er udstillet på skolens ejendom. Samlingen består af både nationale og internationale kunstværker, som Silkeborg Højskole blandt andet har erhvervet sig på deres mange uddannelsesrejser. MÅLGRUPPE Målgruppen er et meget begrænset antal undervisere på Silkeborg Højskole. Idet adgang til siden kræver et log-in, ved vi præcist hvilken målgruppe vi henvender os til. Det er undervisere / pædagogiske formidlere ansat på Højskolen. Mænd og kvinder med en akademisk baggrund, i alderen 30+ og Mac brugere. BUDSKAB Let tilgængelig søgefunktion og visuel oversigt over højskolens kunstsamling.

4 WIREFRAME SKITSER Skitser og overvejelser vedr. struktur og layout af hjemmesiden. Udgangspunket er et layout med 3 kolonner med responsiv højde og bredde deraf procentsatserne i skitserne. Ved visning af et stort billede inddrages to kolonner og bliver til én. I nederste højre hjørne ses udkast til en thumbnail visning. Og i nederste venstre hjørne ses en alternativ menustruktur, som dog blev sorteret fra pga. tvivlsomt brugervenlighed.

5 VIDEREUDVIKLING AF LAYOUT I PHOTOSHOP Her ses mine skitser og overvejelser vedr. struktur og layout af hjemmesiden. Logoet er videreført fra Farven er bibeholdt for at skabe genkendelighed til hovedsiden. Den håndskrevne font i headeren blev fravalgt, til fordel for en mere ren header med en moderne og simpel font. Det store orange søgefelt nedtones of placeres længere nede på siden. Tekstfelte, links og tjekbokse defineres og placeres udfra overvejelser omkring brugervenlighed.

6 FORM Hjemmesidens format er som udgangspunkt 1024 px i bredden. Højden er relativ. Siden er designet i procenter således, at den automatisk tilpasses enhver skærmstørrelse. Layoutmæssigt er siden delt op i 3 kolonner. Dog bliver de to kolonner længst til højre, til én kolonne når et stort billede skal vises på siden. DESIGNMÆSSIGE OVERVEJELSER VEDR. TEKNISK INDHOLD Indeksering / kategorisering Søge- og browsefunktioner Vis antal søgeresultater Vis brødkrumme sti Log-in Beskrivende tekst om kunstneren og mulighed for relevante links til andre sites Scrollfunktion i hver kolonne (hvis nødvendigt) Slideshow Thumbnails Zoomfunktion Fuld skærm Brugerens personlige mappe med printfunktion Sitet er programmeret i et CMS således, at brugerne på Silkeborg Højskole selv kan varetage input af nytilkomne kunstværker.

7 BILLEDER & ILLUSTRATIONER Sitets store omdrejningspunkt er billederne af kunstværkerne fra Silkeborg Højskole. Billederne har højskolens ansatte selv taget, og efterfølgende sendt til mig til videre behandling. Jeg har beskåret og farvekorrigeret billederne i Photoshop. Gemt i en stor jpg format, så der senere kan zoomes ind på billederne uden forringelse og så de kan printes ud i en høj opløsning. Nogle af kunstværkerne er afbilledet fra forskellige vinkler og der var derfor for behov for at illustrere for brugeren, at der er flere billeder af samme værk. Dette gjorde jeg, ved at lave et thumbnails galleri under det store billede. Der er desuden mulighed for at bladre og zoome ind og ud på det store billede. Dette er illusterert ved hjælp af pile i hver side af billedet og zoom ind og ud ikoner nedenunder. Derforuden er det også muligt at vise billedet i fuld skærm ved et enkelt klik. Denne funktion er tiltængt en undervisningssituation, hvor man ikke ønsker at vise den beskrivende tekst i højre side. Til sitets forside har jeg lavet 8 collager, som roterer tilfældigt ved siden af en velkomsttekst. Således får brugerne et indblik i nogle af de værker der findes på hjemmesiden. Silkeborg Højskoles logo forelå allerede i en Illustrator fil, så den skulle skaleres til sitet. Jeg har ændret logoet og sat et K for Kunst ind, og lavet faviconer til almindelige skærmstørrelser, tablets og smartphones og gemt dem som.ico fil ved hjælp af et plug-in i Photoshop. Yderligere iconer, såsom print knappen, zoom ind og ud symbolerne mv. er gemt som png-filer. De mørkegrå streger under headeren giver en visuel adskillelse af overskrifter og indhold. Den tykke streng giver en god kontrast til den hvide baggrund. Og den tynde streg umiddelbart ovenover, tilføjer den tykke streg en lethed.

8 ØVRIGE DESIGNOVERVEJELSER Her ses et udsnit af de øvrige overvejelser i designprocessen. I øverste venstre hjørne ses det endelige favicon til hjemmesiden. De efterfølgende to billeder viser udkast til fuldskærmsvisning. Det endelige resultat blev en fuldskærmsvisning med sort baggrund, som den afbilledet i midten. Da dette giver den mest neutrale visning, således at brugeren udelukkende fokuserer på billedet. Nedenfor ses mine noter til valg af fonte, overvejelser vedr. Log-in funktion, page 404 error, print-resultater m.v.

9 Farvevalg #FF9933 # #F2F2F2 FARVER Den hvide baggrundsfarve skaber simplicitet og enkelthed. Hvilket jeg vurderer, skaber ro og omslutter en række, til tider, meget brogede kunstværker. Jeg har valgt at lade det orange logo fra højskolens primære hjemmeside gå igen på Kunsten på Silkeborg Højskole og dermed lade orange være primærfarven i designet. Orange symboliserer en munterhed og en kreativitet, som jeg finder passende for netop dette site, idet det er et nøgleord i samlingen af Højskolens kunstværker. Derforuden har jeg valgt en lys grå til kolonnerne og en mørkere grå til brødtekst og headeren. Iconerne er ligeledes grå og linksene orange. Grå, hvid og orange er for mig en sofistikeret og moderne farvekombination, men med en kant af råhed. Kombinationen af den kølige grå og den varme orange skaber en nødvendig kontrast i indholdet og bringer liv i designet. Det er farvekombinationer som er gode i sig selv, men som også fungerer godt, når man bringer nye farver ind, f.eks. i form af billederne af kunstværkerne.

10 CENTURY GOTHIC aabb123 TYPOGRAFI Jeg har brugt 3 forskellige fonttyper: Century Gothic, Verdana og Helvetica. Alle grotesk (sans-serif) og alle web safe. Century Gothic med sine rene, geometriske linjer er brugt i headeren og på knapperne. En relativ tynd font solid, men samtidig elegant og letlæselig. Century Gothic er udelukkende brugt i versaler, hvilket beriger det stærke og enkle udtryk. Fontstørrelsen for headeren er relativ, idet den skal kunne tilpasses forskellige skærmstørrelser, men udgangspunktet er 38 pt., 90% vertical scale og 200 tracking. Verdana har en god læsbarhed på computerskærmen, blandt andet pga. størrelsen og mængden af luft mellem karakterne. Derfor er den moderne og enkel fonttype valgt til brødteksten i 10 pt. Helvetica er udelukkende brugt til PDF udskrifterne. Da læsevenligheden på tryk er god med denne font. Den er ren, effektiv og samtidig smuk. Minimalistisk, klassisk og moderne. Jeg har med skrifttyperne, valgt at holde designet så enkelt så muligt. Ligeledes har Silkeborg Højskoles ønske om en vis genkendelighed fra deres primære site, dannet grundlag for brugen af Verdana til brødteksten. ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå $%#!? / VERDANA aabb123 ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå $%#!? / aabb123 ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå $%#!? / HELVETICA aabb123 ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå $%#!? /

11 FORSIDE Forsiden er beskyttet af et log-in. Jeg har brugt et af Silkeborg Højskoles kunstværker som baggrundsmotiv til forsiden. Den øverste er den endelige. KVALITETSVURDERING Arbejdsprocessen har været spændende og udfordrende. Fra idé til færdigt koncept er der gået lang tid og websitet er endnu ikke helt færdigt. En af udfordringerne har været arbejdet vedr. programmeringenprocessen. Denne proces var / er en ekstern opgave, og dette giver nogle naturlige begrænsninger i forhold til kommunikationen. Men alt i alt en lærerig proces. Hjemmesiden er meget tung og langsom om at loade. Dette er ikke hensigtsmæssigt, men nødvendigt fordi billederne skal ligge i en høj opløsning, således at de kan bruges i undervisningsøjemed. Jeg er godt tilfreds med resultatet og det er kunden også. Hjemmesiden kan betragtes som en beta-model og der vil nu være en periode med et testforløb af sitet og derefter en evaluerende opfølgning, hvor brugerne kan komme med ønsker til forberinger. Dette med henblik på at kunne forbedre denne hjemmeside, men også at kunne sælge konceptet videre til større virksomheder som er i besiddelse af en større kunstsamling eller andet de ønsker at registrere digitalt. Se hjemmesiden her Brugernavn: test Password: test_sh

12 HTML, PHP & CSS Fra Højskolen primære side ønskede man at kunne henvise til den nye Kunstregistrant. Derfor oprettede jeg en ny side til deres eksisterende hjemmeside, som skal have til formål at informere læseren om kunstregistranten. Dette gjorde jeg ved at oprette en ny Html side og kalde den silkeborghojskole_kunsten.php Silkeborg Højskoles hjemmeside er et stort site bygget op i Html sider, med en overordnet PHP struktur. PHP-delen kalder indhold fra databasen som f.eks. skolens nyheder og kalendersystem. Ligeledes inkluderer PHP funktionen et overordnet CSS og menusystem. Teksten skrives ind i et div-tag (id= content ) Jeg er opmærksom på at bruge specialtegn for bl.a. æ, ø og å (œ / ø / å), da disse bogstaver, i nogle browsere kan skabe visningsproblemer. Billederne sættes ind med <img scr=> Størrelsen på billedet defineres med width= 560. Den resterende kode laves i filerne: inc.conf.php og inc.sec_menu.php, som styrer hvor i menustrukturen siden placeres og delvist hvordan siden styles.

13 I FILEN INC.CONF.PHP DEFINERER JEG: Overskriften / titlen på den pågældende side I hvilken række i primær menuen linket til siden placeres Referencen til placeringen i sekundær menuen Referencen til placeringen i tertiær menuen (i dette tilfælde ingen - 00) Det overordnede farvetema for siden (overskrift, links, menu) Henvisningen til billedfrisen I FILEN INC.SEC_MENU.PHP DEFINERER JEG: Hvordan linket til den pågældende side vises i den sekundære menu Hvad der sker ved mouse over af linket Bullit punkterne Frisen til siden, laves i PhotoShop og gemmes ned i jpg format.

14 XAMPP & FILEZILLA På grund af sitets størrelse og kompleksitet, har jeg valgt at arbejde med Xampp og en visning i en localhost. Dette gør jeg for at kunne teste de rettelser jeg har lavet i filerne inden jeg uploader via FileZilla og kører live. ADMINISTRATION På Silkeborg Højskoles administrationsside skal informationen omkring Kunstregistranten ligeledes foreligge. Derfor går jeg ind Admin mappen i strukturen og finder index. php. Her opretter jeg et ny menupunkt og indsætter den relevante tekst. Således har det administrative personale på Højskolen altid adgang til de (for udefra kommende) hemmelige log-in koder.