Wireframe (web design)
În proiectarea web , wireframe (lit. „wire”) reprezintă modelul inițial de reprezentare a unui site web .
De la sfârșitul anilor '90, odată cu răspândirea internetului, wireframe-ul a devenit un instrument fundamental pentru proiectarea site-urilor web. Constituie prima reprezentare vizuală a site-ului și este o elaborare grafică de fidelitate redusă care are scopul de a identifica structura site-ului web, arhitectura informațională și dispunerea elementelor de pe pagină. [1] Prin urmare, a devenit un instrument de lucru esențial pentru mulți profesioniști care lucrează în lumea internetului, cum ar fi designerul de interacțiuni, arhitectul informațiilor și managerul experienței utilizatorului. Stiloul și hârtia pot fi suficiente pentru a crea un wireframe, dar o serie de instrumente sunt disponibile pe web care vă permit să creați wireframe interactive. [2]
Cadrele de sârmă se concentrează pe:
- Gama de funcții disponibile
- Prioritățile relative ale informațiilor și funcțiilor
- Regulile pentru afișarea anumitor tipuri de informații
- Efectul diferitelor scenarii pe ecran [3]
Wireframe-ul site-ului web conectează structura conceptuală subiacentă sau arhitectura informațională la suprafața sau designul vizual al site-ului. Wireframele ajută la stabilirea funcționalității și a relațiilor dintre diferitele modele de ecran ale unui site web. Crearea de fire wireframe este o modalitate eficientă de a prototipa rapid pagini prin măsurarea caracterului practic al unui concept de proiectare. Încadrarea prin fir începe de obicei între „lucrări structurale la nivel înalt, cum ar fi diagramele de flux sau hărțile site-ului, și proiectarea ecranelor”. În cadrul procesului de construire a unui site web, wireframing este punctul în care gândirea devine tangibilă [4] .
În plus față de site-uri web, wireframe-urile sunt utilizate pentru prototiparea site-urilor mobile, a aplicațiilor de calculator sau a altor produse bazate pe ecran care implică interacțiunea om-computer.
Folosiți fireframes
Wireframele pot fi utilizate în diferite discipline. Dezvoltatorii folosesc wireframes pentru a obține o înțelegere mai tangibilă a funcționalității site-ului, în timp ce proiectanții le folosesc pentru a împinge procesul de interfață cu utilizatorul (UI). Proiectanții de experiență a utilizatorului și arhitecții de informații folosesc wireframes pentru a afișa căile de navigare între pagini. Analiștii de afaceri folosesc wireframes pentru a susține vizual regulile de afaceri și cerințele de interacțiune pentru un ecran. Părțile interesate de afaceri revizuiesc wireframe-urile pentru a se asigura că cerințele și obiectivele sunt îndeplinite în timpul proiectării. Profesioniștii care creează wireframes includ analiști de afaceri, arhitecți ai informațiilor, designeri de interacțiuni, designeri de experiență a utilizatorilor, graficieni, programatori și manageri de produse [5] .
Lucrul cu fireframes poate fi un efort de colaborare, deoarece conectează arhitectura informației la designul vizual. Datorită suprapunerii acestor roluri profesionale, pot apărea conflicte, ceea ce face ca filarea să fie o parte controversată a procesului de proiectare [4] . Deoarece wireframe-urile au o estetică „dezbrăcată”, este dificil pentru proiectanți să evalueze cât de corect ar trebui să reprezinte wireframe-urile structurilor reale ale ecranului. Pentru a evita conflictele, analiștii de afaceri care înțeleg cerințele utilizatorilor sunt sfătuiți să creeze un wireframe de bază și apoi să colaboreze cu proiectanții pentru a îmbunătăți în continuare wireframele. O altă dificultate a wireframe-urilor este că acestea nu afișează în mod eficient detalii interactive, deoarece sunt reprezentări statice. Designul modern al interfeței de utilizare încorporează diverse dispozitive, cum ar fi panouri extensibile, efecte de hover și carusele care reprezintă o provocare pentru diagramele 2-D [3] .
Wireframele pot avea diferite niveluri de detaliu și pot fi împărțite în două categorii în ceea ce privește fidelitatea lor sau cât de mult seamănă cu produsul final.
Fidelitate scazuta
Asemănător unei schițe brute sau a unei machete rapide, se pot produce rapid cadre de sârmă de mică fidelitate. Aceste wireframe ajută o echipă de proiect să comunice idei și să colaboreze mai eficient, deoarece sunt mai abstracte, folosind dreptunghiuri și etichetare pentru a reprezenta conținutul [4] . Conținutul fals, textul de umplere latină ( lorem ipsum ), eșantionul sau conținutul simbolic sunt utilizate pentru a reprezenta date atunci când conținutul real nu este disponibil. [3] De exemplu, în loc să utilizați imagini reale, puteți utiliza un dreptunghi substituent.
Cadrele de sârmă de fidelitate redusă pot fi utilizate pentru a facilita comunicarea echipei despre un proiect și sunt utilizate în primele etape ale unui proiect.
Fedelitate ridicată
Cadrele sârmă de înaltă fidelitate sunt adesea folosite pentru documentare, deoarece încorporează un nivel de detaliu care se apropie cel mai mult de proiectarea reală a paginii web, necesitând astfel mai mult timp pentru a crea [4] .
Pentru proiectele simple sau cu fidelitate redusă, prototiparea hârtiei este o tehnică obișnuită. Deoarece aceste schițe sunt doar reprezentări, adnotările, notele adiacente pentru a explica comportamentul, sunt utile. Pentru proiecte mai complexe, redarea wireframe folosind software de calculator este populară. Unele instrumente permit încorporarea interactivității, inclusiv animația Flash (depreciată la 31 decembrie 2020 [6] ) și tehnologii web front-end precum HTML, CSS și JavaScript.
Cadrele sârmă de înaltă fidelitate includ mai mult conținut din lumea reală, opțiuni specifice de tipografie și informații despre dimensiunea imaginii. Spre deosebire de wireframe-urile de fidelitate redusă, wireframe-urile de înaltă fidelitate pot include imagini reale. Opțiunile de culoare nu sunt incluse, dar diferite valori ale culorilor pot fi reprezentate în tonuri de gri [7] .
Elemente Wireframe
Un aspect al site-ului web poate fi împărțit în trei componente: proiectarea informațiilor, proiectarea navigației și proiectarea interfeței. Aspectul paginii este locul în care aceste componente se reunesc, în timp ce wireframing este ceea ce descrie relația dintre aceste componente [8] .
Proiectarea informațiilor
Proiectarea informațiilor este prezentarea, poziționarea și prioritizarea informațiilor într-un mod care facilitează înțelegerea. Proiectarea informațiilor este un domeniu de proiectare a experienței utilizatorului, destinat afișării informațiilor în mod eficient pentru o comunicare clară. Pentru site-uri web, elementele de informații ar trebui să fie aranjate pentru a reflecta obiectivele și activitățile utilizatorului [8] .
Sistemul de navigație oferă o serie de elemente de ecran care permit utilizatorului să se deplaseze de la o pagină a site-ului web la alta. Designul de navigare ar trebui să comunice relația dintre linkurile pe care le conține, astfel încât utilizatorii să înțeleagă opțiunile pe care le au pentru a naviga pe site. Site-urile web conțin adesea mai multe sisteme de navigație, cum ar fi navigația globală, navigarea locală, navigarea suplimentară, navigarea contextuală și navigarea de curtoazie [8] .
Proiectarea interfeței
Proiectarea interfeței utilizator include selectarea și aranjarea elementelor interfeței pentru a permite utilizatorilor să interacționeze cu funcționalitatea sistemului [8] . Scopul este de a facilita cât mai mult posibil utilizarea și eficiența. Elementele obișnuite găsite în designul interfeței sunt butoanele de acțiune, câmpurile de text, casetele de selectare, butoanele radio și meniurile derulante.
Notă
- ^ (RO) Gerard Blokdyk, Wireframe Website: Noțiuni introductive.
- ^ Alfredo Iannone, How to Create an Interactive Wireframe .
- ^ a b c Dan M. Brown,Communicating Design: Developing Web Site Documentation for Design and Planning , 2nd, New Riders Press , 2011, ISBN 978-0321712462 .
- ^ a b c d Christina Wodtke și Austin Govella, Information Architecture: Blueprints for the Web , 2nd, New Riders Press , 2009, ISBN 978-0321600806 .
- ^ Michael Angeles, „Wireframes” . Konigi Wiki , 25 septembrie 2014. Adus 25 martie 2011 (arhivat din original la 5 mai 2018) .
- ^ Flash și viitorul conținutului interactiv | Adobe Blog , pe web.archive.org , 2 decembrie 2017. Accesat la 2 februarie 2021 (arhivat din original la 2 decembrie 2017) .
- ^ (EN) Low-fidelity vs. Wireframes de înaltă fidelitate - Steadfast Creative , în Steadfast Creative , 13 septembrie 2016. Accesat pe 6 februarie 2018 .
- ^ a b c d Jesse James Garrett, The Elements of User Experience: User-Centered Design for the Web and Beyond , New Riders Press , 2010, ISBN 978-0321683687 .
Alte proiecte
-
Wikimedia Commons conține imagini sau alte fișiere pe Wireframe
