da, este perfect posibil să vă învățați designul web. Am întrebat în această săptămână pentru a vedea modul în care oamenii au reușit să dobândească abilitățile și am încercat să-mi amintesc ce a lucrat pentru mine.
există trei moduri principale în care vă puteți învăța designul web.
- făcând. Oamenii învață prin crearea de site-uri web.
- prin utilizarea resurselor online. Toată lumea la un moment dat găsește răspunsuri online despre cum să proiecteze site-uri web.
- citind. Asta m-a surprins. Majoritatea designerilor spun că învață web design, în parte, citind cărți.
deci, să parcurgem fiecare dintre aceste categorii pentru a afla cum să vă învățați designul web.
învățarea designului web făcând
cel mai bun mod de a începe să înțelegeți paginile web este să priviți cum sunt puse împreună Site-urile existente și să le construiți singuri.
observați cum funcționează alte site-uri web
pentru a începe, majoritatea paginilor web de pe internet sunt scrise, cel puțin parțial, în HTML. Pentru a vedea HTML-ul care creează această pagină, trebuie să „vizualizați sursa” în browserul pe care îl utilizați. Încercați să mergeți Cmd / Ctrl-U (pentru Firefox), mergeți Cmd/Ctrl-Alt/Opt-U (pentru Chrome) și, dacă utilizați Internet Explorer, trebuie să vă întrebați dacă designul web este calea de carieră potrivită pentru dvs.
încercați să căutați prin HTML pentru a vedea cum sunt marcate diferitele elemente de pe o pagină web. Este posibil să puteți identifica anumite etichete imediat. De exemplu <p> este pentru paragraf, <h1,2,3> sunt titluri, <img> este pentru o imagine etc. Veți observa că majoritatea acestor etichete funcționează în perechi pentru a indica începutul și sfârșitul marcajului, de exemplu <p>Text here</p> arată deschiderea și închiderea etichetei paragrafului cu bara (/) care precede eticheta de închidere. Alte etichete nu funcționează în perechi, de exemplu eticheta imagine se închide automat <img src = "https://robcubbon.com/images/rob.jpg" /> aceasta instruiește browserul să afișeze o imagine cu o anumită adresă web ca sursă (src).
un alt lucru pe care l-ați putea observa din sursa HTML este că toate paginile HTML au o structură similară. Toate încep cu o declarație <!DOCTYPE> care spune în ce versiune de HTML se află, urmată de o declarație <HTML>, urmată de <head> a documentului, care este un container cu diverse elemente, inclusiv linkuri către Scripturi, foi de stil, meta informații etc. După <head> vine <body> unde sunt marcate elementele paginii web.
exercițiu: Selectați tot codul sursă al acestei pagini într-un document NotePad (PC) sau TextEdit (Mac) și salvați-l pe computer ca „test.html ” sau ceva. Deschideți acest fișier într-un browser și ar trebui să arate exact la fel ca versiunea online. Acum opriți conexiunea la internet și vedeți cum arată pagina de testare. Destul de diferit, nu? Încercați să aflați de ce.
instrumente ale comerțului
în timp ce faceți acest lucru, vor exista anumite instrumente de care veți avea nevoie.
- mai multe browsere și telefoane inteligente. Încercați să vă testați propriile site-uri pe diferite browsere și telefoane (aici veți începe o aventură de ură de lungă durată cu Internet Explorer).
- editor de Text. Puteți utiliza NotePad-ul de bază (PC) sau TextEdit (Mac), sau poate Coda (Mac) sau Dreamweaver – nu utilizați Dreamweaver în modul vizual, ci doar lucrați la cod, trebuie să înțelegeți cum funcționează aceste lucruri sub capotă.
- Validator. Validați-vă paginile web cu validatorul HTML și validatorul CSS (utilizați un plugin de browser precum Web Developer pentru Chrome pentru a le apela rapid).
- instrumente pentru dezvoltatori Chrome și Firebug pentru Firefox. Aceste instrumente vă ajută să înțelegeți CSS și JavaScript care, dacă ați crezut că HTML este dificil, înțelegeți.
- grafice și editori de imagini. În centrul designului web sunt editorii de imagini precum Photoshop sau Fireworks. Acestea sunt destul de scumpe, dar există GIMP plus o serie de editori de imagini online dacă abia începeți.
crearea propriilor site-uri HTML statice
în timp ce înțelegerea HTML, CSS și JavaScript crește, ar trebui să creați site-uri HTML statice, fie local, fie pe un server web. Jucați continuu cu codul pentru a încerca să faceți lucruri interesante. Încercați să recreați anumite elemente pe alte site-uri web copiind biți ai codului.
deși site-urile pe care le creați în cele din urmă nu sunt susceptibile de a fi făcute din fișiere HTML, este vital să înțelegeți mai întâi cum să creați site-uri HTML statice înainte de a putea începe să utilizați PHP și/sau sisteme de gestionare a conținutului (CMS) pentru a crea HTML.
crearea propriilor site – uri web cu CMS
majoritatea site-urilor web sunt create de CMS-software care poate crea pagini HTML în șabloanele specificate. Cele mai bune sunt WordPress, Joomla și Drupal, dar există o serie de CMS-uri mai ușoare, open source, cu care puteți experimenta, acestea vă vor învăța cum PHP și cu alte CMS-uri, ASP, sunt folosite pentru a pune cap la cap Site-urile web.
utilizați MAMP (Mac) sau WAMP (Windows) pe computer pentru a rula aceste sisteme la nivel local, astfel încât să puteți obține o bună înțelegere a modului în care funcționează.
utilizarea editorilor de imagini
va trebui să știți cum să utilizați Photoshop sau ceva similar. Veți avea nevoie de acest lucru pentru a crea grafică pentru site, precum și pentru a oferi imagini complete despre modul în care site-ul va arăta când va fi terminat pentru a ajuta procesul de proiectare.
Get designing
desigur, nu am menționat că site-urile rezultate nu numai că vor trebui să valideze, să funcționeze, să fie găsite de motoarele de căutare, să servească unui scop și să fie comercializate, dar și … trebuie să arate bine.
pentru a vă îmbunătăți ochiul artistic, produceți în mod regulat muncă și apoi încercați să o îmbunătățiți. Schițați desenele pe hârtie, apoi lucrați la ele în Photoshop sau orice program grafic aveți. Practica vă va ajuta să deveniți un designer mai bun. Voi recomanda mai multe resurse mai târziu, care vă vor ajuta cu principiile de proiectare.
resurse Online
când oamenii doresc răspunsuri, ei merg pe internet și „Google it” sau caută pe YouTube. Web design-ul nu este diferit. Există multe resurse care vă vor ajuta online. În primul rând, există școli W3 pe care designerii web le numesc cea mai bună resursă de predare online, există și Tizag. Unii oameni recomandă Lynda.com deși nu l-am folosit personal.
bloguri
există o serie de bloguri de design grozave acolo. Există unele mari care vă pot ajuta să vă placă SmashingMagazine, WebDesignerDepot, 1stWebDesigner și rețeaua Envato.
personal, primesc mai multe de la Web-ul independent și designerii grafici care blog. Există, totuși, sarcini pe care le-am învățat de-a lungul anilor, așa că aici sunt doar câteva și îmi cer scuze pentru orice bloggeri excelente pe care le-am lăsat de pe listă.
- trucuri CSS Chris Colyer este un mare caută site-ul receptiv, dar are, de asemenea, mare Web Design info și trucuri
- Veerle Pieters are mare Photoshop și Illustrator Tutoriale pe Blog Veerle lui
- David Airey este cineva l-am urmat pentru un timp pe propriul blog omonim, LogoDesignLove și IdentityDesigned. David este interesat de identitatea generală a organizațiilor, printre altele.
- Chris Spooner m-a învățat multe tutoriale la blogul său de la SpoonGraphics și plus informații și inspirație la Line25
- site-ul minunat proiectat al lui Fabio Sasso Abduzeedo oferă o mare inspirație și ciudățenie.
- Nick la N. Design Studio și WebDesignerWall au unele informații fantastic și mare inspirație.
vă rugăm să nu ezitați să adăugați blogurile de design preferate în comentariile de mai jos.
forumuri
când vă bateți capul de un zid de cărămidă forumurile sunt locuri minunate pentru a obține răspunsuri. Posta o descriere a problemei și adresa web și foarte des cineva va primi înapoi la tine cu o soluție. Iată câteva dintre forumurile mele preferate.
îmi place Estetica Design Forum, DesignForums.co.uk, și Designer, s vorbesc. Acolo, s Punct Digital și Sitepoint pentru interogări mai largi variind, Forumul WordPress este excelent și acolo, s Warrior Forum pentru Internet marketing.
Cărți
mulți designeri web susțin că cărțile fizice bune de modă veche i-au ajutat să-i învețe designul web. Iată câteva dintre preferatele mele și altele care mi-au fost recomandate. Link-urile sunt Amazon.com link-uri afiliate.
- Construiți-vă propriul site web în mod corect folosind HTML & CSS ediția a 3-A (A treia) de Ian Lloyd este o carte Sitepoint pe care am citit-o cu ani în urmă. M-a ajutat cu adevărat la acea vreme, deoarece se concentrează pe cele mai bune practici de design web. Asigurați-vă că cumpărați o ediție actualizată (în momentul de față a treia ediție care include multe pe HTML5).
- CSS: manualul lipsă de David Sawyer McFarland include explicații, exemple și tutoriale pas cu pas. Această carte este recomandată în special, deoarece vă oferă fundalul CSS și include multe despre CSS3.
- the Principles of Beautiful Web Design, ediția a 2-A de Jason Beaird, susține că designul este o abilitate care poate fi învățată și vă învață principiile fundamentale ale designului.
- Color Design Workbook: un ghid din lumea reală pentru utilizarea culorii în designul grafic de AdamsMorioka (editor) oferă informațiile vitale necesare pentru a aplica culoarea creativ și eficient lucrărilor de proiectare.
- nu mă face să mă gândesc: O abordare de bun simț pentru Web Usability, ediția a 2-A de Steve Krug un clasic instant pe web usability, încărcate cu perspective și sfaturi practice.
- Noțiuni de bază reale: mai inteligent, mai rapid, mai ușor mod de a construi o aplicație web de succes de 37 semnale poate fi despre crearea de aplicatii web nu site-uri, dar are un mod minunat de a simplifica procesele web pe care am găsit-o astfel de citire util.
- săpat în WordPress de Chris Coyier & Jeff Starr vine foarte recomandat ca Marea Carte WordPress. Disponibil ca versiune PDF (la îndemână pentru copierea codului), precum și o versiune fizică.
sunt multe alte cărți pe care le-aș fi putut include în special despre teoria designului. Dacă aveți sugestii de cărți care v-au ajutat cu designul web, vă rugăm să ne anunțați despre ele în comentarii.
ce poți face
mulți designeri susțin că eșecul este de fapt cel mai bun profesor. Deci, ieși acolo și site-uri de design! Când, așa cum se va întâmpla fără îndoială, veți întâlni un zid de cărămidă, puteți utiliza unele dintre resursele online aici pentru a vă ajuta. Și, atunci când nu mai puteți privi ecranul computerului, puteți citi o carte despre el!