Share
În acest post vă voi arăta un set de machete de douăzeci de ecran pentru un proiect din lumea reală pe care am lucrat - viitoarea reproiectare și relansare a galeriei noastre de design și inspirație FaveUp. Voi explica câteva dintre motivele pentru care și cum au intrat în design, cum folosesc machete de design pentru a specifica o aplicație web, precum și câteva note generale despre design. Noul site pe care îl numim Creattica Inspire este acum dezvoltat de echipa noastră de dezvoltare crack Melbourne și va fi lovit cu tuburile interweb ca una dintre primele noastre lansări din 2009.
Această postare este Ziua 6 a Sesiunii noastre de Web Design. Sesiuni de creație "Ziua sesiunii 5-a sesiune"Creattica Inspire este de fapt o reconstrucție a unui site existent pe care îl executăm numit FaveUp, care este o galerie de logo-uri, cărți de vizită și site-uri Web. Pentru a fi cinstit FaveUp este un site care reușește în ciuda ei înșiși. Am construit-o acum un an de către un antreprenor extern și nu este de fapt foarte bine pusă împreună - oricine a trimis la site-ul va ști că este destul de buggy. Design-wise, de asemenea, are unele probleme reale - un "logo" ciudat, o interfață care se prăjește pe unele pagini, un sistem de rating nemaipomenit pe care îl puteți păcăli cu ușurință și poate cel mai rău dintre toate e destul de urât. În ansamblu, îmi place să spun că "o grămadă de bastoane".
Cu toate acestea, site-ul are câteva lucruri care par să funcționeze bine pe site, cea mai importantă fiind faptul că are o concentrare foarte mare asupra conținutului. Când defilați în jos o pagină, veți obține design după design, și nu mult mai mult. Este simplu și clar, iar acest lucru contează foarte mult pentru a face un site util. Iată cum arată actualul site FaveUp:
Așadar, reconstruim sistemul de la zero și importăm tot conținutul vechi. Noul site va sta la inspire.creattica.com și va face parte din suita de site-uri și servicii creative pe care le construim la Creattica.com. Asa ca acum cateva saptamani m-am indreptat spre reproiectarea FaveUp si, in acelasi timp, proiectand o privire pentru Creattica. Rezultatul final sunt acele machete pe care le voi discuta:
Ecranele sunt un set de machete construite în HTML, care sunt menite să reprezinte toate ecranele cheie de pe site. Dezvoltatorul proiectului Erin le îmbină acum în codul de bază și apoi îl vom actualiza și îl vom modifica în produsul final.
Deci, ceea ce am făcut mai jos este să folosesc acest design ca o modalitate de a vorbi despre propriile procese și gânduri personale, legate de un proiect din lumea reală. Sper că veți găsi notele utile!
Redesenarea unui site poate fi un proces dificil, deoarece trebuie să vă ocupați de greutatea așteptărilor, de rezistența utilizatorilor la schimbare și de spectrul prezent vreodată că ați putea face un pas înapoi. Din experiența mea, trucul spre un reproiectare reușită este acela de a păstra senzația generală a unui site și de a capta unele dintre semnele distinctive ale vechiului design în noul
Prin menținerea faptului că vă simțiți sigur că există o continuitate în site și că utilizatorii încă se simt familiarizați cu noul site. Păstrarea simțului unui site nu trebuie să însemne că noul site trebuie să arate la fel. Această tranziție de la FaveUp la Creattica Inspire este destul de diferită! Cu toate acestea, există o serie de lucruri care o mențin asociate:
Acum poți să reproiectați și să schimbați în totalitate aspectul elementelor de pagină sau să revizuiți paginile cheie ale site-ului sau să treceți la un nou stil de design. Cu toate acestea, pentru un reproiectare reușită, cred că nu puteți face totul odată. Dacă intenționați să mutați elementele paginii în jurul valorii de, atunci ar trebui să păstrați designul și să arătați cu adevărat similare. Dacă veți schimba complet designul, cel puțin poziționarea ar trebui să rămână la fel.
Dacă nu păstrați unele lucruri la fel, veți pierde toată continuitatea și este aproape ca lansarea unui site de la zero. Există momente când acest lucru este necesar (a.k.a. site-ul vechi aspirat), dar în cele mai multe cazuri când un site este popular, este mai bine să păstreze o oarecare continuitate.
Designerul Ace UX Cennydd Bowles are un articol interesant despre modul în care utilizatorii reacționează la reproiectări, unde menționează cele cinci etape ale reacției utilizatorilor - negare, furie, negociere, depresie, acceptare.
Un site pe care l-am redesenat de trei ori este Psdtuts + însuși. Dacă aveți o privire la imaginea de mai jos, unde puteți vedea toate cele patru modele una după alta, veți vedea că a mers astfel:
La fiecare pas, ceva sa schimbat destul de semnificativ (cu excepția poate ultimul pas), dar, de asemenea, unele lucruri au rămas întotdeauna la fel. Când ne-am mutat de pe site-ul HTML simplu într-un blog WordPress, schema de culori și elementele de design au rămas la fel. Cand ne-am mutat de la designul maro WordPress la cel alb, plasarea a tot ceea ce a ramas acelasi - incidental acesta a fost cel mai controversat pas :-)
Când proiectați un site important, trebuie să vă petreceți puțin timp gândindu-vă la construire, dar acest lucru este valabil în special în cazul unui reproiect. Pentru că avem un set de date destul de mare pentru a păstra (toate aceste observații ale utilizatorilor), este foarte important să aflați cum veți trece la noul design într-un mod cât mai simplu posibil.
Pentru FaveUp> Creattica Inspire, unul dintre principalele considerente este că ne mutăm de la a avea o singură imagine pe design, de a avea două - o listă și una detaliată. Pe pagina detaliată puteți vedea cum m-am ocupat de a nu avea o imagine mare (un centru simplu cu un fundal întunecat face truc).
Un design web bun ar trebui să ghideze ochiul privitorului prin ecran. Acest lucru se poate face deoarece diferite elemente de pe pagină pot avea o altă prioritate vizuală în funcție de dimensiunea, forma, culoarea și poziția lor. Mai jos sunt câteva ecrane în care am încercat să arăt calea pe care o cunosc în speranța un ochi al spectatorului va lua ...
Andy Rutledge are un articol fantastic despre ghidarea ochiului privitorului în jurul ecranului, cu exemple minunate. Citiți-o aici: Proiectarea unui tur cu ghid.
Proiectarea unui site bogat în informații este foarte diferită de a lucra pe un site cu greutate redusă. Atunci când nu există o mulțime de conținut, puteți merge sălbatic cu designul dvs. și, într-o anumită măsură, lăsați designul să domine conținutul, și asta este bine. Un exemplu bun al unui site cu o greutate redusă este un portofoliu personal în care chiar și un aspect puternic proiectat (a se vedea, de exemplu, aspectul bine definit al bolii) încă funcționează bine și site-ul este ușor de înțeles și de înțeles.
Pe de altă parte, un site cu conținut ridicat de conținut este un cazan de pește diferit. Ca regulă generală, cu cât este mai mult conținutul și informațiile pe o pagină, cu atât trebuie să fie mai mult subevaluat designul. Motivul pentru aceasta este că, cu o mulțime de conținut pe o pagină, un full-on de design va primi doar în cale și confuz privitor. Este greu să digerați o mulțime de informații dintr-o dată și adăugați un amestec foarte greu amestecului și riscați să copleșiți de oameni.
Un al doilea motiv, la fel de important pentru a-l tonifica pe design, este de a păstra focalizarea asupra conținutului propriu-zis. Pe site-ul Inspire, spectatorii trebuie să se uite la o galerie de design. Dacă proiectarea galeriei este într-adevăr stilizată și agresivă, aceasta va deteriora conținutul în sine și va slăbi întregul site. De aceea, dacă te duci la o galerie de artă, tot ce vezi vreodată sunt ziduri albe simple, îți poți imagina dacă au tapet și lumini ornamentale de pretutindeni?
Ultimile site-uri de conținut greu sunt, desigur, portaluri de știri și portaluri. Dacă te uiți la Washington Post, MSN, Yahoo, NYTimes veți găsi că design-ul pe toate se blochează și este adesea relativ simplu.
Deși un site bogat în informații nu necesită viziuni grele, mai sunt multe de făcut. Când lucrați la acest tip de site, trebuie să vă depuneți mult mai mult efort pentru a vă asigura că interfața dvs. este foarte curată și utilizabilă. Pe site-ul Inspire am încercat să păstrez navigația foarte clară, să utilizez o mulțime de spațiu și să utilizez straturi de negru, roșu, gri și alb pentru a delimita diferite secțiuni ale interfeței.
Un lucru pe care îl facem foarte mult la Envato este crearea de familii de site-uri web. Avem familia TUTS, piețele și acum lucrăm la această familie de site-uri Creattica. Acest lucru mi-a dat o mulțime de experiență creând modele care pot fi refolosite pe mai multe site-uri pentru a crea un aspect unificat. Iată câteva lucruri pe care le-am învățat:
Când am lansat primul subsite de la Creattica cu câteva luni în urmă - Creattica Daily - nu am vrut să planific înainte. În schimb, am proiectat un design elegant și am lansat site-ul fără să mă gândesc la ce aș face pentru celelalte site-uri. După cum puteți spune din acest aspect Creattica Inspire, a trebuit să încep din nou de la zero. Vechiul aspect este acum vândut pe ThemeForest ca o temă WordPress, deci nu este o pierdere totală, dar totuși plătește cu adevărat să gândiți înainte și să designați un aspect care să se potrivească mai multor site-uri.
Pentru a realiza o singură lucrare de proiectare pe câteva subsitute, este necesar cel puțin un element sub-branding. Pe Creattica și TUTS este culoarea, pe Marketplaces este o combinație de culori și temă logo / animal. Indiferent de ce alegeți, trebuie să existe ceva pentru a diferenția site-urile atunci când comutați între ele.
Menținerea unei familii de site-uri este o mulțime de lucruri, deci merită să faceți cea mai mare parte a designului să rămână consecventă. Acest lucru nu înseamnă doar că utilizatorii se familiarizează foarte mult cu simțurile site-urilor, dar la nivel practic înseamnă că nu trebuie să faci prea multă muncă!
Înainte de a începe un proiect ca acesta, îmi dau întotdeauna ceva timp pentru a merge la surfing. În afară de a-mi face munca mult mai plăcută, am în general două scopuri în minte:
Care este inspiratia creattica Inspire? Este un mic site numit CNN! Mă uitam la CNN și cum gestionează o cantitate atât de mare de informații și atât de multe subsite și am decis că mi-au plăcut două lucruri despre site - aspectul general și ideea de cutii albe pe un fundal gri deschis.
Cele două modele arată la fel? Nu chiar. Puteți vedea asemănarea acum că am subliniat asta? Probabil - mai ales că ambele utilizează roșu! Este un lucru rău de făcut? Nu sunt sigur. Cred că este nepoliticos să mă prefac că lucrez într-un vid și inventez cumva idei noi.
Cred că propria mea este că este bine să vă inspirați de alți designeri - de fapt, cred că este imposibil să nu. Nu e bine să desenezi copiile drepte. Deci, dacă sunteți inspirat de un alt design, este esențial să îi dați propriul dvs. spin și interpretare și lăsați-o să se dezvolte până la punctul în care nu seamănă prea mult.
Care este parerea ta? Este inspirația OK? Când se încadrează în imitație? Exemplul meu este prea departe sau OK?
Un proiect ca Creattica Inspire este interesant deoarece implică mult mai mult decât construirea unui site HTML sau chiar jupuirea unui produs CMS precum WordPress. Este suficient de mare pentru a implica unele probleme de dezvoltare, niveluri multiple de acces și o varietate de caracteristici. Iată câteva dintre gândurile mele despre lucrul la o aplicație web:
Pe proiecte mari precum Inspire sau FlashDen, este inutil să încercați să vă gândiți la fiecare ecran care este sau va fi vreodată pe site. Aveți încredere în mine atunci când spun că există pagini pe care le veți ignora cumva sau noi trăsături pe care nimeni nu le-a gândit încă că va trebui să le lucreze în design ulterior în viața lor.
Un plan mult mai bun este de a proiecta o structură de tip flexibil și modular. Designul Inspire este realizat astfel încât o nouă pagină să poată fi construită cu ușurință prin aruncarea împreună a câtorva dintre cutiile albe, adăugarea unui nou element de meniu sau a unui submeniu și utilizarea elementelor de design standard cum ar fi lista de mini-galerii sau casetele de comentarii ale utilizatorilor. Este posibil să existe mai multă cerință în viitor, dar, cu siguranță, crearea unei noi pagini sau a unei caracteristici nu va sparge structura!
Aproape orice aplicație web va implica un fel de administrare. În cazul Inspire trebuie să fim capabili să aprobăm noi proiecte, să edităm articole și așa mai departe. În vremurile vechi am folosit întotdeauna o zonă specială de administrare a funcțiilor de acest gen - cum ar fi modul în care WordPress are acel tablou de bord WP-Admin. Deși, în unele cazuri, având o zonă de administrare este o idee bună, în multe situații este mai bine să mergem cu administrarea inline.
Administrarea în linie înseamnă că lucrați în funcționalitate suplimentară în proiectarea obișnuită a front-end-ului, care apare doar atunci când utilizatorul este administrator. Deci, de exemplu, pe Inspire când un utilizator este un admin, vor primi câteva caracteristici suplimentare pe paginile obișnuite. De exemplu, pot căuta pe site ca o persoană obișnuită și apoi pot edita articole pe care le găsesc.
Motivul pentru administrarea inline este preferabil aici fiindcă construim deja un set de moduri de navigare pe site, cum ar fi căutarea și etichetarea, precum și o modalitate excelentă de a vizualiza conținutul site-ului, deci de ce să reproiectăm și să reconstruim toate acestea din nou într-un admin zonă. Cu administrarea inline, un utilizator vă poate trimite un link către un element și nu îl revede în zona de administrare pe care o puteți edita direct pe o pagină.
Pe unele locuri de muncă veți servi atât ca designer web, cât și ca manager de proiect. În cazul meu, este datorită activității mele de la Envato, dar chiar și în munca obișnuită a clienților, este posibil să puneți în funcțiune și să dezvoltați un proiect în numele clientului dvs. În astfel de situații, va trebui să informați o echipă de dezvoltatori sau dezvoltatori pentru a construi efectiv proiectul pe care lucrați.
Există o varietate de moduri de a scurta și de a lucra cu un dezvoltator pe un proiect. Multe dintre ele depind de mărimea și scopul unui proiect. Pentru un proiect de mici dimensiuni ca acesta, asta este eu do:
În plus, din punctul de vedere al designului web, aceste 20 de ecrane iau în considerare aproape orice tip de aspect major pentru site.
Am tendința să cred că desenele reale ilustrează funcționalitatea mai bună decât firmele - însă este destul de discutabil.
Teoretic, puteți specifica un întreg proiect folosind scenarii de utilizatori și există o mulțime de literatură în domeniul software-ului și dezvoltării web despre el. Vă recomandăm să citiți design-ul de interfață pentru JoelOnSoftware pentru programatori - chiar dacă sunteți un designer și nu un programator!
Punctul acestor pași este următorul:
Deci asta este procesul meu brut pentru informarea unui dezvoltator. Ce faci? Și dacă tu ești dezvoltator, e ceva ce ar trebui să fac mai bine?
Pentru un tratament mai detaliat al informării unui dezvoltator, vă recomandăm să consultați Cum să creați o aplicație Web pe ReadWriteWeb. De asemenea, puteți discuta cu propria echipă de dezvoltare pentru a vedea ce au nevoie și doriți.
Cred că motivul pentru care designul web este un lucru minunat este că există atât de multe fațete diferite la locul de muncă. În acest articol am încercat să demonstrez cum un loc de muncă de design unic poate implica tot felul de abilități și probleme - de la inspirația designului la colaborarea cu dezvoltatorii, de la păstrarea fericirii utilizatorilor într-un redesign la planificarea modului în care un site va fi administrat. Sigur că este o provocare, dar asta îl face atât de bine!
În ceea ce privește Creattica Inspire, ar trebui să vedem că va face debutul la începutul anului 2009 (nu-mi vine să cred că suntem chiar la colț!) Și veți auzi despre lansarea chiar aici pe Psdtuts+!
Această postare este Ziua 6 a Sesiunii noastre de Web Design. Sesiuni de creație "Ziua sesiunii 5-a sesiune"
Accentsconagua