Design

Design ist für die meisten Menschen ein relativ abstrakter Begriff. Genutzt wird er hierzulande vermehrt seit den 1960ern und beschreibt den Prozess des bewussten Gestaltens. Früher war hingegen nur von der Gestaltung oder sogenannten industriellen Formgebung die Rede.
Design beinhaltet viele Aspekte und orientiert sich dabei stets am Menschen und seinen vielfältigen Bedürfnissen. Darunter fallen sowohl körperliche und psychische Bedürfnisse als auch Anforderungen des menschlichen Verstands an die gegenständliche Umwelt. In der Designtheorie ist hierbei die Rede vom Begriff der Funktionalität – sie unterscheidet das Design letztendlich auch von der Kunst. Design wendet sich stets dem praktischen Leben zu und hat einen gewissen Nutzen, den Kunst hingegen nicht zwangsläufig haben muss. Im Wesentlichen dient Design dazu, die Welt sowohl praktisch als auch sinnlich schöner zu machen. Dafür kommen verschiedene gestalterische Fertigkeiten, technisches Knowhow sowie team- und projektorientiertes Arbeiten zum Einsatz.

Der Bereich „Design“ teilt sich auf in die Untergruppen Grafik- und Webdesign. Im übertragenen Sinne dreht sich dabei alles um die Gestaltung, Entwürfe und Formgebung. Trotzdem gibt es zwischen Web und Grafikdesign einige grundlegende Unterschiede.

Das Grafikdesign konzentriert sich auf die visuelle Gestaltung der verschiedenen Inhalte und drückt diese mithilfe verschiedener Inhalte aus. Grafikdesigner arbeiten bevorzugt mit Printmedien, also beispielsweise Zeitschriften oder sonstigen gedruckten Medien. Beim Webdesign liegt der Fokus hingegen ganz klar auf dem Onlinebereich und der visuellen wie auch strukturellen Gestaltung von Internetseiten für das World Wide Web. Seine Aufgabe besteht darin, den Besucher durch die Website und deren Unterseiten zu führen, wobei auch Usability und eine schnelle Übersicht eine große Rolle spielen. Beide Varianten haben allerdings einen ähnlichen Zweck: sie vermitteln mithilfe von Design und Gestaltung effektiv Informationen.

Design

Adobe: Flash ist tot, es lebe Animate CC

11. Februar 2016
von
Adobe: Flash ist tot, es lebe Animate CC

Ende letzten Jahres wurde angekündigt, dass Anfang 2016 Schluss sein soll mit Adobe Flash. Zumindest der Name sollte aus der ehemals beliebten Anwendung verschwinden, die damit auch ihren Schwerpunkt auf andere, offene und zeitgemäße Formate verschieben soll. Jetzt hat Adobe Ernst gemacht und das Nachfolgeprodukt namens Animate CC an den Start gebracht. Wir haben es uns genauer angeschaut. Um es vorwegzunehmen: Flash ist nicht so richtig tot, es spielt nur keine große Rolle mehr.

Design

Test my CSS gibt Tipps zur Optimierung deiner Stylesheets

9. Februar 2016
von
Test my CSS gibt Tipps für die Optimierung deiner Stylesheets

Ein kostenloses Onlinetool listet übersichtlich alle Probleme auf, die deine CSS-Stylesheets in sich tragen. So gewinnst du schnell einen Überblick darüber, wo Handlungsbedarf besteht. Test my CSS informiert dich zudem darüber, warum das jeweilige Problem ein Problem ist und macht Vorschläge zur Behebung. Alles, was du brauchst, ist die URL zu deinem Stylesheet.

Design

Performance steigern: SVG-Icons als Sprite sparen Requests

9. Februar 2016
von
Performance steigern: SVG-Icons als Sprite sparen Requests

Sprites sind eine beliebte Möglichkeit, mehrere Icons innerhalb einer Grafikdatei unterzubringen und immer nur einen Ausschnitt dieser Grafik per CSS auszugeben. Der Vorteil einer solchen Lösung ist, dass mehrere Requests vermieden werden. Statt einzelne Icon-Dateien zu laden, muss nur eine Datei aufgerufen werden. Auch Iconfonts haben den Vorteil, dass nur eine Datei für alle Icons geladen werden muss. Wenn du auf SVG-Icons setzt, kannst du in diesem Format ein Sprite erstellen, dessen Umgang in der Praxis sogar deutlich einfacher ist als klassische Icon-Sprites.

Design

LightCMS: Homepage-Baukasten der Extraklasse

8. Februar 2016
von
LightCMS: Homepage-Baukasten der Extraklasse

Es gibt keinen Mangel an Content Management Systemen (CMS), die dir helfen, deine eigene Website zu erstellen. Und wo wir gerade von Content Management Systemen reden, sollten wir nicht vergessen, dass immer mehr Online-Homepage-Baukästen im Kern ebenfalls CMS-Funktion haben und dabei einige Funktionen und Dienste beinhalten, die in ihrer Nische einzigartig sind. In diesem Artikel werden wir uns mit einem solchen Homepage-Baukasten mit CMS-Funktionalität befassen: LightCMS.

Design

Chromantics: Kennst du die Psychologie der Farben?

8. Februar 2016
von
Chromantics: Kennst du die Psychologie der Farben?

Das kleine, aber schön gestaltete Browserquiz Chromantics stellt dir zehn Fragen zu zehn unterschiedlichen Designumgebungen. Du musst jeweils zwischen zwei Farbvorschlägen für die gegebene Designaufgabe den farbpsychologisch richtigen wählen. Das gelang mir nicht in allen Fällen fehlerfrei.

Design

SVG-Filter: So wendest du sie auf HTML-Elemente an

4. Februar 2016
von
SVG-Filter: So wendest du sie auf HTML-Elemente an

Mit der Hilfe von CSS3 fügst du einem Element unter anderem Unschärfe, Schlagschatten, Helligkeit und Kontrast  hinzu. Insgesamt zehn solcher Filter stehen dir zur Verfügung. Auch das SVG-Format kennt Filtereffekte. Teils überschneiden sich die Möglichkeiten, so etwa bei der Unschärfe. Aber das SVG-Format kennt eine Reihe zusätzlicher Filter, die mit CSS3 allein nicht zu realisieren sind. Ohne großen Aufwand fügst du aber beliebige SVG-Filter einem HTML-Element hinzu.

Design

CSS Custom Properties: So nutzt du Variablen in Chrome 49

4. Februar 2016
von
CSS Custom Properties: So nutzt du Variablen in Chrome 49

Chrome unterstützt ab Version 49 CSS Variablen in der Form der CSS Custom Properties. Damit wird ein zentrales Element rationeller Programmierung ohne weitere Zusätze im Browser Wirklichkeit. Der Einsatz ist recht einfach.

Design

Die schönsten Layer-Fonts und wie man sie im Webdesign verwendet

1. Februar 2016
von
Layer-Fonts im Webdesign

Dass eine Schrift auch mal mehrfarbig gesetzt sein kann, ist keine Erfindung der digitalen Typografie. Bereits im 19. Jahrhundert gab es Schriften, die in zwei oder mehr Schnitte aufgeteilt waren, sodass man sie mehrfarbig übereinander drucken konnte. Mit dem OpenType-Format gibt es solche sogenannten Layer-Fonts auch für den digitalen Einsatz. Gerade für 3D- und Schatteneffekte sind mittlerweile zahlreiche Schriften auf dem Markt, welche eine mehrfarbige Darstellung ermöglichen. Und dank der Webschriften kannst du solche mehrfarbigen Texte sogar im Webdesign verwenden.

(Kostenlose) Services

Adobe Stock: Der ideale Bilderdienst (nicht nur) für Creative Cloud-Nutzer

28. Januar 2016
von
Adobe Stock: Der ideale Bilderdienst (nicht nur) für Creative Cloud-Nutzer

Im letzten Jahr startete Adobe seinen eigenen Bilderdienst Adobe Stock mit mehreren Millionen lizenzfreien Fotos, Illustrationen und Videos. Vorausgegangen war der Kauf des Stockfotoanbieters Fotolia, der den Weg für Adobes eigenen Bilderdienst ebnete. Adobe Stock ist zu einem festen Bestandteil der Creative Cloud geworden. Aber was genau kann Adobe Stock? Wo sind die Vorteile zu Fotolia und anderen Diensten? Was kosten die Bilder und wie groß ist die Auswahl?

Design

Sicher surfen: Chrome-Entwicklertools mit neuem Security-Panel

26. Januar 2016
von
Sicher surfen: Chrome-Entwicklertools mit neuem Security-Panel

Sicheres Surfen ist ein Thema, mit dem sich auch Webentwickler zu beschäftigen haben. Gerade im Umgang mit persönlichen Nutzerdaten ist es wichtig, dass diese verschlüsselt übertragen werden. Doch die Umsetzung sicherer Übertragungen mittels HTTPS ist nicht immer einfach. Gerade bei komplexen Webprojekten werden häufig viele externe Quellen eingebunden, die eine Verbindung nicht durchgängig sicher machen. Das neue Security-Panel der Chrome-Entwicklertools unterstützt dich bei der Umsetzung sicherer Übertragungswege für dein Webprojekt.

Bilder & Vektorgrafiken bearbeiten

Satyr.io stellt Dummies zum Testen von Websites bereit

19. Januar 2016
von
satyr

Bevor eine Website an die Öffentlichkeit geht, sollte man sie testen. Gerade bei responsivem Layout ist es wichtig, abzuklären, ob Bilder bei verschiedenen Browserauflösungen beziehungsweise auf Mobilgeräten richtig dargestellt werden. Wird die richtige Datei ausgegeben? Wie verhält sich das Laden von Bildern bei langsamer Internetverbindung? Satyr.io ist ein Dienst, der Dummy-Bilder erstellt, mit denen du deine Webprojekte in dieser Hinsicht einmal prüfen kannst.

HTML/CSS

Firefox Developer Edition: Der Browser für Entwickler

18. Januar 2016
von
Firefox Developer Edition: Der Browser für Entwickler

Mittlerweile stellt jeder Browser Entwicklerwerkzeuge zur Verfügung, mit denen du Webprojekte ausgiebig auf Gestaltung und Funktionalität prüfen kannst. Standardmäßig gehören das Debugging von JavaScript und das Inspizieren des Quelltextes dazu. Mozilla hat mit dem Firefox Developer Edition einen eigenen Browser entwickelt, der sich ganz besonders an Webentwickler richtet und ihnen mit speziellen Tools hilft, eine Website ausgiebig zu prüfen. Dazu gehört nun auch das ausgiebige Testen von CSS3-Animationen und -Transitions.