Lær grundlæggende UI-design på 5 minutter

Hvis du har en grundlæggende forståelse af HTML og CSS og vil oprette flotte brugergrænseflader i browseren, skal du ikke lede længere! I denne artikel vil du øge dine UI-designfærdigheder ved at lære om følgende syv grundlæggende:

  • hvidt rum
  • justering
  • kontrast
  • vægt
  • typografi
  • farve
  • visuelt hierarki

Denne artikel bygger på et gratis Scrimba-kursus oprettet af den strålende Gary Simon, også kendt som DesignCourse. Kurset tilbyder et sæt interaktive tutorials, som du kan tage i dit eget tempo og endda gøre om for virkelig at integrere din læring.

Kursusstart: Lær UI Design Fundamentals?

Vi mener, at alle front-end-enheder skal have grundlæggende UI-designfærdigheder. Så i dette? Selvfølgelig lærer @designcoursecom dig det. Alt uden brug af designværktøjer, bare HTML & CSS.

RT'er værdsat? // t.co/mT9fDjShUd # 100 dage af kode

- Scrimba (@scrimba) 28. januar 2020

Så hvis denne artikel giver dig lyst til mere, skal du sørge for at tjekke kurset. Lad os nu springe ind i det!

Hvidt rum

Det første grundlæggende design, vi vil se på, er White Space , også kendt som negativt rum. Som navnet antyder, er det mellemrummet mellem elementerne på siden.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

Elementer, der er klemt sammen på en side uden hvidt mellemrum, ser ikke kun attraktive ud, men er også vanskelige at navigere og vanskelige at læse.

Vi kan justere det hvide rum på forskellige måder, herunder polstring, margen og linjehøjde. Tjek billedet før og efter nedenfor for at se, hvilken forskel effektiv hvid plads kan gøre.

Før og efter justering af mellemrum

Justering

Næste op er Justering . Dette er processen med at sikre, at hvert element er placeret korrekt i forhold til andre elementer, for eksempel ved at sikre, at kolonner er justeret ned på siden.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

Som du kan se på de følgende billeder, er den første side med elementer i adskillige forskellige kolonner (svag justering) langt mindre attraktiv og læsbar end den anden, som har stærk justering

Side med svag justering Side med stærk justering

Kontrast

Det er vigtigt også at overveje kontrast, når du bygger en side eller applikation. Kontrast er forskellen mellem farver, der vises ved siden af ​​hinanden på siden.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

Som du kan se fra dette eksempel, er sider med dårlig kontrast vanskelige at læse, og elementerne skiller sig ikke ud.

Side med dårlig kontrast

Sider med god kontrast, som den nedenfor, ser ikke kun meget bedre ud, men er mere brugervenlige og tilgængelige.

Eksempel på god kontrast

For at hjælpe dig med at få din kontrast helt rigtigt foreslår WCAG (retningslinjer for tilgængelighed af webindhold) et minimum (AA) kontrastforhold på mindst 4,5: 1 eller 3: 1 for stor tekst eller et forbedret (AAA) kontrastforhold på 7 : 1 eller 4.5: 1 for stor tekst. Der er en række plugins eller websteder, der kan kontrollere dette.

vægt

Skala er også en vigtig del af brugergrænsefladen, så overvej størrelsen på hvert element nøje. For eksempel skal elementerne være store nok i forhold til siden (så ingen store huller). Også elementer med højere betydning, såsom overskrifter, bør være større end dem med mindre betydning.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

Se på billederne før og efter nedenfor, og bemærk, hvor meget bedre siden ser ud, når den skaleres korrekt.

Side med dårlig skala Eksempel på god skala

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

Typografi

Typografi har også stor indflydelse på brugergrænsefladen. Der er mange måder at justere dette på, herunder skrifttypevalg, skriftstørrelse, justering, bogstavafstand, liniehøjde, skrifttypestil, farve og kontrast.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

Brug generelt ikke mere end 2 skrifttypefamilier på en enkelt side og sørg for, at de forskellige aspekter arbejder sammen for at fastlægge rækkefølgen af ​​betydning. Dette er kendt som visuelt hierarki , som vi vil dække mere detaljeret nedenfor.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

Hvis du følger disse tip, vil din side se så god ud som denne:

Eksempel på god typografi

Og ikke forvirrende og ulæselige som denne:

Side med dårlig typografi

Farve

UI-designfundamentet, der først former en brugers oplevelse, er farve . Farvepsykologi betyder, at hver farve fremkalder en mening for bestemte mennesker - for eksempel kan rød betegne fare, mens hvid kan fremkalde renlighed og sindsro.

Vær dog forsigtig med farve. Betydninger varierer på tværs af kulturer, så gør altid din forskning og overvej din målgruppe, når du vælger farver.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

Det er også vigtigt at huske, at for mange farver kan skabe en dårlig brugergrænseflade, og farver, du vælger at bruge, skal supplere hinanden. Som en tommelfingerregel kan du ikke gå galt med at bruge lysere eller mørkere variationer af samme nuance ved siden af ​​hinanden. Se bare på, hvor meget lettere på øjet det andet billede nedenfor sammenlignes med det første!

Side med dårlige farvevalg God brug af farve

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

Visuelt hierarki

Det sidste punkt på vores liste over grundlæggende design er visuelt hierarki . Nogle elementer i et brugergrænseflade er vigtigere end andre. Visuelt hierarki giver os mulighed for at fastslå denne betydning.

Dette kan gøres med position, kontrast, farve, skala, stil eller en kombination af ovenstående, som vist i det andet billede nedenfor, som har et meget bedre visuelt hierarki end det første.

Side med dårligt visuelt hierarki Brug af typografi og farve til at etablere visuelt hierarki

Pak ind

I denne artikel har vi dækket de syv hoveddesignfundamenter: hvidt rum, farve, kontrast, skala, justering, typografi og visuelt hierarki. De er alle lige så vigtige for brugergrænsefladen - hvis et af disse elementer mangler, vil hele brugeroplevelsen lide. Så sørg for at overveje dem alle, når du opretter dine UI-design.

UI Design Fundamentals-kurset

Hvis du gerne vil lære mere om disse emner, skal du tjekke det gratis UI Design Fundamentals-kursus på Scrimba. I det lærer du om de grundlæggende i meget større detaljer.

Held og lykke og glad kodning :)