kulturbanause Blog

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

Konzeption


Webdesign für Tablets: Technische Daten im Überblick

Wenn ihr eine Website für mobile Endgeräte, insbesondere für Tablet PCs gestalten wollt, müsst ihr wissen mit welchen Einschränkungen, Abmessungen, Auflösungen und Möglichkeiten ihr es zu tun haben werdet. Der Tablet Markt wird allerdings zunehmend unübersichtlich und so ist es erfreulich, dass die Agentur NUISOL mit Tabletmania eine Website ins Leben gerufen hat, auf der Ihr technische Daten aller Tablet-Computer nachschlagen könnt. Neben der individuellen Display-Auflösung, dem verwendeten Betriebssystem und dem nativen Webbrowser eines Geräts könnt ihr auch statistische Durchschnittswerte - beispielsweise die gebräuchlichste Display-Auflösung - nachschlagen.

Beitrag zu Ende lesen

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