Designjargon ist überall. Und Sie müssen die Sprache sprechen können. Die Arbeit an digitalen Projekten hat eine eigene Terminologie. Von Dither- über Farbwerte bis hin zu fließenden oder festen Layouts gibt es einige Begriffe, die jeder Designer verstehen muss.
Deshalb haben wir es Ihnen leicht gemacht und eine Liste mit Begriffen für digitales Design zusammengestellt, die Sie kennen müssen. Diese Liste begann unter den Top 10, wir haben jedoch zu Vergleichszwecken einige Bonusjargon hinzugefügt. Wie viele dieser Begriffe kennen Sie bereits?
1. RGB und HEX
Sowohl RGB als auch HEX beziehen sich auf numerische Farbwerte. Jede Farbe im Lichtspektrum, ja Bildschirmfarbe wird mit Licht erzeugt, kann durch Kombination von drei Hauptfarbtönen erstellt werden.
- R = rot
- G = grün
- B = Blau
RGB-Werte werden mit drei Zahlen ausgedrückt, wobei jede Zahl zwischen 0 (keine Verwendung einer Farbe) und 255 (vollständiger Farbwert) liegt. Auf dem Bildschirm werden sogar Schwarz und Weiß durch Kombination dieser Werte erzeugt. Schwarz verwendet keinen Farbwert für Rot, Grün und Blau, während Weiß jeweils 100 Prozent verwendet.
HEX-Werte verwenden eine etwas komplexere Formel aus Buchstaben und Zahlen. Jeder HEX-Wert hat einen entsprechenden RGB-Wert. HEX-Codes werden in HTML verwendet, um Farben in Websites zu codieren. Diese Werte werden durch drei Gruppen von Zeichenpaaren dargestellt, die sowohl Buchstaben als auch Zahlen enthalten.
HEX-Werte beginnen immer mit einem # -Zeichen. Der niedrigste Wert ist 00, während der höchste Wert FF ist.
2. Mouseover
Ein Mouseover ist ein JavaScript-Element, das zu einem Element auf dem Bildschirm führt, sobald der Mauszeiger es erreicht hat.
Diese Änderungen beziehen sich häufig auf grafische Elemente wie Fotos. Oft sehen Sie etwas einfaches wie einen Hyperlink, aber Mouseover-Zustände können auch komplex sein. Einige komplexere Mouseover-Effekte umfassen ausgeblendete Navigationsmenüs oder Änderungen an Fotostatus oder Bildlauflisten.
3. Dithering
Dither ist ein Prozess, der in der digitalen Audio- und Bildbearbeitung verwendet wird, und verhindert, dass Farbstreifen oder zufälliges Rauschen entstehen. Der Prozess beinhaltet tatsächlich eine komplexe mathematische Formel, die beabsichtigtes Rauschen (visuell oder akustisch) hinzufügt.
Dieses Hinzufügen von Rauschen kann sich insbesondere auf das Erscheinungsbild von Bildern in einer begrenzten Farbpalette auswirken. Durch Dithering kann der Designer eine Illusion von Farbe erzeugen, die möglicherweise nicht vorhanden ist, da Pixel mit zusätzlichem Rauschen anfangen, einige der Farbeigenschaften von benachbarten Pixeln anzunehmen.
4. CSS
Cascading Style Sheets sind eine Reihe von Regeln, die festlegen, wie Dinge auf einer Website aussehen, wobei eine Reihe von abgelehnten Stilen für HTML-Elemente verwendet wird.
Diese Definitionen, die häufig als CSS bezeichnet werden, können Konstrukteuren viel Zeit einsparen, Suchmaschinen helfen, Ihre Website zu lesen, und machen es einfach, eine Website mit einheitlichen visuellen Elementen zusammenzustellen. Mit einer einzigen Änderung des CSS können alle Text- oder Farbattribute in einem Schritt geändert werden.
Sie definieren Spezifikationen für Elemente wie Textkörper oder Kopfzeilen, bei denen bei jeder Verwendung des entsprechenden HTML-Tags Schriftart, Größe, Farbe, Ausrichtung und andere Werte angewendet werden.
5. Metadaten und Metatags
Metadaten und Metatags sind zusammenhängende Begriffe. Meta-Tags-Relay-Metadaten. Metadaten sind Informationen über Daten - so verwirrend das auch klingen mag - und bieten insbesondere Informationen zum Inhalt eines Elements in einer digitalen Datei. Zu den am häufigsten erkannten Metadaten gehören die Kamerainformationen, die Sie in digitalen Fotodateien sehen.
Metadaten werden auch verwendet, um den Inhalt einer Website für Suchmaschinen zu beschreiben. Diese Informationen werden mithilfe von Metatags zum Back-End einer Website hinzugefügt. Zu den gebräuchlichen Tags gehören die Beschreibung des Inhalts einer Seite, Schlüsselwörter, Autoreninformationen, Fotoinformationen sowie Tages-, Zeit- und Ortsstempel.
Möchten Sie Meta-Tags in Aktion sehen? Google fast alles. Diese kurze Beschreibung, die nach dem Seitennamen und dem Link erscheint, stammt normalerweise aus der? Beschreibung? Meta-Tag, das es zu einem gut sichtbaren und wichtigen Element in Ihrer digitalen Design-Toolbox macht. (Hinweis: Wenn Sie das Tag leer lassen, wird es von den Suchmaschinen mit dem ersten Inhalt Ihrer Seite gefüllt.)
6. Favicon
Dieses kleine Symbol - normalerweise 16 x 16 Pixel - ist das Bild, das sich am oberen Rand jeder Browser-Registerkarte oder jedes Fensters befindet. Jede Website kann ein eigenes Favicon haben, das für das Lieblingssymbol kurz ist. Das kleine Symbol wird auch in der Suchhistorie, neben Lesezeichen sowie auf Browser-Registerkarten und Desktopsymbolen angezeigt.
Favicons müssen gespeichert und ordnungsgemäß gespeichert werden, um auf einer Website arbeiten zu können. Während viele Browser GIF- und PNG-Formate unterstützen, bevorzugt Internet Explorer eine ICO-Datei.
Sie können Ihr eigenes Favicon mit Software wie Adobe Photoshop erstellen oder ein Online-Tool wie Favicon Generator verwenden.
7. Feste Breite vs. Fluid vs. Responsive Layout
Es gibt heutzutage so viele Begriffe, die beschreiben, wie Ihre Website innerhalb eines Browsers oder einer mobilen Benutzeroberfläche funktioniert. Berücksichtigen Sie vor der Auswahl eines Entwurfskonzeptes oder Rasters feste, flüssige und reaktionsschnelle Layoutoptionen.
Feste Breite: Ein Layout mit fester Breite funktioniert genau so, wie der Name sagt. Eine Site basiert auf einer Reihe von Größenangaben und behält diese Angaben unabhängig von der Geräte- oder Browsergröße bei. Diese Sites können zwar schnell erstellt werden, sie können jedoch bei kleineren Geräten schwerfällig sein.
Flüssigkeitslayout: Fluid-Layouts werden unter Verwendung eines Proportionssystems relativ zum Design und zur Bildschirmgröße erstellt, um eine Site zu rendern. Jedem Element im Design wird eine prozentuale Breite zugewiesen, die sich auf die Bildschirmgröße bezieht. Beispielsweise kann die Hauptspalte des Texts 60 Prozent des Bildschirms umfassen, während die Seitenleiste die restlichen 40 Prozent ausfüllt. Bei der Verwendung eines flüssigen Layouts wurden einige der Probleme behoben, die mit dem Design mit fester Breite verbunden sind. Das Endergebnis kann auf der Rückseite manchmal schwer zu bestimmen sein. Fluid-Layouts funktionieren gut mit verschiedenen Desktop-Browser-Umgebungen, neigen jedoch dazu, auf kleinen Geräten mit mobiler Größe etwas klobig zu werden.
Responsives Layout: Responsive ist der große Trend des Jahres 2013 und übernimmt die Art und Weise, wie wir über Webdesign denken. Da sich responsives Design an das Gerät anpasst, auf dem es betrachtet wird, funktioniert responsives Design nahezu universell. Die Größe jedes Elements basiert auf Prozentsätzen, einschließlich Bildern und Text, und Medienabfragen ermöglichen die Erstellung responsiver Sites mit unterschiedlichen CSS-Stilen. Responsive Design ist nicht nur eine kleinere Ansicht einer Website, sondern kann sogar eine eigene angepasste Version der vollständigen Desktopsite enthalten, da die Elemente möglicherweise unterschiedlich gestapelt sind oder Funktionen nur für Mobiltelefone enthalten, z es. Auf der anderen Seite kann die Entwicklung und das Design länger dauern.
8. Auflösung
Wenn es um Bilder geht, ist Auflösung ein Begriff, den Sie häufig hören. Die Bildschirmauflösung ist besonders wichtig, um Bilder für eine schnelle Anzeige im Internet zu optimieren. Die Auflösung eines Bildschirms ist die sichtbare Größe der Anzeige, z. B. ein Browser, der einen Bildschirm anzeigt. oder scrollen Sie von einer Website mit einer Breite von 1.366 Pixel und einer Höhe von 768 Pixel.
Die Auflösung eines Bildes wird auf dieselbe Weise gemessen. Beim Speichern von Bildern müssen Sie jedoch auch Pixel pro Zoll berücksichtigen. Um die besten Ergebnisse online zu erzielen, sparen Sie bei 72 ppi, sofern nicht anders empfohlen. Die Breite und Höhe der Bilder sollte auf die größte Größe skaliert werden, für die sie online verwendet werden. Viele Designer entscheiden sich jedoch für eine minimale Breite von 600 Pixeln - die optimale Größe für das Anheften auf Pinterest.
9. UI vs.UX
UI und UX beziehen sich auf die Vorder- und Rückseite des digitalen Designs. Du kannst keinen ohne den anderen haben.
- UI (Benutzeroberfläche) - sind alle Komponenten und Funktionen, die zur Erstellung einer Website erforderlich sind. Die Benutzeroberfläche macht alles möglich, von allen Komponenten, die zum Erstellen eines Site-Designs verwendet werden, bis zu den einzelnen Komponenten.
- UX (Benutzererfahrung) - so funktioniert das Design für die tatsächlichen Benutzer. Welche Erfahrung oder Emotion oder Reaktion erzeugt das Endprodukt? Was knifflig sein kann, ist, dass eine gute Benutzeroberfläche normalerweise zu einer exzellenten Benutzererfahrung führt.
Erhalten Sie eine ausführliche Lektion zu diesen Begriffen in einem vorherigen Artikel von Design Shack.
10. Skeuomorphismus vs. flach
In den letzten Monaten hat fast jeder Erfahrung mit Skeuomorphismus oder flachem Design gemacht, dank einer Fülle von Website-Designern, die "flach" gehen.
Skeuomorphic Design enthält Elemente und Designtricks, um eine Benutzeroberfläche realistisch aussehen zu lassen. Von Schlagschatten zu Fasen oder Knöpfen, die sich drehen? Mit einem Mausklick oder Bildlauf verkörpert der Skeuomorphismus das Gefühl eines "falschen Realismus". Das bekannteste Beispiel für skeuomorphes Design ist die iOS-Benutzeroberfläche von Apple, die Farbverläufe, Texturen und Schatten enthält.
Flaches Design hingegen ist ohne Verzierung oder Realismus. Der Stil ist sehr einfach und enthält keine Elemente, die ihn dreidimensional wirken lassen. Das bekannteste Beispiel für flaches Design ist die Windows-Benutzeroberfläche einschließlich der Oberfläche von Windows Phone mit Blockstyling.
Fazit
Nun, da Sie die Sprache kennen, gehen Sie hinaus und beginnen Sie mit dem Erstellen. Vergessen Sie nicht, den Design Shack-Leitfaden zu den 10 Print Design-Begriffen zu lesen, die Sie ebenfalls kennen müssen, damit Sie in beiden Bereichen ein gutes Verständnis haben!
Bildquelle: Robert Scoble.