kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Visual Design & UX


Sketch-Tipp: Einzelne Ecken abrunden

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.

Beitrag zu Ende lesen

Prototyping im Web Design – welche Arten von Prototypen gibt es?

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.

Beitrag zu Ende lesen

Websites erwartungskonform gestalten und konzipieren

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.

Beitrag zu Ende lesen

Adobe XD – Einstieg und Praxis-Tipps

Adobe XD ist ein Programm für UX- und Interface-Designer. Mit XD können einzelne Screens im sog. »Design Mode« gestaltet und anschließend im »Prototype Mode« miteinander verknüpft werden. Somit lässt sich das Verhalten der finalen Anwendung in Form eines visuellen Clickdummies simulieren. Das Ergebnis kann anschließend als Video gespeichert oder in die Adobe-Cloud exportiert werden.

Das offizielle deutschsprachige Benutzerhandbuch ist sehr gut und soll hier nicht wiederholt werden. Wir möchten in übersichtlicher Form typische Anwendungsfälle schildern, sowie häufige Fragen unserer Seminar-Teilnehmer klären.

Beitrag zu Ende lesen

Sketch: Standard-Styling für Ebenen und Formen ändern

Das Design-Tool Sketch hat eine große Fangemeinde, die u.a. auch die hohe Geschwindigkeit bei der Erstellung von Grafiken und Layouts schätzt. Doch auch wenn Sketch grundsätzlich ein schnelles und effizientes Arbeiten unterstützt, sind nicht alle Voreinstellungen praktisch gewählt. Zeichnet man beispielsweise eine neue Form (Shape), vergibt Sketch automatisch eine hellgraue Füllfarbe und eine dunkelgraue 1px starke Kontur. Das ist häufig unerwünscht und muss manuell geändert werden. Doch ihr könnt auch eigene Voreinstellungen für das Styling neuer Formen festlegen.

Beitrag zu Ende lesen

Textausrichtung mit CSS: Text von oben nach unten bzw. von rechts nach links schreiben

Die Ausrichtung von Text auf einer Website kann kompliziert werden, beispielsweise wenn rechtslaufende Sprachen wie Arabisch abgebildet werden sollen oder wenn aus gestalterischer Sicht Text von oben nach unten laufen soll. Wir geben euch in diesem Beitrag eine Übersicht über die verschiedenen CSS-Techniken zum Ausrichten und zum Positionieren von Text.

Beitrag zu Ende lesen

CSS Text Decoration Styling – Farbig unterstrichene Texte, Unterbrechungen bei Unterlängen, Effekte für Linien usw.

Links werden in HTML automatisch unterstrichen dargestellt. Ein unterstrichenes Wort auf einer Website wird daher vom Anwender intuitiv als Hyperlink interpretiert – weshalb man das Gestaltungsmittel der Unterstreichung bewusst einsetzen sollte. Der CSS-Befehl text-decoration:underline; sorgt dafür, dass ein Text unterstrichen wird. Wenn mehr gestalterische Freiheit gewünscht war, haben Designer häufig border-bottom eingesetzt. Das CSS Text Decoration Module Level 3 erweitert die Möglichkeiten von text-decoration um Farben, Abstände und Effekte.

Beitrag zu Ende lesen