Kategorien
Betriebliches E-Business Freelance Webdesign

Freelancer: So schreibst du das perfekte Angebot

Nicht zuletzt wegen der möglichen Varianten und den verschiedenen Aspekten eines Webdesign-Projekts kann hier das Erstellen eines Angebots schwieriger als in anderen Branchen sein. Wenn dein Angebot aber nicht sorgfältig ausgearbeitet wurde, führt das im Zweifel zu Missverständnissen und verärgerten Kunden. Gleiches gilt natürlich für Rechnungen. Wenn nicht klar ist, wofür sie bezahlen sollen, könnten Kunden Zahlungen herauszögern oder Kosten anfechten.

Kategorien
Webdesign

FAQ-Seiten gestalten

FAQ-Seiten sind ein wesentlicher Bestandteil vieler Webseiten. Sie werden nicht von jeder Site benötigt, wenn Sie jedoch etwas verkaufen, eine Dienstleistung anbieten oder Informationen über ein komplexes Thema liefern, können FAQs Ihren Besuchern das Leben sehr erleichtern.

Das Format einer FAQ-Seite ist je nach Site sehr unterschiedlich, es gibt also keine wirklich „richtige“ Gestaltungsmethode. Allerdings sind da einige entscheidende Dinge, die man nicht vergessen sollte. Um es einfach zu halten, merken Sie sich einfach F.A.Q.: Fokussieren Sie sich auf Informationen, Assistieren Sie Ihren Besuchern durch Interaktion und Quo vadis – stellen Sie den derzeitigen Status in Frage. Für eine entsprechende Erklärung und Ideen für die Implementierung lesen Sie weiter. Zu Referenzzwecken haben wir außerdem drei Beispiele für FAQ-Seiten behandelt.

Fokussieren Sie sich auf Informationen

Wir alle wissen, dass der Inhalt König ist. Wenn es jedoch um FAQ-Seiten geht, sind die Informationen, die Sie präsentieren, wirklich das absolut wichtigste Ding. Sie müssen sicherstellen, dass die Präsentation der Inhalte in einer möglichst effizientesten und effektiven Art und Weise erfolgt.

Information steht an erster Stelle

Das einzige, worum es bei einer FAQ-Seite geht, ist das Anbieten von Informationen für Ihre Besucher. Wenn Sie diese Seiten gestalten, stellen Sie sicher, dass die Informationen an erster Stelle stehen. Mit anderen Worten, lassen Sie nicht zu, dass Ihre Design-Entscheidungen den Inhalt überschatten.
Lulu FAQ
Die Website von Lulu bietet auf ihren FAQ-Seiten ein Design, das geradeheraus und auf den Inhalt fokussiert ist.

Form folgt der Funktion

Vermeiden Sie grelle Designs, verspielte Layouts und andere Gestaltungselemente, die vom Inhalt Ihrer Seiten ablenken. Halten Sie sich an eine leicht lesbare Schriftarten, entsprechenden Kontrast und ein ziemlich einfaches Layout.
Amazon New Seller FAQ
Obwohl die doppelten seitlichen Scrollbalken die Seite von Amazon ein bisschen unaufgeräumt wirken lassen, konzentriert sie sich doch auf den Inhalt in der mittleren Spalte.

Längere FAQs organisieren

Denken Sie darüber nach, wie Sie Ihre FAQ-Seite am besten organisieren. Je länger Ihre FAQ-Seite ist, desto mehr Sorgfalt müssen Sie darauf verwenden, um sicherzustellen, dass die Besucher die Antworten finden, die sie suchen.

Lulu FAQ sidebar
Bei Lulu sind die FAQs in der Seitenleiste nach Kategorie und Unterkategorie organisiert, wodurch jede FAQ-Kategorie aus jeder anderen Kategorie heraus zugänglich ist.

Kategorien schaffen Überblick

Kategorien sind der beste Weg, um eine längere FAQ-Seite zu organisieren. Wie Sie Ihre Kategorien definieren, liegt natürlich ganz bei Ihnen und Sie sollten sich gezielt an der Site orientieren. Das Ziel von Kategorien ist es, es Ihren Besuchern leichter zu machen, die Informationen zu finden, die sie suchen. Stellen Sie daher sicher, dass die Kategorien logisch sind und nicht zu viele Fragen beinhalten. Dennoch möchten Sie nicht mehr Kategorien haben, als nötig sind.

Creative Commons Full FAQ

Die komplette FAQ-Seite von Creative Commons verwendet ein Inhaltsverzeichnis, um alle Fragen und Antworten in ihren FAQ zu umreißen und zu verlinken. Sie ist ein bisschen lang, aber immer noch ein vernünftiger Weg, um diese Art von FAQ-Seite zu organisieren.

Denken Sie daran, dass alles, was Sie im Hinblick auf die Organisation auf Ihrer FAQ-Seite tun, mit Ihrem Enduser im Hinterkopf geschehen sollte. Sie möchten es Ihren Besuchern leichter machen, das Gesuchte zu finden. Indem Sie es leichter machen, die Informationen zu finden, steigern Sie die Wahrscheinlichkeit, dass sie mit Ihnen Geschäfte tätigen.

Machen Sie sie leicht auffindbar

Was nützt es, einen FAQ-Bereich zu haben, wenn Ihre Besucher ihn nicht finden können? Die Antwort: Er nützt nichts. Ihre FAQ-Seite muss für Ihre Besucher leicht zu finden sein, ansonsten brauchen Sie noch nicht einmal eine anzubieten.

Creative Commons Abbreviated FAQ
Creative Commons bindet in der oberen Navigation einen Link ein, der direkt zu den abgekürzten FAQs führt. Von da aus steht ein Link zu den vollständigen FAQs zur Verfügung.

Es gibt ein paar logische Stellen für die Platzierung Ihrer FAQs. Der erste logische Ort ist in Ihrer Hauptnavigation. Einige Sites verwenden eher einen FAQ-Link als die Links „Hilfe“ oder „Über uns“, je nach Natur ihrer Site.

Amazon Help
Amazon verlinkt von der Haupt-Hilfeseite zu den gängigsten FAQ-Themen.

Die nächste logische Stelle, wo man sie platzieren kann, ist als ein Unterabschnitt Ihrer Seiten „Hilfe“ oder „Über uns“. Wenn jemand eine Frage über Ihre Site oder Ihr Unternehmen hat, sind die Abschnitte „Hilfe“ oder „Über uns“ wahrscheinlich die ersten Stellen, an denen er nachsehen wird.

Assistieren Sie Ihren Besuchern durch Interaktion

Die Art und Weise, in der Ihre User mit Ihren FAQs interagieren, ist von entscheidender Bedeutung. Durchdenken Sie die Art und Weise, in der Ihre Besucher die von Ihnen präsentierten Informationen tatsächlich nutzen werden und machen Sie es ihnen so leicht wie möglich.

Anklickbare Fragen

Wenn Sie in Ihren FAQs mehr als acht oder zehn Fragen haben oder wenn die Antworten auf diese Fragen jeweils länger als ein Absatz sind, ist es eine gute Idee, die Fragen aufzulisten, ohne die Antworten direkt unter ihnen zu zeigen. Dadurch ist der Inhalt leichter zu erfassen.

Lulu FAQ Clickable Questions


Lulu listet die Fragen im oberen Abschnitt einer jeden Kategorieseite auf und verlinkt sie mit der entsprechenden, weiter unten stehenden Antwort.

Es gibt zwei Wege, die Sie gehen können, um anklickbare Fragen zu erstellen. Der erste Weg ist, Ihre Fragen oben zu platzieren und die Antworten getrennt am Ende, mit Ankerlinks, die die Fragen mit den entsprechenden Antworten verbinden. Das ist eine großartige Methode, die Sie verwenden können, wenn Sie nicht mit JavaScript arbeiten möchten.
Der andere Weg ist die Verwendung von JavaScript, um die Antworten zu verbergen. Mit dieser Methode erscheint die Antwort umgehend unter der Frage, sobald ein Besucher auf eine solche Frage klickt. Einige Designer animieren das (mit einem Ziehharmonika- oder Einschubeffekt), während andere die Antwort einfach erscheinen lassen und die Frage nach unten springt.

Machen Sie es einfach, eine neue Frage zu stellen

Wenn jemand die Antwort auf seine Frage nicht in den FAQ finden kann, ist es wahrscheinlich, dass er Sie direkt fragen möchte. Stellen Sie sicher, dass Sie ein Frage- oder Kontaktformular einbinden, das leicht von Ihrer FAQ-Seite aus zu erreichen ist.

Amazon New Seller FAQ Support

Amazon platziert seine Support-Kontaktwege auf den FAQ-Seiten in markanter Weise.

Stellen Sie den derzeitigen Status in Frage

Während FAQ-Seiten das Augenmerk auf die Bereitstellung von Informationen für die Besucher legen müssen, gibt es keinen Grund, warum Sie bei der Art und Weise, wie Ihre FAQ-Seiten aussehen und agieren, nicht kreativ werden sollten. Es gibt eine ganze Reihe von unterschiedlichen Wegen die Sie gehen können, damit sich Ihre FAQ-Seite von der Masse abhebt und es ist ein Bereich, den viele Designer übersehen und dem sie nicht viel Zeit widmen.
Hier ein paar Ideen für einzigartige FAQ-Interfaces. Ich kann nicht dafür garantieren, dass sie nicht bereits vorher verwendet wurden, bin jedoch sicher, dass ich sie nie auf irgendwelchen FAQ-Seiten gesehen habe. Noch nicht.

Modale Fenster

Modale Fenster werden für alle möglichen Dinge verwendet, warum also nicht für FAQ-Seiten? Modale Fenster können, wenn sie gut gestaltet und implementiert sind, eine Site auf einer weiteren Ebene verfeinern, so dass sie sich wirklich von der Konkurrenz abhebt. Hier einige konkrete Ideen für das Einbinden von modalen Fenstern:

  • Wenn ein Besucher auf eine Kategorie klickt, lassen Sie die Fragen und Antworten für diese Kategorie in einem modalen Fenster erscheinen.
  • Wenn Sie keine riesige Anzahl von Fragen haben, erwägen Sie, dass sich die Antworten dazu in einem modalen Fenster öffnen. Das kann ganz besonders nützlich sein, wenn Sie die Fragenseite in Übereinstimmung mit Ihrem gesamten (nicht textfreundlichen) Design der Site halten möchten, die Antworten jedoch leichter lesbar sein sollen.
  • Eine andere Idee ist es, modale Fenster zu verwenden, um Ihre FAQs in den Rest Ihrer Site zu integrieren. Verlinken Sie zu FAQ-Themen innerhalb von anderen Seiten und lassen Sie sie in modalen Fenstern direkt auf der Seite erscheinen. Das erleichtert das Finden von Informationen über die bestimmten Themen, ohne dass der Besucher die Seite, auf der er sich befindet, verlassen muss.

Apple Store Modal Window
Apple verwendet modale Fenster, um bestimmte Dinge innerhalb des Stores zu erklären. Das Gleiche könnte leicht dazu verwendet werden, um FAQ-Informationen über Themen anzuzeigen.

Spaltenansicht

Sicherlich nicht der beste Name für dieses Layout, er passt jedoch. Grundsätzlich erscheinen bei diesem Design alle Ihre Fragen in einer Spalte. Wenn dann jemand auf eine Frage klickt, erscheint die Antwort in einer angrenzenden Spalte. Sie können die Spalten so gestalten, dass sie sich unabhängig voneinander scrollen oder zusammen scrollen lassen. Das ist eine ziemlich einfache Modifikation, würde jedoch wirklich gut funktionieren, wenn sie in ein minimalistisches Design einer Site eingebaut wird.

Horizontales Scrollen

Ich habe bis jetzt noch keine Website zu sehen bekommen, die sich innerhalb ihrer FAQ-Seite horizontales Scrollen zunutze macht. Mit der immer größeren Verbreitung von Widescreen-Monitoren wird horizontales Scrollen immer beliebter. Warum sollte man das nicht auf einer FAQ-Seite ausprobieren?

FAQs in Tabs

Wenn Sie nicht zu viele Kategorien haben, warum verwenden Sie dann nicht ein Tab-Interface für Ihre FAQ? Das wäre besonders hilfreich, wenn Sie AJAX-Tabs verwenden, um den Übergang zwischen den Kategorien nahtlos zu gestalten.
Tag Clouds – Schlagwortwolken
Wenn Sie eine sehr große FAQ-Seite haben, erwägen Sie eher die Organisation mit einer Schlagwortwolke als Standardkategorien. Die Leute werden in zunehmendem Maße vertrauter mit Schlagwortwolken und diese bieten einen großartigen Weg, Informationen zu finden und dabei gleichzeitig ein bisschen weniger formal als andere Kategorien zu bleiben.

Weitere Quellen

  • The Perfect FAQ Page! Die perfekte FAQ-Seite – ein Posting von Thierry Koblentz, das sich in die Programmieraspekte der Gestaltung einer großartigen FAQ-Seite vertieft.
  • How to Write an Effective FAQ Page Wie man eine effektive FAQ-Seite schreibt – ein Posting von Web Hosting Geeks, das sich auf die Inhalte konzentriert, die eine FAQ-Seite umfassen sollte.
  • Designing Your FAQ Page to Presale Gestalten Sie Ihre FAQ-Seite für die Marktvorbereitung – ein Posting von The Dabbling Mum, in dem über die Informationsarchitektur von FAQ-Seiten gesprochen wird.
  • Common Pages – FAQ Design Übliche Seiten – FAQ-Gestaltung – Eine sehr kurze Seite vom COI Usability Toolkit, die einige sehr wertvolle Informationen darüber liefert, wie man nützlichere FAQ-Seiten erstellt.

Zusammenfassung

FAQ-Seiten können zu den nützlichsten Bestandteilen einer jeden Website gehören. Ohne ein gut durchdachtes Userinterface können sie jedoch auch ein schwarzes (Informations)Loch sein. Machen Sie sich gründliche Gedanken darüber, wie Ihre Besucher Ihre FAQs tatsächlich nutzen werden und stellen Sie sicher, dass Sie ihre Bedürfnisse durch den gesamten Gestaltungsprozess hindurch berücksichtigen. Und vergessen Sie nicht, Ihre FAQ-Seite zusammen mit dem Rest der Interfaces Ihrer Seite zu testen.

(mm),

Kategorien
Webdesign

Eine Seite pro Site: Beispiele und Tipps für Single Page Websites

Internetauftritte mit nur einer Seite sind der neue Hit bei Webdesignern – nicht nur für eigene Projekte, sondern auch für die Projekte ihrer Kunden. Es gibt zahlreiche Anwendungsbeispiele, in denen eine einzige Seite durchaus sinnvoll ist: Wenn es nur wenig Inhalte gibt, wenn die Inhalte eng miteinander verknüpft sind oder immer dann, wenn ein bestimmtes stilgebendes Element am besten auf einer einzigen, durchgehenden Seite wirkt.

Single Page oder Solo-Seiten-Sites sehen Sie beim Surfen immer häufiger. Nachfolgend ein paar Tipps als Entscheidungshilfe, wann eine Solo-Seite sinnvoll ist und wie Sie eine solche Website am besten gestalten. Während die meisten der Goldenen Webdesign-Regeln für einzelne Seiten ebenso gut wie für komplexere Internetpräsenzen gelten, gibt es einige Besonderheiten, die Sie bei Solo-Sites beachten sollten.

Ist eine einzelne Seite ausreichend für Ihr Projekt?

Single Page Websites sind besonders bei Designern beliebt, was natürlich nicht heißt, dass ein Webdesign Portfolio der einzige angemessene Einsatzzweck ist. Außerdem werden bestimmte Produkte – wie zum Beispiel Bücher – sehr häufig auf Solo-Seiten präsentiert. Anhand welcher Kriterien sollten Sie also entscheiden?

Stellen Sie sich am besten diese Fragen:

  • Gibt es viel Inhalt? Content-reiche Seiten sind nicht die idealen Kandidaten für Solo-Seiten-Websites. Wenn Sie mehr als ein Dutzend Seiten an Informationen haben, sind Sie mit höchster Wahrscheinlichkeit besser mit einer eher herkömmlichen, mehrseitigen Struktur bedient.
  • Wird ein bestimmtes Produkt verkauft? Eine einzelne Seite kann eine gute Lösung sein, wenn Sie ein einzelnes Produkt oder Werk verkaufen oder bewerben, etwa ein Buch oder ein WordPress-Theme beziehungsweise ein Template für ein anderes Content-Management-System.
  • Sind Sie geübt im Umgang mit Ajax und JavaScript (JS)? Zahlreiche Solo-Seiten-Websites setzen Ajax und JS  für die Navigation und andere Elemente ein. Dies ist eine sehr gute Art, bei etwas üppigerem Inhalt eine kompakte Website zu erstellen.
  • Haben die einzelnen Inhalte einen SInnzusammenhang? Der Versuch, viele unzusammenhängende Informationen auf eine Seite zu pferchen, wird die Besucher der Website eher verwirren als erhellen. Wenn Sie mehrere Skriptseiten verschiedenen Contents haben, sollten Sie diesen besser auf separaten Internetseiten lassen.

1. Inhalt reduzieren

Wenn Sie eine Single Page Website erstellen, ist es wichtig, den Inhalt möglichst gering zu halten. Denken Sie daran, dass sämtliche Inhalte dieser Site auf einmal geladen werden müssen. Es sei denn, Sie benutzen Ajax – doch auch dann gibt es einige Konstellationen, die simultanes Laden aller Inhalte erfordern. Außerdem: Wenn Sie Übergange zwischen verschiedenen Inhaltsbereichen einsetzen wollen, funktioniert das besser, wenn zwischen diesen, voneinander getrennten Bereichen nicht so viele andere Inhalte stehen.

Fünf oder sechs separate Inhaltsbereiche sind bei den meisten Solo-Seiten-Websites gängig. In manchen Fällen ist die Zahl auf drei oder sogar zwei Inhaltsbereiche begrenzt. Es kommt nur sehr selten vor, dass Websites mit einer einzelnen Seite mehr als zehn verschiedene Inhaltsbereiche haben.

Beispiele

Ein Portfolio mit einer einzelnen Web-Seite, die zwölf Film-Websites präsentiert. Der Header bietet einige wichtige Informationen, darunter ein E-Mail-Link.

Colourpixel hat viele verschiedene Informationen auf der Website, aber die Inhalte sind überwiegend kurz und präsize gehalten. Es gibt Kontaktdaten, ein Portfolio der verschiedenen Dienstleistungen und den unvermeidlichen „Über-Uns“-Bereich – alles auf einer Seite.

Das Wichtigste kurz auf den Punkt gebracht – Ben Linds Website kommt mit einem Minimum an Informationen aus.

Solo-Seiten-Websites sind ideal für die Ankündigung einer Veranstaltung oder Familienfeier – einer Hochzeit in diesem Fall. Es gibt nicht zu allzuviel Inhalt und das Design der Einzelseite macht es denkbar einfach, das Gesuchte zu finden.

Die Internetpräsenz von Stoodeo beinhaltet lediglich eine knappe Seite Content. Die Platzierung des Kontaktformulars neben dem Text reduziert die Länge erheblich und macht Scrollen nahezu überflüssig.

2. Wie wäre es mit horizontalem Scrollen?

Nicht alle Websites mit horizontalem Scrollbalken kommen mit einer einzigen Seite aus. Bei vielen Internetpräsenzen ist das jedoch der Fall und es ist ein interessanter Ansatz, um aus dem typischen Schema von Single Page Websites auszubrechen.

Wenn Sie relativ viel Content haben, kann horizontales Scrollen vorteilhafter sein als vertikales. Vor allem dann, wenn Sie ein „Querformat“ mit der Hilfe von JavaScript in benutzerfreundliche Häppchen aufteilen.

Beispiele

Diese Website beinhaltet sowohl horizontale als auch vertikale Scrollbalken, und bringt Dank JavaScript die Inhalte sechs verschiedener Seiten auf einer pfiffig angelegten XXL-Seite unter.

Ähnliches Prinzip – eleganter gelöst: Claire Baxters Website ist ein beeindruckendes Beispiel für den effizienten Einsatz von JavaScript für die Navigation und kleine Bildgalerien zum Präsentieren der Arbeitsproben und Referenzen.

Charlie Gentles Website setzt ebenfalls auf JavaScript als Content Switcher zwischen den verschiedenen Inhaltsbereichen und Arbeitsproben.

Eine riesige horizontal scrollbare Solo-Seite mit reichlich Inhalt. Günstig für Scroll-Muffel: Das Kontaktformular steht direkt links am Anfang der Website – ein absolutes Unterscheidungsmerkmal zur üblichen Position am Ende des scrollbaren Bereichs.

Peter Pearsons Site verwendet einen Mix aus Animation und horizontalem Scrollen. Informationen, mit denen man mehrere Seiten füllen könnte, sind auf bildschirmgroße, nebeneinander angeordnete  Portionen aufgeteilt.

3. Beachten Sie die Bildschirmgröße

Bei einer Solo-Seiten-Website sollten Sie auch die Größe des Viewports beachten, der Ihren Besuchern zur Verfügung steht. Wenn Sie Ihre Websites so gestalten, dass sie in den sichtbaren Bereich hineinpassen, minimieren Sie das erforderliche Scrollen zwischen den verschiedenen Bereichen der Website. Das ist vor allem dann wichtig, wenn Sie Wert darauf legen, wie die einzelnen Abschnitte miteinander verbunden sind, etwa dann, wenn Sie dafür jQuery-Funktionen vorgesehen haben. Wenn die Besucher einmal anfangen zu scrollen, könnten sie sich per Mausrad durch die ganze Seite ackern, anstatt Ihre schicke Blätter-Navigation zu nutzen.

Beispiele

Dies ist eine sehr einfach gehaltene Solo-Seite mit drei verschiedenen Bereichen, die automatisch nacheinander eingeblendet werden und jeweils exakt den Viewport füllen. Die zentrale Aussage liegt im mittleren Bereich, so dass in zwei Richtungen gescrollt werden kann, was diesem Portfolio etwas Besonderes gibt.

Die Website von CreativePeople verwendet Links und Content Switcher. Die verschiedenen Inhaltsbereiche werden per JavaScript in der unteren Hälfte des Bildschirms eingeblendet. Scrollen entfällt komplett.

Technisch ähnlich gelöst wie das vorhergehende Beispiel, ist die Website von Dafvy.co.uk site. Die einzelnen Bereiche sind jedoch bildschirmfüllend. Zudem wechseln die Hintergrundfarben.

Fuel Brand nutzt Ajax für die Navigation sowie das Ein- und Ausblenden von Content.

Die Website von Cory Etzkorn passt sich automatisch an Ihren Viewport an. Navigiert wird per Slide-Show, außerdem sind klickbare Bereiche mit Tool-Tipps kenntlich gemacht.

4. Setzen Sie die verschiedenen Abschnitte klar von einander ab

Die meisten Besucher Ihrer Website werden daran gewöhnt sein, eine neue Seite zu laden, um weitere Inhalte zusehen. Wenn Sie alle Inhalte auf einer Einzelseite zu eng zusammen quetschen, könnte es sein, dass Ihre Besucher die Übergänge zwischen den Bereichen nicht wahrnehmen.

Es gibt zahlreiche Methoden, um verschiedene Inhaltsbereiche voneinander abzusetzen. Der Einsatz eines Headers wäre eine Methode. Auf manchen Websites trennen Linien die Bereiche voneinander. Wieder andere lassen einfach Freiraum zwischen den einzelnen Bereichen.

Examples

KINO verwendet eine einheitliche, handgemalte Linie zwischen den einzelnen Bereichen.

Simple trennt die Bereiche durch grafisch hinterlegte Überschriften.

CreativeSwitch nutzt Header mit wechselnden Grafiken für die drei Inhaltsbereiche der Website ein.

Auch ein simpler schwarzer Balken – ebenfalls mit Titel des jeweiligen Bereichs wie in diesem Beispiel – erfüllt den Zweck.

Zusätzlich zur etwas abgewandelten Balken-Trenner-Variante setzt Tomatic Variationen des seitenübergreifenden Sci-Fi-Themas im Retro-Look ein.

5. Nutzen Sie die Möglichkeit eines großflächingen Hintergrunds

Großflächige Hintergründe sind bei allen Arten von Websites sehr beliebt. Internetauftritte mit nur einer Seite bieten dafür neue Möglichkeiten. Viele Designer verwenden große Hintergrundbilder, mit denen Sie die verschiedenen Inhaltsbereiche voneinander absetzen. Sehr beliebt sind Zeichnungen, die eine Stadt oder eine Landschaft vom Himmel bis zur Erde beziehungsweise vom Himmel bis zum Meeresgrund in Szene setzen wie zum Beispiel die Website von Volll oder Morphix in dieser Sammlung.

Beispiele

Schönes Beispiel für eine Gestaltung mit einem durchgehenden Thema in allen Inhaltsbereichen.

Ein durchgehendes Küstenidyll vom Himmel bis zum Meeresboden bildet den Hintergrund der Voll-Website: Der Hauptinhalt liegt auf Höhe des Meeresspiegels, während die Macher der Site sich in den Wolken wähnen – nicht ohne zuvor die Goodies in den Tiefen des Meeres zu versenkten.

Jamie Wrights Website beweist Mut zur Farbe

Luke Larsen oder das Leben im Goldfischglas.

Wer Design „abfackelt“, muss was zu bieten haben. In der Tat, die Hintergrundgestaltung von webleedDesign ist eine der innovativsten, die ich je gesehen habe. Ein Klick auf die Links oben im Kopf spult einen Flash-Film ab, der den Eindruck einer Fahrt im Aufzug durch ein Imperium bizarrer Lebenwesen vermittelt. Probieren Sie’s am besten selbst aus.

6. Einsatz von JavaScript und Ajax zur Strukturierung und Präsentation des Inhalts

Wenn Sie etwas mehr Content unterbringen müssen, aber dennoch das Single Page Design nutzen möchten, können Sie per JavaScript (JS) und Ajax Inhaltsbereiche ein- und ausblenden.

Sehr populär sind Slide Shows mit JavaScript. Auch so genannten Modal Boxes, etwas üppiger gestaltete PopUps, meist für Formulare oder Tool-Tipps und andere Techniken, werden gerne eingesetzt.

Beispiele

SOFA blendet die Inhaltsbereiche zu den Links im Kopfbereich per JavaScript ein.

Giant Creative nutzt JavaScript für einen Slide-Show-Effekt.

Deluge Studios kombiniert verschiedene Slide Shows, PopUps und andere JavaScript-Funktionen.

TapTapTap verwendet JavaScript zum Einblenden der Produktinformationen.

Tool-Tipps und PopUs sind die Mittel der Wahl von Jon Brousseau.

Weitere Beispiele

Falls Sie Spaß an der Sache bekommen haben – hier sind eine Reihe weiterer, schön gemachter Single Page Websites:

Dale Harris

Justin Tsang

Blazing Emblem, LLC

Fish Marketing

Jared Design

Angel Des Lacs

Koffie Verkeerd

Project 365

Kevin Lucius

The Rissington Podcast

Bullet PR

Skywalker Graphics

thinkdj

Jan-Eike Koormann

Janic Design

Adam Woodhouse

Paolo Manganiello

Los Colores Olvidados

Hot Meteor

IndoFolio

Zusammenfassung

Websites mit nur einer Seite bieten eine witzige und abwechselungsreiche Alternative zum Gestalten von Internetauftritten – egal, ob es sich um Ihr persönliches Portfolio oder die Internetpräsenz Ihrer Kunden handelt. Denken Sie dabei an Methoden, die besonders gut für diese Form des Webdesigns geeignet sind, wie großflächige Hintergrundbilder oder bestimmte Ajax-Techniken, die wiederum auf komplexer strukturierten Seiten nicht so gut zur Geltung kämen.

(mm), ™

Kategorien
Webdesign

Multi-Layered Webdesign: Tipps und Beispiele für komplexe Web-Layouts

Posts über minimalistisches und schlichtes Webdesign gibt es inzwischen wie Sand am Meer. Natürlich sollten Webdesigner die Machart solcher Internetseiten sorgfältig analysieren und bei ihren eigenen Designs berücksichtigen, denn die Prinzipien dieser Form des Webdesigns sind auch auf viele andere Ansätze übertragbar. Nachteil: Da den minimalistischen und „sauberen“ Designs in den vergangenen Jahren so viel Bedeutung beigemessen wurde, trauen sich manche Designer gar nicht mehr an kompliziertere Layouts heran. Das ist jammerschade. Ebenso wie minimalistische Designs haben auch komplexere Layouts ihre Daseinsberechtigung. Die nachfolgenden Tipps und Beispiele helfen Ihnen dabei, vielschichtige Webdesigns zu erstellen.

Komplexe Layouts bedürfen einer ausgefeilten Planung und etwas mehr Erfahrung in der Bildbearbeitung.  Ansonsten lassen sie sich ebenso einfach erstellen wie minimalistische Websites – und in vielen Fällen sind solche Layouts sogar versöhnlicher.

Richtlinien für das Erstellen komplexer Webdesigns

Vielschichtige Websites sind visuell komplexer als solche mit minimalistischem Design. Das sagt noch nicht sehr viel über die technische Umsetzung aus, vor der manche Designer zurückschrecken. Schließlich scheint es dabei jede Menge Dinge zu geben, die man falsch machen kann.

Der rote Faden – nutzen Sie ein bestimmtes Thema

Gute Designs wie das folgende, haben ein durchgängiges Thema oder eine bestimmte Ästhetik, der alle Elemente der Website folgen. In manchen Fällen ist es etwas ganz offensichtliches wie ein bestimmtes Bild. In anderen Fällen sind Thema oder Stil etwas subtiler umgesetzt – zum Beispiel durch wiederkehrende Grunge-Elemente.

Eine Seite mit einem sehr präsenten und durchgängigen Grunge- oder Retro-Stil.

Egal wofür Sie sich entscheiden, ein bestimmter Stil hält die verschiedenen Elemente eines Webdesigns optisch zusammen. Wenn Sie viele verschiedene Design-Elemente durcheinander würfeln, könnte das zu einem reinen Chaos führen.

Lassen Sie etwas aus

Coco Chanel gab Frauen dereinst den weisen Rat, nach dem Ankleiden eines der gewählten Accessoires wieder abzulegen. Dieser Tipp basiert auf der Beobachtung, dass viele Menschen – nicht nur Frauen und nicht nur in Bezug auf Kleidung – ein wenig zur Übertreibung neigen. Fazit: Wird ein Element entfernt, kommen die verbleibenden umso besser zur Geltung.

anna-pawelczyk

Ein hervorragendes Beispiel für eine Website mit mehreren interessanten Grafiken, die trotzdem nicht überladen wirkt.

Diesen Rat können Sie auch aufs Webdesign übertragen. Probieren Sie es mit einem fertigen Design. Welches Element könnten Sie wieder wegnehmen? Es wird fast immer etwas geben, auf das Sie zum Vorteil des übrigen Designs verzichten können. Diese Methode entspricht dem minimalistischen Prinzip zum Optimieren einer Website – alles, was nicht unmittelbar benötigt wird, kann entfernt werden.

Zur Erinnerung, das Ziel ist es, eine visuell interessante Seite zu erstellen – und nicht eine wahllose Ansammlung von Design-Elementen.

Details sorgen für den feinen Unterschied zwischen guten Beispielen dieses Design-Prinzips und den weniger brillianten Versuchen. Achten Sie auf Bereiche, in denen ein extra Detail Ihre Website von anderen Webdesigns positiv abheben kann. Typographie, Ränder oder optische Trenner zwischen den Inhaltselementen sind Elemente, denen Sie mit kleinen Details einen großen Auftritt verschaffen.

Ein schönes Beispiel, wie Sie mit kleinen Details Interesse erwecken und ein ebenso ausgefeiltes wie durchdachtes Erscheinungsbild erzielen.

Beispiele

Hier sind 30 schöne Beispiele mit grafisch komplexeren Layouts als beim Gros der Webdesigns, die das Internet derzeit überfluten.

Harmony Republic

Margarita Shack

Jeremy Bayone

MoonBeam Illustrations

Eastpoint

Vegas Uncork’d

Pixlogix

Kidd81.com

The Web Design Blog

Piipe

KevAdamson.com

Website Bakery

Al Brown

SieteDeFebrero

Brown Blog Films

RCIUK

The Bright Agency

Cool Tshirt Design

Circa The Prince

Mplusz

Electricurrent

Studio7Designs

Bidsketch

Intuitive Designs

Varmland of Scandinavia

Panelfly

Synch Media

Sky’s Guide Service

Digiti

Larva Labs

(mm),

Kategorien
Webdesign

So kreiern Sie aus jeder beliebigen Vorlage ein gelungenes Webdesign

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.

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), ™

Kategorien
Webdesign

Wenn Design gestohlen wird – und was man tun kann

Designer verbringen Stunden damit, Websites perfekt zu gestalten, gleich, ob es ihre eigenen sind oder die ihrer Kunden. Wenn Sie Tage oder gar Monate auf eine Website verwendet haben, dann möchten Sie in keinem Fall, dass jemand anderes Ihnen das Design stiehlt, ohne Sie in angemessener Form als Urheber zu benennen (oder zu bezahlen). Wenn Sie gar Muster- oder Themenvorlagen entwerfen, dann haben Sie eben ein  größeres Problem. Wenn Ihre Vorlagen letztlich kostenlos online verfügbar sind, werden viele sich nicht die Mühe machen, dafür Geld auszugeben.

Was können Sie also unternehmen, wenn Sie feststellen, dass eines Ihrer Designs gestohlen wurde? Was sollten Sie tun? Lesen Sie weiter, um eine umfassende Anleitung hinsichtlich dessen zu erhalten, was Sie zum Schutz Ihres geistigen Eigentums unternehmen können.

Ich bin kein Rechtsanwalt und gebe auch nicht vor, einer zu sein. Die hier erteilten Ratschläge sollten daher nicht als Rechtsberatung aufgefasst werden. Bevor Sie einzelne der nachfolgenden Maßnahmen ergreifen, sollten Sie einen Anwalt oder sonstigen Rechtsexperten zu Rate ziehen, um festzustellen, was erlaubt ist, beziehungsweise welche zusätzlichen Möglichkeiten Sie haben.

1. Warum stiehlt jemand ein Design?

Nicht jeder, der sich ein Design unerlaubt aneignet, will Sie schädigen. Es gibt eine ganze Reihe von Gründen für ein solches Verhalten – einer der häufigsten ist dass viele Menschen einfach nicht begreifen, dass es unrechtmäßig und unmoralisch ist, das Design eines anderen zu entwenden. Wenn Sie natürlich Vorlagen oder Themen verkaufen, dann trifft dies vermutlich nicht zu. Aber, wenn es sich um ein nur für Sie allein entwickeltes Design handelt, dann ist das immer eine Möglichkeit.

copyright

Viele glauben den Mythos, dass online verfügbare Inhalte frei verwendbar sind, andere wiederum glauben, dass ein Urheberrecht nur dann besteht, wenn es ausdrücklich angegeben ist. In jedem Fall ist sich derjenige, der sich Ihres Designs bemächtigt hat, möglicherweise gar nicht bewusst, etwas Falsches getan zu haben.

In anderen Fällen macht sich vielleicht jemand Ihr Design zunutze, weil er der Ansicht ist, es wäre ein ausgezeichnetes Beispiel dafür, wie eine Website für sein Nischengeschäft aussehen sollte oder weil das hinter der Website stehende Unternehmen führend in der Branche ist. Es ist nicht immer klar, ob solche Leute sich der Unrechtmäßigkeit ihres Tuns bewusst sind oder nicht; zumindest machen sie sich nicht klar, wie falsch es ist.

Einige stehlen Designs, weil sie nicht die Mittel haben, einen Webdesigner zu beauftragen, wohl aber genug eigenes technisches Knowhow, um selbst einen Internetauftritt zu kopieren. Diese Menschen gehen meist nicht davon aus, erwischt zu werden. Gleiches gilt manchmal für Leute, denen die Gestaltung einer Website in Auftrag gegeben wurde, die aber nicht über die Fähigkeiten zur Ausführung dieses Auftrages verfügen. Folglich kopieren Sie eine andere Website und hoffen, dass ihr Kunde diese nie gesehen hat.

Manchmal wird jemand den Großteil Ihres Designs verwenden, aber kleine Veränderungen daran vornehmen und anschließend behaupten, er hätte sich lediglich von der Gestaltung inspirieren lassen und es nicht wirklich übernommen. Wenn er die Website nicht komplett von Anfang an neu aufgebaut und wesentliche Änderungen daran vorgenommen hat (und selbst dann), ist das kein guter Einwand und Sie können ihn immer noch so behandeln, als ob er das Design vollständig gestohlen hat.

Ich neige dazu, im Hinblick auf den Diebstahl geistigen Eigentums nach dem Prinzip „im Zweifel für den Angeklagten“ vorzugehen. Wenn Ihnen so etwas das erste Mal passiert, ist häufig die Versuchung groß, mit aller Macht gegen den Verursacher vorzugehen, doch in vielen Fällen ist es für Sie besser, den Missetäter zu belehren.

2. Erste Schritte

Sie haben also entdeckt, dass jemand eines Ihrer Designs gestohlen hat. Gleich, ob Sie dies selbst entdeckt haben oder ein anderer es Ihnen berichtet hat – es kann für Sie eine schmerzhafte Erfahrung sein. Im ersten Moment wollen Sie vielleicht eine wütende Email schreiben, einen Kommentar auf der Website desjenigen hinterlassen oder ihn öffentlich bloßstellen, aber nehmen Sie sich noch für einen Augenblick zurück und überlegen Sie sich, welche Optionen sie haben.

Von der Art und Weise, wie Sie mit dieser Situation umgehen, wird weitgehend Ihre Zufriedenheit mit der Lösung abhängen. Wenn Sie die Person angreifen, wird deren erste Reaktion sein, sich zu wehren oder auf ihrem Standpunkt zu beharren und eine Einigung mit Ihnen abzulehnen. Vielleicht wendet sie sich auch an einen Rechtswanwalt, um Sie loszuwerden, was für Sie teure Rechtskosten und eventuell sogar einen gerichtlichen Streit zur Folge haben könnte – nicht gerade das, worauf die meisten Designer ihr Geld und ihre Energie verwenden möchten.

Den Eigentümer der Website ausfindig machen
Als erstes sollten Sie die Website selbst überprüfen. In den meisten Fällen werden Sie dort in irgendeiner Form Kontaktdaten finden. Falls nicht (oder falls Sie dort lediglich ein Kontaktformular finden), lässt sich der Eigentümer der Website in der Regel über die Abfrage der Whois-Angaben zu der Domäne ermitteln. Ist die Domäne jedoch verdeckt registriert, werden Sie den Webhosting-Anbieter bezüglich der Kontaktdaten ansprechen müssen. Wenn auch das nicht zum Erfolg führt, bleibt Ihnen als letzte Möglichkeit wohl nur der Rechtsweg.

Die erste Kontaktaufnahme
Denken Sie daran, dass die Person, die sich Ihres Designs bemächtigt hat, sich möglicherweise gar nicht bewußt ist, etwas Unrechtes getan zu haben. Mit Ihrer ersten Kontaktaufnahme haben Sie die Gelegenheit, diese Person über die Rechte am geistigen Eigentum aufzuklären. Seien Sie nicht anklagend – lassen Sie sie wissen, dass das momentan von ihr verwendete Design urheberrechtlich geschützt ist und dass Sie auf der sofortigen Stilllegung der Website bestehen müssen, wenn die Person nicht nachweisen kann, dass sie für das Design bezahlt hat.

Senden Sie eine Email: „Mein Website-Design wurde gestohlen!“ Und nun?
Möglicherweise ist sich der Eigentümer der Website gar nicht bewusst, dass sein Design kein Original ist. Wenn er einen weniger angesehenen Designer engagiert hat, ist er vielleicht in dem Glauben gelassen worden, sein Design wäre in jeder Hinsicht ursprünglich und Ihre Email ist für ihn erstmal ein Schock. Wenn Sie in Ihrer ersten Email freundlich und höflich bleiben, kann das einen großen Unterschied auf die Art und Weise der Reaktion machen.

Wenn Sie keine Antwort erhalten
Sollten Sie nach ein paar Tagen nichts von dem Eigentümer der Website gehört haben, können Sie immer noch auf seinen Internetanbieter zugehen und die Abschaltung der Seite verlangen. Wenn Sie nachweisen können, dass das Design Ihnen gehört und dass die Websitebetreiber keine Lizenz dafür haben, werden viele Anbieter die Website vorübergehend aus dem Netz nehmen, um eine Verwicklung in einen Rechtsstreit zu vermeiden, falls Sie sich für eine Klage entscheiden.

Sofern Sie sich hundertprozentig sicher sind, dass die Person Ihre Website vorsätzlich kopiert hat und sie auf Ihre Aufforderungen zur Abschaltung nicht reagiert, könnten Sie sie auch in Ihrem Blog, einem Forum oder auf einer anderen Website öffentlich bloßstellen.

Das ist allerdings schon riskant. Zunächst einmal könnte man Sie wegen übler Nachrede verklagen. Ob man damit Erfolg hat oder nicht, spielt keine Rolle: Sich in einem Prozess zur Wehr setzen zu müssen, ist fast immer teuer und zeitaufwändig. Die Person muss nicht im Recht sein, um Sie verklagen zu können. Selbst wenn alles, was Sie sagen, richtig und wahr ist, muss das den Kläger nicht davon abhalten, diesen Weg zu verfolgen.

Aber diese Art des Vorgehens hat auch ihre Vorteile. Wenn Ihr Blog von vielen Leuten gelesen, beziehungsweise das Forum von vielen verfolgt wird, bringen Sie möglicherweise andere dazu, sich Ihrer Sache anzuschließen und für Sie aktiv zu werden, um die rechtswidrige Website offline schalten zu lassen. Der Rechteverletzer könnte nachgeben, weil er die negative Publicity vermeiden möchte. Aber nochmal: Wägen Sie die Vor- und Nachteile sorgfältig ab und unternehmen Sie diesen Schritt mit Bedacht.

Schreiben Sie alles auf
Dokumentieren Sie alle Schritte, die Sie wegen des Diebstahls unternehmen. Notieren Sie sich, wann Sie die rechtsverletzende Website entdeckt haben, wann Sie Kontakt zum Eigentümer aufgenommen haben und ob dieser reagiert hat. Das wird Ihnen nützen, wenn Sie am Ende doch weitere Maßnahmen ergreifen müssen.

3. Besorgen Sie sich einen Rechtsbeistand

Wenn Sie immer noch nicht aus eigener Kraft weiterkommen, ist es möglicherweise Zeit, einen Anwalt zu kontaktieren. Der Anwalt wird vermutlich zunächst eine offizielle Unterlassungsaufforderung an den Schuldigen schicken. Darin wird in aller Regel erklärt, dass das verwendete Design urheberrechtlich geschützt ist und dass derjenige die Website sofort aus dem Netz nehmen muss oder ihm ansonsten rechtliche Schritte drohen.

Vielfach reicht so eine offizielle Unterlassungsaufforderung aus, um nahezu jeden abzuschrecken, und Sie werden sehen, dass das Design schnell geändert oder insgesamt entfernt wird.

Erfolgt jedoch weiterhin keine Reaktion, wird der Anwalt möglicherweise einen ähnlichen Brief an den Anbieter schicken, bei dem die Website gehostet ist, und deren Abschaltung wegen Urheberrechtsverletzungen verlangen. Webhoster reagieren für gewöhnlich auf diese Art von Schreiben, weil Sie nicht verklagt werden möchten.

Führt keine dieser Aktionen zum Ziel, kann der nächste Schritt ein Gerichtsverfahren sein. In vielen Fällen ist dies jedoch nicht den damit verbundenen Zeitaufwand, die Mühen und das Geld wert. An diesem Punkt sollten Sie einmal innehalten und sich bewusst Gedanken darüber machen, wie weit Sie zu gehen bereit sind.

Wenn derjenige, der Ihr Design entwendet hat, dies einfach nur auf seiner eigenen Website benutzt, werden Sie sich möglicherweise nicht mit einer gerichtlichen Auseinandersetzung plagen wollen. Die Auswirkung auf Ihre Einkünfte wird vermutlich nicht groß genug sein, um diese Art des Vorgehens zu rechtfertigen. Wenn jedoch der Rechtsverletzer Ihr Design weitervertreibt oder als sein eigenes ausgibt (beispielsweise als Teil seiner Produktpalette), dann könnte das Gerichtsverfahren durchaus sinnvoll sein. Fragen Sie Ihren Anwalt nach den Erfolgsaussichten aus seiner Sicht und nach den damit verbundenen Kosten.

Je nachdem, in welchem Land Sie Ihren Wohn- beziehungsweise Geschäftssitz haben, können Sie eventuell behördliche Hilfe bei der Abschaltung des Designs erhalten. Erkundigen Sie sich bei dem in Ihrem Land für Urheberrecht und geistige Eigentumsrechte zuständigen Amt nach der richtigen Behörde, die Sie ansprechen müssen.

4. Den möglichen Diebstahl verhindern

Sie können eine Reihe von Dingen unternehmen, um einen Diebstahl Ihrer Designs zu verhindern. Bei einigen handelt es sich um technische Lösungen, andere hingegen beziehen sich mehr auf das Frontend.

Schon das einfache Anbringen eines Urheberrechtvermerks auf Ihrer Website wird viele potenzielle Täter abschrecken, insbesondere solche, die Online-Inhalte nur dann als urheberrechtlich geschützt anerkennen, wenn dies entsprechend vermerkt ist. Auch solche Personen, die um die Illegalität ihres Handelns wissen, aber hoffen, nicht ertappt zu werden, könnten abgeschreckt werden, denn ein solcher Vermerk zeigt, dass Sie vorausschauender als andere Website-Inhaber agieren.

Technische Lösungen
Eine Sache, die Sie tun können, um das Entwenden Ihrer Designs zu verhindern, ist so genannten „Screenscraper“-Programmen den Zugriff auf Ihren Code zu verwehren. Zwar ist es unmöglich, jeden im Umlauf befindlichen Screenscraper abzublocken, doch der Artikel Design-Diebstahl vermeiden: Einige Tricks der Branche zeigt sowohl PHP- als auch ASP-Code, mit dem den meisten dieser Anwendungen der Weg versperrt werden kann.

Nutzen Sie Ihre .htaccess-Datei, um das Verlinken von Bildern auf Ihrer Website zu verhindern. Einige Diebe gehen so weit, Bilder direkt von Ihrer Website aus zu verlinken anstatt ihre eigene Bandbreite darauf zu verwenden.

Finden Sie heraus, ob Ihre Website abgekupfert wurde
Für gewöhnlich erfahren Sie nichts davon, dass Ihr Design gestohlen wurde, bis Sie auf einer Website darauf stoßen (was ziemlich unwahrscheinlich ist) oder bis es Ihnen von irgendjemand berichtet wird (was nur geringfügig wahrscheinlicher ist). Es gibt im Netz so genannte „Watchdog“-Websites, allerdings wurde die bekannteste dieser Seiten, Pirated-Sites, gehackt und vom Netz genommen.

Wenn Sie in Ihre Fußzeile oder an anderer Stelle in Ihrem Design einen eindeutigen Text einfügen, dann können Sie Diebe eventuell mit einer Suche nach diesen Schlüsselwörtern ausfindig machen. Das funktioniert zwar nicht immer, aber Sie könnten Glück haben.

Eine weitere Möglichkeit ist der Einsatz einer Website wie zum Beispiel CopyScape, die Ausschau nach doppelten Websites hält. Geben Sie einfach die URL Ihrer Website ein und das Programm sucht nach anderen Seiten im Netz, die Ihre Inhalte (und gegebenenfalls Ihr Design) kopiert haben.

5. Wenn Sie einen Gegner nicht besiegen können, verbünden Sie sich mit ihm

Wenn Sie mehr Zeit mit der Jagd nach Dieben als mit der eigentlichen Designarbeit verbringen, dann sollten Sie vielleicht in Betracht ziehen, Ihre Designs öffentlich zugänglich zu machen. Eine Freigabe im Rahmen einer „Creative Commons“-Lizenz oder einer anderen Lizenz für Open-Source-Software nimmt vielen Dieben die Versuchung.

Selbst Designer, die mit dem Verkauf von Vorlagen ihren Lebensunterhalt bestreiten, können von offenen Lizenzen zumindest teilweise profitieren. Wenn Sie Ihre Vorlagen im Rahmen einer gemeinnützigen Creative Commons-Lizenz abgeben und denjenigen Kunden, die Ihre Designs unmittelbar von Ihnen käuflich erwerben, zusätzliche Dienstleistungen anbieten (wie zum Beispiel die Einrichtung, Anpassung und den Support), kann das andere davon abhalten, sich Ihre Arbeit zunutze zu machen (und bei vielen die Versuchung, dies zu tun, gänzlich unterbinden). Wenn schließlich jemand Ihre Vorlage umsonst bekommen kann, warum sollte er dann jemand anders Geld dafür zahlen? Das ist etwas anderes, als Sie dafür zu bezahlen, denn Sie bieten dafür zusätzlichen Nutzen und Dienstleistungen an; viele Menschen sind auch daran interessiert, den tatsächlichen Designer beziehungsweise Künstler für seine Arbeit zu entlohnen.

Nicht zuletzt kann eine nicht zur Bearbeitung berechtigende No-Derivatives-Lizenz zumindest dazu beitragen, zu gewährleisten, dass Sie für Ihre Arbeit Anerkennung erhalten. So merkwürdig es auch klingt, eine im Rahmen einer Creative Commons-Lizenz freigegebene Vorlage stellt für viele Piraten keine Motivation mehr dar.

Weitere Quellen

(tm), (sl)

Kategorien
Webdesign

42 frische elegante Navigationsmenüs

Navigation ist wichtig. Gute Navigation kann über Erfolg oder Misserfolg einer Website entscheiden. Wer dazu noch nach Ideen sucht sollte einen Blick auf das werfen, was wir hier versammelt haben. Ob kleines Portfolio oder riesiges Portal, die Beispiele sollten zur Erstellung eigener Designs inspirieren.

Albumdruck

Navigation Screenshot

Mission Bicycle

Navigation Screenshot

UXBooth

Navigation Screenshot

Jon White Studio

Navigation Screenshot

Weight Shift Studio

Navigation Screenshot

Ryan Keiser

Navigation Screenshot

Resto Hull Pizzeria

Navigation Screenshot

EffectiveUI

Navigation Screenshot

AdWorks! Media

Navigation Screenshot

Carbonica

Navigation Screenshot

SpaceCollective

Navigation Screenshot

Power to the Poster

Navigation Screenshot

Rockatee

Navigation Screenshot

MacAllan Ridge

Navigation Screenshot

Mint

Navigation Screenshot

Mia & Maggie

Navigation Screenshot

Time For Cake

Navigation Screenshot

Bearskinrug

Navigation Screenshot

Housing Works

Navigation Screenshot

Hugs

Navigation Screenshot

Lucy Blackmore

Navigation Screenshot

tap tap tap

Navigation Screenshot

Huis Orange

Navigation Screenshot

RedVelvetart.com

Navigation Screenshot

Sushi & Robots

Navigation Screenshot

Envira Media

Navigation Screenshot

The Good Little Company

Navigation Screenshot

Norbauer Inc: The Code Lab

Navigation Screenshot

Principles of Freedom

Navigation Screenshot

StoryAbout

Navigation Screenshot

CrisVector.com

Navigation Screenshot

The Old State

Navigation Screenshot

Edgewater Cottage Community

Navigation Screenshot

13 Creative

Navigation Screenshot

Booreiland

Navigation Screenshot

Suie Paparude

Navigation Screenshot

166 Perry Street

Navigation Screenshot

Kathleen Edwards

Navigation Screenshot

Robert Dann Photography

Navigation Screenshot

Northtemple.com

Navigation Screenshot

Reactive

Navigation Screenshot

Boagworld

Navigation Screenshot

Weitere Artikel im Web