10 tutoriale selectate manual pentru începători

Deci, începeți să manifestați interes pentru designul web, dar aveți probleme în a afla unde să începeți? Doriți să creați site-uri minunate, să învățați cum să codați HTML / CSS și să aflați despre standardele web și experiența utilizatorului? Dacă da, avem o listă de tutoriale Envato selectate manual, care ar trebui să vă facă să începeți călătoria!

Să începem cu începutul

Înainte de a vă sapă în toate aceste tutoriale minunate scrise de designeri și dezvoltatori foarte talentați, amintiți-vă un lucru: nimic nu este imposibil și dacă o pot face ... așa puteți și voi - așa cum am făcut acum câțiva ani. Am inceput sa traversez forumuri legate de proiectare (Envato nu era prezent la acea data), sapat in fiecare post de web design related, am gasit, am incercat lucrurile insasi, am incercat proces si eroare pana cand am creat in sfarsit primul meu site web (ceea ce era destul de rau) . Nu fiți timizi să cereți ajutor, suntem o comunitate minunată plină de iubire pentru a ne împărtăși cunoștințele noastre gratuit! Acestea fiind spuse, iată o listă, după părerea mea, de tutoriale de nivel începător, care vă vor ajuta să înțelegeți termenii "web" și "design", să vă învăț cum funcționează HTML și CSS și cum puteți face totul prin tu. Sa incepem.

Rețineți: unele tutoriale enumerate aici fac parte din programul Plus Membership. Mai multe informații despre Plus Tuts pot fi găsite aici.

Să începem cu teoria culorilor ...

"Importanța culorii în Web Design"

De prea multe ori, văd un concept de design minunat, cu o varietate de culori proaste. O parte din ceea ce face un mare design web "mare" este aspectul, tipografia și culoarea. Când fiecare dintre aceste aspecte funcționează pentru a se complimenta reciproc, se naște un design minunat.

Ierarhia vizuală în Web Design

În fiecare zi văd tot felul de site-uri web și tot felul de desene sau modele. Un lucru în comun cu șabloanele de succes de pe ThemeForest sau cu site-uri web din întreaga rețea este ierarhia vizuală puternică. De multe ori văd șabloane care au un concept minunat, dar au o ierarhie vizuală slabă. Voi acoperi ce ierarhie vizuală și câteva exemple minunate în acest articol.

Greseli comune în designul web

Multe template-uri respinse aici pe Themeforest suferă de aceleași greșeli comune: tipografia (font, line-height, spacing, color), aliniere (grid) și spațiere (padding). În acest tutorial, vom examina mai atent cum să evităm aceste erori comune.

CSS: Foarte primii pași

Aceasta este pentru cei care speră să ia primii pași în designul web. Acest tutorial video de 70 de minute Plus presupune că aveți cunoștințe zero despre CSS. Pe parcursul ecranului, veți afla despre sintaxa de bază, o mulțime de proprietăți diferite și cum să creați începuturile primului dvs. site web.

Proiectați și codificați primul site web în ușor de înțeles

În acest tutorial, vom proiecta și codifica primul site web în pași simpli și simpli. Acest tutorial a fost scris pentru începător cu speranța că vă va oferi instrumentele necesare pentru a vă scrie propriile site-uri compatibile cu standardele! Este o săptămână nouă; poate că este timpul să înveți o nouă abilitate!

30 cele mai bune practici HTML pentru începători - Basix

Cel mai dificil aspect al rularii Nettuts + este contabilizarea atât de multe nivele de calificare diferite. Dacă vom posta prea multe tutoriale avansate, publicul nostru începător nu va beneficia. Același lucru este valabil și pentru contrariul. Noi facem tot ce ne stă în putință, dar întotdeauna vă simțiți liberi să vă dați dovadă dacă simțiți că sunteți neglijat. Acest site este pentru tine, deci vorbeste! Cu aceasta a spus, tutorialul de azi este special pentru cei care se scufundă doar în dezvoltarea web. Dacă aveți un an de experiență sau mai puțin, sperăm că unele dintre sfaturile enumerate aici vă vor ajuta să deveniți mai buni, mai rapizi!

Fără alte detalii, să examinăm cele treizeci de exemple de bune practici pe care să le respectăm la crearea marcajului.

Trecând peste…

Acum că avem o înțelegere de bază a teoriei și am învățat cum să proiectăm și să codificăm o pagină web de bază, suntem gata să ne mișcăm mai departe. Următoarele articole și tutoriale sunt aici pentru a vă învăța mai multe despre procesul de proiectare web și cele mai bune practici de codificare.

Elemente de Web Design Mare: polonez

Când am pus împreună modele, eu de obicei fac acest lucru în două faze - Layout și polonez. În timpul fazei de aranjare, așezăm obiectele principale pe pagină, de obicei terminând cu ceva care pare relativ complet. În cea de-a doua etapă - poloneză - mă duc peste design și ajustează culorile, tratamentele de tip, umbrele, straturile și, în general, curățesc totul. În această primă serie de tutoriale privind designul web, vom examina polonezii.

Proiectarea unei familii de site-uri Web

Tutorialul pe care l-am adaugat astazi este numit "Cum sa design o familie de desene web" si este un pas-cu-pas de urmarire a lungul unui set de WordPress blog-uri pe care le-am facut recent. Deoarece abilitățile Photoshop implicate nu sunt atât de avansate, am petrecut mai mult timp vorbind de ce se fac anumite lucruri.

De la PSD la HTML, construirea unui set de site-uri web pas cu pas

Astăzi vă voi duce prin întregul proces de a obține de la Photoshop la HTML completat. Vom construi un set de 4 machete PSD ale unui site care va deveni în cele din urmă o temă WordPress. Este un tutorial masiv, deci, dacă veți urma până la sfârșit, asigurați-vă că aveți câteva ore de rezervă!

Ultima, dar la fel de importantă ...

Fiți inspirat, dar nu Copiați

Există o linie subțire între inspirație și copiere. Suntem înconjurați de obiecte și de artă în viața noastră de zi cu zi. Găsirea de inspirație pentru un design este o sarcină ușoară în aceste zile. În acest articol, vă voi îndruma prin procesul de proiectare al unui site recent terminat. Voi oferi imagini ale site-urilor web care mi-au inspirat crearea unui layout web nou și unic.

Un Freebie care te-a inceput ...

30 Elemente Web, fundaluri și seturi de pictograme Photoshop (prin GraphicRiver)

Când proiectați sau construiți un site web, este posibil să aveți nevoie de diferite elemente mici proiectate. Eu personal tind să reutilizez o mulțime de aceleași butoane, meniuri, icoane și așa mai departe. De când am lansat GraphicRiver la începutul acestui an, deși am văzut o mulțime de imagini grafice răcoritoare pe web, sub formă de elemente web, fundaluri și icoane. Așa că am compilat 30 dintre cele mai bune pentru a vă oferi o aromă a ceea ce este disponibil acolo. Desigur, nu uitați dacă aveți nevoie doar de un șablon complet de design PSD pentru a construi pe care le puteți apuca de la ThemeForest!

Nu suntem încă Done ...

Luați câteva minute și citiți aceste interviuri minunate de unele dintre cele mai importante nume din industria web. Veți fi uimit de cât de mult puteți învăța de la acești tipi!

  • Elliot Jay Stocks
  • Chris Coyier
  • Jeffrey Zeldman
  • Eric Meyer
  • Jeff Croft
  • Marko Dugonjić

… și altele. Citiți toate interviurile aici.

Gândurile finale ...

Fiecare nou început este greu; același lucru este valabil și pentru designul web. Îmi amintesc de mine când învățam pentru prima oară: ore de depanare HTML / CSS, toate în timp ce soluția era chiar în fața mea; dar, hei, învățăm din greșelile și repetițiile noastre. Aș vrea să am acces la rețeaua Tuts + când am început să încep. Ar fi putut să mă salveze mult timp și frustrare. Luați în considerare acest articol ca punct de plecare, dacă vă aflați în primii pași în această industrie. Alte intrebari?

Scrie un tutorial Plus

Știați că puteți câștiga până la 600 USD pentru a scrie un tutorial PLUS și / sau pentru noi? Căutăm tutoriale detaliate și bine scrise despre HTML, CSS, PHP și JavaScript. Dacă sunteți în măsură, contactați Jeffrey la [email protected].

Rețineți că o compensație reală va depinde de calitatea tutorialului final și a scenariului.

  • Urmați-ne pe Twitter sau abonați la Nettuts + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.
Cod