kulturbanause Blog

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

Visual Design & UX


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

Einstieg in Sketch

Icon Sketch App

Das Grafikprogramm Sketch erfreut sich bei UX-, UI-, App-, und Webdesignern größter Beliebtheit. Sketch deckt die Bedürfnisse von Interface-Designern perfekt ab und bietet spezialisierte Funktionen, die es in anderen Programmen so nicht gibt. Insbesondere die Arbeit mit Design-Systemen, fluiden Layouts und Prototypen wird dank Sketch spürbar erleichtert. Darüber hinaus lässt sich das Programm dank zahlreicher Plugins flexibel erweitern.

In diesem Beitrag beschreiben wir die wichtigsten Funktionen, schildern typische Anwendungsfälle und klären die häufigsten Fragen unserer Schulungsteilnehmer um euch den Einstieg in das Programm zu erleichtern. Es lohnt sich dennoch zusätzlich die kurzweilige, offizielle Dokumentation zu lesen.

Beitrag zu Ende lesen

Automatische CSS Initialen (Drop Caps)

Eine Initiale dient im Print- und Webdesign nicht nur als Zierelement – sie kann auch die Lesbarkeit von Texten erheblich verbessern, da sie den Blick des Lesers führt. Wir zeigen euch in diesem Beitrag wie ihr mit dem CSS Pseudoelement :first-letter eine automatische Initiale für eure Website gestalten könnt.

Beitrag zu Ende lesen