Grundlagen zu Webdesign bzw. UI-Design

Die Planung einer Website

Damit eine Website erarbeitet werden kann, müssen zuerst ein paar grundlegende Fragen beantwortet werden:

• Welches Thema werde ich präsentieren?
• Welche Zielgruppe möchte ich ansprechen?
• Wie komme ich an interessante Inhalte?
• Wer designed meine Website und wie soll dieses aussehen?
• Wer programmiert meine Website?
• Wer schreibt mir meine Texte?
• Wie komme ich an gute Fotos und Videos?
• Wer füllt mir meine Website ab?
• Welche Domain passt und ist noch frei?
• Wo hoste ich meine Website?

Webdesign bzw. UX- und UI-Design

Das Webdesign, auch Webgestaltung oder User Interface Design (UI) genannt, umfasst als Disziplin des Mediendesigns die strategische, konzeptionelle, visuelle, funktionale und strukturelle Gestaltung von Websites für das Internet. Die technische Implementierung von Websites wird dagegen als Webentwicklung bezeichnet. (Quelle: Wikipedia)

Wireframing

Unter dem Begriff «Wireframe» wird ein Drahtmodell verstanden. Dieses wird dazu benutzt, einen sehr frühen konzeptionellen Entwurf einer Website, App oder Software-Frontends darzustellen. Dabei ist es wichtig, dass die Gestaltung und die Funktion noch keine Rolle spielen. Das Augenmerk liegt auf der Anordnung von Elementen und deren Benutzerführung bzw. Benutzererfahrung.

Low- und High-Fidelity-Prototyping

Ein Protoyp beinhaltet bestimmte Eigenschaften einer digitalen Umsetzung wie eine Website oder eine App. Man simuliert darin die Nutzerflüsse und Abläufe, bevor man eine Zeile Code schreibt. Ziel ist es, die Eigenschaften unter dem Schwerpunkt der User Experience zu testen und zu prüfen.

Damit man mit einem Prototypen arbeiten kann, muss gewährleistet sein, dass man die Nutzerflüsse real testen kann. Dies macht man zum Beispiel über zusammenhängende Post-its an der Wand oder über Klickdummies über ein Programm wie zum Beispiel Invision Freehand, Balsamic Mockup oder Figma. Ziel ist es, die Szenrien so real wie möglich zu durchlaufen, damit man vor der Programmierung Probleme erkennen und ausmerzen kann.

Je nach visueller oder zusammenhängender Ausprägung des Prototypen redet man über Low-Fideltity oder High-Fidelity.

Inferface Design bzw. Screendesign

Screendesign werden Layouts geschaffen, welche auf Monitoren aller Grössen funktionieren sollen.

Screendesign ist ein Unterbereich des Grafikdesign bzw. Interfacedesigns. Wer im Bereich des Interfacedesigns arbeitet, muss bereit sein, auch Aspekte aus anderen Fachbereichen mit einzubeziehen, etwa aus dem Maschinenbau. Es geht im Interfacedesign darum zu erkunden, welche Möglichkeiten für Mensch-Maschine-Kommunikation die heute vorhandenen technischen Einrichtungen bieten und es geht auch darum, Konzepte für zukünftige Mensch-Maschine-Kommunikation zu entwickeln. Das Screendesign dagegen ist ausschließlich grafisches Design, bei dem ein Screendesigner damit beauftragt ist, für eine Bildschirmoberfläche eine ansprechende Gestaltung zu schaffen. In seinem Werk können die Erkenntnisse des Interfacedesigns einfliessen, müssen es aber nicht. (Quelle: Wikipedia)

Responsive Design

Beim Responsive Webdesign handelt es sich um ein gestalterisches und technisches Paradigma, bei welchem sich gestalterische Inhalte an den jeweiligen Bildschirm anpassen. Der grafische Aufbau einer «responsiven» Website erfolgt anhand der Anforderungen des jeweiligen Gerätes. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente (z.B. Navigation, Seitenspalte, Text Bild), aber auch die Nutzung unterschiedlicher Eingabemethoden (z.B. Maus oder Touchscreen). Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3(hier insbesondere die Media Queries) und JavaScript.

Breakpoint

Ein Breakpoint ist ein definierter Punkt im CSS, mit dem sich die Darstellung der Webseite an die unterschiedliche Displaygrößen anpasst.

Media Queries

Darstellung eines Dokuments für verschiedene Ausgabemedien. Dabei wird nicht ermittelt, um welchen Browser es sich handelt, sondern welcher Medientyp (z.B. Bildschirm oder Drucker).

Viewports

Anzeigebereich im Fenster der Anwendung, der für die Darstellung des Anwendungsinhaltes tatsächlich zur Verfügung steht.

Grid System

Jeder modernen Website liegt ein Grid System zu Grunde. Auf Basis dieses Systems lassen sich Anwendungen bauen, welche auf jedem Monitor flexibel (siehe Responsiveness) anpassbar sind. Bootstrap ist eines der bekanntesten Frontend-Frameworks, welches mittels einem Grid System möglich macht, fliessende Websites mittels HTML- und CSS-Styles zu erarbeiten. Eine grundlegende Übersicht bietet die W3C-School.

Quelle: CSSScript

Quelle: One.com

7. Tools

Ein Screendesigner ist nur dann happy, wenn er ein passendes Programm hat, diese zu gestalten. Momentan gibt es Konkurrenz am Markt. Neben dem Adobe XD challengen sich kleinere Player am Markt. Dazu gehören Sketch, InVision Studio und Figma. Letzteres ist browser-basiert und ein absolutes Highlight.