Jede Woche schauen wir uns eine neue Website an und analysieren das Design. Wir werden auf beide Bereiche hinweisen, die gut erledigt werden, zusätzlich zu den Bereichen, in denen etwas Arbeit anfallen könnte. Zum Schluss bitten wir Sie, Ihr eigenes Feedback zu geben.
Die heutige Seite ist Idea Arts.
Wenn Sie Ihre Website für eine zukünftige Design-Kritik einreichen möchten, dauert dies nur wenige Minuten. Für die Bewertung Ihres Designs berechnen wir 24 US-Dollar - deutlich weniger, als wenn Sie einen Berater für einen Blick auf Ihre Website bezahlen würden! Hier erfahren Sie mehr.
Über Idea Arts
Idea Arts ist das persönliche Portfolio Goran Ilic, ein Grafikdesigner mit einer lebenslangen Leidenschaft für Technologie. Seine Website zeigt seine jüngsten Arbeiten und die von seinem Unternehmen angebotenen Dienstleistungen.
Hier ist ein Screenshot der Homepage:
Erster Eindruck
Idea Arts ist zum größten Teil ein attraktiver Ort. Hier gibt es einige gute Ideen, die das Design wirklich stark machen. Der Inhalt ist in klar definierte Abschnitte unterteilt und folgt einem logischen Ablauf. Es gibt auch einige attraktive grafische Elemente, die die Aufmerksamkeit des Benutzers effektiv auf sich ziehen.
Es gibt jedoch viele Möglichkeiten zur Verfeinerung. Das Design ist solide genug, dass ich nicht empfehlen würde, von vorne zu beginnen, aber einige Aspekte könnten etwas mehr Aufmerksamkeit erfordern, um sie auf den Punkt zu bringen. Nachfolgend betrachten wir einige davon.
Typografie
Das größte Problem, das ich bei dieser Site sehe, ist die Typografie. Für den Anfang sehen wir allein auf der Homepage etwa zehn verschiedene Variationen von Schriftgröße, Breite, Stil usw. Dies ist fast immer ein negatives Merkmal. Es ist eine gute Faustregel, dass Ihre Schriften bei zwei bis drei Variationen pro Design liegen.
Legen Sie die Schriftarten fest, die Sie für Überschriften, Unterüberschriften und Textkörper verwenden können. Machen Sie diese dann in Ihrem gesamten Entwurf konsistent, anstatt jeden Abschnitt als einen unabhängigen Bereich zu behandeln, der seine eigenen einzigartigen Eigenschaften haben kann.
Verbringen Sie auch etwas Zeit damit, den Typ so zu gestalten, dass er attraktiv aussieht. Dies beinhaltet sorgfältige Planungsoptionen wie Linienhöhe, Farbe und sogar Zeilenumbrüche. All das ist im folgenden Beispiel ziemlich grob.
Für den Anfang steht das helle Blau nicht gut im Hintergrund. Dies kann leicht behoben werden, indem die Farbe dunkler wird, bis sie sich wirklich von der dahinter liegenden Lichtfarbe löst. Die kleinere Kopie könnte auch etwas mehr Raum zum Atmen brauchen. Die Zeilenhöhe ist einfach zu niedrig und macht das Ablesen schwierig, hier etwas aufstoßen und die Lesbarkeit wird stark erhöht.
Seien Sie jedoch vorsichtig, da die Linienhöhe in anderen Bereichen der Baustelle unangenehm hoch erscheint. Ich empfehle die Verwendung eines kostenlosen Online-Tools wie Typograph - Scale & Rhythm (siehe unten), um den Ablauf Ihrer Absätze zu erleichtern.
Achten Sie schließlich auf Ihre Zeilenumbrüche. Interessanterweise müssen Sie nicht nur auf unhandliche Pausen im Wortlaut achten, sondern auch die Form des Absatzes beachten. Die obige sieht ein wenig seltsam aus und könnte leicht zu etwas wie der unten stehenden Version zurückfließen.
Whitespace
Ein weiterer Bereich des Designs, der einige Optimierungsmöglichkeiten benötigt, ist die Verwendung von Leerzeichen. Wie bei der Typografie kann dies schwierig sein und ist weitgehend subjektiv. Es gibt jedoch einige grundlegende Prinzipien, die Sie auf diesem Weg leiten können.
Wenn Sie beispielsweise eine verteilte Sammlung von Elementen (vertikal oder horizontal) haben, versuchen Sie, die Objekte zunächst visuell zu gruppieren und dann gleichmäßig zu platzieren. In dem Beispiel unten hat die Originalversion beispielsweise einen unterschiedlichen Abstand zwischen den Symbolen und dem Text, und die Elemente, die unterschieden werden sollen, laufen ein bisschen ineinander. Mit ein wenig Anpassungen erstellen wir eine viel klarere grafische Aussage.
Der Unterschied ist subtil, aber sehr wichtig. Beachten Sie, wie einfach es ist, zu erkennen, welche Textzeile zu welchem Symbol gehört. Es gibt einige andere Bereiche im gesamten Design, die eine ähnliche Dosis räumlicher Analyse verwenden könnten. Zum Beispiel stürzt der unten stehende Text fast bis zum Ende seiner Einschließungsvorrichtung ab. Achten Sie immer darauf, Elementen wie diesem viel Platz zu geben.
Wie wir bei den vorherigen Ausgaben gesehen haben, geht dies in beide Richtungen. Das Logo zum Beispiel fühlt sich an, als ob zu viel Leerraum in die Lücke zwischen den Wörtern eingebaut wurde.
Tweak, Tweak, Tweak
Die Moral der Geschichte hier ist, dass der Teufel auch im Detail steckt, wenn Sie entscheiden, dass Sie eine großartig aussehende Seite erstellt haben. Stürzen Sie sich niemals durch die kleinen Dinge wie Typografie und Abstand. In der Tat müssen Sie möglicherweise mehr Zeit damit verbringen, diese zu korrigieren, als Ihr ursprüngliches visuelles Konzept auszuarbeiten!
Es ist definitiv die Zeit wert, um Ihre Seite richtig fertig zu stellen. Wenn Sie sich konsequent in diese Gewohnheit begeben, fühlen sich Ihre Entwürfe viel raffinierter an und geben ihnen einen besseren Widerstand gegen die Prüfung.
Du bist dran!
Nun, da Sie meine Kommentare gelesen haben, helfen Sie dem Designer mit ein paar weiteren Ratschlägen. Teilen Sie uns mit, was Sie an dem Design toll finden und was Sie für stärker halten könnten. Wie immer bitten wir Sie, auch den Designer der Site zu respektieren und eine klare konstruktive Beratung ohne harte Beleidigungen anzubieten.