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 Website ist MadeFreshly.
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 MadeFreshly
Ein Einkaufswagen mit Geschmack. Trends ändern sich und so sollte Ihr Online-Shop. MadeFreshly bietet Ihnen ein frisches Design für Ihren Einkaufswagen.
Hier ist ein Screenshot der Homepage:
Erster Eindruck
Ich kann sofort sagen, dass ich das Design von MadeFreshly wirklich mag. Es gibt hier einige coole Designideen und Macken, über die wir weiter unten sprechen werden. Ich habe definitiv ein paar Verbesserungsvorschläge, aber zum größten Teil ist es eine gut aussehende Website, die von sehr talentierten Designern erstellt wurde.
Mein größtes Problem ist wahrscheinlich konzeptionell. Dies ist definitiv eine subjektive Kritik, also können Sie es völlig ignorieren, aber ich finde es seltsam, dass die Visualisierung der Site der Metapher widerspricht, die durch den Namen der Site festgelegt wurde. MadeFreshly? Das könnte eine Reihe von Dingen bedeuten: Lebensmittel im Allgemeinen, heiße Backwaren aus dem Ofen (hier ist mein Kopf), etwas von der Natur inspiriertes oder sogar etwas Neues und Glänzendes.
Der Designer hat jedoch einen leichten Grunge-Look für die Site gewählt. Der Hintergrund ist eine gealterte Textur und die Schlagzeilen sind ebenfalls mit Grunge versehen. Auch dies ist eine großartig aussehende Seite, aber sie steht im Widerspruch zu dem Konzept von "Fresh".
Der Inhalt sollte immer dem Design vorangehen und bestimmen. Wenn Sie den Namen und die vorgefertigte Metapher für eine Website entwerfen oder zumindest nicht im Widerspruch dazu stehen, hilft alles, sich zu verbinden und fühlt sich einfach „richtig“.
Sehen Sie sich zum Beispiel eine sehr ähnliche Situation in der Site "Formee" an. die liefert "frisch gebackene Formen". Das Visual ist ein freundlicher Chefcharakter, der den Slogan verstärkt.
Kopieren Sie diese Idee nicht, aber Sie könnten überlegen, wie Sie auch das Konzept "frisch" einbinden können. zu den Visuals auf der Seite.
Das Logo
Ich finde das MadeFreshly-Logo großartig. Die Schrift ist recht attraktiv und fühlt sich dennoch einzigartig an. Der ordentlich geknitterte Stickereffekt verleiht der Website ein Gefühl von Tiefe. Gute Arbeit!
Die Kopfzeile
Die Kopfzeile ist schön und einfach mit einer Klartextnavigation und einer leicht erkennbaren Login-Registerkarte. Schauen Sie vorbei und sehen Sie sich diesen Bereich in voller Größe an, und Sie werden sehen, dass über dem Logo nur viel Platz schwebt.
Ich kümmere mich nicht um Leerzeichen und ermutige Designer sogar, sie recht großzügig zu nutzen, aber ein großer leerer Bereich ist eine schrecklich unbequeme Art und Weise, den Standort zu beginnen. Die Lösung hier ist einfach: Reduzieren Sie einfach diesen Platz um etwa die Hälfte und es sollte großartig aussehen. Sie behalten immer noch viel Platz, nur nicht so sehr, dass es ablenkt.
Ein anderes Problem, das ich hier sehe, ist, dass sich das Logo in einer merkwürdigen horizontalen Position befindet. Der Inhalt auf der rechten Seite der Seite befindet sich auf der rechten Seite. Dies deutet nicht auf ein zentriertes, sondern auf ein gerechtfertigtes Layout hin. Das Logo stimmt jedoch nicht mit dem Inhalt auf der linken Seite überein und wird nicht über dem darunter liegenden Element zentriert (eine andere berechtigte Position). Stattdessen schwebt es unbeholfen nach rechts von linksbündig und links von zentriert.
Die einfache Lösung besteht darin, das Logo nach links zu verschieben, damit es mit dem darunter liegenden Inhalt übereinstimmt. Es ist schon fast da und braucht nur noch einen guten Schubs.
Der vorgestellte Abschnitt
Der Abschnitt unter der Kopfzeile, den ich willkürlich als "gekennzeichneter Abschnitt" bezeichne. ist der Teil der Seite, der Ihre Aufmerksamkeit auf sich zieht. Es hat mehr visuelles Gewicht als der Inhalt, also fühlt es sich wichtiger an und Ihre Augen sind fast sofort von ihm (alle guten Dinge) angezogen.
Der Shop jetzt erstellen? Taste ist schön und hell und dient als starker Aufruf zum Handeln. Wenn Sie den Button sehen, wenn Sie sich noch einmal umschauen, werden Ihre Augen durch den Pfeil zurückgezogen, eine nette Berührung, die noch mehr Aufmerksamkeit auf eines der wichtigsten Elemente der gesamten Seite lenkt. Sie können erwägen, der Schaltfläche einen Hover-Effekt nur als UX-Boost hinzuzufügen, ansonsten handelt es sich jedoch um ein solides Design.
Mein einziges Dilemma ist der Überschriftentext. Einerseits ist es attraktiv und bringt einige schöne Wiederholungen in den im Logo verwendeten Text. Auf der anderen Seite ist es aufgrund der Komplexität der Schrift einfach nicht schnell zu lesen.
Dies ist eine der Situationen, in denen sich Ästhetik und Lesbarkeit widersprechen. Wenn Sie die Schriftart hier geändert haben, glaube ich fest daran, dass die Website weniger attraktiv für sie ist, aber Sie könnten die Anzahl der Benutzer, die die Überschrift tatsächlich lesen, verdoppeln.
Sie können überlegen, ob Sie ein Wort der Überschrift im Skript hinterlassen und den Rest in etwas Lesbareres konvertieren. So zum Beispiel? Einen Einkaufswagen mit? könnte kleiner und in einer einfachen serifenlosen Schrift sein, während? könnte durch eine größere Größe und Verwendung der Skriptschrift hervorgehoben werden.
Letztendlich ist es akzeptabel, wie es aktuell ist, und dies sind nur Vorschläge, die zu berücksichtigen sind. Es wäre großartig, einige AB-Tests für dieses Element durchzuführen, um zu sehen, ob die Verbesserung der Lesbarkeit messbare Auswirkungen auf Conversions hat. Wenn nicht, dann behalten Sie das Skript auf jeden Fall.
Drei aufwärts Abschnitt
Der untere Teil der Seite zeigt drei Screenshots mit den Worten frisch, einfach und effizient. Dies ist eingängig und einprägsam und der Abschnitt sieht fantastisch aus. Ich finde es toll, dass die Hintergrundtextur endet und die Miniaturbilder in den neuen Bereich überlappen.Der Designer fügt seinem Design wieder ein wenig mehr Tiefe hinzu, damit es sich realer und vielfältiger anfühlt.
Alle fetten Absätze
Normalerweise bleiben wir für Design Critiques auf der Homepage, aber dieses Mal habe ich auf den anderen Seiten ein wenig herumgesucht. Eine Sache, die ich hervorheben sollte, ist der Absatztext auf der "Tour". Seite.
Die Entscheidung, die Absätze fett zu machen, funktioniert nicht. Die Buchstaben sehen aus, als wären sie aneinander gestaucht und sehr schwer zu lesen. Indem Sie die Hauptteilkopie fett formatieren, verringern Sie die Auswirkung einer fettgedruckten Kopfzeile (Kontrast ist der Schlüssel dazu). Ich würde empfehlen, diesem Text das gleiche Styling zu geben wie der nicht-fette Text unter den drei Thumbnails auf der Startseite.
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.