Baseline grid

[Slaine2]

Hvilke steg i prosessen er utført?

• [x] Undersøke
• [x] Rapportere
• [x] Avklare
• [x] Spesifisere krav
• [x] Utvikle
• [x] Ferdig!

Vi trenger et grunnlinjegitter For øyeblikket jobber vi (designere) uten rutenett. Dette betyr at du må måle mye, og det er ingen sterk konsistens.

Utviklingen av et rutenett bringer designerne Vi utvikler et rutenett i Figma basert på det eksisterende (https://jokul.fremtind.no/komigang/mobil) slik at designerfilene blir mer ensartede.

Hvilke alternativer har du vurdert?

Mer info

[Slaine2]

har nå utarbeidet noen formater med grid, som vi kan bruke som standard i Figma.

https://www.figma.com/file/utIBFbxbb2UOZUJUVgRb4N/Grids-J%C3%B8kul?node-id=21%3A2

[Steinop]

@Slaine2 : Kommer ikke inn på fila - har ikke tilgang 😅

[Murstam]

Hvis vi skal ha vertikal baselinegrid bør den nok være 4px siden flere av linjehøydene på tekststilene våre går i 4-gangen. Spørsmålet er om det er behov for vertikal grid når vi har spacingskalaen som definere vertikal avstand?

[Slaine2]

Hvis vi skal ha vertikal baselinegrid bør den nok være 4px siden flere av linjehøydene på tekststilene våre går i 4-gangen. Spørsmålet er om det er behov for vertikal grid når vi har spacingskalaen som definere vertikal avstand?

@Murstam Takk for innspillet. Nå er avstanden 8 px - men vi kan justere den til 4 px. Jeg synes det er bra å ha et vertikalt grid som grunnlag - du kan også skjule det hvis du ikke trenger det.

Hvordan liker du Gutter?

[Slaine2]

@Murstam Jeg finner også fordelen med grid at du kan sette "snap to grid"

[Steinop]

Enig med @Murstam vedr vertikal avstand. Ser ikke helt poenget med et 8-pixel grid for å definere vertikal avstand når vi har spacingskalaen. Et 4-pixel grid vil bli så finmasket at alt i praksis vil være lov. Synes det kan være nyttig med et kolonnesystem slik at man har et utgangspunkt når man skal begynne å tegne (Det vil ikke nødvendigvis gå opp i forhold til kolonner i et endelig tabell-/listedesign). Er det behov for 6 kolonner på mobil?

Tenker at når vi får på plass gode komponent-templates vil mye av dette gi seg selv og at behovet for grid minimeres.

[Murstam]

Ja, kolonner er det jeg ser mest behov for. Holder sikkert med 4 på mobil.

Jeg tenker margin kan økes på tablet (24px?) og stor desktop (64px?).

Gutter virker grei.

[piofinn]

Burde man kanskje sette opp noe for "stående tablet" også? Ser i mange tilfeller at layoutene for desktop ikke fungerer godt rundt den bredden (768px-ish), og typisk mobil-layout vil heller ikke være optimalt her.

Denne bredden kan fort også oppstå på en laptop hvis man ikke kjører nettleseren i fullskjerm, eller på en større skjerm hvis du har festet nettleservinduet til én del av skjermen f.eks. Tror også en del telefoner i landskapsmodus lander omtrent her 😊

[Slaine2]

Endelig versjon som varianter for desktop, tablet og mobil

https://www.figma.com/file/y9JtTf3whfTCHCdYSUXVQ5/%F0%9F%9B%A0-J%C3%B8kul-komponenter-Pull-request?node-id=206%3A2667

[lfbergee]

Burde sikkert vært tatt opp tidligere, men i kode er media queryene og "dingsene" fristilt fra hva de er.

Vi har "small-device", "medium-device", "large-device" og "xl-device", jeg vil anbefale at design adopterer denne naming convensjonen. Grunnen er at vi ikke vet hva fremtiden bringer av nye og endrere dingser og flater. Så å koble noe til konseptet "mobil" er ikke heldig, da det allerede finnes mobiler man kan brette ut og der med havner godt opp i tablet teritorie. Og desktop.. det kommer jo helt an på hvordan brukeren har organisert vinduene sine, vil også påstå at det er ganske stor forskjell på 1920x1080 og 5120x1440 feks, så desktop er heller ikke et godt begrep.

Det bør også synkes med breakpointene tilbake til kode, så disse konseptene representerer samme ting.

[Slaine2]

Veldig gode innganger @lfbergee . Takk skal du ha. Jeg vil fremdeles tilpasse det

[Slaine2]

Navngivning er tilpasset. Er det noen andre Breakingpoint å vurdere? Passer de sammen?

https://www.figma.com/file/y9JtTf3whfTCHCdYSUXVQ5/%F0%9F%9B%A0-J%C3%B8kul-komponenter-Pull-request?node-id=206%3A2667