7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. UI Design

UI-Design in 60 Sekunden

Scroll to top
Read Time: 1 min

German (Deutsch) translation by Marta Basque (you can also view the original English article)

"UI" steht für "User Interface", eine Art und Weise, wie Benutzer mit etwas interagieren können. Da jede Website eine Benutzeroberfläche ist, ist "UI Design" der Kern des Webdesigns.

Was genau ist UI-Design?

"UI" ist nicht zu verwechseln mit "UX", das für "User Experience" steht. Die Schaffung einer guten UX ist das Ziel des UI-Designs.

Um eine gute Benutzeroberfläche zu erstellen, sollte also zunächst ein UX-Plan erstellt werden, der idealerweise mit Wireframes illustriert wird.

A wireframeA wireframeA wireframe
Die Low-Fidelity-Stufe des Drahtmodells

Von dort aus können Sie mit der Gestaltung einer Benutzeroberfläche beginnen, die die UX in die Realität umsetzt. Beginnen Sie damit, den Wireframe mit Typografie und monochromen Farben auszufüllen, um sicherzustellen, dass alles lesbar und zugänglich ist.

Fleshed out in monochromeFleshed out in monochromeFleshed out in monochrome
In Schwarzweiß ausgearbeitet

Fügen Sie dann Farbe und Bilder hinzu und verwenden Sie hellere Farben, um wichtige UX-Bereiche hervorzuheben. Dies ist der Zeitpunkt, an dem das Branding implementiert werden sollte, einschließlich der Integration von Logos und Unternehmensfarben.

With color and brandingWith color and brandingWith color and branding
Mit Farbe und Branding

Bemühen Sie sich um einen visuellen Stil, der mit der Art der Nutzer der Website in Verbindung gebracht werden kann. Stellen Sie sicher, dass Sie ein Layout haben, das auf alle möglichen Bildschirmgrößen reagieren kann, und ein Mittel zur Interaktion, das alle möglichen Geräte berücksichtigt.

Und das ist UI Design in sechzig Sekunden!

Nützliche Links

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.