Designtools

Kuratiert von Profilbild von Martin Dellert Martin Dellert

Designprogramme

Prototypen

Mittels Software oder Webanwendung lassen sich Prototypen digitaler Produkte zur Planung, Realisierung und Optimierung von User Interface und User Experience kollaborativ umsetzen.

  1. Figma
    • Kostenlos
  2. Sketch
    • Kostenlos
  3. Adobe XD
    • Rabatt
  4. InVision Prototype
    • Teilw. kostenlos
  5. Marvel
    • Rabatt

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.

  1. Adobe Creative Cloud
    • Rabatt
  2. Affinity Suite

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.

  1. Adobe Illustrator
    • Rabatt
  2. Linearity
  3. Affinity Designer 2
  4. Procreate
  5. Provector
    • Kostenlos
  6. Inkscape
    • Kostenlos

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.

  1. Adobe Photoshop
    • Rabatt
  2. Pixelmator Pro
  3. Affinity Photo 2
  4. GIMP
    • Kostenlos

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.

  1. Canva
    • Teilw. kostenlos
  2. Adobe Express
    • Kostenlos
  3. Microsoft Designer
    • Kostenlos

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.

  1. Octopus
    • Rabatt
  2. Mindmeister
    • Rabatt
  3. Wireflow
    • Kostenlos

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.

  1. Heurio
    • Teilw. kostenlos
  2. Jam
    • Teilw. kostenlos
  3. Pastel
    • Teilw. kostenlos
  4. Volley
    • Teilw. kostenlos
  5. Beep!
    • Teilw. kostenlos

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.

  1. FigJam
    • Kostenlos
  2. Apple Freeform
    • Kostenlos
  3. Miro
    • Kostenlos
  4. Freehand by InVision
    • Teilw. kostenlos
  5. Mural
    • Teilw. kostenlos
  6. tldraw
    • Kostenlos
  7. Milanote
    • Teilw. kostenlos

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.

  1. Baymard Institute UX Research
    • Kostenlos
  2. Nielsen Norman Group Articles
    • Kostenlos
  3. IxDF Library of UX Design Resources
    • Kostenlos
  4. Built for Mars
    • Rabatt
  5. UX Magazine
    • Kostenlos
  6. Smashing Magazine
    • Kostenlos
  7. UX Collective
    • Teilw. kostenlos

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.

  1. Apple Design Resources
    • Kostenlos
  2. Design for Android
    • Kostenlos
  3. Microsoft Fluent Design System
    • Kostenlos

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.

  1. Bootstrap
    • Kostenlos
  2. Tailwind CSS
    • Kostenlos
  3. Shoelace
    • Kostenlos
  4. Preline UI
    • Kostenlos
  5. Bulma
    • Kostenlos
  6. HTML5 Boilerplate
    • Kostenlos

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.

  1. Design Principles
    • Kostenlos
  2. Apple Human Interface Guidelines
    • Kostenlos
  3. Microsoft Inclusive Design
    • Kostenlos
  4. Google Material Design
    • Kostenlos
  5. Laws of UX
    • Kostenlos
  6. Humane by Design
    • Kostenlos

Designratgeber

Verschiedene Webangebote sammeln Informationen zu verschiedenen Designthemen und -disziplinen und bereiten diese in besonderer Visualisierung zur Weiterbildung oder Inspiration auf.

  1. Paper Sizes
    • Kostenlos
  2. Dimensions
    • Teilw. kostenlos
  3. Checklist Design
    • Kostenlos
  4. The World’s Writing Systems
    • Kostenlos
  5. Design System Checklist
    • Kostenlos
  6. Redesigning Design Systems
    • Kostenlos

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.

  1. Adobe Color
    • Kostenlos
  2. Coloors
    • Teilw. kostenlos
  3. Atmos
    • Teilw. kostenlos
  4. Eva Design System
    • Kostenlos
  5. ColorSpace
    • Kostenlos
  6. Figma Color Wheel
    • Kostenlos
  7. ColorBox
    • Kostenlos

Farbverlauf-Generatoren

Zwischen Grundfarben lassen sich mittels Generatoren Farbverläufe erstellen und Farbzwischenschritte errechnen. Neben der Entscheidung zwischen radialer oder linearer Verlaufsform können Position, Rotation und Winkel entscheidende Kriterien sein, bei Farbzwischenschritten die Anzahl der Farben.

  1. Gradient Palette by Coloors
    • Teilw. kostenlos
  2. Gradient Generator by colordesigner.io
    • Kostenlos
  3. Gradient Maker by Coloors
    • Kostenlos
  4. Grabient
    • Kostenlos
  5. CSS Gradient
    • Kostenlos
  6. CSS Farbverlaufsgenerator
    • Kostenlos

Farbinspirationen

Aktuelle Farbtrends, Unternehmensfarben oder von Künstlicher Intelligenz generierte Farbschemata: Als Inspiration bei der Farbwahl können verschiedene Quellen dienen.

  1. BrandColors
    • Kostenlos
  2. Color Hunt
    • Kostenlos
  3. Colorsinspo
    • Kostenlos
  4. WebGradients
    • Kostenlos
  5. Palitra
    • Kostenlos

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.

  1. System Color Picker
    • Kostenlos
  2. Sip
    • Rabatt
  3. ColorSlurp
    • Teilw. kostenlos
  4. Image Picker by Coloors
    • Teilw. kostenlos

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.

  1. Accessible Brand Colors
    • Kostenlos
  2. Access Guide
    • Kostenlos
  3. Color review
    • Kostenlos
  4. Color & Contrast
    • Kostenlos
  5. Understanding Accessibility
    • Kostenlos

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.

  1. Unsplash
    • Teilw. kostenlos
  2. Pixabay
    • Kostenlos
  3. Pexels
    • Kostenlos
  4. Openverse
    • Kostenlos
  5. Wikimedia Commons
    • Kostenlos
  6. Burst von Shopify
    • Kostenlos
  7. Mixkit
    • Kostenlos
  8. FreePhotos
    • Kostenlos
  9. StockSnap
    • Kostenlos
  10. ISO Republic
    • Kostenlos
  11. UI Faces
    • Kostenlos
  12. nappy
    • Kostenlos
  13. Gratisography
    • Kostenlos
  14. Stock Up
    • Kostenlos

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.

  1. Adobe Stock
    • Rabatt
  2. iStock von Getty Images
  3. Shutterstock
  4. 123RF

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.

  1. Adobe Fonts
    • Rabatt
  2. Google Fonts
    • Kostenlos
  3. Fontshare
    • Kostenlos

Schriftenhersteller

Typografen und Typografie Studios bieten ihre Schriftarten zum Teil auch auf deren Webseite zum Download an. Neben individuellen Schriftarten kleinerer Designstudios ist die Installation weit verbreiteter Typografien, beispielsweise bekannter Betriebssystemen, empfehlenswert.

  1. Apple
    • Kostenlos
  2. The League Of Moveable Type
    • Teilw. kostenlos
  3. TypeType
    • Teilw. kostenlos
  4. Colophon Foundry
  5. Lineto
  6. Swiss Typefaces
    • Rabatt
  7. Letters from Sweden
  8. Pangram Pangram
    • Teilw. kostenlos

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.

  1. FontStand
    • Rabatt
  2. Future Fonts
  3. Fontspring
    • Teilw. kostenlos
  4. Type Network

Schriftkombinationen

Diverse Online-Tools können bei der Auswahl von Schriftarten und dem Kombinieren mehrerer unterstützen.

  1. Typewolf
    • Kostenlos
  2. Fontjoy
    • Kostenlos
  3. Typespiration
    • Kostenlos

Schriftratgeber

Mittels Online-Ratgeber zum Einsatz von Schriftarten lassen sich die eigenen Kenntnisse im Bereich Typografie erweitern.

  1. Letterform Online Archive
    • Kostenlos
  2. Type Scale
    • Teilw. kostenlos
  3. Kern Type
    • Kostenlos
  4. Typefacts
    • Kostenlos

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.

  1. Typeface
  2. Fontbase
    • Teilw. kostenlos
  3. RightFont
    • Rabatt

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.

  1. Font Awesome
    • Teilw. kostenlos
  2. Apple SF Symbols
    • Kostenlos
  3. Phosphor
    • Kostenlos
  4. Google Material Symbols and Icons
    • Kostenlos
  5. Simple Icons
    • Kostenlos
  6. uicons
    • Teilw. kostenlos
  7. Unicorn Icons
    • Kostenlos
  8. Iconoir
    • Kostenlos

Einzelne Icons & Zeichen

Sammlungen einzelner Icons und Sonderzeichen bieten die Möglichkeit, diese in verschiedenen Formaten herunterzuladen oder zu kopieren.

  1. Reshot
    • Kostenlos
  2. ZEICHEN.TV Eigenes Projekt
    • Kostenlos
  3. SVG Repo
    • Kostenlos
  4. Noun Project

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.

  1. Iconer
    • Kostenlos
  2. Iconstore
    • Kostenlos
  3. Streamline
    • Teilw. kostenlos

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.

  1. Iconset
  2. IconJar
  3. Nucleo App

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.

  1. Open Peeps
    • Kostenlos
  2. Humaaans
    • Kostenlos
  3. Storyset
    • Kostenlos
  4. unDraw
    • Kostenlos

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.

  1. Illustration.so
    • Kostenlos
  2. free illustrations
    • Kostenlos
  3. Drawkit
    • Teilw. kostenlos

Designinspiration

Webdesign & Landingpages

Kuratierte Webangebote aktueller Webdesign- und Landingpage-Umsetzungen bieten sich oftmals als besondere Inspirationsquelle für eigene Designentscheidungen im Webbereich an.

  1. Landingfolio
    • Teilw. kostenlos
  2. Godly
    • Kostenlos
  3. SaaS Landing Page
    • Kostenlos
  4. Awwwards
    • Kostenlos
  5. Webframe
    • Kostenlos
  6. Collected
    • Kostenlos
  7. Designmunk
    • Kostenlos
  8. Landings
    • Kostenlos

Userflows

Sammlungen von Userflows dokumentieren von existierenden App- und Webangeboten mittels Screenshots oder Videos deren Lösung von verschiedener Prozessen (z.B. Onboarding) oder Aktionen (z.B. Login).

  1. Screenlane
    • Kostenlos
  2. UXArchive
    • Kostenlos
  3. Mobbin
    • Rabatt
  4. Pageflows

Slidedecks & Keynotes

Kuratierte Sammlungen von Keynotes und Slidedecks können als Inspirationsquelle für Inhalt und Aufbau eigener Präsentationen dienen.

  1. Deck.Gallery
    • Kostenlos

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.

  1. Behance
    • Teilw. kostenlos
  2. Dribbble
    • Rabatt

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.

  1. Midjourney
    • Teilw. kostenlos
  2. DALL·E 3
    • Teilw. kostenlos
  3. Adobe Firefly
    • Teilw. kostenlos
  4. Stable Diffusion (Clipdrop)
    • Teilw. kostenlos
  5. Restore Photos
    • Kostenlos
  6. Microsoft Bing Image Creator (DALL·E 3)
    • Kostenlos
  7. Exactly
    • Teilw. kostenlos
  8. Imagine with Meta AI
    • Kostenlos

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.

  1. Github Copilot
  2. v0 by Vercel
    • Teilw. kostenlos

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.

  1. draw my ui
    • Kostenlos
  2. Uizward

Webseiten erstellen

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.

  1. Microsoft Visual Studio Code
    • Kostenlos
  2. Panic Nova
  3. Sublime Text
  4. Adobe Dreamweaver
    • Rabatt

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.

  1. Shopify
  2. Webflow
    • Teilw. kostenlos
  3. Wix
    • Teilw. kostenlos
  4. Carrd
    • Teilw. kostenlos
  5. Readymag
    • Rabatt
  6. Framer
    • Teilw. kostenlos

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.

  1. WordPress
    • Kostenlos
  2. Kirby
  3. Drupal
    • Kostenlos
  4. Joomla
    • Kostenlos
  5. TYPO3
    • Kostenlos

HTML-Ressourcen

Bei der Erstellung von HTML-Dateien können Verzeichnisse und Informationsquellen die Umsetzung und Fehlervermeidung unterstützen.

  1. W3C Markup Validation Service
    • Kostenlos
  2. W3Schools HTML References
    • Kostenlos
  3. Can I use
    • Kostenlos
  4. SELFHTML
    • Kostenlos

CSS-Ressourcen

Beim Anlegen von Gestaltungsanweisungen für Webseiten in sogenannten Cascading Style Sheets können einige Tools und Informationen behilflich sein.

  1. W3C CSS Validation Service
    • Kostenlos
  2. W3Schools CSS References
    • Kostenlos
  3. CSS-Tricks
    • Kostenlos