Heute untersuchen wir ein reales Problem, das häufig mit Designern zu tun hat. Das Aktualisieren und das alte Design können eine entmutigende Aufgabe sein, egal ob es Ihre eigene oder die einer anderen ist. Wenn Sie ein Design auf eine bestimmte Art und Weise sehen, ist es schwierig, aus dieser Denkbox auszubrechen, selbst wenn Sie das Original nicht mögen.
Im folgenden Artikel werden eine Reihe von Berührungsproblemen für Designer behandelt. Wir beschäftigen uns mit veralteten Grafiken, Lesbarkeit auf dunklem Hintergrund, Informationsüberflutung, dem Arbeiten mit Texturen und vielem mehr. Lesen Sie weiter, um zu erfahren, wie wir diese Probleme angehen.
Das Projekt
Das heutige Projekt stammt von zwei Anfragen aus unserer Design Dilemma-Seite, einem neuen Bereich, in dem Designer gebeten werden, uns bei aktuellen Problemen kostenlos helfen zu lassen.
Die erste Frage stammt von Atif Mohammed Ameenuddin. Atif stolperte über einige fantastische freie Texturen und möchte wissen, wie er diese in ein attraktives Webdesign integrieren kann.
Joe Elias hat auch Schwierigkeiten, eine Website für einen Kunden zu entwerfen. Er hat ein erstes Photoshop-Modell, weiß aber, dass es Hilfe braucht. Das Design von Joe hat einige Vorzüge, aber ich finde, es fühlt sich insgesamt etwas veraltet an. Ich habe den Eindruck, dass ein Printdesigner versucht, ein Flyer-Design in das Web zu konvertieren. Heutzutage ist Webdesign mehr als interaktives Druckdesign. Es hat ein einzigartiges Erscheinungsbild, das das reichhaltige Webmedium nutzt.
Beachten Sie, dass der Standort auch für einen Abwassertank-Service ist! Nicht die einfachste Designaufgabe, die ich je unternommen habe, aber ich mag eine Herausforderung. Lass uns rein springen und loslegen.
Verwenden der Hintergrundmuster
Schritt eins ist, zu Premium Pixels zu wechseln und die Hintergrundmuster herunterzuladen. Diese werden bequem als Photoshop-Pattern-Plugin gespeichert, sodass sie nicht einfacher zu implementieren sind.
Wenn Sie die Pattern-Datei heruntergeladen haben, ziehen Sie sie einfach in Photoshop, um sie automatisch zu installieren. Als Nächstes erstellen Sie ein neues RGB-Dokument mit einer Auflösung von 1200 x 1300 Pixel. Füllen Sie die Hintergrundebene mit Weiß und fügen Sie einen Ebenenstil für die Musterüberlagerung hinzu. Hier können Sie einfach das gewünschte Muster auswählen und die Größe Ihren Wünschen anpassen. Stellen Sie sicher, dass Sie das Dokument zu 100% anzeigen, damit Sie das Muster richtig skalieren können.
Das Logo
Ich habe mir erlaubt, das Logo ein wenig zu aktualisieren (der Designer hat wahrscheinlich nicht die Freiheit, dies zu tun). Es ist definitiv nicht so toll und könnte mehr Arbeit brauchen, aber es passt etwas besser zu dem männlichen Thema.
Ich habe das vorhandene Schraubenschlüssel-Symbol verwendet und es einfach mit einer eher manuellen Schrift kombiniert. Ich habe auch einen Textstrich mit einem Verlauf hinzugefügt, um visuelles Interesse zu schaffen. Viele Leute wissen nicht, dass Sie den Photoshop-Strich anstelle einer Volltonfarbe in einen Verlauf umwandeln können. Diese Option befindet sich am unteren Rand des Strichfensters.
Die vier Boxen
Als nächstes möchte ich die vier unten gezeigten Felder ansprechen.
Einer der Hauptpunkte von Joes Email war, dass er ein paar Layout- / Organisationsideen wollte. Ich denke, dass dieser Bereich mit etwas jQuery dynamischer und attraktiver gestaltet werden kann. Mit dem Zauber der JavaScript-Schieberegler können wir all diese Informationen in einem Bereich zusammenfassen.
Es ist schwer, ein statisches Bild darzustellen, aber im Grunde würde dieser Bereich automatisch zwischen vier Bildern wechseln, die jedes der vier Kästchen von Joe darstellen. Beachten Sie, dass wir mit dem abgeschirmten hinteren Bereich auf der linken Seite viel Platz für Textinhalte geschaffen haben. Es gibt eine Menge kostenloser jQuery-Slider online, von denen viele über Inhaltsbereiche wie diesen eingebauten verfügen.
Damit das Bild besser von der Hintergrundtextur abhebt, habe ich ihm eine grundlegende Polaroidbehandlung gegeben. Hierbei handelt es sich um einen Schlagschatten, einen nach innen ausgerichteten Strich (dadurch erhalten Sie harte Ecken statt abgerundet) und einen leichten inneren Schatten. Für das Foto habe ich mir einfach etwas von Flickr geholt, weil ich nicht die Originalbilder hatte, mit denen Joe arbeitete.
Den Hintergrund aufbrechen
Das ursprüngliche Design enthielt ziemlich viel Text. Wir müssen die Wünsche des Kunden berücksichtigen, indem wir ihn einbeziehen, aber es ist unsere Aufgabe als Designer, die Informationen auf attraktive Weise zu präsentieren. Wir werden dies tun, indem wir es ein wenig aufteilen, wodurch der Inhalt in überschaubarere Stücke umgewandelt wird.
Der strukturierte Hintergrund kann auf der gesamten Seite etwas zu groß sein, sodass wir ihn durch Hinzufügen eines horizontalen Streifens etwas auflösen. Dies hilft auch, den Inhalt visuell zu organisieren.
Ich habe hier viel gemacht. Für das Banner habe ich ihm eine dunkelrote Farbe, einen leichten Farbverlauf, einen dünnen schwarzen Strich, eine subtile Textur und Schatten gegeben, die von oben und unten kommen (klicken Sie auf das Bild, um es in voller Größe zu sehen). Ich habe auch ein anderes Bild eingefügt, um den Text noch weiter aufzubrechen. Beachten Sie, dass es horizontal mit dem Schieberegler darüber ausgerichtet ist. Obwohl sich das Banner selbst über die gesamte Seite erstreckt, muss der Inhalt immer noch dem Layout entsprechen, das wir eingerichtet haben.
Der Rest des Textes
Ich habe den zweiten Teil des Textblocks direkt im Hintergrund unter dem Ribbon-Bereich platziert. Das Schwierige dabei ist, dass der Hintergrund dazu führt, dass dünner Text nur schwer lesbar ist. Tun Sie immer Ihr Bestes, um die Benutzerfreundlichkeit nicht im Namen der Ästhetik zu opfern.
Um dieses Problem zu lösen, habe ich einfach einen wirklich dunklen Schatten auf den Textblock angewendet. Dies hebt es hervor und kann leicht mit CSS erreicht werden, wobei der Text voll auswählbar bleibt.
In Kombination mit dem Banner-Bereich darüber ergibt sich ein viel attraktiverer Textblock, der die Seite nicht überfordert.
Beenden
Am Ende der Seite werfen wir eine einfache Fußzeile mit Informationen zu den kommenden Kontakten, und wir sind fertig. Alles, was ich hier gemacht habe, war, eine Blackbox zu machen und die Deckkraft etwas zu reduzieren.
Und hier ist unser fertiges Produkt. Klicken Sie hier, um es in voller Größe zu sehen.
Wie Sie sehen, wirkt es viel moderner als das Original.Ehrlich gesagt besteht der Fehler, den die meisten Designer machen, darin, dass sie sich zu sehr bemühen. Sie stopfen eine Seite voll mit allem, was sie sich vorstellen können, um dort etwas zu platzieren und am Ende etwas zu bekommen, das beschäftigt und schwer anzusehen ist. Der aktuelle Trend im professionellen Design geht in Richtung einfacher, sauberer Layouts mit minimalen Ablenkungen und einer Betonung des Inhalts.
Als Designer bedeutet dies, dass wir den einfachen Weg herausnehmen können und alle Flusen von unseren Designs entfernen, bis wir die perfekte Balance zwischen einfach und attraktiv finden.
Fazit
Zusammenfassend kann gesagt werden, dass das Aktualisieren eines alten Entwurfs oft einen vollständigen Schritt vom vorherigen Layout erfordert. Lassen Sie sich nicht einholen, um die Dinge gleich zu halten und inkrementelle Änderungen vorzunehmen. Manchmal müssen Sie einfach bei Null anfangen und nach einer neuen Idee suchen.
Wenn Sie ein Projekt haben, für das Sie Hilfe benötigen, lesen Sie unser Design Dilemma-Programm. Wenn wir denken, dass Ihr Problem eine Sache ist, mit der sich viele Designer beschäftigen können, machen wir daraus einen vollständigen Artikel wie diesen.