Gemeinschaft & Inspiration

25 Beispiele für das Zusammentreffen von Web 2.0 und traditionellen Designregeln

In der großen Designwelt ist der Begriff "Web 2.0" relativ neu.

Mit ihr kommt ihre eigene Reihe von Standards, einige stark, andere nicht so stark, da Web 2.0 selbst eine sehr unbeständige, sich ständig weiterentwickelnde Definition von Design-Standards ist .

Unzählige Beispiele von Web 2.0-Seiten haben die Regeln eines einstmals starken Designs durchbrochen.

Auf der anderen Seite hat das Web 2.0 in vielen Fällen gängige Designfehlern verstärkt; Im Fokus stehen Usability, Interface und Lesbarkeit .

Im besten Fall steht das Web 2.0 den traditionellen Designregeln, die seit Jahrhunderten praktiziert werden, in nichts nach, obwohl es zweifellos ein Spiegelbild unserer Gesellschaft in ihrem gegenwärtigen Zustand der Hektik ist.

Hier finden Sie eine Sammlung von 25 Websites, die zeigen, wie sich Web 2.0 und traditionelle Design-Praktiken zu wirklich beeindruckenden Websites zusammenfügen lassen.

1. Pixel Matrix Design

Josh Pyles ist ein netter Kerl und er ist auch ein fantastischer, disziplinierter Designer. Seine neueste Version von Pixel Matrix ist ein echter Hingucker und nutzt besonders gut Farbe und ein starkes Rastersystem. Durchsuchen Sie sein Portfolio und Sie werden sehen, dass er diese Praxis in seine Kundenarbeit mit einbringt.

Wenn Sie auf der "About" -Seite nachsehen (das nette Tab-System im Spiel beachten), können Sie sehen, dass Josh ein schönes Foto seines Arbeitsbereichs eingefügt hat.

Unterhalb dieser Aufnahme befindet sich eine großartige Balance von Web 2.0-Schriftarten, die eine extrem starke Informationshierarchie aufbauen. Er hält seine eigene Biografie klein und versteckt sich in der Seitenleiste und balanciert den größeren Text des Inhaltsbereichs mit einem kleineren, ausgeklügelten Typ in der Seitenleiste aus.

Traditionelle Aspekte:

  • Großes Gitternetz.
  • Wunderbare Farbtheorie
  • Starke Informationshierarchie

Web 2.0 Verbesserungen:

  • Schöne Steigungen.
  • Subtile Details.
  • Große, gut lesbare Schriftarten.
  • Eine große Anzahl von Möglichkeiten, um in Verbindung zu bleiben.
  • Auch das Kontaktformular hat eine schöne Umsetzung von abgerundeten Ecken!

2. MuttInk

In letzter Zeit scheint Textur die größte Sache seit abgerundeten Ecken zu sein, und obwohl die Website von MuttInk nicht als typisches Web 2.0 klassifiziert wird, ist ein Blick alles, was man wissen muss, dass Jeremy Holmes (der Mann hinter der Arbeit) ein fantastischer Designer und Grafiker ist .

Liebe zum Detail, Textur und eine starke Identität machen dies zu einem persönlichen Favoriten.

Auch wenn die Tage der übermäßig gedämpften Farben etwas hinter uns liegen (was meiner Meinung nach eine gute Sache ist), bin ich immer noch ein Fan von subtilen, erdigen Tönen, die mit hellen Akzenten ergänzt werden, und MuttInk hat das brillant gelöst .

Das Türkis auf dem Beige knallt wirklich, und behält den "zeichnenden Tabellen" Gefühl bei, das den Aufstellungsort durchdringt. Und obwohl der Typ auf der winzigen Seite und ein bisschen schwer zu lesen ist, sieht es auf der Seite immer noch gut aus.

Traditionelle Aspekte:

  • Sehr viel Liebe zum Detail.
  • Netter Typ (obwohl vielleicht zu klein).
  • Große Markenidentität.
  • Große Raumnutzung, insbesondere auf den Portfolioseiten.

Web 2.0 Verbesserungen:

  • Großer Gebrauch von Textur.
  • Große, professionelle Bilder zeigen die Arbeit.
  • Schneller Zugriff auf soziale Verknüpfungen.

3. 45 Royale

Das Portfolio um 45 Royale zeigt nicht nur eine erstaunliche Vielfalt an Arbeiten, sondern es zeigt auch, dass das Team hinter der Website eine gute Nutzung mehrerer Design-Standards versteht. Es ist eine fantastische Mischung aus Web 2.0-Fallbacks, hat aber eine solide Grundlage in traditionellen Design-Standards (und schaut euch diese Farben an!).

Insbesondere 45 Royale hat eines der besten Rastersysteme, die ich in letzter Zeit gesehen habe, und die Bilder, die sie ausgewählt haben, um die Arbeit zu präsentieren, passen gut zu dem fluoreszierenden farbigen Header oben.

Es ist immer ein Vergnügen, die Farbtheorie und das Organisationsnetz mit solch einer großartigen Harmonie zu sehen, und sie haben alles mit einer hochentwickelten Mischung von großen und kleinen Fonts ergänzt.

Helle Farben um eine sekundäre Palette von Grau, Weiß und Schwarz? Genial.

Traditionelle Aspekte:

  • Eines der besseren Beispiele für ein Rastersystem.
  • Viel Whitespace und Atmungsraum.
  • Brillante Farbwahl.
  • Guter Informationsfluss.

Web 2.0 Verbesserungen:

  • Die Farben singen einfach ... so sehr, dass ich es in beiden Kategorien aufgeführt habe.
  • Der Jumbo-Typ ist gut lesbar, aber geschmackvoll.
  • Große Verwendung von Illustrationen und Grafiken.
  • Eine Vielzahl von Projekten ist gut organisiert und schön dargestellt.

4. Prisen Zoom

Ich bin ein Trottel für großartige Illustration, besonders wenn es auf einem wunderbaren Beispiel für Leerraum präsentiert wird. Ich liebe diese Seite so sehr, dass es einfach großartig ist, einfach durch das Portfolio zu klicken. Großartige Leerzeichen, tolles Rastersystem und wunderbare Verwendung von JavaScript; Diese Dinge sprechen mich an (ja, ich bin ziemlich oft vor einem Computer).

Das Wichtigste, was man im Auge behalten sollte, wenn wir mit den vielen Technologien konfrontiert sind, die heutzutage zur Verfügung stehen, insbesondere die durch JavaScript ermöglichten Fades und Tricks, besteht darin, sie zu verjüngen und zu beherrschen.

Erinnerst du dich an die späten neunziger Jahre, als Flash der letzte Schrei war? Erinnern Sie sich, wie satt von Flash wir alle danach waren? Gute Web-2.0-Standards sind sowohl Disziplin als auch Design, und Pinch Zoom hat alles unter Kontrolle.

Sie streuen ihre Seite mit der extravaganten Güte, halten sie aber schlank und lustig, mit praktisch null Zeit auf die Bilder wartend.

Traditionelle Aspekte:

  • Ein weiteres großartiges Rastersystem (hier ein Muster sehen?).
  • Schwarz auf Weiß scheint nie alt zu werden.
  • Schönes Gleichgewicht zwischen Schriften und Überschriften. (Die kleine Schrift, obwohl lesbar, könnte vielleicht eine Punktgröße oder zwei größer sein).

Web 2.0 Verbesserungen:

  • Der JavaScript-Portfolio-Slider ist unglaublich spaßig und effektiv.
  • Interface ist minimalistisch und direkt.
  • Abwechslungsreicher Einsatz von Illustration ist eine tolle Sache.
  • Umfasst die aktuelle Technologie des Internets, ohne umständlich zu werden.
  • Einzigartige Lösungen für das Seitenlayout (Schauen Sie sich das Mega-Drop-down an, wenn Sie auf den Info-Tab klicken. Da ist praktisch eine ganze Website versteckt!).

5. Cameron Moll

Ich war schon immer ein Fan von Camerons Arbeit, und wie du sehen kannst, neigt er dazu, auf der traditionellen Seite des Design-Feldes zu bleiben. Obwohl seine Blog-Seite dazu tendiert, sich der traditionellen Seite des anspruchsvollen Designs und der kleinen Schriften anzupassen, kann man die Eleganz und Schönheit seiner Portfolio-Seite, die eine fantastische Balance zwischen Neuem und Traditionellem darstellt, nicht leugnen.

Die Farben sind lebendig und die Schriftauswahl stimmt mit dem Gesamteindruck überein, aber wieder kann der Typ an einigen Stellen ziemlich klein werden, was ein Web 2.0 No-No ist. Aber wen bin ich zu picken? Cameron hat großen Erfolg und ist der Mann hinter Authenticjobs.com, eine großartige Ressource für Designer (und eine, die geholfen hat, meine Rechnungen zu bezahlen).

Traditionelle Aspekte:

  • Gut strukturierter Inhalt.
  • Subtile Farbvariationen sind eine nette Geste.
  • Typ wirkt elegant, neigt jedoch dazu, auf der kleinen Seite des Spektrums zu fahren. Trotzdem ist es lesbar und sieht gut aus.

Web 2.0 Verbesserungen:

  • Sehr schöne Verwendung der Textur.
  • Portfolio enthält schöne Bilder der Arbeit, die sehr einfach und leicht zu navigieren sind.

6. Metalabs "flüssiges" Tumblr-Thema

Das einzige Tumblr-Thema, das diese Liste hervorbringt, trägt den Titel "Fluid" von Metalab Design. Es hat die Liste aus einem einfachen Grund erstellt: Es ist ein verdammt schönes Beispiel für Web 2.0 in seiner besten Form. Einfach, sauber und glänzend mit Farbe.

Man könnte es in diesem Vergleich ein wenig einseitig finden (es ist ein Web 2.0 Catch-All). Das liegt daran, dass Metalab dafür bekannt ist, Standards in der Web 2.0-Arena zu setzen, und diese Seite ist ein Beweis dafür. Metalab Design berücksichtigt jedoch die grundlegenden Regeln und hält die Struktur einfach und gut organisiert.

Transparenz und überlappende Grafik gehören zu den neueren Trends im Web 2.0. Sie geben einem Ort eine große Tiefe und verleihen ihm einen fast futuristischen Look. Metalabs "Fluid" hat dieses Konzept angenommen und, besser noch, es den Massen als herunterladbares Thema geliefert.

Traditionelle Aspekte:

  • Einfache, effektive Struktur.
  • Steht in der Masse der Tumblr-Themen.
  • Modernes (wenn auch einfaches) Farbschema.

Web 2.0 Verbesserungen:

  • Große, lebendige Fotografie.
  • Ups der Ante für bahnbrechendes Web 2.0 Design
  • Sehr gut lesbare Schriftarten und Header.
  • Die Verwendung abgerundeter Ecken und Verläufe ist extrem, aber sie werden in einer spaßigen, modernen Web 2.0-Lösung präsentiert.
  • Symbole sind eine großartige, minimalistische Möglichkeit, um die Optionen für jeden Beitrag zu navigieren.
  • Vergessen wir nicht die transparenten Hintergründe!

7. ViGet

Oh Junge. Diese Seite. Es bringt mich jedes Mal. Sicher, ich bin ein Weichling für Textur, aber dieser Designer hat auch die Subtilität der guten Farbtheorie und -hierarchie eingefangen.

Ich meine, schau dir einfach die Porträts in der Nähe an! Sie sind auffällig, aber sie konkurrieren nicht mit dem, was ein sehr komplizierter Design-Flow sein könnte. Vergessen wir nicht die großartigen Schriftarten und das Aquarellgefühl. Das Sahnehäubchen ist, dass, obwohl die Seite bildhart ist, sie im Handumdrehen geladen wird!

Ein weiterer cooler Aspekt dieser Website ist, dass die Designer viele Informationen mit ihrer Community teilen möchten. Es sind nicht Informationen, die sie als Designer verkaufen, sondern Informationen, von denen sie denken, dass sie für typische Nutzer wertvoll sind.

Sie erlauben es Ihnen, tiefer zu graben, ohne ihre Bedürfnisse in den Hals zu stopfen, was immer eine willkommene Übung ist.

Traditionelle Aspekte:

  • Gut strukturierter Inhalt.
  • Schöne Farbe und Art.
  • Obwohl die Schriftarten eher klein sind, ist der Hauptinhalt immer noch gut lesbar.
  • Großes Kunstwerk verschmilzt nahtlos mit dem Design (coole Porträts).

Web 2.0 Verbesserungen:

  • Das Thema "Aquarell" ist äußerst modern und obwohl es bildhart ist, wurde es entworfen, um schlank und gemein zu laden.
  • Sidebar-Inhalte sind gut organisiert und inhaltsgesteuert.
  • Einzigartige Lösung für die "Speech Bubble" -Box in der Seitenleiste.
  • Viele gemeinsame, inhaltliche Informationen.

8. FeelWire

Ein weiteres erstaunliches Beispiel für großen Whitespace ist Feelwire. Schwarzer Typ auf weißem Hintergrund, mit großen Grautönen dazwischen, scheint nie alt zu werden. Fügen Sie ein paar bunte Symbole hinzu und Sie haben eine einfache, aber effektive Website. Es geht hier um Einfachheit (heck, sie haben nur eine Seite!).

Die Web 2.0-gestylten Symbole dienen als das Herzstück dieser Seite, und sie tragen viel dazu bei, die Seite zusammen zu halten. Sie verhindern auch, dass die Site mit Text überflutet wird, und geben dem Benutzer etwas, worauf er neugierig sein kann.

Nachdem ich über diese Icons gerollt war, war ich wirklich glücklich mit dem, was ich gefunden habe: Ein sehr einfacher Hover-Status, der mir die Informationen lieferte, die ich suchte, und zwar mit dem allseits beliebten Web 2.0 "Speech Bubble". Eine tolle Sache.

Letzte Sache: Obwohl ich die roten Links mag, die auch von der Seite abspringen und gut mit den Icons interagieren, denke ich, dass sie den Kontaktlink etwas auffälliger machen sollten. Jetzt ist es ein wenig zu versteckt in den Inhalten und ich musste wirklich nach einer Möglichkeit suchen, mit diesen talentierten Entwicklern in Kontakt zu kommen. Ich sag bloß'.

Traditionelle Aspekte:

  • Kurz, süß und auf den Punkt gebracht: eine Seite mit einer Seite.
  • Leerzeichen!
  • Subtile, geschmackvolle Schriftarten.
  • Nettes, einfaches Layout.

Web 2.0 Verbesserungen:

  • Die glänzenden Symbole erscheinen auf der Seite.
  • Wirklich coole Rollovers auf den Icons halten die Seite übersichtlich und geben Ihnen die Informationen, die Sie brauchen, auf unterhaltsame Art und Weise.
  • Nette Avatare fügen ein menschliches Element hinzu.

9. Agami Kreativ

Okay, vielleicht ist es nur eine persönliche Sache mit diesen stark strukturierten Seiten, aber was Agami Creative macht, ist sehr gut. Es ist ein weiteres aktuelles Beispiel dafür, wie bildlastige Websites an einem Tag mit Hochgeschwindigkeitsverbindungen zu einer vollkommen akzeptablen Lösung werden können.

Das Herzstück dieser Seite ist auf jeden Fall der Aquarell-Header, der als perfekter Hintergrund für das schlaue Logo-Design dient. Es beherbergt auch die Navigation, die gerade genug Aufmerksamkeit auf seinen Standort legt, aber ohne den Benutzer zu beleidigen (weil die meisten Leute wissen, wo man heutzutage die Navigation findet).

Wenn Sie auf die Portfolio-Seite klicken, werden Sie ein Layout mit der perfekten Menge an Atmungsraum und einem starken Gittersystem bemerken.

Einfache Bilder tragen zur Arbeit bei und lenken die Blicke auf die einzelnen Projekte, wie zum Beispiel durch ein Schlüsselloch zum Endergebnis. All dies ist mit einer anspruchsvollen Serif-Schriftart für die Header und einer gut lesbaren Sans-Serif-Schriftart für den Fließtext versehen.

Traditionelle Aspekte:

  • Schönerer Einsatz der Farbtheorie.
  • Großes Kunstwerk.
  • Interessante Kombination von Schriften.
  • Das künstlerische, von Hand gezeichnete Logo hat ein Gefühl, das überall auf der Website zu finden ist.

Web 2.0 Verbesserungen:

  • Die übergroße Navigation erleichtert das Navigieren auf der Website.
  • Sie machen es wirklich einfach, Kontakt aufzunehmen.
  • Die Verwendung von Avataren ist eine gute Idee (obwohl ich ehrlich gesagt denke, dass sie damit besser hätten arbeiten können. Nicht sicher, wie der Anime-Look mit dieser Seite in Verbindung gebracht werden soll, außer dem asiatischen Einfluss?).
  • Liebe die Textur!

10. Stören Shukla

Designer Adit Shukla ist eine weitere Seite mit einem großartigen, anschaulichen Ansatz und weiß, wie man ein tolles Farbschema zusammenstellt und sogar mit einer netten Lösung für die Seitenleiste spielt.

Aus irgendeinem seltsamen Grund sind viele Sidebars schlampig und übersehen, als hätten Designer die Erlaubnis, die Regeln des guten Designs zu ignorieren, wenn sie die Seitenleiste einer Site zusammenwerfen. Nicht mit dieser Seite.

Obwohl der Inhalt minimal ist (sogar ein bisschen spärlich), kann man nicht umhin, die Kreativität zu lieben, die involviert ist, besonders in dem illustrativen Header, der eine notwendige Menge an Tiefe hinzufügt. Die Navigations-Tabs oben sind auch eine nette Geste.

Traditionelle Aspekte:

  • Leuchtende Farben.
  • Kreative Lösungen für gängige Elemente wie die Seitenleiste und die Kopfzeile
  • Illustration fügt viel Tiefe hinzu.

Web 2.0 Verbesserungen:

  • Einfaches Layout mit einer gut entwickelten Header-Illustration, in der auch die Navigation untergebracht ist.
  • Große Art ist effektiv.
  • Mehrere Wege, um die Seite zu navigieren (obwohl ich ehrlich gesagt nicht überzeugt bin, dass das so eine gute Sache ist).
  • Transparente Tabs sind eine nette Geste.

12. Sahne-Schaufel

Das erste, was Sie an Cream Scoop bemerken werden, ist die kühne Auswahl an Farben, die auf der gesamten Website verwendet werden. Sie haben keine Angst, die Farben von der Norm zu nehmen, und das Ergebnis ist so erfrischend wie anders.

Obwohl die Farben fett sind, gibt es auch subtile Mischungen aus starkem Typ und Farbverläufen, die überall auf der Website gespickt sind. Beachten Sie, wie der Hintergrundgradient oben aufgehellt wird, wie der Rand eines Scheinwerfers, um die ansonsten minimale Navigation hervorzuheben. Der Typ ist gut organisiert und ausgewogen, mit einem ausgeprägten Web 2.0-Feeling.

Traditionelle Aspekte:

  • Mutige Farbauswahl, aber eine Auswahl, die auf überraschend effektive Weise funktioniert.
  • Minimalistische Navigation, die den Job erledigt.
  • Großer Gebrauch der spielerischen Illustration.
  • Layout ist strukturiert, aber macht Spaß.

Web 2.0 Verbesserungen:

  • Fantastische Verwendung eines Farbverlaufs im Hintergrund.
  • Leuchtendes Blau erregt wirklich deine Aufmerksamkeit und lenkt es auf wichtige Dinge.
  • Coole Verwendung von Avataren auf der About-Seite (wie alt sind diese Jungs?).
  • Große Schriftarten überall verwendet.

13. Kohlensäure

Carbonica verzichtet auf die Farbverläufe und Glanzleistungen des Web 2.0 und setzt auf einen "zusammengesteckten" Look, der an ein Sammelalbum erinnert. Große Verwendung von Textur und Animation, aber auch eine wirklich lustige Art von Hand gezeichnet.

Achten Sie darauf, ein wenig nach unten zu scrollen und schauen Sie sich die Symbole an, die auch perfekt zum Thema passen!

Traditionelle Aspekte:

  • Grundstruktur ist im Spiel.
  • Handgemachter Schriftzug passt gut zum Thema der Website.
  • Die Animation ist eine nette Geste (aber Entschuldigung, die Verwendung von Flash hält diesen Punkt aus der Kategorie Web 2.0 heraus).

Web 2.0 Verbesserungen:

  • Die Textur ist großartig.
  • Schlagschatten fügen realistische Tiefe hinzu.
  • Nette Ikonen, Fotos und Illustration.

14. DSGN + DVLP

Auch hier funktioniert das gesamte Schwarz-Weiß-Farbschema für diese Seite und sie betonen diese Richtung mit einigen sauberen Symbolen, die direkt aus der Web 2.0-Handtasche gezogen wurden.

Die Homepage steht als eine Art Splash-Seite und hat eine gute Mischung aus Icons, starkem Layout und sogar ein bisschen Fotografie. All diese Elemente vereinen sich auf raffinierte Art und Weise und bringen einiges an Energie frei.

Sie werden bemerken, dass die sekundären Seiten eine separate, dreispaltige Vorlage verwenden, um die Informationen zu liefern. Es ist alles sehr minimalistisch, aber das ist keine schlechte Sache.

Traditionelle Aspekte:

  • Schwarz, Weiß und Grau bieten ein deutliches Gefühl.
  • Gute Art-Balance auf der Homepage.
  • Die 3-Spalten-Vorlage für die Sekundärseite ermöglicht einen konsistenten Informationsfluss, sobald Sie sich von der Startseite entfernen.

Web 2.0 Verbesserungen:

  • Social Media Bewusstsein ist definitiv im Spiel.
  • Glänzende Symbole, die überall verstreut sind, fügen benötigte Farbe hinzu.
  • Gute Mischung aus Fotografie und Icons.
  • Jumbo-Symbole werden auf den sekundären Seiten angezeigt.

15. Marchand de Trucs

Vielleicht kann ich die Sprache nicht sprechen, aber das bedeutet nicht, dass die Seite nicht immer noch mit mir spricht ... Okay, diese Linie war lahm, aber trotzdem ist diese Seite ziemlich süß. Es enthält wundervolle Kunstwerke und, dahinter, eine großartige Grundlage und strukturierten Inhalt. Nicht schlecht für das, was (glaube ich) ein Online-Zauberladen zu sein scheint!

Traditionelle Aspekte:

  • Intensive Liebe zum Detail.
  • Farbtheorie ist gut im Spiel, und es ist eine sehr engagierte Palette dabei.
  • Gute Verwendung von Schriftarten, die dem allgemeinen Thema der Website folgen.

Web 2.0 Verbesserungen:

  • Sehr schöne Verwendung der Illustration als Header
  • Relativ große Symbole.

16. Paiko

Paiko, obwohl einfach, ist einer meiner Lieblingsorte auf der Liste. Es präsentiert sich als eine Mischung aus traditionellen Design-Klammern und Web 2.0-Verbesserungen: Gute Art aller Größen (einschließlich der sehr Web 2.0 Mega-Schlagzeilen), große Leerzeichen und natürlich das immer wichtige Raster, das alles zusammenhält.

Die Wahl, Textur im Hintergrund hinzuzufügen, hebt die Seite wirklich hervor und fügt dem bereits starken Design eine weitere Ebene hinzu; Es wird mit Vorsicht behandelt und nicht übermäßig verwendet, wie es in einigen Websites der Fall ist. Diese Textur, kombiniert mit der anspruchsvolleren Anziehungskraft der Website, trägt wesentlich zur Stärkung der Identität von Paiko bei.

Blättern Sie zur Portfolio-Seite, um ein Beispiel für große Abstände und Rasterstrukturen zu sehen, ganz zu schweigen von einigen unterhaltsamen Beispielen für gut beschnittene Bilder.

Traditionelle Aspekte:

  • Einfache, zweispaltige Gitterstruktur mit Rinnenraum, die für ein angenehm luftiges Gefühl sorgt. Diese Struktur wird überall auf der Baustelle getragen, wodurch ein sehr gleichmäßiger Fluss entsteht.
  • Crafty Gefühl fügt eine nette Note hinzu, ohne aufdringlich zu sein.
  • Schriftvarianten und Farben sind sehr anspruchsvoll.

Web 2.0 Verbesserungen:

  • Jumbo-Text!
  • Die Überschrift ist groß und gut lesbar und spielt gut gegen den kleineren Typ darunter.
  • Tolle Bilder und Layout auf der Portfolio-Seite.
  • Die konservative Verwendung der Textur trägt zur Gesamtidentität bei.

17. Matt Dempsey

Auf der anderen Seite des Texturspektrums haben wir eine Seite von Matt Dempsey. Nun, es gibt definitiv eine Sache zu viel Textur, und einige würden einen gültigen Punkt haben, wenn sie argumentieren, dass diese Seite zu weit geht.

Aber ich mag es immer noch, und die Details haben mich überzeugt, als ich anfing, die Informationen zu durchforsten. Matt hat keine Angst davor, ein paar Regeln zu brechen, die mich immer nervt haben (wie Informationen über den Haufen zu halten, eine Idee, die ich bei einem Round-Table-Gespräch über überdenkender Marketingleute erfunden habe. Ich sage es, weil ich einmal einer war von diesen Marketing Leuten.).

Wenn es darum geht, präsentiert Matt Dempsey seine Arbeit und seine Website in einer kühnen und "in Ihrem Gesicht" Art und Weise. Wenn man ein paar Regeln bricht, dann geht es darum, ein Designer zu sein, ob die Regeln alt oder neu sind.

Traditionelle Aspekte:

  • Ob Sie es glauben oder nicht, es gibt ein einfaches Gittersystem, das der Textur zugrunde liegt.
  • Eindeutig und einzigartig
  • Keine Angst, ein paar Regeln zu brechen

Web 2.0 Verbesserungen:

  • Matt verwendet offensichtlich einen Web 2.0-Ansatz für seine Schriften und sein Logo
  • Gute Nutzung der Technologie auf den Innenseiten (der JavaScript-Slider ist ein cooler Touch).
  • Jede wichtige Information ist riesig und leicht zu lesen.
  • Portfolio präsentiert die Arbeit auf spaßige, hochtechnologische Art und Weise.

18. Digitale Mash

Mit Digital Mash können Sie sehen, dass die Artikel, die sie in die Website aufnehmen wollten, oder besser noch die Elemente, die sie auslassen wollten, gründlich durchdacht wurden.

In der Lage zu sein, das Fett zu reduzieren, ist eine wichtige Übung für jeden Designer, und Digital Mash legt die Grundlagen und nur die Grundlagen dar. Öffnen Sie die Seite und Sie werden innerhalb von Sekunden wissen, worum es beim Autor der Seite geht.

Der sanfte Verlauf des Hintergrunds eignet sich hervorragend, um den Inhalt auf raffinierte Weise darzustellen. Vom sauberen Typ bis zur druckvollen Grafik der Illustration, die Seite ist einfach gehalten.

Der beste Teil muss sein, wenn Sie tiefer in die Website eintauchen. Gehe zur Arbeitsseite und du wirst ein Portfolio finden, das auf fast altmodische Weise präsentiert wird; Die einzelnen Teile sehen aus, als ob sie bedruckt und in einen Lederkoffer verpackt werden könnten.

Die schlanke Präsentation, die Dropshadows und die kleinen Details (wie die leicht gebogenen Ecken jedes Stücks) geben dem Ganzen eine zeitgenössische Note. Das Neue mit dem Alten verbinden. Ich muss es lieben.

Traditionelle Aspekte:

  • Unnötige Elemente entfernt.
  • Leuchtende Farben auf der Startseite und in den Kopfzeilen der Sekundärseiten verleihen dem grauen Hintergrund einen lebendigen Akzent.
  • Die Informationshierarchie ist stark, ebenso wie der allgemeine Ablauf der Site.

Web 2.0 Verbesserungen:

  • Erstaunliche Präsentation der Portfolio-Bilder; Schlagschatten, umgedrehte Kanten und kleine Details bringen diese Seite wirklich auf einen höheren Standard.
  • Ein schöner Farbverlauf im Hintergrund stellt die Informationen gut dar.
  • Große Bilder und übergroße Bilder sind freundlich für die Augen.
  • Sehr coole Navigationslösung.

19. Kyan Medien

Kyan Media ist eine weitere Seite, die sich stark auf die Web 2.0-Seite des Spektrums konzentriert. Das Cloud-Design und die leuchtend blaue Farbpalette sind direkt aus dem Buch, aber es ist ein extrem starkes Beispiel für den Standard.

Die Seite spielt es gerade und in großen Buchstaben erzählt Ihnen genau, was sie tun, gefolgt von Beispielen der Arbeit. Es ist eine einfache Design-Strategie in unzähligen Websites gefunden, und das aus gutem Grund. Es ist schnell und bedroht nicht eine kurze Aufmerksamkeitsspanne.

Und wie alle guten Beispiele umfasst es sowohl die Technologie als auch die traditionellen Designregeln. Nehmen Sie sich Zeit und bewegen Sie sich über die Beispiele der Arbeit. Es ist eine unterhaltsame und informative Art und Weise, um ausgewählte Portfolio-Stücke zu präsentieren, und ermöglicht es uns als Benutzer, tiefer zu graben oder die Grundlagen mit nur einem Blick zu bekommen.

Traditionelle Aspekte:

  • Alles fühlt sich sehr solide an.
  • Das allgemeine Layout jeder Seite ist stark
  • Die Informationshierarchie ist großartig.
  • Schriftarten, Kopfzeilen und Schriftfarben sind durchgängig konsistent.

Web 2.0 Verbesserungen:

  • Helle blaue Farbpalette.
  • Spaß beim Benutzen der Illustration (wer mag keine Wolken?).
  • Punchy Fotografie.
  • Gute Implementierung der Technologie.
  • Subtile Dropshadows geben Tiefe.
  • Gut lesbare Schriftarten und übergroße Header.

20. Rockatee

Nun, es steht "Functional Design" im Header, also hat es besser funktioniert, oder? Glücklicherweise tut diese Seite. Es ist ein weiteres Beispiel dafür, wie Textur in den Webdesign-Markt eindringt und bestätigt, dass wir uns in der High-Speed-Ära des Surfens im Internet befinden.

Etwas, das Sie bemerken könnten, ist, dass Rockatee ziemlich viele Projekte in der Portfolioabteilung gezeigt hat, also war eine stromlinienförmige Lösung definitiv in Ordnung. Sie taten dies mit einer Reihe von Schnappschüssen, die die Tiefe ihres produktiven Portfolios demonstrieren. Tun Sie sich einen Gefallen und überprüfen Sie es.

Ein weiteres bemerkenswertes Merkmal ist die nette Navigation. Es ist gut platziert und macht die Website zum Kinderspiel. Sie helfen dir sogar auf der Homepage mit einem schönen großen Button, der zum Portfolio führt.

Traditionelle Aspekte:

  • Alles fühlt sich sehr solide an.
  • Das allgemeine Layout jeder Seite ist stark.
  • Die Farbtheorie ist gut erforscht und implementiert.
  • Starke Liebe zum Detail.

Web 2.0 Verbesserungen:

  • Fantastische Navigation.
  • Große Tasten führen Sie zu den wichtigen Bits.
  • Coole "Schnappschuss" -Portfolio mit großen Ernten der einzelnen Werke.
  • Site präsentiert den Designern viele Nebenprojekte, lässt sie aber nicht in die Mitte der zentralen Elemente eindringen.
  • Tolle Idee mit der Timeline auf der "About" Seite.

21. Dinge, die braun sind

Ein weiterer meiner persönlichen Favoriten ist Things That Brown. Sie ziehen eine extrem polierte Seite ab, die gleichbedeutend ist mit Sites, die von großen Agenturen erstellt wurden, aber sie geben Ihnen auch einen Einblick in die Leute hinter den Kulissen.

Die About-Seite enthält tolle Fotos, die zwar professionell genug sind, aber auch einen sehr eigenen Reiz haben. Sie können sehen, dass das Team einen Ausflug nach draußen gemacht hat, einen guten Platz gesucht hat und ein paar Schnappschüsse mit ihren eigenen Digitalkameras gemacht hat.

Ein professionelles, aber dennoch zugängliches und freundliches Team ist genau die Art von Team, mit der ich arbeiten möchte. Diese Leute sind real.

Dies ist eine dieser seltenen Websites, die nahtlos starke Designregeln mit modernen Optimierungen verbindet. Ihr Slogan "Demut Awesome" ist tot.

Traditionelle Aspekte:

  • Schöne Farbe mit tollen Akzenten.
  • Gute Verwendung von gut integrierten Kunstwerken.
  • Durch und durch beständig.

Web 2.0 Verbesserungen:

  • Die Navigation ist sauber und einfach zu lesen.
  • Schöne Knöpfe, die den Glanz nicht übertreiben.
  • Fotografie ist persönlich und fügt der Seite eine menschliche Note hinzu.
  • Das Portfolio ist klar und einfach zu navigieren, mit einer großartigen Präsentation der Arbeit.
  • Schlagzeilen sind groß, aber anspruchsvoll.

22. Andrew Bradshaw

Dies ist vielleicht einer der anspruchsvollsten Websites auf der Liste. Andrew hat eine großartige Möglichkeit, Textur, Typ, Schaltflächen und Fotografie in ein erstarrtes Paket zu integrieren. Er achtet auch auf die Hierarchie, betont die wichtigen Aspekte und minimiert die Abschnitte, die möglicherweise nicht für alle Benutzer von Interesse sind.

Die Navigation ist ein Highlight, mit verschiedenen Farben, wenn Sie den Mauszeiger über die Tabs bewegen. eine sehr schlanke Note.

Bemerkenswert ist auch die strukturierte Kopfzeile und die starke Schriftwahl in seinem Logo. Wieder kombiniert Andrew Subtilität und Akzente, um eine wunderschöne Seite zu schaffen, die durch und durch überzeugend ist.

Traditionelle Aspekte:

  • Insgesamt Anziehungskraft von sauberer Raffinesse.
  • Gute Verwendung von Akzentelementen, sowohl in Farbe als auch mit Typ.
  • Wie üblich hält es ein starkes Rastersystem zusammen.
  • Hierarchie ist gut implementiert.

Web 2.0 Verbesserungen:

  • Eine andere Art von Schaltflächen.
  • Brillante Verwendung von Fotografie und Bildpräsentation.
  • Tolle Details in der Navigation.

23. James Lai

In letzter Zeit habe ich etwas für Single-Page-Websites, und wie Sie wahrscheinlich schon erraten haben, bin ich auch ein Saugnapf für Textur. Geben Sie James Lai ein, ein Designer, der sich durch die Verwendung von Schrift, Textur und Animation auszeichnet.

Was ich ihm am besten empfehle, ist seine Fähigkeit, seine Seite auf einer einzigen Seite zu belassen, und vergib uns die "All About Me" Seite, die auf praktisch jeder Seite zu finden ist. Obwohl ich großen Wert auf das menschliche Element lege, spricht die Arbeit manchmal für sich selbst, und ich kann einem Kerl nicht vorwerfen, dass er an seine eigenen Fähigkeiten glaubt.

Traditionelle Aspekte:

  • Einfache, einseitige Lösung.
  • Animation fügt der Präsentation Interesse hinzu (obwohl es die Seite etwas verlangsamte).
  • Gute Liebe zum Detail.

Web 2.0 Verbesserungen:

  • Riesige Art auf der Homepage sagt Ihnen den genauen Zweck hinter der Website.
  • Kontaktinformationen sind leicht zu finden.
  • Coole Thumbnails helfen Benutzern beim Navigieren durch das Portfolio.
  • Interessante Verwendung der Textur.

24. Unterwerfen

Subvert wurde nicht nur wegen seines offensichtlich funktionalen Layouts, sondern auch wegen der verblassenden Slideshow auf der Homepage aufgenommen. Die Präsentation macht Spaß, ist aber auch für potenzielle Kunden informativ und wertvoll.

Die Hintergrundtextur wird durch transparente Details ergänzt, darunter ein tolles Navigationssystem mit transparenten Tabs! Der Hover-Status dieser Navigation ist subtil und behält die Transparenz bei.

Ich neige dazu, direkt zu den Arbeitsseiten auf diesen Seiten zu navigieren, und Subvert enttäuscht in seiner Darstellung nicht. Die Gitterstruktur ist stark und einfach zu navigieren, und beim Klicken wird der Benutzer zu einer erweiterten Ansicht der Arbeit geführt.

Traditionelle Aspekte:

  • Großer Gesamtfluss.
  • Starke Präsentation des Portfolios auf der Seite "Arbeit".

Web 2.0 Verbesserungen:

  • Riesiger Typ präsentiert auf einer verblassenden Slideshow.
  • Transparente Navigationsregisterkarten!
  • Die Knöpfe sind nett und fügen einen guten Kontrast zu den Hintergründen hinzu.
  • Slideshow des Büros auf der Seite "Firma" ist eine nette Geste.
  • Umarmt Technologie.

25. Gelbes Vogel-Projekt

Auf den ersten Blick scheint diese Seite etwas zerzaust oder zerstreut zu sein, aber je mehr ich sie betrachte und je mehr ich ihre Seiten durchblättere, desto mehr habe ich die Stärke ihrer Organisation bemerkt. Besser noch, das Indie-inspirierte Design fängt wirklich an zu appellieren, je länger der Aufenthalt ist, und das vereinzelte Aussehen der Seite passt tatsächlich zum Thema.

Wenn Sie sich die Fotogalerie anschauen, werden Sie eine Menge Amateurfotos sehen, die wieder zum Indie-Look beitragen, während Sie das Produkt präsentieren.

Diese Art von Underground-Ansatz, der von Seiten wie threadless.com populär gemacht wurde, bringt den Betrachter sofort zum Produkt.

Sie wollen ein Teil der Menge sein und nicht das Gefühl haben, dass jemand versucht, ihnen etwas zu verkaufen. Wenn das keine Web 2.0-Philosophie ist, bin ich mir nicht sicher, was ist.

Traditionelle Aspekte:

  • Das Crafty-Logo sorgt für ein Gefühl, das sich auf der gesamten Website auswirkt.
  • Auch wenn es sich anfänglich verstreut oder locker anfühlt, erkennt man, dass dieser "zusammengestellte" Look genau das ist, was die Designer anstrebten. Sie ziehen den Look ab und machen die Site trotzdem einfach zu navigieren.
  • Konsistenter, nicht traditioneller Ansatz.

Web 2.0 Verbesserungen:

  • Es geht mehr um die Philosophie mit diesem. Während der soziale Aspekt von Web 2.0 in voller Wirkung ist, wird diese Seite auch wegen seines viralen Marketing-Ansatzes und seiner großen zugrundeliegenden Philanthropie stark gemacht.
  • Baut eine Gemeinschaft auf!
  • Tolle Fotos und einfache Navigation tun auch nicht weh.

Abschließend…

Web 2.0 ist ein schwieriger Standard zu definieren , da traditionelle Design-Standards eine starre Sammlung von Regeln und Richtlinien (Gitterstruktur, Farbtheorie, Buchstabenabstand, Kerning, Tracking usw.) sind, Web 2.0, die ähnliche Standards enthalten, ist fast schon so eine Art zu leben.

Es verbindet Philosophie, Marketing, Technologie, Benutzerfreundlichkeit und unzählige andere Aspekte unseres geschäftigen Universums mit dem ultimativen Ziel, die Dinge für die Massen einfacher zu machen.

Insofern haben Web 2.0 und die traditionellen Regeln, die vor langer Zeit etabliert wurden, letztlich das gleiche Ziel: Das Chaos zu organisieren und den Komplex zu vereinfachen .

Heutzutage kann es ein harter Gig sein, also brauchen wir alle Werkzeuge, die zur Verfügung stehen, ob sie modern sind oder ob sie sich über Jahrhunderte bewährt haben.


Geschrieben exklusiv für WDD von Josh Sears. Er ist ein Writer, Illustrator und Designer für eine Reihe von webbasierten Projekten. Er verdient seinen Lebensunterhalt als Lead Web Designer, Creative Director und Co-Owner von Littlelines.com . Sie können Schau dir seine Arbeit hier an , oder Folgen Sie seinen Updates auf Twitter .

Wie benutzt man Web 2.0 Elemente mit traditionellem Design? Bitte teilen Sie Beispiele aus Ihrem eigenen Portfolio oder andere gute Beispiele, die Sie vielleicht schon einmal gesehen haben.



Designregeln Zusammenstellung von Designs traditionell Web 2.0