Kategorie-Archiv: Design

Responsive Screen Geräte-Mockups

Ja, ein sehr englischer Titel heute. Jeder kennt sicher die Vorschau-Bilder für Theme-Downloads, welche einen Eindruck geben, wie eine Webseite auf den einzelnen Endgeräten dargestellt wird. Ich habe mir für diesen Zweck ein PSD-Template gekauft (welches übrigens auch wunderbar mit Pixelmator funktioniert).

Das Ganze gibt es für nur $8 bei GrapicRiver (Envato):

Reponsive Screen Mockup Pack

Gerade wenn man häufiger Themes erstellt und verkaufen möchte, ist dies sicher die optimalste Präsentation für das eigene Produkt. Alternativ könnte man so natürlich auch sehr komfortabel Referenzen auf der eigenen Webseite vorstellen oder ähnliches. Ich bin jedenfalls sehr begeistert – schließlich sind unendlich viele Gerätekombinationen enthalten.

Ich habe vor dem Kauf jedenfalls nicht besonders lange gezögert – mehr als 5.000 Käufe können hier einfach nicht lügen.

Wenn ein Entwickler Photoshop öffnet

In diesem Blogpost möchte ich einfach mal zeigen, dass auch ein Entwickler hin und wieder ganz ansehnliche Dinge produzieren kann. In der Kopfzeile steht übrigens nur Photoshop, weil das der Anfang war – damals noch mit einer Schülerversion von CS2 (lang ists her). Mittlerweile spare ich mir das Geld und setze komplett auf Pixelmator (siehe App-Store). Alle Ergebnisse (bis auf das Erste), welche hier zu sehen sind, stammen aus Pixelmator. Für mich eins der genialsten Programme in Sachen Preis/Leistung.

Damit das Ganze etwas chronologisch geordnet ist, fange ich mit einer Webseite an, welche ich bereits seit 2007 betreibe – mal mehr, mal weniger. Und bevor jemand fragt: Aktuelle ist eine „weniger“-Zeit.

Fotoseite: klein0r.de

Früher konnte ich den Content der Seite nicht so richtig zuordnen. Eigentlich war es für mich immer ein technischer Spielplatz… Kein richtiges Thema, wenig Inhalt und jede Menge PHP-Spielereien. Das „CMS“ ist von mir selbst geschrieben, und auch das Design ist auf meinem Mist gewachsen. So kann ich wenigstens sagen, dass die Seite zu 100% aus meiner Hand stammt. Nichts gekauft, kein fertiges Zeug genutzt. Würde ich heute bestimmt nicht noch einmal so machen – aber es hat mich zumindest in meiner Entwicklerlaufbahn weiter gebracht … zumindest bilde ich mir das ein:

klein0r.de - Design

Irgendwie ist es mir viel zu schade, das Ganze wegzuwerfen und beispielsweise durch Wordpress zu ersetzen – dafür ist einfach zu viel Arbeit reingeflossen. Aber über kurz oder lang wird irgendetwas mit der Domain passieren. Ich weiß nur noch nicht so genau was.

Portfolio: kleine-photo.com

Während die vorige Seite eigentlich mehr Blog als Galerie sein sollte, brauchte ich noch ein Portfolio. Dieses sollte vom Namen her auch mehr auf mich hinweisen. Nun möchte man natürlich auch nicht einfach irgendetwas zeigen, sondern nur das Beste. Daher ist der Inhalt dementsprechend schmal. Die Seite ist auch komplett selbst gebaut – so spare ich mir Wartungsarbeiten und Updates. Außerdem ist es ja bewusst schmal gehalten. Der Rahmen basiert auf dem CSS-Framework YAML – einfach aus dem Grund, dass es schnell gehen sollte. Ein richtiges CMS gibt es nicht – und auch keine Datenbank. Alles wird aus dem Filesystem geladen – so brauche ich nur einen Ordner mit Fotos in ein Verzeichnis packen, und das Teil macht den Rest. Optimal. Die Fotos werden dabei auch automatisch optimal angeordnet, um den Platz anständig zu nutzen.

Was ich zeigen möchte ist aber eher das Logo – das hat mich einige Zeig gekostet und etliche Entwürfe gebaucht. Ideen gab es jede Menge, aber nach einer kleinen Facebook-Abstimmung ist es schließlich folgendes geworden:

Logo kleine-photo.com

Später hat die Seite noch kleinere Spielereien bekommen, wie eine sticky Navigation mit ein paar Hover-Effekten, Lazy-Load der Bilder, einen Slider und vieles mehr. Insgesamt wirklich sehr schlank gehalten – das kommt den Ladezeiten zu Gute. Gefällt mir persönlich immer noch extrem gut. Nur der Inhalt fehlt am Ende ebenfalls. Viel Traffic ist dementsprechend auch nicht zu verzeichnen.

haus-automatisierung.com

Das Design der Seite ist gekauft und wurde per Child-Theme ein wenig angepasst. Insgesamt aber alles nichts wildes – eher funktional als spektakulär. Worauf ich ein wenig stolz bin, ist das Logo. Dieses wurde in maximal 30 Minuten mit Pixelmator gezaubert. Macht Euch selbst ein Bild:

Hausautomatisierung Logo

Ansonsten gab es natürlich noch jede Menge Kleinigkeiten, welche aber nicht so zeigenswert sind. Da ich für manche Dinge aber wirklich lange brauche, bleibe ich mit meinen Fingern aber doch lieber im Quellcode.

jQuery: One-Page Layouts mit OpenSource-PlugIns

Anfangs war ich ja etwas skeptisch was OnePage-Layouts angeht. Irgendwie fiel einigen Unternehmen der Start aber auch extrem schwer. So hat man genügend Seiten gesehen, die wirklich absolut schlecht gemacht waren. Mittlerweile lösen manche Landing-Pages aber auch echte WOW-Effekte in mir aus. Unterstrichen von genialen Fotos und tollen Animationen und Grafiken, bekommt man direkt einen positiven Eindruck und hat einfach Lust weiter zu scrollen.

Der aktuelle Trend für OnePages ist allerdings das sogenannte „parallax scrolling“ – das bedeutet, dass sich unterschiedliche Ebenen beim scrollen unterschiedlich schnell bewegen. So entsteht viel mehr Tiefe auf der Seite und alles wirkt einfach lebendiger.

Wer jetzt noch nicht verstanden hat was ich genau meine, der sollte sich durch folgende Links klicken:

Also, was braucht man denn nun um solch ein Layout zu bauen? Im Web existieren verschiedene Frameworks, welche einem alle einen relativ guten Start geben. Ich habe mich vom Bauchgefühl her aber bisher nur auf „cool kitten“ fixiert und bin insgesamt mit den Ergebnissen sehr zufrieden. Bisher konnte ich alles realisieren was ich mir vorgenommen habe. Außerdem bietet es einen einfachen Start in die Materie und man landet relativ schnell da, wo man hin möchte.

So habe ich als erstes eine Landing-Page für die Neugeborenen-Shootings meiner Freundin ins Leben gerufen, um mich mit der Materie etwas genauer auseinander zu setzen. Und ich muss sagen, dass ich mit den Ergebnissen sehr zufrieden bin. Leider unterstützen Mobilgeräte die Funktion noch nicht wirklich, und so muss man die Seite nebenbei nochmals für Mobilgeräte optimieren. Bisher habe ich auch noch keine Lösung gefunden, um diesen Effekt auf Mobilgeräten zu realisieren.

PHP: Fotos sinnig ausrichten und in Reihen einsortieren

Es gab einen kritischen Fehler auf deiner Website.

Erfahre mehr über die Problembehandlung in WordPress.