Für einige Projekte gibt es die Anforderung, exakt auf Grundlage des Bootstrap-Grids zu layouten. Das Gestaltungsraster von Bootstrap 4+ basiert auf fünf Viewportgrößen/Breakpoints mit jeweils 12 Spalten. Wir haben uns eine Vorlage für Adobe XD erstellt, die den schnellen Einstieg ins Projekt vereinfachen soll.
Die sog. Symbole von Sketch ermöglichen es Objekte oder Objektgruppen an zentraler Stelle abzulegen und beliebig oft im Dokument zu verwenden. Wird später das original Symbol gestalterisch angepasst, aktualisieren sich automatisch alle Instanzen des Symbols.
Mit den sog. Overrides von Sketch können Inhalte wie Bilder oder Texte in Symbolen überschrieben werden. Wir zeigen anhand eines einfachen Beispiels wie Overrides funktionieren.
Sketch-Dokumente mit vielen Symbolen können schnell unübersichtlich werden. Doch mit korrekt benannten Symbolen können in Sketch Orderstrukturen angelegt werden, die es ermöglichen Symbole zu gruppieren und somit wieder etwas Ordnung herzustellen.
Objekte mit abgerundeten Ecken lassen sich in Sketch sehr unkompliziert herstellen. Nachdem die geometrische Grundform – z. B. ein Rechteck – gezeichnet wurde, steht rechts in dein Einstellungen ein Regler für den Radius der Eckenabrundung zur Verfügung. Bedauerlicherweise steuert die Einstellung jedoch den Radius aller Ecken des Objekts. Direkt ersichtliche Eingabefelder für einzelne Eckpunkte gibt es nicht. Dennoch ist es in Sketch problemlos möglich den Radius für jede Ecke einzeln anzugeben.
Wenn Web-Projekte nach modernen Workflow-Konzepten realisiert werden, stehen die späteren Benutzer im Zentrum aller Überlegungen. Interaktive Prototypen werden in diesem Zusammenhang immer wichtiger, um das entstehende Produkt möglichst früh und regelmäßig auf das Erreichen der gesteckten Ziele zu überprüfen. Bei umfangreichen Projekten helfen Prototypen zudem dabei den Gesamtumfang im Blick zu behalten.
Es gibt zahlreiche Arten, Prototypen umzusetzen – alle haben Vor- und Nachteile. Grob lassen sich drei Gruppen bilden: analoge, digitale und native Prototypen. Sie unterscheiden sich in Zielsetzung, Anwendbarkeit im Projektverlauf und der Qualität der Ausgestaltung.
Websites sind u.a. erfolgreich, wenn die Erwartungshaltung der Besucher bedient wird. Es muss vermieden werden, dass Besucher darüber nachdenken müssen wie etwas funktioniert oder wo der gewünschte Inhalt positioniert ist. Nutzer erwarten eine bestimmte Anordnung und ein bestimmtes Verhalten wesentlicher Website-Elemente. Berücksichtigen wir diese Erwartungen beim Gestalten von Websites, erleichtern wir den Besuchern sich mit den wirklich wichtigen Informationen zu beschäftigen. Wir geben einen schnellen Überblick über die wichtigsten Aspekte.
Die Begriffe Modal, Dialog, Lightbox, PopUp usw. werden häufig nicht trennscharf verwendet. Doch es gibt klare Unterschiede wann ein Dialog modal …
Beitrag zu Ende lesenDie Benennung von Komponenten kann zu den schwierigsten Aufgaben bei der Entwicklung von Design Systemen und Component Libraries gehören. Ziel …
Beitrag zu Ende lesenMit der CSS-Eigenschaft »hyphens« wird die Gestaltung von typografisch ansprechenden Texten im Web deutlich vereinfacht. Lange Zeit wurde das Thema …
Beitrag zu Ende lesenDie nativen Formular-Elemente von HTML werden in verschiedenen Browsern und Betriebssystem sehr unterschiedlich dargestellt und bedient. Das widerspricht häufig der …
Beitrag zu Ende lesenEine der bekanntesten Regeln für eine gelungene Navigation auf Websites ist die sog. 3-Klick-Regel. Diese besagt, dass alle Unterseiten mit …
Beitrag zu Ende lesenPlatzersparnis und erprobte Funktionalität, das sind in Formularen die vermeintlich größten Vorteile von Dropdowns oder Select-Elementen. Besonders im mobilen Kontext verursachen …
Beitrag zu Ende lesen