Der Blog Action Day 2010 steht vor der Tür! In diesem Jahr wird Webdesigntuts + mit einem speziellen Design-Review einer unserer bevorzugten Wohltätigkeitsorganisationen auf Wasserbasis beauftragt: charitywater.org. Wir werden die Schlüsselelemente erforschen, die die Website zu einem Erfolg machen und wie Sie die gleichen Designstrategien für Ihre eigenen Projekte ausleihen können!
Zu Ehren des diesjährigen Blog Action Days bieten wir eine ausführliche Designprüfung der Website charitywater.org an. "Wohltätigkeit: Wasser ist ein gemeinnütziger Verein, der den Menschen in Entwicklungsländern sauberes und sauberes Trinkwasser bringt".
Websites für gemeinnützige Organisationen sind immer interessante Projekte, weil sie Besucher zum Handeln einladen müssen. Die Website geht jedoch weit über das hinaus, was Sie normalerweise von einer gemeinnützigen Organisation erwarten würden. Es verfügt über solide Designgrundlagen auf der ganzen Linie und verfügt über ein paar großartige Designtricks, die ihm den Charakter und die Raffinesse geben, die nur wenige gemeinnützige Websites bieten. Lass uns gleich reingucken!
Das Erste, was Sie wahrscheinlich auf der Charity: water-Website feststellen werden, ist der disziplinierte Einsatz ihrer Markenfarbe. Das Einzigartige daran ist, dass sie Farbe auf dieselbe Weise verwenden, wie eine Unternehmensmarke Farbe verwendet. Beachten Sie, dass das Blau nie von einer Seite zur anderen variiert. Alles, von den typografischen Highlights bis hin zum Hintergrund und den Infografik-Farben, bindet die "Nächstenliebe: Wasserblau" wieder in das Design ein. Der Farbgebrauch ist auf der gesamten Site allgegenwärtig. Auch wenn das Layout von einer Seite zur anderen wechselt, dient Farbe als konstantes verbindendes Element ... was letztendlich dem Designer ein wenig mehr Spielraum gibt.
Durch die Verwendung von Controlled Colour entsteht eine professionelle Präsentation, die dem Besucher das Gefühl gibt, dass die Website glaubwürdig und vertrauenswürdig ist.
Was bedeutet dieser kontrollierte Farbgebrauch für die Ästhetik der Website? Es schafft eine einheitliche, zusammenhängende Benutzererfahrung. Wichtiger ist jedoch, dass die Verwendung einheitlicher Farben dem Besucher das Gefühl gibt, dass die Website glaubwürdig und vertrauenswürdig ist. Dies ist wichtig für gemeinnützige Organisationen, die ständig um das Vertrauen potenzieller Spender kämpfen müssen.
Typografie ist eines der Dinge, die jeder Designer kennt weiß Deep Down ist das Herzstück der Besucher, aber es wird oft zu Gunsten der Textformatierung im Status Quo vernachlässigt. Die Charity: water-Website zeichnet sich durch die Verwendung von Typografie aus, um den Benutzer einzubeziehen und die Schlüsselelemente hervorzuheben, die diese spezifische Krise wissenswert machen.
Technisch betrachtet, verwendet die Typografie etablierte Prinzipien, um die Augen herumzuführen: Navigation und Marke sind gedämpft, aber leicht zu lokalisieren. "Handlungsaufforderungen" und andere wichtige Informationen sind fett und einfach zu scannen. Innerhalb von 10 Sekunden nach dem Besuch der Website haben Sie die Nachricht wahrscheinlich ganz gut verstanden, indem Sie die wichtigsten Schlagzeilen gescannt haben. Das ist effektive Typografie! Anstatt die wichtigsten Punkte des Interesses innerhalb von Absatzblöcken zu vergraben, werden sie vom Besucher vor die Aufmerksamkeit des Besuchers gerückt.
Innerhalb von 10 Sekunden nach dem Besuch der Website haben Sie die Nachricht wahrscheinlich ganz gut verstanden, wenn Sie die wichtigsten Schlagzeilen durchsuchen. Dies ist eine effektive Typografie!
Während sich die Typografie auf der gesamten Site wild und innovativ anfühlt, bricht sie nie aus einem Kernsatz von Regeln heraus: Hauptschlagzeilen werden in Blockschrift gesetzt, die sofort Aufmerksamkeit auf sich zieht, Titel werden in Serifenschrift gesetzt, die sich würdig anfühlt, und die Der restliche Text auf der Seite ist in einer einfachen serifenlosen Schrift dargestellt, die leicht lesbar ist. Wenn Sie nur ein paar einfache Regeln wie diese verwenden, können Sie Ihr Design vereinheitlichen, auch wenn Sie mit Ihren Layouts und der Verwendung des Typs über die gesamte Platine gehen möchten. Werfen wir einen kurzen Blick auf die Typhierarchie der Site:
Eines sollte ich erwähnen: Wohltätigkeitsorganisationen: Wasser macht das technisch nicht ganz perfekt. Wenn Sie die Seite ausreichend durchsuchen, werden Sie hier und dort kleine Orte bemerken, an denen sie ihre eigenen Regeln missachten. An einigen Stellen ist der Absatztext beispielsweise serif, wobei der Großteil der Site serifenlos ist. Das Ergebnis ist ein kleiner Bruch in der Kohäsion der Site… diese Inkonsistenzen sind auf dieser Site geringfügig, aber es ist wichtig zu bedenken, dass es sich lohnt, sich die Zeit zu nehmen, wenn sich das eigene Design als "verstreut" fühlt Typstil, um die Vielfalt der verwendeten Stile zu reduzieren.
Ich halte diese Erklärung kurz und bündig: Wenn Sie Informationen haben, die am besten als Grafik dargestellt werden, zeigen Sie sie als Grafik! Menschen sind visuelle Denker, schlagen Sie nicht um den heißen Brei herum, indem Sie versuchen, etwas mit Worten zu erklären, die mit einem visuellen Element leichter beschrieben werden.
Dies ist ähnlich wie bei der dritten Strategie, aber es bedarf seiner eigenen kurzen Erklärung. Oft werden Sie versuchen, eine Seite für Inhalte zu entwerfen, die so komplex, akademisch und datengesteuert ist, dass die Verwendung von Text oder einer Infografik die Nachricht nicht effektiv übermitteln kann. In diesen Fällen ist es sinnvoll zu überlegen, wie Sie ein Bild mit Text koppeln können. Der Text ist immer noch der Ort, an dem sich die Rohdaten befinden, aber das Bild wirkt als "Weichmacher", wodurch die Informationen einfacher erscheinen, als sie wirklich sind - was die Menschen dazu anregt, sie tatsächlich zu lesen!
Es ist das "One Trick Pony" des Webdesigns. Das organisatorische Paradigma, das Sie beim Besuch der meisten Websites sehen, lautet wie folgt: 1 individuell gestaltete Startseite, 1 Handlungsaufrufseite und 1 Vorlage für alles andere. Die Vorstellung, nur eine Vorlage für den Großteil des Inhalts einer Website zu verwenden, ist jedoch kurzsichtig! Mit nur einer Vorlage langweilt der Besucher die Seite, sobald er die Homepage verlässt. Anstatt dieses motivierende Hoch beizubehalten, werden diese "One size fits all" -Vorlagen dazu aufgefordert, die Website zu verlassen, sobald sie das Gefühl haben, die Hauptidee gefunden zu haben.
Wo Wohltätigkeit: Wasser gelingt, ist, dass sie auf ihrem gesamten Gelände eine Vielzahl von Layouts verwenden. Das Ergebnis: Inhalt fühlt sich an frisch auf jeder Seite. Besucher werden aufgefordert, auf der gesamten Website zu klicken, um zu sehen, was sich in der nächsten Ecke befindet. Noch besser, das Design jeder Seite stimmt tatsächlich mit dem Inhalt dieser Seite überein (verrückte Idee, oder?). Die Entwicklung einer Vielzahl einzigartiger Seitenvorlagen kann etwas mehr kosten, was jedoch letztendlich dazu führt, dass die Website tatsächlich Besucher anlockt und der Erfolg der Besucher eher gelingt.
Es ist wichtig zu wissen, dass die Verwendung verschiedener Layouts nicht immer die richtige Lösung ist. Im Falle von Wohltätigkeit: Wasser funktioniert es, weil die Website über eine so große Vielfalt an Inhalten verfügt, dass es tatsächlich sinnvoll ist, jeder Art von Inhalt ein eigenes Layout zu geben. An anderen Standorten kann jedoch die Verwendung radikal unterschiedlicher Layouts von einer Seite zur anderen die Kontinuität in einem Design unterbrechen und tatsächlich als Nachteil für das Website-Erlebnis wirken.
Es gibt keine strenge Regel, um zu entscheiden, wann eine benutzerdefinierte Seitenvorlage erforderlich ist. Daher müssen Sie nur Ihr eigenes Instinktverhalten verwenden. Verwenden Sie im Zweifelsfall eine generische Seitenvorlage. Wenn die generische Vorlage den Inhalt mehr behindert als nützlich, sollten Sie ein benutzerdefiniertes Layout erstellen. Wenn Sie sich dazu entschließen, dass eine benutzerdefinierte Seitenvorlage erforderlich ist, sollten Sie die wichtigen Informationen (Marke, Navigation, Kontoinformationen, Einkaufswagen usw.) auf jeder Seite an derselben Stelle aufbewahren.
Seien wir ehrlich: Wenn Sie an einer gemeinnützigen Website arbeiten, wird es viele langweilige Informationsseiten geben, die zwar wichtig sind, aber keine Inspiration versprechen. Was für Wohltätigkeit: Wasser mit diesen Informationsseiten gemacht hat, zeigt sie in einem einzigartigen Rasterlayout. Durch die Verwendung von Symbolen und Bildern zusammen mit den Informationsblöcken werden die Besucher aufgefordert, sich umzusehen und etwas Interessantes zu finden. Noch wichtiger ist, dass diese ansonsten gewöhnlichen Seiten "Spaß machen", was den Besuchern eine subtile Botschaft vermittelt, dass selbst die langweiligsten Teile der Organisation dieser Organisation mit Kreativität und Leidenschaft ausgeführt werden.
Der Imbiss hier ist einfach: Ignorieren Sie nicht die üblichen Inhaltsseiten! Auch wenn diese Seiten unwichtig erscheinen, bietet sich eine einzigartige Gelegenheit, Besucher zu überraschen, indem intelligente Ansätze für die Darstellung dieser Art von Inhalten entwickelt werden.
Ich mag die Wohltätigkeitsorganisation: Wasser-Website ... das tue ich wirklich. Jede Seite fühlt sich frisch an, und ich möchte wirklich gerne mitmachen. Man könnte sagen, dass dies ein Zeichen für eine echte Ursache ist - eine Krise, die so wichtig ist, dass die Menschen einfach zur Teilnahme angezogen werden. Ich gehe jedoch auf die Beine und sage, dass die Wirksamkeit der Website sowohl mit dem Design als auch mit dem Inhalt zu tun hat. Wenn die Ursache darin bestand, "$ 5 an Steve Jobs zu spenden", wäre es mir egal, wie gut die Site entworfen wurde (einige mögen dem nicht zustimmen, haha!), Aber dies ist eine dieser wunderbaren Zeiten, in denen es möglich ist Design kann wirklich die Welt zu einem besseren Ort machen.
Vielen Dank, dass Sie den diesjährigen Blog Action Day-Beitrag gelesen haben! Hinterlassen Sie einige Kommentare.