Grafisk design & brugervenlighed
Uge 06
Sketching
Jeg har som min Sketching opgave valgt et projekt, som jeg har arbejdet på i mange år og stadig arbejder på. Pilgrim er et rollespilsystem og foregår i en fjern verden, hvor mennesket er rejst til for mange år siden. Verdenen hedder Exus og er kulisse for alle mine fortællinger. Den historiske ramme for spillets fortællinger spænder fra en 1600-tals kolonitid op igennem 1800-tallets industrialisering, en moderne 1. til 2. verdenskrigsinspireret periode og endelig til en fremtidsperiode. Trods det historiske spænd er den overordnede genre science fiction.

Det har så også været udgangspunktet for mit design, hvor målgruppen er rollespillere og sci-fi interesserede. Derfor skulle siden naturligvis også have et udseende, der siger ”SCI-FI”. Jeg startede processen med at skitsere forskellige opsætninger. Heldigvis var jeg klar over, hvor mange hovedsektioner siden skulle have, og hvad de skulle handle om.

Nu var det så bare at få dem struktureret og præsenteret på en måde, hvor det var overskueligt for brugeren. Jeg var igennem ideer, hvor navigationen mellem sidens sektioner blev vist som halvstore felter med en overskrift og baggrundsbillede. Jeg endte på en løsning, hvor det blev ikoner med tekst. Lige nu er de forholdsvist store – jeg leger stadig med tanken om at gøre dem lidt mindre. Under alle omstændigheder er det meningen at ikonet for den valgte sektion fremhæves, mens de andre tones ned.

Jeg var også ude i flere overvejelser om underafsnit, hvor de skulle stå henne og, hvordan de skulle opføre sig. Modellen blev den, hvor de står under hovedsektionerne i små bokse, som matcher den tilhørende sektion i farver. I eksemplet herunder er det sektionen Introduction, som er vist med underafsnit. Hvis det var Player’s Guide, ville de være gule i stedet.

Jeg havde på et tidspunkt en ide om at underafsnit skulle dukke frem med et halvt sekunds forsinkelse og koblet med en computeragtig tastelyd. Jeg kunne godt tænke mig at brugeren havde følelsen af at sidde med et futuristisk arkiv system, hvor filer (tekster) blev åbnet og ”blippede frem” når brugeren gik et nyt sted hen. Det er muligt at det bliver for tungt i forhold til sidens indlæsningstid osv., men det er stadig med i idebanken 😊

Farver og design
Sidens farveudtryk er (i hvert fald i denne version) en mørk blå baggrund med delvist nedtonede billeder af en galakse i kontrast til klare lyse (og lidt neon-agtige) farver til ikoner og overskrifter. Dem har jeg valgt for at opnå et passende sci-fi look. For at gøre det nemt at adskille sidens hovedsektioner har de hver deres farve, som starter i det blågrå og kører over i blå-cyan-grøn-gul-orange-rød-lilla. Tidsperioderne i historien er farvekodet på samme måde, så det er faktisk et gennemgående tema i projektet og noget jeg forventer vil give en oplevelse af genkendelse undervejs.

Fonte er valgt ud fra et princip om at skulle være sci-fi-agtige, fx sidens overskrift i Nasalization og sektionstitler i Neuropol. Begge display fonte, som egner sig fint til den rolle, mens brødteksten og undertitler til ikoner er holdt i PT Sans (Ja, den kan jeg godt lide).

Lad mig afslutte med at sige, at dette design på ingen måde er færdigt endnu. Selv efter at have været igennem Sketching 10x10 metoden, er jeg stadig i tvivl, men jeg er efterhånden landet på et resultat, som jeg synes ligger i nærheden at det jeg gerne vil udtrykke. Jeg har været meget i tvivl og er det stadig om siden skal have et mørkt eller lyst udtryk.

På den ene side synes jeg, at den mørkeblå baggrund er tilpas rum-agtig og giver den stemning jeg gerne vil have. På den anden side er jeg bange for at den mørke side kommer til at kæmpe med sidens illustrationer om opmærksomhed og i værste fald kvæle dem. Det er jeg naturligvis ikke interesseret i, og mine overvejelser går da også stadig på, om jeg skal vælge en lysere baggrund i stedet. En løsning jeg har fundet, som indtil videre stiller mine behov er at lave et halvtransparent felt til billede og tekst og så have billede og tekst i hvide bokse. Det løser problemet med at indholdet druknede og samtidig bygger den halvtransparente baggrund en bro fra den mørke baggrund over til de lyst tekstbokse.