Arkiv
- 2024-03-12 - Versjonslogg 0.2
- Definerte slugs pÄ alle notater, endra pÄ navigasjonen pÄ forsida, og lagde noen nye skjermopptak
- 2024-03-03 - Versjonslogg 0.1 - statistikk
- Implementerte tinylytics, som et mer personvernvennlig alternativ til Google Analytics, for Ä forstÄ bruken av sida i stÞrre grad.
Usortert
Fargestiler for hjemmesida
Det her blir for nerdene mine uti der altsĂ„, for detta blir nok intenst stammesprĂ„k for folk flest. Figma lanserte nylig noe som heter variabler, som lar deg forholdsvis enkelt definere stiler som skal gjelde til ulike formĂ„l â for eksempel hvordan light mode og dark mode kan se ut pĂ„ en hjemmeside, som f. eks Simenskriver.no:
Du svitsjer det enkelt og greit i Layer-panelet nÄr du har valgt én spesifikk frame. Der vil du se navnet pÄ en samling med variabler. Hvis du trykker utenfor framen vil du finne local variables i hÞyremargen, og det er der du legger til stilene dine.
For Ăžyeblikket prĂžver jeg Ă„ forstĂ„Â design tokens bedre, og hvordan man kan jobbe med det. Variabler er vel bare figma sin versjon av det Ă„ jobbe med design tokens, bare at det er litt begrensa enn sĂ„ lenge. Det som skjer i gifen over er at nĂ„r jeg trykker pĂ„ light mode sĂ„ vises background-fargen som er definert i Light-kolonna, pĂ„ bildet under. Det samme gjelder text-primary ogsĂ„. Ăkke mer hokuspokus enn som sĂ„.
En ting jeg likte
Supa palette er en veldig enkel mÄte Ä lage fargepaletter pÄ. Med en inkludert kontrastsjekk underveis. I tillegg til at du kan fÄ inspirasjon fra etablerte designsystemer som Tailwind, Material UI og mange flere. Det er en figma-plugin og, sÄ jeg anbefaler Ä prÞve den, selv om det bare blir en 7-dagers prÞveperiode fÞr du mÄ punge ut.
Hva holder jeg pÄ med?
NÄ hÞres det ut som at jeg er kritisk til hva jeg sjÞl driver med, men jeg syns det er nyttig Ä reflektere over hva jeg faktisk prÞver Ä fÄ til.
Designforbedringer pÄ hjemmesida
I det siste har jeg prĂžvd Ă„ tilpasse hvordan du registrerer deg til nyhetsbrevet. For Ăžyeblikket har jeg bare copy-pasteâa det jeg fĂ„r fra Buttondown (nyhetsbrev-tjenesten), men da er det ikke like lett Ă„ endre den lysegrĂ„ bakgrunnsfargen, eller fargen pĂ„ knappen ogsĂ„ videre. Derfor har jeg prĂžvd Ă„ lage det fra bunnen av, men da blir jeg fort mĂžtt i dĂžra av min egen inkompetanse.
I bildet under fÄr du se den nÄvÊrende versjonen, og det jeg jobber med stabla over hverandre. Hvis du syns det er vanskelig Ä se hva som stÄr pÄ bildet, sÄ er det fordi det er en mÞrk tekst pÄ en mÞrk bakgrunn. Og du trenger ikke vÊre en designer akkurat for Ä skjÞnne at det blir feil.
Da kommer nemlig CSS inn i bildet, hvor du bestemmer hvordan det skal se ut visuelt sett. Du kan se pĂ„ det som at HTML gir deg byggeklossene Ă„ jobbe med, at du har et avsnitt med tekst, en knapp, et bilde, ogsĂ„ gir CSS deg mulighetene til Ă„ âstyleâ de byggeklossene.
Som med mye annet vil det ogsĂ„ vĂŠre en smart mĂ„te Ă„ jobbe pĂ„, og en.. mindre smart mĂ„te Ă„ jobbe pĂ„. I dette tilfelle vil en mindre smart mĂ„te vĂŠre Ă„ âhardkodeâ det. AltsĂ„ ved Ă„ si at akkurat den ene knappen skal ha denne blĂ„fargen (#4E80EE). En smartere mĂ„te vil vĂŠre Ă„ tilrettelegge for at alle knapper av den typen, uansett hvor pĂ„ sida de befinner seg, vil ha den spesifikke fargen, stĂžrrelsen, mellomrom, skrifttype og alt mulig rart.
SĂ„ det er det jeg har prĂžvd pĂ„ under her, hvor jeg lagde min fĂžrste flexbox đ„ł
Jeg mĂžtte riktignok pĂ„ noen andre kode-utfordringer pĂ„ min vei, sĂ„ den âgamleâ mĂ„ten Ă„ registrere seg til nyhetsbrevet forblir inntil videre, men det kommer etterhvert.
Down the rabbit hole I go
I mellomtida har jeg innsett at nĂ„ har jeg et ârabbit holeâ foran meg, og at det vil bli mye lettere Ă„ gjĂžre endringer dersom jeg faktisk har en bed re forstĂ„else av hva jeg faktisk driver med. Og det er sĂ„ mye morsommere Ă„ bare hoppe ned i et sĂ„nt kaninhull fĂžrst som sist, og ikke tenke for mye pĂ„ det. SĂ„ nĂ„ lener jeg meg bare inn i det, og bruker det momentumet jeg har for Ă„ sette fart.
For Ă„ bli mer dedikert til Ă„ lĂŠre meg noe nytt har jeg god erfaring med Ă„ investere en liten sum (450 kr i dette tilfelle) for Ă„ fĂžlge et tilpassa opplegg, som ogsĂ„ tilrettelegger for praktisk erfaring. Jeg gjorde det samme med piano, og âfingerdrummingâ, og storkoste meg med prosessen.
NÄ bruker jeg en app som heter Mimo for Ä lÊre meg mer om HTML, CSS, og bittelitt Javascript. Faktisk sÄ skriver jeg ned noe av det jeg lÊrer underveis, sÄ hvis du vil ta en kikk pÄ notatene mine kan du se hva jeg har lÊrt om HTML, og hva jeg har lÊrt om CSS. Det er ikke sÄ mye Ä skryte av for Þyeblikket, men forhÄpentligvis kan det senke terskelen for andre til seinere.
En Ă„penbar Ă„penbaring
Det som fikk meg til Ä gÄ aktivt inn for Ä lÊre Ä kode riktignok var at jeg innsÄ at jeg prÞvde Ä forbedre designet ved Ä gjÞre direkte endringer i koden. Uten Ä egentlig vite hva jeg holder pÄ med. NÄ skal det sies at det er utrolig motiverende Ä lÊre seg noe nytt nÄr det betyr at du kan endre pÄ noe du syns er stygt, men det gÄr neimen ikke fort.
Det er i grunn sÄnn jeg har lÊrt meg alt av kode fram til nÄ, at det er noe jeg virkelig vil endre pÄ, ogsÄ lÊrer jeg meg nÞyaktig sÄ mye som mÄ til for Ä endre pÄ det. Ikke noe mer.
Samtidig sÄ jobber jeg jo som designer pÄ dagtid, sÄ hvorfor ikke bruke de ferdighetene jeg har der, i stedet for Ä knote rundt med kode som jeg ikke forstÄr?
Hva som skjer pÄ designfronten
Hva betyr det i praksis? At jeg har begynt Ă„ lage et miniatyrisk designsystem, som gir meg retningslinjer for:
- Hvor mye luft det skal vĂŠre mellom ulike âelementerâ (ogsĂ„ kjent som âspacingâ). Det kan vĂŠre mellomrommet fra en overskrift til selve brĂždteksten, eller mellom setninger i en punktliste som det du ser pĂ„ nĂ„
- Fargebruk. Spesielt hvordan linkene vises, siden de er en essensiell del mĂ„ten simenskriver.no er lagd pĂ„ â hvor ett tema linker videre til noe annet.
- Typografi, eller stÞrrelsen og utseendet til overskrifter, linker, og alt av tekst pÄ sida
Hvor starter man da?
à lage designsystemer fra bunnen av er noe jeg har lite erfaring med egentlig. Som regel er det noe som blir til underveis, nÄr du skal lage mer og mer greier innafor samme stil. Hvor det da blir et Äpenbart behov for at ting skal bÄde se, og fÞles likt ut, uansett hvor pÄ sida du befinner deg.
NÄ starta jeg iallefall med Ä gjenskape det du ser pÄ hjemmesida, bare i et designprogram som heter Figma. Da tar jeg et skjermbilde av sÄnn sida ser ut i dag, ogsÄ lager jeg det fra bunnen av. Ved Ä gjÞre det presser jeg nemlig meg sjÞl til Ä ta avgjÞrelser underveis, om alt fra spacing, til typografiske valg og fargebruk. Samtidig samler jeg inn eksempler jeg liker, fra andre folk. Som f. eks hvor luftig og lettlest sida til Jay L. Colbert er.
Typografi og spacing
For Ăžyeblikket har jeg kommet hit:
Her introduserer jeg en slags profilfarge som ogsÄ vil pÄvirke mange andre fargevalg (som understreking av linker, bakgrunn pÄ knapper osv.).
Fargebruk
Valg av farger er nok det jeg har minst erfaring med, nÄr du skal jobbe systematisk med design. Derfor var det veldig lÊrerikt for Ä se en introduksjon til hvordan du kan bruke HSB-skalaen for Ä definere fargenyanser.
HSB stÄr for hue, saturation, brightness, og tilrettelegger for en mer matematisk utregning av fargene du velger. Som var til overraskende stor hjelp.
Eksempelet under ser veldig ferdig ut, men for Ä lande pÄ de riktige nyansene mÄ de testes i bruk fÞrst, for Ä se om det passer inn der hvor det skal brukes. SÄ denne oversikten er mer et generisk utgangspunkt i grunn:
Anthony Hobday har en oversikt over visuelle prinsipper som jeg stadig kommer tilbake til. Deriblant det her med Ä gi litt farge ogsÄ til de nÞytrale nyansene dine, som blei ekstra tydelig da jeg sette det opp pÄ denne mÄten:
Det er smÄ forskjeller mellom de tre ulike fargesammensetningene pÄ bildet, men ved Ä ha et bittelite drypp av de fargene som ellers brukes i profilen sÄ vil det forhÄpentligvis fÞles mer helhetlig nÄr alt kommer til alt.
Men.. hvorfor?
Mange grunner! For Þyeblikket er det for svak kontrast mellom bakgrunnen pÄ sida og hvordan linkene ser ut blant annet. Det er ikke bra nok med tanke pÄ universell utforming, og noe jeg vil endre pÄ.
OgsĂ„ fordi jeg har et behov for Ă„ vĂŠre tydelig i feilmeldingene mine. Eller hvordan sida mi informerer deg om at noe ikke finnes, eller noe er under arbeid. Siden jeg publiserer notater som ikke er âferdigâ, og som ofte kan linke til sider som ikke ennĂ„ finnes er det desto viktigere Ă„ vĂŠre tydelig om det.
Uventa fordeler
à vÊre den som bÄde designer og utvikler en digital greie er nytt for meg, men det er ogsÄ utrolig spennende. For jeg er utvilsomt min egen stÞrste kritiker, sÄ jeg vil at det skal bli bra. Samtidig kan jeg minimalt om koding, sÄ da er det en fordel om jeg er sÄ tydelig i mine design-instrukser som jeg kan. PÄ den mÄten blir jeg ikke bare en drastisk bedre utvikler, om jeg kan kalle meg det, men jeg blir ogsÄ en langt bedre designer. For jeg fÄr den forstÄelsen om hva som kreves for Ä utvikle det jeg ser for meg.
Link til det originale notatet
