Kleng UX-UI Lexikon (Deel 2)

 

 All Dag, op Aufgab, muss ech mat verschiddenen Acteuren vun engem Projet austauschen. Ofhängeg vun der Positioun an dem Appetit fir d'Disziplin vum UX-UI Design, huet jiddereen en anert Wëssen iwwer déi benotzte Begrëffer.

Iwwert d'Missioune hunn ech dofir eng grouss Unzuel u Konzepter zesummegestallt an et ass e Vokabulär, deen ech gär hätt wéi ech ugefaang hunn an deen ech dofir konsolidéiert hunn wéi ech matgoen, fir zukünfteg Studenten ze hëllefen oder nei op digital.

Ech hunn dofir eng Serie vun Artikelen fir Iech virbereet, wou all Konzept erklärt gëtt, fir datt Dir dorop bezéie kënnt.

Mir hunn d'Serie de leschte Mount mam éischten Deel ugefaang, mir fuere se weider mat de folgenden 19 Notioune.

#1 _Zorte vu Säiten a Schiirme

Schabloun (Schabloun, Layout op Englesch)

Eng Schabloun déngt als Referenzdokument dat déiselwecht Struktur vun den Elementer benotzt, déi et zesummestellen.

Zum Beispill, op engem Medien Site, wäerte mir eng Standard Säit fir Artikelen schafen déi all Kéier widderholl ginn. Text a Biller wäerten hir designéierte Plaz hunn.

Splash Écran

Dëst ass en Écran deen ugewise gëtt wann Dir eng Applikatioun opmaacht oder wann Dir Daten um Bildschierm lued.

Dësen Ecran erlaabt de Benotzer ze waarden. De Logo vun der App gëtt dacks markéiert.

Um Bord

D'Onboarding-Schrëtt ginn duerch e puer Schiirme vertruede fir de Produit oder eng nei Feature fir e Benotzer virzestellen wann se et fir d'éischte Kéier zougräifen.

Dëst ass e wichtege Schrëtt an der Erfahrung, déi ëmmer méi an den Tools fonnt gëtt, déi mir benotzen, well et hëlleft e gudden éischten Androck ze maachen a Guide zu Schlësselfeatures.

Landing Säit

Eng Landung Säit ass eng spezifesch Websäit. De Benotzer kënnt op et no, zum Beispill, op eng Annonce oder eng Aktiounsknäppchen. Säin Zil ass eng Marketingkampagne auszerollen fir e Produkt oder Service ze vermaarten.

De Benotzer kann op eng Landung Säit ukommen andeems Dir sozial Netzwierker konsultéiert, eng Annonce op engem Site oder eng E-Mail.

#2 _Transversal Organisatiounen

Kappball

En Header bezeechent den Top vun enger Säit op enger Websäit. Et ass meeschtens transversal, dat heescht datt et op der grousser Majoritéit vun de Säiten vum Site präsent ass.
Et huet en duebelt Zil, d'Firma z'identifizéieren an d'Navigatioun ze presentéieren.

Sidebar (ausser oder Säitbar op Englesch)
Eng Sidebar erlaabt Iech eng Grupp vu Navigatiouns- oder Inhaltsaktiounen op der Säit vun der Säit ze hunn.

Fousszeilen

E Fousszeil bezeechent den ënneschten Deel vun enger Websäit. Wéi den Header, ass et identesch fonnt, als allgemeng Regel, op alle Säiten.

De Fousszeil erlaabt Iech de Site ze finaliséieren. Dofir ass säin Design wichteg. Dir kënnt dorop verweisen fir Linken an Texter déi op alle Säite musse schéngen, wéi Kontaktinformatioun, Sitemap, juristesch Uschléi, asw.

Brout

De Breadcrumb erlaabt d'Benotzer hir aktuell Positioun ze gesinn an d'Inhaltshierarchie ze gesinn. De Benotzer wäert méi séier op eng Säit zréckgoen, déi während senger Navigatioun konsultéiert gouf.

Held Banner

En Heldenbanner ass eng Sektioun vun enger Websäit déi iwwer d'ganz Breet vum Écran spant.

Et gëtt dacks uewen op de Säiten benotzt fir de Benotzer ze inspiréieren an en Universum ze kreéieren.

#3 _Mark Identitéit

De Logo

E Logotyp entsprécht dem Numm vun der Firma déi grafesch entworf ass fir se ze representéieren.

Mir benotzen dacks eng Schrëft oder Formen déi mir personaliséiere fir d'Identitéit a Wäerter vun der Firma ze vermëttelen.

Google Logo

D'Logomark (= Badge op Franséisch)

De Logomark enthält normalerweis net de Firmennumm. Dëst ass eng méi abstrakt Duerstellung déi hëlleft d'Identitéit vun enger Firma ze stäerken.

Mir benotzen dacks e ganz erzielt Piktogram dat de Lieser erlaabt d'Natur vun der Firma z'identifizéieren. Ausserdeem ass et dacks de Logomark deen op Objeten (Goodies), Kleeder an aner Werbeelementer benotzt gëtt.

Google Logo Mark

De Logo

De Logo bezitt sech op all Typ vun Emblème, déi eng Mark vertrieden kënnen. Also béid Logoen a Logomarken.

E puer Logoe si béid zur selwechter Zäit, zum Beispill den UX Republic Logo. Si enthalen souwuel e stiliséierten Textelement wéi och e grafescht Element. Ofhängeg vun der Notzung fanne mir entweder de Logotyp, de Badge oder d'Kombinatioun vun deenen 2.

Den UX Republic Logo

favicon

Dëst ass d'Ikon déi op Tabs erschéngt a Linken op de Favoritten a Webbrowser bäigefüügt.
D'Wuert Favicon ass eng Kontraktioun vun de Begrëffer "Lieblings" an "Ikon". Et ass e grafescht Element entworf fir méi einfach Siten an de Lëschten a Favoritten Baren vun Ärem Webbrowser z'identifizéieren.

D'Faarfpalette

D'Faarfpalette ass normalerweis an e puer Gruppen opgedeelt:

● Primär- a Secondaire Faarwen

● Schatten vu gro

● Status Faarwen (Erfolleg, Warnung, etc.)

D'Faarfpalette mécht et méiglech den Universum vun enger Mark ze kreéieren an de Konsument op seng Inspiratiounen ze guidéieren.

Andeems Dir eng Palette definéiert, suerge mir fir Konsistenz an Homogenitéit op d'Weeër ze bréngen fir d'Benotzererfarung ze optimiséieren.

 

#4 _Typographie

D'Police

D'Schrëft bezeechent eng Sortiment vun typographesche Charaktere mat engem bestëmmten Design (Buschtawen, Zuelen, Interpunktiounen, asw.).

Eng Schrëft huet 5 Charakteristiken déi individuell kënne variéiert ginn:

● der Famill

● Fett

● Form oder Stil

● d'Gréisst (de Kierper)

● Buschtawen (Groussbuch, kleng Buschtawen)

Schrëften

Et ass eng Rei vu Charaktere vun der selwechter Schrëft mat der selwechter Famill, datselwecht Gewiicht, déiselwecht Gréisst an déiselwecht Form. Zum Beispill, bei UX Republic benotze mir d'Montserrat Schrëft.

Typographesch Famillen

Et gi 5 Famillen:

●  Serif: déi Serif Schrëften enthält (Beispill: Times New Roman, Georgia, Garamond ...)

●  Sans Serif: oder sans serif Schrëften (zB Helvetica, Montserrat, Myriad ...)

●  Kursiv: wat sinn d'Schrëften déi Handschrëft simuléieren (zB: Lucida Handwriting, awer och Comic Sans MS (a jo!))

●  Fantasie: méi exotesch, dekorativ Schrëften (zB Impact, Fraktur ...)

●  MPV: fix Breet Schrëften (Breet benotzt fir all Charakter) (zB Courier New, Lucida Console, etc.)

# Conclusioun

Mir treffen eis erëm fir déi nächst Serie, déi drëtt an déi lescht, wou mir zesummen 3 Haaptthemen gesinn: Gitter an Ofstand, Notifikatiounen an Alarmer a schliisslech déi verschidden Aarte vu Menüen um Internet.

Wann Dir jeemools den éischten Deel vun dëser Serie verpasst hutt, invitéieren ech Iech ze konsultéieren dëse Link.

Wann Dir jeemools Äert Wësse wëllt verdéiwen an den Design vun enger Webinterface üben, bitt den UX Republic Trainingszentrum Training "UI Design, d'Grondlagen". hei ass de Link fir méi Informatiounen.

 

 

Alexa CUELLAR, UX Designer @UX-Republic

Bildquellen:
- https://undraw.co/

Eis nächst Formatiounen