Ultimate opas aloitusopas Web Design

Haluatko oppia muotoilemaan aivan ensimmäinen verkkosivusto? Ehkä olet suunnitellut muutaman ja nyt haluaisit kääntää taitosi uraan? Tämä artikkeli on täällä osoittamaan sinut oikeaan suuntaan.

Yksi artikkeli ei voi kattaa kaikkea, mitä sinun tarvitsee tietenkin tietää. taidot, työkalut ja tekniikat, jotka tarvitsevat kohtuullisen ammattitaitoisen suunnittelijan, kestää kuukausia oppia ja vuosien ajan hallita. Anteeksi ei. Ei todellakaan ole nopeampi tapa. Mutta jatkuva oppiminen ja kehittäminen ovat yksi tämän työn miellyttävimmistä osa-alueista.

Suunnittelijoillemme: oletko koskaan kertonut jollekulle "Suunnittelen verkkosivustoja" ja kokenut, että kylmä kauhu kun he vastasivat, "Cool! Voitteko opettaa minulle, miten tämä tehdään? "Tarkoitan, kuinka paljon työn suunnittelu voi olla vaikeaa. Tämä pätee erityisesti silloin, kun henkilö kysyy vähän tietoa tietokoneista aluksi. Monet vain olettavat, että napsautat ja vedät kaiken ruudulle, vähän kuin PowerPoint, ehkä. Kerron tämän ilmaiseksi: PowerPointin "web-sivujen" vienti ei ole auttanut. Olemme täällä auttamassa teitä oikein väärin. Seuraavan kerran, kun joku pyytää sinua suunnittelemaan verkkosivustoja, osoita ne täällä.

Tervetuloa, Ladies and Gents, Webdesigner Depot -oppaaseen web-suunnittelun aloittamiseen. Tartu hiiriisi ja halaa näppäimistösi, tämä on pitkä. Kahvi on valinnainen, mutta erittäin suositeltavaa.

Kuka tämä on?

Tämä artikkeli on tarkoitettu kaikille, jotka haluavat aloittaa verkkosivujen suunnittelun selaimessaan. Se on myös ihmisille, jotka haluavat aloittaa verkkosivujen suunnittelun. Tässä artikkelissa oletetaan, että lukijalla ei ole minkäänlaista muodollista muotoilukoulutusta, koodaustaitoja eikä kokemusta web-suunnitteluteollisuudesta.

"Vähimmäisvaatimukset" ihmisille, jotka haluavat suunnitella ensimmäisen verkkosivunsa, ovat vähäisiä. Jos tiedät mitä kansiot ja tekstitiedostot ovat, voit aloittaa. Se on niin yksinkertaista.

Kuitenkin, vaikka aloitus on yksinkertainen, rakentaa hyvä sivusto on muuta kuin. On paljon taitoja sinun täytyy oppia. Sinun täytyy oppia väriteorian. Sinun täytyy tietää, miten ihmisillä on vuorovaikutus verkkosivustojen kanssa, ja miksi he tekevät niin kuin he tekevät. Sinun täytyy oppia peruskoodauskielet, nimittäin HTML ja CSS.

Sitten kannattaa oppia perusohjelmointia JavaScript-ohjelmassa ja selvittää, miten voit käyttää sitä manipuloimaan sivustosi osia. Sitten on sisällönhallintajärjestelmät, hakukoneoptimointi ja markkinointi.

Ja tietenkin sinun on oltava hyvä sisältö verkkosivustossasi ensisijaisesti. Miksi maan päällä haluatte tehdä sen joka tapauksessa? Voisit vain palkata ammattilaisen. Sinun täytyy olla tässä, koska rakastat oppimista. Sinun täytyy olla kiehtonut Internet ja kaikki sen mahdollisuudet. Tarvitset paljon vapaa-aikaa. Sinun ei kuitenkaan tarvitse olla asiantuntija kaikessa. Kukaan ammattilaisista ei ole. Jotkut erikoistuneet yhteen alueeseen. Jotkut tekevät vähän kaikesta.

Tervetuloa upeaan maailmaan web designissa, aloittelijassa. Ole valmis ruuvaamaan paljon, ja muista pitää hauskaa!

Tämän oppaan käyttäminen

Lue vain tarpeeksi aloittaaksesi. Tee ensimmäinen, luultavasti hullu, verkkosivusto. Tule takaisin ja lue lisää. Parantaa. Toistaa.

Et todellakaan luultavasti halua lukea sitä kerralla. On olemassa paljon ulkoisia resursseja lukemiseen, paljon käsitteitä päätyäsi ympärille. En oppinut tätä yhdellä kertaa. Todennäköisesti, et sinä. Ei se mitään.

Suunnittelemme selaimessa

Ehkä olet tutustunut verkkoon ja olet huomannut, että monet ihmiset käyttävät kuvankäsittelyohjelmia suunnittelemaan verkkosivustojaan ensin. He koodaavat malleja sen jälkeen, tai joku muu tekee sen. photoshop on yleisimmin käytetty työkalu, mutta ihmiset käyttävät myös ohjelmia Luonnos , GIMP , Inkscape , ja Kuvittaja .

Katso ympäri maailmaa ja näet blogikirjoituksen foorumilistan jälkeen, jossa käsitellään hyödyllisiä ongelmia ja ongelmia, jotka liittyvät yhden tai toisen työkalun käyttämiseen verkkosivustosi suunnittelussa. Tämä on hyvä. Olen aina sanonut, että ihmisten pitäisi käyttää mitä tahansa työkalua parhaiten. Minä kuitenkin poikkeukseni tähän sääntöön. Uskon, että verkkosivustot on suunniteltava selaimessa - ihanteellisesti useissa selaimissa - koska ihmiset eivät selata verkkoa Photoshopissa.

Sen lisäksi selainpohjaisella työnkululla on useita muita etuja:

Näet tarkalleen mitä olet saamassa. Jopa korkeatasoiset mokit eivät välitä verkkosivujen interaktiivisia osia tai animoituja osia hyvin. Selainpohjaisen suunnittelun avulla näet tarkalleen kuinka suunnittelu toimii .

Tämä pätee erityisesti herkästi muotoilemiseen. (Jotta aloittelevaa: herkkä muotoilu on, kun luot verkkosivuston suunnittelun, joka muuttuu ja mukautuu eri näytön kokoisiin. Tämä tarkoittaa sitä, että sama verkkosivusto näyttää ja ehkä toimii hieman eri tavalla puhelimissa, tablet-laitteissa ja pöytätietokoneissa.)

Oletko koskaan yrittänyt tehdä vähintään kolmen korkealaatuisen mallin jokaisesta sivun asettelusta verkkosivustollasi? Se ei ole kätevää. Paljon parempi tehdä se "kaikki kerralla".

Selainpohjainen muotoilu voi tehdä sinulle paremman suunnittelijan. Kun teet kaiken alustavan suunnittelutyön, esimerkiksi Photoshopissa, on helppo päästää irti käsistä: liitännät voivat saada ruuhkautuneita, suunnittelijat lähtevät raskasta grafiikkaa. Nahka tekstuurit kaikkialla! (Onneksi tämä trendi on laskenut viime vuosina.) Ei tarvitse tapahtua niin, mutta se usein tapahtuu. Tämä pahenee, jos sivuston suunnittelija ei ole henkilö, joka koodaa sen.

Tämä on yksi tapa, että selaimessa suunnittelu voi muuttaa lähestymistapasi estetiikkaan ja visuaalisiin. Se myös pakottaa sinut saamaan lisätietoja HTML: stä. Ja opit paljon enemmän siitä, miten eri selaimet toimivat. Pohjimmiltaan mitä enemmän kädet likaantuvat koodilla, sitä paremmin ymmärrät, miten sivustot toimivat. Se ei tee sinusta mahtavaa suunnittelijaa; mutta se on hyvä alku.

Tarvitsevat ajattelutavat

Ennen kuin avaat tekstieditorin ja aloitat kirjoittamisen, sinun on ymmärrettävä joitain perusperiaatteita. Ihmiset, jotka suunnittelevat kuvankäsittelyohjelmassa, kuten Photoshop, voivat suunnitella tällaisen verkkosivuston:

1. Jos he ovat älykkäitä, he tekevät ideoita ensin paperille. Sitten he avaavat Photoshopin. Amatöörinä olen aina aloittanut tämän toisen vaiheen - älä tee virheeni.
2. He kaataavat sydämensä, sielunsa, verensä, hikeä ja kyyneleitä parhaisiin ideoihinsa. Nämä ideat muodostavat täydellisen ja kauniin muotoilun kotisivulle (luultavasti). Sitten, olettaen, että heillä on pomo tai asiakas, joka pyytää sitä, he voivat nopeasti koota muutamia muita suunnittelu- / layoutvaihtoehtoja.
3. Asiakas väistää väistämättä jonkin "huonomman" käsitteen omasta syystä. Vaikka se ei olekaan "asiakkaan vika", voi olla hyvin, hyvin vaikea palata ja muuttaa malleja, jotka olet jo kehittänyt tai "päättynyt".

Tämä lähestymistapa ei anna kenellekään mitään hyvää. Täten sinun tarvitsee tietää ensimmäinen asia:

Kaikki on toistuvia

Kirjaimellisesti jokainen osa suunnitteluasi voi muuttua. Mikään ei ole pyhä. Jos jokin ei toimi tai se ei sovi muuhun muotoon, sen pitäisi mennä tai muuttaa. Jopa kun sivustosi on tehty ja käynnistetty, saatat huomata vikoja tai voit päättää ottaa sen uudessa suunnassa. Verkko itsessään on neste ja muuttuu jatkuvasti. Vaikka en todellakaan usko muutokseen muutoksen vuoksi, sinun pitäisi olla valmis säätämään tarvittaessa.

Et vain rakenna verkkosivustoa ja jätä se siellä. Verkkosivustot ovat vähän kuin lapset, vain ne eivät koskaan kasva ja lähtevät kotiin. Sinun pitää jatkaa heidän seuraamistaan, päivittää niitä ja pitää heidät yllä.

Tee se oikein, ja saat fantastisen tuoton sijoituksestasi.

Et voi koskaan lopettaa oppimista

Momentit suunnittelijat lopettavat uusien web-designien oppimisen, kun he eivät enää ole tärkeitä. Internet on kyse relevanssista. Vakavasti, jos sivustosi näyttää liian vanhanaikaiselta, on todennäköistä, että monet kävijät eivät pidä kiinni siitä, mitä sinun on sanottava. Perception on kaiken.

Sinun ei tarvitse uudistaa kuuden kuukauden välein, mutta sinun pitäisi aina lukea lisää, löytää uusia muotoiluhankkeita ja keskustella muiden suunnittelijoiden kanssa. Kuten kaikki lääkärit, asianajajat tai muut ammattilaiset, sinun on pysyttävä ajan tasalla.

Se ei ole kaikki kiiltävät uudet muotoilutrendit. Uusia sovelluksia, tekniikoita ja temppuja on myös mahdollista helpottaa elämääsi ja työtäsi. Muistatko, mitä sanoin siitä, että olin tässä pitkään haussa? Joo. Tämä on osa sitä, mistä puhuin.

Sisältö koskee ennen kaikkea muuta

Olemme jo todenneet, että kun luot verkkosivustoa, sinun ei pitäisi koskaan hypätä suoraan grafiikan luomiseen. Todellakin, sinun ei pitäisi koskaan hypätä mitään suunnittelutyötä ensin, koskaan. Ensimmäinen vaihe sivuston suunnittelussa on varmistaa, että sinulla on verkkosivuston sisältö. Tämä tarkoittaa tekstiä, valokuvia, yhteystiedot, teokset. Tarvitset sen ensin. Tämä ei ole neuvoteltavissa.

Olet ehkä nähnyt ihmisiä, jotka täyttävät mallineensa "Lorem ipsum" -teksti. Voit myös tietää sen latinalaisena tekstinä tai "kreikkalaisena tekstinä", vaikka sillä ei todellakaan ole juurikaan mitään kummallekin kielelle. Se on vain tyhjää tekstiä, joka on suunniteltu osoittamaan, mitä muotoilu näyttää sisällöltään täytettynä. Vältä sitä, jos voit. Uskon, että suunnittelijat pyrkivät mahdollisimman paljon käyttämään sivuston todellista sisältöä. Heidän pitäisi tehdä tämä jopa niiden digitaalisissa lanka-kehyksissä.

Tämä käytäntö antaa paljon paremman käsityksen siitä, kuinka paljon tilaa tarvitset sisältösi, ja auttaa välttämään paljon vikoja ja ongelmia myöhemmin.

Säännön pitää mielessä tämä: sisältöä ei saa tehdä suunnitelmasi mukaiseksi. Suunnittelu tulee tehdä sopivaksi sisällöllesi. Kun puhutaan ääneen, tämä tuntuu ei-aivot. Kesti vuosia selvittääkseni. Ei, en ole yksin siinä.

Vastaus: typografia on pohjimmiltaan web design

Ellei verkkosivusto ole rakennettu, on kyse nimenomaan kuvista, videoista tai äänistä, siellä on paljon tekstiä. Todellakin, näissä tapauksissa saattaa olla paljon tekstiä. Teksti-kommentit, tekstikuvaukset, tekstin tarkistukset, tekstisisältöjä kyseisestä sisällöstä. Internet on enimmäkseen tekstiä.

Sen vuoksi on syytä ymmärtää, että typografia on tärkein esteettinen suunnittelutaito hallita. Jos ihmiset voivat lukea sisältöäsi, olet kultainen. Älä ymmärrä minua väärin, kaikki suunnittelutaidot ovat tärkeitä; mutta aloita typografialla. Hyvä näköinen teksti vie sinut kauas.

Selaa verkkoa eri tavalla kuin käyttäjät tekevät

Haluat muistaa, että ihmiset selailevat verkkoa eri laitteilla ja eri ympäristöissä. Sinun on otettava huomioon tämä eri tavoin.

Joillakin ihmisillä on pienempiä, paljon pienempiä näyttöjä. Muista, mitä kirjoitin edellä reagoivasta suunnittelusta? Tässä se tulee peliin. Verkkosivustosi on sopeuduttava näytöille, joiden koko vaihtelee kolmesta neljäänkymmentä tuumaa leveälle. Tämä ei ole helppoa, mutta se on sen arvoista. Se on sen arvoista, sillä jos useammat ihmiset voivat todella käyttää verkkosivustoasi, he todennäköisemmin ostavat sen, mitä myyt.

Toiset selaavat eri valaistuksessa kuin sinä, ja niiden näytöt voivat olla himmeitä. Tai heillä saattaa olla vain heikko näkö. Tämä tarkoittaa, että suunnittelusi tarvitsee kontrastia, ja paljon sitä. Nämä mahtavia, hienovaraisia ​​eroja väreissä ja sävyissä ei merkitse mitään monille käyttäjille.

Jotkut ihmiset käyttävät kosketusnäyttöjä. Nämä ovat yleensä samoja ihmisiä, jotka käyttävät pieniä näyttöjä. Sinun on huomioitava tämä varmistamalla, että linkit ja painikkeet ovat helposti koskettavia sormilla. Kun testat omia malleja omilla mobiililaitteilla, saatat kohdata muita käyttökelpoisuusongelmia.

Sitten on näkövammaisia. On olemassa ihmisiä, jotka käyttävät vain erilaisia ​​selaimia. Ihmiset, jotka käyttävät tekstipohjaisia ​​selaimia. Voisin jatkaa, mutta asia on tämä: käyttäjien kokemukset sivustossasi vaihtelevat, joskus suuresti. Älä unohda sitä.

Myydät jotain

Lopuksi, muista suunnitella myyntiin. Ja kyllä, myyt jotain. Vaikka olet vain bloggaaminen omasta kokemuksestasi, olet edelleen myymässä itseäsi. Voit myydä kokemuksiasi, oletettavasti oletuksella, että ne kiinnostavat tai antavat arvoa lukijoille. Blogin tapauksessa tämä voi merkitä vain sitä, että ihmiset löytävät haluamansa viestit nopeasti ja helposti. Esite-sivuston osalta tämä voi merkitä sitä, että jokainen sivu suunniteltaisiin parhaiten osoittamaan tuotteen / palvelun mahtavuus, samalla kun on helppo ostaa asia.

Tee tämä kaikesta sivustosta, mukaan lukien sisällön ja sivuston todellinen ulkoasu. Ihmiset tarvitsevat nähdä, mitä myy, ja ole vakuuttunut siitä, että he haluavat sen. Nopeasti. Heidän on osoitettava, että on helppo tapa toimia sen mukaan, mitä myyt. Jos olet bloggaaja, kyseinen toiminto voi olla tilata blogisi. Jos myyt tuotteen tai palvelun, saatat antaa rahaa kyseiselle tuotteelle / palvelulle.

Tarvitsevat taidot

Jos haluat tehdä tämän ammattimaisesti, tarvitset erilaisia ​​taitoja. Tässä keskitymme web-sivuston suunnittelun ja rakentamisen edellyttämiin taitoihin. Tarvitset myös liiketoiminnan ja viestintätaitoja tietenkin. Kun olet valmis oppimaan kaiken mitä voit, tarkista liiketoiminta luokka täällä WDD.

Nyt aloitamme ensimmäiset asiat, jotka sinun tarvitsee tietää.

Käyttäjäkokemus

Käyttäjäkokemus - tai UX-suunnittelu tässä yhteydessä on kyse siitä, miten useimmat ihmiset käyttävät verkkosivustoja ja kääntävät tämän tiedon erinomaiseksi sivuston suunnitteluksi. Se on prosessi, se on filosofia, ja se on paljon työtä. Muista, miten verkkosivustoja käytetään, voi olla erilainen kuin muut ihmiset tekevät. Mitä mieltä sinulla on, ei ole järkevää käyttäjille. Web-suunnittelijat kaikilla tasotasoilla unohda, että aika ajoin, ole varovainen.

Tietenkin on resursseja, jotka voivat auttaa sinua aloittamaan, kuten Mikä on käyttäjäkokemus? Smashing Magazine: n kattava artikkeli kattaa UX-suunnittelun perusteet ja sisältää massiivisen linkkiluettelon muihin resursseihin. Kun olet valmis, muista lukea UI vs UX: Mikä on ero? , tekijänä Dain Miller. (Joskus näet termejä, kuten käyttöliittymän muotoilu ja UX-muotoilu, joita käytetään vaihtelevasti ja jotka antavat käyttäjille väärän kuvan.)

Tämä on myös melko hyvä aika oppia wireframing. Wireframing on prosessi, jonka aikana voit piirtää alustavia ideoita kynälle ja paperille. Kynä ja paperi tai piirustusohjelma tablet-laitteella on ihanteellinen sellaisten nopeiden ja karkeiden käsitteiden kanssa, joiden kanssa työskentelet.

Myöhemmin voit käyttää työpöytä- tai tablet-sovellusta yksityiskohtaisemman version ulkoasusta. Tämä prosessi on olennainen osa päättää alusta alkaen siitä, miten sivustosi toimii.

Jotta nopea käyttöönotto perusjyrsintäsuunnitteluun, tutustu Wireframe-sovellusten käyttäminen kehitysprosessin tehostamiseen . Jotta laajempi esittely, jossa on pitkä resurssien luettelo, luetaan Beginning's Guide to Wireframing .

Esteettiset taidot

Jotkut väittävät, että sinun pitäisi oppia koodata malleja ennen kuin vaivaudu yrittää tehdä ne näyttävät kauniilta. Ne saattavat olla oikein. Tässä artikkelissa kuitenkin halusin käsitellä teoriaa ennen käytännön taitoja.

Estetiikka: Se on hankala asia. Mikä näyttää hyvältä värimallilta joillekin, voi näyttää suorastaan ​​oudolta muille. Fontit, jotka tuntuvat "juuri oikealta" sinulle, voivat näyttää täysin väärässä yrityksesi kumppaneilta. Se tuntuu hyvin, hyvin subjektiiviselta.

On kuitenkin tiedettä, että asiat näyttävät hyvältä. Se voi tuntua epätäsmälliseltä tiedeltä, mutta perussääntöjen tuntemus saa sinut moniin ongelmiin. Aivan kuten missä tahansa muussa luovan kurinalaisuudessa, sääntöjen tunteminen on ensimmäinen askel. Sitten opit sääntöjen rikkomiseen luovilla tavoilla rikkomatta sivustosi.

Typografia

Muista, mitä sanoin oppimistyypeistä ensin? En huvsinut. Internet on teksti. Se on sanoja. Näiden sanojen pitäisi näyttää hämmästyttävältä . Typografia on enemmän kuin oikean fontin valitseminen. Typografia koskee käytettävyyttä. Sinun on valittava oikeat fonttikoot ja fonttityypit, jotta tekstisi on luettavissa suurimmalle osalle ihmisiä suurimmalla osalla näytöistä. Sinun on määritettävä otsikoiden ja otsikoiden oikeat koot visuaalisen hierarkian luomiseksi. Tekstin on järkevää saada mahdollisimman suuri määrä ihmisiä.

Tässä auttaa sinua tekemään niin Butterickin käytännön typografia . Tässä kirjassa on kaikki: erinomaiset selitykset typografisista käsitteistä, typografian säännöt, suuret esimerkit ja yksi Britannian kuultavista otsikoista, joita olen koskaan kuullut. Sinun pitäisi lukea koko kirja. Voit tehdä sen verkossa ilmaiseksi tai tilata reaaliaikaisen kopion. Tee se. Vaikka et koskaan pääse suunnittelemaan ensimmäistä verkkosivustoasi, tämän kirjan neuvoja parantavat jokaisen asiakirjan ulkoasua.

Jos et halua lukea koko kirjaa, tutustu lyhyt versio . Kirjaimellisesti alle kymmenessä minuutissa, opit vähintään mitä sinun tarvitsee tietää.

Kun olet oppinut typografian säännöt, voit yrittää hankkia joitakin fontteja projekteihisi. Siellä on paljon hyviä vapaita, joten katsokaa. Monet ihmiset, jotka itse olen mukana, valitsevat kirjasimet Google Web -fontit . Google-kirjasinten avulla voit suoraan upottaa fontit käytettäväksi verkkosivustollasi, joten se on kätevä. Vielä paremmin, eräät hienot suunnittelijat ovat menneet ja koonnut fonttiyhdistelmiä, joiden avulla voit kokeilla:

• Top 5 suositeltavaa Google Fonttiyhdistelmää
• 8 Amazing Google Font yhdistelmiä10 Lisää awesome Google
• WebFont-yhdistelmät kokeilemaan tänään
• 10 Lisää erinomaisia ​​Google-fonttien yhdistelmiä, joita voit kopioida

Jos haluat tehdä omia paria Google-kirjasimia, tutustu Web-fonttien yhdistin . Se on työkalu, jonka avulla voit nopeasti esikatsella fonttien yhdistelmiä järkevällä tavalla. Jos haluat kehittyneempiä typografioita, kokeile Antaa jklle totuttu rooli . Se on ilmainen suunnitelma, joka sopii useimpiin aloittelijoihin ja yksinäisiin suunnittelijoihin. Jos aloitat muiden kanssa työskentelyä ja sinun on todella annettava heille muokkaamismahdollisuus kirjasimen suunnitteluun, hinnoittelu ei ole ollenkaan huono. Typecastin avulla voit myös käyttää maksullisia kirjasimia, joita ei ole Google Fonts -kirjastossa.

Toinen paikka etsiä web-kirjasimia: Fontti-orava. Font-orava on massiivinen kirjasto ilmaisia ​​fontteja käytettäväksi verkkosivuilla. Toisin kuin Googlessa, upottaminen ei ole yhtä kätevää. Sinun täytyy tehdä se itse. Jos haluat oppia tekemään niin, tässä on a hyvä opas . Ennen kuin teet niin, voit kuitenkin jäädä eteenpäin ja oppia ensin perus HTML- ja CSS-tiedostoja.

Viimeisenä, mutta ei vähäisimpänä, on paljon hyviä fontteja, ilmaisia ​​ja maksullisia, jotka on lueteltu juuri täällä Webdesigner Depotissa. Meillä on myös paljon hyviä artikkeleita typografiasta, jotka ylittävät perusasiat. Katso kirjasinkokoelmasta fontteja (jotkut niistä ovat Freebies-osassa). Löydät typografian artikkelit täältä: https:// {$lang_domain} / Luokka / typografia /

Väriteoria

Värimallilla on vähän tekemistä oppimalla värien teknisiä nimiä. Joten, jos asiakkaasi pyytää fuchsiaa, mutta todella haluaa kuumaa vaaleanpunaista, sinä olet itse. (<- Todellista elämää.)

Väriteoria käsittelee värejä ja ihmisten tunteita, joita he voivat herättää. Se on todellista tiedettä. Tutustu tämän artikkelin Tutsplus-mainokseen, jos haluat tutustua väriteoriaan. Johdatus värimateriaaliin web-suunnittelijoille . Kun olet viimeistellyt tämän artikkelin, tutustu kahta värimallin generaattoria, jotka näkyvät lopussa.

Muista, että värimallilla on myös vaikutuksia sivustosi käytettävyyteen ja käyttäjäkokemukseen. Jos esimerkiksi tekstin väri on liian lähellä taustaväriasi, ihmiset eivät voi lukea sitä hyvin. Tämä ongelma pahenee näytön häikäisyllä, huonosti konfiguroiduilla näytöillä ja näköhäiriöillä.

HTML & CSS

HTML tarkoittaa "Hypertext Markup Language" -tekstiä. Jokainen verkkosivusto, jota olet koskaan katsellut, on tehty HTML: stä. HTML on, mikä kertoo verkkoselaimellesi, onko se tarkastelemassa selkeä vanhaa tekstiä, kuvaa, linkkiä, videota ja niin edelleen. Selaimesi kääntää sen näkyviin ruudulle.

Kieli tekee sivuston näyttävän melko kutsutaan CSS, ja se tarkoittaa "Cascading Style Sheets". CSS kertoo selaimelle, jonka fontti tekstin oletetaan olevan ja mitä värejä käytetään. CSS määrittelee myös sivustosi ulkoasun, kuinka painikkeet näyttävät, kuinka suuri tai pieni kaiken on tarkoitus olla ... voit jopa animoida tavaraa sen kanssa.

Näiden kielten oppiminen on yksinkertaista. Ne ovat helpoimpia tietokonekielisiä, joita voit oppia. Kuitenkin ne ovat myös laaja, ja ne voidaan yhdistää tonnistoina, tehdä tonnia mahtavia malleja. Se vie jonkin aikaa oppia käyttämään niitä oikein. Ehdotan alkaen Code Academy . Code Academy on sivusto, jossa voit oppia HTML ja CSS sekä muutamia ohjelmointikieliä, kaikki ilmaiseksi. Selitykset pidetään yksinkertaisina. Sinulle annetaan koodausharjoituksia ja elää palautetta työstäsi.

Kun olet tuntenut perusasiat, siellä on todella hämmästyttävä määrä sivustoja, joissa voit oppia lisää.

Basic JavaScript (valinnainen)

Javascript, kuten aiemmin mainittiin, on perusohjelmointikieli, jonka avulla voit manipuloida verkkosivustosi sisältöä sellaisilla tavoilla, joita HTML ja CSS eivät yksin pysty käsittelemään. Et kuitenkaan tosiaan tarvitse sitä. Se on myös suuruusluokkaa monimutkaisempi kuin perus HTML / CSS. Oi, se on uskomattoman hyödyllinen, mutta ensimmäiselle verkkosivustollesi ei ole välttämätöntä. Se on kuitenkin yksi tärkeimmistä web-suunnitteluun liittyvistä tekniikoista, joten mainitsen sen täällä.

Mitä voit tehdä sen kanssa? Oi asioita, kuten fancy diaesitys, soittaminen uuteen sisältöön lataamatta sivua uudelleen, parantamaan verkkosivujen käytettävyyttä ja paljon muuta! Jos haluat oppia tekemään nämä asiat, suositusni on sama kuin viimeisessä osassa: Code Academy. He ovat vain mahtavia.

jQuery

Sivuhuomautus: Code Academy -ohjelma opettaa myös, miten voit käyttää jQueryä, jos haluat. jQuery on lähinnä kirjaston aineisto, jota muut ihmiset ovat jo tehneet JavaScriptin kanssa. Se helpottaa JavaScriptin käyttöä verkkosivuilla helpottaen sisällön valitsemista ja manipulointia.

Jos et ymmärrä mitään, se on okei. Aloita HTML ja CSS. Opi vähän säännöllistä JavaScriptia. Katso muiden ihmisten koodia ... paljon. Tämän ja Code Akatemian kurssin välillä alkaa selvittää se.

Työkalut, joita tarvitset

Ohjelmisto voi olla koskettava aihe, jossa jotkut ihmiset kiroilevat yhdellä kuvankäsittelyohjelmalla ja muut saarnaavat suosikki tekstieditorinsa hyvää uutista. Toiset taas huutavat: "Ei! Olet kaikki väärässä! "Argumentit menevät. He voivat joskus saada melko voimakkaita; mutta voit jättää suurimman osan siitä.

Toiset eivät ole kovin innostuneita sovelluksistaan. Ne kuitenkin saavat mukavan tietyssä sovelluksessa, eivätkä ne pidä muutosta. Tämä ajattelutapa on kuolema mille tahansa suunnittelijalle tai ohjelmoijalle. Jokaisen pitäisi kestää säännöllisesti aikaa kokeilla uusia työkaluja, työnkulkuja ja prosesseja. Sinulla ei ehkä ole aikaa tehdä sitä jatkuvasti, ja se on okei. Siinä on jotain sanottavaa: "Jos se ei ole rikki, älä korjaa sitä." Minun mielestäni sinun ei pitäisi koskaan pelätä kokeilla jotain uutta, varsinkin tällä alalla.

Joten tässä minä teen: luetan muutamia suuria, ilmaisia ​​työkaluja. Jos pidät niistä, hyvä! Jos sinusta tuntuu, että tarvitset jotain erilaista, on listoja vaihtoehtoluetteloista.

Täysi sarja moderneja selaimia

Ah, selain. Saatat tuntea sen nimellä "Chrome" tai "Firefox" tai, Jumala kieltää, "Sininen" on hieno ". Kukaan niistä ei ole aivan sama. Heillä kaikilla on omat vihjeensä, ja sivustot voivat näyttää kummastakin hieman erilaiselta. Ne voivat myös näyttää radikaalilta eri tavoin, riippuen siitä, miten verkkosivusto on koodattu. Sinun on testattava verkkosivustosi ja varmista, että se näyttää oikealta mahdollisimman monelta. Onneksi selainominaisuudet ovat saavuttaneet pisteen, jossa sivustot alkavat näyttää lähes täsmälleen samalta kussakin. Ainakin sivuston ulkoasut eivät yleensä ole enää ongelma.

Silti avaimet työn laadun varmistamiseksi ovat testaamassa sitä mahdollisimman monessa ympäristössä. Jos tietokoneesi / kannettavan tietokoneen käyttöjärjestelmä on Windows, sinulla on jo Internet Explorer (Blue E). Haluat myös Firefox ja Google Chrome , vähintään.

Macissa sinulla on Safari, mutta sinulla on ongelmia Internet Explorerin käyttämisessä. Se on toteutettavissa, mutta ärsyttävää. Jos tietokoneessa on Linux-johdannainen, kuten Ubuntu, voit testata Safari 5: n ja Internet Explorer 8: n ja sen alapuolella. On huomattava, että IE 8 ja alla ovat tuskallisimmat IE-versiot, joita ei enää käytetä. Itse asiassa Internet Explorer on yleistynyt ja vähemmän ihmisiä käyttää sitä vuosittain. Lisäksi Microsoft julkaisee uuden selaimen kokonaan Windows 10: n kanssa Pelaa Linuxissa .

Mobiiliselaimet

Omien laitteidensi rajoittavat mobiiliselaimen testausta. Se sanoi, että tunnetuilla mobiiliselaimilla kaikilla on melko samanlaiset ominaisuudet.

Sanalla on se, että Firefox for the iPhone / iPad on julkaisutoiminnassa tänä vuonna. Voit kuitenkin asentaa Kromi , ja ooppera Mini juuri nyt.

Android-laitteissa voit asentaa Kromi , Firefox , Ooppera , ja Opera Mini. Safari ei rakasta, vaikka se ei ole mikään yllätys. Apple pitää pitää asioita "perheessä".

Luuletko tämän olevan paljon selaimia testata? On tonnia enemmän! Käyttäjätasot ovat kuitenkin suhteellisen pieniä. Kun testaat selaimissa, sinun on pelattava enemmistöön. tai aja itsesi hulluksi.

Wire-kehystystyökalut

Kynä ja paperi (tai piirustussovellus)

Mainitsin aiemmin, että haluat aloittaa lanka-kehystämisen kynällä ja paperilla tai kenties jonkinlaisella piirustussovelluksella. Tämä on tärkeää . On hyvin harvinaista, että kuka tahansa ensimmäiset ideat ovat heidän parhaat ideansa. Käyttämällä nopeita kertakäyttöisiä lanka-kehyksiä voit hienosäätää ideoita hieman ennen sitoutumista mihinkään.

Piirrä sovelluksia

Kun olet valmis aloittamaan oikeat lanka-kehystasi, ne, joihin koodisi perustuu, tarvitset langallisen kehyksen app. Olen valinnut Google Drawin (kutsun piirustussovelluksi Google Drivessa), koska siinä on kaikki mitä tarvitsen. Se sisältää kaikki perusmuodot, joita voisin ikinä haluta, hyvät jakamisominaisuudet ja live-yhteistyö. Se on oikein, jos työskentelen jonkun muun kanssa, voimme tehdä muutoksia samaan lanka-kehykseen samanaikaisesti.

Olen tehnyt sen aiemmin. Se toimii. Se on mahtava. Oi, ja sinulla on noin 15 Gt vapaata tilaa työskentelemään. Se on web-pohjainen, joten se toimii missä tahansa työpöydän käyttöjärjestelmässä. Se ei näytä olevan tabletin versio, joka pettää minua. Et voi olla kaikkea.

Tablet-sovelluksissa on luettelo sovelluksista, jotka voivat tehdä työn täällä: Miten suunnitella rautalangat tablet-laitteellesi .

Koodieditori

Koodinmuokkaus on oikeastaan ​​vain julistema versio Notepadista. Olen ehkä juuri tehnyt muutamia techies sputter ja kirous, mutta se on enimmäkseen totta. Ero on se, että näissä tekstieditorissa on paljon lisätoimintoja, joiden avulla koodaavat verkkosivustot ja ohjelmat ovat helpommat. Muistatko, mitä sanoin ihmisistä, jotka ovat pakkomielle ohjelmistaan? Se huonontuu tekstieditorin väkijoukon kanssa.

Muista, että jos joku kysyy sinusta "Vim" tai "Emacs", palaa hitaasti rikkomatta silmäkosketusta. Se on ainoa suoja.

Tämä on yksi niistä hetkistä, jolloin sinun täytyy kokeilla ja nähdä, mitä pidät parhaiten. Voit kirjaimellisesti luoda verkkosivustoja Notepadissa, jos haluat. Se olisi tuskallista ja tylsiä jonkin ajan kuluttua, mutta voit.

Joten mitä sinun pitäisi aloittaa? Sanon sulkeet . Se on edelleen aktiivisessa kehityksessä, mutta se on vakaa. Se on ilmainen. Se toimii Windows, Mac ja Linux. Se on suunniteltu erityisesti ihmisille, jotka suunnittelevat ja rakentavat verkkosivustoja selaimessa.

Kuvankäsittelyohjelma

Et ehkä suunnittele verkkosivustoja enää Photoshopissa, mutta sinun on vielä luotava ja muokattava yksittäisiä kuvia. Olipa kyseessä valokuvia, logoja tai kuvakkeita, tarvitset jotain. Jälleen, käytä mitä tahansa teitä. Se voisi olla Photoshop, GIMP, Paint.Net tai jokin Corel-sovelluksista.

Paikallinen palvelin (puolivaihtoehto)

Lopuksi kannattaa asentaa web-palvelin tietokoneellesi. Verkkopalvelinta käytetään yleensä kertomaan Internetille laajalti, "Tarkista se! Tässä on verkkosivusto. "Periaatteessa verkkopalvelin antaa kaikille luvan tarkastella verkkosivustosi muodostavia tiedostoja.

Ellei sinulla ole pelottavaa-hämmästyttävää Internet-yhteyttä ja yhtä pelottavaa nopeaa tietokonetta, et avaa palvelimesi Internetiin. Sen sijaan voit asentaa palvelimen jäljitellä miten asiat toimivat verkossa.

Tietokoneen palvelimella työskentelyn oppiminen voi säästää paljon aikaa, kun tiedostoja ladataan varsinaiselle isäntäpalvelimelle. Joten, luultavasti haluat yhden, vaikka se ei ole ehdottoman välttämätöntä.

Helppokäyttöisyyden vuoksi sanon aluksi XAMPP . Voit asentaa sen Windows, Mac tai Linux, ja olet hyvä mennä.

Esimerkkiprosessi

Oletetaan, että olet saanut tietyt taidot kaikilla taidoilla ja työkaluilla, joita tarvitset ensimmäisen sivuston rakentamiseen. Vaihtoehtoisesti voimme sanoa, että haluat kokeilla taitojasi ensimmäistä kertaa. Riippumatta, on aika laittaa kaikki, mitä olet oppinut käyttämään. Olen koonnut esimerkkiprosessin, jota voit käyttää sivustosi suunnittelussa ja koodauksessa. mutta älä ota sitä evankeliumina.

Leiki sen kanssa. Muokkaa sitä. Muokkaa sitä. Vaikka on olemassa tiettyjä asioita, jotka yksinkertaisesti pitäisi tehdä ensin, paljon yksityiskohtia riippuu sinulle. Prosessi vaikuttaa lopputulokseen, melkein mihin tahansa muuhun, mukaan lukien taidot ja kyvyt. Varmista, että se toimii sinulle ja kaikille asiakkaille, jotka saattavat työskennellä.

Hanki sisältösi yhteen

Hanki se asiakkaallesi tai kirjoita se itse. Voit vuokrata kopiolähettäjä ja valokuvaaja tai etsiä kunnollisia kuvia. Mitä haluat tehdä, saat tekstiä, kuvia ja mitä-olette yhdessä ja järjestänyt.

Jos kirjoitat itsellesi sisältöä, suosittelen lukemaan juuri kaiken, josta on kirjoitettu Copyblogger . Heillä on vuosien ja vuosien arvoinen neuvoja siitä, kuinka kirjoittaa hyvää sisältöä Internetiin.

Sisältöarkkitehtuuri

Huomaa: Sisältöarkkitehtuuri ei todennäköisesti ole tekninen termi. Tätä käytän tässä vaiheessa, koska tietoarkkitehtuuri oli jo otettu.

Kun sisältösi on yhdistetty, sinun on päätettävä, miten se järjestetään. Mitä kotisivulla tapahtuu? Mitä muilla sivuilla tapahtuu? Miten nämä sivut yhdistetään toisiinsa?

Tämä rakenneorganisaatio on ensiarvoisen tärkeää, ja se määrää monia sivustosi suunnittelun osia (erityisesti navigointi), miten järjestät tiedostot, kaiken.

Tässä on esimerkki mielikuvasta, jonka tein asiakkaalle jonkin aikaa, ja jossa mainitaan keskisuuren sivuston sisällön arkkitehtuuri ja navigointirakenne. Tämä sivusto sisälsi muutamia palveluja mainostavia perussivuja ja tuotekuvastoa:

Note: I used Google's drawing application for this, too.

Wireframing

Now, take everything you learned about wire-framing from the articles linked above, and have at it! Start with disposable wire-frames, and iterate quickly. Give each page of your site no more than, say, half an hour. (Actually, that might be a lot.) Remember, these first wireframes need not be very detailed. Create the basic layout, and nothing more.

Once you're ready, move on to your wire-framing application of choice. Create more detailed versions of the wire-frames for each page, including as much of the actual content as you can. Don't forget to include individual elements like forms and buttons. Try to define, as much as possible, exactly how the user is expected to interact with each page.

If you have a lot of the same type of page, for example, in a product catalog, just make one of each type. No need to make more work for yourself than you're already doing.

Creating Style Tiles (or some equivalent)

So you have your website structure, planned. That's great! If the fonts, color scheme, typographical styles, and other aesthetic stuff hasn't already been defined by a style guide, now is a good time to pick them.

Tyyli laatat are a great way to do this. Here's an explanation of what Style Tiles are, straight from the official website:

The files you download from this website will be Photoshop files. They're meant for you to play around with until you find the right combination of fonts, colors, and imagery to use as a guide while you build and style your website.

Coding

Basically, you open up your text editor and your main browser, then you start typing. You keep typing code until a page forms in the browser that is a combination of the structure you planned in your wireframes, and the style you planned in your style tiles. Then you keep typing code until you're happy with it. It's all about iteration.

The text editor I linked to above, Brackets, has a great feature for this part. Hit the “Live Preview” button on the right side of the Brackets window, and it will launch a browser window for you. (You need Google Chrome installed for this.) The browser window will update live with any changes you make.

During this part of the process, you'll find yourself re-sizing the browser a lot, to see what your website looks like at different screen sizes. You'll make typos, figure things out through trial and error, and spend lots of time going back and looking for those typos I mentioned.

People used to clicking and dragging things onto their canvas may get quite frustrated, at first. Once you have your workflow in place, however, designing in the browser can be a speedy process.

Testaus

Once you have all of your basic code in place, it's time to start testing your website on all those browsers I mentioned earlier. More bug fixes may ensue.

Don't sweat the really small inconsistencies between browsers, to start with. (If you're testing in Internet Explorer 8 or below, don't sweat the big inconsistencies.) Just make sure that people have access to all of the information on your site. The goal is to make sure that people can see what you're selling, and take some form of action based on what they read and see.

If some browsers show some pixel-for pixel differences, that's fine. That's life. The most important thing is to make it work.

Launch

Ready to put your website online? Have a domain name (example: mywebsite.com) and hosting (space on a computer that's constantly connected to the Internet)? Upload those files, kick back, relax, and…

Things to do post-launch

Fix the things you forgot.

Oh. Oikea. That thing… you meant to fix that before launch. How did you forget that? I mean, come on!

It happens to everyone. There are almost inevitably post-launch bugs. The bigger your site is, the more likely it is you missed or forgot something. For your convenience, here's a pretty thorough pre-launch checklist to go through: http://boagworld.com/mobile-web/pre-launch-checklist/

Ask Questions

You don't know everything you need to. You'll always run into new problems and challenges, techniques and browser bugs. You'll spend lots of time asking professionals how to accomplish things, and researching those same things.

I've said this many times, but Google is your friend. Also, before you ask a question, see if someone else has already asked it on Pino ylivuoto , a site where people discuss various computer languages and how to make stuff with them.

Often, you'll find that discovering the answers you need requires searching for very specific words and phrases relating to the technologies in question. Do your reading first, and get familiar with the lingo. It'll make getting help a lot faster.

Get feedback

You can't improve unless you know where you've made your biggest mistakes. Time and experience can teach you that, but others can teach you faster.

When you're just starting out, I'd suggest that you join a community too build a network of fellow designers who can help you out with feedback. One of the most well-known and longest-running communities is the Sitepoint Forum .

Do it all over again

Maybe it's been a year or so months and your site needs a re-design. Maybe you're building a new one. Whatever the reason, it's time to take all the skills you've learned, the knowledge and experience you've gained, and do it again.

Hey, I said it was a lot of work.

Esittelykuva, web design space kautta Shutterstock.

• ← Miten Googlen mobiililaajennuksen päivitys vaikuttaa sinuun (ja mitä sinä voit tehdä)
• Pitäisikö suunnittelijat oppia koodaamaan? →