Webdesigntrends für 2010
Puristen werden sagen, dass tolles Design zeitlos ist. Ja, in einer idealen Welt sollten wir Trends ignorieren.
Pragmatisch gesehen ist es jedoch sehr wichtig, Designtrends zu beobachten und einzubeziehen, insbesondere in Bezug auf Websites.
Seien wir ehrlich: das Web verändert sich rasant. Anders als in anderen Medien werden Designtrends im Web nicht nur von der Ästhetik getrieben.
Die Technologie verändert sich, was die Möglichkeiten des Mediums drastisch verändern kann.
Im Jahr 2010 sehen wir, dass Designer die Grenzen des Webdesigns immer weiter verschieben und die folgenden klaren Trends setzen ...
Druckdesign
Print-Design war schon immer eine Quelle der Inspiration für das Web. Webdesign gibt es schon lange genug, um einen starken Kern von Designern zu fördern, die noch nie in Print gearbeitet haben. Als Ergebnis sehen wir mehr Inspiration aus dem Druck, da diese Designer über das Web hinausschauen.
Serifenschriften
Eines der wichtigsten Probleme der Typografie ist die Lesbarkeit. Print-Designer haben immer Serif-Fonts bevorzugt, weil die Kanten die Sichtbarkeit verbessern und Buchstabenformen leichter erkennbar machen.
Sans-Serif-Schriften wurden im Allgemeinen als einfacher auf dem Bildschirm zu lesen angesehen. Aber mit mehr Benutzern, die mit hoher Auflösung browsen, und den Verbesserungen in der Schriftglättungstechnologie sind Serifenschriftarten für Textkörper sehr gut lesbar geworden.
Große Überschriften
Print-Designer verwenden schon seit Jahren große Rubriken, um Aufmerksamkeit zu erregen. Druckmaterial musste eine hohe Wirkung haben, wenn es überhaupt gelesen werden sollte. Wenn Sie eine langweilige Broschüre auf einem Schreibtisch sehen würden, würden Sie sich die Mühe machen, sie aufzuheben? Wahrscheinlich nicht.
Dieser Trend begann im Jahr 2009 und hat nur an Popularität gewonnen. Große Überschriften haben gezeigt, dass sie Aufmerksamkeit erregen und klar kommunizieren.
Mehrspaltige Layouts
Designer müssen innerhalb der Grenzen ihres Mediums arbeiten. Im Gegensatz zum Internet bietet der Druck keine Möglichkeit zum Scrollen, sondern wird durch die Abmessungen des Papiers gebunden. Wenn Sie mehrere Spalten verwenden, können Sie mehr Inhalt in denselben Bereich einfügen.
Mit zunehmender Bildschirmauflösung und dem Aufkommen von Rasterlayouts passen nun immer mehr Designer diese Methode an das Web an, um Websites einfacher zu verwenden und mehr Inhalt einzufügen.
Großes Bleibild
Ein Bild sagt mehr als tausend Worte. Es mag zwar eine Weile dauern, bis ein Foto die gleichen Auswirkungen auf das Internet hat wie das Drucken (das eine viel höhere Auflösung hat), aber die Einführung des Breitbandzugangs hat große Fotos leichter durchführbar gemacht.
Wir sehen, dass mehr Websites große, wirkungsvolle Bilder verwenden, um Nutzer einzubeziehen und ein immersives Erlebnis zu schaffen.
Diagramme und Infografiken
Druckdesigner verwenden seit Jahren Grafiken, um komplexe Informationen zu übermitteln. Dies wird am häufigsten in Zeitschriften und Geschäftsberichten gesehen.
Grafiken können komplexe Beziehungen und Verhältnisse auf eine Art und Weise kommunizieren, die mit Klartext zu schwierig ist. Infografiken neigen dazu, ein einfaches, aber optisch ansprechendes Aussehen zu haben, und mehr Designer verwenden Infografiken oder ahmen den Stil in ihren Entwürfen nach.
Einfachheit
Antoine de Saint-Exupery hat einmal gesagt: "Perfektion ist nicht erreicht, wenn nichts mehr hinzuzufügen ist, als wenn nichts mehr wegzunehmen ist." Die Vorteile der Einfachheit im Design sind vielfältig.
Hicks Gesetz sagt uns, dass die Zeit, die für eine Entscheidung benötigt wird, mit jeder Option steigt. Außerdem sagt uns die Signal-Rausch-Theorie, dass alles, was nicht zur Nachricht oder Funktion einer Website (dem Signal) beiträgt, in die Quere kommt und das Design weniger effektiv macht (das Rauschen).
Einfache Designs sind einfacher zu verwenden und zu verstehen, und sie ermöglichen eine größere Klarheit bei der Kommunikation von Nachrichten.
Minimalistisch und Grid Design
Minimalismus ist kraftvoll, aber schwer zu meistern. Es enthält nichts als das Wesentliche. Alles andere wird entfernt, was zu einer maximalen Auswirkung der vorhandenen Elemente führt.
Minimalistische Designs erfordern ein starkes Rastersystem, um effektiv zu sein. Natürlich werden sie viel Leerraum haben, und ohne dieses Raster würde sich ein minimalistisches Design getrennt und schlampig fühlen. Das Raster gibt ihm Organisation und Struktur.
Einseitige Layouts
Es gibt mehrere Möglichkeiten zur Vereinfachung. Ein einseitiges Layout weist zwei Möglichkeiten auf: Ausblenden und Entfernen.
Effektive einseitige Layouts verbergen alle Elemente, die keine Priorität haben. Wenn ein Benutzer eines dieser Elemente sehen möchte, kann er klicken, um es aufzudecken. Dies ist viel effektiver, als alles sichtbar zu lassen, was die Seite kompliziert und überwältigend machen würde.
Ebenso macht das Prinzip hinter Ein-Seiten-Layouts zusätzliche Seiten überflüssig. Mit der Verfügbarkeit von leistungsstarken JavaScript-Bibliotheken und schnelleren Verbindungen haben viele Websites jetzt wenig Bedarf für mehrere Seiten. Designer können Informationen auf einer Seite leicht anpassen, ohne den Benutzer mit einer Hierarchie zu belästigen.
Massiver weißer Raum
In den frühen Tagen des Webdesigns hatten wir nicht viel Bildschirmfläche, um damit zu arbeiten, und so zeigten wir nicht viel Leerraum. Wenn Sie jemals versucht haben, eine Website für eine Auflösung von 640 × 480 zu entwerfen, werden Sie genau wissen, wovon ich rede.
Jetzt, wo wir höhere Auflösungen haben und Elemente mit JavaScript verstecken und aufdecken können, ist die Nutzung von Leerraum viel einfacher.
Leerraum ist entscheidend für gutes Design. Es gibt dem Auge einen Platz zum Ausruhen. Es verbessert natürlich die Qualität eines Designs. Und es zeigt, welche Elemente durch Nähe zueinander in Beziehung stehen.
Typografische Layouts
Während wir uns früher auf einige wenige "websichere Schriften" beschränkten, die nur wenig Kontrolle darüber hatten, wie sie dargestellt wurden, haben wir jetzt eine breite Palette von Werkzeugen, um unsere Typografie zu bereichern.
Web-Designer haben es lange genossen, den Typ als ein subtiles Werkzeug zum Kommunizieren von Nachrichten zu verwenden. Mit zunehmender Kontrolle und Fähigkeiten sehen wir, dass sich mehr Designer auf Typografie als wichtigstes Designelement konzentrieren.
CSS3 Techniken
Sie können CSS3 noch nicht nutzen? Denk nochmal. Web-Pioniere wie Andy Clarke und Jeremy Keith haben lange über "progressive enhancement" im Webdesign gepredigt.
Bei der progressiven Verbesserung geht es darum, Websites so zu gestalten, dass sie in älteren Browsern verwendet werden können, während sie für Benutzer, die sich auf die neueste Technologie festlegen, "erweitert" werden.
Durch das Entwerfen in diesem Camp können Sie CSS3-Eigenschaften wie abgerundete Ecken, Rahmenhintergründe und Text- und Boxschatten nutzen. Benutzer in modernen Browsern sehen die bessere Version, und solche auf älterer Technologie ( hust | IE6 | hust ) sehen die Basisversion.
CSS3 Animation
Animation im Internet hat viele Stadien durchlaufen. Anfangs konnten wir nur mit GIF-Bilddateien animieren. Dann waren wir ziemlich auf Flash beschränkt. Jetzt können wir aus Flash, Silverlight, GIF, JavaScript und sogar CSS3 auswählen. Subtile Animationen können unvergesslich sein und CSS3 macht es leicht und einfach.
Abgerundete Ecken
Der Web 2.0-Stil von 2005 und 2006 machte abgerundete Ecken populär und störend. Zu dieser Zeit war es schwierig, sie zu erstellen. Es gab keine festgelegte Methode, um wirklich abgerundete Ecken zu erzeugen. Stattdessen wurden sie mit CSS, JavaScript-Hacks und Bilddateien simuliert.
CSS3 ermöglicht es nun, abgerundete Ecken direkt im Browser zu erzeugen, was sie nicht nur einfacher zu erstellen, sondern auch viel effizienter macht, da der Benutzer keine zusätzlichen Bilder oder JavaScript-Dateien herunterladen muss.
Designer nutzen die neue Browserfunktionalität im Jahr 2010 zunehmend.
Box- und Textschatten
Die Verwendung von Schatten zur Schaffung eines Tiefengefühls wurde seit den frühesten Tagen des Webs gemacht (und manchmal übertrieben). Aber es war nicht immer praktisch. Um dem Text Schatten hinzuzufügen, mussten Bilder verwendet werden, was die Ladezeit erhöhte und die Wartung erschwerte. Box-Schatten erforderten mehrere Bilder und CSS-Tricks wie "Schiebetüren".
CSS3 verfügt über hochgradig anpassbare Schattenfunktionen, die eine Vielzahl kreativer Effekte ermöglichen, darunter nicht nur Schlagschatten, sondern auch Schatten. Kreative Designer haben diese CSS3-Effekte bereits verwendet, um sowohl geprägte als auch geprägte Effekte zu simulieren.
RGBa und Opazität
Seit Jahren war es nahezu unmöglich, mit Intransparenz und Transparenz im Internet zu arbeiten. Sie haben drei Möglichkeiten: Sie können Transparenz mit flachen Bildern simulieren, mit den browserübergreifenden Inkompatibilitäten von PNG umgehen oder mit den grundlegenden Transparenzselektoren und Filtern von CSS kämpfen.
CSS3 bietet Designern eine bessere Konsistenz und Freiheit bei der Verwendung von Deckkraft mit der RGBa-Eigenschaft. Während Sie Transparenz auf unzählige Arten nutzen können, ist ein Bereich, dem es besonders geholfen hat, mit komplexen Hintergründen überlagert mit halbtransparenten Farben. Zuvor war dieser Effekt unpraktisch oder unmöglich zu erstellen, ohne auf komplexe PNG-Bilder zurückzugreifen.
Mobiles kompatibles Design
Das mobile Web hat Millionen von Benutzern die Möglichkeit gegeben, ihr Bankkonto während des Wartens online zu überprüfen, die neuesten Ergebnisse in der U-Bahn nachzuschlagen und ihren Twitter-Status während der Fahrt zu aktualisieren. (Welche davon ist eine gefährliche Gewohnheit?) Und das mobile Web wächst weiterhin schnell.
Wir sind auf den Punkt gekommen, dass jedes Unternehmen darüber nachdenken muss, ob seine Website unterwegs genutzt wird, und wenn ja, wie. Innovative Unternehmen haben bereits viel in nützliche und benutzerfreundliche mobile Versionen ihrer Websites investiert.
Kreativität
Das explosionsartige Wachstum der Nutzung von Social Media ist ein Beweis dafür, dass Menschen sich mit Dingen verbinden und teilen wollen, für die sie sich begeistern.
Im Bereich Design haben wir ein starkes Wachstum beim Teilen und Browsen von Arbeiten anderer Menschen erfahren. Als Designer werden wir jetzt von der Kreativität aller anderen bombardiert. Dies erhöht nicht nur den Qualitätsstandard des Designs, sondern fördert auch den Austausch von Ideen, was zu einer Kultur der Kreativität und Innovation beiträgt.
Saubere Illustrationen
Wenn du wie ich bist, wurdest du mit Disney-Filmen aufgewachsen und bewunderst all die Anstrengungen, die in jedem Animationsrahmen stecken. Wir sind weit über die Zeit hinaus, als die Illustration mit Tinte und Markern gemacht wurde, und diese Entwicklung der Werkzeuge hat zu einigen sehr kreativen Ansätzen für das Design geführt.
Viele Designer lernen, dass glatte, saubere und gestochen scharfe Illustrationen ein unverwechselbares Gefühl erzeugen, das nicht durch Fotografie oder einfache ClipArt repliziert werden kann. Das Ergebnis ist eine große Auswahl an professionell illustrierten Designs, die ansprechend und einladend sind.
Strukturierte Hintergründe
Strukturierte Hintergründe sind nichts Neues im Web. Aber diese Technik hat in den letzten Monaten eine interessante Variation erfahren. Ich bezeichne es als "Mikro-Texturen", die subtile, kaum wahrnehmbare Texturen im Hintergrund sind.
Vorschaubilder
Sie könnten sagen: "Thumbnails gibt es schon seit dem Beginn des Internets. Wie ist das ein Trend? "Es stimmt, sie wurden immer benutzt, aber nur sehr einfach. Sie hätten ein Vorschaubild, auf das Sie klicken könnten, um ein größeres Bild zu erhalten. Es hat seinen Zweck erfüllt, war aber langweilig.
In den letzten Monaten haben Designer gefragt: "Wie können wir Thumbnails aufregender gestalten?" Dies hat zu einem Aufschwung bei den Thumbnails geführt, die sowohl clever als auch brauchbar sind.
Aquarell
Während sich das Web weiterentwickelt, sehen wir mehr Designer, die sich von einer Vielzahl von Quellen und Medien inspirieren lassen. Kein Wunder, dass die schönen Künste zu diesen Quellen gehören.
Einer der Stile, die entstanden sind, ist die Simulation von Aquarellen. Der weiche, elegante Look dieses Stils ist deutlich und beruhigend.
Handschrift
Handgeschriebene und Skriptschriften werden am meisten missbraucht. Aus diesem Grund weichen viele Designer entweder aus Ekel oder aus Angst, amateurhaft auszusehen, von beiden Typen ab. Aber in letzter Zeit haben viele Designer herausgefunden, dass der handgeschriebene Stil, wenn er richtig verwendet wird, ein Gefühl von Handwerk und Planung vermittelt. Im richtigen Kontext verwendet, ist es eine leistungsfähige Art zu kommunizieren.
Sozialen Medien
Da Nutzer mehr Zeit auf Facebook verbringen als Google, ist es kein Wunder, dass Designer nach innovativen Wegen suchen, um soziale Medien auf ihren Websites zu integrieren.
Einige Designer sind so weit gegangen, ihre Inhalte in sozialen Netzwerken zu veröffentlichen und dann ihre Websites zu nutzen, um sie zu aggregieren.
Es ist sicher, dass wir im Laufe des Jahres 2010 feststellen werden, dass mehr Designer kreative Wege finden, um soziale Medien in ihre Websites zu integrieren, um die Nutzer besser zu erreichen.
Feste Elemente
Jetzt unterstützen diese Browser die position: fixed Element, wir sehen cleverere Nutzungen davon.
Es gibt viele Situationen, in denen ein festes Element (z. B. dauerhafte Navigation) den Geschäftszielen des Besitzers dienen und die Website besser nutzbar machen könnte.
Feste Elemente sind unvergesslich und verbessern die Benutzerfreundlichkeit. Sie haben unzählige kreative Nutzungsmöglichkeiten und wir werden weiterhin sehen, wie Designer sie ausnutzen.
Dieser Gastbeitrag ist eine Zusammenarbeit zwischen den guten Leuten bei Web Hosting Search und Designer und Entwickler Ross Johnson. Überprüfen Sie Web-Hosting-Suche für die ordnungsgemäße Web-Hosting und 3point7designs für mehr Webdesign von Ross
Welchen dieser Trends folgen Sie am meisten? Was sind andere aufkommende Trends?