kyllä, on täysin mahdollista opettaa itse web design. Kyselin tällä viikolla, miten ihmiset onnistuivat hankkimaan taidot ja yritin muistaa, mikä toimi minulla.
on kolme tärkeintä tapaa voit opettaa itsellesi web design.
- tekemällä. Ihmiset oppivat luomalla nettisivuja.
- käyttämällä verkkoresursseja. Jokainen löytää jossain vaiheessa netistä vastauksia siitä, miten verkkosivuja kannattaa suunnitella.
- lukemalla. Tämä yllätti minut. Useimmat suunnittelijat sanovat oppivansa verkkosuunnittelua osittain kirjoja lukemalla.
käydään siis jokainen näistä luokista läpi, miten opetetaan itselle verkkosuunnittelua.
verkkosivujen suunnittelun oppiminen tekemällä
paras tapa alkaa ymmärtää verkkosivuja on katsoa, miten olemassa olevat verkkosivut on koottu ja rakentaa ne itse.
tarkkaile, miten muut verkkosivut toimivat
aloittaaksesi useimmat Internetin verkkosivut on kirjoitettu ainakin osittain HTML-kielellä. Jotta näet HTML, joka luo tämän sivun, sinun täytyy ”tarkastella lähdekoodia” käyttämässäsi selaimessa. Kokeile mennä Cmd / Ctrl-U (Firefox), siirry Cmd/Ctrl-Alt/Opt-U (Chrome), ja jos käytät Internet Exploreria, sinun täytyy todella kysyä itseltäsi, onko web design oikea urapolku sinulle.
yritä katsoa HTML: stä, miten verkkosivun eri elementit on merkitty ylös. Voit ehkä tunnistaa tietyt tunnisteet heti. Esimerkiksi <p> on kappaleelle, <h1,2,3> ovat otsikoita, <img> on kuvalle jne. Huomaat, että useimmat näistä tägeistä toimivat pareittain merkitsemään merkin alkua ja loppua ylöspäin, esimerkiksi <p>Text here</p> näyttää kappaletunnisteen avaamisen ja sulkemisen sulkutunnistetta edeltävällä vinoviivalla ( / ). Muut tägit eivät toimi pareittain, esimerkiksi kuvan tagi self sulkeutuu <img src = "https://robcubbon.com/images/rob.jpg" /> tämä ohjeistaa selainta näyttämään kuvan, jonka lähteenä on tietty verkko-osoite (src).
toinen asia saatat huomata HTML-lähteestä on, että kaikki HTML-sivut ovat rakenteeltaan samanlaisia. Ne kaikki alkavat <!DOCTYPE> julistuksella, jossa kerrotaan, missä HTML-versiossa se on, jota seuraa <HTML> julistus, jota seuraa <head> asiakirja, joka on säilö, joka sisältää linkkejä skripteihin, tyylilehtiin, metatietoon jne. <head> jälkeen tulee <body>, jossa verkkosivun elementit on merkitty ylös.
liikunta: Valitse kaikki lähdekoodi tämän sivun osaksi NotePad (PC) tai TextEdit (Mac) asiakirja ja tallentaa sen tietokoneeseen ”testi.html ” tai jotain. Avaa tämä tiedosto selaimessa ja sen pitäisi näyttää täsmälleen samalta kuin online-versio. Sammuta nyt yhteytesi Internetiin ja katso, miltä testisivu näyttää. Aika erilaista, vai mitä? Yritä selvittää miksi.
työvälineet
tätä tehdessä on tiettyjä työkaluja, joita tarvitset.
- useita selaimia ja älypuhelimia. Kokeile testata omia sivustojasi eri selaimissa ja puhelimissa (tästä aloitat pitkään kestäneen vihasuhteen Internet Explorerin kanssa).
- tekstieditori. Voit käyttää perus NotePad (PC) tai TextEdit (Mac), tai ehkä Coda (Mac) tai Dreamweaver – älä käytä Dreamweaver visuaalisessa tilassa, vain työskennellä koodi, sinun täytyy ymmärtää, miten tämä kama toimii konepellin alla.
- validaattori. Vahvista web-sivuja HTML Validator ja CSS Validator (käytä selaimen plugin kuten Web Developer Chrome soittaa heille nopeasti).
- Chrome Developer Tools ja Firebug Firefoxille. Nämä työkalut auttavat ymmärtämään CSS ja JavaScript, joka, jos luulit HTML oli vaikeaa, eivät vie jonkin verran ymmärrystä.
- grafiikka ja kuvankäsittely. Web-suunnittelun keskiössä ovat Kuvankäsittelijät, kuten Photoshop tai ilotulitus. Nämä ovat melko kalliita,mutta on GIMP plus joukko online kuvankäsittelyohjelmat, jos olet juuri aloittamassa.
omien staattisten HTML-sivustojen luominen
vaikka ymmärryksesi HTML: stä, CSS: stä ja JavaScriptistä kasvaa, sinun pitäisi luoda staattisia HTML-sivustoja joko paikallisesti tai www-palvelimella. Jatkuvasti pelata koodin yrittää tehdä hienoja asioita. Yritä luoda tiettyjä elementtejä muilla verkkosivustoilla kopioimalla koodin bittejä.
vaikka lopulta luomasi sivustot eivät todennäköisesti ole HTML-tiedostoja, on tärkeää ymmärtää, miten staattisia HTML-sivustoja luodaan ensin ennen kuin voit alkaa käyttää PHP: tä ja/tai sisällönhallintajärjestelmiä HTML: n luomiseen.
omien verkkosivustojen luominen CMS
useimmat sivustot on luotu CMS-ohjelmistolla, joka voi luoda HTML-sivuja määritettyjen mallien sisällä. Parhaat ovat WordPress, Joomla ja Drupal, mutta on monia kevyempiä, avoimen lähdekoodin CMSs voit kokeilla, nämä opettaa sinulle, miten PHP, ja muiden CMSs, ASP, käytetään koota sivustoja.
käytä tietokoneellasi MAMP (Mac) tai WAMP (Windows) näitä järjestelmiä paikallisesti, jotta saat hyvän käsityksen niiden toiminnasta.
käyttämällä kuvankäsittelyohjelmaa
sinun on osattava käyttää Photoshopia tai jotain vastaavaa. Tarvitset tätä luoda grafiikkaa sivuston sekä tarjota täydellinen grafiikka siitä, miten sivusto näyttää, kun valmis tukea suunnitteluprosessia.
Get designing
Of course, I haven ’ t mentioned that the resulting websites will not only have validate, work, be found by search engines, serve a purpose and be marketed but also … they have to look good.
parantaaksesi taiteellista silmääsi, tuottaaksesi säännöllisesti työtä ja yrittääksesi sitten parantaa sitä. Sketch malleja paperille sitten työskennellä niitä Photoshop tai mitä grafiikka ohjelma sinulla on. Harjoittelu auttaa sinua tulemaan paremmaksi suunnittelijaksi. Suosittelen myöhemmin lisää resursseja, jotka auttavat sinua suunnitteluperiaatteiden kanssa.
Online resources
kun ihmiset haluavat vastauksia, he menevät internetiin ja ”Googlaavat sen” tai hakevat YouTubesta. Web design ei ole erilainen. On olemassa monia resursseja, jotka auttavat sinua verkossa. Ensinnäkin on W3 koulut, jotka web suunnittelijat viittaavat paras online itseopetus resurssi, on myös Tizag. Jotkut suosittelevat Lynda.com en tosin ole käyttänyt sitä henkilökohtaisesti.
blogit
maailmassa on useita upeita designblogeja. On olemassa suuria, jotka voivat auttaa sinua kuten SmashingMagazine, WebDesignerDepot, 1stWebDesigner ja Envato network.
itse saan enemmän irti independent web and graphic designers who-blogista. On kuitenkin paljon, että olen oppinut vuosien varrella, joten tässä on vain muutama ja pyydän anteeksi mitään erinomaisia bloggaajia, jotka olen jättänyt pois luettelosta.
- Chris Colyer ’s CSS Tricks is a great looking responsive website but also has great web design info and tricks
- Veerle Pieters has great Photoshop and Illustrator tutorials on Veerle’ s blog
- David Airey is someone I ’ ve followed for a while on his own eponymous blog, LogoDesignLove and IdentityDesigned. Davidia kiinnostaa muun muassa organisaatioiden kokonaisvaltainen identiteetti.
- Chris Spooner on opettanut minulle paljon tutoriaaleilla blogissaan Spoongraphicsissa ja plus information and inspiration Line25: ssä
- Fabio Sasson upeasti suunniteltu sivusto Abduzeedo tarjoaa suurta inspiraatiota ja outoutta.
- Nick La ’ s N. Design studiolla ja Webdesignerwallilla on fantastista tietoa ja suuri inspiraatio.
voit vapaasti lisätä suosikkisi designblogeista alla oleviin kommentteihin.
foorumit
kun hakkaa päätään tiiliseinään, foorumit ovat loistavia paikkoja saada vastauksia. Lähetä kuvaus ongelmasta ja verkko-osoite ja hyvin usein joku saa takaisin sinulle ratkaisun. Tässä muutamia suosikkifoorumejani.
pidän Estetica Design Forumista, DesignForums.co.uk ja suunnittelija, s Talk. Siellä, s digitaalinen kohta ja Sitepoint laajempia kyselyitä, WordPress foorumi on erinomainen ja siellä,s Warrior Forum internet-markkinointiin.
Kirjat
monet verkkosuunnittelijat väittävät, että vanhat kunnon fyysiset kirjat ovat auttaneet heitä opettamaan verkkosuunnittelua. Tässä muutamia suosikkejani ja joitakin muita, joita on suositeltu minulle. Linkit ovat Amazon.com affiliate linkkejä.
- Rakenna oma sivusto oikealla tavalla käyttäen HTML & CSS 3th (third) edition Ian Lloyd on Sitepointin kirja, jonka luin vuosia sitten. Se todella auttoi minua tuolloin, koska se keskittyy web design parhaita käytäntöjä. Varmista, että ostat ajan tasalla painos (tällä hetkellä kolmas painos, joka sisältää paljon HTML5).
- CSS: The Missing Manual by David Sawyer McFarland sisältää selityksiä, esimerkkejä ja askel askeleelta oppaita. Tämä kirja on erityisen suositeltavaa, koska se antaa sinulle taustan CSS ja sisältää paljon CSS3.
- Jason Beairdin The Principles of Beautiful Web Designin 2. Painos väittää, että suunnittelu on taito, joka voidaan oppia, ja opettaa muotoilun perusperiaatteet.
- Color Design Workbook: a Real World Guide to Using Color in Graphic Design by AdamsMorioka (editor) tarjoaa tärkeitä tietoja, joita tarvitaan värin soveltamiseksi luovasti ja tehokkaasti suunnittelutyöhön.
- Don ’ t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition Steve Krug instant classic on web usability, täynnä oivalluksia ja käytännön neuvoja.
- Getting Real: fiksumpi, nopeampi, helpompi tapa rakentaa onnistunut web-sovellus 37 signaalit voi olla noin luoda web-sovelluksia ei sivustoja, mutta se on niin loistava tapa yksinkertaistaa web-prosesseja, että löysin sen niin hyödyllinen lukea.
- Chris Coyierin & Jeff Starrin WordPressiin kaivautuminen on erittäin suositeltavaa suurena WordPress-kirjana. Saatavana PDF-versiona (kätevä koodin kopioimiseen) sekä fyysisenä versiona.
on paljon enemmän kirjoja, joita olisin voinut ottaa mukaan erityisesti suunnitteluteoriasta. Jos sinulla on ehdotuksia kirjoja, jotka ovat auttaneet sinua web design, kerro meille niistä kommenteissa.
mitä voi tehdä
monet suunnittelijat ovat sitä mieltä, että epäonnistuminen on itse asiassa paras opettaja. Joten mene sinne ja suunnitella sivustoja! Kun, kuten epäilemättä tapahtuu, törmäät tiiliseinään, voit käyttää joitakin online-resursseja täällä auttaa sinua. Ja kun et voi enää katsoa tietokoneen näyttöä, voit lukea kirjan siitä!