Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Gestaltungsgrundlagen für Webdesigner

Welcher Inhalt?

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Hier geht es um Aktualität und Passgenauigkeit des Inhalt für die geräteabhängige Darstellung, die wichtiger als alle technischen und gestalterischen Details ist. Beispiele für Fachthemen, für Unterhaltung und für Shops zeigen, wann die Gestaltung jeweils gelungen ist.
09:44

Transkript

Welche Information passt in welches Format? Das ist die zentrale Frage beim Webdesign. Unabhängig von der Gestaltung, wie ich zunächst als Gestalter vorgehen würde, welche Typographie mir gefällt oder welche Farben, wollen wir uns hier einige Beispiele angucken, um konkret daraus Erfahrungen zu ziehen. Fangen wir mal mit einer klassischen News-Seite an. Die Deutsche Welle hat beispielsweise eine Seite, die zunächst sehr nüchtern, schlicht und seriös daher kommt. Das heißt, Informationen werden hier wenig marktschreierisch, sondern sehr zurückhaltend dargebracht. Zunächst in einer kompakten Form, sodass ich hier im Hauptmenü über verschiedene Hauptbegriffe mich in die Tiefe der Website hier vortasten kann. Des Weiteren gibt es Schlagwörter, die direkt hier Unterseiten aufrufen. Dann haben wir einen großen Slider, das heißt, hier gibt es jeweils zentrale Themen und kleinere News, die hier wie ein Newsticker visuell entlanglaufen. Das heißt, wenn ich mich aktuell auf dem Laufenden halten will, so bekomme ich jetzt in diesen vorderen Bereich ab diesem Punkt schon alle zentralen Informationen dargestellt. Etwas weiter unten sieht das Ganze wesentlich nüchterner aus, ähnelt fast eher einer Tageszeitung, das heißt ganz nüchterne Typographie. In dem Fall hier eine Serifenschrift mit etwas kleinerem Schriftgrad zum Lesen, mit kleinen Bildern zum Anlesen und natürlich kann ich mich von hier aus überall in die jeweiligen Unterseiten einklinken. Die Redaktion empfiehlt: Das sind natürlich kleine Anleser von weiteren Informationen, die hier erreicht werden sollen. Dazu gibt es auch noch kleine Videoblogs, die hier mit verlinkt werden oder kleine Videobeiträge. Das heißt, die Website kommt zunächst sehr nüchtern daher, mit leichtem kühlen Farbton in blau und natürlich mit diesem leichten Papierschatten im Hintergrund. Kommen wir mal zu einem etwas anderen Fachthema. Wenn wir uns jetzt mehr mit Technik beschäftigen würden, so darf ich Ihnen mal Curved vorstellen. Curved ist eine Plattform, wo viele News rund um Technik und IT gesammelt werden. Da geht es natürlich knallhart um Fakten, da geht es um die neuesten Features, die trendigsten Geräte und die schnellsten Prozessoren. Und hier sehen wir, ist die Ansprache gleich ganz anders. Wir haben hier zum einen große Headlines, wir haben eine sehr markante Typographie sehr kontrastreich mit einer serifenbetonten Type und wir haben natürlich jeweils viele, viele Bilder, teilweise auch Symbolbilder. Das heißt, hier zum Beispiel stellvertretend für ein konkretes Gerät oder für ein Thema, aber auch konkretere einzelne Geräte oder diese Bilder, die halt natürlich die Technik von innen zeigen. So, und das ist natürlich hier in der Menge erschlagend und ganz zum Schluss gibt's noch mal so ein Abbinder, wo hier verschiedene News vorgestellt werden. Auch hier die Farbgebung insgesamt eigentlich recht kühl. Wir arbeiten hier mit Blau-grau-Tönen, aber doch sehr große Schlagzeilen mit diesen knalligen Störern und das bedeutet, wenn User sich zum Beispiel hier die Nachrichten anschauen zum Apple HomePod beispielsweise, dann können Sie dann abstimmen und die meiste Meinung wird sozusagen hier als Tag auf das Bild draufgesetzt, das ist natürlich auch sehr aggressiv, wiederholt allerdings dann auch die Markensprache vom Logo. Curved als knallgelbes Logo ist natürlich hier als auch nicht unbedingt zurückhaltend gedacht. Die Menüstruktur ist hier mit großen Mega-Menüs gestaltet. Mega-Menüs, das sind diese Ausklappmenüs, die dann noch mal eine Bildvorschau und jeweils Texte zeigen oder sogar noch weitere Untermenüs hier. Mega-Menüs sind sehr aufwendig in der Pflege hinterher. Das heißt, wenn Sie sich später mit einem kleinen Website-Projekt beschäftigen, reicht erst mal ein ganz normales Standard-Menü. Kommen wir weiter in den Unterhaltungsbereich. Der New Yorker ist eine weltweit bekannte Zeitschrift im Unterhaltungsbereich, spricht natürlich auch eher intellektuelles Publikum an und dabei ist die Typografie und die Arbeit mit Weißräumen sehr prägnant. Die Weißräume werden hier großzügig gestaltet, sogar bei Anzeigen hier drumrum im Hauptmenü. Das bekannte Logo ist natürlich hier oben eingeblendet und wenn ich weiter nach unten scrolle, so sehe ich hier auch Illustrationen und Bilder gleichzeitig. Das heißt, hier wird auch viel mit Skizzen, Illustration und Grafiken gearbeitet und die eigene Type, also die New Yorker-Headlineschrift, wird hier selbstverständlich immer wieder eingesetzt und ist natürlich sofort auf den ersten Blick erkennbar. Hier allerdings auch mit großen Schriftgraden und mit kurzen Anlesern, viel Weißraum und ganz feinen, leichten Linien, sodass das alles sehr offen, hell und locker wirkt. Kommen wir zum Mode-Bereich. Wenn wir hier bei der Elle beispielsweise vorbeischauen, so tritt die Elle oder auch andere Modeportale so auf, dass natürlich das Logo viel in schwarz-weiß arbeitet, besonders hier auch bei den Hauptmenüs. Das Ganze ist also hier ganz simpel gehalten, sodass ich mich da auch sehr schnell durchbewegen kann, und natürlich dadrunter dann die entsprechenden Informationen und ich dann Unterseiten direkt aufrufen kann. Also schwarz-weiß auch hier und mit ganz leichten Grautönen, teilweise kaum zu unterscheiden vom Hintergrund. Die Typografie sehr zurückhaltend, in dem Fall hier im Menü eine serifenlose, sehr feine Schrift. Dafür dann die Leseschrift ist dann wieder etwas kräftiger, stabiler für die Darstellung. Wir arbeiten hier mit vier Spalten und etwas weiter unten sieht das Ganze dann so aus. Hier gibt es jeweils andere Überschriften, recht groß, auch die Autoren werden hier mit eingebaut und natürlich gleich die Möglichkeit, das Ganze zu teilen in sozialen Netzwerken. Wenn wir uns im Bereich Kaufen und Verkaufen bewegen, so wird das ganze schnell zu einem Art Schaufenster. Das digitale Schaufenster von Etsy, einer der größten Plattformen für eigene gestaltete Produkte, die man quasi von Privat an Privat verkaufen will. Dann kann ich hier bei Etsy mir das genau anschauen, wie das funktioniert. Etsy hält sich hier farblich sehr stark zurück, allerdings auch klar wiedererkennbar mit dem kurzen prägnanten Schriftzug. Danach habe ich hier die entsprechenden Rubriken wie in jedem Shop auch und diese Rubriken können manchmal schon wirklich sehr detailliert nach unten gehen in die Tiefe. Das heißt, wir haben ja schon drei, vier Ebenen teilweise, die man dann auswählt, und dadrunter gibt es dann vielleicht noch mehr Auswahlmöglichkeiten. Natürlich ist die Suche immer zentral. Das heißt, wenn ich in Etsy etwas suche, zum Beispiel eine Leuchte, so wird mir das auch gleich angegeben und wenn ich jetzt hier einmal schaue, welche Begriffe gibt es noch, dann wird diese dynamische Suche natürlich sofort aktiviert und diese kontextbezogene dynamische Suche ist natürlich auch bei Shops unabdingbar. In einem Shop gibt es natürlich diese kachelartige Darstellung, sodass wir hier sehen, dass es sich hier um Produkte im Einzelnen handelt und wenn ich da draufklicke, komme ich natürlich zu zum Beispiel dieser wunderhübschen Tischleuchte und wenn ich da draufklicke, jeweils in eine größere Darstellung mit Preis und natürlich der Möglichkeit, das Ganze in den Warenkorb zu legen. Das ist natürlich genauso wie ein Shop. Ähnlich auch hier bei Ernsting's Family, beispielhaft für Kinderkleidung. Überwiegend gibt es natürlich auch immer wie ein digitales Schaufenster, die Startseite als zentrales Angebot, hier jeweils mit kurzen Anlesern, sehr grafisch orientiert mit einem Farbklima, was dem Logo auch entspricht. Das heißt, hier oben diese Farben, die kommen natürlich auch teilweise in diesen einzelnen Moderubriken wieder vor und wiederholen sich dort und es wird natürlich sehr bildhaft gearbeitet, das ist natürlich klar, ohne Bilder kann ich nichts verkaufen. Hier im unteren Bereich wird es dann auch sehr großflächig. Das heißt, diese Grafiken werden hier dazu verwendet, komplette Themen anzutriggern, das heißt, Kunden darauf aufmerksam zu machen, hier konkret zu dem Urlaubsbereich oder zum Thema Fruchtig-Frisch! verschiedene Produkte dann anzugucken, und nicht nur ein konkretes Produkt. Und natürlich gibt es wie immer auch die klassischen großen Störer, wenn es hier um Angebote geht. Sie sehen also, jede Website hat je nach Inhalt eine völlig andere Erscheinung. Manche Dinge sind gleich, wie beispielsweise die Navigation, die sich manchmal sehr zurückhält, und dafür allerdings der Auftritt sehr laut wird, je werblicher es wird, also je mehr Informationen zum Verkauf angeboten werden. Nüchterne Informationen werden dagegen sachlich und zurückhaltend präsentiert. Das ist natürlich auch die Ansprache, die ein Kunde erwartet, wenn er eine Website erreicht oder Nutzer, die im Internet surfen. Und das sollten Sie selbstverständlich auch für Ihre Projekte beachten.

Gestaltungsgrundlagen für Webdesigner

Lassen Sie sich die Grundlagen guten Webdesigns anhand eines Praxisbeispiels näherbringen.

2 Std. 30 min (20 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:27.07.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!