Klein UX-UI-lexicon (deel 2)

 

 Dagelijks moet ik in opdracht wisselen met verschillende actoren van een project. Afhankelijk van de functie en de hang naar de discipline UX-UI design, heeft iedereen een andere kennis van de gebruikte termen.

Tijdens de missies heb ik daarom een ​​groot aantal concepten verzameld en het is een woordenschat die ik graag had gehad toen ik begon en die ik daarom gaandeweg heb geconsolideerd om toekomstige studenten of nieuwkomers op digitaal gebied te helpen.

Ik heb daarom een ​​reeks artikelen voor u voorbereid waarin elk concept wordt uitgelegd, zodat u ernaar kunt verwijzen.

We zijn de serie vorige maand begonnen met het eerste deel, we vervolgen het met de volgende 19 begrippen.

#1 _Soorten pagina's en schermen

Sjabloon (sjabloon, lay-out in het Engels)

Een sjabloon dient als referentiedocument dat dezelfde structuur gebruikt als de elementen waaruit het bestaat.

Op een mediasite maken we bijvoorbeeld een standaardpagina voor artikelen die elke keer wordt herhaald. Tekst en beeld krijgen hun eigen plek.

Opstartscherm

Dit is een scherm dat wordt weergegeven bij het openen van een applicatie of bij het laden van gegevens op het scherm.

Op dit scherm kan de gebruiker wachten. Het logo van de app wordt vaak gemarkeerd.

Onboarding

De onboarding-stappen worden weergegeven door een paar schermen om het product of een nieuwe functie aan een gebruiker te introduceren wanneer deze er voor het eerst gebruik van maakt.

Dit is een belangrijke stap in de ervaring die steeds vaker terug te vinden is in de tools die we gebruiken, omdat het helpt om een ​​goede eerste indruk te maken en de belangrijkste functies te begeleiden.

Landing page

Een landingspagina is een specifieke webpagina. De gebruiker krijgt er toegang toe door bijvoorbeeld op een advertentie of een actieknop te klikken. Het doel is om een ​​marketingcampagne uit te rollen om een ​​product of dienst op de markt te brengen.

De gebruiker kan op een bestemmingspagina terechtkomen door sociale netwerken, een advertentie op een site of een e-mail te raadplegen.

#2 _Transversale organisaties

Voorvoegsel

Een kop geeft de bovenkant van een pagina op een website aan. Het is meestal transversaal, dat wil zeggen dat het aanwezig is op de overgrote meerderheid van de pagina's van de site.
Het heeft een dubbel doel: het bedrijf identificeren en de navigatie presenteren.

Zijbalk (opzij of zijbalk in het Engels)
Met een zijbalk kunt u een groep navigatie- of inhoudsacties aan de zijkant van de pagina plaatsen.

footer

Een voettekst geeft het onderste deel van een website aan. Net als de koptekst wordt deze in de regel op alle pagina's op dezelfde manier aangetroffen.

Met de voettekst kunt u de site definitief maken. Het ontwerp is daarom belangrijk. U kunt ernaar verwijzen voor links en teksten die op alle pagina's moeten verschijnen, zoals contactgegevens, de sitemap, juridische kennisgevingen, enz.

Paneermeel

Met de breadcrumb kunnen gebruikers hun huidige locatie zien en de inhoudshiërarchie bekijken. De gebruiker zal sneller kunnen terugkeren naar een pagina die hij tijdens zijn navigatie heeft geraadpleegd.

Held spandoek

Een heldenbanner is een gedeelte van een webpagina dat de volledige breedte van het scherm beslaat.

Het wordt vaak bovenaan pagina's gebruikt om de gebruiker te inspireren en een universum te creëren.

#3 _Merkidentiteit

Het logo

Een logo komt overeen met de naam van het bedrijf dat grafisch is ontworpen om het weer te geven.

We zullen vaak een lettertype of vormen gebruiken die we zullen aanpassen om de identiteit en waarden van het bedrijf over te brengen.

Google-logo

Het logomerk (= badge in het Frans)

Het logomark bevat meestal niet de bedrijfsnaam. Dit is een meer abstracte weergave die de identiteit van een bedrijf zal helpen versterken.

We gebruiken vaak een heel veelzeggend pictogram waarmee de lezer de aard van het bedrijf kan identificeren. Bovendien is het vaak het logo dat wordt gebruikt op voorwerpen (goodies), kleding en andere reclame-elementen.

Google-logo merk

Het logo

Het logo verwijst naar alle soorten emblemen die een merk kunnen vertegenwoordigen. Dus zowel logotypes als logomerken.

Sommige logo's zijn beide tegelijk, bijvoorbeeld het UX Republic-logo. Ze bevatten zowel een gestileerd tekstelement als een grafisch element. Afhankelijk van het gebruik vinden we ofwel het logotype, de badge of de combinatie van de 2.

Het UX Republic-logo

Favicon

Dit is het pictogram dat verschijnt op tabbladen en links die zijn toegevoegd aan favorieten in webbrowsers.
Het woord favicon is een samentrekking van de termen "favoriet" en "pictogram". Het is een grafisch element dat is ontworpen om sites gemakkelijker te identificeren in de lijsten en favorietenbalken van uw webbrowser.

Het kleurenpalet

Het kleurenpalet is meestal verdeeld in verschillende groepen:

● Primaire en secundaire kleuren

● Grijstinten

● Statuskleuren (geslaagd, waarschuwing, enz.)

Het kleurenpalet maakt het mogelijk om het universum van een merk te creëren en de consument te begeleiden bij zijn inspiraties.

Door een palet te definiëren, zorgen we voor consistentie en homogeniteit in de paden om de gebruikerservaring te optimaliseren.

 

#4 _Typografie

De politie

Het lettertype duidt een assortiment typografische tekens aan met een bepaald ontwerp (letters, cijfers, leestekens, enz.).

Een lettertype heeft 5 kenmerken die individueel kunnen worden gevarieerd:

● de familie

● dik

● vorm of stijl

● de maat (het lichaam)

● hoofdletter (hoofdletter, kleine letter)

lettertypen

Het is een reeks tekens van hetzelfde lettertype met dezelfde familie, hetzelfde gewicht, dezelfde grootte en dezelfde vorm. Bij UX Republic gebruiken we bijvoorbeeld het lettertype Montserrat.

Typografische families

Er zijn 5 gezinnen:

●  schreef: inclusief serif-lettertypen (voorbeelden: Times New Roman, Georgia, Garamond...)

●  schreefloos: of schreefloze lettertypen (bijv. Helvetica, Montserrat, Myriad...)

●  Cursief: wat zijn de lettertypen die handschrift simuleren (bijv. Lucida Handschrift, maar ook Comic Sans MS (en ja!))

●  Fantasie: meer exotische, decoratieve lettertypen (bijv. Impact, Fraktur...)

●  MPV: lettertypen met vaste breedte (breedte gebruikt voor elk teken) (bijv. Courier New, Lucida Console, enz.)

# Conclusie

We ontmoeten elkaar weer voor de volgende serie, de derde en voorlaatste, waar we samen 3 hoofdthema's zullen zien: raster en spatiëring, meldingen en waarschuwingen en tot slot de verschillende soorten menu's op internet.

Als je ooit het eerste deel van deze serie hebt gemist, nodig ik je uit om te raadplegen deze link.

Als je ooit je kennis wilt verdiepen en het ontwerpen van een webinterface wilt oefenen, biedt het trainingscentrum van UX Republic de training "UI Design, the fundamentals". Hier is de link voor meer informatie.

 

 

Alexa CUELLAR, UX-ontwerper @UX-Republic

Beeldbronnen:
– https://undraw.co/

Onze volgende trainingen