kulturbanause Blog

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

Konzeption


Mockup-Vorlage für Responsive Webdesign

Jede zeitgemäße Website wird mittlerweile mit unterschiedlichen Layout-Typen für verschiedene Ausgabemedien konzeptioniert. Je komplexer die Website später werden soll, desto wichtiger ist es das Projekt von Anfang an vernünftig zu planen.
Damit während der Mockup-Phase die verschiedenen Layouts schnell gescribbled und bewertet werden können, hat Jeremy P. Alford nun zwei Vorlagen für Responsive-Webdesign-Mockups bereitgestellt. Wenn ihr Mockups also analog erstellt, lohnt es sich die Vorlage einmal anzuschauen.

Photoshop-Etiquette für Webdesigner (+ Tipps)

Wenn ihr als Webdesigner im Team arbeitet, habt ihr folgende Situation bestimmt schon einmal erlebt: man erhält eine Photoshop-Datei von einem Kollegen, öffnet sie guten Mutes und ist dann innerhalb von Sekunden bitter frustriert. Unbenannte Ordner, leere Ebenen, fehlende Struktur ...
Wer im Team arbeitet sollte darauf achten, dass auch andere mit den erzeugten Dateien zurecht kommen. Alles andere ist völlig unprofessionell. Das dache sich auch Dan Rose und schuf promt eine Photoshop-Etiquette für Webdesigner.

Beitrag zu Ende lesen

Kochtopf-Icon als gratis Photoshop/PNG-Download

Für ein vor kurzem abgeschlossenes Projekt habe ich einen Kochtopf illustriert. In Form eines Icons sollte der Kochtopf die Termine einer Kochschule anteasern. Letztendlich wurde das Icon durch ein Foto ersetzt und kam somit nicht zum Einsatz. Aus diesem Grund stelle ich die Photoshop-Datei sowie das Icon im PNG-Format hier als Download zur Verfügung. Vielleicht könnt ihr es ja in einem zukünftigen Projekt einsetzen.

Beitrag zu Ende lesen

Cutter.js: Textverkürzungen und „Weiterlesen“-Links per JavaScript

Moderne Websites werden häufig mit Teaser-Bereichen bestückt die einen bestimmten Inhalt mit einigen Zeilen einleiten, und anschließend einen "Weiterlesen"-Link anzeigen über den der Besucher den ungekürzten Inhalt angezeigt bekommt. Bei Blogs sind die Kategorie- und Übersichtsseiten größtenteils nach diesem Prinzip aufgebaut. Aber auch "normale" Websites setzen zunehmend auf dieses Prinzip und realisieren beispielsweise die Startseite oder lange Seiteninhalte über Teaser.
Wer WordPress als Rückgrat einer Website einsetzt, wird eine solche Funktion wohl meistens über die functions.php steuern; für kleine Websites, Portfolios oder andere statische Seiten muss jedoch eine andere Lösung her.

Beitrag zu Ende lesen

Online Grid-Generator für Photoshop und Illustrator

Der Einsatz von Gestaltungsrastern (Grids) ist aus dem modernen Webdesign nicht mehr wegzudenken. Um in der Layoutphase mit Rastern arbeiten zu können, stehen zwei Optionen zur Verfügung. Entweder greift man auf ein vordefiniertes Grid-System wie beispielsweise 960.gs zurück, oder man berechnet sich ein eigenes Raster. Ich persönlich bevorzuge die Arbeit mit einem selbst erstellten Raster, da ich so alle Inhalte der Website bestmöglich berücksichtigen kann.
Nicolaj Kirkgaard Nielsen hat nun einen Online-Grid-Generator für Photoshop und Illustrator entwickelt, der alle Funktionen abdeckt, die ich bei der Arbeit mit Gestaltungsrastern benötige.

Beitrag zu Ende lesen

Photoshop-Farben auf dem iPad verwalten: Adobe Color Lava

Adobe hat drei Touch-Apps für das iPad veröffentlicht, die ich in dieser kleinen Artikel-Serie kurz vorstellen möchte.
Im vorherigen Artikel habe ich bereits die App Adobe Nav behandelt, nun möchte ich mich der Anwendung Color Lava widmen.
Mit Color Lava lassen sich auf dem iPad Farben mit dem Finger mischen und zu harmonischen Farbsets zusammenstellen. Diese Farbkonzepte können anschließend, vom iPad aus, an die Fotoshop-Farbfelder übermittelt werden.

Beitrag zu Ende lesen

Stock-Images sollten bewusster verwendet werden!

stock.image-krefeld-screenshot

Für viele Projekte, sei es nun eine Website oder ein Plakat, eine Broschüre oder auch nur das Icon einer App, benötigen wir Bildmaterial. Wenn seitens des Kunden keine Unterlagen zur Verfügung gestellt werden können, greifen wir meist auf so genannte Stock-Image-Portale zurück. Auf diesen Seiten kann aus tausenden von Fotos das passende Bildmaterial ausgesucht und anschließend gekauft werden. Die Qualität der Fotos ist meist auch sehr gut, so dass Designern hier ein wirklich brauchbares Hilfsmittel an die Hand gegeben wurde. Allerdings werden Stock-Images zu dem Zweck fotografiert, möglichst oft verkauft zu werden und wirken daher häufig sehr allgemein.
Trotz recht guter Voraussetzungen werden im Umgang mit Stock-Images jedoch unnötige Fehler gemacht, und so die Qualität des Endproduktes negativ beeinflusst. Worauf Ihr meiner Meinung nach achten solltet, möchte ich in diesem Artikel, anhand einiger Beispiele, erläutern.

Beitrag zu Ende lesen