Video-Training »Modernes Webdesign mit Jonas Hellwig«

Modernes Webdesign mit Jonas Hellwig

In den vergangenen Jahren haben sich sowohl die Konzeption als auch die Gestaltung und die technische Umsetzung von Websites stark verändert. Themen wie responsive Design, Prototyping, flexible Rastersysteme und modulares Design haben einen sehr hohen Stellenwert eingenommen. Die Grenze zwischen Gestaltung und Technik ist größtenteils aufgelöst. Ich freue mich daher sehr, euch mein neues Video-Training mit dem Titel »Modernes Webdesign mit Jonas Hellwig« vorstellen zu dürfen. Die DVD ist ab sofort im Buchhandel, sowie bei Amazon erhältlich.

Demo-Videos und Inhaltsverzeichnis

Farben mit Sass verändern

sass-color-functions

Eine Website basiert normalerweise auf einem durchdachten Farbschema und einigen Farbabstufungen innerhalb der jeweiligen Farbe. Sass bietet umfangreiche Möglichkeiten, Farben zu manipulieren. Wenn der Sass-Code entsprechend vorbereitet wurde, ist es sogar möglich ein Design mit nur einer Variable komplett umzufärben – inkl. Helligkeitsabstufungen, Komplementärfarben etc.

Beitrag zu Ende lesen

Website-Inhalte per WhatsApp-Nachricht empfehlen – WhatsApp URL Scheme

WhatsApp Icon

Der Instant-Messaging-Dienst WhatsApp erfreut sich größter Beliebtheit und wird wahrscheinlich von den meisten von euch eingesetzt. Mit Hilfe des sog. »URL Schemes« von WhatsApp kann eine Nachricht erzeugt und anschließend manuell versendet werden. Es ist also möglich einen Button in die Website zu integrieren, über den der Link zum aktuellen Beitrag über WhatsApp verschickt werden kann. In diesem Beitrag erfahrt ihr, wie ihr das URL Scheme von WhatsApp einsetzen könnt, und welche Einschränkungen es gibt.

Beitrag zu Ende lesen

Repeating Gradients – sich wiederholende CSS-Verläufe

css-repeating-gradients

Mit Hilfe von CSS-Verläufen lassen sich erstaunliche Effekte erzeugen. Es ist beispielsweise möglich Oberflächen zu simulieren oder Plastizität zu erzeugen. Mit sich wiederholenden Verläufen (Repeating Gradients) stehen darüber hinaus noch deutlich komplexere Gestaltungsmöglichkeiten zur Verfügung. Es lassen sich u.a. komplexe Muster erzeugen.

Beitrag zu Ende lesen

Sass mit Hilfe von Apps installieren und einrichten

sass-logo

Es existieren verschiedene Desktop-Anwendungen um Ruby und/oder Sass zu installieren, ohne dabei den Weg über die Kommandozeile gehen zu müssen. Ich möchte euch in diesem Beitrag die populären Anwendungen »Scout«, »CodeKit« und »Compass.app« vorstellen. Weitere Tools findet ihr auf der Website von Sass. Damit ihr alle Beispiele in diese Beitrag nachvollziehen könnt, empfehle euch zuvor den Beitrag zum Thema Sass-Kompilierung gelesen zu haben.

Beitrag zu Ende lesen

Einstieg in Sass – Funktionsweise und Überblick

Sass Logo

Bei komplexen Websites kann die Übersicht im CSS-Code schnell verloren gehen. Moderne Websites nutzen ein durchdachtes Farbkonzept, basieren auf einem Gestaltungsraster das jede erdenkliche Displaygröße bedienen kann, und werden zunehmend interaktiv. Eine stark fragmentierte Browserlandschaft und verschiedene Bedienkonzepte machen die Arbeit zusätzlich kompliziert. Die Reaktion auf diese veränderten Anforderungen ist der »neue« Webdesign-Workflow, den ich in einigen Artikeln bereits ausführlich behandelt habe.
In diesem Artikel möchte ich euch Sass vorstellen. Sass hilft euch dabei, Stylesheets schneller zu schreiben und moderne oder experimentelle Techniken unkompliziert und browserübergreifend einzusetzen. Sass automatisiert lästige Aufgaben, vereinfacht den Umgang mit Farben und Gestaltungsrastern und bietet diverse Funktionen von denen ihr in CSS nur träumen könnt.

Beitrag zu Ende lesen

SVG-Grafiken erstellen und einbinden

SVG

Mit dem Format SVG (Scalable Vector Graphics) können Vektor-Grafiken in Browser dargestellt werden. Wie bei Vektor-Grafiken üblich, werden Farbwerte und Formen nicht über Pixel definiert, sondern mathematisch beschrieben. SVG-Grafiken haben dadurch eine sehr geringe Dateigröße, lassen sich verlustfrei und ohne Zuwachs der Dateigröße skalieren und mit JavaScript animieren oder verändern.

In diesem Artikel fasse ich zusammen, was ihr beim Erstellen von SVGs in Illustrator oder Photoshop beachten solltet, wie SVGs in Websites eingebunden werden können und welche Tools und Hilfsmittel es in diesem Zusammenhang gibt.

Beitrag zu Ende lesen