miten oppia web design (9 askelta)

ymmärtää visuaalisen suunnittelun keskeiset käsitteet

rivi

jokainen kirjain, raja ja jako ulkoasussa koostuu riveistä, jotka muodostavat suuremman rakenteensa. Web designin oppiminen tarkoittaa linjojen sovellusten ymmärtämistä järjestyksen ja tasapainon luomisessa asettelussa.

muodot

visuaalisen suunnittelun kolme perusmuotoa ovat neliöt, ympyrät ja kolmiot. Neliöt ja suorakulmiot toimivat sisältölohkoina, ympyrät toimivat nappeina ja kolmioita käytetään usein kuvakkeisiin, jotka liittyvät tärkeään viestiin tai kutsuun toimintaan. Muodoilla on myös tunne, jossa neliöt liittyvät vahvuuteen, ympyrät harmoniaan ja mukavuuteen sekä kolmiot merkitykseen ja toimintaan.

tekstuuri

tekstuuri toistaa jotain reaalimaailmassa. Tekstuurin kautta saamme käsityksen siitä, onko jokin karkea vai sileä. Tekstuurit voidaan nähdä koko web design. Paperimaisista taustoista värikkäisiin Gaussin suhahduksiin, ole tietoinen erilaisista tekstuureista, jotka voivat tehdä malleistasi mielenkiintoisempia ja antaa niille fyysisyyden tunteen.

väri

luodakseen malleja, jotka eivät ole silmärasitus, kannattaa kouluttautua väriteoriaan. Ymmärtäminen väriympyrä, täydentäviä värejä, vastavärejä, ja tunteita, että eri värit on sidottu tekee sinusta paremman web-suunnittelija.

ruudut

ruudut juontavat juurensa graafisen suunnittelun alkuaikoihin. Ne toimivat niin hyvin tuo järjestystä kuvia, tekstejä ja muita elementtejä web design. Opi jäsentämään web-asetteluja käyttäen ristikoita.

Know the basics of HTML

Hypertext markup language (HTML) antaa ohjeet siitä, miten verkkosivuston sisältö, kuvat, navigointi ja muut elementit näkyvät jonkun selaimessa. Vaikka sinun ei tarvitse olla HTML-asiantuntija, auttaa se silti jonkin verran perehtyneisyyttä siihen, miten se toimii, vaikka käytät webflow ’ n kaltaista visuaalista suunnittelualustaa.

HTML-tagit ovat ohjeita, joita selain käyttää verkkosivuston luomiseen. Otsikoita, kappaleita, linkkejä ja kuvia ohjataan näillä tägeillä. Haluat erityisesti tietää, miten header-tageja, kuten H1, H2 ja H3, käytetään sisällön hierarkiassa. Sen lisäksi, että ne vaikuttavat layout structure, otsikko tunnisteet ovat tärkeitä, miten web crawlers luokitella suunnittelu ja vaikuttaa siihen, miten ne näkyvät orgaanisen haun rankingissa.

jos haluat lisätietoja HTML: n peruskäsitteistä (mukana on myös CSS-osio), tutustu tähän Webflow Universityn opetukseen.

ymmärrä CSS

CSS (tai cascading style sheets) tarjoaa muotoilua ja lisäohjeita siitä, miten HTML-elementti tulee näkyviin. Tekee asioita, kuten soveltamalla fontteja, lisäämällä täyte, asettaminen kohdistus, valitsemalla värejä, ja jopa luoda ruudukot ovat kaikki mahdollisia CSS.

tieto siitä, miten CSS toimii, antaa sinulle taidot luoda uniikin näköisiä verkkosivustoja ja muokata olemassa olevia malleja. Käydään läpi muutamia keskeisiä käsitteitä CSS.

CSS-luokat

A CSS-luokka on luettelo attribuuteista, jotka yhdistyvät yksittäisen elementin muotoilussa. Jotain kehon tekstiä voisi olla fontti, koko, ja väri kaikki osa yhden CSS luokan.

CSS combo-luokat

combo-Luokka rakentuu olemassa olevan perusluokan varaan. Se perii kaikki ominaisuudet, kuten mitoitus, väri, ja kohdistus, joka voi jo olla paikallaan. Attribuutteja voidaan sitten muuttaa ylöspäin. Combo luokat säästää aikaa ja voit määrittää muunnelmia luokan, että voit soveltaa missä haluat web design.

tieto siitä, miten CSS toimii, on oleellista www-suunnittelua opeteltaessa. Kuten HTML-osiossa mainittiin, suosittelemme, että suuntaat Webflow-yliopistoon nähdäksesi lisää CSS: n toiminnasta.

Opettele UX: n perusteet

UX on taika, joka herättää verkkosivuston eloon, muuttaen sen staattisesta elementtien järjestelystä joksikin, joka tarttuu jonkun sitä selaavan tunteisiin.

värimaailma, sisältö, typografia, asettelu ja grafiikka yhdistyvät palvelemaan yleisöäsi. Käyttäjäkokemuksen suunnittelussa on kyse tarkkuudesta ja tunteiden herättämisestä. Se tarjoaa jollekin paitsi sujuvan matkan myös kokemuksen, joka yhdistää hänet web-suunnittelun taustalla olevaan kokonaisuuteen tai brändiin.

Tässä muutamia UX-periaatteita, jotka sinun tulee tietää.

Käyttäjäpersoonat

Web-suunnittelu tarkoittaa loppukäyttäjien ymmärtämistä. Sinun pitäisi opetella tekemään käyttäjätutkimusta ja luomaan käyttäjäpersoonia. Lisäksi, sinun täytyy tietää, miten hyödyntää tätä tietoa luodessaan suunnittelu, joka on optimoitu heidän tarpeisiinsa.

Tietoarkkitehtuuri

ilman selkeää organisointia ihmiset menevät sekaisin ja pomppivat. Tietoarkkitehtuuri ja sisällön kartoitus tarjoavat suunnitelman siitä, miten verkkosivusto ja jokainen osio toimivat yhdessä tarjotakseen selkeän asiakaspolun.

Käyttäjävirrat

Käyttäjävirtojen rakentaminen voi tulla kysymykseen, kun siirryt laajempiin suunnitteluprojekteihin, mutta pärjäät paremmin tulevaisuudessa, jos alat miettiä näitä ja rakentaa niitä varhaisia suunnittelujasi varten. Käyttäjävirrat viestivät, miten ihmiset liikkuvat suunnittelun läpi. Niiden avulla voit priorisoida tärkeimmät osiot ja varmistaa, että ihmiset voivat käyttää niitä.

Rautalankakehykset

Rautalankakehykset osoittavat, mihin web-sivun otsikot, teksti, grafiikka, lomakkeet ja muut elementit aiotaan sijoittaa. Vaikka olet rakentamassa yksinkertainen yhden sivun web-suunnittelu, kartoitus pois wireframe antaa sinulle vankka opas työskennellä. Kun siirryt monimutkaisempia sivustoja, rautalankamallit ovat välttämättömiä luoda johdonmukainen kokemus, jäsentämällä asetteluja, eikä puuttuu mitään, joka on sisällytettävä.

prototyyppien

prototyypeissä voi olla eritasoisia uskollisuustasoja, mutta ne edustavat toimivaa rakennetta. Kuvat, vuorovaikutus, sisältö ja muut tärkeät elementit ovat kaikki paikallaan ja jäljittelevät reaalimaailman suunnittelua. Prototyyppejä käytetään palautteen saamiseen ja suunnittelun hienosäätöön koko prosessin ajan.

Tutustu käyttöliittymään

käyttöliittymä on mekanismi, joka panee jonkin tekniikan toimimaan. Ovenkahva on käyttöliittymä. Äänenvoimakkuuden säätö autoradio, että muita merkittäviä ei lopeta messing noin on käyttöliittymä. Ja näppäimistö, johon syötät PIN-koodisi pankkiautomaatilla, on käyttöliittymä. Aivan kuten painikkeet ja muut mekanismit reaalimaailmassa sallivat jonkun olla vuorovaikutuksessa koneiden kanssa, verkkosivuston käyttöliittymäelementit mahdollistavat toiminnan käynnistämisen.

käydään läpi kaksi keskeistä KÄYTTÖLIITTYMÄPERIAATETTA: intuitiivinen muotoilu ja yksinkertaisuus.

intuitiivisten käyttöliittymien luomisen

vuorovaikutuksen ja verkkosivujen kanssa tulee olla johdonmukaista ja noudattaa toistettavia kaavoja. Ihmiset laskeutuvat verkkosivuilla pitäisi välittömästi ymmärtää järjestelmiä, jotka ovat käytössä navigoinnin kautta.

tee käyttöliittymästä yksinkertainen

käyttöliittymä on olemassa käytettävyyden optimoimiseksi. Tämä tarkoittaa sitä, että hallintalaitteet ovat helppokäyttöisiä ja että niiden toimivuus on ilmeinen. Oletpa sitten minimoimassa navigointivaihtoehtojen määrää, tekemässä kassaprosessia nopeasti tai integroimassa muita interaktiivisia elementtejä, jotka lisäävät saavutettavuutta, käyttöliittymän ymmärtäminen auttaa virtaviivaistamaan jonkun kokemusta vuorovaikutuksessa verkkosivuston kanssa.

Toki UI on laaja aihe, jota ei voi vangita vain muutamaan kappaleeseen. Suosittelemme tarkistaa blogikirjoitus ”10 essential UI (käyttöliittymä) design tips” kuin pohjamaali UI.

aiheeseen liittyviä lukuja: UX vs UI: avainerot jokaisen suunnittelijan tulisi tietää

ymmärtää ulkoasujen luomisen perusteet

silmämme kiinnittyvät tiettyihin suunnittelumalleihin automaattisesti, mikä mahdollistaa helpon reitin verkkosuunnittelun kautta. Tiedämme intuitiivisesti, mistä etsiä, koska olemme nähneet näitä samoja kuvioita yhä uudelleen, kun olemme kuluttaneet mediaa koko elämämme ajan. Tietäen suunnittelu malleja auttaa luomaan sivustoja, joilla on sujuva virtaus sisältöön ja visuaalisiin. Kaksi yleistä web layout patterns sinun täytyy tietää ovat Z-patterns ja F-patterns.

Z-kuvio

asetteluissa, joissa on sanojen ja kuvien taloudellisuus ja runsaasti negatiivista tilaa, Z-kuvio tekee tehokkaasta tavasta kulkea verkkosivuston läpi. Kun alat kiinnittää huomiota siihen, missä silmäsi käyvät läpi mallia, tunnistat heti, kun Z-kuvio on paikallaan.

F-kuvio

suunnittelee raskasta tekstiä, kuten verkkojulkaisuun tai blogiin, ja noudattaa usein erillistä F-mallia. Vasemmalla puolella näytön, näet luettelon artikkeleita tai virkaa, ja pääosassa sivun, näet rivejä aiheeseen liittyviä tietoja. Tämä kuvio on optimoitu antamaan ihmisille kaikki tarvitsemansa tiedot, vaikka he vilkaisisivat sitä nopeasti.

aiheeseen liittyviä asioita: verkkosivun asettelu: sivuston anatomia jokaisen suunnittelijan on opittava

oppia typografiasta

fontit voivat välittää erilaisia sävyjä tai tunteita sekä vaikuttaa luettavuuteen. Jos olet oppimassa web design, osaaminen käyttää typografia on välttämätöntä.

typografia palvelee useita tarkoituksia web-suunnittelussa. Ensinnäkin se palvelee utilitaristista tarkoitusta tehdä sisällöstä luettavissa. Mutta se voi toimia myös koristeena, ja tyylitellyn typografian tyylikäs käyttö voi lisätä yleistä esteettisyyttä.

tässä on kolme typografista peruskäsitettä, jotka sinun tulisi tietää.

Serif

Serif-kirjasintyypeissä on pieniä sarjoiksi kutsuttuja viivoja, jotka sulkevat jokaisen kirjaimen. Tämä typografinen tyyli voidaan jäljittää tulostaa.

Sans serif

kuten nimestä voi päätellä, sans serif-kirjasintyypeistä puuttuvat serif-kirjasintyyppien tunnusviivat. Nämä kirjasintyypit löytyvät verkkosivustojen ja sovellusten digitaalisesta maailmasta.

näyttö

näyttötauluja käytetään usein otsikoissa, ja ne voivat olla joko suuria ja näyttäviä tai terävistä, ohuista viivoista tehtyjä. Niissä on yleensä hienostuneita letterformeja, ja niiden tarkoitus on kiinnittää jonkun huomio.

aiheeseen liittyviä asioita: typografinen suunnittelu: kirjasintyylit ja resurssit suunnittelijoille

Pane tietosi toimintaan ja rakenna jotain

voit katsella opetusohjelmia, lukea blogikirjoituksia, ilmoittautua verkkokursseille ja omaksua kaiken mahdollisen teorian ja tiedon web-suunnittelusta, mutta ainoa tapa tulla web designer on aloittaa web designing.

aloita yksinkertaisella projektilla. Ehkä joku tiedät tarvitsee apua luoda portfolio tai on puoli touhu, joka puuttuu minkäänlaista web läsnäolo. Tarjoa suunnitella niitä jotain ilmaiseksi.

blogi on myös toinen mainio aloittelijaprojekti. Tämä antaa sinulle käytännön suunnittelukokemusta oppia käyttämään asioita, kuten CMS, sekä tarjoaa näyteikkuna oman kirjallisesti taitoja.

verkkosivujen rakentaminen väärennetylle yritykselle tai yritykselle on toinen hauska luova harjoitus design-kyljysten kehittämisessä. Plus, voit lisätä sen portfolio.

Hanki mentori

mentorit ovat arvokkaita, koska he ovat olleet siellä missä olet — aivan alussa — ja heillä on halu auttaa sinua kovalla työllä hankkimiensa oppien läpi. Heillä on syvä asiantuntemuksen ja tiedon kaivo. Ne ovat suuri voimavara saada palautetta työstä ja löytää mitä teet oikein ja mitä tarvitsee parantaa.

etsiessäsi sopivaa mentoria varmista, että löydät jonkun, joka tekee ihailemaasi suunnittelua ja on erikoistunut siihen, mitä haluat oppia. Mentorit voivat antaa sinulle selkeän polun alalla vietetyistä vuosista, joten sinun ei tarvitse kompuroida web-suunnittelun oppimisessa.

mikään koodi ei tarjoa helppoa pääsyä web-suunnitteluun

oli aika, ei niin kauan sitten, jolloin piti olla syvä ymmärrys HTML: stä ja CSS: stä, jotta pystyi kirjoittamaan koodin manuaalisesti web-designin taakse. Nykyään, ilman koodityökaluja, kuten Webflow, on mahdollista koota verkkosivuilla ja käynnistää sen lyhyessä ajassa. Se, mikä vei päiviä tai viikkoja, voi nyt tapahtua tunneissa.

niin paljon menee tietysti hyvän verkkosuunnittelun luomiseen. Visuaalisen suunnittelun perusteiden oppiminen, käyttöliittymän ja UX: n perusasiat sekä etupään ja takapään toimintojen osaaminen tekevät sinusta monipuolisemman suunnittelijan.

olitpa vasta aloittelemassa tai asiantuntija, Webflow tarjoaa intuitiivisen visuaaliseen pohjautuvan alustan, joka antaa sinulle mahdollisuuden toteuttaa luovuuttasi. Webflow ’ lla on helppokäyttöinen tapa käynnistää verkkosivustoja, ja sen lisäksi sillä on kokonainen yhteisö, joka antaa sinulle neuvoja ja auttaa sinua tasaamaan taitojasi. Odotamme innolla näkevämme sinut Esittelyssämme.