Share
Zu Beginn der Web Design Week haben wir gesehen, wie ein einfaches Layout mit verschiedenen Hintergründen, Mustern und Fotos kombiniert werden kann. Heute gehen wir noch einen Schritt weiter. Wir werden das Erscheinungsbild einer Website komplett ändern, indem wir nicht nur den Hintergrund, sondern den Gesamtstil des Designs ändern.
Wir beginnen mit der Grungy Paper Texture Site, die wir in einem früheren Tutorial erstellt haben, und dann ändern wir das Design, um minimal, metallisch, abstrakt und web2 zu wirken! Danach sprechen wir über das Erlernen einer Bibliothek von Webdesignstilen. Also lasst uns anfangen…
Dieser Beitrag ist Tag 8 unserer Webdesign-Sitzung. Creative Sessions "Session Day 7Session Day 9"Wenn Sie sich also an unser ursprüngliches Tutorial erinnern, sieht das Website-Design folgendermaßen aus:
Es ist ein grungig aussehendes, strukturiertes Design, das auf einem einfachen, soliden, zugrunde liegenden Layout basiert. Wir nehmen das zugrunde liegende Layout und behandeln es wie einen Kleiderbügel, tauschen verschiedene Stile aus und schauen, warum jeder Look funktioniert.
In jedem Stil gibt es viele Variationen, aber hier sind einige Merkmale eines grungigen Looks:
Ein relativ sauberes Design, verbunden mit einigen grungy Elementen - Papier, Texturen.
Besucherseite
Aus Platzierungstext, collagierte Elemente und Texturen.
Besucherseite
Ein gutes Beispiel für einen Grunge-Look, der in einer Blog-Struktur geordnet verwendet wird.
Besucherseite
Viele weitere Beispiele für alles grungy!
Besucherseite
Unser erster Entwurfsschritt besteht darin, unseren Look komplett zu verbessern und alles zu beseitigen, was nicht unbedingt erforderlich ist. Wir möchten dies tun, damit wir einen Startpunkt für die anderen Designs haben, aber auf dem Weg werden wir eine Art minimalistisches Aussehen erzeugen.
Dies sind die folgenden Schritte:
Hier ist unsere Minimalversion:
Von allen Looks, die wir heute machen werden, ist dies am wenigsten für dieses Layout geeignet - insbesondere für den Registerkartenbereich. Trotzdem ist es eine gute Annäherung…
In jedem Stil gibt es viele Variationen, aber hier sind einige Merkmale eines minimalen Looks:
Wirklich minimal mit einem Farbschema
Besucherseite
Minimale Typografie und klare Linien vermischen sich mit einem Schuss mutiger Fotografie- / Designelemente
Besucherseite
Minimal meets Flash - und schauen Sie sich das Portfolio an Arbeiten an, das viele Beispiele für minimale Designs enthält.
Besucherseite
Viel mehr minimales Design zum Auschecken
Besucherseite
Mit dem minimalen Look, den wir gerade erstellt haben, können wir jetzt einen Stil hinzufügen. Diesmal möchten wir einen metallischen Look erzeugen. Dafür brauchen wir ein paar helle Grautöne, die vor einem dunklen Hintergrund besonders gut aussehen.
Dies sind die folgenden Schritte:
Hier ist unsere metallische Version:
Und hier einige Anmerkungen:
In jedem Stil gibt es viele Variationen, aber hier sind einige Merkmale eines metallischen Looks:
Apple verwendet seit einiger Zeit eine metallische obere Navigationsleiste mit leichten Schrägen im Text, einem eingebetteten Apple-Symbol und einigen anderen Metallic-Effekten.
Besucherseite
Lance ist ein Meister des Photoshop-Schnittstellendesigns. Schauen Sie sich sein Portfolio an metallischen Schnittstellen an
Besucherseite
Ein sehr glatt aussehendes metallisches Design.
Besucherseite
Ein Blick, der immer beliebt ist, ist die Verwendung eines abstrakten Hintergrunds, etwas Transparenz und einer sehr sauberen Typografie. Also das werden wir als nächstes tun!
Beginnen wir also wieder mit dem minimalen Design:
Hier ist unsere abstrakte Version:
Und hier einige Anmerkungen zum Design:
In jedem Stil gibt es viele Variationen, aber hier sind einige Markenzeichen dieses Looks:
Atemberaubender rauchiger Hintergrund.
Besucherseite
Kombiniert einen brillanten Hintergrund mit Ebenen und Abschnitten
Besucherseite
Unser letzter Halt ist im Klischee des Web 2.0-Designs. Ich muss zugeben, ich bin nicht einmal wirklich sicher, was Web2-Design wirklich ist, aber ich habe versucht, diese Version freundlich und ansprechbar zu machen - was meiner Meinung nach das Hauptmerkmal des Stils ist.
Beginnen wir wieder mit dem minimalen Design:
Hier ist unsere Web 2.0 Version:
Und hier sind einige Notizen!
In jedem Stil gibt es viele Variationen, aber hier sind ein paar Merkmale eines Web 2.0-Looks:
Für mich haben diese Jungs wirklich eine Menge von dem begonnen, was ich mit Web 2.0 verbinde
Besucherseite
Ich liebe diesen kleinen Kerl! Ein Ace-Design von SimpleBits.
Besucherseite
Ein super heller Farbverlauf macht diese Website.
Besucherseite
Hier sind sie alle, Sie können auf das Bild unten klicken, um sie in voller Größe zu sehen. Wenn Sie ein Plus-Mitglied sind, können Sie alle fünf PSD-Dateien aus dem Plus-Bereich abrufen.
Seien wir ehrlich, die fünf Layouts sind nicht unbedingt besonders gute Beispiele für ihre jeweiligen Stile. Mein Ziel ist es in diesem Tutorial, Ihnen zu zeigen, wie Sie einem Design einen bestimmten Look oder Stil verleihen, indem Sie bestimmten visuellen Hinweisen folgen. Sie sollten in der Lage sein zu sehen, dass Sie dasselbe Layout auf unterschiedliche Weise kleiden können.
Um wirklich ein gutes Beispiel für einen bestimmten Designstil zu erhalten, würden Sie wahrscheinlich Ihr Layout spezifischer an diesen Stil anpassen. Und natürlich brauchen sie alle viel mehr Zeit als ich :-) Trotzdem hoffe ich, dass der Austausch von Stilen veranschaulicht, wie Sie Webdesigns betrachten können, um verschiedene Designstile zu erlernen.
In unserem vorherigen Artikel - 8 Ideen, Techniken und Tricks für Ihr Web Design Toolkit - habe ich erwähnt, dass es eine gute Idee ist, eine Bibliothek mit Stilen zu haben, auf die Sie zurückgreifen können.
Wenn Sie beim Starten eines neuen Projekts ein Leerzeichen zeichnen, kann es manchmal gut sein, nur auf eine vordefinierte Stilauswahl zurückzugreifen und sich von diesem leiten zu lassen. Unweigerlich werden Sie mit etwas völlig anderem als dem, was Sie zuvor entworfen haben, fertig sein, und es wird zumindest dazu beitragen, dass Sie damit beginnen. Seien Sie jedoch vorsichtig, wenn Sie den falschen Stil verwenden, nur weil er cool aussieht und nicht, weil er für den Client / die Nachricht / den Inhalt geeignet ist. Das einzige Gegenmittel, dies zu tun, ist das Wissen und die unterschiedlichen Designstile.
In diesem Artikel haben wir uns fünf Looks oder Stile kurz angesehen, und es gibt Millionen von Stilen, Unterstilen, Kombinationen, Anpassungen und Looks, die sich alle dem Stil widersetzen.
Die einzige Möglichkeit, Designstile zu lernen, ist, sie zu betrachten. Jetzt sieht es aus und dann ist es da schauend! Eine normale Person schaut sich normalerweise eine Website, ein Poster oder ein anderes Design an und sieht nur den Inhalt, die Botschaft und möglicherweise das Gefühl des Designs. Als Designer müssen Sie alles auf analytische Weise betrachten, nachsehen, warum ein Design ein bestimmtes Gefühl hat, welche Botschaft das Design selbst vermittelt, welche Schriften verwendet wurden, welche visuellen Elemente und Techniken der Designer verwendet, wie Es wurde kombiniert und wie es arrangiert wurde.
Sie sollten immer auf Design achten - nicht nur online, sondern überall -, weil Designstile keinesfalls auf Websites beschränkt sind. Plakate, Anzeigen, Fernsehbeiträge, Flyer und überall dort, wo Design ist, besteht die Möglichkeit zu lernen.
Je mehr Sie sehen und lernen, desto mehr werden Sie zur Verfügung haben. Wenn Sie sich zusammensetzen, um ein neues Projekt zu entwerfen, können Sie neue visuelle Ideen aufstellen, selbst wenn Sie mit einer leeren Leinwand konfrontiert sind. Wenn Sie Designmaterialien oder Marken erhalten, werden Schriftarten, Logos und Nachrichten stilistische Entscheidungen wie Hinweise auf ein Mysterium auslösen.
Wenn Sie auf Stile zurückgreifen, die Sie zuvor gesehen haben, sollten Sie immer versuchen, Ihre eigene Designstimme zu hören. Geben Sie Ihren eigenen Dreh, Sie sind Ihre eigene Mischung oder Aussehen, so dass Ihre Design-Stimme zu hören ist. Stellen Sie immer und immer sicher, dass Sie ein Design anwenden, das zur Botschaft passt und diese verbessert - gehen Sie nicht in die Falle, nur an die Ästhetik zu denken.
Erinnere dich an die Form folgt der Funktion. Der Stil und die Ästhetik, die Sie treffen, helfen der Website, ihre Funktion zu erfüllen.
Dieser Beitrag ist Tag 8 unserer Webdesign-Sitzung. Creative Sessions "Session Day 7Session Day 9"
Accentsconagua