hvordan lære webdesign (i 9 trinn)

Forstå de viktigste begrepene visuell design

Linje

Hver bokstav, kantlinje og divisjon i en layout består av linjer som utgjør deres større struktur. Læring webdesign betyr å forstå anvendelser av linjer i å skape orden og balanse i en layout.

Figurer

de tre grunnleggende figurene i visuell design er firkanter, sirkler og trekanter. Firkanter og rektangler fungerer for innholdsblokker, sirkler fungerer for knapper, og trekanter brukes ofte for ikoner som følger med en viktig melding eller oppfordring til handling. Former har også en følelse av følelser, med firkanter forbundet med styrke, sirkler med harmoni og komfort, og trekanter med betydning og handling.

Texture

Texture replikerer noe i den virkelige verden. Gjennom tekstur får vi en ide om noe er grovt eller glatt. Teksturer kan ses gjennom webdesign. Fra papirlignende bakgrunner til de fargerike wisps Av En Gaussisk uskarphet, vær oppmerksom på de forskjellige typer teksturer som kan gjøre designene dine mer interessante og kan gi dem en følelse av fysikalitet.

Farge

for å lage design som ikke er øyebelastning, bør du utdanne deg selv i fargeteori. Forstå fargehjulet, komplementære farger, kontrasterende farger og følelser som forskjellige farger er knyttet til vil gjøre deg til en bedre webdesigner.

Rutenett

Rutenett har sine røtter i de tidligste dagene av grafisk design. De fungerer så godt i å bringe orden til bilder, tekster og andre elementer i et webdesign. Lær hvordan du strukturerer weboppsettene dine ved hjelp av rutenett.

Kjenn DET grunnleggende I HTML

HYPERTEXT markup language (HTML) gir veiledning for hvordan innhold, bilder, navigasjon og andre elementer i et nettsted vises i noens nettleser. Selv om du ikke trenger Å være ekspert I HTML, hjelper det fortsatt å ha litt kjennskap til hvordan det fungerer, selv om Du bruker en visuell basert designplattform som Webflow.

HTML-koder er instruksjonene en nettleser bruker til å generere et nettsted. Overskrifter, avsnitt, lenker og bilder er alle kontrollert av disse kodene. Du vil spesielt vite hvordan header-koder Som H1, H2 og H3-koder brukes til innholdshierarki. I tillegg til å påvirke layoutstrukturen, er topptagger viktige for hvordan søkeroboter klassifiserer et design og påvirker hvordan de vises i organiske søkerangeringer.

for å lære mer om DE grunnleggende begrepene HTML (det er også en del OM CSS), sjekk ut denne leksjonen vi satt sammen I Webflow University.

Forstå CSS

CSS (eller cascading style sheets) gir styling og ytterligere instruksjoner om hvordan ET HTML-element skal vises. Å gjøre ting som å bruke skrifter, legge til polstring, sette justering, velge farger og til og med lage nett er alt mulig GJENNOM CSS.

Å Vite HVORDAN CSS fungerer vil gi deg ferdigheter til å lage unike leter nettsteder og tilpasse eksisterende maler. La oss gå over noen viktige begreper I CSS.

CSS klasser

EN CSS-klasse er en liste over attributter som kommer sammen i styling et enkelt element. Noe som brødtekst kan ha skrift, størrelse og farge alle en del av en ENKELT CSS-klasse.

CSS combo klasser

en combo klasse er bygget på en eksisterende base klasse. Den arver alle attributter som dimensjonering, farge og justering som kanskje allerede er på plass. Attributter kan da endres opp. Kombinasjonsklasser sparer tid og lar deg sette opp variasjoner av en klasse som du kan søke hvor du trenger i et webdesign.

Å Vite HVORDAN CSS fungerer er viktig når du lærer webdesign. SOM nevnt i avsnittet OM HTML, anbefaler vi at du går over Til Webflow University for å se mer om HVORDAN CSS fungerer.

Lær grunnlaget FOR UX

UX er magien som bringer et nettsted til liv, forvandler det fra et statisk arrangement av elementer til noe som engasjerer følelsene til noen som ruller gjennom det.

fargevalget, innhold, typografi, layout og visuelle alle kommer sammen for å tjene publikum. Brukeropplevelse design handler om presisjon og fremkaller følelser. Det gir noen ikke bare en jevn reise, men en opplevelse som forbinder dem med enheten eller merkevaren bak webdesignet.

Her er NOEN UX-prinsipper du trenger å vite.

Brukerpersoner

Webdesign betyr å forstå sluttbrukere. Du bør lære hvordan du gjør brukerundersøkelser og hvordan du oppretter brukerpersoner. I tillegg må du vite hvordan du bruker denne informasjonen til å lage et design som er optimalisert for deres behov.

informasjonsarkitektur

uten klar organisasjon vil folk bli forvirret og sprette. Informasjonsarkitektur og innholdskartlegging gir en blåkopi av hvordan nettstedet og hver seksjon vil fungere sammen for å gi en klar kundereise.

brukerflyter

Konstruksjon av brukerflyter kan komme til spill når du jobber deg opp til mer omfattende designprosjekter, men du vil bli bedre i fremtiden hvis du begynner å tenke på disse og bygge dem ut for dine tidlige design. Brukerflyter kommuniserer hvordan folk vil bevege seg gjennom et design. De hjelper deg med å prioritere de viktigste delene og sørge for at folk får tilgang til dem.

Wireframes

Wireframes viser hvor på en nettside overskrifter, tekst, visuelle, skjemaer og andre elementer skal plasseres. Selv om du bygger en enkel en-siders webdesign, vil kartlegging av en wireframe gi deg en solid guide til å jobbe fra. Når du går videre til mer kompliserte nettsteder, er wireframes avgjørende for å skape en konsekvent opplevelse, strukturere layouter og ikke gå glipp av noe som må inkluderes.

Prototyping

Prototyper kan ha forskjellige nivåer av troskap, men fungere som en representasjon av et fungerende design. Bilder, interaksjoner, innhold og andre viktige elementer er alle på plass og replikere den virkelige verden design. Prototyper brukes til å få tilbakemelding og finjustere et design gjennom hele prosessen.

Gjør DEG kjent MED UI

et brukergrensesnitt er en mekanisme som setter et stykke teknologi til handling. En dørhåndtak er et brukergrensesnitt. Volumkontrollen på bilradioen at betydelige andre ikke vil slutte å rote rundt med er et brukergrensesnitt. Og tastaturet som du skriver INN PIN-KODEN i PÅ EN MINIBANK er et brukergrensesnitt. Akkurat som knapper og andre mekanismer i den virkelige verden tillater noen å samhandle med maskiner, tillater brukergrensesnittelementene på et nettsted noen å sette handlinger i bevegelse.

La oss se på to VIKTIGE UI-prinsipper: intuitiv design og enkelhet.

hvordan lage intuitive grensesnitt

Samspill og engasjerende med et nettsted bør være konsekvent og følge repeterbare mønstre. Folk som lander på et nettsted, bør umiddelbart forstå systemene som er på plass i å navigere gjennom det.

Gjør UI enkel

UI eksisterer for å optimalisere brukervennligheten. Dette betyr å gjøre kontrollene enkle å bruke, så vel som åpenbare i funksjonaliteten. Enten du minimerer antall navigasjonsalternativer, gjør betalingsprosessen rask eller integrerer andre interaktive elementer som øker tilgjengeligheten, vil forstå UI hjelpe deg med å strømlinjeforme andres opplevelse i samspill med et nettsted.

SELVFØLGELIG ER UI et stort emne som ikke kan fanges i bare noen få avsnitt. Vi foreslår at du sjekker ut blogginnlegget «10 essential UI (user interface) design tips» som en primer TIL UI.

Relaterte leser: UX vs UI: nøkkelforskjeller hver designer bør vite

Forstå grunnleggende om å lage layouter

våre øyne klinke til visse designmønstre automatisk, noe som gjør for en enkel rute gjennom en web-design. Vi vet intuitivt hvor vi skal lete fordi vi har sett de samme mønstrene om og om igjen som vi har brukt media gjennom hele livet. Å vite designmønstre vil hjelpe deg med å lage nettsteder som har en jevn flyt til innholdet og bildene. To vanlige web layout mønstre du trenger å vite Om Er Z-mønstre Og F-mønstre.

Z-mønster

For oppsett med en økonomi av ord og bilder og sjenerøse mengder negativ plass, Gir Z-mønsteret en effektiv måte å cruise gjennom et nettsted. Når du begynner å være oppmerksom på hvor øynene dine går gjennom et design, vil du gjenkjenne med En Gang når Et z-mønster er på plass.

F-mønster

Designer tungt på tekst, som for en online publikasjon eller en blogg, følger ofte et tydelig F-mønster. På venstre side av skjermen ser du en liste over artikler eller innlegg, og i hoveddelen av siden ser du rader med relatert informasjon. Dette mønsteret er optimalisert for å gi folk all den informasjonen de trenger, selv om de raskt ser gjennom det.

Relaterte leser: web page layout: website anatomy hver designer trenger å lære

Lær om typografi

Fonter kan formidle ulike toner eller følelser samt påvirke lesbarhet. Hvis du lærer om webdesign, er det viktig å vite hvordan du bruker typografi.

Typografi tjener flere formål i webdesign. Først, det tjener utilitaristisk formål å gjøre innholdet leselig. Men det kan også fungere som dekorasjon, og den smakfulle bruken av stilisert typografi kan legge til den generelle estetikken.

her er tre grunnleggende typografiske begreper du bør vite.

Serif

Serif skrifttyper har minuscule linjer kjent som serifs som nåde hver bokstav. Denne typografiske stilen kan spores tilbake til utskrift.

Sans serif

som navnet tilsier, mangler sans serif-skrifttyper de identifiserende linjene i serif-skrifttyper. Disse typesfaces finnes gjennom den digitale verden av nettsteder og apper.

Display

Display skrifttyper brukes ofte for overskrifter og kan enten være store og virkningsfulle eller laget av skarpe, tynne linjer. De har vanligvis sofistikerte brevformer og er ment å fange noens oppmerksomhet.

Relaterte leser: Typografisk design: skriftstiler og ressurser for designere

Sett kunnskapen din i handling og bygg noe

du kan se opplæringsprogrammer, lese blogginnlegg, melde deg på online kurs og absorbere all teori og informasjon du kan om webdesign, men den eneste måten å bli webdesigner er å begynne webdesign.

Start med et enkelt prosjekt. Kanskje noen du kjenner trenger hjelp til å lage en portefølje eller har en sidekast som mangler noen form for tilstedeværelse på nettet. Tilbyr å designe dem noe gratis.

en blogg er også et annet flott nybegynnerprosjekt. Dette vil gi deg praktisk designerfaring i å lære å bruke ting som ET CMS, samt gi et showcase for dine skriveferdigheter.

Å Bygge et nettsted for et falskt selskap eller en bedrift er en annen morsom kreativ øvelse i å utvikle designkoteletter. I tillegg kan du legge den til i porteføljen din.

Få en mentor

Mentorer er verdifulle fordi De har vært der du er-helt i begynnelsen – og har lyst til å hjelpe deg gjennom de hardt opptjente leksjonene de har lært. De har en dyp brønn av kompetanse og kunnskap. De er en stor ressurs for å få tilbakemelding på arbeidet ditt og finne hva du gjør riktig og hva som må forbedres.

i å søke etter den aktuelle mentor, sørg for at du finner noen som gjør den type design du beundrer og spesialiserer seg på hva du ønsker å lære. Mentorer kan gi deg en klar bane fra år brukt i feltet, slik at du ikke trenger å snuble gjennom å lære webdesign.

Ingen kode gir en enkel oppføring i webdesign

det var en tid, ikke så lenge siden, da du måtte ha en dyp forståelse AV HTML og CSS for å manuelt skrive koden bak et webdesign. I dag, uten kodeverktøy Som Webflow, er Det mulig å sette sammen et nettsted og starte det på kort tid. Det som tok dager eller uker kan nå skje i timer.

selvfølgelig går så mye inn i å skape et godt webdesign. Lære grunnleggende bak visuell design, grunnleggende OM UI og UX, og å vite hvordan frontend og back end-funksjonen vil gjøre deg til en mer avrundet designer.

Enten Du nettopp har startet eller er en ekspert, Tilbyr Webflow en intuitiv visuell-basert plattform for å styrke deg i å realisere din kreativitet. Sammen Med en lett-å-bruke måte å lansere nettsteder, Har Webflow et helt fellesskap for å gi deg råd og for å hjelpe deg nivå opp dine ferdigheter. Vi ser frem til å se deg jobbe i Vårt Showcase.