AI im UI-Designprozess und in der Frontend-Entwicklung

- Zur├╝ck zur ├ťbersicht

Kreative AI-Tools zur Erstellung von Grafiken basierend auf Textbeschreibungen, wie in etwa Midjourney, kennen bereits viele. Doch auch im Bereich UI / UX-Design hat die Verwendung von AI-Tools bereits Einzug gehalten.

 

Viele dieser auf machine learning basierten Werkzeuge kann man sich wie eine:n Assistent:in vorstellen, der / die einem w├Ąhrend des Designprozesses zur Seite steht und die Arbeit verk├╝rzt. 

Einige dieser n├╝tzlichen Helferlein werden wir euch in diesem Blogbeitrag vorstellen.

 

Komm mit mir auf eine Reise

ÔÇŽund lass uns einen Designprozess durchspielen.

1. Vom Brainstorming zum Mockup

Stell dir vor, du befindest dich mit deinem Team in einem Planungsmeeting f├╝r die Frontend-Gestaltung eines neuen Onlineshops. Ihr skizziert Wireframes auf einem Whiteboard und es entstehen schnell einige gute Ideen, wie einzelne Elemente angeordnet werden sollen, um den User:innen ein m├Âglichst angenehmes Shoppingerlebnis zu bieten.

Das Meeting ist zu Ende, doch die Wireframes bleiben. Und zwar am Whiteboard. W├Ąhrend du bislang vermutlich Fotos der Skizzen gemacht hast, um die entworfenen Wireframes sp├Ąter m├╝hselig in Programmen wie Figma oder Sketch nachzubauen, kann hier mittlerweile eine k├╝nstliche Intelligenz ├╝bernehmen und so einige Arbeitsstunden einsparen. Dabei ├╝bernimmt die KI nicht nur deine skizzierten Wireframes, sondern entwirft auch gleich einen Design Prototypen, basierend auf eben diesen. 

M├Âglich machen das Programme wie zB uizard oder Sketch2Code von Microsoft AI Labs. Alles, was es dazu braucht, ist das bereits gemachte Foto deiner Wireframes. Dieses kann bei uizard einfach hochgeladen werden. Der machine learning Algorithmus erkennt die einzelnen Elemente deines Entwurfs und erzeugt daraus automatisch ein editierbares Design Mockup. Als Designer kannst du dieses Mockup im Anschluss direkt in uizard weiter bearbeiten oder aber auch f├╝r Sketch exportieren.

2. Vom Mockup zum Design Prototypen

Im n├Ąchsten Schritt geht es nat├╝rlich darum, das Mockup in ein fertiges Design und einen Prototypen zu verwandeln. Eine H├╝rde, die hierbei auftauchen kann, ist folgende: 

Dein:e Kund:in hat keine definierte CI oder im CD-Manual sind nur ein paar wenige Farben definiert. F├╝r ein harmonisches Design begibt man sich also schlie├člich auf die Suche nach komplement├Ąren Farben, die das Bild abrunden. Um sich nicht stundenlang durch empfohlene Farbpaletten klicken zu m├╝ssen und nach Inspiration zu suchen, kann auch dieser Schritt des Designprozesses mithilfe von AI optimiert werden. Der zur Rettung schreitende Assistent hierf├╝r nennt sich Khroma. Er analysiert bestehende Farben, lernt Pr├Ąferenzen und erstellt daraus stimmige Farbpaletten.

 

3. Vom Design Prototypen zum getesteten Design

Von der Erstellung des Wireframes bis hin zum fertigen Design hast du jetzt schon ordentlich Zeit gespart. Nun willst du das Design aber nat├╝rlich auch testen. Welche Elemente fallen den User:innen als erstes ins Auge und nehmen sie jene Buttons und Texte, auf die du ihre Aufmerksamkeit lenken willst, auch wie gewollt wahr? 

Wie du mittlerweile vielleicht schon ahnst: auch daf├╝r gibt es ein AI-Werkzeug, das dich in deiner Arbeit unterst├╝tzt. Tools, wie zB VisualEyes, zeigen dir auf, welche Elemente einer Landingpage oder PDP ein:e Nutzer:in als Erstes wahrnimmt. Das Programm simuliert sehr akkurat das Verhalten eines / einer echten User:in und wertet mithilfe einer "Attention Heatmap" aus, welche Designelemente vom / von der Nutzer:in als wichtig wahrgenommen werden. 

 

Au├čerdem stellt der Hersteller Plugins f├╝r alle g├Ąngigen UX / UI Programme bereit, sodass du dein Design anhand der gewonnenen Erkenntnisse direkt weiter optimieren und finalisieren kannst.

4. Vom fertigen Design zum HTML Dummy

Mit dem fertigen Design ist es oft noch nicht getan. Wenn der Wunsch nach einem HTML Dummy aufkommt, kann das einen ziemlich gro├čen Zeitaufwand bedeuten. Um diesen Arbeitsaufwand zu minimieren, kann man auch hierf├╝r ein AI-basiertes Tool zur Unterst├╝tzung heranziehen. Fronty kann dein Design analysieren und einen darauf aufbauenden HTML Dummy erzeugen. Dieser enth├Ąlt nicht nur den HTML Code, sondern auch das gesamte CSS und ein einfaches Javascript. 

Fazit

Mit der Hilfe diverser KI-Tools lassen sich viele Prozesse im UI / UX Design und der Frontend-Entwicklung stark vereinfachen oder sogar vollst├Ąndig automatisieren. Das spart nicht nur dir als Entwickler:in oder Designer:in Zeit, sondern bedeutet am Ende des Tages auch f├╝r deine Kund:innen einen Benefit - n├Ąmlich geringere Kosten durch die effizientere Arbeitsweise

Nat├╝rlich ist keines dieser Tools kostenlos, doch die meisten bieten eine gratis Testversion an. Ob die Zeitersparnis tats├Ąchlich f├╝r die kostenpflichtige Variante steht, muss individuell abgesch├Ątzt werden.

4 Tools, von denen ein:e UI / UX Designer:in profitieren kann:

  1. uizard oder Sketch2Code f├╝r Mockups
  2. Khroma f├╝r Design Prototypen
  3. VisualEyes f├╝r Design-Testing
  4. Fronty f├╝r HTML Dummies

Etwas Recherche lohnt sich aber immer, denn besonders im kreativen Bereich gibt es im Moment st├Ąndig neue AI-Tools und -Programme, die dich bei der Automatisierung einiger deiner Arbeitsabl├Ąufe unterst├╝tzen. Und das wird vermutlich auch in naher Zukunft noch so bleiben.

Du brauchst Unterst├╝tzung im Designprozess oder willst mehr dazu erfahren, wie k├╝nstliche Intelligenz im UI- / UX-Design oder in der Frontend Entwicklung eingesetzt werden kann?