Creați o imagine curată a site-ului Web în Photoshop - Proiectarea unui aspect al site-ului web este mai mult decât aranjarea de imagini colorate și completarea textului în cadrele de text. Este o abordare care vorbește despre volumul afacerii clientului tău. Culorile și graficele site-ului web definesc natura afacerii, în timp ce calitatea designului și fluxul ușor de navigare a site-ului trebuie să lege utilizatorul cu organizația și să-l transforme într-un potențial client.
Pentru fiecare proiectant web wannabe, este obligatorie proiectarea unui site web cu aspect bun și ușor accesibil. Acest tutorial are scopul de a vă duce prin procesul de creare a unui site web simplu și curat site-ul direct de la zero. În timpul procesului, veți învăța puncte importante care vă vor ajuta în continuare să obțineți mai multe cunoștințe cu privire la proiectarea web. 
Scrieți-vă cerințele înainte de a proiecta un aspect al site-ului
Înainte de a începe să proiectați un aspect al site-ului, ar trebui să știți cum va arăta site-ul dvs. și care sunt subiectele pe care trebuie să le includeți în site-ul web. Este esențial să faceți o listă de elemente de dispunere a site-ului web de care are nevoie clientul dvs. pe site-ul său. Împreună cu aceasta, calitatea unui designer bun este să pregătească o mulțime a întregului site web înainte de a începe să lucreze la șablonul final.
Diverse companii de proiectare adaptează diferite niveluri de strategii de pre-proiectare, care pot conține încadrarea sârmei, prototiparea, machetă, versiuni beta și multe altele. În acest tutorial, vom crea o versiune de model înainte de a începe proiectarea originală a șablonului. Folosesc nuanțele de gri care permit identificarea blocului de machetă
pânză
Cu câțiva ani înainte, în timp ce existau foarte puține sisteme de operare și dispozitive limitate pentru accesarea site-urilor web, dimensiunile paginii erau fixate la una sau două dimensiuni. Astăzi scenariul este cu totul altul. Utilizatorii finali accesează site-urile de pe desktop-uri de diferite dimensiuni, telefoane mobile, iPad-uri și tablete. În această situație diversă, nu există nicio șansă să vă puteți repara pagina web la o anumită dimensiune. Există însă anumite dimensiuni standard aplicate pentru fiecare dispozitiv. Veți găsi încet dimensiunea preferată sau Clientul dvs. vă poate adresa un site web pentru a imita dimensiunile.
În acest caz, lucrăm la următoarele dimensiuni. Nu vă faceți griji pentru înălțime, deoarece se va schimba în timp. Cu cât adăugați mai mult conținut pe site-ul dvs., cu atât va fi mai mare înălțimea.
Amintiți-vă că este obișnuit să derulați în jos pe verticală, astfel încât să nu puteți fixa o anumită înălțime pentru pagina dvs. web, decât dacă nu doriți ca utilizatorul să deruleze pe pagina dvs. de pornire ca Google. Dar, este necesar să nu defilați pe orizontală. Așadar, limitați-vă lățimea conform standardelor din industrie și nu faceți creativitate cu derularea orizontală.
Pentru web, rezoluția este limitată la 72. Recent se găsesc imagini și pagini cu rezoluție mai mare pe iPads și puține tablete. Dar este într-o ocazie rară și este mai bine să rămâneți cu 72 luând în considerare viteza internetului pe tot globul.
Selectați fișierele folosind comanda Ctrl + A și trageți ghiduri în mod egal în întregul șablon. Un site web ar trebui să fie bine organizat cu fiecare element aranjat coerent între ele. Iar ghidul de dispunere a site-urilor web vă ajută să îl obțineți cu ușurință.
Pregătește-ți machetele
Plasarea fișierului dvs. de model pe șablonul original vă ajută să economisiți mult timp. Proiectarea site-ului dvs. web devine atât de ușoară încât veți ajunge să completați cadrul în câteva minute. Cu toate acestea, modelul vă va ajuta doar la proiectarea cadrelor. Completarea elementelor de proiectare cu detalii, aranjarea tipului și alinierea va dura mai mult decât desenarea machetei site-ului.
Schema de culori și alte opțiuni
Următorul lucru după care vă pregătiți cadrul este să alegeți o schemă de culori. Dar, este mai bine să vă pregătiți culorile înainte de a începe să lucrați la design.
Întregul lucru se reduce la mesajul că, pregătiți-vă armele înainte de a începe proiectarea. Totul, inclusiv icoanele, imaginile și alegerile de culori ar trebui să fie gata înainte de a începe să lucrați. Organizarea și planificarea lucrării dvs. va economisi mai mult timp și se concentrează asupra proiectării fără obstrucții între ele.
Alegerea culorilor poate fi alegerea designerului dacă compania este nouă și nu are o identitate corporativă înainte. În unele cazuri, clienții oferă o idee despre ce nuanțe doresc să fie logo-ul sau fundalul. În ceea ce privește companiile existente în care poate fi nevoie să reproiectați un întreg site web, poate fi necesar să alegeți aceleași culori în funcție de nevoile clientului.
Există numeroase site-uri web care vă pot ajuta să alegeți milioane de scheme de culori din arhive. Încercați următoarele site-uri web pentru a vă bucura de o gamă largă de combinații de culori.
Color.adobe.com
Colourlovers.com
Aici am ales câteva nuanțe de albastru pe care să le folosesc pentru site-ul web. Întregul site web va fi planificat în cadrul schemei de culori următoare. Nu uitați să alegeți trei sau patru combinații de culori diferite, deoarece nu știm ce client de culori va prefera. Odată ce clientul finalizează o schemă de culori, salvați valorile de nuanță și asigurați-vă că culorile joacă un rol vital în fiecare verticală a organizației. Mai ales în identitatea corporativă.
Procesul de proiectare
Există multe modalități de a-ți continua proiectanții. Nu există reguli de prezentare a site-urilor web dificile și rapide pentru a defini sau urmări procesul de proiectare, este mai ales un proces pe care proiectantul îl va alege în funcție de conveniența sa.
Unii designeri doresc să construiască întregul blocuri și cadre și să înceapă să lucreze la detalii în a doua etapă, urmate de tipul și, în final, alinieri și ajustări. Unii doresc să termine o parte a paginii la un moment dat și să o ducă la următoarea parte. Urmăm al doilea stil.
Vom finaliza site-ul în următorii pași
- Antet și subsol
- Ce facem
- Servicii
- Formă
- Știri
- Subsol
Antet și subsol
Regula mare pentru a defini dimensiunile antetului sau bannerului este lăsată creativității tale. Conform ultimelor tendințe, site-urile web apar cu o imagine uriașă care acoperă întregul ecran al computerului. Stilul este denumit imagine Hero, care a devenit destul de popular recent.
În acest caz, am început cu antetul de 120 de pixeli și înălțimea de 550 de pixeli pentru banner. Lățimea trebuie să se potrivească cu dimensiunea documentului.
Modelele cu o culoare solidă au un aspect plat, care nu merge bine cu cadre sau imagini mai mari. Pentru a evita aspectul plat, am aplicat un strat de acoperire gradient deasupra bannerului. Oferă bannerului o adâncime care se transformă încet de la o umbră la alta.
În continuare, am început să importăm Logo-ul și să-l așezăm în colțul din stânga sus al antetului și un alt logo mai mare în centrul bannerului. Puteți observa, de asemenea, formele de vector de dispunere a site-ului web în colțul din dreapta sus, care sunt folosite pentru a partaja link-urile de socializare.
În această etapă, am terminat de adăugat tipul în partea antet și Banner. Numele companiei, mesajul mărcii, cu link-uri și servicii, sunt adăugate în text. Puteți observa, de asemenea, un buton transparent pe Banner.
Textul simplu sau prea mult de tip, fără caracteristici speciale, vor strica aspectul paginii tale web; pagina va plictisi curând pe utilizator, ceea ce îl poate lăsa să părăsească site-ul tău rapid. Verificați forma vectorială pe care am adăugat-o la linkurile de servicii din partea dreaptă sus a bannerului. Stilul este simplu, totuși umple golul evitând aspectul banal.
Alegeți o imagine potrivită afacerii. Există milioane de imagini disponibile pe web și nu va dura prea mult timp pentru a găsi o imagine care să se potrivească cerinței tale.
În cazul meu, am găsit o imagine de înaltă calitate, care cred că va merge bine cu site-ul meu web. Nu am o temă de afaceri pentru site-ul web, așa că sunt liber să aleg orice imagine care arată bine pe postarea bannerului.
Încercați să descărcați câteva imagini HD de pe site-urile de stocuri gratuite date mai jos
www.pixabay.com
Amestecul este o artă pe care ar trebui să o stăpânești pentru a produce bannere frumoase. Aici am amestecat trei straturi pentru a obține efectul arătat în imaginea de mai sus. Iată ce am făcut
- Plasați stratul de imagine deasupra bannerului de culoare albastră
- Puneți suprapunerea Gradient deasupra imaginii
- Schimbați opacitatea imaginii 40% și schimbați modul de amestecare la diferență.
- Verificați paleta de straturi din imaginea de mai sus pentru a înțelege modul în care straturile sunt stivuite unul pe celălalt.
Așa va arăta antetul și bannerul pe măsură ce tocmai am terminat de lucrat. Lucrăm la o parte în același timp și este timpul să trecem la nivelul următor.
Aliniamentul crucial în ceea ce privește tipul; aveți o idee despre cum arăta site-ul dvs. și textul ar trebui să fie aliniat înainte de a-l începe. La acest nivel, am folosit două cadre de text diferite, ambele aliniate la stânga.
Următorul pas este proiectarea părții de servicii a paginii web. Am proiectat o stea metalică în nuanțe de gri pentru a prezenta diverse servicii ale companiei. Intenția din spatele folosirii simbolului stelei este serviciile de 5 stele.
Când vine vorba de alinierea textului Ghidurile sunt cei mai buni prieteni ai tăi. Coerența în cadrul tipului și obiectelor poate fi obținută folosind bine spațiul alb și lacunele egale între elementele de proiectare. Am folosit multe Ghiduri privind aspectul site-ului web pentru a vedea că toate obiectele din cadru trebuie să mențină lacunele și distanțele corespunzătoare care să producă o cantitate corectă de spațiu alb.
Următorul pas al proiectării noastre este crearea câmpului Formular. În acest caz, lucrez opus metodei pe care am folosit-o la proiectarea bannerului. Vom așeza stratul de imagine sub stratul colorat solid și vom aplica un strat de gradient deasupra celor două straturi pentru a obține un aspect mai bun. Jucarea cu modurile de amestecare este întotdeauna esențială în timp ce plasați imagini mai mari.
Alegerea imaginilor pentru acest site nu are o temă specifică legată de acesta. Cred că această imagine va ajuta site-ul să arate mai bine.
Plasați imaginea sub stratul de fundal colorat. Pentru a fixa imaginea exact la dimensiunea stratului colorat, utilizați opțiuni de mascare a stratului.
Aruncați o privire la paleta de straturi din imaginea de mai sus. Stratul de culoare albastru solid se află în partea de sus a imaginii, modul de amestecare este transformat în suprapunere și opacitatea este redusă la 65%.
Am folosit harta gradientului pe partea de sus a celor două straturi. Modul de amestecare este schimbat în nuanță și opacitatea rămâne aceeași.
Caseta de formular este gata, ceea ce ne duce la sfârșitul celui de-al patrulea nivel în proiectarea site-ului nostru web.
Nivelul următor constă din două cadre de text simple. Seamănă cu nivelul doi al paginii web și am folosit aliniat cele două căsuțe similare cu partea de sus. Menținerea coerenței în aliniere este un bun mod de utilizare a spațiului alb.
După ce am ajuns la partea finală a paginii, este timpul să privim din nou dimensiunile subsolului. Proiectantul trebuie să planifice despre înălțimea subsolului pe baza linkurilor pe care ar trebui să le utilizeze acolo. În acest caz, am dat o înălțime de 170 de pixeli în subsolul meu. Lățimea rămâne aceeași ca și site-ul web.
Plasați linkurile și imaginile conform cerințelor dvs.
Prin aceasta, am încheiat partea de proiectare a site-ului nostru web. Combinațiile de culori pe care le-am folosit sunt minime, folosim mult spațiu alb în designul nostru și adăugăm text simplu cu fonturi minime. Intenția este de a proiecta o pagină web curată, care sperăm să fie îndeplinită.
Vă rugăm să vă uitați încă o dată la designul întregii pagini
