Share
Acestea sunt momente interesante pentru a fi un web designer. CSS începe în cele din urmă să prindă viziunea site-urilor frumoase pe care le avem în capul nostru. Nu mai trebuie să ne bazăm pe hack-uri și imagini pentru a crea interfețe minunate de angajare! Dar nu ne putem baza pe browsere pentru a inaugura această nouă eră. Ca creatori, trebuie să fim flexibili și să ne adaptăm fluxul de lucru pentru a încuraja aceste noi bune practici. Este timpul să regândim modul în care realizăm site-uri web.
Ceea ce voi discuta astăzi nu este nou sau revoluționar, ci mai degrabă o prelungire a ceea ce deja ați suspectat adânc în mintea ta de ceva timp. Acest articol va servi drept contrapondere la o mulțime de alte articole de pe acest site care se concentrează pe Photoshop și Fireworks, dar sunt doar opiniile unui singur designer, astfel încât să le puteți lua sau să le lăsați.
Dacă sunteți ceva de genul meu, când începeți un nou site web, rupeți schița și începeți să schimbați ideile. Apoi, deschideți Photoshop (sau focuri de artificii) și forțați designul. Codul nu are nici măcar o influență asupra acestuia până în ultima etapă.
Aceasta este o idee fundamental eronată, din mai multe motive. Pentru unul, un site web nu este o imagine. Un site web finit este flexibil, în mișcare lucru, construit cu HTML sau CSS. Photoshop ne dă (și clienții noștri) așteptări nerealiste privind modul în care un site web va arăta și se va comporta. Ar trebui să te gândești la modul în care designul se va traduce în cod tot parcursul procesului de proiectare.
În al doilea rând, întregul concept al unui "terminat"? design pentru un site web este greșit. Construirea unui machet Photoshop și apoi a spune: Bine, acum, la codul? dă o senzație permanentă unui design web, ca și cum ai fi încercat o imprimare înainte de al trimite. Unul dintre avantajele imense ale internetului este că acesta se schimbă mereu. Imprimarea unui machete ca Terminat spune că aceasta este versiunea finală a designului care va exista. Ca designeri, ar trebui să îmbrățișăm natura mereu în schimbare a mediului nostru și să recunoaștem că un design nu este niciodată terminat.
Avantajul designului cu codul este acela că trebuie să te gândești la conținut și stiluri ca două lucruri diferite. Conținutul va conduce designul, mai degrabă decât invers.
Evident, veți avea nevoie de un browser. De fapt, ar trebui să aveți câteva browsere pentru testare. (În afară: Vă recomandăm Wine pentru testarea IE pe Mac). Cel puțin ar trebui să aveți un browser bazat pe Webkit, cum ar fi Safari sau Chrome, precum și un browser Gecko, cum ar fi Firefox. Dacă ați făcut vreun fel de design web înainte, veți avea fără îndoială această zonă acoperită.
Ar trebui să aveți, de asemenea, un editor de cod decent. De preferat ceva cu o funcție de actualizare live, cum ar fi Espresso sau Coda. Eu personal sunt un mare fan al TextMate, deși nu are un mod live-update. Din nou, ca un tip web / gal, probabil că aveți deja un favorit, dar aș putea să îl menționez pentru orice nou-venit.
Schița este, fără îndoială, cea mai importantă parte a procesului de proiectare. Acest lucru nu ar trebui să se schimbe chiar dacă proiectați în interiorul browserului.
Încă ar trebui să aveți o idee solidă cu privire la aspectul designului înainte de a porni pe computer. La sfârșitul zilei, acest lucru este încă de design, și ar trebui să utilizați încă un sketchbook. Nu voi intra în detaliu despre această parte a procesului, văzând cum tu, ca designer, ar trebui să-l cunoști deja. Doar știți că se aplică aceleași reguli. Nu l-ai deschide pe Photoshop fără idee despre cum va arăta site-ul dvs., care ar fi nebun!
De fapt, nu trebuie să schițeze. Doar face ce funcționează tu pentru a crea conceptul. Indiferent ce ar putea fi, cel mai important lucru pe care trebuie sa-l luati in considerare este sa obtineti o idee solida in mintea dvs. inainte de a incepe pe calculator.
Aspectul este fără îndoială cea mai importantă parte a acestui proces. Aveți posibilitatea să aveți cele mai frumos selectate fonturi, culori perfecte și detalii minunate, dar fără o structură solidă, întregul design va cădea. Din fericire, construirea unui layout solid, bazat pe plutitor cu CSS este unul dintre cele mai ușoare lucruri pe care le puteți face ca designer web. A List Apart are un articol foarte bun pe tema pe care o recomand foarte mult pentru detaliile tehnice ale construirii unui layout bazat pe CSS.
Dacă există un lucru pe care ar trebui să-l cunoașteți înainte de a intra în editorul de cod, este aspectul designului dvs. Dacă aveți în vedere un aspect specific, este o chestiune simplă să îl codificați. Cu toate acestea, dacă te duci fără un aspect în minte, cred că vei fi dezamăgit de rezultate. Aspectul nu este un lucru pe care tocmai îl puteți experimenta și opriți în zbor, este o chestiune care necesită o atenție deosebită din partea designerului.
Chiar dacă nu știi exact unde fiecare element va trăi pe pagină, ar trebui să aveți cel puțin o idee generală despre plasarea elementelor principale, precum și proporțiile dintre aceste elemente.
Unul dintre marile lucruri despre această nouă mișcare a "Responsabil Web Design"? este modul în care încurajează designerii să gândească în proporții, mai degrabă decât în pixeli. De exemplu, ați putea spune că acest element trebuie să fie de 30% din containerul principal, spre deosebire de 200px sau o măsurătoare similară. Acest lucru vine în special la îndemână pentru designul web în browser atunci când trebuie să structurați o pagină. Puteți începe cu un element principal de container, care este, să zicem, 70% din fereastra browserului, apoi proiectați restul paginii în interiorul containerului, proporțional cu lățimea acestuia. Nu mai vorbiți cu măsurători precise ale pixelilor și acel instrument stupid de riglă din Photoshop!
În acest moment ar trebui să aveți cel puțin auzit de @ font-face, chiar dacă nu l-ați folosit încă într-un proiect. Pentru toți, nu știu, unu dintre voi care nu au auzit de ea, iată versiunea cu o singură frază. @ font-face este o modalitate de a încorpora și de a folosi orice tip de text pentru a fi utilizat pe un site Web, chiar dacă nu este instalat pe calculatoarele utilizatorilor dvs..
Această idee simplă a adus o nouă eră de tipografie web într-o chestiune de câțiva ani. Întreprinderile de anvergură, precum Tipkit și Fontdeck, au apărut pentru unicul scop de a servi tipărite frumoase pentru site-ul dvs. Web. În trecut, am fost forțați să ne bazăm pe metode greoaie precum Cufon sau doar imagini obișnuite pentru a afișa tipul nostru cum vrem, dar tot ce se schimbă. Tipurile de turnătorii au acceptat în mare măsură noul format, modificând licențele lor pentru a permite încorporarea sau chiar pentru a permite ca fonturile lor să fie găzduite de Typekit.
Deci, acest lucru este minunat, dar ce are de-a face cu proiectarea browserului? Bine, domnule, vă spun.
Este mult mai ușor să gestionați fonturile atunci când sunt gestionate de regulile CSS, nu de Photoshop?
Umflarea în Photoshop pentru a schimba fiecare buzunar de text într-o chestie selectată devine puțin cam ridicol după un timp. În cod, puteți examina modificările și să testați diferite tipuri de fonturi, greutăți și dimensiuni doar prin modificarea câtorva rânduri de text. Aceasta vă permite să repetați desenele mai repede și să vă adaptați un design pentru cererile clientului cu câteva apăsări de taste simple.
Toată această putere devine puțin ridicolă atunci când considerăm că avem acum un număr infinit de fonturi pentru care să lucrăm. Atâta timp cât turnătoriile continuă să-și facă lucrul, iar Typekit continuă să facă, designerii nu vor lipsi niciodată un font potrivit.
Vă recomandăm foarte mult să utilizați Typekit, deoarece sunt disponibile mai multe fonturi decât cu o licență standard @ font-face. Puteți gestiona întotdeauna codul însuși, dar tratarea licențelor și necesitatea de a achiziționa fiecare font individual devine destul de ridicol destul de repede. Aceasta este opțiunea pe care am ales-o pentru câteva proiecte și, deși este încă infinit mai bună decât ceea ce am avut înainte, experiența nu a fost cea mai bună.
Când vine vorba de alegerea fonturilor, distrează-te! Experimentați, încercați ceva nebun. Dacă scuzați auto-promovarea flagrantă, aș vrea să vă îndrept privirea spre un alt articol al meu.
Într-o tradițională? procesul de design web, adesea designerul începe prin construirea unui machetuș de gri în designul lor în Photoshop, înainte de a adăuga culorile și detaliile necesare pentru a face designul pop. Acest proces este integrat în aspectul și aspectul general al designului. Chiar dacă nu utilizați alb-negru, construirea designului dvs. în seturi de cutii și forme simple vă permite să vedeți cum va funcționa designul dvs. dintr-o perspectivă mai înaltă. Construirea unui design folosind casete simple este ușor de convertit în fluxul de lucru în browser. Doar folosiți
Odată ce aspectul și tipografia dvs. au fost marcate și decorate corespunzător, introducerea culorii devine o chestiune banală, cu câteva linii de cod. Asta nu înseamnă asta alegere culorile sunt o tehnică ușoară și simplă (deși există un articol foarte bun pentru asta), doar că colorarea obiectelor la nivel tehnic este foarte simplă. Chiar și afișarea gradientelor frumoase este ușor cu CSS3.
Când codul meu este colorat la un design, deseori am deschis Photoshop (gasp!) Pentru a alege culorile. Sunt sigur că sunt disponibile câteva instrumente excelente disponibile online, care oferă un picker de culoare pentru generarea de coduri hexagonale și valori rgb, dar din orice motiv folosesc Photoshop. Acest lucru este din comoditate, pentru că, de obicei, am deja Photoshop deschis, dar voi ajunge la asta mai târziu.
Ca și în cazul tipografiei, cele mai bune scheme de culori provin din experimente, deci distrați-vă! Aici puteți vedea puterea unui proces de design în browser atunci când puteți modifica fundalul și culorile text ale mai multor elemente din pagină cu câteva apăsări de taste. Cu un machet Photoshop, schimbarea culorilor mai multor elemente a fost o sarcină dificilă, implicând selectarea precisă a straturilor și făcând clic pe prea multe butoane pe ferestre, dar nu mai mult!
Amintiți-vă cum am spus că de obicei am deschis Photoshop atunci când codul unui site web? E timpul să-ți sparți ceva, tânărul padawan. Foarte puține site-uri pot fi dezvoltate fără utilizarea Photoshop-ului. Adică gândiți-vă, chiar dacă utilizați un flux de lucru în întregime bazat pe browser, va mai exista macar una sau două imagini personalizate undeva, de exemplu, un fundal sau o icoană de un fel. Cu excepția cazului în care știți despre un mod de a face imagini fără un editor de imagini, cum ar fi Photoshop, tu sau altcineva va trebui să aduci Photoshop sau software similar pentru a face aceste texturi, icoane și ce ai.
Photoshop nu este totul rău. Argumentul meu principal în acest post a fost că nu este deloc bine pentru proiectarea site-urilor web, ci ca un instrument de proiectare a icoanelor, este într-adevăr un fel de mare (dacă ignorați cât de des deranjant se întâmplă deseori, ceea ce încerc). În orice caz, la un moment dat în timpul creării unui design web, veți avea, fără îndoială, să generați un fel de grafică personalizată. Nu am probleme cu faptul că PS este folosit pentru lucruri simple, cum ar fi fundalul repetat, textura sau pictograma care va fi, în cele din urmă, parte dintr-un design web mai amplu.
De asemenea, focurile de artificii nu sunt nici rău. De fapt, Fireworks are o mulțime de caracteristici excelente (cum ar fi procesarea în bloc și instrumente avansate "salvați pentru web", care de fapt îl fac partenerul perfect pentru fluxul de lucru în browser-ul dvs. trebuie să știți când să îl utilizați.
Am parcurs un drum lung în acest articol, dar înainte de a termina, există câteva avertismente cu privire la acest proces pe care aș vrea să le menționez.
Pushback client: Este posibil ca unii clienți să nu vă placă folosirea acestei tehnici. S-ar putea să fi fost morți să vadă un machet Photoshop înainte de a face orice lucrare de cod. Dacă acesta este cazul, atunci ar trebui să le găzduiți. Puteți utiliza totuși multe sfaturi pe care le-am oferit aici, cum ar fi încercarea de tipărire diferită cu Tipul de tip sau alt serviciu @ font-face sau repetarea iterării unui design cu culori. Partea importantă a acestui post este recunoașterea faptului că, chiar dacă machetați cu un editor de imagini, designul ar trebui să fie în continuare deschis spre schimbare și îmbunătățire.
Vechile spoturi de browser vechi: Există încă multe lucruri pe care nu le puteți face în browser și multe lucruri care nu sunt acceptate de browserele mai vechi. Dacă compatibilitatea completă cu IE7 este o cerință a clientului, atunci nu ar trebui să utilizați gradienți CSS, ci să utilizați imagini. Există modalități de furnizare de rezervări, dar uneori un client va cere un sprijin complet. Acestea fiind spuse, ar trebui întotdeauna să căutați modalități de a delega responsabilitatea designului la CSS și de a reduce utilizarea exagerată a imaginii. Produce marcaj mai curat și mai durabil și resurse.
Fii confortabil! Al treilea și cel mai important avertisment: este posibil să nu vă simțiți confortabil în acest flux de lucru și asta este bine! După cum am spus înainte, chiar dacă nu sunteți gata sau nu puteți să urmați complet aceste idei, important este că recunoașteți și cel puțin încercați să luați în considerare unele dintre concepte, cum ar fi repetarea rapidă sau concentrarea pe aspect.
Este timpul acela din nou. Este timpul să încheiați și să evaluați cu adevărat ceea ce ați învățat astăzi, care, sperăm, nu este nimic. Am acoperit multe lucruri și, cu puțin noroc, cel puțin o parte din ea ți-a rămas în creier. Nu mă aștept să mergeți și să vă schimbați complet fluxurile de lucru, vreau doar să vă gândiți că există un alt mod de a face lucrurile. Este uneori greu să dai seama că există și alte modalități de proiectare în afară de modul în care faci lucrurile acum, dar ca designer, este important să fii expus la diferite școli de gândire.
Cred cu tărie că acest proces este viitorul designului web și eu, bineînțeles, îl salut!
Accentsconagua