Sfaturi pentru îmbunătățirea designului site-ului Web Handoff

În procesul de construire a unui site web, există câteva etape care au loc. Dacă ar fi să-l simplificăm și să analizăm un site web standard, etapele ar fi:

1. Nevoia - cineva necesită un site web dintr-un motiv sau altul.
2. Brainstorming - Decizia privind structura generală, obiectivele și multe altele.
3. Propunerea - Clientul găsește un freelancer sau o agenție pentru a construi site-ul.
4. Conținut - articole, imagini etc., orice se poate găsi pe paginile de destinație, sitemap-uri etc.
5. Proiectare - O persoană / o echipă lucrează la proiectare și aspect pe baza conținutului.
6. Dezvoltare - O persoană / echipă dezvoltă partea funcțională a site-ului pe baza designului.

De cele mai multe ori, îl puteți amesteca aici. Puteți schimba ordinea lucrurilor care se fac, iar echipa poate produce în continuare rezultate excelente. Cu toate acestea, acest lucru poate fi dificil atunci când aveți oameni din diferite agenții care lucrează la același proiect, acesta fiind motivul principal pentru a opta pentru o agenție generală care să poată avea grijă de toate.

Pentru acest articol, îl luăm de la pasul 5, Proiectare la pasul 6, Dezvoltare. Aici lucrurile pot merge prost încetinind dezvoltarea și încurcând ceea ce s-a decis anterior în procesul de planificare.

Lucrurile pe care un designer ar trebui să le ia în considerare

„Ar trebui designerii să știe cum să codeze?” este o întrebare obișnuită și este foarte rezonabilă. Dacă un proiectant înțelege codul din spate și în mod ideal poate produce astfel (într-o anumită măsură), atunci el / ea poate ajuta întreaga echipă în eforturile lor de a finaliza proiectul mai repede.

Iată câteva motive pentru care acesta este cazul:

1 - În cele din urmă, totul ajunge în browser.

Orice modele pe care le creați în Figma, Adobe etc. vor apărea în browser. Toate browserele utilizează un tip de limbaj de programare cunoscut sub numele de HTML / CSS pentru a reda o pagină. Dacă este utilizat Javascript, puteți face ca desenele dvs. să devină interactive.

Nota importantă de luat este că orice proiectare ar trebui să fie realizabilă în HTML / CSS. Mulți dezvoltatori front-end talentați pot implementa aproape orice atâta timp cât tehnologia o permite. Dar amintiți-vă - nu este întotdeauna vorba despre „Poți să o faci?”, Ci despre „Poți să o faci bine și să o faci menținută”.

2 - Coerență

A fi mentenabil este secretul unui proiect de succes. Nu doriți să petreceți ore în șir modificând elementele existente ale site-ului și adăugând altele noi, deoarece baza de coduri este o mizerie. Uneori, proiectele extrem de complexe, cu componente reutilizabile puțin sau deloc, ajung într-o mizerie.

Câteva sfaturi pentru web designer:

• Proiectați având în vedere componentele. Majoritatea instrumentelor oferă acum această funcționalitate (Figma, Adobe XD, Sketch). Forțați-vă să le folosiți mai des până când nu mai devine enervant să faceți acest lucru.
• Aliniați bine elementele. Secțiuni similare ar trebui să aibă aceeași distanță între ele. 80px este o separare bună de întreținut, de exemplu. Nu spaționați aleatoriu secțiuni folosind 80 aici, 86 acolo, 92 pe o treime și 78 pe cealaltă. Păstrați-l îngrijit și ordonat.
• Folosiți o grilă! Toate instrumentele oferă un sistem de rețea. În mod ideal, alegeți o grilă de 12 coloane.
• Prezentați-vă designul pe ecrane largi (1920 px sau mai mult). Acest lucru îi ajută pe dezvoltatori să-și dea seama de modul în care fiecare secțiune și fundalul lor lucrează.

3 - Greutatea site-ului

Cu toții ne dorim un site web rapid, nu? Ei bine, și designerul face parte din acest lucru. Luați în considerare acest lucru: un site web cu 8 imagini imense de înaltă rezoluție, patru videoclipuri și elemente animate. . Noroc cu optimizarea la timp. Deși este posibil, va fi nevoie de timp și tehnici de dezvoltare suplimentare pentru a încărca leneș imaginile și videoclipurile, pentru a optimiza media pe încărcare, pentru a sprijini formate mai bune de fișiere de imagine și pentru a adăuga abordări inteligente de animație pentru performanțe ridicate.

Dacă dezvoltatorii nu sunt foarte experimentați sau nu sunt îngrijorați de viteză, site-ul dvs. web ar putea ajunge extrem de lent pe smartphone-urile și laptopurile de nivel mediu până la mediu.

Cum să ajutăm dezvoltatorii?

În calitate de designer, unul dintre obiectivele pe care trebuie să le aveți în vedere este să faceți dezvoltarea mai ușoară și mai rapidă, menținând în același timp aspectul site-ului.

Ar trebui să luați în considerare ceea ce este ușor de realizat pe web.

• Cutii - Toate sunt cutii. Puteți rotunji unele colțuri, da, puteți face elipse (care sunt definite într-o casetă) și multe altele. Cu toate acestea, când alegeți forme mai complexe care interacționează cu aspectul, atunci lucrurile devin dificile.
• Animarea unei poziții exacte este dificilă - Vă imaginați că doriți să faceți clic pe o imagine, apoi să o mutați pe cealaltă parte a textului? Sună „ușor”, dar nu este. Poziția în care se va deplasa imaginea trebuie să rămână relativă la containerul site-ului, care se modifică în funcție de fereastra de vizualizare și multe altele. Și atunci ce se întâmplă dacă imaginea este mai mare?
• Dimensiunile casetei animate afectează aspectul. Aceasta se referă la orice modificare a modului în care elementele sunt ordonate în timpul unei animații. Acest lucru poate fi extrem de greu pentru browser și va duce adesea la un decalaj uriaș.

Luați în considerare conținut diferit!

Cum ar arăta designul cu 2x textul? Sau ca imagine portret în loc de peisaj? Nu știi niciodată ce va încărca echipa editorială. Ar trebui să existe constrângeri precum raportul de aspect sau chiar marginile imaginilor? Dacă puteți, prezentați acest lucru în design.

Furnizați-vă desenele în instrumente precum Zeplin

Majoritatea instrumentelor de proiectare precum Figma sau Adobe XD au o modalitate de a „partaja” proiectele cu dezvoltatorii. De acolo, echipa front-end poate inspecta culorile, setările tipografiei, distanțele și alte proprietăți vizuale ale straturilor, ceea ce le-ar permite să se lipească foarte bine de design.

Furnizați alte materiale, cum ar fi fonturi sau videoclipuri

Dacă ați folosit un anumit font pe site, furnizați-l dezvoltatorilor. Dacă este licențiat și accesibil prin anumite adrese URL, asigurați-vă că partajați și asta. Este important pentru un dezvoltator să lucreze cu fonturile corecte din prima zi. Dacă există videoclipuri - asigurați-vă că împărtășiți și asta! Videoclipurile ar fi pe YouTube, Vimeo sau auto-găzduite?

Nu alegeți „pixel perfect”

Această noțiune de a păstra aspectul final al site-ului perfect la fel ca și designul este o modalitate ușoară de a face echipa de dezvoltatori să te urască și poate distruge orice șansă de a intra în direct la timp. În aproape toate cazurile, designul NU va fi perfect. Este imposibil să fii 100% sigur că înainte de fiecare buton ai exact 18px spațiu? Și nu 19px? Sau că fiecare titlu are 38 px și nu 37 px? Sau poate că fiecare margine este #ddd și că nu există una care să fie neagră, dar care să aibă 15% opacitate?

Dezvoltatorii adună mici greșeli ca acestea aici și colo pentru a menține coerența pe site. Se construiesc în componente care respectă aceleași reguli. Atâta timp cât nu există în mod evident o schimbare intenționată într-un caz anume, nu ar trebui să existe un motiv pentru care un element să nu poată fi același peste tot.

În cele din urmă, site-ul web codificat ar trebui să urmeze aspectul general al designului.

Lasă comentarii în design

Dacă doriți ca un anumit element să fie interactiv, cum ar fi file, acordeoane, glisante și altele asemenea, luați câteva secunde pentru a scrie cum ar trebui să funcționeze pe desktop, mobil și ce se poate face clic, în cazul în care se schimbă.

Gândește ca un utilizator

Când ați terminat, opriți-vă pentru o secundă și imaginați-vă că utilizați site-ul. Citiți de sus, derulați în jos, faceți clic undeva pentru a vedea mai multe. S-ar putea să lipsească ceva din fluxul de lucru? Există o vedere a unui anumit element care se schimbă în interacțiunea utilizatorului? Dacă acest lucru este adevărat și nu există un design, atunci îi lăsați pe dezvoltatorii dvs. să-și dea seama, ceea ce adaugă stres lucrului. sunt disponibile câteva vizualizări „de stat” (asigurați-vă că menționați care sunt acestea).

Vizualizări receptive

Este descurajant să proiectezi 15 pagini pe desktop și apoi să faci o versiune mobilă. Este și mai enervant să faci o versiune de tabletă ușor diferită. Acesta este motivul pentru care unii designeri ignoră adăugarea acestuia. Cu toate acestea, asta înseamnă că dezvoltatorii vor trebui să o facă în cod. Și ia decizii din cauza asta. Dacă vedeți elemente complicate, prezentați în mod ideal vizualizările tabletelor lor, chiar dacă nu faceți întregul site.

În concluzie

Proiectantul poate face din viața dezvoltatorului un coșmar sau o experiență foarte bună. Cheia pentru realizarea acestuia din urmă este de a înțelege mai bine tehnologia utilizată, HTMl / CSS, care elemente interactive sunt realizabile etc.

Dacă aveți norocul de a fi în preajma dezvoltatorilor și sunteți îngrijorat de anumite elemente, chemați-le pentru a arunca o privire la toate. Cu siguranță vă vor oferi indicații cu privire la ceea ce este dificil și la ceea ce este ușor.