Designprogramme
Prototypen
Mittels Software oder Webanwendung lassen sich Prototypen digitaler Produkte zur Planung, Realisierung und Optimierung von User Interface und User Experience kollaborativ umsetzen.
Template-basierte Gestaltung
Durch den Einsatz von Templates und vorgefertigten Elementen lassen sich zügig visuelle Ergebnisse realisieren. In professionellen Designprozessen können diese vorrangig bei der ersten Ideenfindung und -visualisierung sinnvoll eingesetzt werden.
Designsuiten
Designsuiten bieten gebündelt eine Vielzahl an Programmen zu unterschiedlichen Designdisziplinen wie beispielsweise Foto-, Text- oder Grafikbearbeitung an. Dabei lassen sich zumeist leicht einzelne Designelemente zwischen den Programmen verschieben und dort weiterbearbeiten.
Illustrations- & Grafikdesign
Designprogramme mit Fokus auf Illustrationen und Grafiken ermöglichen das größtenteils vektorbasierte Erstellen und Bearbeiten neuer oder bestehender digitaler Medien am Desktop oder Tablet.
Fotobearbeitung
Mittels Bildbearbeitungsprogrammen lassen sich auf Rasterbasis Bilder jeglicher Art, vorrangig Fotografien aber auch Grafiken oder Zeichnungen, teilweise unterstützt von künstlicher Intelligenz, manipulieren und optimieren.
User Experience (UX)
Informationsarchitektur & Userflows
Mittels Mapping-Software lässt sich das Grundgerüst eines digitalen Angebotes, dessen struktureller Aufbau und Zusammenhang der Unterseiten bestmöglich planen, um dem Nutzer eine intuitive Bedienung bis hin zur Zielerreichung ohne ungewünschte Abzweigungen zu ermöglichen.
Visuelle Feedback-Tools
Mittels visuellem Feedback-Tool, zumeist als Browser-Extension umgesetzt, lassen sich Anmerkungen und Rückmeldungen zu Design- und Funktionsentscheidungen auf Webseiten kollaborativ festhalten. Dies kann dabei für internes, als auch für User Feedback genutzt werden.
Whiteboards
Whiteboards werden als kollaboratives Online-Tool für eine Vielzahl an Disziplinen im Designprozess angewendet. Die eingeschränkten Formatierungsmöglichkeiten sowie verfügbare Vorlagen lassen Anwender sich schnell auf die inhaltlichen Fragen fokussieren.
Artikel & Publikationen
Aktuelle Artikel und Publikationen zum Thema User Experience sind eine wertvolle Ressource zur eigenen Fortbildung. Sie können zudem im Designprozess die Optimierung digitaler Produkte, speziell bei eigenen Gestaltungsentscheidungen, unterstützen.
Designvorlagen
User Interface
Vorlagen, insbesondere User Interface Kits (UI-Kits) für verschiedene Endgeräte sowie Betriebssysteme und -versionen, können den Designprozess konsistenter Oberflächengestaltung unterstützen.
- Apple Design Resources
- Apples Figma Design Resources
- Design for Android
- Microsoft Fluent Design System
Frontend
Frontend-Frameworks können – vorrangig im Bereich des Webdesigns – als Gestaltungsgrundlage zur schnelleren Projektrealisierung dienen. Diese lassen sich zumeist in einem vordefinierten Rahmen anhand eigener Designentscheidungen individualisieren.
Guidelines
Richtlinien zur Gestaltung in bestehenden Designsystemen können die Entscheidungsfindung im Designprozess erleichtern und gleichzeitig eine konsistente Gestaltung gewährleisten. Zudem können fremde Designprinzipien bei der Erarbeitung eines eigenen Systems inspirieren.
- Design Principles
- Apple Human Interface Guidelines
- Microsoft Inclusive Design
- Google Material Design
- Laws of UX
- Humane by Design
Designratgeber
Verschiedene Webangebote sammeln Informationen zu verschiedenen Designthemen und -disziplinen und bereiten diese in besonderer Visualisierung zur Weiterbildung oder Inspiration auf.
Farbpaletten
Farbpaletten-Generatoren
Mittels Generatoren, verfügbar als Webanwendungen oder Software-Plugins, lassen sich auf Basis einer oder mehrerer festgelegter Grundfarben eigene Farbkombinationen und -harmonien erstellen. Hierbei können verschiedene Farbsysteme bzw. -kreise als Basis dienen.
Farbverlauf- & Farbstufen-Generatoren
Zwischen zumeist zwei Grundfarben lassen sich mittels Generatoren Farbverläufe bzw. Farbabstufungen erstellen und Farbzwischenschritte errechnen.
- Gradient Palette by Coloors
- Gradient Generator by colordesigner.io
- Gradient Maker by Coloors
- Radix Colors Custom Palette
- Grabient
- CSS Gradient
- CSS Farbverlaufsgenerator
Farbinspirationen
Aktuelle Farbtrends, Unternehmensfarben oder von Künstlicher Intelligenz generierte Farbschemata: Als Inspiration bei der Farbwahl können verschiedene Quellen dienen.
Colorpicker
Das Farbpipette-Werkzeug als App- oder Webanwendung kann aus verschiedenen Medien den exakten Farbcode eines Pixels definieren. Installierte Colorpicker-Apps bieten zudem den Vorteil, systemweit eingesetzt werden zu können.
Barrierefreiheit & Kontrast
Im Bereich der visuellen Barrierefreiheit von digitalen Produkten spielen Farbe und Kontrast eine entscheidende Rolle, wobei anderen Aspekten der Barrierefreiheit, beispielsweise strukturellen, inhaltlichen oder funktionalen, keine verminderte Rolle zugeschrieben werden darf.
Stockfotos
Lizenzfreie Stockbilder
Kostenfreie Stockfotos werden zumeist als lizenzfreies Material angeboten, sodass diese ohne Einschränkungen oder Zahlung genutzt werden dürfen. Die Lizenzvereinbarung kann jedoch beispielsweise eine kommerzielle Nutzung oder Weiterverbreitung ausschließen oder eine Autorennennung erfordern.
- Unsplash
- Lummi
- Pixabay
- Pexels
- Openverse
- Wikimedia Commons
- Burst von Shopify
- Mixkit
- FreePhotos
- StockSnap
- ISO Republic
- UI Faces
- nappy
- Gratisography
- Stock Up
Kostenpflichtige Stockbilder
Premium-Stockbilder sind Fotos oder Grafiken, für deren Nutzung die Zahlung einer Nutzungsgebühr erforderlich ist. Die Höhe dieser variiert zumeist laut Lizenzvereinbarung abhängig von Medium, Auflösung und Verwendung.
Mockups
Schriftarten
Schriftsammlungen
Schriftsammlungen bieten Zugriff auf zumeist umfassende Bibliotheken an Schriftarten. Die einzelnen Fonts dürfen vorrangig unter einer allgemein gültigen Lizenzvereinbarung verwendet werden.
Fontshops
Mittels Onlineshops für Schriftarten lassen sich Fonts verschiedener Schriftenhersteller unter Beachtung jeweiliger Lizenzvereinbarungen zumeist kostenpflichtig beziehen. Neben Festpreisen kann die Lizenzgebühr bspw. anhand Unternehmensgröße, Einsatzgebiet oder Auflage bzw. Pageviews variieren.
Schriftkombinationen
Diverse Online-Tools können bei der Auswahl von Schriftarten und dem Kombinieren mehrerer unterstützen.
Schriftratgeber
Mittels Online-Ratgeber zum Einsatz von Schriftarten lassen sich die eigenen Kenntnisse im Bereich Typografie erweitern.
Font Manager
Font Manager ermöglichen das professionelle Organisieren und Pflegen von installierten Schriftarten, teilweise auch geräteübergreifend. Zudem bieten diese oftmals eine umfangreiche Vorschau der Schriften an, was bei der Schriftwahl hilfreich sein kann.
Icons & Zeichen
Iconsets
Grafische Symbole, die eine in sich konsistente Gestaltung aufweisen, werden oftmals als Iconsets zur Verfügung gestellt. Diese können themenspezifisch zusammengestellt sein oder das Ziel verfolgen, alle notwendigen Inhalte abzudecken.
- Font Awesome
- Apple SF Symbols
- Phosphor
- Google Material Symbols and Icons
- Simple Icons
- uicons
- Unicorn Icons
- Iconoir
- Animated Icons
Einzelne Icons & Zeichen
Sammlungen einzelner Icons und Sonderzeichen bieten die Möglichkeit, diese in verschiedenen Formaten herunterzuladen oder zu kopieren.
Sammlungen von Iconsets
Für die Auswahl des richtigen Iconsets kann es hilfreich sein, verschiedene Iconsets zu vergleichen. Hierbei können Sammlungen von Iconsets herangezogen werden, durch die eine inhaltliche und gestalterische Abwägung möglich wird.
Icon Manager
Mittels Icon Manager können verwendete Icons in Form von Verzeichnissen organisiert und gepflegt werden. Zudem bieten diese oftmals Such-, Filter- und Vorschaufunktionen an, die die Auswahl der richtigen Icons vereinfachen können.
Illustrationen
Illustrationssets
Illustrationen, mit konsistentem Illustrationsstil und meist von einem Künstler gestaltet, werden oftmals als Illustrationssets zur Verfügung gestellt. Vorrangig behandeln diese ein Themengebiet oder dienen einem Anwendungszweck.
Sammlungen von Illustrationssets
Webangebote kuratieren fortlaufend verfügbare Illustrationssets in Sammlungen, durch die es erleichtert werden kann, das geeignete Set für ein Projekt oder eine Unternehmung zu wählen.
Designinspiration
Webdesign & Landingpages
Kuratierte Webangebote aktueller Webdesign- und Landingpage-Umsetzungen bieten sich oftmals als besondere Inspirationsquelle für eigene Designentscheidungen im Webbereich an.
- Landingfolio
- Godly
- Webframe
- Collected
- Dead Simple Sites
- Storefront Design
- Designmunk
- Landings
- httpster
- SaaS Landing Page
- Awwwards
Userflows & Interactions
Sammlungen von Userflows und Interaktionsschritten dokumentieren von existierenden App- und Webangeboten mittels Screenshots oder Videos deren Lösung von verschiedener Prozessen (z.B. Onboarding) oder Aktionen (z.B. Login).
Slidedecks & Keynotes
Kuratierte Sammlungen von Keynotes und Slidedecks können als Inspirationsquelle für Inhalt und Aufbau eigener Präsentationen dienen.
Branding & Logos
Als Inspiration zur eigenen Umsetzung können Verzeichnisse mit den Themenschwerpunkten Rebrand, Branding und Logogestaltung helfen — sowohl von unabhängigen Kuratoren als auch von Designbüros.
- Logggos
- Brand New
- Branding Style Guidelines
- Chermayeff & Geismar & Haviv
- Identity Designed
- Rebrand Gallery
- Brand Archive
- Logos by BP&O
- Logo Histories
Designcommunities
Mittels Sozialen Netzwerken, bei denen Nutzer ihre kreative Arbeiten und Portfolios präsentieren, können aktuelle Trends erkannt und Inspiration für eigene Designentscheidungen gewonnen werden. Zudem kann zu anderen Designern in Kontakt getreten und ein Netzwerk aufgebaut werden.
Artificial Intelligence (AI)
Bilder generieren & optimieren
Mittels künstlicher Intelligenz (KI) lassen sich textbasiert Bilder generieren sowie bestehende Bilder bearbeiten oder optimieren. Dies wird zumeist als Webangebot oder App-Plugin zur Verfügung gestellt.
- Midjourney
- DALL·E 3
- Adobe Firefly
- Stable Diffusion (Clipdrop)
- Restore Photos
- Microsoft Bing Image Creator (DALL·E 3)
- Exactly
Programmierassistenten
Cloudbasierte Anwendungen auf Basis künstlicher Intelligenz (KI) können den Entwicklungsprozess durch automatische Code-Vervollständigung unterstützen. Zudem können einzelne Elemente oder vollständige Angebote durch die KI programmiert werden.
Gestaltungsassistenten
Mittels KI-basierter Assistenten können von einzelnen Gestaltungselementen bis hin zu ganzen digitalen Angeboten diese automatisch weiter- bzw. ausgestaltet, vollständig grafisch oder prototypisch realisiert werden.
Webseiten erstellen
Shop- & Baukastensysteme
Homepage- und Shop-Baukastensysteme ermöglichen das Erstellen von Onlineangeboten mittels Drag&Drop und ohne Programmierkenntnisse. Aufgrund der beschränkten Funktionalität und fehlender Export- und Erweiterungsmöglichkeiten ist die richtige Systemwahl frühzeitig elementar.
Content Management Systeme (CMS)
Mittels CMS lassen sich heute nicht mehr nur Inhalte von Websites pflegen und bearbeiten, sondern ganze Webseiten und Shops auf dem eigenen Server realisieren. Dabei kann Gestaltung und Funktion durch teilweise kostenpflichtige Themes und Plugins flexibel verändert werden.
HTML- & CSS-Ressourcen
Bei der Erstellung von HTML- und CSS-Dateien können Verzeichnisse und Informationsquellen die Umsetzung, Optimierung und Fehlervermeidung unterstützen.
- Can I use
- W3C CSS Validation Service
- W3C Markup Validation Service
- CSS-Tricks
- W3Schools HTML References
- W3Schools CSS References
- SELFHTML
Suchmaschinenoptimierung (SEO)
Die Suchmaschinenoptimierung von Webseiten, sowohl Onpage als auch Offpage, können verschiedene Tools unterstützen. Dabei variieren Mehrwert und Preis der Tools enorm. Die hier aufgezeigten Angebote sind primär kostenlos oder kostengünstig.
Code-Editoren
Mittels Texteditor, der für die Bearbeitung von Quellcodes entwickelt wurde, werden Anwender bei der Entwicklung von digitalen Produkten unterstützt. Ein wesentliches Bestandteil ist hierbei das Syntax-Highlighting von verschiedenen Programmiersprachen.