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.

Beispiel:
Die Webseite dieses Nachhilfe-Angebots aus Essen wurde in zwei Teile aufgeteilt, abgegrenzt durch Farbe und einer Zickzacklinie.

Wäre die ganze Seite weiß würde man sich schneller verlieren.

Hier noch ein Beispiel von einer Webseite einer Snackbar, welche die Seite in mehrere Bereiche aufteilt.

Man bekommt die Webseite praktisch in Häppchen serviert, was alles viel leichter verdaubar macht. Man hat Lust auf der Seite zu bleiben und jeden Bereich zu erkunden. Dieses Webdesign hilft, Bereiche, die man bereits gelesen/verarbeitet hat, abzuhaken und mental weiterzugehen. Kurzum, man kann die präsentierte Information besser aufnehmen.

Es gibt drei Arten von Hintergründen:

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

Zu 1, den einzelnen Farben:
Farben drücken verschiedene Emotionen aus bzw. verursachen diese.

Einige Beispiele:

Rot: Leidenschaft, Energie, Wille, Macht, Spontanität und Freude

Grün: Hoffnung, Frische, Leben, Natur, Innovation, Erneuerung, Friede

Weiß: Reinheit, Klarheit, Ordnung, Grenzenlosigkeit, Spiritualität, Weite, Schutz, Tadellosigkeit und Unschuld

Blau: Ruhe, Treue, Vertrauen, Sehnsucht, Weite, Entspannung, Erholung und Stabilität (typische Farbe der meisten Unternehmen in Deutschland)

Rosa: Mädchenhaft, süß und verspielt

Gelb: Verstand, Fröhlichkeit, Intelligenz, Logik, Kommunikation, Leichtigkeit

Orange: Lebenslust, Ausgelassenheit, Aufgeschlossenheit, Optimismus, Jugendlichkeit, Selbstvertrauen

Grau: Konservativ, modern, schlicht, sachlich, professionell und kompromißbereit.

Braun: Wärme, Bequemlichkeit

Violett: Mystik, Inspiration, Frömmigkeit, Weiblichkeit

Schwarz: Geheimnisvoll, ernsthaft und edel. Hat aber auch negative Assoziationen wie z.B. Tod, Enge, Schwere oder Unmoral, je nachdem in welchem Kontext es verwendet wird.

Anmerkung: Verschiedene Menschen und Kulturen haben gesonderte Vorstellungen von Farben. Farbnuancen spielen auch eine Rolle in der Wahrnehmung. So hat z.B. ein dunkles Bordeauxrot eine andere Wirkung als ein knalliges Purpurrot!

Farben können für den Background eines Webdesigns als einzelne Hintergrundfarben genommen werden.
Beispiel:

Hier ist die Hintergrundfarbe Grau und schafft die nötige Neutralität, um die Bilder und das Logo dieser Fotokünstlerin hervorzuheben.

Farben können auch kombiniert werden, wie die von mir programmierte Webseite eines meiner Kunden verdeutlicht:

Dieser Kardiologe drückt durch das Dunkel-Graue unter seinem Namen Professionalität, Moderne und Neutralität aus. Da es ein dunkles Grau ist, kommt auch noch die Ernsthaftigkeit des Schwarz hinzu. Das Weiße schafft Raum, Ordnung und Klarheit für seine Aussage. Ausserdem demonstriert es Tadellosigkeit (wie man es sich halt von Ärzten so vorstellt bzw. erhofft). Das Orange drückt Aufgeschlossenheit und Optimismus aus. Das es ein fast rotes Orange ist, kommt hier noch die Impulsität des Rot hinzu, die zum Weiterschauen und Weiterklicken anregt. Man bekommt Lust sich noch mehr zu informieren.

zu 2 – den Farbverläufen als Hintergrund/Background:

Bei Farbverläufen gilt das gleiche wie bei den Farben. Was bei den Farbverläufen noch hinzu kommt ist, dass die Farbe aufgewertet/intensiviert wird.
Die Verlaufsrichtungen sind:

- Vertikal
- Horizontal
- Quer
- Radial

Bei vertikalen Farbverläufen, die man als Hintergrund einsetzt, kann man, um die Dateigröße zu reduzieren, den Verlauf nur wenige Pixel breit machen. Auch 1 Pixel Breite würde ausreichen, da sich der Verlauf automatisch wiederholt.

Bei horizontalen Farbverläufen, die man als Hintergrund einsetzt, kann man, um die Dateigröße zu reduzieren, den Verlauf nur wenige Pixel hoch machen. Auch 1 Pixel Höhe würde ausreichen, da sich der Verlauf automatisch wiederholt. Man sollte bedenken, dass bei höheren Monitorauflösungen, der Verlauf eventuell rechts abgeschnitten wird bzw. sich abrupt wiederholt. Hier sollte man entweder den Verlauf so groß machen, dass er auf allen gängigen Monitor-Auflösungen ohne Unterbrechung gesehen werden kann oder man läßt den Verlauf zur Ursprungsfarbe verlaufen, so dass es keine abrupte sondern eine sanfte Unterbrechung gibt.

Beim diesem Farbverlauf sollte man bedenken, dass man entweder  die Grafik so groß macht, dass es auf alle Monitorgrößen passt, oder man setzt den Background durch den CSS-Befehl fest : “background-attachment: fixed”. Er scrollt dann nicht mit. Das gilt auch für den radialen Farbverlauf.

Ein radialer Farbverlauf kann auf der Webseite schöne Akzente setzen, z.B. um einen beleuchtungsähnlichen Effekt zu erzielen. So wie ich es auf dieser Webseite gemacht habe:

Man sollte bei Farbverläufen bedenken, dass es viele schlechte Monitor gibt, welche das sogenannte “Banding” haben, d.h. man erkennt bei den Verläufen abrupte Farbwechsel, anstatt dass die Farben weich verlaufen.

Hier ein Beispiel von “Banding” bei einem Farbverlauf, dessen Farbnuancen eigentlich weich verlaufen sollten:

Zu 3, Bilder bzw. Bildmuster:

Man kann ganze Bilder als Hintergrund nehmen. So wie ich es hier gemacht habe:

Abstrakter Hintergrund

Das Hintergrundbild ist auch hier fix. Dies erreicht man wie bereits erwähnt mit dem CSS-Befehl: “background-attachment: fixed”. Er scrollt also nicht mit.
Des weiteren kann man auch Bildmuster einsetzen. Dezente Muster (Pattern) gibt es hier. Ich empfehle die Muster noch nachzubearbeiten, indem man die Farbe abmildert oder den Kontrast schwächt. So kann man dann dezentere Hintergründe kreieren.

Oder man nimmt ein Echt-Bild, so wie ich es hier gemacht habe:

Bei diesem Beispiel habe ich zusätzlich die hier beschriebene Methode verwandt, damit der Hintergrund mit der jeweiligen Browsergröße mitwächst. Ansonsten müsste man sich an gängigen Monitorauslösungen orientieren. Eine aktuelle repräsentative Statistik zu Monitorauflösungen findet man hier (so weiß man, worauf man optimieren sollte). Ich empfehle aufgrund dieser Statistik auf die Auflösung 1920 x 1200 Pixel zu achten, da höhere Werte bei der Monitorauflösung selten genutzt werden. Das Hintergrundbild, falls es nicht als sich wiederholendes Muster konzipiert wurde,  sollte dementsprechend mindestens diese Maße aufweisen. Zu groß sollte es auch nicht geraten, da sonst der Hintergrund (wegen der Dateigröße) zu lange lädt.

Um die Dateigröße weiter einzuschränken sollte man eine Software verwenden, mit der man Bilder komprimieren (das Datenaufkommen des Bildes reduzieren) kann.

Ich nutze Photoshop zum Komprimieren von Bildern. Hier nutze ich den Menüpunkt “Save for Web and Devices” (speichern fürs Web und Geräte) und nutze den Vorschaumodus, um zu sehen wie stark ich die Komprimierung einstellen kann, ohne das zu starke Artefakte den Bildeindruck stören. Normalerweise reicht die Einstellung zwischen 55-60. Falls es ein sehr wichtiges Bild ist, dass sehr klar rüber kommen soll, verwende ich 70 als Qualitätsstufe (Kompressionsstufe). Bei anderen Programmen gibt es hier vielleicht eine andere Skala.

Manchmal bestehen Bilder nur aus wenigen Farben. Hier ist vielleicht eine Gif-Komprimierung sinnvoll. Man stellt dann die Anzahl der Farben ein.

Bezüglich Hintergründen/Wallpapern sollte man eine Dateigröße von maximal 300-400 Kb ansteuern. Bei z.B. 500 Kb für das Hintergrundbild würde dieses für die meisten Web-Surfern zu langsam laden, und daher als störend empfunden werden, wenn ca. 10 Sekunden, nachdem der Inhalt der Seite sich bereits aufgebaut hat, plötzlich der Hintergrund ins Auge springt.

Wie dem auch sein. Ich wünsche allen viel Erfolg, die mit der richtigen Wahl von Hintergründen, einen schönere Webseite schaffen möchten.

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.

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.

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.

Auf der Suche nach einer Lösung, um das Hintergrundbild schön an das Browserfenster anzupassen, bin ich auf die Webseite von Chris Coyer aus Wisconsin USA gestoßen. Er hat sich die Mühe gemacht und stellt Wege bereit, wie man ein Hintergrundbild permanent und automatisch an das Browserfenster anpassen kann. In einem Artikel stellt er 4 Lösungen vor, die mit CSS umgesetzt werden.

Ich selbst habe es bereits in 2 Projekten umgesetzt:

Bei der Schauspielerin Anne B. Scrott

und

bei einem Vertrieb für Anker und Ketten: IMS Hamburg

Es hatte einen guten Anklang bei meinen Webdesignkunden und ich denke, dass die obigen Designs schön anzuschauen sind.  Im Allgemeinen denke ich, dass großflächige Hintergründe modernen ausschauen. Das liegt daran, dass man es noch nicht so häufig sieht, es aber im kommen ist. Klar passt es nicht immer, aber in vielen Fällen kann man ja auch was dezentes als Hintergrund einsetzten.

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).

Gerade größere Unternehmen könnte das gravierend stören. Von daher muß ein professionelles Fotoshooting her. So entstehen professionelle Werbebilder, die exklusiv für das jeweilige Unternehmen angefertigt wurden.

Wie kommt man an diese Exklusivfotos?

Klar, man kann einen Werbefotografen engagieren. Nachteil: Er arbeitet vielleicht nur Vorort. Vielleicht muß man sich dann selbst noch um Models, Ideen, Stylisten, Make-up-Artists usw. kümmern. Also alles etwas umständlich.

Man kann sich auch an eine Werbeagentur wenden. Die haben das dann meistens Inhouse (alles unter einem Hut).

In diesem Zusammenhang möchte ich eine Werbeagentur vorstellen, die weltweit professionelle Fotoshootings zu einem günstigen Preis organisiert: Zu erreichen unter Shoot-Train.com und Klugwerben.de.

Das besondere an Shoot-Train bzw. Klugwerben.de ist, dass sie einen Onlinekalkulator haben mit dem man schnell den Preis für das Fotoshooting ermitteln kann. So kann man bei der Preisbestimmung für den potentiellen Webdesignkunden schon im Vorfeld sagen, wie teuer es werden wird.

Das Superbesondere bei Klugwerben.de bzw. Shoot-Train.de ist, dass es eine Festpreisgarantie gibt. Das gibt es so bei anderen Werbeagenturen eigentlich nicht. Bei anderen Werbeagenturen ist häufig nicht ausgeschlossen, dass die Kosten im Nachhinein explodieren und so für eine böse Überraschung sorgen.

Also wenn Ihr als Webdsigner oder Internetagentur mal hochwertigere Exklusiv-Fotos braucht, dann wendet euch am besten an Shoot-Train.de bzw. Klugwerben.de

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?

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.)

Das Png-Format eignet sich auch, wenn man mit Layern (z-index) arbeitet und ein Bild über einem sich wechselnden Hintergrund platziert. Beispiel wäre z.B. meine Seite, die ich für den Bauchredner Tim Becker gemacht habe.

Hier sieht man, wie der Hippie über dem Kasten mit dem Text gelegt ist. Bei einem Bild im Gif-Format würde man hier einen Farb-Saum erkennen, der den Hippie umgeben würde. Entweder Weiß beim Kasten oder helles Blaugrau außerhalb des Kastens. Das liegt daran, dass man im Gif-Format nur eine Farbe einstellen kann. Das würde nicht so gut aussehen und wäre für eine gute Internetagentur unakzeptabel.

Ich habe also hier oben beim Hippie das Png-Format eingesetzt und obwohl die Hintergrundfarbe unterschiedlich ist (einmal weiß und einmal helles Blaugrau für den Textkasten), erkennt man keinen Farbsaum.

Ein Nachteil des Png-Formats aus meiner Sicht ist die etwas höhere Dateigröße. Für sehr große Bilder ist das Png-Format nicht unbedingt die beste Lösung.

Ein weiterer Nachteil ist, dass im Internet Explorer 6 und 5.5 die Transparenz der PNG-Dateien nicht angezeigt wird. Hierfür habe ich aber auch eine Lösung gefunden. Den IEPng-Fix von TwinHelix-Design aus Timaru, Neuseeland.

Hier eine Anleitung:
- Downloade die Datei inpngfix.zip von dieser Seite
- Lade (z.B. per FTP) die Dateien iepngfix.htc und blank.gif auf deinen Webspace
- Baue einen CSS-Befehl in deine Webseite ein: style=”behavior: url(iepngfix.htc);”
z.B. <img style=”behavior: url(iepngfix.htc);” border=”0″ src=”beispiel.png” width=”208″ height=”100″ alt=”Beispieltext”>

Ich gehe davon aus, dass Ihr den IE6 nicht installiert habt, um es dann auch testen zu können. Um zu schauen ob alles mit der Transparenz unter IE 6 und IE 5.5 geklappt hat, würde ich vorschlagen, dass Ihr den IE-Tester installiert und die Seite damit Testet.

Viel Erfolg

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

Die Bilddatenbank Depositephotos ist zwar noch jung, hat aber bereits über 2.5 Millionen Bilder zur Auswahl. Ausserdem gibt es noch weitere sehr interessante Vorteile gegenüber anderen Bilddatenbanken:
1. Deopsitphotos hat einen sehr günstigen Preis für eine Bildlizenz (z.B. 1 US-Dollar für ein 866×577 Pixel-Bild). Bei Istockphoto.com zahlt man nicht selten ein Vielfaches davon. (Häufig bieten Fotografen und Künstler Ihre Werke sowohl bei Istockphoto als auch bei Depositphotos an. So kann es durchaus vorkommen, dass man für das gleiche Bild ein sehr viel günstigeren Preis bei Depositphotos bezahlt.)
2. Depositphotos bietet eine brauchbare Auswahl an hochwertigen Bildern an
Die Qualität ist ähnlich, wie bei Istockphoto. Häufig findet man, wie bereits unter Punkt 1 erwähnt, die gleichen Bilder.

3. Depositphotos erlaubt eine Online-Verwendung von größeren Bildern (ohne Größenlimitierung) in Webdesigns, sofern das Bild nicht downgeloadet werden kann und es eine ins Design eingebundene (veränderte) Verwendung des Bildes ist z.B. als Hintergrundbild. Ansonsten ist auf Webseiten eine maximale Bilddarstellung von 1024×798 Pixel erlaubt. (Das ist mehr als bei den meisten anderen Bilddatenbanken (inkl. Istockphoto – dort nur 800×600).
4. Die Angabe der Quellen unter einem Bild von Depositphotos.com ist keine Pflicht. Voraussetzung dafür ist, dass das Bild keinen medialen/journalistischen, sondern einen kommerziellen Charakter hat (also z.B. auf einer Webseite, die das Ergebnis eines Kundenprojektes ist und eher Präsentations- und Werbecharakter hat).
5. Die Benutzerführung bei Depositphotos ist sehr intuitiv (sogar unkomplizierter als bei Istockphoto.com). Die Suche nach Bildern ist sehr einfach und der Bestellvorgang für Credits sehr schnell. Ausserdem gibt es viele Tools die bei der Bilder-Suche und Organisierung helfen.

6. Alle Illustrationen lassen sich auch kostengünstig als Bilder runterladen. Bei Istockphoto kann man Illustrationen nur zu dem vollen Illustrations-Preis runterladen. In diesem Bereich lassen sich die Kosten also um ein Vielfaches drücken.

Fazit: Alles in Einem ist die Bilddatenbank Depositphotos.com ein super Kandidat  für eine wirklich gute Istockphoto-Alternative.

Neben Depositphotos gibt es auch andere Alternativen, die ich aber als weniger brauchbar einschätze z.B. wegen eines höheren Preises oder schlechteren Lizenzbedingungen:

http://www.morguefile.com/
http://www.photocase.de
http://stockfresh.com/
http://www.123rf.com/
http://www.shutterstock.com/
http://www.fotolia.com
http://www.deviantart.com/
http://www.flickr.com/
http://www.freedigitalphotos.net/
http://www.imagechef.com/
http://www.dreamstime.com
http://www.bigstockphoto.com
http://easy.agefotostock.com
http://www.sxc.hu/
http://www.pixmac.com/
http://www.digitalstock.de/
http://www.panthermedia.net/

Das größte Manko bei den Istockphoto-Alternativen ist allerdings die kleinere Auswahl. Ausserdem haben Bilder bei Royalty-Free-Bildagenturen häufig eine schlechtere künstlerische Qualität. Manche verlangen auch einen Copyright-Hinweis, was das Ausschlusskriterium schlechthin ist.

Zusammenfassung: Es gibt endlich eine gute Istockphotoalternative.  Umstieg auf die alternative Bilddatenbank Depositphotos kann sich als sehr lohnenswert herausstellen. Dies gilt auch jetzt schon! Depositphotos ist in meinen Augen eine super Alternative, da einige (für Webdesigner) wichtige Lizenzbedingungen besser sind als bei Istockphoto (z.B. eine höher erlaubte Pixelgröße der Bilder in Webdesigns). Die Qualität der Bilder ist sehr gut (teilweise die gleichen Bilder wie bei Istockphoto.com).  Ich nehme an, dass dort ein engagiertes Team daran arbeitet, weniger gute Bilder auszusortieren, so dass man dort schneller das gewünschte Foto bzw. die gewünschte Vektorgrafik finden kann. Hauptkriterium ist und bleibt wahrscheinlich der gute Preis von Depositphotos. Man kommt extrem günstig an brauchbares Bildmaterial. Soweit ich das momentan sehen kann, sind dort alle Bilder ab 50 US-Cent zu haben. Das ist einfach ein tolles Preis-Leistungsverhältnis.

Hinweis: Alle Angaben auf dieser Seite sind ohne Gewähr. Lizenzbedingungen bei Bildagenturen können Änderungen unterliegen.

Eine tolle Idee von der Agentur aus Stockholm.

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

Die Webseite findet man hier

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.

Unglaublich aber wahr: Unter http://www.sumopaint.com/web/ kann man online Bilder kostenlos bearbeiten und zwar mit vielen Funktionen die Top Bildbearbeitungsprogramme (wie z.B. Photoshop) bietet. Klar an Photoshop (dem Top-Photobearbeitungsprogramm No.1) kommt kein anderes Fotobearbeitungsprogramm wirklich ran, aber das was man unter sumopaint.com machen kann, wird schon den einen oder anderen Designer begeistern. Man muß noch nicht einmal Bildbearbeitungs-Software installieren. Gerade die Werkzeugpalette, Filter, Styles, Brushes, Paletten, Shapes, Layer etc. sind so wie einer Top Bildbearbeitunssoftware. Da kann man mit den eigenen Grafiken schon beachtliches anstellen.

Kostenlos und Online: Wie es aussieht hat die Freeware bzw. kostenlose Internetsoftware Sumopaint noch eine große Zukunft vor sich.

Tipp: Wenn Ihr auf  http://www.sumopaint.com/web/ geht, dann einfach auf das große Vorschaubild klicken, dann kommt Ihr direkt zum Online-Editor. Um Bilder zu bearbeiten müßt Ihr nicht registriert oder angemeldet sein. Man kann also sofort loslegen!

Nachtrag: Pixlr.com – Auch ein gutes Online-Bildbearbeitungstool

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!

Hier klicken, um die Webseite aufzurufen.

Bei der Corporate Identity spielt das Logo eine zentrale Rolle, da es zur Persönlichkeit des Unternehmens maßgeblich beiträgt.

Hier nun 10 Tipps für ein gutes Logo, da Internetagenturen und Webdesigner auch häufig beauftragt werden, zusammen mit der Webseite, ein neues Logo zu entwerfen.

1. Ideenfindung: Für die Ideenfindung ist es wichtig zu verstehen, wie sich das Unternehmen selbst sieht. Hier stellen sich wichtige Fragen bezüglich des Unternehmens und dessen Leistungen, Zielgruppen, Schwerpunkte, Größe, Wunschimage, Vorteilen gegenüber den Mitbewerber, Preislage  etc.

2. Vektorgrafik: Logos sollten stets mit einem Vektorgrafikprogramm erstellt werden, damit dieses auch hinterher in allen Größen skalierbar sind; z.B. wenn ein größeres Plakat erstellt werden soll.  Ein sehr professionells Programm ist der Illustrator von Adobe. Ein gutes kostenloses Opensource-Programm ist Inkscape.

3.  Schriftart: Wenn möglich sollte man bei maximal zwei Schriftarten bleiben. Auch ist der Wiedererkennungswert besser, wenn die Schriftart nicht so häufig vorkommt  (Siehe Coca Cola, Walt Disney oder Ford).

4. Lesbarkeit: Das Logo sollte noch gut erkennbar sein, selbst wenn es stark verkleinert wird oder wenn die Hintergrundfarbe wechselt.

5.  Symbole: Logos bestehen meistens aus der Schrift und einem Symbol. Das Symbol sollte grob gehalten werden, um auch hier eine gute Erkennbarkeit zu garantieren. Auch in Schwarz-Weiß, sollte der Wiedererkennungswert immer noch gegeben sein.

6. Copyright: Logos sollten nicht der Konkurenz ähneln, da man hinter mit großen finanziellen Verlusten rechnen kann vor allem in Bezug auf die nachträgliche Änderung des Logos und den Kosten, die aus einem Gerichtsstreit hervorgehen.

7. Auswahl: Der Kunde sollte das Logo auswählen und wirklich zufrieden damit sein. Es ist besser dem Kunden dafür eine Vielzahl an möglichen Logos zu präsentieren, um eine Übereinstimmung zu erreichen. Meistens reichen hierfür 10 Entwürfe unterschiedlicher Logos aus. Falls man nicht auf einen gemeinsamen Nenner kommt, kann man dem Kunden eine Auswahl unterschiedlicher Logos verschiedener bereits existierender Firmen präsentieren, damit man weiß, welche grobe Richtung man einschlagen sollte, ohne in Copyrightsverletzungen hineinzugeraten.

Manchmal reicht es aus ein professionell gemachtes interaktives Video ins Netz zu setzen, um den Surfer zu begeistern. So hat sich auch ein französisches Modelable dazu entschlossen, eine Webseite mit einem beeindruckendem interaktiven Web-Video zu gestalten.

Zur Seite

Zur Präsentation

Volkswagen in den Niederlanden hat ein sehr anschauliche Video-Webpräsentation mit sich bewegenden Videosquenzen

Browsershots.org

Mit Browsershots kann man sich bequem eine Screenshot des eigenen Webdesigns anfertigen lassen, um es auf verschiedenen Browser-, Javaskript-, Flash- und Windowsversionen zu testen. Auch kann man verschiedene Bildschirmauflösung einstellen. Oder man testet die Webseite unter verschiednen Betriebsystemen.

Die Webseite der australische Regierung findet man hier.

Oder so wie bei den M&Ms in Frankreich, wo man eine Strasse in der City als Navigation nutzt:

Zur Webseite der französischen M&M-Street gehts hier entlang.

Immer mehr Unternehmen und Geschäftsleute sehen das Internet als eine unverzichtbare Plattform sich zu präsentieren. Als Internetagentur sollte man daher beim Gestalten von Internetauftritten folgende Regeln beachten:

1. Unternehmens-Logo
Das Logo ist das Markenzeichen des Unternehmens und Teil der Corporate Identity (Unternehmensidentität). Daher sollte dem Logo beim Webdesign besondere Gewichtung beigemessen werden. Das Logo muß an einer prominenten Position (meistens oben links) auf der Webseite erscheinen. Es darf nicht zu stark komprimiert sein. Ausserdem sollte die Kanten genügend Klarheit, Glätte und Schärfe aufweisen.

2. Text auf der Internetseite
Eine klare sachliche Schriftart ist Pflicht. Es empfiehlt sich hier Arial, Times New Roman, Verdana oder Garamond.

Jede Schrift sollte gut lesbar sein.  Einstellungen von 10 bis 24 pt sind normal. Es sollte im Zweifelsfall die Variante mit der größeren Schrift gewählt werden.

3. Farben des Internetauftritts
Die Farbwahl auf der Webseite sollte die Philosophie und Strategie des Unternehmens unterstreichen. Hintergrundfarben sollten in einem angemessenen Kontrast zur Schrift stehen. Warme Farben sollten eher nicht mit kalten Farben gemischt werden. Es gibt zwar Ausnahmen zu dieser Regel; aber so grundsätzlich bleibt man im gleichen Bereich.

Wichtig zu erwähnen wäre, dass man von den Standardfarben weg kommt und in der Farbwahl sehr individuelle Farben wählt. Anfänger verwenden häufig Standardfarben und daher sieht man diese häufig auf Webseiten mit niedrigem Niveau.  Wenn man auch Standard-Farben verwendet, so rutscht man ein bisschen in diese Sparte. Diese Assoziation gilt es zu vermeiden.  Am besten man verwendet Farbverläufe. Farbverläufe unterstreichen die Exklusivität.

Den Farben sollte besonderes Augenmerk gewidmet werden, da die Farbwahl entscheidend ist, wie der Betrachter der Webseite das Unternehmen wahrnimmt.

4. Bilder auf der Webseite
Die auf der Webseite verwendeten Bilder sollten zum Unternehmen passen. Zuerst sollte man sich die Zielgruppe anschauen. Handelt es sich um eine sehr jugendliche Zielgruppe, so verwendet man Bilder, welche Teenager als ansprechend empfinden.

Die Bilder auf der Webseite sollten alle ein sehr hohe Qualität haben. Professionelle Fotos findet man in Bildagenturen. Gerade bei größeren Firmen ist es häufig notwendig einen professionellen Fotografen zu engagieren. Aber auch bei der Aufbereitung der Bilder für das Internet sollte man lieber auf bessere Qualität achten. Ein beliebtes Bildformat ist JPEG. Hier gilt zu beachten, dass die Kompression nicht zu stark eingestellt wird. Artefakte auf Bildern gilt es gänzlich zu vermeiden.

5. Navigation der Internetseite
Das Navigieren sollte gerade auf Unternehmensseiten sehr benutzerfreundlich sein. Eine klare, übersichtliche Navigation spielt hier eine wichtige Rolle. So wie man z.B. bei Ikea intuitiv durch die Ausstellungsräume geführt wird, sollte der Surfer auf der Webseite des Unternehmens leicht zu der gewünschten Information gebracht werden. Wichtiges sollte von Unwichtigem unterschieden werden. Z.B. kann man den Menüpunkt “Impressum” aus der Hauptnavigation streichen und ans Ende einer jeden Webseite verbannen. Wichtige Menüpunkte kommen an eine gut sichtbare Stelle. Wichtigkeit sollte sich gerade bei der Navigation daran orientieren, was für den Kunden wichtig ist, damit dieser schnell zum Ziel kommt. Typisches Negativbeispiel ist der Punkt “Philosophie”. Mal ganz ehrlich: Wen interessiert schon die Unternehmensphilosophie. Also auch hier ganz nach unten auf die Webseite.

6. Einbindung von Schlüsselworten in die Webseite
Beim Webdesign für Unternehmen sollten die Schlüsselworte des Produktes oder der Dienstleistung in die Seite mit einfließen, um eine bessere Positionierung unter diesen Begriffen bei Suchdiensten zu erreichen. Sowohl in den Metadaten der Webseite, als auch auf der Webseite selbst, sollten die Schlüsselworte immer wieder aber auch nicht zu häufig auftauchen. Am besten man fokussiert unterschiedliche Schlüsselwortkombination für die verschieden Seiten des Webautritts, wobei die Hauptseite die wichtigste Schlüsselwortkombination beinhaltet.

7. Qualitätskontrollen
Egal ob beim Design, Text, Erreichbarkeit oder Funktionalität. Fehler sollten frühzeitig erkannt und behoben werden. Gerade bei Unternehmen darf die Webseite keinen Makel aufweisen. Qualitätskontrollen sollten daher immer wieder durchgeführt werden. Laden alle Bilder? Ist jede Seite erreichbar? Gibt es Rechtschreib- oder Grammatikfehler? Funktionieren die Formulare und Programme auf der Webseite? Wie macht sich die Webseite auf anderen Systemen mit unterschiedlichen Browsereinstellungen?

Geschäftlicher Erfolg oder Mißerfolg hängt immer mehr von einem seriösen Internetauftritt ab. Deshalb sollte jeder Webdesigner, der für Unternehmen bzw. Unternehmer Webseiten gestaltet, sich diese Regeln sehr zu Herzen nehmen.

Den Katalog kann man per Schieberegler blättern.

Probiert es mal aus:
http://www.girlsmusthave.com/

Die Idee ist zwar schon älter, aber hier gefällt mir die Umsetzung mit Flash.
Auch ist der Katalog schön mit der restlichen Webseite integriert.

Erst wenn man die Maus klickt, kommt die Navigation zum Vorschein und selbst dann ist es nicht einfach.

Auch wenn das Flash nicht schlecht aussieht, muß man schon ein kleiner Mausakrobat sein, um vernünftig Navigieren zu können.

Aber seht selbst:
http://www.nickad.com/

Wir kennen bestimmt noch alle diese 3D-Bücher aus unseren Kindertagen, wo man bestimmte Teile raus ziehen kann, damit mehr Interaktivität beim Lesen oder Betrachten des Buches entsteht.

Der Webdesigner des Restaurants in Dempsey, Singapur hatte die Webdesignidee, dies auch für seinen Auftraggeber umzusetzen.

Die Webseite finden Ihr hier

Dieses Menü gehört zu der Webseite der Grafikdesignfirma Amoebacorp aus Toronto, Canada.

Für mich bislang unverständlich, warum die Preise für Photoshop und die anderen Produkte der CS4 Serie sich in Amerika so sehr von den Preisen in Deutschland unterscheiden. Hier sind Sie momentan ca. doppelt so teuer.

Der Preisunterschied wird auch durch den Dollarkurs verstärkt:

Bei dem günstigen Dollarkurs lohnt sich der Kauf in Amerika sehr.

Offizieller Preis von Adobe in Deutschland für
Photoshop CS4:

Upgrade: 296 Euro
Vollversion: 1010 Euro

Offizieller Preis von Adobe
in den USA für Photoshop CS4:

Upgrade: 199 US-Dollar (135 Euro)
Vollversion: 699 US-Dollar (ca. 475 Euro)

Oder Dreamweaver CS4

Upgrade: 296
Vollpreis: Deutschland: 570 Euro
USA:

Upgrade: 199 Dollar (135,31 Euro)
Vollpreis 399 Dollar (271 Euro)

Oder ganz krass bei der Creative Suite CS4 Mastercollection:

Deutschland:
Upgrade 1188 Euro
Upgrade: Vollpreis 3568 Euro

USA:
Upgrade 899 Dollar (611 Euro)
Vollpreis: 2499 Dollar (1699 Euro) – Preisunterschied 1869 Euro

Für den Preisunterschied von 1869 Euro kann man sich echt was schönes kaufen. Z.B. einen Gebrauchtwagen.

Beim einem Kauf aus den USA kämmen noch eventuell Zollgebühren 19% (USt)
und der Umstand es u.U. beim Zoll abholen zu müssen.

Englisch sollte man natürlich auch ein bisschen können, da die Version aus den USA in Englisch ist. Oder man lernt ein paar Vokabeln, was die einzelnen Funktionen bedeuten. Vielleicht kommen so schätzungsweise in etwa 300 Wörter zusammen.

http://www.adidas.com/campaigns/y-3/fw08/

Modelpräsentation mal ganz anders: Die Models sind per Flashvideo animiert und laufen, wie auf einem Laufsteg.

Nachtrag: Jetzt auch bei H&M: http://www.hm.com/de/

Barcinski-jeanjean.com

Aufwendige Flashwebseiten brauch nicht selten lange Wartezeiten. Immer wieder sehen dann potentielle Kunden von der weiteren Betrachtung der Webseite ab. Sie haben schlichtweg kein Bock zu warten.

Das Spiel hält die Besucher auf der Webseite.

Ein tolle Idee des Amsterdamers Webdesignbüros bzw. der Webdesigner Barcinski und Jeanjea.

Um besondere Brusheffekte (Pinseleffekte) zu erzeugen reicht die Auswahl an vorhandenen Brushes meistens nicht aus.

Hier nun ein paar Quellen für Photoshop-Brushes mit denen man interessante (meist abstrakte) Effekte in Photoshop erzeugen kann:

http://qbrushes.com/

http://getbrushes.com/

http://www.psbrushes.net

http://www.brusheezy.com/

Hier klicken für die Downloadseite dieses Vektorgrafiken-Iconsets.

Die Grafiken sind im Vektor-PSD und PNG-Format vorhanden. Die Nutzung ist uneingeschränkt für den privaten und gewerblichen Gebrauch. Man darf die Grafiken lediglich nicht weiterverkaufen.

Es kommt nicht häufig vor, dass man Grafiken eines anderen Designers einfach so nutzen kann, ohne auch nur eine Gegenleistung zu erbringen.

Die Bereitstellung der kostenlosen Vektorgrafiken von Deziner Folio bekommt daher meine volle Achtung.

Die meisten anderen Freebies-Anbieter verlangen doch zumindest einen Hinweis auf den Autor.

Aber informiert euch lieber selbst nochmal auf dessen Webseite. Vielleicht habe ich einen Hinweis übersehen. Ich denke zwar nicht aber man kann ja nie wissen. Desahalb lieber hier der Spruch: Alle Angaben ohne Gewähr!

So oder so ähnlich werden professionelle Webseiten in der Zukunft aussehen, dank der Webdesignkombination von Flash und Flashvideo (flv).

Gerade wenn das Internet schneller laden wird und die Programme zur Erstellung von Flashseiten mit integrierten Flashvideos (FLV etc.) vereinfacht werden, können wir uns darauf einstellen, dass immer mehr Webdesigner solche Webseiten in Flash erstellen werden.

SEO-bewußte Webdesigner mögen zwar noch Vorbehalte haben, aber das wird sich in naher Zukunft auch erledigt haben.

Als SEO (Suchmaschinenoptimierer) hat man allerdings gelernt, dass Suchmaschinen gerne mit Text gefüttert werden möchten.

Es besteht also ein Konflikt zwischen Design vs SEO, der gelöst werden möchte.

Aus der Sicht des Endverbrauchers bzw. des Internet-Surfers kann ich durchaus verstehen, warum viel Text, als unverdauter Brocken eher abstoßend ist.

Beim Surfen durch das Internet verwendet die meisten Leute Google, um auf unterschiedliche Webseiten zu gelangen.

Der Surfer besucht eine Webseite nach der anderen. Und wenn er gerade von Webseiten gekommen ist, die ihn mit unnötigen Informationen zugeballert haben, dann ist er sicherlich heilfroh, wenn er mal einen Internetauftritt mit paar schönen oder witzigen Bildern sehen kann und er auf einen Schlag erkennen kann worum es geht, z.B. anhand von gut geliedertem Text.

Um aber zu vermeiden, dass die Suchmaschinen zu wenig Text bekommen, sollte man das Webdesign so umsetzten, dass die Besucher nicht vergrault werden und die Suchmaschinen trotzdem Ihre Nahrung bekommen. Hier spielt die Kunst mit ein, Wichtiges von Unwichtigem zu unterscheiden.

Grafisch könnte man den Text auf der Webseite mit schönen und thematisch passenden Symbolen oder Bildern auflockern. Unwichtiger Text sollte definitiv kleiner gehalten und weiter unten platziert werden. Wichtiges kann man mit Fettschrift und einer größeren Schriftart hervorheben, jedoch so, dass alles gut zusammenpasst.

Die Auswahl der Bilder sollte definitiv ansprechend sein und eine Botschaft vermitteln. Gerade wenn man es witzig macht, kann man die Lust des potentiellen Kunden steigern, die Werbebotschaft zu empfangen.

Die folgende SEO-Agentur aus Edmonton, Kanada hat das gut umgesetzt:

ten24media

Texte und Bilder passen hier gut zueinander. Es fällt fast gar nicht auf, dass die Seite sehr viel Informationen vermittelt. Man spricht von guter Website-Usability oder auf deutsch Webseiten-Benutzerfreundlichkeit.

Zur Webseite geht es hier lang (Leider ist das Design geändert worden. Den Querbalken gibt es dort nicht mehr)

Ich finde es eine gute Design-Lösung, da man das Gefühl einer echten Kunstgalerie bekommt. Dort wären Bilder ja auch nicht untereinander sondern nebeneinander aufgehängt.

Zu finden ist die Webseite hier

Retrolook-Webdesigns findet man immer häufiger. Hier wird jedoch neue Technologie neben Nostalgieelemente gesetzt. Der Raumfahrer und die Frau im Kleid errinern an die 60iger. Das Fordauto sticht deshalb durch den inhaltlichen Kontrast gut herraus und bildet so das Zentrum der Aufmerksamkeit.

Die Australier lieben es heiß.

Diese Flash-Website ist einfach nur beeindruckend! Da hat sich die Internetagentur wirklich viel Mühe mit dem Webdesign gegeben. Das Produkt läßt sich wirklich sehen. Beeindruckt ist für mich vor allem das Fullscreen-Flashdesign.
Diese Flashseite ist erreichbar unter: www.lynxeffect.com.au

Webdesigner müssen sich langfristig auf neue Aufgaben einstellen. Die Handymanie (iPhone und Co.) stehen kurz bevor.  Immer mehr Jugendliche und Geschäftsleute nutzen das Internet per mobilen Endgeräten. Bereits 3 Millionen Deutsche nutzen das Handy, um Unterwegs in Internet zu gehen (Quelle: Studie “Mobile Web Watch 2008″).

Auch Matt Cutts (Googles wichtigster Mann) hat dies erkannt und postet seit kurzem in seinem Blog über iPhone-Themen (http://www.mattcutts.com/blog/).

Deshalb wird auch das Webdesign für Handys immer wichtiger werden. Webdesigner müssen sich langfristig, darauf einstellen.

Diese Aufgabe ist jedoch keine Schwierige. Webseiten für Handys zu designen ist relativ leicht. Alles eine Frage der maximalen Bildschirmbreite bzw. Bildschirmauflösung.

Hier eine Übersicht:

Normale Handys: 60 x 200 px

SmartPhones: 320 x 240 px (quer)

PDAs: 480 X 320 px (quer).

Das neue iPhone 3G von Apple hat eine Aulösung von 480 x 320 Pixeln.

Modelle wie das iPhone 3G werden sich langfristig durchsetzten und deshalb sollten Webdesigner, die auch für solche mobile Endgeräte designen, die Seiten zumindest auf eine Pixelbreite von 480 einstellen. D.h. die Seiten bzw. die Handyversionen der Webseite sollten bei einer horizontalen Auflösung von 480 Pixel immer noch gut aussehen.

Ein größeres Format ist schlecht vorstellbar, da es in naher Zukunft kaum ein größeres Handy geben wird, dass sich jemand gerne in die Hosentasche steckt.

Wer die kleineren Handys abdecken möchte, kann dementsprechend eine kleinere Auflösung wählen. Jedoch kann man davon ausgehen, dass die meisten mobilien Geräte, die häufig für das Internet genutzt werden (z.B. von Geschäftsleuten), eine Auflösung von 320 px (Breitenformat) nicht unterschreiten werden.

Die meisten Besitzer kleinerer mobilen Geräte gehen in der Regel sehr selten damit ins Internet.

Das Internet breitet sich in immer mehr Bereiche unseres Lebens aus. Immer mehr Leute nutzen das Handy für das Internet. Die ersten guten Internflatrates für Handys sind im Anmarsch. Der Nutzungsumfang von mobilen Internetinhalten nimmt stätig zu. Internetnutzung per Handy wird immer attraktiver.

Irgendwann wird man einen kleinen Knopf am Handgelenk oder auf der Brust drücken und schon wird vor einem das Internet in beliebiger Größe projiziert. Eine interaktive Verbindung zu jedem, jederzeit und überall wird so möglich sein. Dann spielt die Auflösung auch keine Rolle mehr. Bis dahin jedoch sollten Webdesigner, die fürs Handy designen, Mindestgrößen berücksichtigen.

strg + a : Alles markieren

strg + d: Alles demarkieren

strg + shift + i: Markierung umkehren

strg + Pfeiltasten: Das Markierte (zusammen mit der Markierung) verschiebt sich je nach Pfeiltaste.

strg + 0 (Null): Bild passt sich exakt dem Rahmen an

strg + Pluszeichen: Reinzoomen (innerhalb des Fensters)

strg + Minuszeichen: Rauszoomen (innerhalb des Fensters)

strg + Alt + Pluszeichen: Reinzoomen (zusammen mit Fenster)

strg + Alt + Minuszeichen: Rauszoomen (zusammen mit Fenster)

Wenn man “alt” drückt, zeigen sich die Buchstaben im Menü, die man zusätzlich drücken muß, um das Untermenü aufzuklappen (z.B. Alt + T klappt das Filtermenu auf).

Tabulator: Paletten einblenden/ausblenden

Schnellzugriff für die wichtigsten Werkzeuge: V: Bewegen, C: Zuschneiden, B: Brush, T: Schrift, E: Löschen, S: Stempel, M: Viereckige Markierung, G: Farbverlauf, I: Farbe auswählen, R: Blur-Tool, H: Hand, Z: Lupe (alt: rein- /rauszoomen)

strg + space (Lupe Reinzoomen)

alt + space (Lupe Rauszoomen)

strg + c: Kopieren

strg + v: Einfügen

strg + x: Ausschneiden

strg + f: Letzten Filter anwenden

strg + e: Ebenen zusammenfügen

strg + shift + e: Sichtbare Ebenen zusammenfügen

strg + n: Neues Dokument

Es gibt noch viel mehr Tastenkürzel, aber die hier verwende ich am häufigsten und diese müssten bei allen gängigen Photoshopversionen 4, 5, 5.5, 6, 7, 8 (CS), 9 (CS2), 10 (CS3) und für die kommende Photoshopversion CS4 funktionieren.

Dreamweaver CS4 ist im Moment noch Beta, aber die Aussichten auf eine gelungenes Projekt, das bald herauskommt, sehen nicht schlecht aus.

Wichtige Neuerungen im Überblick:

1. Mit “Live View” kann man jetzt das Webdesign unter realen Browser-Bedingungen testen.

2. Man kann jetzt Photoshopfiles (PSD) einbinden, um damit verlustfreies Skalieren zu ermöglichen.

3. Dreamweaver CS4 zeigt externe Codes (CSS, JavaScript, PHP, oder XML),  in einer Topbar, die das Dokument beeinflussen. Fehler können so schneller behoben werden.

4. Das Userinterface erlaubt direkten Zugriff auf Photoshop, Illustrator und Flash.

5. Leichterer Export der Webseiten in gesicherte PDF-Dateien ist jetzt möglich.

6. Das Userinterface kann jetzt noch leichter angepasst werden.

7. Das Layout von Dreamweaver CS4, wurde bezüglich den anderen Softwarelösungen von Adobe, wie z.B. Adobe Photoshop angepasst.

8. Es gibt jetzt einen verbesserter Ajax und Javascriptsupport.

9. Der Umgang mit CSS ist jetzt noch verständlicher.

Fazit: Neuere Versionen von Dreamweaver CS4 haben sich bislang immer gelohnt, auch wenn der Preis nicht immer der Niedrigste ist.

Downlaod der Betaversion von Dreamweaver CS4

Spekulationen zufolge soll die Vollversion (Fertigversion) Dreamweaver CS4 Ende dieses Jahres bzw. Anfang nächsten Jahres herauskommen.

Darauf hat die Webdesigner-Gemeinschaft lange gewartet. Google hat in Zusammenarbeit mit Adobe ganze Arbeit geleistet. Flash-Webseiten können endlich gespidert werden. Zwar können noch nicht alle Inhalte durchsucht werden, aber dafür werden jetzt Links und Texte erkannt.

Endlich können sich auch die SEO-bewußten Webdesigner an Flash wagen und das Internet verschönern. Gerade bei Menüs in Flash gab es große Zurückhaltung. Das ist jetzt eine Sache der Vergangenheit.

Diese Neuerung ist ein Meilenstein in der Webdesignergeschichte.

Und das Beste an dem Ganzen: Man benötigt keine Plugins oder Änderungen im Code. Einfach wie gewohnt Flashseiten erstellen und posten. So einfach ist das!

1. Inhalt

2. Ästhetik

3. Benutzerfreundlichkeit

Zu 1: Der Inhalt einer Webseite ist wichtig, um Futter für die Suchmaschinen bereitzustellen. Auch ist es wichtig den Benutzer ausreichend informiert zu halten.

Zu 2: Die  Ästhetik spielt eine wesentliche Rolle, um Vertrauen zu schaffen.

Zu 3: Die Benutzerfreundlichkeit einer Internetseite stellt sicher, dass der Benutzer sich leicht zurechtfindet und das bekommt, wonach er sucht.