10 Web Design Regeln, die Sie brechen können
Da sich Webdesign und Design im Allgemeinen weiterentwickelt haben, wurden Regeln eingeführt, um konsistente und nutzbare Designs zu gewährleisten.
Einige dieser Regeln wurden einfach deshalb erstellt, weil Website-Schöpfer bestimmte Prinzipien ohne Rücksicht auf ihre Benutzer missbrauchten.
Aber diese Regeln werden von niemandem durchgesetzt und sollten, wenn nötig, gebrochen werden, besonders wenn das Brechen zu einem atemberaubenden Design führt.
In diesem Artikel präsentieren wir 10 Regeln, die Sie brechen können, wenn es Ihren Designanforderungen entspricht.
Regel 1: Die horizontale Bildlaufleiste wird nicht angezeigt
Eine signifikante Anzahl von Mäusen hat kein horizontales Mausrad. Dies macht es schwierig, nach links oder rechts zu blättern, wenn der Inhalt einer Webseite über die Seiten des Browsers hinausreicht.
Es kann ärgerlich sein, den Mauszeiger zum unteren Rand des Fensters zu bewegen und die Bildlaufleiste zu ziehen, um nur ein oder zwei Wörter zu sehen, die hinter dem sichtbaren Bereich der Seite liegen. Das heißt, hier sind einige gut gestaltete Websites, die die Bildlaufleiste auf effektive Weise arbeiten.
Benek
Benek verwendet JavaScript, um die Bildlaufrichtung des Mausrads von vertikal zu horizontal zu ändern. Jeder Artikel in Beneks Portfolio ist in eine eigene Spalte unterteilt. Die Website hat ein überraschend frisches Gefühl und fließt reibungslos.
Schuh-Guru
Schuh-Guru kommt mit horizontalem Scrollen davon, weil es die Art ausnutzt, wie Leute Schuhe betrachten. Die Leute betrachten die meisten Produkte von oben bis unten, aber Schuhe sind anders. Die Augen der Menschen bewegen sich normalerweise über die Länge des Schuhs. Mit dieser Gewohnheit zu seinem Vorteil, lässt Shoe Guru das Design seiner Website in die gleiche Richtung fließen, so dass die Bewegung sich natürlich anfühlt.
Stephane Tartelin
Stephane Tartelin nutzt die horizontale Bildlaufleiste, um seine Kunstwerke so aussehen zu lassen, als wäre es in einer Kunstgalerie. Obwohl das vertikale Mausrad nicht wie in den obigen Beispielen funktioniert, funktioniert der Effekt erstaunlich gut. Man könnte sogar argumentieren, dass der Effekt verringert würde, wenn das Mausrad zum horizontalen Scrollen neu codiert würde.
Grafische Therapie
Während Grafische Therapie zeigt auf seiner Seite keine horizontale Bildlaufleiste an, ermöglicht jedoch weiterhin horizontales Scrollen durch Klicken und Ziehen auf dem Bildschirm. Graphic Theory verwendete horizontale Navigation, weil alle seine Bilder die gleiche Höhe aber nicht die gleiche Breite haben. Die horizontale Navigation unterstützt den reibungslosen Ablauf der Website.
Der horizontale Weg
Der horizontale Weg ist eine Präsentation von Websites, die horizontales Scrollen verwenden. Die grungy Grafiken sind schön, und diese Seite ist einzigartig, soweit CSS Galerien gehen.
Regel # 2: Verwenden Sie eine minimale Anzahl von Schriftarten
Zu viele Schriftarten stehen normalerweise miteinander in Konflikt und überwältigen den Betrachter. Jede Schriftart hat eine Persönlichkeit und zu viele Persönlichkeiten können Unordnung erzeugen.
Um effektiv mehr als nur ein paar Schriftarten zu verwenden, muss ein Design sehr textorientiert sein und der Rest des Designs muss relativ ruhig sein. Hier sind einige Beispiele von Websites, die dieses Gefühl von Konflikt und Unordnung nutzen, um den Benutzer zu engagieren.
Links LA
Links LA verwendet viele Schriftarten in einem nichtlinearen Layout, um ein Gefühl von Energie zu erzeugen. Die Seite ist schwer zu lesen, aber sie zieht den Benutzer an. Es ist auch erwähnenswert, dass keine der Schriften übermäßig dekorativ ist; Jedes Wort ist lesbar und hält das Design sauber und sauber.
Geo-Elemente Design-Studio
Die Verwendung einer Vielzahl von Schriften vermittelt in der Regel ein Gefühl von Energie und Chaos, aber Geo-Elemente Design-Studio Die Website ist sehr offen und sauber. Jede Schriftart erhält ihren eigenen Platz, sodass der Betrachter sie nicht mit einer anderen Schriftart verknüpft. Das Bild des Himmels im Hintergrund unterstützt das Gefühl der Offenheit.
Richard Stelmach
Im Gegensatz zum letzten Beispiel, Richard Stelmach schiebt seine verschiedenen Schriften dicht aneinander. Das Design funktioniert, weil nur eine Schriftart nicht von Hand gezeichnet ist und die anderen beiden gut mit der Illustration funktionieren. Handschriftliche Schriftarten funktionieren normalerweise gut zusammen, auch wenn es viele verschiedene Schriftarten gibt.
Satsu
Satsu scheint viele verschiedene Schriftarten zu haben, hat aber eigentlich nur drei (ohne den Sports-Council-Portfolio-Artikel). Indem man alles sorgfältig abschließt, ordnet Satsu bestimmte Textzeilen miteinander zu, obwohl der Text in verschiedenen Schriftarten vorliegen kann.
Der Logotitel ist in einer Schriftart und die zwei Untertitel haben jeweils ihre eigene Schriftart, aber der Betrachter gruppiert diese drei Textelemente natürlich zusammen. Satsu ist in der Lage, Energie zu erzeugen, ohne die Seite mit Persönlichkeiten zu überladen.
Regel # 3: Verwenden Sie nicht zu viele Farben
Die Angst, mit einem Design zu weit zu gehen, trennt Profis vom Anfänger bis zum Neuling. Der unachtsame Versuch, ihre Designs so extrem wie möglich zu machen, mit brennenden Worten, blinkendem Text und so vielen Farben wie möglich.
Rookies wollen ihre Designs subtil und leicht im Auge behalten, aber am Ende können ihre Designs manchmal leblos aussehen. Die folgenden augenfälligen Designs sind von einigen echten Profis, die Grenzen schieben.
Matt Mullenweg
Matt Mullenweg wunderschönes farbiges Design sieht aus wie ein Aquarell (die Website wurde aktualisiert, seit dieser Artikel geschrieben wurde). Alle Farben im Hintergrund würden jedermanns Aufmerksamkeit erregen.
Im Allgemeinen haben gute Designs mit einer Menge Farben diese Farben im Hintergrund, mit einer einfacheren Palette im Vordergrund. Text zu lesen ist sehr schwierig, wenn zu viele Dinge passieren.
Travic Isaacs
Travis Isaacs Design hat einen bunten vertikalen Gradienten im Hintergrund, der das Design durchweg bunt erscheinen lässt. Diese Website hat leuchtendes Pink als Link-Farbe, die eine gute Wahl für Designer ist, die einen bunten Effekt erstellen möchten.
James De Angelis
James De Angelis ' Die Website zeigt, dass Text farbenfroh sein kann, ohne wie ein Anfänger zu wirken. Das Design ist sehr sparsam und der Slogan steht sicherlich im Mittelpunkt.
Regel # 4: Machen Sie das Ziel Ihrer Website offensichtlich
Etwas, das in den Ohren junger Designer wirklich überfüllt ist, ist, dass ein Design den Zuschauern sofort sagen sollte, was sie sehen, bevor sie irgendeinen Text lesen.
Markenerkennung ist wichtig für große Unternehmen, aber manchmal müssen die kleineren Leute ein bisschen schlauer sein, um die Aufmerksamkeit des Zuschauers zu bekommen. Zurückhalten von Informationen kann den Betrachter faszinieren und Leute dazu "necken", mehr zu lernen.
Wenn Sie diese Technik auf das Webdesign anwenden, kann die Zeit, die Benutzer auf Ihrer Website verbleiben, erheblich verlängert werden.
Cetrotrees
In den meisten Portfolios stellt sich der Freelancer oder die Firma in der Regel selbst vor und erklärt ihre Arbeit. Cerotrees Stattdessen gibt es Links und links Beispiele für die Arbeit, aber nichts erklärt die Idee oder die Person, die dahinter steht.
Die geheimnisvolle Atmosphäre, die den Ort umgibt, verleitet den Benutzer zum Bleiben.
Das letzte Mixtape
Das letzte Mixtape ist ein anderes Portfolio, das seine Arbeit zeigt und nichts mehr. Solche Designs strahlen ein Gefühl von äußerster Zuversicht aus. Sie versuchen nie, sich selbst zu verkaufen; Sie erwarten nur, dass der Benutzer weggeblasen wird und um einen Vertrag bettelt.
Peter Pearson
Die Verwendung eines Begrüßungsbildschirms ist eine gute Möglichkeit, den Denkprozess des Benutzers zu verlangsamen und ihn zu inspirieren, tiefer zu graben. Das Ziel der Splash-Seite ist normalerweise, die Site schnell mit Fotos oder einem kurzen Text zu erklären.
Aber in Peter Pearson Fall ist es sein Ziel, ein Gefühl zu evozieren. Der große Himmel und der Spritzer Text-Effekt machen gute Arbeit, um Neugier zu wecken, weil diese Dinge normalerweise nicht zusammen erscheinen. Diese Seite macht auch einen guten Job, um die Emotion, die durch die Splash-Seite erzeugt wird, in den eigentlichen Inhalt fortzusetzen.
Die seitlichen Scroll-Bewegungen und animierten Linien, die dem Benutzer folgen, sind sehr effektiv.
Piepmatzel
Eine gute Möglichkeit, die Sprachbarriere zu umgehen, ist, keine Wörter zu verwenden. Piepmatzel ist eine CSS-Galerie, und Leute, die schon einmal eine CSS-Galerie gesehen haben, werden sie wahrscheinlich sofort als solche erkennen.
Diejenigen, die das nicht getan haben, sind vielleicht genug fasziniert, um ein paar der Thumbnails in der Hoffnung, das Muster herauszufinden, einen Klick zu geben. Die kleine Menge an Text unten auf der Seite hilft beim Sortieren und ist überflüssig.
Regel Nr. 5: Navigation sollte einfach zu verstehen sein
Navigation sollte nicht der Flaschenhals einer Website sein. Benutzer sollten in der Lage sein, schnell zu finden, was sie wollen. Manchmal jedoch kann eine nicht intuitive und dennoch einnehmende Navigation dem Benutzer helfen, sich mit der Website verbunden zu fühlen und was sie fördert.
Alvin Tang
Wie im vorherigen Abschnitt erwähnt, wird eine Vertrauensbasis vermittelt, wenn sich ein Portfolio nicht buchstabiert. Dies ist der Fall in Alvin Tangs Fotografie-Portfolio. Wenn er zum ersten Mal auf der Site ankommt, erkennt der Benutzer nicht sofort die Wörter, die er als Links sieht.
Diese Unsicherheit sollte sie dazu bringen, ein bisschen herumzustochern. Wenn Sie die Maus über ein Wort bewegen, erkennen Sie, dass es sich tatsächlich um eine Verknüpfung handelt. Wenn Sie darauf klicken, wird ein wunderschönes Foto geladen. Das Foto wird Benutzer dazu verleiten, weiter zu surfen.
Um mehr Fotos zu sehen, müssen Benutzer auf die Schaltfläche "Zurück" in ihrem Browser klicken (was die meisten Leute verstehen) und dann auf einen anderen Link klicken. Es gibt keine Handhaltung im Design, und es funktioniert sehr gut. Dies ist kein konventionell "wunderschönes Design", aber es liefert genau das, was es braucht.
Kasulo
Kasulo ist es Navigation ist nicht schwer zu verstehen, aber der durchschnittliche Benutzer weiß vielleicht nicht genau, was er tun soll, wenn er auf der Website ankommt. Nach dem ersten Klick wird jedoch alles offensichtlich.
Der Benutzer navigiert die Portfolio-Teile im 3-D-Stil und die neuesten Elemente erscheinen am nächsten am Anfang. Mit dem Mausrad macht es noch mehr Spaß.
Marcio Kogán
Marcio Kogan Website ist ein weiteres Beispiel für eine gute Navigation, die nicht sofort offensichtlich ist. Die Anweisung "Drag me" ist schwer zu widerstehen, und sobald der Benutzer das tut, sind sie auf dem Weg zum Cruisen der Portfolio-Elemente. Die Mouse-Over-Vorschau ist ein kleines Detail, aber wirklich beeindruckend.
Ceranco
Wenn ein Kunde einen Designer bitten würde, seine Seite in 3-D zu erstellen, wie ein Ego-Shooter-Videospiel, würden die meisten Designer still vor sich hin lachen, tief durchatmen und dann langsam erklären, warum das eine schlechte Idee wäre .
Während die Website für Ceranco ist nicht gerade ein 3-D-Shooter, es könnte leicht für eine Art Indie-Computerspiel verwechselt werden. Websites wie diese sind großartig für die Interaktion mit Nutzern. Während die lange Ladezeit und schlechte Suchmaschinen-Optimierung dies für die meisten Projekte nicht ideal machen, ist es definitiv einen zweiten Gedanken wert.
Regel # 6: Verwenden Sie verschiedene Farben für den Text und den Hintergrund
Diese Regel wird vielleicht nicht überall geschrieben, aber viele Anfänger haben solche Angst, Text unlesbar zu machen, dass sie nicht die gleiche Grundfarbe für den Hintergrund und die Schrift selbst in Betracht ziehen. Sie können einigen einfachen Techniken folgen, um die ähnlichen Farben zu arbeiten.
Linksys
Das Linksys Site ist ordentlich, weil es ein Blau für alle seine Links hat, obwohl die Hintergrundfarbe verschiedene Schattierungen von Blau ist. Während ein Risiko und vielleicht nicht die größte Farbentscheidung, es funktioniert.
Brad Colbow
Brad Colbows Design ist Linksys wegen des blauen Textes auf blauem Hintergrund ähnlich. Blau auf Blau ist schwierig zu durchziehen, vor allem mit so vielen verschiedenen Blues auf der gesamten Website.
Powerset
Bis jetzt haben wir in diesem Abschnitt nur blaue Webseiten gesehen, weil blauer Text für das menschliche Auge am schwersten zu lesen ist, und so ist der lesbare blaue Typ immer beeindruckend. Wenn ein Texteffekt blau arbeitet, funktioniert er höchstwahrscheinlich in jeder Farbe.
Powerset verwendet einen Buchdruckstil für seine Schriftart, um einen 3D-Effekt zu erstellen, der den Text effektiv vom Hintergrund trennt.
Künstler im Design
Künstler im Design hat nicht nur grünen Text auf einem grünen Hintergrund und gelben / beige Text auf einem gelben Hintergrund aber hat Text direkt auf ein Foto.
Während einige einzelne Buchstaben schwer zu lesen sind, bleiben die Wörter als Ganzes lesbar. Diese Art von Effekt sollte fast immer im Mittelpunkt eines Designs stehen.
Horacio Bella
Horacio Bella nutzt einen weiteren 3D-Effekt für sein Portfolio. In diesem Fall scheinen die Buchstaben herauszuspringen statt nach innen eingedrückt zu sein. Ohne diesen Effekt wäre die Lesbarkeit stark reduziert worden. Ein weiterer guter Effekt, der hier verwendet wird, ist das enge Kerning von Buchstaben, was die Lesbarkeit weiter verbessert.
Regel # 7: Setzen Sie keine Animation in den Weg Ihres Inhalts
Ernsthaft, lassen Sie keine kleinen Flash-Anzeigen direkt dort erscheinen, wo der Nutzer gerade liest. Gleiches gilt für die Umfragefelder, die angezeigt werden, wenn sich der Benutzer in der Mitte eines Satzes befindet. Benutzer mögen es nicht abgelenkt zu werden, wenn sie einen Satz zur Hälfte durchmachen. Es sei denn…
Es ist wirklich schwer von der kleinen Spinne nicht begeistert zu sein ABA 's Website. Das Design ist sauber, und obwohl die Spinne eine Ablenkung ist, ist es in Ordnung. Bis jetzt ist diese Seite meiner Meinung nach die einzige Ausnahme von der Regel.
Regel # 8: Bleiben Sie bei websicheren Schriften
Obwohl die Techniken zum Ersetzen von Schriftarten noch jung sind, machen sie bereits großen Spaß. sIFR war der erste und vor kurzem Cufón und Typefasce.js sind aufgetaucht.
Diseñorama
Auf der Diseñorama Website, der rote "Reciementente" Text ist wählbar. Ein Nachteil ist, dass wenn die Site nicht sofort geladen wird, der Benutzer die ursprüngliche normale Schriftart kurz sehen wird.
Ein weiterer Nachteil ist, dass wenn der Benutzer entweder JavaScript oder Flash deaktiviert hat, nur die Originalschrift angezeigt wird. Alles in allem ist es immer noch ziemlich cool. Hoffentlich ist es eine Vorschau auf das, was in den nächsten Jahren kommen wird.
Kaktuslab
Kaktuslab verwendet auch sIFR für die blauen Unterüberschriften (wie "Winter Work"). Obwohl sIFR die komplizierteste Font-Replacement-Technik ist, kann Text kopiert und eingefügt werden, was einen großen Vorteil gegenüber den beiden anderen Techniken darstellt.
Regel # 9: Keine Splash / Landing Page haben
Viele Designer hatten dieselbe alte Diskussion mit ihren Kunden darüber, warum eine Splash-Seite keine gute Idee ist. Google neigt dazu, solche Seiten niedriger einzustufen, und sie verlangsamen den Nutzer davor, den gewünschten Inhalt zu erhalten. Aber sie können unglaublich schön und inspirierend sein, wenn sie richtig gemacht werden.
Glanz Postproduktion
Der Zweck des Portfolio-Beispiels, das auf der Begrüßungsseite von angezeigt wird Glanz Postproduktion Die Website soll eine emotionale Reaktion des Benutzers auslösen.
Bei jedem Besuch wird ein zufälliges Foto aus dem Portfolio geladen. Wenn Sie auf das Foto klicken, wird es verkleinert und an die Stelle der anderen Portfolio-Teile auf der Website gestellt. Der Skalierungs- und Bewegungseffekt bietet eine Fortsetzung und trägt dazu bei, dass die Emotionen des Benutzers in die übrige Arbeit des Unternehmens einfließen.
Issa London
Wenn eine Site vollständig in Flash erstellt wurde, kann die Ladeleiste als Begrüßungsseite dienen. Wenn einem Benutzer eine Ladeleiste angezeigt wird, schließt er entweder die Seite und wechselt zu einer anderen Registerkarte oder wechselt zu einer anderen Registerkarte und sucht während des Wartens an einer anderen Stelle.
Sobald die Seite geladen ist, warten Sie am besten darauf, dass der Benutzer vor dem Start zurückkehrt. Im Issa London In diesem Fall ist das Tor eine perfekte Metapher, um zu sagen, dass die Seite fertig ist und der Benutzer eintreten kann.
Wenn der Benutzer auf das Tor klickt, öffnet sich das Tor und verschiedene illustrierte Modelle erscheinen. Das Verwenden des Gate auf der Splash-Seite ist eine großartige Design-Idee, da sich der Benutzer beim Betreten anfühlt.
Regel # 10: Verwenden Sie keine Tabellen
Jeder Webdesigner, der Tabellen in seinen Entwürfen verwendet, wird sofort von erfahrenen Designern als Anfänger bezeichnet. Tabellen werden nicht in allen Browsern gleich angezeigt, und sie können den Quellcode unordentlich erscheinen lassen, aber zumindest wissen Sie, was Sie damit erreichen. Hier sind einige Beispiele für Designs, die Tabellen enthalten.
Dieser Tisch ist etwas schwer zu sehen, ist aber zwischen den beiden Stühlen versteckt. Es ist ein schöner kleiner Beistelltisch, trägt aber leider nicht viel zum Design dieser Seite bei.
Tabellen sind Weg im Hintergrund dieses Entwurfs an Arbeit am Spiel , aber sie halten die Laptops und andere Gegenstände der Arbeiter in Reichweite. Ohne diese Tische würde sich der Raum viel leerer anfühlen und das Hintergrundfoto hätte nicht den gleichen Effekt.
Obwohl dieses Design hauptsächlich Stühle enthält, erscheint oben rechts im Thumbnail ein hübscher kleiner Tisch. Sieht aus wie ein Topf darauf sitzt.
Soweit Designs mit Tabellen gehen, ist dies einer der besten. Mit zwei Tabellen, die in dieser Flash-Animation enthalten sind, gibt ihnen das Design viel Aufmerksamkeit. Diese Website sollte auf der Liste der Designer mit tollen Designs stehen, die Tabellen verwenden.
Die Regeln brechen!
Ein Verstoß gegen die Regeln ist in Ordnung, wenn ein Entwurf dies erfordert. Viele der hier besprochenen Designwahlen würden vom durchschnittlichen Designer nicht berücksichtigt. Dies unterscheidet große Designer von durchschnittlichen.
Diejenigen, die mutig genug sind gegen das, was ihnen beigebracht wurde, stehen immer hervor.
Geschrieben exklusiv für WDD BT Eli Penner. Er betreibt seine eigene Website unter SleepyHero.com
Haben Sie irgendwelche Regeln in Ihren Webdesigns verletzt? Warum oder warum nicht? Bitte teilen Sie Ihre Ansichten mit uns ...