Share
In diesem Beitrag zeige ich Ihnen ein Set von zwanzig Bildschirmmodellen für ein reales Projekt, an dem ich gerade gearbeitet habe - die bevorstehende Neugestaltung und Neuveröffentlichung unserer Design- und Inspirationsgalerie FaveUp. Ich erkläre einige der Gründe und wie es in das Design eingegangen ist, wie ich mit Design-Mockern eine Web-App ausspreche, sowie einige allgemeine Hinweise zum Design. Die neue Website, die wir Creattica Inspire nennen, wird jetzt von unserem Crack-Melbourne-Entwicklungsteam entwickelt und wird als eine unserer ersten Veröffentlichungen des Jahres 2009 die Interweb-Röhren treffen.
Dieser Beitrag ist Tag 6 unserer Webdesign-Sitzung. Creative Sessions "Session Day 5Session Day 7"Creattica Inspire ist eigentlich eine Neuerstellung einer bestehenden Site namens FaveUp, einer Galerie mit Logos, Visitenkarten und Websites. Um ehrlich zu sein, ist FaveUp eine Site, die trotz sich selbst erfolgreich ist. Ich habe es vor einem Jahr von einem externen Auftragnehmer bauen lassen, und es ist eigentlich nicht sehr gut zusammengestellt - jeder, der sich auf der Website angemeldet hat, weiß, dass es ziemlich fehlerhaft ist. Auch in puncto Design gibt es einige echte Probleme - ein komisches "Logo", ein auf manchen Seiten unübersehbares Interface, ein dummes Bewertungssystem, das man sehr leicht täuschen kann, und vielleicht das schlimmste von allen ist es ziemlich hässlich. Alles in allem ist es das, was ich liebevoll als "einen riesigen Haufen Müll" bezeichne..
Trotzdem hat die Site einige Dinge, die auf der Site gut zu funktionieren scheinen. Die Hauptsache ist, dass sie einen wirklich starken Fokus auf den Inhalt hat. Wenn Sie eine Seite nach unten scrollen, erhalten Sie Design nach Design und nicht viel anderes. Es ist einfach und klar und das ist wichtig, um eine Website nutzbar zu machen. So sieht die aktuelle FaveUp-Site aus:
Wir bauen das System also von Grund auf neu auf und importieren alle alten Inhalte. Die neue Website wird auf inspire.creattica.com zu finden sein und Teil der Suite kreativer Websites und Services sein, die wir auf Creattica.com erstellen. Vor ein paar Wochen habe ich mich also vorgenommen, FaveUp neu zu gestalten und gleichzeitig einen Look für Creattica zu entwerfen. Das Endergebnis sind diese Modelle, die ich besprechen werde:
Bei den Bildschirmen handelt es sich um eine Reihe von in HTML integrierten Mockups, die alle wichtigen Bildschirme der Website darstellen sollen. Die Entwicklerin dieses Projekts Erin führt sie jetzt in der Codebase zusammen. Anschließend werden wir sie aktualisieren und in das Endprodukt umwandeln.
Was ich im Folgenden gemacht habe, ist, dieses Design als eine Möglichkeit zu verwenden, über meine eigenen persönlichen Prozesse und Gedanken zu sprechen, die an ein reales Weltprojekt gebunden sind. Ich hoffe, Sie finden die Notizen nützlich!
Die Neugestaltung einer Website kann ein schwieriger Prozess sein, da Sie sich mit dem Gewicht der Erwartungen, der Widerstandsfähigkeit der Benutzer gegen Änderungen und dem allgegenwärtigen Gespenst auseinandersetzen müssen, das Sie möglicherweise einen Schritt zurück machen. Nach meiner Erfahrung besteht der Trick für eine erfolgreiche Neugestaltung darin, das Gesamtgefühl einer Website zu erhalten und einige der Markenzeichen des alten Designs in das neue zu integrieren
Indem Sie dieses Gefühl beibehalten, stellen Sie sicher, dass die Site ununterbrochen ist, und die Benutzer fühlen sich mit der neuen Site weiterhin vertraut. Um das Feeling einer Site zu erhalten, muss die neue Site nicht gleich aussehen. Dieser Übergang von FaveUp zu Creattica Inspire ist ziemlich anders! Es gibt jedoch eine Reihe von Dingen, die ihn in Verbindung bringen:
Jetzt können Sie natürlich das Layout der Seitenelemente neu gestalten und vollständig ändern, die Schlüsselseiten der Website überarbeiten oder zu einem neuen Designstil wechseln. Für ein erfolgreiches Redesign glaube ich jedoch, dass Sie nicht alles auf einmal machen können. Wenn Sie die Elemente der Seite verschieben möchten, sollten Sie das Design beibehalten und wirklich ähnlich aussehen. Wenn Sie das Design komplett ändern, sollte zumindest die Positionierung weitgehend gleich bleiben.
Wenn Sie einige Dinge nicht gleich beibehalten, verlieren Sie jegliche Kontinuität und es ist fast, als würde eine Site von Grund auf neu gestartet. Es gibt Zeiten, in denen dies notwendig ist (auch die alte Site ist schlecht), aber in den meisten Fällen, in denen eine Site beliebt ist, ist es am besten, eine gewisse Kontinuität aufrechtzuerhalten.
Ace UX-Designer Cennydd Bowles hat einen interessanten Artikel darüber, wie Benutzer auf Redesigns reagieren, in denen er die fünf Stufen der Benutzerreaktion erwähnt - Leugnung, Wut, Tarifverhandlungen, Depression, Akzeptanz.
Eine Seite, die ich dreimal umgestaltet habe, ist Psdtuts +. Wenn Sie sich das Bild unten ansehen, in dem Sie alle vier Designs nacheinander sehen können, sehen Sie, dass es so lief:
Bei jedem Schritt hat sich etwas sehr verändert (außer vielleicht beim letzten Schritt), aber auch einige Dinge sind immer gleich geblieben. Als wir von der einfachen HTML-Website zu einem WordPress-Blog wechselten, blieben das Farbschema und die Designelemente unverändert. Als wir vom braunen WordPress-Design zum weißen Design wechselten, blieb die Platzierung alles gleich - übrigens war dies der kontroverseste Schritt :-)
Wenn Sie eine große Site entwerfen, müssen Sie einige Zeit über das Build nachdenken. Dies gilt jedoch insbesondere für ein Redesign. Da wir über einen relativ großen Datensatz verfügen (all diese Benutzereingaben), ist es wirklich wichtig, herauszufinden, wie Sie auf so einfache Weise wie möglich auf das neue Design migrieren können.
Für FaveUp> Creattica Inspire ist eine der großen Überlegungen, dass wir von einem einzigen Bild pro Design zu zwei - einer Auflistung und einer detaillierten - wechseln. Auf der Detailseite können Sie sehen, wie ich mit keinem großen Bild umgegangen bin (eine einfache Mitte mit dunklem Hintergrund macht den Trick).
Ein gutes Webdesign sollte das Auge des Betrachters durch den Bildschirm leiten. Dies ist möglich, da verschiedene Elemente auf der Seite je nach Größe, Form, Farbe und Position unterschiedliche visuelle Prioritäten haben können. Unten sind ein paar Bildschirme, auf denen ich versucht habe, den Pfad "Ich bin" zu zeigen zu hoffen das Auge eines Betrachters nimmt
Andy Rutledge hat einen fantastischen Artikel zum Lenken eines Zuschauers rund um den Bildschirm mit tollen Beispielen. Lesen Sie es hier: Eine geführte Tour entwerfen.
Die Gestaltung einer Site mit vielen Informationen unterscheidet sich sehr von der Arbeit an einer Site mit geringem Gewicht. Wenn nicht viel Inhalt vorhanden ist, können Sie sich mit Ihrem Design auseinandersetzen und bis zu einem gewissen Grad das Design den Inhalt dominieren lassen, und das ist in Ordnung. Ein gutes Beispiel für eine Website mit geringem Gewicht ist ein persönliches Portfolio, in dem selbst ein stark gestalteter Look (zum Beispiel die ordentlich aussehende Design-Krankheit) noch gut funktioniert und die Website leicht zu verstehen und zu verstehen ist.
Eine inhaltslastige Seite hingegen ist ein anderer Wasserkessel. Grundsätzlich gilt: Je mehr Inhalt und Informationen auf einer Seite vorhanden sind, desto dezenter muss Ihr Design sein. Der Grund dafür ist, dass bei einer Menge Inhalt auf einer Seite ein komplettes Design im Weg ist und den Betrachter verwirrt. Es ist schwer, viele Informationen auf einmal zu verarbeiten, und der Mischung ein sehr schweres Design hinzuzufügen, und Sie riskieren, die Menschen zu überwältigen.
Ein zweiter, ebenso wichtiger Grund, das Design wieder abzurunden, ist der Fokus auf den Inhalt selbst. Auf der Inspire-Site sollen Zuschauer eine Galerie mit Design betrachten. Wenn das Design der Galerie selbst wirklich stilisiert und aggressiv ist, wird dies den Inhalt selbst beeinträchtigen und die gesamte Website schwächen. Wenn Sie also in eine Kunstgalerie gehen, sehen Sie nur schlichte weiße Wände. Können Sie sich dann vorstellen, ob sie überall Wandtapeten und dekorative Lichter haben??
Die ultimativen inhaltslastigen Websites sind natürlich Nachrichtenagenturen und Portale. Wenn Sie sich Washington Post, MSN, Yahoo, NYTimes anschauen, werden Sie feststellen, dass das Design bei allen zurückbleibt und oft relativ einfach ist.
Obwohl für eine informationsreiche Site keine aufwendigen Grafiken erforderlich sind, bleibt noch viel zu tun. Wenn Sie an dieser Art von Website arbeiten, müssen Sie viel mehr Arbeit leisten, um sicherzustellen, dass Ihre Benutzeroberfläche super sauber und benutzbar ist. Auf der Inspire-Site habe ich versucht, die Navigation sehr klar zu halten, viel Platz zu nutzen und Schichten aus Schwarz, Rot, Grau und Weiß zu verwenden, um verschiedene Abschnitte der Benutzeroberfläche abzugrenzen.
Wir bei Envato tun viel, um Familien von Websites zu erstellen. Wir haben die TUTS-Familie, die Marketplaces, und jetzt arbeiten wir an dieser Creattica-Familie von Websites. Dies hat mir viel Erfahrung bei der Erstellung von Designs verschafft, die auf mehreren Websites wiederverwendet werden können, um ein einheitliches Erscheinungsbild zu schaffen. Hier sind einige Dinge, die ich gelernt habe:
Als wir vor ein paar Monaten die erste Creattica-Site auf den Markt brachten - Creattica Daily -, plante ich nicht, vorauszusehen. Stattdessen habe ich einfach ein ordentliches Blogdesign entworfen und die Website gestartet, ohne darüber nachzudenken, was ich für die anderen Websites tun würde. Nun, wie Sie an diesem Creattica Inspire-Look erkennen können, musste ich wieder bei Null anfangen. Der alte Look steht jetzt als WordPress-Theme bei ThemeForest zum Verkauf. Es ist also keine totale Verschwendung, aber trotzdem lohnt es sich, vorausschauend zu denken und einen Look zu entwerfen, der für mehrere Standorte geeignet ist.
Um ein einziges Design für einige Unterwebsites zu erstellen, ist mindestens ein untergeordnetes Branding-Element erforderlich. Auf Creattica und TUTS ist es Farbe, auf den Marketplaces ist es eine Kombination aus Farbe und Logo / Tier-Thema. Was auch immer Sie wählen, es muss etwas vorhanden sein, um die Websites zu unterscheiden, wenn Sie zwischen ihnen wechseln.
Die Pflege einer Familie von Websites ist eine Menge Arbeit, daher lohnt es sich, den größten Teil des Designs konsistent zu gestalten. Dies bedeutet nicht nur, dass die Benutzer mit dem Feeling der Websites vertraut sind, sondern es bedeutet auch, dass Sie nicht so viel Arbeit erledigen müssen!
Bevor ich ein Projekt wie dieses beginne, nehme ich mir immer etwas Zeit zum Surfen. Abgesehen davon, dass meine Arbeit viel angenehmer wird, habe ich im Allgemeinen zwei Ziele vor Augen:
Was ist die Inspiration für Creattica Inspire? Es ist eine kleine Site namens CNN! Ich habe mir CNN angesehen und wie sie mit so vielen Informationen und so vielen Unterwebseiten umgehen, und ich entschied, dass mir zwei Dinge an der Website gefallen haben - das Gesamtlayout und die Idee von weißen Kästchen auf hellgrauem Hintergrund.
Sehen die beiden Designs gleich aus? Nicht wirklich. Kannst du die Ähnlichkeit sehen, nachdem ich darauf hingewiesen habe? Wahrscheinlich - vor allem, da beide Rot verwenden! Ist das eine schlechte Sache? Ich bin mir nicht sicher. Ich halte es für unaufrichtig, so zu tun, als würde ich in einem Vakuum arbeiten, und ich erfinde irgendwie neue Ideen.
Ich denke, es ist in Ordnung, sich von anderen Designern inspirieren zu lassen. Ich denke, es ist unmöglich, dies nicht zu tun. Es ist nicht in Ordnung, Designs zu kopieren. Wenn Sie also von einem anderen Design inspiriert werden, ist es wichtig, dass Sie Ihr eigenes Spin und Ihre eigene Interpretation entwickeln und bis zu dem Punkt entwickeln, an dem es wenig Ähnlichkeit aufweist.
Was ist deine Meinung? Ist die Inspiration in Ordnung? Wann fällt es in die Nachahmung? Ist mein Beispiel zu weit oder ok?
Ein Projekt wie Creattica Inspire ist interessant, weil es viel mehr beinhaltet, als nur eine HTML-Site zu erstellen oder sogar ein CMS-Produkt wie WordPress zu skizzieren. Es ist groß genug, um einige Entwicklungsprobleme, mehrere Zugriffsebenen und eine Vielzahl von Funktionen zu berücksichtigen. Hier einige meiner Gedanken zur Arbeit an einer Web-App:
Bei großen Projekten wie Inspire oder FlashDen ist es sinnlos, an jeden einzelnen Bildschirm zu denken, der sich auf der Website befindet oder befinden wird. Vertrauen Sie mir, wenn ich sage, dass es Seiten gibt, die Sie irgendwie übersehen, oder neue Funktionen, an die noch niemand gedacht hat, die später in das Design eingearbeitet werden müssen.
Ein viel besserer Plan ist die Gestaltung einer flexiblen und modularen Struktur. Das Inspire-Design ist so gestaltet, dass eine neue Seite leicht erstellt werden kann, indem einige dieser weißen Kästchen zusammengefügt, ein neuer Menüpunkt oder Untermenüpunkt hinzugefügt und Standard-Design-Elemente wie Mini-Galerie-Listen oder Benutzerkommentarfelder verwendet werden. In der Zukunft wird möglicherweise mehr Design benötigt, aber das Erstellen einer neuen Seite oder eines neuen Features wird das Layout nicht beeinträchtigen!
Fast jede Web-App erfordert eine Art Verwaltung. Im Falle von Inspire müssen wir neue Designs genehmigen, Elemente bearbeiten und so weiter. Früher habe ich immer einen speziellen Admin-Bereich für solche Funktionen entworfen - so wie WordPress dieses WP-Admin-Dashboard hat. In manchen Fällen ist ein Verwaltungsbereich eine gute Idee, in vielen Situationen ist es jedoch besser, die Inline-Verwaltung zu nutzen.
Inline-Verwaltung bedeutet, mit zusätzlichen Funktionen an dem regulären Front-End-Design zu arbeiten, das nur angezeigt wird, wenn der Benutzer ein Administrator ist. Wenn Sie zum Beispiel auf Inspire ein Administrator sind, erhalten Sie auf regulären Seiten ein paar zusätzliche Funktionen. Zum Beispiel können sie die Site wie eine normale Person durchsuchen und dann die gefundenen Elemente bearbeiten.
Der Grund für die Inline-Verwaltung ist hier zu bevorzugen, da wir bereits eine Reihe von Möglichkeiten für das Navigieren auf der Website erstellen, z. B. Suchen und Markieren, sowie eine großartige Möglichkeit, den Inhalt der Website anzuzeigen. Warum also alles neu in einem Administrator neu gestalten und neu erstellen Bereich. Bei der Inline-Verwaltung kann ein Benutzer Ihnen einen Link zu einem Element senden. Statt ihn im Admin-Bereich erneut aufzurufen, können Sie ihn direkt auf einer Seite bearbeiten.
Bei einigen Jobs dienen Sie als Webdesigner und Projektmanager. In meinem Fall liegt es an meinem Job bei Envato, aber selbst in der normalen Kundenarbeit können Sie ein Projekt im Auftrag Ihres Kunden in Auftrag geben und entwickeln. In solchen Situationen müssen Sie ein Entwickler- oder Entwicklerteam über die Erstellung des Projekts informieren, an dem Sie gerade arbeiten.
Es gibt verschiedene Möglichkeiten, sich mit einem Entwickler an einem Projekt zu beteiligen und mit ihm zu arbeiten. Viele davon hängen von der Größe und dem Umfang eines Projekts ab. Für so ein kleines Projekt wie dieses ist es das ich tun:
Aus Sicht des Webdesigns berücksichtigen diese 20 Bildschirme so gut wie alle wichtigen Layouttypen der Website.
Ich neige dazu zu denken, dass echte Designs die Funktionalität besser veranschaulichen als Wireframes - aber das ist ziemlich umstritten.
Theoretisch können Sie ein ganzes Projekt anhand von Benutzerszenarien ausloten, und es gibt viel Literatur in der Software- und Webentwicklung darüber. Ich empfehle, das User Interface Design von JoelOnSoftware für Programmierer zu lesen - auch wenn Sie Designer und kein Programmierer sind!
Der Sinn dieser Schritte ist folgender:
Das ist also mein grobes Verfahren, um einen Entwickler zu informieren. Wie geht's? Und wenn Sie selbst Entwickler sind, gibt es etwas, was ich besser machen sollte?
Eine ausführlichere Behandlung eines Briefings mit einem Entwickler finden Sie unter So erstellen Sie eine Webanwendung unter ReadWriteWeb. Sie können auch mit Ihrem eigenen Entwicklungsteam sprechen, um zu erfahren, was sie brauchen und wollen.
Ich denke, der Grund, warum Webdesign so ein toller Job ist, liegt darin, dass der Job so viele verschiedene Facetten hat. In diesem Artikel habe ich versucht zu zeigen, wie ein einzelner Website-Designjob alle möglichen Fähigkeiten und Probleme mit sich bringen kann - von der Inspiration des Designs bis zur Zusammenarbeit mit Entwicklern, von der Zufriedenheit der Benutzer bei einem Redesign bis zur Planung der Verwaltung einer Website. Sicher, es ist eine Herausforderung, aber das macht es so gut!
Was Creattica Inspire betrifft, so sollte es Anfang 2009 sein Debüt geben (ich kann nicht glauben, dass wir gleich um die Ecke sind!) Und Sie werden von der Einführung hier auf Psdtuts erfahren+!
Dieser Beitrag ist Tag 6 unserer Webdesign-Sitzung. Creative Sessions "Session Day 5Session Day 7"
Accentsconagua