Lær UI-designfundamental med dette gratis en times kursus

Jeg er begejstret for at meddele, at vi lige har lanceret dette gratis Scrimba-kursus om UI-designfundamental af Gary Simon.

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

Gary har været UI-designer og en front-end-udvikler i de sidste 20 år, og han driver også den massivt populære YouTube-kanal DesignCourse.

Alt tekst

På bare en time vil Gary udjævne dine UI-designfærdigheder ved at hjælpe dig med at forstå de syv vigtigste byggesten i alle gode brugergrænseflader:

  • hvidt rum
  • Farve
  • Kontrast
  • vægt
  • Justering
  • Typografi
  • Visuelt hierarki

Kurset indeholder en blanding af forelæsninger og interaktive kodningsudfordringer, hvilket betyder at du faktisk bygger brugergrænseflader i browseren. Så du har brug for en grundlæggende forståelse af HTML og CSS, før du tilmelder dig.

Men hvis du lige er begyndt, skal du ikke bekymre dig, der er et fantastisk nedbrudskursus på HTML og CSS på Scrimba, du kan gøre for at lægge nogle grunde.

Hvad angår den indledende opsætning af dette kursus - der er ingen forudsætninger! Kurset er på Scrimba, så du kan interagere med koden, når kurset skrider frem.

Klik her for at starte kurset med det samme, eller fortsæt med at læse, hvis du ønsker en oversigt over, hvordan kurset er struktureret.

Kapitel 1: Hvidt rum

I den første lektion skal du lære at bruge hvidt rum. Hvidt rum er det tomme rum mellem elementerne i din brugergrænseflade.

Alt tekst

Gary vil vise, hvordan ved at bruge kun 3 CSS egenskaber, padding, marginog line-height, kan du markant forbedre udseendet af din tekst.

Kapitel 2: Justering

I dette kapitel viser Gary, hvordan tilpasning kan forbedre ting med minimal kode. Justering er processen med at sikre, at hvert element er placeret korrekt i forhold til andre elementer. Igen, med kun 3 egenskaber: margin, transformog text-align.

Kapitel 3: Kortudfordringen

Velkommen til kursets første udfordring. Denne og de følgende udfordringer er designet på en sådan måde, at du koder en løsning og forsøger at skubbe dig selv lidt, hvor Gary viser sit syn bagefter for dig at sammenligne.

I denne udfordring giver han dig et par kort, som du har brug for for at forbedre det hvide rum og tilpasningen.

Udfordring 1

Når du er færdig, er du velkommen til at springe ind i rollebesætningen og se Gary tage løsningen.

Kapitel 4: Kontrast

I denne screencast vil du lære om kontrast. Kontrast defineres som at være i en 'slående' anden tilstand end noget andet. Gary vil dække 'Kontrastretningslinjer' og hvordan man sikrer, at dit design er tilgængeligt for personer med synshandicappede.

Alt tekst

Kapitel 5: Skala

Det er tid til at tale om skala. Gary vil vise, at ved at udnytte omfanget af forskellige elementer kan du i høj grad forbedre et design.

Eksempel på skala

Kapitel 6: Løs et grimt brugergrænseflade

Godt arbejde, du har nået den anden udfordring på kurset. I denne udfordring vil du give dig et endnu grimere design til at begynde med.

Udfordring 2

Indtil videre har du lært 4 grundlæggende design: hvidt rum, justering, kontrast og skala.

Denne har helt klart et problem med alle fire. Prøv dit bedste for at ordne det, og sørg for at tjekke hans løsning på udfordringen.

Kapitel 7: Typografi

Alt tekst

Typografi kræver forståelse af andre grundlæggende sammen med et par andre overvejelser. I denne rollebesætning vil Gary give råd om, hvordan man effektivt vælger skrifttyper, deres størrelse, afstand og et par mere.

Kapitel 8: Farve

Farve er det første UI-designfundament, der former brugerens oplevelse! Gary dækker nogle vigtige overvejelser, når han vælger farver til målgruppen, nogle almindelige doser og don'ts og nogle grundlæggende om farvekombination.

Alt tekst

Kapitel 9: Colors Challenge

Da farver er et så vigtigt aspekt af dit design, skal du gøre en udfordring for at styrke dine farvefærdigheder. Du får designet nedenfor. Det er bevidst i gråtoner, så du kan øve dig på at skabe et par designs ved kun at bruge farverne nederst til højre.

Farver udfordrer

Prøv at have mere end en, så du virkelig kan udforske de mulige muligheder og kombinationer. Når du har et par muligheder klar, skal du fortsætte og sammenligne, hvis du og Gary har lignende design, når han tager løsningen

Kapitel 10: Visuelt hierarki

Visuelt hierarki er, hvordan du fastslår vigtigheden af ​​elementer i en brugergrænseflade. Nogle elementer er vigtigere end andre.

Alt tekst

I dette kapitel bruger Gary en simpel e-mail-tilmeldingsformular til at vise, hvordan du kan forbedre et ret kedeligt design ved at fremhæve nogle vigtige aspekter af det og forbedre dets visuelle hierarki.

Kapitel 11: Visual Hierarchy Challenge

Lad os nu øve og anvende vores viden. Du får et simpelt kort, og det eneste problem, det har, er dets visuelle hierarki er overalt.

Visuel hierarki-udfordring

Prøv at forbedre det så meget som muligt, og sørg for at tjekke Garys løsning.

Kapitel 12: Den sidste udfordring

Velkommen til vores sidste kapiteludfordring, en designudfordring. Du har dette layout med problemer i det visuelle hierarki, det hvide rum, farve og justering. Din udfordring er at adressere disse 4 for at forbedre dette design så meget som muligt.

Sidste kapiteludfordring

Når du er færdig, kan du se Gary tage en løsning.

Afslutning af tanker

Hvis du når så langt: tillykke med at have afsluttet dette kursus! Du kan være stolt af dig selv, da de fleste bare starter kurser uden at afslutte dem. Du har nu en grundlæggende forståelse af disse UI-designfundamenter:

  • hvidt rum
  • Farve
  • Kontrast
  • vægt
  • Justering
  • Typografi
  • Visuelt hierarki

De er alle lige så vigtige for at få designet rigtigt. Hvis design mangler inden for et af disse områder, er det virkelig nemt at bemærke, at noget ikke er helt korrekt med kvaliteten af ​​designet.

Så sørg for at tænke på alle disse grundlæggende ting næste gang du har brug for at opbygge en brugergrænseflade.

Held og lykke :)