Ghidul Instrumentelor de Proiectare Web în mod pas cu pas

Ghid pentru incepatori pentru instrumente de proiectare web

Căutați să vă proiectați propriul site web? Sau vrei să faci o carieră din instrumentele de web design? Ei bine, nu va fi ușor. Este nevoie de timp, răbdare și multă muncă grea pentru a vă proiecta propriul site web. Deși un singur articol nu este suficient pentru a oferi toate abilitățile, instrumentele și tehnologia necesare pentru a deveni instrumente de proiectare web, acest ghid special vă va ajuta să mergeți în direcția corectă. După ce cunoașteți calea de urmat, aveți nevoie de o dezvoltare constantă și de învățare pentru a ajunge la destinație.

Acest ghid se adresează celor care nu au pregătire formală sau educație în instrumente de proiectare web. Atâta timp cât cunoașteți elementele de bază ale funcționării unui computer, ar trebui să puteți urmări destul de bine conținutul acestui ghid. Cu toate acestea, rețineți că instrumentele de web design sunt un subiect destul de înalt. S-ar putea să pornești de la elementele de bază, dar trebuie să abordezi o mulțime de abilități și cunoștințe, cum ar fi o interacțiune umană cu site-uri web de proiectare, teoria culorilor și, desigur, limbaje de codare, cum ar fi CSS și HTML. De asemenea, poate fi necesar să înveți JavaScript și alte limbaje de programare. Apoi, există optimizarea motorului de căutare, sisteme de gestionare a conținutului și așa mai departe.

Să începem parcurgând unele concepte ale instrumentelor de proiectare web:

Instrumente de proiectare web cu experiență utilizator

Numit și design UX sau UI, designul experienței utilizatorului este în principal despre cunoașterea modului în care oamenii vor vedea, vor interacționa și utiliza modul de proiectare a site-ului dvs. și cum să folosească aceste cunoștințe pentru a face un design mai bun al site-ului. Este multă muncă implicată și multe încercări și greșeli. Modul în care interacționezi și experimentezi proiectarea unui site web poate fi diferit de modul în care fac alții. Instrumentele tale de web design pot avea un sens perfect pentru tine, dar sfârșesc confundând pe ceilalți.

În timp ce înveți despre proiectarea experienței utilizatorului, este, de asemenea, o idee bună să începi să citești în cadrul încadrării prin sârmă, care este procesarea în care schițezi idei de bază pentru unelte de proiectare web. Schițele și conceptele sunt destul de grosolane, astfel încât puteți folosi un stilou vechi și hârtie sau alfabet vechi. Puteți trece apoi la o tabletă sau desktop pe măsură ce ideile de dispunere a instrumentelor de proiectare web devin mai detaliate. Acest proces determină modul în care va funcționa proiectarea site-ului dvs., începând de la zero.

Învățarea abilităților estetice

Unii oameni tind să se concentreze pe învățarea codului mai întâi înainte de a merge pentru estetică, dar poate fi mai benefic să acoperiți bucățile teoretice ale esteticii înainte de a vă îndepărta mâinile în codificare. În cele din urmă, estetica poate fi destul de complicată de stăpânit. Nu există contabilitate pentru gust; ceea ce pare bine pentru tine poate fi nepotrivit pentru alții. Fonturile care par să funcționeze bine cu întreaga temă a site-ului dvs. web pot părea ciudate și corect greșite pentru alții. Totul este subiectiv, dar există o știință pentru toate. Dacă puteți reduce această știință și stăpâniți regulile de bază ale esteticii, puteți trece de cele mai multe probleme asociate cu această parte a instrumentelor de proiectare web.

1. Tipografie

Imaginile și videoclipurile devin tot mai furioase online, dar textul rămâne și va fi întotdeauna cea mai mare parte a proiectării site-urilor web. Internetul se rezumă la cuvinte și cum să le facă să pară și să fie citite uimitor. Scrierea unui text bun depinde de scriitor, dar a face să arate bine depinde de tipografie. Totuși, tipografia nu se rezumă doar la alegerea unui font. De asemenea, este vorba despre alegerea unei dimensiuni și tipuri de font bune și aranjarea acestuia pentru a-l face accesibil vizitatorilor site-ului dvs. web, indiferent de browserul pe care îl folosesc pe dispozitivul respectiv. Este vorba și despre crearea unei ierarhii vizuale între rubrici, titluri și corp.

După ce cunoașteți regulile tipografiei, este timpul să alegeți fonturile potrivite pentru proiectarea site-ului. Puteți găsi o mulțime de versiuni gratuite, iar fonturile web Google, în special, pot fi un instrument excelent în acest sens. În instrumentele de proiectare web, mulți designeri aleg fonturi Google, deoarece pot fi încorporate direct pe proiectarea site-ului. Puteți găsi chiar și câteva combinații excelente de fonturi Google, sau puteți utiliza Combinatorul de fonturi Web pentru a asocia și previzualiza propriile combinații de fonturi.

În unele cazuri, poate fi necesar să încorporați fonturile pe cont propriu, ceea ce nu este la fel de convenabil. Dacă doriți să aflați cum să încorporați fonturi pe cont propriu, va trebui să începeți să învățați unele coduri de bază CSS și HTML.

2. Teoria culorilor

Teoria culorilor este mai mult decât învățarea numelor tehnice ale diverselor culori. De fapt, tratează combinațiile de culori și modul în care culorile diferite pot avea impacturi diferite asupra emoțiilor umane. Teoria culorilor este o știință reală și poate avea un impact mare asupra capacității de utilizare și a experienței utilizatorului pe proiectarea site-ului dvs. web. De exemplu, textul de pe o pagină web nu ar fi foarte vizibil dacă culoarea lui ar fi prea aproape de cea a fundalului. Lumina ecranului, deficiențele vizuale și ecranele prost configurate pot adăuga provocărilor.

3. HTML

Odată ce cunoașteți estetica și teoria din spatele instrumentelor de proiectare web, este timpul să vă murdăriți mâinile și să învățați unele codări, începând cu limbajul cel mai fundamental: Hypertext Markup Language sau HTML. Fiecare site web care proiectează vreodată folosește HTML, care spune browser-ului web dacă se uită la un videoclip, link, imagine sau text.

Următoarea limbă pe care trebuie să o înveți este Cascading Style Sheets sau CSS, ceea ce face ca proiectarea site-ului tău să arate bine. Acesta indică browserului fontul textului și culorile diferitelor elemente. De asemenea, poate defini aspectul proiectării site-ului web, aspectul butoanelor, dimensiunea diverselor elemente și chiar animații.

HTML și CSS sunt de fapt destul de ușor de ridicat, dar sunt extinse și pot fi utilizate în diverse moduri pentru a face abilități de proiectare web unice. Este nevoie de timp și practică pentru a învăța cum să le utilizați în mod eficient.

4. JavaScript

Învățarea JavaScript este un lucru opțional, dar poate fi un bonus uriaș. Este un limbaj de programare care poate manipula conținutul web în moduri care nu pot fi realizate doar prin CSS sau HTML. Dar nu este o necesitate pentru fiecare proiectare a site-ului web și poate fi ceva mai dificil de înțeles decât HTML sau CSS. Cu toate acestea, este foarte utilă și o tehnologie importantă folosită în abilitățile de proiectare web. Puteți să-l utilizați pentru a adăuga elemente fanteziste, precum prezentări de diapozitive sau apelare la conținut nou, fără a fi nevoie să reîncărcați pagina. Acest lucru poate îmbunătăți capacitatea de utilizare a site-urilor web.

Obținerea instrumentelor necesare

Abilitățile de proiectare web necesită anumite instrumente, procese și fluxuri de lucru, deși este greu de blocat pe un anumit mix. Fiecare are propriile unelte preferate și există cei care și-ar apăra selecțiile cu loialitate sălbatică. Lăsând la o parte această loialitate intensă, este întotdeauna o idee bună să continuați să experimentați cu noi abilități de proiectare web, în ​​loc să vă blocați.

Nu este niciodată o idee bună să vă blocați într-un număr limitat de instrumente și să vă faceți prea confortabil cu ele. Continuați experimentarea cu instrumente noi și păstrați-vă mintea la curent. Pentru început, însă, să ne uităm la cele gratuite.

Toate browserele principale

Principalele browsere - Mozilla Firefox, Google Chrome și Microsoft Internet Explorer - funcționează în moduri unice și pot afișa aceeași pagină web în moduri diferite. Trebuie să vezi cum arată site-ul tău în toate aceste browsere majore și să te asiguri că nu există probleme majore în niciunul dintre ele. Aspectele site-urilor, în general, sunt destul de uniforme în browserele majore, datorită îmbunătățirilor funcțiilor, dar nu se poate spune același lucru pentru toate elementele. Cheia bunelor abilități de proiectare web este testarea în mai multe medii.

De asemenea, trebuie utilizate browserele mobile, deși ați fi limitat la dispozitivele pe care le dețineți în prezent. Cu toate acestea, majoritatea browserelor mobile majore au astăzi funcții similare. Chrome este cel mai comun browser mobil, dar Mozilla lucrează la o versiune mobilă a Firefox pentru iOS. Opera și Opera Mini sunt alte alternative comune.

Instrumente pentru încadrarea sârmelor

Pentru încadrarea prin sârmă, puteți utiliza un stilou de bază și o hârtie sau o aplicație de desenare într-un fel. Cheia este să aveți ceva de unică folosință și să aveți o platformă pentru a schița idei grosolane pentru a le rafina puțin mai mult.

Aplicații de desen

Odată ce începeți să faceți fire-frame-uri reale pentru baza codului dvs., este timpul să vă puneți la dispoziție o aplicație de încărcare prin fir. Google Draw from Drive este o opțiune bună, deoarece prezintă toate formele de bază și colaborări live și funcții de partajare în cazul în care doriți să lucrați sau să primiți ajutor de la altcineva. De asemenea, este bazat pe web și obțineți în jur de 15 GB spațiu liber. Dacă lucrați cu tableta, totuși, trebuie să găsiți o alternativă.

Editor de coduri

HTML și CSS pot fi codate pe ceva la fel de de bază ca Notepad. Tot ce ai nevoie este un editor de text, dar nu un procesor de texte precum Microsoft Word. Editorii de cod sunt în esență editori de text cu funcții adăugate pentru a facilita programele de codificare și site-urile web.

Sunt multe dintre ele disponibile, iar cel mai bun lucru de făcut aici este să experimentați și să nu vă limitați doar la unul singur. Pentru începători, o opțiune bună pentru a începe este Parantezele. Este stabil și gratuit și funcționează pe Linux, Mac și Windows. Parantezele sunt, de asemenea, special concepute pentru cei care construiesc și dezvoltă site-uri web de abilități în browser.

Editor de imagini

Textul reprezintă cea mai mare parte a conținutului site-ului web, dar imaginile sunt, de asemenea, o parte importantă a experienței și trebuie să creați și să editați pictograme, logo-uri, fotografii și alte imagini pentru site-ul dvs. web. Încă o dată, cheia este să continuați experimentarea cu diferite programe. Va trebui să plătiți pentru acești editori, dar există teste gratuite pentru dvs. pentru a le testa. Printre cele obișnuite pentru a începe cu GIMP, Photoshop, Paint.Net, CorelDraw și alte aplicații Corel.

Server local

Acesta este opțional, dar este o idee bună să instalați un server web în computerul personal. În mod esențial, un server web permite utilizatorilor să acceseze toate părțile site-ului. Un server local rămâne închis de pe internet decât dacă aveți o conexiune la internet cu adevărat rapidă și un computer puternic. În schimb, puteți doar să configurați un server care să imite cum funcționează lucrurile online. Învățarea de a lucra cu un server instalat local poate, de asemenea, economisi mult timp atunci când încărcați fișierele pe un server de găzduire real. Pentru începători, XAMPP este o opțiune bună pentru a configura un server local. Poate fi instalat pe Linux, Mac sau Windows.

Pași către proiectarea unui site web

Acum că aveți instrumentele, abilitățile și cunoștințele necesare, este timpul să analizați rapid procesul de competențe de proiectare web:

Aducerea conținutului

Crearea conținutului site-ului este diferită de procesul de competențe de proiectare web. Trebuie să scrieți conținutul singur sau să-l obțineți de la client. De asemenea, puteți angaja un fotograf sau redactor sau puteți alege imagini bune. În orice caz, trebuie să obțineți tot conținutul, inclusiv textul și imaginile, organizat și gata de plecare.

După ce ai tot conținutul, este timpul să te organizezi totul. Ce se întâmplă pe pagina de start și alte pagini și cum sunt conectate aceste pagini? Aceste întrebări sunt importante în stabilirea unei organizații structurale care va determina navigarea pe site, organizarea fișierelor și alte aspecte.

Încadrarea prin sârmă este un proces bun de urmat aici. Începeți cu rame de unică folosință și păstrați lucrurile de bază. Este un proces rapid și nu trebuie să dureze mai mult de jumătate de oră pentru a completa fiecare pagină. Efectuați versiuni mai detaliate odată ce ați terminat cu procesul de încadrare a firelor de unică folosință. Includeți conținut real cât puteți și adăugați elemente individuale, cum ar fi butoane și formulare. Continuați să adăugați mai multe definiții. Dacă aveți o mulțime de pagini de același tip, faceți doar o pagină de fiecare tip.

Cursuri recomandate

Curs Java Hibernate

Curs profesional de primăvară Java

Instruire profesională WordPress

Curs profesional de rubin

Codificare

Acum este în sfârșit momentul să vă puneți pălăria de codare și să vă extrageți editorul de text. Cheia aici este să păstrați codul de tastare până când sunteți mulțumit de ieșirea finală. Editorul de text Brackets are o caracteristică excelentă pentru acest lucru: butonul Previzualizare Live. Acesta deschide o fereastră a browserului Google Chrome care este actualizată odată cu modificările aduse codului. În timpul acestui proces, veți redimensiona browser-ul de mai multe ori pentru a vedea cum arată site-ul în diferite dimensiuni. Se vor face tipuri și vor fi încercări și erori.

Testarea

Având codul de bază în loc, este timpul să începeți testarea site-ului web pe toate browserele principale pentru desktop și mobile și să începeți să remediați erorile. Nu vă faceți griji pentru mici inconsistențe; cheia este de a face utilizatorului experiența pozitivă indiferent de browser. Utilizatorul ar trebui să poată naviga pe site așa cum v-ați propus și să acționeze apelul la acțiune.

Articole recomandate

Acesta a fost un ghid pentru a face o carieră din instrumentele de web design? Ei bine, nu va fi ușor. Acestea sunt următoarele link-uri externe legate de instrumentele de proiectare web.