10 Webdesign-Begriffe, die jeder kennen muss

Wie in jeder Branche, die in einem technischen Bereich tätig ist, sind im Webdesign keine Schlagworte und Redewendungen enthalten, und selbst wenn Sie ein erfahrener Fachmann sind, kann es schwierig sein, den Überblick darüber zu behalten, was was ist.

Zurück wenn Web-Design Als es noch in den Kinderschuhen steckte, litt es bereits unter dem Problem zu vieler Akronyme und Fachsprachen, für die unter all der Übertreibung einige ziemlich einfache Technologien und Ideen stehen. Die heutige Umgebung ist hundertmal komplizierter, da sich die Tools und Frameworks, Sprachen und Bibliotheken, die wir im Web verwenden, entwickelt und weiterentwickelt haben.

Designer - selbst professionelle Webdesigner - können Schwierigkeiten haben, sich über die verschiedenen Schlagworte und Technologien auf dem Laufenden zu halten. Deshalb haben wir hier 10 der wichtigsten Webdesign-Begriffe zusammengefasst, die jeder zumindest verstehen sollte. Schauen Sie sich unsere Liste unten an und lassen Sie uns wissen, ob wir etwas verpasst haben, von dem Sie denken, dass es in den Kommentaren unten erscheinen sollte.



01. HTML, CSS & JavaScript

Webdesign-Begriffe: HTML5

HTML bedeutet HyperText Markup Language und HTML5 ist die neueste Version

Lassen Sie uns dieses gleich zu Beginn aus dem Weg räumen!

HTML

HTML steht für HyperText Markup Language und ist die Sprache des Webs.

Einfach ausgedrückt bietet HTML dem Webdesigner eine Möglichkeit, Ihrem Webbrowser mitzuteilen, wie ein bestimmter Inhalt behandelt werden soll. HTML enthält eine Reihe verschiedener Tags, mit denen der Designer seinen Inhalt mit semantischer Bedeutung markieren kann, sodass Absätze als Textkopie identifiziert werden, während Bilder als Bilder usw. importiert werden.

CSS

HTML allein reicht jedoch nicht aus, um schöne Webseiten zu erstellen. Cascading Style Sheets (CSS) bieten Designern eine Methode zum Erstellen eines visuellen Regelwerks, mit dem festgelegt wird, wie verschiedene Elemente einer Webseite vom Browser auf dem Bildschirm gerendert werden.

Mit CSS können beispielsweise die Farbe des Texts, der Hintergrund, die Größe, Form und Position aller verschiedenen Teile einer Seite festgelegt werden.

JavaScript

Schließlich ist JavaScript (wie der Name andeutet) eine Skriptsprache, mit der Designer Interaktionen auf einer Webseite erstellen können.

In der Vergangenheit wurde JavaScript hauptsächlich zur Formularüberprüfung verwendet und stellte die nervigen Warnfelder bereit, die auftauchten, als Sie vergaßen, Ihre Telefonnummer in das Telefonfeld einzugeben. Heutzutage gibt es viel mehr Möglichkeiten für JavaScript, einschließlich spezieller visueller Effekte oder der Möglichkeit, neuen Inhalt zu laden, ohne die gesamte Seite neu laden zu müssen.

Eine wichtige Sache ist, dass JavaScript trotz seines Namens keinerlei Beziehung zur Java-Programmiersprache hat.

Lesen Sie auch:

02. Responsive Design

Webdesign-Begriffe: Responsive Webdesign

Responsive Webdesign wird schnell zum Standardansatz für alle Webdesigns

Sie können nicht versäumt haben, von dem Konzept des Responsive Design zu hören. In den letzten Jahren war dies ein echtes Modewort im Internet und es gibt keine Anzeichen von Nachlassen. Kunden fordern sogar reaktionsschnelle Websites von ihren Designern, oft ohne vollständig zu verstehen, wonach sie fragen!

In einfachen Worten, ein responsives Design passt sich dem Gerät des Benutzers und in einer idealen Welt dem Kontext des Benutzers an, sodass der erforderliche Inhalt auf die am besten geeignete und zugänglichste Weise angezeigt wird, unabhängig davon, um welche Art von Gerät mit Internetverbindung es sich handelt verwendet werden, um es anzuzeigen. In der Praxis bedeutet dies, dass sich eine Webseite mit abnehmender oder zunehmender Bildschirmgröße neu paginiert und bei Anzeige auf einem Desktop-Computer in mehreren Spalten angezeigt wird, bei Anzeige auf einem Smartphone jedoch nur in einer einzigen Spalte.

Beachten Sie jedoch, dass es beim Konzept des Responsive Design nicht nur um die Neuformatierung von Inhalten geht. Lesen Sie die folgenden Artikel zu Responsive Design, um mehr zu erfahren:

03. Semantisches Markup

Webdesign-Begriffe: Semantisches Markup

Beim semantischen Markup geht es darum, relevante Metadaten mit Inhalten zu verknüpfen

Semantisches Markup ist ein Ansatz zum Codieren von HTML, bei dem die zur Beschreibung von Inhalten verwendeten Markup-Tags auch relevante Metadaten über den Inhalt selbst bereitstellen. Beispielsweise kann eine Information, die für den Hauptinhalt einer Seite relevant ist, aber nicht direkt zum Thema der Seite gehört, als gekennzeichnet werden.

wie man Schritt für Schritt ein deutsches Schäferhundgesicht zeichnet

Obwohl es sich nach einer offensichtlichen Best-Practice-Methode anhört und das Web sicherlich mit Blick auf die Semantik entwickelt wurde, war die Verwendung dieses Ansatzes nicht immer einfach…

Anfangszeit

In den frühen Tagen des Webs war die Anzahl der verfügbaren HTML-Tags begrenzt. Viele der existierenden Tags waren rein semantischer Natur: die

Tag wird beispielsweise zum Markieren von Absatzinhalten verwendet.

Im Laufe der Zeit wollten Designer die Grenzen dessen verschieben, was möglich war, um anspruchsvollere Layouts zu erstellen, als es die Sprache zulässt, wenn sie in ihrer reinsten Form verwendet werden

und
Tags, die zum Markieren von Tabellendaten vorgesehen waren, wurden neu verwendet, um eine zuverlässige Lösung für die Erstellung von Spaltenlayouts bereitzustellen.

Gleichzeitig begannen die Designer, sich auf die visuellen Standardmerkmale eines bestimmten Tags zu verlassen, um zu definieren, welches Tag sie für den Inhalt verwendeten, anstatt das semantisch geeignete Tag neu zu gestalten, um es dem Design anzupassen. Infolgedessen wurde häufig großer fetter Text als Überschrift gerendert (

,

,

etc) tag, anstatt a oder - zur Hervorhebung - Tag.

Vorder- und Seitenansicht des Gesichts

Verlorene Generation

Infolgedessen ging ein Großteil der semantischen Natur von HTML für eine Generation verloren. Der Nachteil eines nicht-semantischen Webs ist, dass es unglaublich schwierig wird, den zugrunde liegenden Code einer Website zu pflegen oder zu verstehen, und Suchmaschinen nicht in der Lage sind, die wichtigsten Elemente einer Seite programmgesteuert genau zu definieren.

Glücklicherweise ist mit dem Aufkommen von CSS und der neuesten Version der HTML-Sprache die Fähigkeit zurückgekehrt, sich mit einem puristischeren semantischen Ansatz zu markieren. CSS ermöglicht komplexere Layouts als dies mit dem möglich war

Tag, und die HTML-Sprache wurde um neue semantisch orientierte Tags wie und erweitert.



04. SaaS

Webdesign-Begriffe: SaSS

SaaS (Software as a Service) beschreibt alles von Google Text & Tabellen bis Photoshop Express

Nicht zu verwechseln SASS , SaaS ist eine Abkürzung für Software as a Service. In einfachen Worten bedeutet dies jeden Dienst, der eine Softwareplattform bereitstellt, die von oder über die Cloud bereitgestellt wird.

Beliebte Beispiele für SaaS in Aktion sind die neuesten Versionen von Microsoft Office Online, Google Text & Tabellen und Photoshop Express.

Jeder dieser Dienste bietet dem Benutzer eine Desktop-ähnliche Erfahrung, wird jedoch direkt aus dem Internet bereitgestellt, ohne dass zusätzliche Software auf dem Computer des Benutzers installiert werden muss.

05. A / B-Tests

Mit A / B-Tests können Sie verschiedene Versionen einer Webseite testen

Mit A / B-Tests können Sie verschiedene Versionen einer Webseite testen

A / B-Tests sind eine Methode zum Ausprobieren verschiedener Methoden, um das gleiche Endergebnis zu erzielen, mit dem Ziel, durch Experimente festzustellen, welche Lösung am effektivsten ist.

In der Regel werden A / B-Tests verwendet, um verschiedene Layouts von Webseiten zu testen und zu verfolgen, wie viele Benutzer mithilfe der alternativen Layouts zu zahlenden Kunden konvertieren.

Durch die Fortsetzung eines iterativen Prozesses zum Prototyping, Bewerten und Anpassen können A / B-Tests die Conversion-Rate einzelner Seiten erheblich steigern. Es ist ein nützliches Werkzeug: Eine bessere Konvertierung bedeutet eine bessere Bilanz!

Lesen Sie auch:

  • Verwendung von AB-Tests, Eye Tracking und Website Optimizer
  • Fünf Fähigkeiten, die Sie benötigen, damit AB-Tests funktionieren
  • Der Weg zum Erfolg von Web-Apps: Prototypen und Benutzertests

06. LUFT

Webdesign-Begriffe: ARIA

ARIA (Accessible Rich Internet Application) beschreibt Technologien, die dazu beitragen, das Web zugänglich zu machen

ARIA ist eine Abkürzung für Accessible Rich Internet Application und bezieht sich auf die Idee, dass Web-Apps von einer Reihe von Personen mit unterschiedlichen Anforderungen an unterstützende Technologie und Layout verwendet werden.

ARIA wird normalerweise als Begriff verwendet, um die Technologien zu beschreiben, mit denen die Lücke zwischen den Anforderungen des Benutzers und einer Website oder Web-App geschlossen werden kann.

Infolgedessen kann es sich auf Bildschirmlese-Software, strukturelle Layout-Ansätze und Entwurfsmethoden wie benutzerorientiertes Schnittstellendesign beziehen, um die Zugänglichkeit von Inhalten und Funktionen zu verbessern. Das W3C sponsert einen Großteil der in diesem Bereich geleisteten Arbeit, und Sie können mehr unter erfahren ARIA-Website der Web Accessibility Initiative .

Lesen Sie auch:

07. Informationsarchitektur (IA)

Webdesign-Begriffe: IA

Die Informationsarchitektur (IA) dreht sich um die Organisation einer Website

Informationsarchitektur (IA) ist ein Oberbegriff, der das semantische Layout von Inhalten und Informationen auf einer Website beschreibt. Es bezieht sich auf die Organisation der Informationen, die sich damit befassen, welche Seiten in der Struktur einer Website wohin gehen, welche Inhalte auf jeder Seite enthalten sind und wie diese mit anderen Seiten auf der Website interagieren.

IA ist bestrebt, es den Benutzern so einfach wie möglich zu machen, die gesuchten Informationen zu finden, um die Conversion, den Umsatz und / oder die Benutzerzufriedenheit zu steigern.

  • Lesen Sie auch: Warum das Planen einer Website wie das Bauen eines Hauses ist

08. Serverseitiges Scripting

Webdesign-Begriffe: PHP

Serverseitiges Scripting - in einer Sprache wie PHP - bedeutet, dass die Datenmanipulation auf dem Server durchgeführt wird

Es gibt zwei verschiedene Möglichkeiten, Anwendungsfunktionen auf einer Website bereitzustellen: clientseitig, wobei die gesamte Logik und Datenverarbeitung vom Webbrowser mithilfe von JavaScript ausgeführt wird, und serverseitig, wobei die Datenmanipulation auf dem Server ausgeführt wird. Die meisten Web-Apps kombinieren beides, sodass aus Sicht des Benutzers alles im Browser verarbeitet wird. Hinter den Kulissen werden jedoch Daten an den Server zurückgesendet, um gespeichert, bearbeitet oder generiert zu werden.

Serverseitiges Scripting ist ein Oberbegriff für die Sprachen, die zum Programmieren dieser serverseitigen Datenmanipulation verwendet werden. Skriptsprachen wie PHP und ASP.NET bieten Webentwicklern eine einfache Möglichkeit, eine ausgefeilte Geschäftslogik zu erstellen, die mit einer Datenbank interagieren, komplexe Datenvorgänge ausführen und Informationen an den Browser zurückgeben kann.

Da die Verarbeitung auf dem Server erfolgt, muss der Webbrowser des Benutzers nicht so hart arbeiten, was die scheinbare Leistung zumindest aus Sicht des Benutzers verbessert.

Woraus bestehen Moleskine-Zeitschriften?

09. Visuelle Hierarchie

Webdesign-Begriffe: Visuelle Hierarchie

Visuelle Hierarchie bedeutet, Gestaltungselemente so anzuordnen, dass einige gegenüber anderen hervorgehoben werden

Dies ist nicht nur auf das Webdesign beschränkt, sondern wird zunehmend verwendet, wenn auf das Design und Layout einer Webseite Bezug genommen wird. Deshalb wurde es in unsere Liste der Top-Begriffe aufgenommen. Einfach ausgedrückt bezieht sich die visuelle Hierarchie auf die Anordnung von Designelementen auf einer Seite, sodass die wichtigsten Elemente stärker hervorgehoben zu werden scheinen.

Diese Betonung wird normalerweise durch die Verwendung von Größe, Farbe, Schriftart und Spezialeffekten wie Schlagschatten erreicht. Visuelle Hierarchie ist oft eine bewusste Entscheidung als Ergebnis eines Informationsarchitekturprozesses.

10. Unendliches / Parallaxen-Scrollen

Unendliches Scrollen und Parallaxen-Scrollen sind zwei verwandte Techniken, die immer beliebter werden

Unendliches Scrollen und Parallaxen-Scrollen sind zwei verwandte Techniken, die immer beliebter werden

Unendliches Scrollen und Parallaxe sind zwei getrennte Dinge, aber sie werden oft zusammen gesehen, deshalb haben wir sie hier zusammen verpackt.

Das unendliche Scrollen ist derzeit eine trendige Methode, um eine Website so darzustellen, dass anstelle separater Seiten zum Anzeigen von Inhalten der gesamte Seiteninhalt auf eine einzelne Seite geladen wird, die einen Bildlauf durchführt, um verschiedene Inhaltsbereiche anzuzeigen.

Die Voraussetzung ist, dass beim Scrollen einer Seite gegen Ende des Inhalts frischer Inhalt geladen und an den unteren Rand der Seite angehängt wird, wodurch ein „unendlicher“ Bildlauf erstellt wird. Beliebte Beispiele sind die Facebook-Timeline-Ansicht, Pinterest und Tumblr.

Parallaxe ist der Effekt, der auftritt, wenn sich Objekte, die näher an Ihrem Blickwinkel liegen, schneller zu bewegen scheinen als Objekte, die weiter entfernt sind. Dies ist am besten von einem fahrenden Auto oder Zug aus zu sehen, wo Zäune und Bäume in der Nähe des Fahrzeugs schnell vorbeiziehen, während sich Berge in der Ferne langsamer zu bewegen scheinen.

Im Web wird derselbe Effekt verwendet, um ein Gefühl für die Tiefe von Website-Designs zu erzeugen, das häufig eine Bewegung als Reaktion auf das Scrollen des Benutzers ermöglicht.

Lesen Sie auch:

Wörter: Sam Hampton-Smith