I denne workshop skulle vi ellers før lektionen eller lige i starten undersøge hvilken branche man vil undersøge og arbejde med (servicebranchen, e-handel, håndværker eller offentlig institution) og undersøge de UI tendenser der er. Og så skulle vi analysere hjemmesider under ens udvalgte branche til at få et overblik om brug af tekst, farver og opsætning. Her skulle vi først kigge på 3 fra branchen under awwwards.com, så slev finde to mindre gode hjemmesider og så udvælge en af de mindre gode til at arbejde med.
Jeg startede med at have lidt svært med at finde præcis det jeg vil arbejde med – jeg vidst jeg havde tænkt mig at vælge service branchen men om jeg vil arbejde mere med en hotel hjemmeside eller restaurant havde jeg svært ved. Men efter lidt visuel undersøgelse besluttet jeg på at jeg vil arbejde med en restaurants hjemmeside, mere specifikt ‘The Olive, Kitchen & Bar’.
Til opgaven havde vi krav:
- Du skal anvende et grid (i Figma), når du designer.
- Hjemmesiden skal være designet til både desktop og mobil version.
- Brug den viden, du har opnået gennem undervisningen – hav særligt fokus på adfærdsdesign, visuel identitet og principper for brugervenlighed.
- Sørg for, at din hjemmeside i videst muligt omfang lever op til punkterne “Appearance”, “Color contrast”, “Mobile and touch” og “Animation” i A11Y Projects tjekliste (baseret på WCAG):
Jeg startede med at visuelt undersøge forskellen mellem de funktioner på de gode eksempler og de funktioner der er på den eksisterende hjemmeside.
Her kunne man se at hjemmesiden virket uorganiseret, var ikk genkendelig i forhold til mange andre restauranters typiske layout.
Pga det begrænset tid fik jeg ikke helt lavet en wireframe og følte jeg skulle bare i gang med det samme.
Jeg havde oprindeligt startet at lave desktop først men hurtigt gik det op for mig at jeg burde som altid starte mobile first som vi har ellers lært.
Jeg startet med at få skabt en forside – her tog jeg inspiration fra de eksempler jeg så på awwwards.com dog blev det lidt mere simpliceret til at passe mere til stemning af den restaurant jeg havde valgt + til at være lidt mere realistisk med hvad jeg kunne opnå. Jeg vil sætte fokus med at gøre bedre brug af white spaces, hierarki og visuelle elementer.
Efter jeg fik lavet en forside for både mobil og desktop besluttet jeg at jeg kunne lige nå at lave en menu siden – her prøvet jeg også gøre siden lidt mere spændende at kigge på og organiseret dog kan jeg mærke jeg har stadig til tider svært ved at have helt overblik over hvad er det rigtigt størrelse at lave ting på de forskellige skærmtyper.
Refleksion:
Det var en helt udmærket workshop, dog jeg kunne mærke jeg synes det var lidt presset. Jeg synes det var svært at vide præcis hvor “dårligt” vores udvalgte hjemmeside skulle være, hvor jeg skulle prioritere min tid og hvordan jeg skulle komme i gang. Jeg kan sige med sikkerhed jeg kan ikke fordrage figma grid. Det gjorde hele mit layout blev ødelagt mere ofte end ej og jeg blev nødt til at slå det fra ved et tidspunkt fordi intet fungerede og synes også det er svært at rigtigt se hvordan det ser ud når alle de grid linjer forstyrrer øjet. Synes det var godt at kunne få øvet sig mere i figma dog jeg føler mig allerede generelt rimeligt tryg med programmet men føler det vil havde været bedre uden krav for grid eller i det mindste med mere oplæring om grid førhen. Noget jeg også synes er godt ved det her er se måden andre får brugt figma og det produkt de kan få skabt ind i de programmer- selvom jeg til tider kan blive usikker fordi jeg føler ikke nogle af de her programmer er der jeg er den stærkeste så er det godt at se de måder jeg kan forbedre mig.