Laboratorul 02: Crearea unui design web in Figma

Cuvant inainte. Scopul laboratoarului

Pe parcusul acestui laborator vom trece prin cateva notiuni de baza de utilizare a aplicatiei Figma si cum putem crea un proiect de design folosind-o. Exista foarte multe tutoriale, cursuri si articole in care sunt explicate toate functionalitatile, insa un singur laboratorul nu este indeajuns pentru a le invata pe toate.

Ne dorim ca la finalul rezolvarii acestui laborator sa fiti capabili sa creati un proiect simplu in Figma prin organizarea ordonata a paginilor, construirea unui sistem de design (mai putin complex), construirea unui flux de wireframes si a prototipului final.

Mai jos gasiti link-ul catre solutia propusa de echipa, dar ne-am bucura si va incurajam sa fiti cat mai creativi.

Link catre (o posibila) rezolvare

Timp estimat de rezolvare: 2h

Cuprins

Introducere Figma

Figma este un editor de grafica vectoriala si un instrument de prototipare care se bazeaza in principal pe web, cu functii offline suplimentare activate de aplicatiile desktop, sau cel putin asta este informatia oficiala de pe Wikipedia. Figma este o aplicatie super puternica, in care puteti face mult mai multe lucruri pe langa prototipare, de exemplu: brainstorming pentru partea de generare de idei sau pentru centralizarea datelor unui studiu de caz, prezentari si multe alte activitati.

Desi sunt foarte multe resurse de unde puteti invata cum sa stapaniti Figma, eu recomand vizualizarea acestui tutorial Free Figma UX Design UI Essentials Course si efectuarea exerciilor sugerate pentru a va familiariza cu interfata aplicatiei.

In continuare va vom prezenta cele mai importante functionalitati, care vor fi folosite si pentru realizarea acestui laborator.

Primii pasi pentru rezolvarea laboratorului

Pentru a putea realiza un proiect este nevoie de crearea unei echipe in cadrul careia veti adauga toate proiectele aferente. Dupa ce ne-am creat echipa putem incepe un proiect nou si sa adaugam fisierul de design in care vom rezolva laboratorul.

Acum ca avem un fisier de design putem structura proiectul astfel incat sa ramanem organizati. Propunem o structura care sa contina:

  • O coperta a proiectului unde se vor afla informatii legate de titlul, autor, data, rol
  • O pagina cu cerintele/functionalitatile proiectului
  • O pagina goala ca si separator - pe care o puteti folosi oricand simtiti nevoia de a separa anumite parti ale proiectului, de exemplu daca aveti date legate de utilizatori le puteti organiza intr-o pagina separata de restul proiectului prin pagini goale
  • O pagina pentru inspiratie/moodboard, aici puteti folosi Dribble sau Behance
  • O pagina pentru sistemul de design
  • Cate o pagina pentru sketches / utilizator
  • Cate o pagina pentru wireframe flow / utilizator
  • Cate o pagina pentru prototype / utilizator

Realizare Wireframes

Un wireframe este un ghid vizual care reprezinta scheletul unei pagini. Contruim un flux de wireframe-uri pentru a valida experienta utilizatorului cu functionalitatile initiale.

Pentru realizarea flow-ului de wireframes trebuie sa intelegem ce avem de facut, care sunt functionalitatile cerute si care ar fi experienta utilizatorului din punctul de vedere al logicii ecranelor. Plecand de la acest principiu, am analizat lista de user stories prezentate in laboratorul anterior si am compus o lista de functionalitati intr-o pagina de Requirements pe care sa o pot revizui in orice moment.

Pentru ca acum avem clare functionalitile proiectului putem structura informatia astfel incat utilizatorul sa aiba o experienta cat mai placuta.

Incercati sa construiti fluxul de wireframes astfel incat prototipul sa nu aiba nevoie de modificari majore, astfel va fi mai usor sa transformati wireframe-urile in produsul final.

Wireframe-urile sunt de obicei fara culoare, deoarece in acest stadiu trebuie sa ne concentram pe distribuirea informatiei in pagina astfel incat actiunile ce pot fi intreprinse sa fie usor intelese si invatate de catre utilizator.

Construirea unui sistem de design

Ce e un sistem de design si de ce avem nevoie de el?

Un design system este un ghid pentru dezvoltarea proiectelor – o colecție de reguli, principii, constrangeri si bune practici. Elementul de baza al sistemului de design este adesea o biblioteca de componente UI. Aceste elemente UI au si reprezentarea lor implementata in cod.

Sistemele de design sunt adesea numite sursa unica de adevar pentru echipa implicata în crearea produsului. Acesta permite echipei sa proiecteze, sa dezvolte si sa mentina calitatea produsului.

Pentru acest laborator vom face o versiune simplificata a ce inseamna un sistem de design, urmand ca in laboratorul de frontend sa implementam componentele pe care le vom defini acum. Asadar, sistemul nostru de design va contine urmatoarele componente:

  • cromatica aplicatiei - culorile folosite
  • fonturile - elementele de tipografie
  • butoane si starile prin care poate sa treaca un buton (default, hover, pressed, disabled)
  • input si starile prin care poate sa treaca (default, focus, hover, disabled)
  • cardurile in care vom organiza informatiile cartilor

Incercati sa va puneti toata atentia pentru detalii si rabdarea in construirea acestei baze. Dupa ce avem un sistem de design bine pus la punct, restul e un joc cu piese lego.

Prototype

Un prototype este produsul final care rezulta din procesul de design care poate fi revizuit si modificat de cate ori este nevoie inainte de a se incepe developmentul efectiv al produsului.

Felicitari pentru parcurgerea acestui laborator, you rock!

pw/laboratoare/02.txt · Last modified: 2022/03/19 12:27 by alexandru.hogea
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0