Share
Wireframing-ul este un pas important în orice proces de proiectare a ecranului. Vă permite în primul rând să definiți ierarhia de informații a designului dvs., făcându-vă mai ușor să planificați aspectul în funcție de modul în care doriți ca utilizatorul dvs. să proceseze informațiile. Dacă totuși nu trebuie să utilizați firframing, este timpul să vă umeziți picioarele.
Înainte de a începe, totuși, o întrebare rapidă: aveți nevoie de o soluție de site profesional? Dacă da, avem un șir de șabloane de site-uri frumos proiectate care se potrivesc nevoilor dvs. Puteți descărca șabloane nelimitate și alte elemente pentru un singur abonament lunar scăzut.
Șabloane de site pentru Envato ElementsÎn caz contrar, hai să intrăm în acest tutorial!
Este ca un plan arhitectural; trebuie să o vedeți în diagrame bidimensionale alb-negru înainte de a înțelege cum să construiți casa actuală. În mod similar, pentru un design al ecranului, nu puteți începe să construiți straturi de pixeli în Photoshop sau să scrieți blocuri de coduri, fără să știți unde vor merge informațiile.
La un nivel mai profund, o rețea wireframe este, de asemenea, foarte utilă pentru a determina modul în care utilizatorul interacționează cu interfața. De exemplu, cadrele wireframes pot conține diferite stări de comportament de butoane sau de meniuri.
Wireframing este importantă deoarece permite designerului să planifice aspectul și interacțiunea unei interfețe fără a fi distras de culori, alegeri de fonturi sau chiar de copiere. Îmi place să explic clienților mei că dacă un utilizator nu poate să-și dea seama unde să meargă pe un cadru alb-negru, nu contează ce culori folosiți în cele din urmă. Un buton trebuie să fie evident chiar dacă nu este strălucitor sau colorat.
Ca fundația unei clădiri, aceasta trebuie să fie fundamentală înainte de a vă decide dacă să-i dați un strat scump de vopsea.
Înainte de a obține mai multe detalii, deoarece o imagine poate picta mii de cuvinte, aruncați o privire la firele I ♥. Veți avea posibilitatea de a obține o imagine de ansamblu rapidă și înțelegere vizuală a modului în care alți designeri se ocupă de procesul de modelare a rețelelor.
Poate, de asemenea, apuca acest browser minunat bookmarklet, Wirify care vă permite să vedeți o versiune "wireframe-d" a oricărui site live.
Dacă observați continuu ceea ce fac ceilalți designeri sau site-uri pentru firmele lor, veți obține cu ușurință o imagine în mintea dvs. cu privire la modul în care o rețea wireframe vă ajută să organizați informații pentru ecran.
Designul este un proces organic și, prin urmare, diferiții designeri se abordează prin modelarea firewall-ului și traducerea acestuia în vizual sau cod în moduri diferite. Trebuie să găsiți procesul care vă aduce propriile dvs. puncte forte și vă simțiți cel mai bine. Mai jos este o diagramă care prezintă mai multe procese tipice:
37signalele sunt bine cunoscute pentru a susține utilizarea schițelor și a merge direct la cod, deși se pare că unii dintre designerii lor implică machete vizuale în procesul lor prea.
Pentru mine, am parcurs numeroase cicluri de proiectare-cod pentru a avea un proces oarecum raționalizat. Acesta este un pas pe care unii oameni nu-l pot gandi, dar consider, de asemenea, orice cadru html / css pe care il folosesc in proiect.
De exemplu, am folosit pentru a construi o tona de site-uri în Blueprint, așadar mi-aș fixa atît firmele mele, cât și Blueprint-ul la aceeași rețea de 12 coloane. Acest lucru accelerează considerabil prototipul și timpul de dezvoltare, deoarece în loc să trebuiască să scriu lățimea fiecărui element în foaia de stil CSS, acestea sunt predefinite de la una la douăsprezece coloane. Acum folosesc cssgrid pentru suportul de design receptiv, dar este încă setat la o rețea de 12 coloane pe care o puteți descărca ca un șablon Photoshop.
După cum am spus, este de până la tine să decideți la ce proces vă simțiți confortabil, câteodată ați încercat-o de mai multe ori înainte de a realiza care este cel mai eficient proces. Unii oameni ar putea fi foarte buni la schițare și ar prefera să nu folosească deloc un instrument de tip wireframing. Alți designeri ar putea dori să aibă cât mai mulți pași posibil pentru a minimiza abaterile sau pentru a le permite să gândească prin fiecare iterație, pe măsură ce designul începe să ia forma și forma.
În cele din urmă vă veți dezvolta propriul proces preferat, dar din motive de tutorial, voi folosi exemplul meu tipic:
Motivul pentru care folosesc de obicei Illustrator ca instrumentul meu de modelare wireframe este în principal din trei motive:
Cu toate acestea, folosesc alte instrumente și depinde de scenariul proiectului. Voi pune pe scurt câteva instrumente populare, punctele forte și slăbiciunile lor în secțiunea următoare.
Iată câteva instrumente populare în nici o ordine particulară:
Balsamiq a devenit popular, deoarece firmele realizate cu Balsamiq se aseamănă cu schițele, făcându-l imediat evident că firul nu este un produs finit, ci o lucrare în desfășurare. Balsamiq are, de asemenea, o imensa biblioteca de componente reutilizabile pe care le puteti glisa si picura foarte usor pentru a proiecta firmele dumneavoastra.
Puteți să-l utilizați și pe aproape orice platformă, cu versiuni desktop disponibile pentru Mac, Windows și Linux, plus o versiune web dacă preferați să lucrați în cloud. Aplicațiile de la terțe părți, precum iMockups pentru iOS, suportă și formatele de export Balsamiq.
Un vechi Mac favorit, Omnigraffle are, de asemenea, o bibliotecă de componente reutilizabile, cu o largă asistență; Graffletopia.
Deoarece a fost dezvoltat special ca o aplicație de diagrama, Omnigraffle are, de asemenea, caracteristici complexe precum aspectul automat, suportul pentru stilurile obiectului personalizat, ghidurile inteligente și instrumentele grafice. Unele dintre aceste caracteristici sunt de asemenea disponibile în suita Adobe CS, dar dacă nu aveți suita CS, Omnigraffle are o valoare bună (~ $ 100) pentru producerea de cadre detaliate.
Aproape ca bunicul sculelor de frezare, Axure a fost unul dintre primele instrumente de fabricație / prototipare de clasa profesionala. Până de curând, era disponibilă doar pe Windows. Eu personal nu am prea multă experiență în acest domeniu, dar este cunoscut că este un instrument pe scară largă în rândul profesioniștilor din industrie.
Un copil nou pe bloc, Flairbuilder are un sprijin foarte puternic pentru interacțiuni.
De asemenea, are o bibliotecă cu componente uriașe, suporta pagini de bază și puteți exporta prototipul pentru a fi vizualizat online.
Dacă software-ul desktop nu este ceașcă de ceai, există instrumente cum ar fi mockflow, hotgloo și mockingbird.
Keynotopia "transformă aplicația de prezentare preferată în cel mai bun instrument de prototipare rapidă pentru crearea de machete pentru aplicații mobile, web și desktop app". Pentru utilizatorii non-mac, nu vă îngrijorați, Keynotopia oferă de asemenea șabloane powerpoint.
Îmi recomand personal foarte mult dacă aveți nevoie de aplicații mobile de tip wireframe sau protoype rapid. O altă alternativă bună este Keyung Kungfu.
Pentru cei deja familiarizați cu suita Adobe, Fireworks, Illustrator și Indesign sunt unelte foarte performante, cu propriile forțe și slăbiciuni individuale.
Puteți lucra la întregul proces de proiectare în Fireworks, de la firmele de bază până la imaginea completă. Fireworks suportă pagini principale (gândiți-vă la acestea ca șabloane reutilizabile în care fiecare editare a șablonului principal poate fi aplicată pe paginile dvs. de redactare), bibliotecile de elemente și puteți face prototipuri interactive cu Fireworks relativ repede.
Acesta este unul dintre instrumentele mele preferate de utilizat, deoarece sunt deja foarte familiarizat cu Illustrator și sunt sigur că mulți designeri de aici ar fi familiarizați și cu el. Folosesc Illustrator atunci când încerc să fac cadre rapide, dar complexe, fără a fi nevoie de interactivitate.
Ce-l face câștigător? Abilitatea de a exporta ca PSD cu straturi editabile, suport puternic pentru copiere și lipire pentru Photoshop și pentru controale tipografice puternice cu stiluri de tip pe care le puteți salva, edita și reutiliza, aproape ca și CSS.
Puncte forte similare cu Illustrator, cu controale de stiluri și mai puternice, cu suport puternic pentru pagini master și cu capacitatea recentă de a face prototipuri interactive.
Am selectat Indesign când trebuie să fac prototipuri interactiv de înaltă fidelitate cu mai multe pagini. Singurul avertisment pentru mine este suportul redus al exportului către Photoshop pentru proiectarea imaginilor.
"Prototyping-ul puternic a devenit ușor." Versiunea 9 recent lansată, cu o nouă paletă wysiwyg. Merită verificat.
Există o mulțime de teorii cu privire la sistemele de rețea, dar fără a merge prea mult în ea, o voi explica ca fiind "o modalitate structurată și simplă de a structura elemente".
Folosesc Illustrator pentru acest tutorial, dar pașii pot fi aplicați pentru oricare dintre instrumentele tale.
Mai întâi, setați o dimensiune a documentului. Am folosit 1280 x 900 pentru că voi folosi cssgrid care va permite site-ul meu să scadă între rezoluțiile mobile până la un maxim de 1140 pixeli cu ușurință.
Plasați șablonul descărcat din cssgrid în documentul dvs..
Există o mulțime de șabloane de rețea disponibile pentru descărcare, dar dacă sunteți interesat să personalizați propriile dvs. aruncați o privire la responsify.it.
Începeți prin desenele de pe grilă. Gândiți-vă la ordinea informațiilor pe care doriți să le prezentați vizitatorilor dvs., de sus în jos este cea mai ușoară, urmată de la stânga la dreapta. Mai jos este un exemplu de wireframe care are un aspect utilizat frecvent de companiile de software în aceste zile:
Uneori, în funcție de obiectivul dvs. și de entitatea pentru care proiectați, puteți fi creativi cu aspectul, deși păstrați ierarhia informațiilor în minte. Acesta este un exemplu din lumea reală a unuia dintre clienții mei, în care am ieșit din structura site-urilor tehnologice convenționale:
Iată un aspect pentru un blog, cu containere publicitare atent plasate și instrucțiuni specifice pentru client:
După ce vă mulțumiți cu modul în care sunt așezate cutiile, începeți să vă lăsați în bucăți și fragmente din conținutul dvs. pentru a vă da seama dacă informațiile sunt bine structurate. Regula principală este aceeași: informațiile pe care doriți să le furnizați audienței trebuie să fie clare, chiar și într-un cadru alb-negru.
Folosind pur și simplu diferite dimensiuni de fonturi ca un început este o modalitate excelentă de a diferenția diferitele niveluri de informații.
Nu vă fie frică să experimentați în acest stadiu. Uneori, pe măsură ce completați mai multe detalii, puteți realiza că aspectul original nu funcționează bine. Acesta este întregul punct al procesului de sincronizare; pentru a face cât mai multe iterații, pentru a restrânge cel mai bun mod de reprezentare a informațiilor pe care încercați să le comunicați.
În exemplul de mai jos, am decis că am dorit ca capturile de ecran să aibă un impact mai mare și am început, de asemenea, să folosesc cutii negre pentru a defini care sunt domeniile care ar lua importanță vizuală pentru acest site web:
Utilizarea întregului spectru de griuri vă poate ajuta să determinați puterea vizuală a elementelor dvs. fără a fi nevoie să alegeți o paletă de culori. De fapt, vă poate ajuta mai târziu în procesul de proiectare vizuală.
Acesta este un pas opțional, dar dacă vă place să faceți lucrurile în trepte, poate doriți să îl încercați. Efectuarea unei definiții de înaltă definiție a barei de sârmă înseamnă să adăugați mai multe detalii, pe cât posibil, fără a fi prea granular în detaliile vizuale. Poate însemna umplerea copiei reale în cadrul de sârmă și încercarea de a determina dimensiunile ideale ale fontului:
Ar putea implica și culori:
Ideea generală este că la etapa vizuală / codul doriți să fiți în modul de lustruit și nu mai sunteți în modul de redactare sau experimentare. Efectuați ciclurile de iterație (feedback <-> wireframing), cât mai repede posibil într-o aplicație de tip wireframing pe care vă simțiți confortabilă, în loc să mutați straturile și pixelii în Photoshop.
Acestea fiind spuse, în anumite situații, ar fi mai bine să renunțați prea mult la definirea detaliilor și să mergeți direct într-o etapă de prototipuri interactive (ala 37signals). Argumentul pentru aceasta este că anumite detalii de interacțiune nu pot fi comunicate complet pe o imagine plat.
Dacă lucrați cu o echipă de dezvoltatori, este posibil să doriți să le înmânați dezvoltatorilor pentru a codifica cadrul de bază în timp ce lucrați la vizual.
Menționată mai devreme, motivul pentru care prefer să folosesc Illustrator pentru sincronizarea prin fir este că pot să-l export într-un .psd cu majoritatea tipurilor de straturi editabile. În momentul în care sunt în Photoshop nu va mai fi nevoie să modificați tipul de mult (Photoshop are instrumente inferioare de control, deși mult îmbunătățite în CS6):
Iată un exemplu de schemă de sârmă tradusă într-o imagine vizuală. Coloana vertebrală a barei de sârmă este destul de intactă, deși există opțiuni făcute vizual. De asemenea, puteți vedea acest site live:
Deci, aici încheiem acest tutorial. Sper că v-ați inspirat să începeți să experimentați! Ca și în cazul oricărui proces de proiectare, nu vă fie frică să repetați, să iterați și să repetați.
De asemenea, petreceți ceva timp experimentând diferite instrumente și procese. Veți găsi investiția în timp care o merită odată ce găsiți o aplicație care vă este intuitivă.
Vă rugăm să nu ezitați să puneți întrebări în comentarii, multumesc pentru lectură!
De asemenea, dacă aveți nevoie de componente gata făcute pe site, avem o tona de template-uri web bine concepute pe Envato Elements. Puteți descărca șabloane nelimitate și alte elemente pentru un singur abonament lunar scăzut.
Dacă doriți să aflați mai multe despre modelarea prin fir, vă recomandăm să verificați aceste resurse.
Accentsconagua