So kreiern Sie aus jeder beliebigen Vorlage ein gelungenes Webdesign

Cameron Chapman

Cameron Chapman ist eine professionelle Web- und Grafikdesignerin mit über sechs Jahren...

Haben Sie auch öfter Kunden, die sich gerne “einbringen”? Mit Fotos oder Gegenständen, die nicht im Entferntesten mit Webdesign zu tun haben? In den meisten Fällen ist es das Produkt des Kunden oder eine Verpackung oder irgendetwas anderes, das eng mit dem Unternehmen Ihres Auftraggebers verbunden ist. In manchen Fällen hat die Idee überhaupt nichts mit dem Unternehmen zu tun, sondern sieht einfach gut aus. Zumindest für Ihre Kunden, wenngleich Sie selbst das bisweilen nicht ganz nachvollziehen können. Noch mehr wundern Sie sich in solchen Fällen darüber, wie Sie eine Kaffeetasse in eine E-Commerce-Seite verwandeln sollen?

Wenn Sie es verstehen, Dinge objektiv zu betrachten, können Sie praktisch aus jedem x-beliebigen Objekt ein Webdesign machen. Finden Sie heraus, was es ist, das Ihre Kunden an dem mitgebrachten “Ding” so fasziniert und übersetzen Sie diese Essenz in ein passendes Webdesign, das die Kernelemente des Objekts aufgreift. Auf diese Weise gewinnen Sie mehr zufriedene Kunden und Sie haben weniger Kopfschmerzen. Die Strategie funktioniert übrigens auch bei eigenen Projekten, falls Ihnen mal die Ideen ausgehen.

Beginnen Sie mit der Form als solches

Die Form eines Objekts kann häufig an ein Design angepasst werden. Betrachten Sie die Kurven oder geraden Linien des Gegenstands – die Balance, Größe und Proportionen. Erfassen Sie auch die negativen Dinge oder das, was fehlt. Überlegen Sie sich, wie Sie das für ein Web- oder Printdesign adaptieren können.

Balance und Symmetrie

Ist das Objekt oder Foto ausgewogen? Ist es symmetrisch oder nicht? Manchmal kann eine fehlende Balance in ein Design übersetzt werden. Das führt allerdings nicht immer zu visuell befriedigenden Ergebnissen. Wenn es dem fraglichen Gegenstand an Balance fehlt, sollten Sie das lieber nicht kopieren, sondern sich auf einen anderen Aspekt konzentrieren.

balance
Foto: See-ming Lee

Dieses Foto ist asymmetrisch aufgebaut. Während Brücke und Gebäude die linke Hälfte des Bildes dominieren, sind die Farben der rechten Seite kräftiger – das Bild wirkt trotzdem ausgewogen, obwohl das auf die Proportionen der einzelnen Objekte nicht zutrifft.

Negativer Raum

Der negative Raum, den ein Objekt enthält oder der es umfließt, könnte Ihnen Aufschluss darüber geben, was Ihr Kunde an dem Gegenstand oder Foto mag. Ist der freie Raum scharf und klar definiert oder fließt und überlagert er die anderen Bildbereiche eher sanft? Wenn Sie mit freien Flächen arbeiten, sollten Sie auf deren Form und Balance im Verhältnis zu den anderen Bildelementen achten. Wenn es im Musterobjekt kaum freie Flächen gibt, sollten Sie in Ihrem Design sparsam damit umgehen und umgekehrt.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

negativespace
Foto: Matt McGee

In diesem Foto gibt es viel freien Raum.  Übertragen Sie das auf ein tatsächliches Design, wird Ihre Produktion sehr viel weiße Flächen haben, welche die Inhalte umgeben. Insgesamt wird das Design sehr leicht und luftig wirken.

Proportionen

Die Proportionen der einzelnen Elemente zueinander sind ebenfalls sehr aufschlussreich. Falls eines oder mehrere Elemente des Musterobjekts übertrieben groß sind, ist das ein Hinweis darauf, dass Sie einen Teil Ihres Designs sehr überproportional groß darstellen sollten. Andererseits – wenn alle Größen perfekt aufeinander abgestimmt sind, sollten Sie Ihr Design auch sehr ausgewogen gestalten.

proportion
Foto: vauvau

Die Proportionen auf diesem Foto sind stark vergrößert. Das Kinderspielhaus erscheint in der Größe eines gewöhnlichen Zimmers. Ein solches Muster gäbe Ihnen einen Hinweis darauf, dass Sie mit den Proportionen spielen dürfen, um das Design witzig und mit einem gewissen Überraschungseffekt zu gestalten.

Analysieren Sie Farben, Muster und Texturen

Am einfachsten können Sie Farben, Muster und Texturen für Ihr Design übernehmen. Wenn Sie von Ihrem Kunden ein Muster in die Hand gedrückt bekommen, liegt es auf derselben, zunächst die Farbe unter die Lupe zu nehmen. Schauen Sie nicht nur die einzelnen Farben, sondern auch Ihre Position und Komposition an. Wie wirkt das Zusammenspiel der verwendeten Farbtöne?

Lassen Sie sich von Ihrer Analyse inspirieren. Achten Sie dennoch darauf, das Beispiel nicht direkt zu kopieren. Was als T-Shirt prima aussieht, macht auf dem Monitor nicht unbedingt ein ebenso gutes Bild.

color
Foto: zehhhra

Sollte Ihnen jemand diesen Hauch von Schal als Inspiration bringen, können Sie mit hoher Wahrscheinlichkeit davon ausgehen, dass leuchtende Regenbogenfarben in Ihrem Design erwünscht sind. Zumindest haben Sie bei einer so breiten Palette an Farben viele Möglichkeiten zur Auswahl.

Muster

Die naheliegendste Art, Muster auf ein Design zu übertragen ist deren Einsatz als Hintergrund – entweder für die komplette Website oder für einzelne Elemente. Denken Sie trotzdem darüber nach, wie Sie solche Muster sonst noch einsetzen könnten: zum Beispiel als Schaltfläche. Art und Ausmaß der Adaption hängen davon ab, wie abstrakt Sie werden wollen.

pattern
Foto: shaire productions

Ein Tapetenmuster wie dieses können Sie sehr leicht als Hintergrund einer Website verwenden. Anstatt jedoch den kompletten Internetauftritt damit zu “kacheln”, wäre es vielleicht pfiffiger, das Muster für den Kopf beziehungsweise für einen individuellen Seitenkopf oder für den Fußbereich der Website zu verwenden.

Texturen

Ebenso einfach können Sie Texturen verwenden. Schauen Sie sich nicht nur die Struktur selbst an, sondern spüren Sie nach, welches Gefühl diese Textur vermittelt: rauh, kantig, abgeribbelt? Haben Sie’s erfasst, lässt sich eine Textur ähnlich wie ein Muster als Hintergrund, Schaltfläche, Kopf oder Fuß einsetzen.

texture
Foto: Seldom Scene Photography

Das Tauwerk auf dem Bild oben ist rustikal und erinnert an ein maritimes Thema. Auch wenn Ihr Kunde nicht bewusst ans Meer oder die Seefahrt denkt, könnten ihm oder ihr andere mit diesem Thema zusammenhängende Elemente auf der Seite gefallen, etwa Bullaugen oder Rettungsringe als Schaltflächen. Die Textur zeigt außerdem strenge geometrische und sich wiederholende Formen. Diese Eigenschaften können Sie ebenfalls sehr leicht in Ihr Design aufnehmen.

Achten Sie auf Details

Einzelne Ausschnitte aus einem Bild bieten hervorragende Möglichkeiten, bestimmte Elemente des Musterobjekts in Ihr Design zu übernehmen, ohne das Gesamtbild zu kopieren. Im Gegenteil, häufig wird es Ihre Kunden viel mehr beeindrucken, wenn Sie aus einigen Details ein eigenes Design entwickeln, anstatt den Gesamteindruck Ihres Designs an das ideegebende Bild Ihrer Kunden anzupassen.

Deko

Dekorationen an einem Objekt oder in einem Bild können häufig sehr leicht in das Design einer beliebigen Seite integriert werden. Schauen Sie sich rein verzierende Ornamente an und überlegen Sie, wie Sie das auf Ihr Webdesign übertragen können. Vielleicht gibt es etwas Filigranes, dass Sie in Ihren Header einbauen oder als individuelle Bullet Points oder sonstige akzentuierende Elemente einsetzen können. Dies hängt selbstverständlich wieder stark davon ab, was Sie als Muster präsentiert bekommen haben.

decoration
Ein Foto – jede Menge Anregungen für individuelles Webdesign

Dieses Foto bietet reichlich Stoff für Inspiration. Da ist zum einen das Schweifwerk – damit können Sie Ihren Header betonen. Dann gibt es das Gitter im Hintergrund, das ein gutes Wallpaper abgeben würde. Auch schön – für Ränder: Das umlaufende Band der Säulen. Schließlich ist da der allgemeine traditionell-figürliche und extravagante Stil des gesamten Bildes, der Ihnen einen Hinweis auf den Geschmack Ihres Kunden gibt.

Einfachheit

Wenn Ihre Kunden Ihnen eine Vorlage in die Hand drücken, die sehr einfach und minimalistisch gestaltet ist, werden Ihre Auftraggeber vermutlich auch ein minimalistisches Webdesign bevorzugen. Jedenfalls nichts Kompliziertes oder Überladenes. Umgekehrter Fall: jemand präsentiert Ihnen ein Muster, das vor Komplexität förmlich überquillt – verschachtelte Ebenen, verschiedene Farben, Muster und Texturen. Dieser Kunde wird sich von Einfachheit nicht überzeugen lassen, sondern eher auf Komplexität ansprechen.

simplicity
Image Credit: JoshuaDavisPhotography.com

Jemand der Ihnen das Foto mit der Tulpe vorlegt, wird sich eine ruhig gehaltene Website mit einem Hauch von Farbe wünschen. Mit einer komplexen Komposition aus vielen Texturen, Elementen und Farben würden Sie wohl keinen Blumentopf gewinnen, sondern eher einen Kunden verlieren.

Übergänge

Wertvolle Hinweise auf den Geschmack Ihres Kunden können auch die Übergänge eines Fotos liefern. Sind die Elemente eher separat angeordnet oder sind die Übergänge fließend? Gibt es Überlappungen oder optische Trenner? Versuchen Sie es herauszufinden und Sie haben einen Anhaltspunkt dafür, was bei Ihren Kunden Top oder Flop sein wird.

transitions

Foto: Kevin Dooley

Dieses Foto ist ein hervorragendes Beispiel dafür, wie Sie abstrakte Bilder in Ihr Webdesign einbeziehen und damit spielen können. Sie können die Art, wie das Licht einfällt und das Auge den Betrachter lenkt, aufgreifen. Oder adaptieren Sie die Art, in der einzelne Elemente bestimmte Bereiche des Bildes miteinander verbinden.

Wenn’s gar zu hässlich ist – was prägt den Gesamteindruck?

Natürlich gibt es auch die Fälle, die sich partout nicht in ein Design verwandeln lassen. Etwa wenn das Objekt außerirdisch hässlich ist oder es gibt einfach nichts herausragendes, das Sie an dem besagten Bild entdecken können. Was dann? Achten Sie auf Ihr Gefühl. Welchen Gesamteindruck macht das Ding auf sie – ist es:

  • simpel
  • komplex
  • elegant
  • lustig
  • albern
  • raffiniert oder
  • rustikal?
Machen Sie sich eine Liste mit Stichworten und bauen Sie daraus eine Ideenskizze. Auch wenn Sie einzelne Elemente des “Anti”-Objekts tatsächlich verwenden, bieten die Stichworte Ideen dafür, wie Sie dieses Element mit Ihrem übrigen Design verschmelzen können.
Hypothetische Beispiele

Von der Theorie zur Praxis: Hier nun ein paar Beispiele, wie Sie das oben Gesagte in die Tat umsetzen.

ladder
Foto: Bah Humbug

Zwei Dinge fallen an diesem Bild sofort auf. Das Erste ist die Hintergrundfarbe, die Sie leicht in Ihr Design aufnehmen können. Das Zweite ist die Einfachheit und der viele Freiraum, die Sie ebenfalls übertragen können. Außerdem sieht die Leiter etwas abgegriffen aus – ein Hinweis darauf, dass Sie mit Grundge-Look den Nerv Ihres Kunden treffen könnten.

eggs
Foto: woodleywonderworks

Das sanfte Farbschema dieses Fotos wäre das Naheliegendste, was Sie von dieser Vorlage übernehmen könnten. Auch dürften runde Elemente eher als eckige das Gefallen Ihrer Kunden finden; dezent eingesetzte Grundge- oder Retro-Elemente ebenso.

strawberryfondant
Foto: Ash-rly

Kräftige Farben und ein leichtes Schimmern der Süßigkeiten sind die zu adaptierenden Elemente dieses Fotos. Zudem bieten sich die Papierförmchen und Linien auf den Pralinen als Textur oder Muster an.

partydress

Foto: Wonderlane

Egal, ob männlich oder weiblich – jeder Kunde, der Ihnen dieses Foto vorlegt, wird ein Design suchen, dass die Bezeichnung elaboriert oder hochwertig verdient. Glitzern und schimmern sind weitere Stichworte für Ihre Ideenliste, was wiederum für eine Palette gedeckter Farben spricht, damit einzelne Spotlights zur Geltung kommen. Zudem steht die Vorlage für Detailverliebtheit, Texturen und Ebenen.

teacup
Foto: one2c900d

Das sanfte Blau mit goldenem Detail bieten sich hier zur Adaption an. Pink- und Grüntöne oder das Bild einer Rose sind weitere Kandidaten. Achten Sie auch auf die sanft geschwungenen, eleganten Linien von Tasse und Untertasse und die reliefartigen Verzierungen des Henkels. Diese Details könnten Sie ebenfalls in Ihr Design integrieren.

mississippimud
Foto: wickenden

Bei einer Website für den Hersteller dieses Produkts ist es sinnvoll vom Gesamteindruck der Verpackung auszugehen: rustikal, retro, lässig wären hier die Stichworte für Ihre Liste. Die Braun- und Schwarztöne würden zudem gut mit dem Grundge-Stil korrespondieren.

chocolate

Foto: jlastras

Die verschiedenen Schokoladen, Gewürze und Zutaten, die gern für Gourmet-Tafeln verwendet werden, bieten reichlich Material für Ihr Design. Die Textur und Farbe der Schokorippen, die wiederkehrenden geometrischen Muster und die Tiefe des Bildes sind gute Anhaltspunkte für das Aussehen und die Anordnung Ihrer Gestaltungselemente.

vase
Foto: studiosmith

Auch hier gibt es verschiedene Aspekte, mit denen Sie arbeiten können: die geometrische Form der Vase, das satte warme Gelb des Hintergrunds, die Holzstruktur und nicht zuletzt die freien Flächen der Vase selbst und rundherum. Daraus können Sie ein Design entwickeln, dass warm und modern zugleich ist.

Fazit

Nächstes Mal, wenn einer Ihrer Kunden mit einem abstrusen Gegenstand vor Ihnen steht und sagt: “Genau so soll’s aussehen!”, können Sie ganz gelassen bleiben. Nehmen Sie das Objekt mit einem Lächen entgegen, analysieren Sie es anhand dieser Anleitung, notieren Sie stichwortartig das Besondere der einzelnen Komponenten und/oder des Gesamteindrucks und übersetzen Sie Ihre Beobachtungen in ein dazu passendes Webdesign. Ihr Kunde wird glücklich sein und Sie haben ein weiteres ebenso gelungenes wie individuelles Referenzobjekt für Ihr Portfolio.

(mm/Übersetzung), ™

Cameron Chapman

Cameron Chapman ist eine professionelle Web- und Grafikdesignerin mit über sechs Jahren Erfahrung. Sie schreibt für mehrere bekannte Weblogs, darunter ihre eigenes Projekt Cameron Chapman On Writing. Sie ist außerdem Autorin von Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Hinterlasse einen Kommentar

1 Kommentar auf "So kreiern Sie aus jeder beliebigen Vorlage ein gelungenes Webdesign"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] Tipp der Redaktion: Anregungen, wie Sie die Wünsche und Vorstellungen Ihrer Kunden ermitteln, gibt Ihnen der Dr.-Web-Beitrag: “So kreiern Sie aus jeder beliebigen Vorlage ein gelungenes Webdesign.” […]