Nou pentru Web Design? Începe aici.

Bine ați venit la Webdesigntuts +, o resursă online dedicată predării și încurajării designerilor web de toate nivelele de experiență și de experiență. Indiferent dacă este pentru prima dată aici, te-ai găsit în trecut în conținutul nostru sau dacă ești un vizitator regulat, această postare te va ajuta să găsești cele mai bune conținuturi.


Cuprins

Iată o scurtă descriere a ceea ce veți găsi pe această pagină ...

  • Proiectarea primului site
  • Codarea primului site
  • Instrumentele de comerț
  • Responsabil Web Design
  • CMS-urile de lucru
  • Înțelegerea industriei noastre
  • Si restul…

Proiectarea primului site

Noțiuni de bază în legătură cu proiectarea unui site web este despre înțelegerea a ceea ce aveți de gând să atingă și modul în care puteți rezolva problemele prin design. În primele etape ale procesului, merită să ne gândim creativitate și avem o întreagă sesiune de tutoriale care să vă ajute cu asta:


  • Să vorbim despre creativitate
  • Blocul creativ 101

Dincolo de creativitate vine realitatea proiect. Cum poate cineva să ia idei și să le comunice în termeni de proiectare? Cum ar trebui să fie prezentată o pagină web? Cum influențează culoarea un design? Și cum ar trebui să luăm în considerare utilizatorii noștri?


  • O introducere în teoria culorilor pentru web designeri
  • Direcția vizuală în Web Design
  • Asigurați-vă că utilizatorii vă amintesc, spuneți o poveste
  • Principiul Gestalt: teoria designului pentru designerii web
  • Înțelegerea aspectului Z în Web Design

Și dacă sunteți dezvoltator, veniți la designul web dintr-un fundal de codificare? Avem o întreagă serie de articole de teorie a designului (fiecare având o sarcină la sfârșit) pentru a vă ajuta, plus câteva tutoriale de flux de lucru foarte utile:


  • Școala de proiectare pentru dezvoltatori
  • Un ghid al începătorului pentru Wireframing

Codarea primului site

Planificarea, schițarea, modelarea prin fire și reprezentarea grafică sunt aspecte importante ale designului web, dar ce-ar fi de fapt realizarea acestor modele pentru browser? Obținerea unui martor pe standardele web (HTML, CSS și JavaScript) este vital dacă sunteți interesat de lumea dezvoltării frontaliere. Să începem cu elementele de bază ...


  • Cel mai bun mod de a învăța HTML
  • Cel mai bun mod de a învăța CSS

Cu o înțelegere fundamentală a HTML și CSS, puteți începe să traduceți imaginile statice în pagini web vii și respirabile. Urmăriți-l pe Adi Purdila în timp ce se mută de la Photoshop la editorul de coduri, construind tema sa Adaptive Blog în această serie extinsă de serii.


  • Tema Adaptive Blog: De la Photoshop la WordPress

Instrumentele de comerț

Fiecare meșter are nevoie de unelte bune, iar designul web nu este diferit! În realitate, cu un simplu editor de text și un browser web aveți suficient pentru a vă începe, dar există multe alte aplicații și instrumente care să vă ajute cu alte sarcini.

Photoshop

Munca de lucru a multor un studio de design web de ani de zile. Rolul său se poate schimba în aceste zile, dar nu există nici o negare a prezenței sale în arena de design.


  • Photoshop CS6 Pentru designerii web
  • Proiectarea unei pagini "Coming Soon" în Photoshop
  • Sfat rapid: accelerați fluxul de lucru cu acțiunile Photoshop

Focuri de artificii

Dezvoltarea aplicației Adobe Fireworks este întreruptă, făcându-se loc pentru niște copii noi pe bloc, dar are încă un pasionat de urmărire și este un instrument de web design foarte capabil.


  • Focuri de artificii în lumea reală

Emmet

Emmet este unul dintre acele instrumente magice care, odată ce începi să-l folosești, vei fi intotdeauna uimit cum ai reușit fără. Aruncă o privire!


  • Construiți Bootstrap în Minute Utilizând Emmet

reflow

Cei noi copii de pe blocul despre care tocmai am vorbit despre moartea focului de artificii? Aceasta ar fi Reflow și cealaltă suită de instrumente Adobe Edge. Viitorul este aici, doamnelor și domnilor.


  • Introducerea editorului Adobe Responsible Layout: Edge Reflow
  • Fluxul dvs. de lucru, cu Adobe Edge Reflow

Instrumente de prelucrare a sârmei

Există o mulțime de instrumente de tip wireframing pentru a alege, dar Omnigraffle este cu siguranță unul dintre cele mai populare. Uitați-vă la ghidul nostru pentru începători.

  • Un ghid pentru incepatori in Wireframing in Omnigraffle

Responsabil Web Design

Responsabilitatea design-ului web a fost, fără îndoială, cea mai dramatică mișcare care a lovit webul, deoarece cineva a sugerat să nu mai folosim tabelele HTML pentru scopuri. Pentru a înțelege mai multe despre ceea ce este, aruncăm o privire la acest interviu rapid cu fondatorul său, Ethan Marcotte.


  • Un chat de zece minute cu Ethan Marcotte

Dacă te implici mai mult, vei găsi un număr de tutoriale și articole care explorează multe aspecte ale RWD.


  • Proiectarea pentru un web receptiv
  • O grilă responsabilă de bază (Plus Handy CSS3 Media Query Reporter)
  • Viața dincolo de 960px: Proiectarea pentru ecrane mari
  • O primă navigație simplă, responsabilă și mobilă

CMS-urile de lucru

Designerii de web folosesc sistemele de gestionare a conținutului ca o soluție web reală de ani de zile. De ce reinventați roata când CMS, cum ar fi WordPress, fac structura și gestionarea site-ului atât de bine?

Într-o continuare a sesiunii prezentate mai devreme, Adi Purdila își construiește site-ul static și îl transformă într-o temă WordPress. Urmați-l în timpul acestor programe foarte complexe și în curând veți putea face același lucru. Alternativ, urmăriți-mă pe măsură ce trece printr-o altă construcție WordPress, de data aceasta bazată pe scheletul popular.


  • Tema Adaptive Blog: De la Photoshop la WordPress
  • Construirea unei structuri responsabile cu schelet

Cu toate acestea, WordPress nu este singurul CMS aflat acolo. Adăugăm întotdeauna la tutorialele noastre CMS, deci iată un exemplu despre ce altceva există acolo:


  • Crearea unei teme pentru ancorarea CMS
  • Construirea unei tematici fantomatice de la zero
  • Tumblr Theming 101

Înțelegerea industriei noastre

Capacitatea de a proiecta și de a construi un site web este o mică parte a afacerii. Dacă veți reuși să câștigați bani ca designer de web, este important să înțelegeți industria.

Capacitatea de a lucra cu o echipă și cu clienții dvs. este crucială, prin urmare, aruncați o privire la aceste articole care vă vor ajuta să vă deplasați:

  • Procesul de design responsibil pentru Sparkbox
  • Scrierea contractului perfect de design web

Învățarea de la colegii dvs. este una dintre cele mai bune modalități de a avansa în designul web. Pe Webdesigntuts +, ne bucurăm de critica atât a muncii cititorilor, cât și a activității marilor jucători din industrie. Aruncati o privire la seria noastra How They Did It, plus colectia noastra de posturi de atelier. Alăturați-vă discuției!


  • Cum au făcut-o: reconstruirea a 8 chipuri
  • Web Design Workshops

Si restul…

Există o mulțime de mai multe pentru a se arunca cu capul la Webdesigntuts +, poate că sunteți interesat de accesibilitate, Cadre ca Bootstrap, Fundația, Pure și Jeet, SEO, Tipografie, HTML Email sau UX plus altele.

Și, ca și în cazul tuturor aspectelor din Tuts +, conținutul nostru continuu să crească, așa că țineți la curent cu noi pe diferitele noastre canale sociale pentru a vă asigura că nu pierdeți niciodată un truc:

  • Webdesigntutsplus pe Facebook
  • @wdtuts pe Twitter
  • Webdesigntuts + pe Google+
  • webdesigntutsplus pe Youtube
  • Envato pe Dribbble

Vă mulțumim că ați vizitat Webdesigntuts+!