este de învățare elementele de bază de web design încă pe lista ta „într-o zi”? De ce nu ai început încă? Am reunit 30 de sfaturi și resurse pentru a vă ajuta să începeți să învățați designul web în această lună (și poate chiar să vă găsiți o nouă cale de carieră!)

designerii grafici, designerii de imprimare și reclamele care doresc să învețe ceva nou sau să intre pe site-ul web trebuie să renunțe la amânare. Fiecare zi în care nu faceți acest prim pas vă lasă cu o zi mai departe în spatele tuturor celorlalți!

urmați acești pași pentru a începe să învățați cum să creați primul dvs. site web, cele mai bune practici din industrie și multe altele—toate în 30 de zile!

începeți un site web

cel mai bun mod de a începe să învățați web design este să începeți să o faceți. Acesta este sfatul lui David Kadavy, autorul designului <pentru> hackeri.

vă recomand să începeți un blog. Am început un blog doar pentru a avea un loc de joacă pentru web design, iar 7 ani mai târziu, am lansat o carte best-seller pe această temă. Având un proiect personal, cum ar fi un blog, vă oferă un loc în care puteți încerca lucruri noi, iar șeful dvs. nu vă va concedia dacă vă încurcați.

nu trebuie să începeți cu un site web masiv sau un design nebun; începeți mic. Joaca-te cu site-ul, dau seama ce face lucrurile să funcționeze. (Și asigurați-vă că inspectați codul, astfel încât să puteți începe să vă familiarizați cu ceea ce face ca site-ul dvs. să funcționeze.)

vrei să începi repede? Un constructor de site-uri web precum Wix vă poate ajuta să vă oferiți un început cu un design elegant al site-ului web, pe măsură ce începeți să învățați conceptele și elementele de bază ale ceea ce intră într-un site web.

Citiți tot ce puteți

începeți să citiți. Pentru că sunteți pe acest blog, probabil că sunteți obișnuiți să urmăriți ce se întâmplă în lumea designului. Continuă să citești.

Citiți tot ce puteți despre designul site-ului web, tendințele, tehnicile și cele mai bune practici. Urmăriți designerii pe care îi admirați pe social media.

aruncați o plasă largă și pentru citirea designului site-ului dvs. web. Citiți despre elementele de bază pentru a afla un cod, citiți despre teoria designului și citiți tutoriale și articole actuale.

fii un comunicator eficient

dacă nu ești persoana cea mai articulată, folosește aceste abilități. O mare parte a designului site-ului este comunicarea.

designerii de site-uri web trebuie să comunice cu clienții în mod regulat pentru a-și da seama ce problemă trebuie să rezolve designul; trebuie să comunice aceste soluții și să le implementeze.

Abonați-vă la Tuts+& Envato Elements

luați în considerare un abonament la Envato Elements, care vă oferă și acces la excelenta resursă de învățare Tuts+.Tuts + publică cursuri regulate de grafică și web design, de la tehnici de bază, până la cele mai recente abordări și dezvoltări avansate. Este complet auto-paced, predate de instructori experți. De asemenea, veți avea acces la Envato Elements, care este o resursă excelentă pentru găsirea de grafică, șabloane și multe altele pentru a vă conecta la munca dvs. de design web.

gândiți-vă în HTML

HTML, sau hypertext markup language, este o piatră de temelie a designului site-ului web. HTML este scheletul care ajută la crearea structurii unui site web și odată ce puteți citi limba, lumea designului site-ului va avea mult mai mult sens.

W3Schools are un mare tutorial HTML starter cu sute de exemple HTML pe care le puteți juca cu pe ecran pentru a vedea ce se întâmplă și exact cum funcționează. (S-ar putea să-l găsiți mai intuitiv decât v-ați imaginat.)

Joaca-te cu cod la Codeacademy

în timp ce HTML este un început bun, puteți învăța aproape orice limbaj de programare de la Codeacademy. Setul gratuit de instrumente vă învață să codificați folosind activități și jocuri interactive.

puteți alege un curs Codeacademy unde și când aveți nevoie și puteți începe și opri după cum este necesar. Alegeți un subiect de învățat-dezvoltare web, programare, știința datelor – sau limbaj pe care să vă concentrați – HTML & CSS (un loc minunat pentru a începe), Python, Java, SQL, Ruby și multe altele.

învățați să înțelegeți CSS

CSS sau foi de stil în cascadă, definiți prezentarea unui document scris în HTML sau XML și SVG.

așa cum este definit de Mozilla

CSS descrie modul în care elementele trebuie redate pe ecran, pe hârtie, în vorbire sau pe alte suporturi.

Mozilla are, de asemenea, o colecție excelentă de resurse CSS pentru a începe, cu o introducere solidă a modului în care funcționează CSS, inclusiv selectori și proprietăți, scrierea regulilor CSS, aplicarea CSS în HTML, cum să specificați lungimea, culoarea și alte unități în CSS, cascadă și moștenire, elementele de bază ale modelului cutiei și depanarea CSS. Apoi, modulele se deplasează pentru a explica textul și casetele de stil.

aplicați-vă abilitățile de Design pe Web

dacă lucrați deja într-un domeniu de design creativ sau grafic, gândiți-vă la lucrurile pe care le știți deja și pe care le puteți aplica și designului site-ului web. Principiile care fac ceva atrăgător din punct de vedere vizual nu se schimbă pe baza medium și toată acea teorie a designului va fi utilă și în spațiul digital.

în timp ce elemente precum codul de învățare s-ar putea să nu se simtă naturale, având un fundal de design este un bonus imens. Ce bun este un site frumos codificat dacă nu unul vrea să interacționeze cu ea?

acordați atenție site-urilor pe care le iubiți

luați notă de site-urile pe care le iubiți. Ce-i cu ele te atrage? (Și cum puteți învăța să reproduceți aceste elemente?) Să acorde o atenție la:

• tipografie
• navigare
• utilizarea de imagini și spațiu
• proiectarea de forme
• animație și efecte de defilare
• culoare

trage un Wireframe

wireframing este un web designer de brainstorming.

în forma sa cea mai pură, un wireframe este o schiță a ceea ce va fi site-ul web. Nu este o schiță a elementelor estetice, ci mai degrabă un plan al site-ului web. Desenarea unui wireframe nu este cu adevărat despre aspectul acestui design, ci despre structura informațiilor din acesta.

nu sunteți sigur cum să creați un wireframe? Telepatia digitală are un ghid al celor mai bune practici pentru a vă ajuta să învățați.

ia ceva timp pentru a învăța Sketch

Sketch este un instrument vector-desen pentru Mac, care îl face ușor de a crea elemente de design. O mulțime de designeri sunt de cotitură pentru a schița pentru a crea elemente UI și repetarea blocuri de design.

este dotat cu plugin-uri și vă permite să exportați cod pentru o utilizare ușoară și acces. Este unul dintre cele mai puternice și populare instrumente de la Adobe Creative Suite și merită timpul tău.

Fiți la curent cu tehnologia

AI, VR, AR, video la 360 de grade, roboți.

poate fi greu să ții pasul cu atât de multe tehnologii și tendințe noi. Dar trebuie să faceți un punct pentru a rămâne la curent cu aceste schimbări.

abordați-le pe rând și începeți cu tehnologii care sunt cele mai direct legate de munca pe care o faceți. Dacă aveți un site web cu chat online, începeți să aflați despre roboți. Sau dacă utilizați o mulțime de conținut video, jucați-vă cu videoclipuri la 360 de grade.

elemente precum inteligența artificială și realitatea virtuală sau augmentată sunt și mai complexe, dar sunt susceptibile de a deveni părți integrate ale peisajului de design al site-ului web pe drum. Cel puțin, ar trebui să știți care sunt acestea și care ar putea fi utilizările potențiale.

fii confortabil cu SEO

în timp ce mulți designeri web cred că un specialist SEO se poate ocupa de pregătirea unui site web pentru citirea motoarelor de căutare, există o mulțime de lucrări de proiectare care sunt conectate la SEO.

de la modul în care imaginile sunt încărcate la crearea de cod curat, care este rapid pentru a include descrieri meta pe pagini și elemente, proiectantul ar trebui să includă gândirea de căutare în fluxul lor de lucru.

freelanceri, acest lucru este vital pentru tine, de asemenea. Majoritatea clienților sunt suficient de pricepuți pentru a solicita un site web optimizat SEO. Dacă lucrați singur, trebuie să știți suficient pentru a crea un cadru solid pe care Google îl poate citi (și pentru a putea trimite clientul la un specialist SEO dacă trebuie făcută mai multă muncă).

Joaca-te cu un constructor de site-ul

un constructor de site-ul poate fi o modalitate foarte bună de a obține confortabil cu cele mai bune practici și cum să înceapă construirea și proiectarea site-uri web.

majoritatea acestor instrumente au o mulțime de șabloane și vă permit să personalizați elemente și chiar să adăugați fragmente de cod. Pentru site-uri simple, mulți constructori de site-uri web au, de asemenea, un plan gratuit în care puteți crea o pagină de portofoliu personală sau un site web de bază care servește ca loc de joacă pentru dvs.

apoi alegeți piesele din cadrul constructorului de site-uri web. Uită-te la modul în care acestea sunt proiectate și codificate pentru a obține o simt pentru cum totul vine împreună. Veți fi uimit de ceea ce vă puteți da seama doar prin alegerea unui alt design în afară.

găsiți un Mentor

există cineva cu care lucrați și pe care îl admirați ca web designer? Ia-le la masa de prânz și alege creierul lor despre industria.

găsirea unui mentor care este dispus să lucreze cu dvs. și să vă ajute să vă gândiți la domeniu și cum să învățați singur designul web poate fi de neprețuit. Și, deși probabil că puteți găsi un mentor într-o comunitate online, Nimic nu este mai bun decât o persoană live pe care o puteți întâlni periodic față în față. (Poate merită să aveți mentori online și în persoană.)

Alăturați-vă comunității CodePen

odată ce începeți să vă simțiți confortabil cu un cod și programare, doriți să vă alăturați comunității CodePen. Comunitatea open-source vă permite să partajați și să editați fragmente de cod într-o rețea socială de soiuri.

Iată un pic mai mult de la fondatorii site-ului: „CodePen este un mediu de dezvoltare socială. În centrul său, vă permite să scrieți cod în browser și să vedeți rezultatele acestuia pe măsură ce construiți. Un instrument util și eliberatoare pentru dezvoltatorii de orice abilitate, și în special împuternicirea pentru persoanele care învață să Cod. Ne concentrăm în primul rând pe limbi front-end, cum ar fi HTML, CSS, JavaScript și sintaxe de preprocesare care se transformă în acele lucruri.”

ia o clasă

pentru unii cursanți, un cadru de clasă mai formal este cel mai bun.

există o mulțime de clase disponibile – în persoană și online-pentru a învăța elementele de bază ale designului web. Începeți cu un colegiu local sau hub-uri de învățare online, cum ar fi Udemy sau Coursera. Ridicați o clasă la nivelul actual al abilităților și continuați să mergeți mai departe.

vrei să faci ceva? Google it

pentru cursantul care nu este atât de tradițional, găsiți răspunsul la problema designului web pe Google. Există atât de multe tutoriale și clipuri video disponibile pe care le puteți parcurge aproape orice problemă – și soluție.

cheia este să căutați exact ceea ce trebuie să știți și să căutați o sursă de încredere pentru răspuns. Iată un alt sfat când vine vorba de tutoriale și videoclipuri – conținutul mai recent vă va oferi probabil un răspuns mai bun, mai complet și mai relevant. (Amintiți-vă, unele dintre aceste lucruri se schimbă rapid.)

acordați atenție experienței utilizatorului

nimic nu poate face sau rupe un site web precum user experience design. Trebuie să-l planifici și să-l înțelegi.

Iată cum descrie Fundația design de interacțiune designul UX:

designul experienței utilizatorului (UX) este procesul de creare a produselor care oferă experiențe semnificative și relevante personal. Aceasta implică proiectarea atentă atât a utilizabilității unui produs, cât și a plăcerii pe care consumatorii o vor obține din utilizarea acestuia. De asemenea, este preocupat de întregul proces de achiziție și integrare a produsului, inclusiv aspecte ale branding-ului, designului, utilizabilității și funcției.

designerii UX, sau designerii care sunt conștienți de procesul de formare a experienței, încearcă să creeze și să modeleze factorii care influențează procesul în mod deliberat. Pentru a face acest lucru, un designer UX va lua în considerare de ce, CE și cum se utilizează produsul.

fii atent la tendințele de Design

cum arată un design modern al site-ului? Nu e o întrebare capcană. Pentru a proiecta site-uri web moderne și experiențe ale utilizatorilor, trebuie să știți ce doresc utilizatorii și cum interacționează cu acesta. Dacă ultima dată când ai descărcat o aplicație sau te-ai uitat la un site web de pe telefon a fost 2016, ai mult teren de recuperat.

crearea de modele de site-uri web care au atingeri și tendințe moderne integrate în design vă va ajuta proiectele să iasă în evidență. De unde știi ce este trending? Continuați să citiți site-uri de acest gen și acordați atenție la ceea ce fac alți designeri. Ia act de culori și stiluri și caracteristici care sunt incluse în site-urile pe care le vizitați frecvent.

creați fără culoare

Începeți fiecare design fără culoare. Un mare designer mi-a spus odată că, dacă designul dvs. funcționează în alb și negru, acesta va avea o culoare impecabilă.

s-ar putea să nu țină întotdeauna, dar este un punct de plecare excelent.

prin crearea de modele în alb și negru, puteți vedea unde elementele contrastează și cum se joacă împreună. Ați eliminat orice asociere emoțională cu culoarea sau mișcarea ochilor care se întâmplă din cauza acesteia. Această formă simplă de design vă va oferi o idee dacă ceva funcționează ca un concept înainte de a trece la finalizarea acestuia.

învață să iubești Fonturile Google

Google Fonts este prietenul tău.

indiferent de părerea dvs. despre Google, capacitatea de a naviga, sorta și selecta fonturi despre care știți că vor funcționa în proiectarea site-urilor web este importantă. Nu trebuie să vă gândiți la licențiere sau dacă tipurile de caractere sunt compatibile cu anumite browsere sau nu.

limitarea este că aveți doar ceea ce este în biblioteca fonturi Google pentru a lucra cu. Dar dacă încercați puteți găsi ceva care se va potrivi aproape fiecare proiect. O să economisești mult timp pe termen lung.

alegeți un kit UI

descărcați o interfață de utilizator sau un kit de pictograme și alegeți-l.la fel cum puteți inspecta codul unui site web, uitați-vă la modul în care sunt construite elementele de design pentru web. Luați notă de scară și grilă, uitați-vă la amestecurile de culori și la modul în care fișierele sunt organizate în Photoshop sau Illustrator.

căutați un kit de descărcat care include elemente în mai multe formate pentru afișaje de înaltă rezoluție. (Descărcarea unei grămezi de JPEG-uri nu vă va servi atât de bine.)

apoi încercați să construiți sau să personalizați un element sau două proprii.

deveniți tipograf

designul modern al site-urilor web se concentrează puternic pe tipografie … tipografie bună. De la anteturi de eroi cu cuvinte uriașe la straturi de text care atrag un utilizator în design, înțelegerea principiilor cum să împerechezi elemente de tip și să construiești blocuri de text captivante este vitală.

începeți cu gândirea lui Ellen Lupton cu tipul. (Există și o carte cu același nume. Lupton este autoritatea pe tipografie și informațiile ei va avea te gândești ca un tipograf în cel mai scurt timp.

salt în JavaScript

când începeți să vă simțiți destul de bine în legătură cu designul web, provocați-vă din nou să învățați JavaScript. După HTML și CSS, este cel mai important limbaj al web-ului.

JavaScript este un instrument care permite proiectanților să implementeze lucruri complexe și interacțiune pe paginile web. Este ceea ce face ca un glisor să alunece sau asta animație paralaxă animați.

Aflați JS are un tutorial interactiv pentru a vă ajuta să începeți.

Actualizați-vă portofoliul

odată ce începeți să proiectați pentru web, asigurați-vă că vă actualizați portofoliul cu proiecte de web design. Această acțiune simplă vă va ajuta să vă arătați … și altora … că designul web face parte din repertoriul dvs.

un portofoliu actualizat poate ajuta potențialii clienți să vadă cum arată „stilul” dvs. Asigurați-vă că prezentați machete, culori, tipografie și diferite tehnici care arată ce puteți face.

Provocați-vă

cu atât de multe comenzi rapide și fragmente de cod pentru a vă ajuta să remediați aproape orice problemă a site-ului web pe care o aveți, nu vă lăsați leneși. Nu uitați să vă provocați continuu să învățați noi abilități, noi tehnologii și să vă îmbunătățiți jocul de design web.

singurul lucru despre acest domeniu este că se schimbă în mod constant; există întotdeauna ceva nou de învățat sau de încercat.

Maximizați-vă experiența

ieșiți acolo și proiectați. Trebuie să începeți să proiectați site-uri web pentru a fi un designer web.

începeți mici, dar luați proiecte cu alții. Cereți să vă alăturați unui proiect cu o echipă la locul de muncă. Abordați un mic site web pentru un prieten. Cu cât aveți mai multă experiență în construirea site-urilor web, cu atât veți obține mai bine și mai repede.

ce mai aștepți? Nu mai amâna.

cereți Feedback

utilizați rețeaua pentru a colecta feedback cu privire la proiectele dvs. de design de site web, indiferent cât de mici credeți că sunt. Ascultați acest feedback – chiar dacă nu vă place și vedeți ce puteți învăța.

în afară de preferințele vizuale, persoana care oferă feedback a oferit sugestii pentru a face site-ul web să funcționeze mai bine? Ar putea înțelege cu ușurință scopul designului? S-au conectat cu mesageria?

continuați să învățați lucruri noi

pentru a fi un mare designer de site-uri web, trebuie doar să continuați să jucați, să încercați și să învățați lucruri noi. Face un punct de rețea și de a comunica cu alții în domeniu, astfel încât să puteți rămâne pe partea de sus de tehnici și modificări vizuale, care sunt în cerere.

dacă sunteți în căutarea de a învăța site-ul de design, atunci acest lucru este, probabil, deja ceva ce faci în mod regulat. Dar acesta este un domeniu în evoluție și continuă să se schimbe aproape în fiecare zi. Întrebați pe oricine o face.