Kleines UX-UI-Lexikon (Teil 2)

 

 Täglich muss ich mich im Auftrag mit verschiedenen Akteuren eines Projekts austauschen. Je nach Position und Appetit auf die Disziplin des UX-UI-Designs hat jeder ein anderes Wissen über die verwendeten Begriffe.

Im Laufe der Missionen habe ich daher eine Vielzahl von Konzepten zusammengetragen und es ist ein Vokabular, das ich gerne gehabt hätte, als ich angefangen habe, und das ich daher gefestigt habe, um zukünftigen Studenten oder Neulingen in der Digitalisierung zu helfen.

Ich habe daher eine Reihe von Artikeln für Sie vorbereitet, in denen jedes Konzept erklärt wird, damit Sie darauf zurückgreifen können.

Wir haben die Serie letzten Monat mit dem ersten Teil begonnen, wir setzen sie mit den folgenden 19 Begriffen fort.

#1 _Arten von Seiten und Bildschirmen

Vorlage (Vorlage, Layout in Englisch)

Eine Vorlage dient als Referenzdokument, das die gleiche Struktur der Elemente verwendet, aus denen es besteht.

Auf einer Medienseite erstellen wir beispielsweise eine Standardseite für Artikel, die jedes Mal wiederholt werden. Text und Bilder haben ihren zugewiesenen Platz.

Begrüßungsbildschirm

Dies ist ein Bildschirm, der beim Öffnen einer Anwendung oder beim Laden von Daten auf dem Bildschirm angezeigt wird.

Auf diesem Bildschirm kann der Benutzer warten. Das Logo der App wird oft hervorgehoben.

Einsteigen

Die Onboarding-Schritte werden durch einige Bildschirme dargestellt, um einem Benutzer das Produkt oder eine neue Funktion vorzustellen, wenn er zum ersten Mal darauf zugreift.

Dies ist ein wichtiger Schritt in der Erfahrung, die sich zunehmend in den von uns verwendeten Tools findet, da es hilft, einen guten ersten Eindruck zu hinterlassen und zu den wichtigsten Funktionen zu führen.

Landing page

Eine Landing Page ist eine bestimmte Webseite. Der Benutzer greift darauf zu, nachdem er beispielsweise auf eine Anzeige oder einen Aktionsbutton geklickt hat. Ziel ist es, eine Marketingkampagne durchzuführen, um ein Produkt oder eine Dienstleistung zu vermarkten.

Der Benutzer kann auf eine Zielseite gelangen, indem er soziale Netzwerke, eine Anzeige auf einer Website oder eine E-Mail konsultiert.

#2 _Transversale Organisationen

Kopfzeile

Ein Header bezeichnet den oberen Rand einer Seite auf einer Website. Es ist meistens quer, das heißt, es ist auf der überwiegenden Mehrheit der Seiten der Website vorhanden.
Es hat ein doppeltes Ziel, das Unternehmen zu identifizieren und die Navigation zu präsentieren.

Seitenleiste (beiseite oder Seitenleiste auf Englisch)
Eine Seitenleiste ermöglicht es Ihnen, eine Gruppe von Navigations- oder Inhaltsaktionen an der Seite der Seite zu haben.

Fußzeile

Ein Footer bezeichnet den unteren Teil einer Website. Wie der Header ist er auf allen Seiten in der Regel identisch zu finden.

In der Fußzeile können Sie die Website fertigstellen. Daher ist ihr Design wichtig. Sie können darauf für Links und Texte verweisen, die auf allen Seiten erscheinen müssen, wie z. B. Kontaktinformationen, die Sitemap, rechtliche Hinweise usw.

Semmelbrösel

Der Breadcrumb ermöglicht es Benutzern, ihren aktuellen Standort und die Inhaltshierarchie anzuzeigen. Der Benutzer kann schneller zu einer während seiner Navigation konsultierten Seite zurückkehren.

Heldenbanner

Ein Hero-Banner ist ein Abschnitt einer Webseite, der sich über die gesamte Breite des Bildschirms erstreckt.

Es wird oft oben auf Seiten verwendet, um den Benutzer zu inspirieren und ein Universum zu schaffen.

#3 _Markenidentität

Das Logo

Ein Logotyp entspricht dem Namen des Unternehmens, der ihn grafisch darstellen soll.

Wir verwenden häufig eine Schriftart oder Formen, die wir anpassen, um die Identität und die Werte des Unternehmens zu vermitteln.

Google-Logo

Das Logomark (= Abzeichen auf Französisch)

Die Logomarke enthält normalerweise nicht den Firmennamen. Dies ist eine abstraktere Darstellung, die dazu beitragen wird, die Identität eines Unternehmens zu stärken.

Wir verwenden oft ein sehr aussagekräftiges Piktogramm, das es dem Leser ermöglicht, die Art des Unternehmens zu erkennen. Darüber hinaus ist es oft das Logo, das auf Gegenständen (Goodies), Kleidung und anderen Werbeelementen verwendet wird.

Google-Logo-Marke

das logo

Das Logo bezieht sich auf alle Arten von Emblemen, die eine Marke darstellen können. Also sowohl Logos als auch Logos.

Einige Logos sind beides gleichzeitig, das UX Republic-Logo zum Beispiel. Sie enthalten sowohl ein stilisiertes Textelement als auch ein Grafikelement. Je nach Verwendung finden wir entweder den Schriftzug, das Abzeichen oder die Kombination aus 2.

Das UX Republic-Logo

Favicon

Dies ist das Symbol, das in Registerkarten und Links angezeigt wird, die zu Favoriten in Webbrowsern hinzugefügt wurden.
Das Wort Favicon ist eine Zusammenziehung der Begriffe „Favorit“ und „Symbol“. Es handelt sich um ein grafisches Element, mit dem Websites in den Listen und Favoritenleisten Ihres Webbrowsers leichter identifiziert werden können.

Die Farbpalette

Die Farbpalette ist normalerweise in mehrere Gruppen unterteilt:

● Primär- und Sekundärfarben

● Graustufen

● Statusfarben (Erfolg, Warnung etc.)

Die Farbpalette ermöglicht es, das Universum einer Marke zu erschaffen und den Verbraucher bei seinen Inspirationen zu leiten.

Durch die Definition einer Palette stellen wir sicher, dass die Pfade konsistent und homogen sind, um die Benutzererfahrung zu optimieren.

 

#4 _Typografie

Die Polizei

Die Schriftart bezeichnet eine Auswahl von typografischen Zeichen mit einem bestimmten Design (Buchstaben, Zahlen, Satzzeichen usw.).

Eine Schrift hat 5 Eigenschaften, die individuell variiert werden können:

● die Familie

● Fett

● Form oder Stil

● die Größe (der Körper)

● case (Großbuchstaben, Kleinbuchstaben)

Schriftarten

Es ist ein Satz von Zeichen derselben Schriftart mit derselben Familie, demselben Gewicht, derselben Größe und derselben Form. Bei UX Republic verwenden wir beispielsweise die Schriftart Montserrat.

Typografische Familien

Es gibt 5 Familien:

●  Serife: einschließlich Serifenschriften (Beispiele: Times New Roman, Georgia, Garamond…)

●  Serifenlos : oder serifenlose Schriften (z.B. Helvetica, Montserrat, Myriad…)

●  Kursiv: Welche Schriftarten simulieren die Handschrift (z. B. Lucida Handwriting, aber auch Comic Sans MS (und ja!))

●  Fantasie: exotischere, dekorative Schriften (z.B. Impact, Fraktur…)

●  Großraumlimousine: Schriftarten mit fester Breite (für jedes Zeichen verwendete Breite) (z. B. Courier New, Lucida Console usw.)

# Abschluss

Wir treffen uns wieder für die nächste Serie, die dritte und vorletzte, in der wir 3 Hauptthemen zusammen sehen werden: Raster und Abstände, Benachrichtigungen und Warnungen und schließlich die verschiedenen Arten von Menüs im Web.

Wenn Sie jemals den ersten Teil dieser Serie verpasst haben, lade ich Sie ein, ihn zu konsultieren dieser Link.

Wenn Sie schon immer Ihr Wissen vertiefen und das Design eines Webinterfaces üben möchten, bietet das UX Republic Trainingscenter das Training „UI Design, die Grundlagen“ an. Voici le lien für weitere Informationen.

 

 

Alexa CUELLAR, UX-Designerin @UX-Republic


Bildquellen:
– https://undraw.co/


Unsere nächsten Schulungen