Was war, was bleibt und was wird kommen?

SHOWNOTES

• Erstelle ein Konzept und macht dir klar wer deine Zielgruppe ist und welche Probleme du für deinen Kunden lösen möchtest. Bastel dir deinen Wunschkunden und erstelle eine Persona. (mehr zum Thema Personas findest du in diesem Artikel)
• Denk daran was du jetzt möchtest, in 2 Jahren und in 5 Jahren. Versuche jede Idee mit in dein Konzept aufzunehmen, damit du z. B. weitere Menüpunkte perspektivisch einplanst und nicht in 2 Jahren alles neu machen musst.

• Bleibe einfach und klar
• Starte mit einem guten Navigationskonzept, lege deine Menüpunkte fest und leite deinen Besucher sicher durch deine Website. Verzichte wenn möglich auf Untermenüpunkte und strukturiere lieber die Seiten mit aussagekräftigen Überschriften, die für die Suchmaschinen richtig ausgezeichnet werden sollten. (h1-h6, ein Artikel nur über Überschriften)

• Ein Besucher hat dich gefunden und kommt auf deine Seite. Das ist toll und du kannst dich freuen. Leider hast du nur maximal 3 Sekunden Zeit, deinen Wunschkunden abzuholen. Wenn du das nicht schaffst, geht er auch nicht auf deine Innenseiten, sondern sucht weiter im Internet. Du hast keine 2. Chance!!! Für dich heißt das, du musst ihm sehr schnell und gut dargestellt die wichtigsten Problemlösungen liefern.
• Arbeite mit professionellem Fotomaterial, denn Bilder sagen oft mehr als Worte. Achte unbedingt auf die Größe der Bilder, sodass du kurze Ladezeiten hast.
• Bleib in deinem Corporate Design. Logo, Schriften, Farben, etc.
• Animationen oder Diashows nicht um jeden Preis. Passt es zum Thema oder ist weniger mehr?

• Ca. 300 Wörter brauchst du auf einer Seite, damit Google dich mag. Natürlich relevanter und guter Content und nicht nur eine Aufzählung von Keywords. Achte auch auf die Rechtschreibung. Wenn du vorher Punkt 1 ausführlich bearbeitet hast, dann wird dir auch das Texten leichter fallen oder du holst dir dazu Hilfe.
• Wie kann ich dich erreichen?
• Downloads von wichtigen Dokumenten
• Lass deine Kunden sprechen mit Testimonials
• Rechtliche Texte: Impressum und Datenschutz. Diese beiden Punkte benötigen jeweils einen eigenständigen Menüpunkt und dürfen nicht als Untermenüpunkt irgendwo versteckt werden. Sie müssen mit maximal 2 Klicks erreichbar sein.

• Wenn du deine Seite selbst bauen möchtest, dann entscheide dich für ein freies Content Management System wie WordPress*, denn mit Anbietern wie WIX, JIMDO, 1und1, etc. bist du festgelegt und du kannst nicht mit deiner Seite umziehen oder zumindest nur sehr eingeschränkt.
• Suchmaschinen optimiert
• Kompatibilität mit allen gängigen Browsern
• Responsive Design, d. h. der Inhalt passt sich automatisch an alle Displaygrößen an
• barrierearm
• schnelle Ladezeiten
• keine Flash-Animationen
• Backuplösung
• Sicherheit

User-Interface-Mockups (UI-Mockups) sind visuelle Darstellungen eines Software- oder Webdesigns, die zeigen, wie die Benutzeroberfläche aussehen und funktionieren soll. Sie dienen als Blaupause für die Entwicklung und bieten Stakeholdern, Designern und Entwicklern eine klare Vorstellung davon, wie das Endprodukt aussehen wird. In diesem Artikel werden wir uns näher mit dem Konzept der UI-Mockups, ihren Vorteilen und den Tools beschäftigen, die zur Erstellung verwendet werden können.

Was ist ein UI-Mockup?

Ein UI-Mockup ist eine Art von Wireframe mit mehr Details und einer realistischeren Darstellung des Designs. Während Wireframes eher skizzenhaft sind und sich auf die Grundstruktur konzentrieren, bieten Mockups eine visuell reichhaltigere Darstellung, die Farben, Typografie, Bilder und andere Designelemente umfassen kann.

Vorteile von UI-Mockups

1. Klare Kommunikation: Mockups bieten eine klare und greifbare Darstellung des Designs, die es einfacher macht, Feedback zu sammeln und Missverständnisse zu vermeiden.
2. Effizienz in der Entwicklung: Mit einem gut durchdachten Mockup können Entwickler die Anforderungen besser verstehen und schneller umsetzen.
3. Benutzerfreundlichkeit: Durch die Visualisierung der Benutzeroberfläche können Designprobleme frühzeitig erkannt und behoben werden, was zu einer besseren Benutzererfahrung führt.

Tools zur Erstellung von UI-Mockups

Es gibt viele Tools, die zur Erstellung von UI-Mockups verwendet werden können. Einige der beliebtesten sind:

• Adobe XD: Ein umfassendes Tool für UI/UX-Design, das auch Prototyping-Funktionen bietet.
• Sketch: Ein Mac-exklusives Design-Tool, das sich auf die Benutzeroberflächengestaltung konzentriert.
• Figma: Ein browserbasiertes Tool, das Echtzeit-Kollaboration ermöglicht.
• Balsamiq: Ein einfaches Drag-and-Drop-Tool, das sich hervorragend für schnelle Mockups eignet.

"The picture element and associated features are W3C standard HTML features that allow web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill is a JavaScript file (or a polyfill to be more specific) that enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today!"