Titelbild: Adobe XD.
07.11.2018 - Martin Krolop

Adobe XD.

Wie Adobe XD Webdesign revolutioniert.

2018 ist der Onlinehandel erneut gestiegen: 10,2 % laut der Studie des Handelsverbands Deutschland (HDE). Online ist die Zukunft, und das nicht erst seit gestern, sondern eher seit vorgestern. Selbst Firmen, die in den letzten Jahren noch gezögert haben, können sich nicht mehr gegen diese Zukunft wehren und so wird der Onlineauftritt einer Firma Jahr für Jahr wichtiger.

Für diesen gilt im Grunde das Gleiche wie für ein Ladengeschäft: man sollte sich dort weder verirren noch von der Auslage der Produkte abschrecken lassen. Auch wer zu lange an der Kasse steht oder nicht mit Karte zahlen kann, verliert schnell die Lust am Impulskauf. Deutlich erfolgversprechender ist es da schon, seine Produkte in einem ansprechenden Umfeld zu präsentieren und diese dabei geschickt anzuordnen, damit neben dem Einkaufszettel auch noch andere Waren im Einkaufskorb landen. Genau das muss erfolgreiches Webdesign leisten, indem verschiedene Kriterien erfüllt werden.

Eine Website soll möglichst einfach, zielgerichtet und effizient sein. Kein Klick zu viel, denn schlechte Navigation wirkt unprofessionell und stört den Anwender. Und wer seine Besucher und Kunden nervt, der verliert sie eben. Die Herausforderungen bei der Gestaltung einer Website sind andere als beim Bau von Ladengeschäften und Einkaufspassagen. Als Kunde im Supermarkt finde ich die Milch immer am gleichen Platz, egal, ob ich einen Pulli oder ein T-Shirt trage. Websites hingegen müssen sowohl für iOS als auch für Android optimiert sein und immer erstklassig aussehen.

 

 

Gute Websites heben sich ab

Wer erfahren möchte, was gute Websites ausmacht, darf sich zunächst mit einigen Fachbegriffen beschäftigen. So definiert das User Interface (UI) die Bedienbarkeit durch den Anwender bzw. Leser. Da eine Website möglichst intuitiv sein soll, stellt sich bereits beim Gestaltungsprozess die Frage, wie der Leser diese nutzen wird. Wer seinem Kunden bei der ersten Präsentation die neue Website erklären muss, hat nämlich ziemlich schnell ein Problem. Das UI verbindet sämtliche Websiteinhalte miteinander und erzeugt eine verkaufsfördernde Verknüpfung.

Grundlage für das UI ist das Wireframing – die schematische Blaupause und damit das Skelett einer jeden Website. Vergleichen wir das Wireframing einer Website mit Architektur, dann wäre unser Ziel, dass alle Räume einfach erreichbar und zugänglich sind. Wenn man das Esszimmer nur über den Balkon erreichen kann, kommt schnell Frust auf – hier sind wir einfach anderes gewohnt. So hat es sich beispielsweise eingebürgert, dass neben einem Warenkorbsymbol eine Zahl zu sehen ist, die uns die Anzahl der Produkte im Warenkorb anzeigt. Oder eine Lupe symbolisiert selbsterklärend eine Suchfunktion innerhalb der Website.

Experience Design hat hingegen das Ziel, uns als Nutzer möglichst glücklich und stressfrei zu halten. Gutes Design darf und soll eben Spaß machen. Alle drei Dinge, User Interface, Wireframing und Experience Design, sind die essenziellen Elemente einer perfekten Website.

 

Warum ist das wichtig?

Bei der Entstehung einer Website ist es wichtig, simple, interaktive und klickbare (es gibt kein besseres Wort) Prototypen weit vor der eigentlichen Programmierung zu gestalten. Diese Prototypen eignen sich auch bestens für eine erste Visualisierung und Präsentation bei Ihren Kunden – und diese beglücken uns erfahrungsgemäß mit immer komplexeren (und damit spannenderen) Projekten.

Während es früher mal ausreichend war, eine Person in der Agentur für allerlei Internetprojekte abzustellen, sprechen heutzutage mehr und mehr Kompetenzträger mit, was die Webgestaltung für den Designer nicht immer vereinfacht. Als Designer und Gestalter von Websites obliegt uns die Verantwortung, die Kunden unserer Kunden möglichst gezielt und zufrieden an ihr gewünschtes Ziel zu bringen. Die Designphase ist die Geburt einer Website und kann manchmal ziemlich schwer sein oder lange dauern. Gerade wenn man die Bedürfnisse des Kunden im Vorfeld nicht genau skizziert hat, entsteht oft ein riesiger zusätzlicher Aufwand. Die Fähigkeit, dem Kunden einen soliden, verständlichen und grundlegend nutzbaren Vorschlag zu liefern, ohne bereits finanzielle Ressourcen für das Programmieren zu nutzen, macht einen Designer heute besser und gefragter denn je. Adobe XD bietet hierfür das perfekte Werkzeug.

 

 

Wie kann Adobe XD helfen?

Adobe XD ermöglicht, ähnlich dem bekannten Layout- und Satzprogramm Adobe InDesign, eine weniger programmiertechnische als vielmehr grafische Herangehensweise. Damit ist es möglich, sich ausschließlich dem Design widmen zu können, ohne lästige Ablenkung durch Programmcode mit Fokus aufs Wesentliche. Die Anforderung an eine moderne Website lautet, gutes, reduziertes Design und intuitive Benutzerführung mit den Bedürfnissen des Kunden zu vereinen. Bei all diesen Herausforderungen hilft Adobe XD und sorgt für eine effektive Arbeitsweise. Effektivität bedeutet in diesem Zusammenhang Zeit- und damit Kostenersparnis. Dabei hilft Adobe XD, die Darstellung auf verschiedensten Endgeräten und Softwareplattformen zu optimieren.

Egal, ob Windows, macOS, iOS oder Android: Die Websites werden überall optimal dargestellt. Adobe XD nutzt hierfür Routinen, welche die manuelle Arbeitsweise erfolgreicher Designer automatisieren. Gutes Design setzt auf wiederkehrende Designelemente, denn diese erhöhen das Verständnis des Nutzers auf den unterschiedlichen Seiten und bewirken, dass der Besucher sich schnell zurechtfindet.

Websitedesign ist komplex und diese Komplexität wird durch Adobe XD maximal erleichtert. Es sind die kleinen und unscheinbaren Dinge, die Adobe XD so effektiv machen. Kleines Beispiel gefällig? Natürlich arbeitet Adobe XD mit Ebenen und Ebenenelementen. Eine große Website kann Hunderte von sich teilweise wiederholenden Elementen besitzen. Die sogenannten „kontextbezogenen Ebenen“ zeigen dabei dem Designer nur die aktuell relevanten Ebenen an und blenden den Rest aus. Im Grunde sorgt Adobe XD selbst für eine optimierte User Experience und vereinfacht dadurch die Arbeit für den Designer. Ein weiteres Beispiel ist die Möglichkeit, ganze Elemente in Symbole umzuwandeln und diese per Drag & Drop zu nutzen. Wiederkehrende Elemente einer Website, beispielsweise Logos oder Embleme, werden direkt von der Software in Symbole umgewandelt und können frei in der Website skaliert, ausgeschnitten und eingefügt werden.

Vorbei die Zeit, in der ein Designer die Website noch manuell programmieren und zum Testen auf einen Server laden musste. Adobe XD bietet interaktive Prototypen mit Verknüpfungen und erlaubt das rudimentäre Testen und Durchklicken einer Website ohne Upload oder Servertest. Dabei kann der grundlegende Aufbau der Site, das Wireframing, einfach und ohne großen Aufwand getestet werden. Adobe XD liefert auf diese Art interaktive Prototypen für wichtige Praxistests.

 

Besonderheiten: UI-Kits

Einer meiner persönlichen Favoriten sind die in Adobe XD verbauten UI-Kits. User Interface-Kits besitzen die charmante Fähigkeit, Websites sehr schnell komplett zerschießen zu können, vor allem bei mobilen Endgeräten. Eingabefenster, welche die Website verdecken, Firmenlogos, die auf dem iPhone plötzlich doppelt so groß dargestellt werden, oder Buttons, die plötzlich mit neongelbem Farbton das ganze Design der Website ruinieren. Diese UI-Kits sind an ein entsprechendes Gerät bzw. eine Plattform gebunden und müssen bei jeder Programmierung berücksichtigt werden. Adobe XD liefert diese UI-Kits bereits mit und bietet damit auf jeder Plattform das beste Ergebnis.

 

Echtzeittest auf allen Geräten

Einer meiner persönlichen Favoriten sind die in Adobe XD verbauten UI-Kits. User Interface-Kits besitzen die charmante Fähigkeit, Websites sehr schnell komplett zerschießen zu können, vor allem bei mobilen Endgeräten. Eingabefenster, welche die Website verdecken, Firmenlogos, die auf dem iPhone plötzlich doppelt so groß dargestellt werden, oder Buttons, die plötzlich mit neongelbem Farbton das ganze Design der Website ruinieren. Diese UI-Kits sind an ein entsprechendes Gerät bzw. eine Plattform gebunden und müssen bei jeder Programmierung berücksichtigt werden. Adobe XD liefert diese UI-Kits bereits mit und bietet damit auf jeder Plattform das beste Ergebnis.

 

Zeit und Geld sparen

Adobe XD ist das Tool, mit dem Sie Websites effektiv planen und designen können. Adobe hat hierzu über Jahre Kompetenz im Bereich Design aufgebaut und schenkt den Designern nun die Freiheit, Websites auch ohne die Unterstützung von Programmierern erstellen zu können. Mit Adobe XD werden Design und Konzeption auch ohne Kenntnisse in HTML, CSS oder JavaScript einfach und effektiv. Designer sprechen direkt mit ihren Kunden und kennen deren Anforderungen am besten. Daher ist es der einfachste Weg, wenn sie diese gemeinsame Vision auch direkt umsetzen können. Programmierer bringen ihre wertvolle Expertise im späteren Verlauf des Projekts ein und sorgen für einen reibungslosen Ablauf. Mit Adobe XD kann sich jeder auf seine Stärken konzentrieren – die stabile Basis für ein erfolgreiches Projekt und nicht zuletzt einen modernen Webauftritt.

 

Martin Krolop
#Martin Krolop

Martin Krolop

Fotograf

Fotografie ist unser täglicher Motor, und das nicht nur im Beruf, sondern auch drum herum in unserem täglichen Leben. Ausdruck, Kreativität und Expressionen können gezielt mit Fotografie gebündelt ausgegeben werden – und genau darin liegt die Faszination, Fotos zu machen. Nachdem wir schon unsere Fühler in jeden nur erdenklichen Bereich ansatzweise ausgestreckt haben, ist die People Photography (oder altdeutsch Menschenphotographie) unser absolutes Steckenpferd. In der Zusammenarbeit mit Mensch, Technik und Kreativität entstehen einzigartige Aufnahmen. Unnachahmlich aufgrund so vieler Details: sei es wegen des Faktors Mensch oder wegen des Aufeinandertreffens von allen Bildelementen. Als KROLOP UND GERST haben wir auch ein weiteres Traumduo eröffnet. Krolop und Gerst ergänzen sich und bilden eine Einheit. Um gegenseitige Schwächen und Stärken auszugleichen und einzusetzen. Sowohl charakterlich als auch menschlich fügen wir uns wie ein Reißverschluss zusammen und bilden damit den Grundstock für unser Wirken. Denn neben dem eigentlichen Fotografieren mit Passion und Lust ist unsere größte Leidenschaft unsere Erfahrung, Wissen und Meinung zu teilen. Mit anderen Fotografen oder denjenigen, die es werden wollen. Und gerade dadurch eröffnen sich ganz ungewöhnliche Sichtweisen und Blicke auf die Fotografie. Das Coaching coacht einen auch selbst … 🙂 Wir suchen immer wieder nach neuen Formen der Vermittlung von Lehrinhalten, so zum Beispiel mit unseren verschiedenen Liveformaten, die Interaktivität mit Aktualität verbinden.

Ganzen Artikel lesen