Webdesigner-Blog 

Das neue Scrolldesign auf dem Internetauftritt des neuen Volkswagen Beetle ist wirklich beeindruckend. Nicht nur, dass man eine Abfolge von Bildern runterscrollen kann, man kann auch bestimmte Effekte mit dem Scrollen auslösen, was den neuen Volkswagen Beetle noch schöner in Szene setzt.

Ein großes Kompliment an die Webdesigner, die hier im Auftrag für den Volkswagenkonzern tätig waren. Die Seite für den neuen Volkswagen Beetle ist wirklich beeindruckend.

Stand 25.12.2011

Da sich bei Autoherstellern Webdesigns im Laufe der Zeit schnell ändern, könnte es sein, dass man das Scrolldesign nur kurze Zeit wird sehen können.

Man wird ja als Webdesignagentur beauftragt ein Design zu kreieren, dass dem späteren Betrachter eine gute User-Experience (ein gutes Benutzererlebnis) beschert. Hier sollte der Webdesigner aus meiner Sicht vor allem darauf achten, dass das Design übersichtlich ist, so dass der Betrachter sich schnell zurecht findet. Eine Methode um dies zu erreichen, ist die optische Aufteilung der Webseite.

Weiterlesen »

Hintergründe können Webseiten verschönern oder auch verschlechtern; je nachdem, ob sie richtig eingesetzt wurden.

Es gibt drei Arten von Hintergründen:

1. Einzelne Farben
2. Farbverläufe
3. Bilder (Einzelbilder oder sich wiederholende Bildmuster)

Weiterlesen »

Problem: Bei manchen Webdesigns ist es notwendig, die Sichtbarkeit des vertikalen Scrollbalkens zu erzwingen und zwar aus folgendem Grund bzw. im folgenden Fall:

Manchmal ist die Startseite eines Webdesigns vertikal kleiner als die Folgeseiten bzw. manche Seiten im Webdesign sind nicht so lang als andere. Dann kann es dazu führen, dass das ganze Webdesign bzw. der Inhalt der Webseite nach links springt, weil sich auf einmal der vertikale Scrollbalken hinzuschaltet. Das ist unschön, da ein Design, wo nichts hin- und herspringt, für den Betrachter angenehmer ist.

Lösung: Dieses Zuschalten kann man unterbinden, indem man den vertikalen Scollbalken erzwingt. Hierzu trägt man einfach folgenden Code in die CSS-Datei ein:

html {overflow-y: scroll;}

Viel Erfolg.

Achtung!!! Seit der Skype-Aktualisierung im Oktober 2011 funktioniert die Umwandlungsunterdrückung der Telefonnummer in eine Skypenummer nicht mehr im Internet Explorer. Bei Anwendung des unten genannten CSS-Codes wird jetzt gar keine Nummer mehr gezeigt. Von daher rate ich, durch diesen neuen Umstand, von der unten genannten CSS-Lösung ab. Falls jemand eine Alternative hat, kann er diese im Kommentarfeld hinterlassen. Jedoch ist davon auszugehen, dass Skype auch in Zukunft Anpassungen vornimmt, um eine Umwandlung auch weiterhin stattfinden zu lassen, selbst wenn der Webdesigner es nicht möchte. Da Webdesign-Kunden auf die Anzeige der Nummer angewiesen sind (nämlich auch dann wenn deren Kunden Skype an haben) sollte man das Risiko lieber nicht eingehen. Wahrscheinlich bleibt als letzte Alternative die Nummer als Bild-Grafik einzufügen (anstatt als Text).

Kaum ist das Webdesign fertig und hochgeladen, kann es sein, dass Skype dann die Anzeige von Telefonnummern verändert. Jeder der Skype am laufen hat, sieht dann anstatt die Telefonnummer einen Skype-Button, mit dem man die Nummer per Skype anwählen kann.

Das ist vor allem peinlich, wenn z.B. durch die Skype-Einblendung die Telefon-Nummer in eine neue Zeile rückt, und das ganze Design umwirft. Der Webdesign-Kunde sieht dann den Skype-Button (den ich für sehr häßlich halte) anstatt nur der Telefonnummer.

Diese oftmals störende Funktion ist in bestimmten Browsern integriert und läßt sich durch folgenden Css-Trick über die ganze Seite abschalten. Hierzu fügt man einfach in der CSS-Datei folgenden Code ein:

span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container {display:inline !important;}

So einfach geht das, den Skype-Button automatisch zu entfernen bzw. zu unterdrücken. Und schon verschwindet der Skype-Button aus dem Webbedesign.

Ich habe heute eine Webseite für einen Rechtsanwalt aus Gießen fertiggestellt, in der ich einen für mich neuen Effekt eingesetzt habe. Anstatt einen normalen Farbverlauf einzusetzen, habe ich dieses Mal dem Farbverlauf eine Körnerstruktur (Grain bzw. Noise) beigefügt. Dadurch erhielt der Farbverlauf einen schönen Effekt und somit einen edleren Touch.

Zur Verdeutlichung habe ich hier mal ein Schaubild (mit einer Vergrößerung) angefertigt, welche die Körnerstruktur verdeutlicht.

Es ist kaum zu sehen, aber gerade das Dezente macht das Besondere aus. Auf der Webseite des Rechtsanwalts sollte man es deutlicher erkennen können. Details sind es häufig, welche eine Seite des Kunden hochwertig erscheinen lassen.

Den Körnereffekt bekommt man z.B. mit Photoshop hin, indem man den Rauschfilter einsetzt. In meiner englischen Photoshop (CS4-Version): Filter > Noise > Add Noise (Im Deutschen vielleicht Filter > Rauschen > Rauschen hinzufügen).

Ich denke man kann da noch tolle Effekte entdecken, indem man das Rauschen variiert oder andere Rausch-, Licht- und Pixeleffekte einsetzt. Die Filterplaette bei Photoshop ist ja ziemlich groß.

Ich finde, dass der Abänderung von Farbverläufen im Webdesign bislang noch zu wenige Bedeutung geschenkt wurde. Hier kann man sehr viel neues erschaffen.

Wie kann man ein Hintergrundbild automatisch an die volle Browser-Fenstergröße anpassen und zwar so, dass es unter verschiedenen Gegebenheiten gut aussieht?

Es sollen keine weißen Balken produziert werden, Proportionen des Hintergrundbildes sollen erhalten bleiben (egal wie man skaliert), das Bild sollte immer zentriert bleiben, Scrollbalken sollte es nicht geben und unterschiedliche Browser sollten keine Kompatibilitätsprobleme haben.

Weiterlesen »

Als Webdesigner und Internetagentur nutzt man häufig Bilddatenbanken, welche Bildlizenzen anbieten (Royalty free) und die man sich dann häufig mit anderen Unternehmen teilt. Man ist also nicht alleiniger Besitzer des Bildes, sondern hat lediglich eine Lizenz, die es einem erlaubt das Bild  auf eine bestimmte Weise einzusetzen.  Diese Lizenz ist, wie bereits erwähnt, nicht exklusiv, da sie auch von anderen Unternehmen erworben werden können .

Problematik: Da es eine Foto für ein bestimmtes Thema sein soll (z.B. Möbel), kann es also gut sein, dass die Konkurrenz des Unternehmens, für das man die Webseite erstellt, das gleiche Foto einsetzt. Das ist ziemlich peinlich. Oder es kann ein Foto sein, dass man an jeder Ecke sieht (das ist auch peinlich).

Weiterlesen »

Ich habe eine Webseite entdeckt, die mit Javascript eine tolle Bildnavigation hat. Was man bei Mobiltelefonen bereits kennt, hat sich diese Seite zu nutze gemacht: Per Wischen (bzw. klicken und ziehen) kann man die Bilder nach rechts oder links rutschen lassen.

Zur Webseite

Besucht die Webseite und dann haltet die linke Maustaste auf einem Bild gedrückt und zeichnet eine Linie nach links oder rechts. Die Fotos rutschen dann entsprechend nach links oder rechts. Tolle Slideshow, oder?

Ich möchte mal kurz über den Einsatz von Png-Dateien sprechen und wie man diese im Internet Explorer 6 sichtbar machen kann.

Der große Vorteil von Png-Dateien bzw. Png-Grafiken ist, dass man hier einen transparenten Hintergrund einstellen kann.

Viele werden jetzt sagen, dass man dies auch mit einer Gif-Grafik machen könnte. Da sage ich, ja ok, dass stimmt, jedoch kann man das nicht so schön machen, wie mit dem Png-Format.

Das man dies nicht mit einem Bild im Png-Format besser schaffen kann, liegt daran, dass z.B. das Png-Format mehrere Million Farbabstufungen erlaubt und somit Farben schöner aussehen, vor allem bei Bildern mit vielen unterschiedlichen Farben. Ausserdem kann man bei einem Png-Bild den Grad der Transparenz einstellen, so dass es zu schönen Durchschimmereffekten kommen kann (z.B. bei einem Schattenwurf über einem Farbverlauf oder wenn man z.B. einen halbtransparenten Hintergrund braucht.)

Weiterlesen »

Istockphoto.com ist seit vielen Jahren der Platzhirsch unter den Bilddatenbanken für freie Bilder (Royalty Free Stock Photos – also Fotos die man unter bestimmten Lizenzbedingungen verwenden darf, ohne den Künstler am Gewinn beteiligen zu müssen).

Kaum eine andere Bilddatenbank wächst so rasant und hat so viele hochwertige Bilder wie Istockphoto.com.
Gerade die hochwertigen Bilder sind für eine Internetagentur sehr wichtig, da hochwertige Bilder Webseiten einfach besser aussehen lassen.

Leider wurden in der Vergangenheit die Preise bei Istockphoto immer wieder hoch gesetzt. Das nervt! Einmal wurde der Preis durch höhere Kosten pro Credit erhöht und zum zweiten durch mehr Credits je Bild bei schätzungsweise 80-90% der Bilder. (Bei Istockphoto bezahlt man mit Credits, die man im Vorfeld zu unterschiedlichen Preisen erwirbt, je nachdem wie viele man auf einmal kauft.)

Ich hatte in der Vergangenheit bereits einen Anlauf unternommen, eine Alternative zu Istockphoto.com zu finden, jedoch habe ich es dann schnell aufgegeben, da die meisten Bildagenturen entweder eine schlechte Auswahl, unbrauchbare Lizenzbedingungen hatten oder eben noch teurer waren.

Doch dann wurde ich vor kurzem auf eine wirklich gute Alternative zu Istockphoto.com hingewiesen und möchte daher ein bisschen Werbung für diese Bilddatenbank mache. Hier die Seite: Depositphotos.com

Weiterlesen »

Hello Dave ist eine Webseite, dessen Navigation und Aufbau darin besteht, dass die einzelnen Bereiche (je nach Mausposition) vorbeifliegen.

Eine tolle Idee von der Agentur aus Stockholm.

Ich habe jetzt vor kurzem ein Webdesign mit dezentem floralem Hintergrund erstellt. Dabei habe ich in Photoshop CS4 sowohl mit einem kostenlosen Zusatzset an floralen Brushes als auch mit einem kostenlosen Zusatzset an floralen Custom Shapes gearbeitet. Diese kann man sich aus unterschiedlichen Quellen kostenlos downloaden; z.B. gibt es florale Photoshop-Brushes hier und florale Custom Shapes hier oder eben aus anderen Quellen (einfach mal googlen).

Hier die Webseite, die ich mit diesem floralem (pflanzenartigem) Hintergrund erstellt habe. Es handelt sich dabei um einen Hochzeitsfotografen in Hamburg.

www.hochzeitsfotograf-hamburg.cc

Ein Webdesign das so aussieht wie eine Skizze. Tolle Idee.

Die Webseite findet man hier

Es macht sich immer gut, wenn man in seinen eigenen Webdesignreferenzen eine Vielzahl von Webseiten mit unterschiedlichem Design zeigt. Schließlich sind Geschmäcker verschieden und man möchte ja den Kunden überzeugen, dass er auch etwas ganz individuelles bekommen wird, d.h. kein Webdesign von der Stange. Deshalb ist es wichtig gute Ideen mitzubringen. Aussergewöhnliches Design ist ein Design, dass vom Gewohnten abweicht und häufig durch besondere Effekte überrascht. Und wenn man dann noch die Kurve bekommt, es so zu machen, dass es benutzerfreundlich ist und aus ästhetischen Gesichtspunkten überzeugt, hat man wirklich eine super Webseite hinbekommen.

Hier ist z.B. eine Seite aus den USA, welche so wie eine Tageszeitung gestaltet wurde :

Die Seite ist hier erreichbar.

Eine aussergewöhnlich tolle Idee, die man sich merken kann.

Weiterlesen »

Mal schnell etwas  per FTP hochladen ohne zusätzliches FTP-Programm.
Das geht jetzt ganz einfach

mit dem Interface von http://www2ftp.de/

Mit dem Online-Interface können Sie sich einloggen und schon kann der Dateientransfer beginnen.
Dies ist FTP ganz bequem per Internet ohne zusätzliches Programm wie z.B. Filezilla, Total Commander, Wise-FTP, WS-FTP etc.

Ein Online-FTP-Zugang ist ideal, um z.B. Webdesignkunden den schnellen Zugriff auf große Dateien zu ermöglichen oder eben auch mal anders herum.

Zur Seite von Vividresponsematters.com

Videomenschen gibt es immer häufiger. Doch selten ist das Zusammenspiel von herein- und herausgeblendetem Textanimatonen mit Videomenschen so schön gelungen wie bei Vividresponsematters.com.

Hier geht es zu dieser Seite

Die Website-Design und Marketing-Agency Lounge Lizzard aus den USA haben als Webseite einen verspielten Schreibtisch. Es gibt so einige Webseiten im Schreibtischlook, aber diese ist besonders schön.

…zur Seite von Windsor

Die Idee beim Webdesign für das Modelabel Windsor diesen Stoff-Background (Webseiten-Hintergrund) zu nehmen, ist einfach genial. Der Hintergrund passt sich sehr gut dem Webseitendesign an, obwohl die Struktur des Backgrounds sehr intensiv ist. Super umgesetzt!