ABONAMENTE VIDEO REDACȚIA
RO
EN
Numărul 148 Numărul 147 Numărul 146 Numărul 145 Numărul 144 Numărul 143 Numărul 142 Numărul 141 Numărul 140 Numărul 139 Numărul 138 Numărul 137 Numărul 136 Numărul 135 Numărul 134 Numărul 133 Numărul 132 Numărul 131 Numărul 130 Numărul 129 Numărul 128 Numărul 127 Numărul 126 Numărul 125 Numărul 124 Numărul 123 Numărul 122 Numărul 121 Numărul 120 Numărul 119 Numărul 118 Numărul 117 Numărul 116 Numărul 115 Numărul 114 Numărul 113 Numărul 112 Numărul 111 Numărul 110 Numărul 109 Numărul 108 Numărul 107 Numărul 106 Numărul 105 Numărul 104 Numărul 103 Numărul 102 Numărul 101 Numărul 100 Numărul 99 Numărul 98 Numărul 97 Numărul 96 Numărul 95 Numărul 94 Numărul 93 Numărul 92 Numărul 91 Numărul 90 Numărul 89 Numărul 88 Numărul 87 Numărul 86 Numărul 85 Numărul 84 Numărul 83 Numărul 82 Numărul 81 Numărul 80 Numărul 79 Numărul 78 Numărul 77 Numărul 76 Numărul 75 Numărul 74 Numărul 73 Numărul 72 Numărul 71 Numărul 70 Numărul 69 Numărul 68 Numărul 67 Numărul 66 Numărul 65 Numărul 64 Numărul 63 Numărul 62 Numărul 61 Numărul 60 Numărul 59 Numărul 58 Numărul 57 Numărul 56 Numărul 55 Numărul 54 Numărul 53 Numărul 52 Numărul 51 Numărul 50 Numărul 49 Numărul 48 Numărul 47 Numărul 46 Numărul 45 Numărul 44 Numărul 43 Numărul 42 Numărul 41 Numărul 40 Numărul 39 Numărul 38 Numărul 37 Numărul 36 Numărul 35 Numărul 34 Numărul 33 Numărul 32 Numărul 31 Numărul 30 Numărul 29 Numărul 28 Numărul 27 Numărul 26 Numărul 25 Numărul 24 Numărul 23 Numărul 22 Numărul 21 Numărul 20 Numărul 19 Numărul 18 Numărul 17 Numărul 16 Numărul 15 Numărul 14 Numărul 13 Numărul 12 Numărul 11 Numărul 10 Numărul 9 Numărul 8 Numărul 7 Numărul 6 Numărul 5 Numărul 4 Numărul 3 Numărul 2 Numărul 1
×
▼ LISTĂ EDIȚII ▼
Numărul 30
Abonament PDF

De la Design la Development

Vlad Derdeicea
Lead Graphic Designer
@Subsign



PROGRAMARE

În ultima perioadă pe măsură ce web-ul devine tot mai divers, din ce în ce mai mulţi designeri având cunoştinţe tehnologice limitate reuşesc să contruiască site-uri reuşite. Din start vrem să recunoaștem că designerii sunt total dependenţei de developer-i pentru a le aduce creaţiile la viaţă. Pe cont propriu mulţi dintre noi suntem buni la a crea un demo static sau o animaţie de bază dacă suntem norocoşi, dar aceasta nu înseamnă că este gata. Astfel avem nevoie de un developer care să ne traducă designul în cod pe care orice device să îl înţeleagă și să îl execute oriunde în lume.

Cum comunică de multe ori designerii cu developer-ii? Designerii trimit o adunătură de imagini, site-uri exemplu, psd-uri încurcate și documentaţii incomplete. Odată începută faza de development apar inevitabil modificări la grafică sau la structura de bază. Această adunătură este ţinută împreună de întălniri scurte și de notițe superficiale, iar la sfârșitul proiectului toată lumea speră să semene cu ce a trimis designerul în primă fază.

Cu toţii suntem de acord că există un decalaj între designeri și developer. Nu am o soluţie simplă în această privinţa însă am câteva sfaturi căpătate de-a lungul timpului.

Fă-ți un plan solid

Crearea unui plan este esenţială pentru a face website-uri de succes dar și pentru a înţelege developerul care sunt aşteptările tale și ale clientului. O bună soluţie de a evita neînţelegerile este de a îi arăta developerului din start care îți este wireframe-ul și dacă ceea ce vrei tu să creezi este realizabil. Este cea mai bună perioadă să pui întrebări de genul: "Putem realiza acest lucru în bugetul stabilit?" sau "Vezi [introdu grija] ca fiind o problemă pentru respectarea deadline-ului?"

Generează un mock-up bun al design-ului tău

Înainte de a deschide Photoshop-ul structurează site-ul cu un grid adecvat pentru diferite rezoluţii și device-uri. Utilizarea unei lățimi de content a maxim 1080 de px este o bună modalitate de a fi sigur că îi vei face viaţa mai uşoară developer-ului. Generarea unui grid este și o metodă mai uşoară pentru ca el să observe lucrurile aliniate. Folosirea unui layout pe bază de grid este cea mai ușoară și cea mai bună modalitate de a obține un design "Pixel Perfect".

Odată ce designul este gata, acesta poate fi modificat de client sau poate trece mai departe la faza de development unde este important să prevezi cum va arăta scalabil pe mobil, tabletă și desktop. Cum va fi afectat layout-ul tău dacă va mai fi adaugată o categorie, sau dacă clientul vrea să mai adauge încă 5 paragrafe de text. Toate aceste întrebări trebuie să aibă un răspuns înainte de a trimite proiectul la development.

Organizează PSD-ul în așa fel încât și alții să înțeleagă cu ce layer-e și grupuri să lucreze. O soluție bună este să îți grupezi layer-ele și să le dai numele pe care l-ar avea în web (Header, Footer, Content, Video, etc.) Fă tot posibilul ca fiecare element grafic să fie pe câte un layer separat, nu există nimic mai rău decât să încerci să separi două elemente de pe un singur layer. Toate aceste lucruri sună firesc dar micșorează substanțial durata de development dacă sunt organizate.

De asemenea este esenţial să ai și câteva imagini cu detalii (diferite stări ale butoanelor, meniurilor de hover, call to action-uri, etc.) O bună aplicaţie pentru a comunica feedback-uri pe imagine sau alte detalii este "Skitch".

Învaţă funcționalitatea UI-ului tău.

Atunci când creezi elemente diferite cu funcționalități și animații speciale cel mai bine este să găseşti exemple sau să scrii documentaţii precise. Developer-ii nu pot (încă) să îți citească gândurile dacă le dai o imagine statică fără nici o notița sau fără demo.

Dă un feedback productiv.

Odată ce developer-ul și-a terminat treaba vor apărea revizii din partea ta sau a clientului. Foarte rar se întâmplă ca el să nimerească din prima revizie varianta finală așa că va trebui să îi prezinți cât se poate de clar și de specific ce modificări vrei să fie făcute. Pentru a evita orice fel de confuzie e recomandat să țineți cont de modificări prin versiuni.

În concluzie, cu cât ești mai organizat cu atât iți va veni mai ușor să modifici și să îi faci pe alţii să îţi înţeleagă și aprecieze viziunea. Dacă ești nou în webdesign nu lăsa nici o oportunitate să treacă pe lângă tine. Întreabă-ți developer-ul cum poți să îi salvezi câteva ore și în același timp să faci lucruri cât mai inovatoare. Învată din greșelile tale pentru ca pe măsură ce avansezi, să te poți ține mai ușor de deadline-ul stabilit.

LANSAREA NUMĂRULUI 149

Marți, 26 Octombrie, ora 18:00

sediul Cognizant

Facebook Meetup StreamEvent YouTube

NUMĂRUL 147 - Automotive

Sponsori

  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • BoatyardX
  • .msg systems
  • P3 group
  • Ing Hubs
  • Cognizant Softvision
  • Colors in projects