Petit lèxic UX-UI (part 2)

 

 Cada dia, per encàrrec, he d'intercanviar amb diferents actors d'un projecte. Segons la posició i l'apetit per la disciplina del disseny d'UX-UI, cadascú té un coneixement diferent dels termes utilitzats.

Al llarg de les missions, doncs, he recopilat un gran nombre de conceptes i és un vocabulari que m'hauria agradat tenir quan vaig començar i que, per tant, he anat consolidant a mesura que vaig avançant per ajudar els futurs estudiants o principiants en el digital.

Per això us he preparat una sèrie d'articles on s'explicarà cada concepte perquè us hi feu referència.

Vam començar la sèrie el mes passat amb la primera part, la continuem amb les 19 nocions següents.

#1 _Tipus de pàgines i pantalles

Plantilla (plantilla, disseny en anglès)

Una plantilla serveix com a document de referència que utilitza la mateixa estructura dels elements que la componen.

Per exemple, en un lloc de mitjans, crearem una pàgina estàndard per als articles que es repetirà cada vegada. El text i les imatges tindran el seu lloc designat.

Pantalla de benvinguda

Aquesta és una pantalla que es mostra quan s'obre una aplicació o quan es carreguen dades a la pantalla.

Aquesta pantalla permet a l'usuari esperar. El logotip de l'aplicació es destaca sovint.

Onboarding

Els passos d'incorporació estan representats per unes quantes pantalles per presentar el producte o una nova funció a un usuari quan hi accedeix per primera vegada.

Aquest és un pas important en l'experiència que es troba cada cop més a les eines que utilitzem perquè ajuda a fer una bona primera impressió i a guiar les funcions clau.

La pàgina de destinació

Una pàgina de destinació és una pàgina web específica. L'usuari hi accedeix després de fer clic en un anunci o un botó d'acció per exemple. El seu objectiu és llançar una campanya de màrqueting per comercialitzar un producte o servei.

L'usuari pot arribar a una pàgina de destinació consultant les xarxes socials, un anunci en un lloc o un correu electrònic.

#2 _Organitzacions transversals

Header

Una capçalera designa la part superior d'una pàgina d'un lloc web. És majoritàriament transversal, és a dir, és present a la gran majoria de les pàgines del lloc.
Té un doble objectiu, identificar l'empresa i presentar la navegació.

Barra lateral (barra lateral o lateral en anglès)
Una barra lateral us permet tenir un grup d'accions de navegació o de contingut al lateral de la pàgina.

Peu de pàgina

Un peu de pàgina designa la part inferior d'un lloc web. Igual que la capçalera, es troba de manera idèntica, per regla general, a totes les pàgines.

El peu de pàgina us permet finalitzar el lloc. Per tant, el seu disseny és important. Podeu consultar-hi enllaços i textos que han d'aparèixer a totes les pàgines, com ara informació de contacte, mapa del lloc, avisos legals, etc.

Pa ratllat

La ruta de navegació permet als usuaris veure la seva ubicació actual i veure la jerarquia de contingut. L'usuari podrà tornar més ràpidament a una pàgina consultada durant la seva navegació.

pancarta d'heroi

Un bàner d'heroi és una secció d'una pàgina web que abasta tota l'amplada de la pantalla.

Sovint s'utilitza a la part superior de les pàgines per inspirar l'usuari i crear un univers.

#3 _Identitat de marca

El logotip

Un logotip correspon al nom de l'empresa que està dissenyat gràficament per representar-la.

Sovint farem servir un tipus de lletra o formes que personalitzarem per transmetre la identitat i els valors de l'empresa.

Logotip de Google

El logotip (= insígnia en francès)

Normalment, el logotip no inclou el nom de l'empresa. Aquesta és una representació més abstracta que ajudarà a reforçar la identitat d'una empresa.

Sovint fem servir un pictograma molt engrescador que permetrà al lector identificar la naturalesa de l'empresa. A més, sovint és el logotip que s'utilitza en objectes (objectes), roba i altres elements publicitaris.

Marca del logotip de Google

El logotip

El logotip fa referència a tot tipus d'emblemes que poden representar una marca. Així, tant logotips com logotips.

Alguns logotips són tots dos alhora, el logotip UX Republic per exemple. Contenen tant un element de text estilitzat com un element gràfic. Segons l'ús, trobarem el logotip, el distintiu o la combinació dels 2.

El logotip de la República UX

Favicon

Aquesta és la icona que apareix a les pestanyes i enllaços afegits als preferits dels navegadors web.
La paraula favicon és una contracció dels termes "preferit" i "icona". És un element gràfic dissenyat per identificar més fàcilment els llocs a les llistes i barres de favorits del vostre navegador web.

La paleta de colors

La paleta de colors normalment es divideix en diversos grups:

● Colors primaris i secundaris

● Tons de grisos

● Colors d'estat (èxit, avís, etc.)

La paleta de colors permet crear l'univers d'una marca i guiar el consumidor en les seves inspiracions.

En definir una paleta, ens assegurem d'aportar consistència i homogeneïtat als camins per optimitzar l'experiència de l'usuari.

 

#4 _Tipografia

La policia

El tipus de lletra designa un assortiment de caràcters tipogràfics amb un disseny determinat (lletres, números, puntuació, etc.).

Un tipus de lletra té 5 característiques que es poden variar individualment:

● la família

● greix

● forma o estil

● la mida (el cos)

● majúscules, minúscules

Fonts

És un conjunt de caràcters del mateix tipus de lletra que tenen la mateixa família, el mateix pes, la mateixa mida i la mateixa forma. Per exemple, a UX Republic fem servir la font Montserrat.

Famílies tipogràfiques

Hi ha 5 famílies:

●  Serif: que inclou fonts serif (exemples: Times New Roman, Georgia, Garamond...)

●  Sense serif: o fonts sans serif (per exemple, Helvetica, Montserrat, Myriad...)

●  cursiva: quins són els tipus de lletra que simulen l'escriptura a mà (ex: Lucida Handwriting, però també Comic Sans MS (i sí!))

●  Fantasia: fonts decoratives més exòtiques (per exemple, Impact, Fraktur...)

●  MPV: tipus de lletra d'amplada fixa (amplada utilitzada per a cada caràcter) (p. ex., Courier New, Lucida Console, etc.)

# Conclusió

Ens tornem a trobar per a la propera sèrie, la tercera i penúltima, on veurem junts 3 temàtiques principals: quadrícula i espaiat, notificacions i alertes i finalment els diferents tipus de menú a la web.

Si alguna vegada us heu perdut la primera part d'aquesta sèrie, us convido a consultar aquest enllaç.

Si alguna vegada voleu aprofundir en els vostres coneixements i practicar el disseny d'una interfície web, el centre de formació UX Republic ofereix formació "Disseny d'UI, els fonaments". Aquí teniu l’enllaç per a més informació.

 

 

Alexa CUELLAR, UX Designer @UX-Republic

Fonts de la imatge:
– https://undraw.co/

Els nostres propers entrenaments