onko web-suunnittelun perusteiden oppiminen vielä ”jonain päivänä” – listallasi? Miksi et ole vielä aloittanut? Olemme koonneet 30 vinkkejä ja resursseja, joiden avulla voit aloittaa oppimisen web design tässä kuussa (ja ehkä jopa löytää itsellesi uusi urapolku!)

Graafiset suunnittelijat, painosuunnittelijat ja luojat, jotka haluavat oppia jotain uutta tai murtautua verkkosivuille, joutuvat lopettamaan viivyttelyn. Joka päivä, kun et ota sitä ensimmäistä askelta, jäät päivän jälkeen muista.

seuraa näitä ohjeita ja opettele luomaan ensimmäinen verkkosivustosi, alan parhaat käytännöt ja paljon muuta—kaikki 30 päivässä!

Aloita Verkkosivusto

paras tapa aloittaa web-suunnittelun oppiminen on aloittaa sen tekeminen. Näin neuvoo David Kadavy, Designin tekijä <> hakkerit.

suosittelen blogin perustamista. Aloitin blogin vain on web design leikkipaikka, ja 7 vuotta myöhemmin, käynnistin myydyin kirja aiheesta. Henkilökohtainen projekti, kuten Blogi, antaa sinulle paikan, jossa voit kokeilla uusia asioita, eikä pomosi anna sinulle potkuja, jos mokaat.

ei tarvitse aloittaa massiivisella verkkosivulla tai hullulla suunnittelulla, vaan aloittaa pienestä. Leikitään nettisivuilla ja mietitään, mikä saa asiat toimimaan. (Ja varmista tarkastaa koodi, jotta voit alkaa perehtyä, mitä tekee sivuston työtä.)

haluatko aloittaa nopeasti? Sivuston rakentaja kuten Wix voi auttaa antamaan sinulle etumatkaa tyylikäs sivuston suunnittelu, Kun alkaa oppia käsitteitä ja rakennuspalikoita, mitä menee verkkosivuilla.

Lue kaikki mitä voit

aloita lukeminen. Koska olet tässä blogissa, olet luultavasti tottunut pitämään kirjaa siitä, mitä maailmassa tapahtuu design. Jatka lukemista.

Lue kaikki mahdollinen verkkosivujen suunnittelusta, trendeistä, tekniikoista ja parhaista käytännöistä. Seuraa ihailemiasi suunnittelijoita sosiaalisessa mediassa.

luo laaja verkko myös verkkosivujen suunnittelulukemiselle. Lue perusasiat oppia joitakin koodia, lukea suunnittelun teoria ja lukea opetusohjelmia ja ajankohtaisia artikkeleita.

ole tehokas viestijä

Jos et ole suorasanaisin ihminen, harjoita noita taitoja. Iso osa verkkosivujen suunnittelua on viestintä.

verkkosivujen suunnittelijoiden on kommunikoitava asiakkaiden kanssa säännöllisesti selvittääkseen, mikä ongelma suunnittelussa on ratkaistava; heidän on viestittävä näistä ratkaisuista ja myös toteutettava ne.

tilaa Tuts+ & Envato Elements

harkitse tilausta Envato elementeille, jolloin pääset myös käsiksi erinomaiseen Tuts+ – oppimisresurssiin.

Tuts+ julkaisee säännöllisiä kursseja graafisesta suunnittelusta ja web-suunnittelusta aina perustekniikoista uusimpiin edistyksellisiin lähestymistapoihin ja kehitykseen. Se on täysin omatoimista, asiantuntevat ohjaajat opettavat. Saat myös pääsyn Envato elementtejä, joka on loistava resurssi löytää grafiikkaa, malleja, ja enemmän kytkeä web design työtä.

Think in HTML

HTML eli hypertekstin merkintäkieli on verkkosivujen suunnittelun kulmakivi. HTML on luuranko, joka auttaa luomaan rakenteen sivuston ja kun voit lukea kieltä, maailma sivuston suunnittelu tekee paljon enemmän järkeä.

W3schoolsissa on loistava HTML starter-opetusohjelma, jossa on satoja HTML-esimerkkejä, joilla voit pelata ruudulla nähdäksesi, mitä tapahtuu ja miten se toimii. (Saatat löytää sen intuitiivisempi kuin olet kuvitellut.)

Pelaa koodilla Codeacademyssa

vaikka HTML on hyvä alku, Codeacademysta voi oppia melkein mitä tahansa ohjelmointikieltä. Ilmainen työkalusarja opettaa koodaamaan interaktiivisten aktiviteettien ja pelien avulla.

voit hakea Koodiakatemiakurssin missä ja milloin sitä tarvitset ja aloittaa ja lopettaa tarpeen mukaan. Valitse opittava aihe-web development, programming, data science – or language to focus on – HTML & CSS (a great place to start), Python, Java, SQL, Ruby ja paljon muuta.

opi ymmärtämään CSS

CSS eli cascading style sheets määrittelee HTML-eli XML-ja SVG-kielellä kirjoitetun dokumentin esittämisen.

Mozillan määrittelemänä

CSS kuvaa, miten elementit tulee renderöidä näytöllä, paperilla, puheessa tai muulla medialla.

Mozilla on myös suuri kokoelma CSS resursseja päästä alkuun, vankka esittely miten CSS toimii, mukaan lukien valitsimet ja ominaisuudet, kirjoittaminen CSS sääntöjä, soveltamalla CSS HTML, miten määrittää pituus, väri, ja muut yksiköt CSS, cascade ja perintö, laatikko Malli perusteet, ja virheenkorjaus CSS. Sitten moduulit siirtyä selittää muotoilu tekstiä ja laatikot.

sovella suunnittelutaitojasi verkkoon

Jos olet jo luovalla tai graafisella suunnittelualalla, mieti niitä asioita, joita jo osaat soveltaa myös verkkosivujen suunnitteluun. Periaatteet, jotka tekevät jotain visuaalisesti eivät muutu perustuu medium ja kaikki, että suunnittelun teoria tulee kätevä digitaalisessa tilassa samoin.

vaikka koodin oppimisen kaltaiset elementit eivät välttämättä tunnu luontevilta, on suunnittelutausta valtava bonus. Mitä hyötyä kauniisti koodatusta verkkosivustosta on, jos sen kanssa ei haluta olla vuorovaikutuksessa?

kiinnitä huomiota verkkosivustoihin, joita rakastat

huomioi verkkosivustot, joita rakastat. Mikä niissä vetoaa sinuun? (Ja miten voit oppia toistamaan näitä elementtejä?) Kiinnittää huomiota:

• typografia

navigointi

• kuvien ja tilan käyttö

lomakkeiden suunnittelu

• animaatio ja vieritysefektit
• väri

Piirrä Lankakehys

wireframing on verkkosuunnittelijan ideointi.

puhtaimmillaan johdinkehys on luonnos siitä, millainen verkkosivu tulee olemaan. Kyse ei ole esteettisistä elementeistä, vaan sivuston pohjapiirustuksesta. Lankakehyksen piirtämisessä ei ole kyse tämän mallin ulkonäöstä, vaan sen informaatiorakenteesta.

Etkö ole varma, miten johdinkehys luodaan? Digitaalisessa Telepatiassa on opas parhaista käytännöistä, joiden avulla voit oppia.

ota aikaa sketsin opetteluun

Sketch on Vektoripiirustustyökalu Macille, jonka avulla on helppo luoda muotoiluelementtejä. Monet suunnittelijat ovat siirtymässä luonnos luoda UI elementtejä ja toistaa suunnittelu lohkot.

se on täynnä liitännäisiä, ja sen avulla voit viedä koodin helposti käyttöön ja käyttöön. Se on yksi tehokkaimmista ja suosituimmista työkaluista Adoben Creative Suiten jälkeen ja aikasi arvoinen.

Pysy ajan tasalla tekniikasta

AI, VR, AR, 360 asteen video, botit.

voi olla vaikea pysyä niin monen uuden teknologian ja trendin perässä. Mutta sinun täytyy tehdä kohta pysyä päällä näistä muutoksista.

käsittele ne yksi kerrallaan ja aloita tekniikoista, jotka liittyvät suorimmin tekemääsi työhön. Jos sinulla on verkkosivusto, jossa on online-chat, aloita opettelemalla botteja. Tai jos käytät paljon videosisältöä, leikittele 360-asteisella videolla.

elementit, kuten tekoäly ja virtuaalitodellisuus tai lisätty todellisuus, ovat vielä monimutkaisempia, mutta tulevat todennäköisesti integroitumaan osaksi verkkosivuston suunnittelumaisemaa matkan varrella. Vähintään, sinun pitäisi tietää, mitä ne ovat ja mitä mahdollisia käyttötarkoituksia voisi olla.

Get Comfortable with SEO

vaikka monet web-suunnittelijat ajattelevat SEO asiantuntija voi hoitaa saada sivuston valmiiksi hakukoneiden lukea, siellä on paljon suunnittelutyötä, joka liittyy SEO.

tavasta, jolla kuvat ladataan puhtaan koodin luomiseen, joka on nopeaa, metakuvausten sisällyttämiseen sivuille ja elementteihin, suunnittelijan tulisi sisällyttää hakuajattelu työnkulkuunsa.

freelancerit, tämä on elintärkeää myös teille. Useimmat asiakkaat ovat taju tarpeeksi pyytää SEO-optimoitu verkkosivuilla. Jos työskentelet yksin, sinun täytyy tietää tarpeeksi luodaksesi vankan kehyksen, jonka Google voi lukea (ja pystyä ohjaamaan asiakas SEO-asiantuntijalle, jos työtä on vielä tehtävä).

Pelaa verkkosivuston rakentajan kanssa

sivuston rakentaja voi olla hyvä tapa tutustua parhaisiin käytäntöihin ja siihen, miten verkkosivustojen Rakentaminen ja suunnittelu aloitetaan.

useimmissa näistä työkaluista on runsaasti malleja ja voit muokata elementtejä ja jopa lisätä koodinpätkiä. Yksinkertaisille sivustoille, monet sivuston rakentajat ovat myös ilmainen suunnitelma, jossa voit luoda henkilökohtaisen portfolio sivun tai perussivuston, joka toimii leikkikenttä sinulle.

valitse sitten palat verkkosivun rakentajan sisältä. Katso, miten ne on suunniteltu ja koodattu saada tuntumaa, miten kaikki tulee yhteen. Sinun hämmästynyt mitä voit selvittää vain poimimalla toinen muotoilu toisistaan.

Etsi mentori

onko olemassa joku, jonka kanssa työskentelet, jota ihailet web-suunnittelijana? Vie heidät lounaalle ja poimi heidän aivonsa alasta.

sellaisen mentorin löytäminen, joka haluaa työskennellä kanssasi ja auttaa sinua miettimään alaa ja miten voit oppia web-suunnittelua omin päin, voi olla korvaamatonta. Ja vaikka voit luultavasti löytää mentorin online-yhteisössä, mikään ei ole parempi kuin elävä henkilö, jonka voit tavata kasvotusten säännöllisesti. (Ehkä kannattaa ottaa verkossa ja henkilökohtaisesti mentoreita.)

Join the CodePen Community

kun alat tottua johonkin koodiin ja ohjelmointiin, haluat liittyä CodePen-yhteisöön. Avoimen lähdekoodin yhteisön avulla voit jakaa ja muokata koodinpätkiä eräänlaisessa sosiaalisessa verkostossa.

tässä hieman lisää sivuston perustajilta: ”CodePen on sosiaalinen kehitysympäristö. Sen ytimessä, sen avulla voit kirjoittaa koodia selaimessa, ja nähdä tulokset sitä rakentaa. Hyödyllinen ja vapauttava työkalu minkä tahansa taidon kehittäjille, ja erityisesti voimaannuttava ihmisille, jotka oppivat koodaamaan. Keskitymme etupään kieliin, kuten HTML: ään, CSS: ään, Javascriptiin ja syntaksien esikäsittelyyn, jotka muuttuvat noiksi asioiksi.”

ota Luokka

joillekin oppijoille muodollisempi luokkahuoneympäristö on paras.

tarjolla on ton verran kursseja – henkilökohtaisesti ja verkossa -, joissa voi opetella web – suunnittelun alkeita. Aloita paikallisesta korkeakoulusta tai verkko-oppimisen keskuksista, kuten Udemysta tai Courserasta. Valitse kurssi nykyisellä taitotasollasi ja jatka eteenpäin.

Haluatko tehdä jotain? Google It

ei-niin-perinteinen-oppijalle, etsi vastaus web design-ongelmaan Googlesta. Tarjolla on niin paljon opetusohjelmia ja videoita, jotka voivat opastaa sinut lähes minkä tahansa ongelman – ja ratkaisun-läpi.

tärkeintä on etsiä juuri se, mitä tarvitsee tietää, ja etsiä vastaus hyvämaineisesta lähteestä. Tässä on toinen vinkki, Kun on kyse opetusohjelmista ja videoista – uudempi sisältö antaa sinulle luultavasti paremman, täydellisemmän ja osuvamman vastauksen. (Muista, että osa näistä asioista muuttuu nopeasti.)

kiinnitä huomiota käyttäjäkokemukseen

mikään ei voi tehdä tai rikkoa verkkosivustoa kuten käyttäjäkokemuksen suunnittelu. Sitä pitää suunnitella ja ymmärtää.

näin Interaction Design Foundation kuvaa UX designia:

User experience (UX) design on prosessi, jossa luodaan tuotteita, jotka tarjoavat mielekkäitä ja henkilökohtaisesti merkityksellisiä kokemuksia. Tämä edellyttää tuotteen käytettävyyden huolellista suunnittelua ja sitä mielihyvää, jota kuluttajat saavat sen käytöstä. Se on myös huolissaan koko prosessin hankinta ja integrointi tuote, mukaan lukien näkökohdat brändäys, muotoilu, käytettävyys, ja toiminta.

UX-suunnittelijat eli muotoilijat, jotka ovat tietoisia kokemusmuodostusprosessista, pyrkivät luomaan ja muokkaamaan prosessiin vaikuttavia tekijöitä tarkoituksellisesti. Voit tehdä tämän, UX suunnittelija harkitsee miksi, mitä ja miten tuotteen käyttöä.

kiinnitä huomiota Suunnittelutrendeihin

miltä moderni verkkosivujen muotoilu näyttää? Se ei ole kompakysymys. Jotta voit suunnitella nykyaikaisia verkkosivustoja ja käyttäjäkokemuksia, sinun on tiedettävä, mitä käyttäjät haluavat ja miten he ovat vuorovaikutuksessa sen kanssa. Jos Viimeksi latasit sovelluksen tai katselit verkkosivuja puhelimellasi vuonna 2016, sinulla on paljon korjattavaa.

Verkkosivustomallien luominen, joissa on modernit otteet ja trendit integroituna suunnitteluun, auttaa projektejasi erottumaan muista. Mistä tiedät, mikä on trendikästä? Jatka tällaisten sivustojen lukemista ja kiinnitä huomiota siihen, mitä muut suunnittelijat tekevät. Huomioi värit ja tyylit ja ominaisuudet, jotka sisältyvät verkkosivustoihin, joilla vierailet usein.

Create Without Color

Start every design without color. Eräs suuri suunnittelija sanoi minulle kerran, että jos suunnittelusi toimii mustavalkoisena, se on virheettömän värinen.

tuo ei välttämättä aina pidä, mutta se on hyvä lähtökohta.

luomalla mustavalkoisia kuvioita näkee, missä elementit asettuvat vastakkain ja miten ne pelaavat yhteen. Olet poistanut kaikki tunnesiteet väreihin tai silmien liikkeisiin, jotka johtuvat siitä. Tämä yksinkertaisin muotoilu antaa sinulle idean, jos jokin toimii konseptina ennen kuin siirryt viimeistelemään sitä.

opi rakastamaan Googlen fontteja

Google Fonts on ystäväsi.

riippumatta siitä, mitä mieltä olet Googlesta, kyky selata, lajitella ja valita kirjasintyyppejä, joiden tiedät toimivan verkkosivustojen suunnittelussa, on tärkeää. Sinun ei tarvitse miettiä lisensointia tai ovatko kirjasintyypit yhteensopivia tiettyjen selainten kanssa vai eivät.

rajoituksena on, että käytössäsi on vain se, mitä Google Fonts-kirjastossa on. Mutta jos yrität, voit löytää jotain, joka sopii lähes jokaiseen projektiin. Se säästää paljon aikaa pitkällä aikavälillä.

Pick Apart a UI Kit

Download a user interface or icon kit and pick it apart.

aivan kuten voit tutkia verkkosivun koodia, katso, miten design-elementit on rakennettu verkkoon. Huomioi mittakaava ja ruudukko, katso värisekoitukset ja miten tiedostot on järjestetty Photoshopissa tai Illustratorissa.

Etsi ladattavaa pakettia, joka sisältää elementtejä useassa eri muodossa korkearesoluutioisille näytöille. (Lataamalla joukko JPEG ei palvele sinua niin hyvin.)

yritä sitten rakentaa tai muokata jokin elementti tai kaksi omaa.

Become a Typographer

Modern website designissa painotetaan vahvasti typografiaa … hyvää typografiaa. Hero otsikot jättiläinen sanoja kerroksia tekstiä, jotka vetävät käyttäjä osaksi suunnittelu, ymmärtää periaatteita, miten pari tyyppi elementtejä ja rakentaa mukaansatempaava teksti lohkot on elintärkeää.

Aloita Ellen Luptonin ajattelusta tyypillä. (On myös samanniminen kirja.) Lupton on typografian asiantuntija ja hänen tietonsa saavat sinut ajattelemaan kuin typografi hetkessä.

hyppää Javascriptiin

kun alkaa tuntua aika hyvältä puuhastella web-suunnittelun kanssa, Haasta itsesi taas opettelemaan JavaScriptiä. HTML: n ja CSS: n jälkeen se on verkon tärkein kieli.

JavaScript on työkalu, jonka avulla suunnittelijat voivat toteuttaa monimutkaisia asioita ja vuorovaikutusta web-sivuilla. Se tekee liukusäätimen liukumäestä tai parallaksi-animaatiosta animaation.

Learn JS: ssä on interaktiivinen opetusohjelma, jonka avulla pääset alkuun.

Päivitä portfoliosi

kun aloitat web-suunnittelun, muista päivittää portfoliosi web-suunnitteluprojekteilla. Tämä yksinkertainen toiminta auttaa sinua näyttämään itsellesi … ja muille … että web design on osa repertuaariasi.

päivitetty portfolio voi auttaa potentiaalisia asiakkaita näkemään, miltä ”tyylisi” näyttää. Muista esitellä ulkoasuja, värejä, typografiaa ja erilaisia tekniikoita, jotka osoittavat, mitä voit tehdä.

Haasta itsesi

niin monilla oikoteillä ja koodinpätkillä, joiden avulla voit korjata melkein minkä tahansa verkkosivustosi ongelman, älä laiskistu. Muista haastaa itsesi jatkuvasti oppia uusia taitoja, uusia teknologioita ja pitää parantaa web design peli.

yksi asia tässä kentässä on se, että se muuttuu jatkuvasti; aina on jotain uutta opittavaa tai kokeiltavaa.

maksimoi kokemuksesi

Get out there and design. Sinun täytyy alkaa suunnitella sivustoja olla web-suunnittelija.

Aloita pienistä, mutta ota projekteja muiden kanssa. Pyydä mukaan projektiin, jossa on tiimi töissä. Taklata pieni sivusto ystävä. Enemmän kokemusta sinulla on rakentaa sivustoja, sitä paremmin ja nopeammin saat.

Mitä odotat? Älä vitkastele.

pyydä palautetta

käytä verkostoasi kerätäksesi palautetta verkkosivujesi suunnitteluprojekteista, vaikka ne olisivat mielestäsi kuinka pieniä tahansa. Kuuntele tätä palautetta – vaikka et pitäisikään siitä ja katso, mitä voit oppia.

antoiko palautetta antava henkilö visuaalisten mieltymysten lisäksi ehdotuksia verkkosivuston toiminnan parantamiseksi? Voisivatko he helposti ymmärtää suunnittelun päämäärän? Liittyivätkö he viesteihin?

learning New Things

ollakseen loistava verkkosivujen suunnittelija, sinun tarvitsee vain jatkaa pelaamista, yrittämistä ja uusien asioiden oppimista. Tee kohta verkostoitua ja kommunikoida muiden alalla, jotta voit pysyä ajan tasalla tekniikoita ja visuaalisia muutoksia, jotka ovat-demand.

Jos haluat oppia verkkosivujen suunnittelua, niin tämä on luultavasti jo jotain, mitä teet säännöllisesti. Mutta tämä on kehittyvä ala, ja se muuttuu lähes päivittäin. Kysy keneltä tahansa, joka tekee sitä.