Website-Design-Audit: Vergleich mit einer Referenz

Sie haben eine Website, die funktioniert, nicht schlecht, aber es ist eine Art Dim neben den guten Websites in Ihrem Sektor. Wenn Sie fragen, wo es hängt, niemand kann klar beantworten, einschließlich Sie. In diesem Artikel, Ich sage Ihnen eine Methode, die diesen Unterschied in konkrete Materialien übersetzt: vergleichen Sie Ihre Website mit einer Referenz, die Sie wählen, um eine messbare Differenzbericht.

Warum sehen Sie das Problem nicht mit Ihrer eigenen Website?

Es ist nicht der Anblick, es ist das Sprichwort: "Sprich nicht." Du verstehst, dass ein Design gut ist, aber du kannst nicht sagen, warum. Du hast Sätze wie "Es ist geräumiger" und "Es ist professioneller."

Dies wird zu einem direkten Hindernis bei der Arbeit mit künstlicher Intelligenz: "Das Modell kann nicht beheben, was Sie nicht beschreiben können. " Sie erhalten zufällige Änderungen im Austausch für "Bessere tun", weil es kein Ziel.

Genau das löst die vergleichende Kontrolle. Sie wandelt Ihre Intuition in Zahlen um.

Fünf Achsen, die bestimmen, wo der Unterschied ist.

Nach meiner Erfahrung erscheint der "unerklärliche" Unterschied zwischen den beiden Standorten fast immer in einem der fünf:

• Tipographie* Schriftauswahl, Buchstabenbereich, Linienhöhe, Kopf-Kopf-Verhältnis.
• ** Visuelle Sprache** Foto oder Illustration, hergestellt oder bestückt, konsistent oder unorganisiert.
• ** Wo geht das Auge zuerst hin, wo geht das zweite zuerst hin? Es ist kein Zufall auf guten Seiten.
• ** Renk** , Palettenbreite, Kontrast, Akzentfarbe, wie oft es verwendet wird.
• ** Abstand** zwischen Elementen, Abschnittsintervallen, Rändern.

Die Aufgabe der Kontrolle ist es, zwei Seiten nebeneinander auf diese fünf Achsen zu stellen.

Wie kann man einen Cross-Check machen?

Vier Schritte:

1. Wählen Sie die richtige Referenz. Finden Sie eine wirklich gut gestaltete Website aus Ihrem eigenen Sektor oder aus einer ähnlichen Benutzerpopulation. Die ausgezeichneten Website Galerien und Design-System-Archive sind ideal dafür. Einige Archive analysieren die Website und bieten Farbpalette, Typografie-Skala und Design-Variablen zusammen.

2. Gib mir beide Seiten. Gib mir die Adresse und Adresse deiner eigenen Website. Sag einfach nicht "Heilung der Website" und bitte um einen Vergleich.

3. Bittet ihn, rücksichtslos zu sein. Modelle sollen freundlich sein. Wenn ihr nicht einfach sagt: "Sei grausam, sei nicht höflich", dann werdet ihr mit allgemeinen Loben verwechselt.

Was Sie wollen, ist nicht die Liste von "Sie können das beheben"; was ist Ihr Buchstabenbereich, was ist Ihre Referenz? Ihr Eckradius ist wie viele Pixel, wie viele Pixel, wie viele Pixel. Es macht es einfacher, den Bericht als kurze und HTML-Seite lesen wollen.

Wie schreiben Sie eine Prüfungsanfrage?

Die Struktur der Anfrage bestimmt direkt die Qualität des Ergebnisses. Das Skelett, das ich verwende, besteht aus fünf Teilen:

1. "Sieh wie ein Design-Direktor und sei rücksichtslos." Ohne diesen Satz bekommt man einen netten, nutzlosen Ausdruck.
2. ** Die Adresse Ihrer eigenen Adresse und Ihres eigenen Verweises ist klar angegeben, welche ist.
3. Xen list: Typografie, Bildsprache, Hierarchie, Farbe, Raum. Wenn Sie es freigeben, wird das Modell in zufälligen Dingen gefangen.
4. Drop-Format: "Für jeden Fund: meine Achse, meinen Wert, den Wert der Referenz, den Effekt." Man erhält Kommentare, wenn man keinen Messwert will.
5. ** Die Kondensatorgrenze:** "Die maximal acht Befunde sind je nach Schlag. Wenn Sie sie nicht begrenzen, wird eine Liste von 40 Artikeln ohne Vorstrafen erstellt.

Der vierte Artikel ist der kritischste. Die Frage: "Wie kann ich die Website verbessern," gibt Ihnen allgemeine Ratschläge: "Setzen Sie die Buchstabenbereich Werte der beiden Websites und schreiben Sie sie nebeneinander", was Ihnen eine gültige Zahl bringt.

Konsistente Werte zum Vergleich

Hier sind die Werte, die Sie mit der Steuerung messen möchten. Sie können diese Liste direkt in Ihre Anfrage einbinden:

Achse	Wert zu messen
Typografie	Punto-Verhältnis in Titel/Göv, Zeilenhöhe, Buchstabenbereich, Anzahl der verwendeten Schriftarten
Raum	Schnittraum, Grundskalenwert, Randraum
Farbe	Palettenbreite, Text-Back-Plan Kontrastverhältnis, Verwendung Frequenz der Akzentfarbe
Tiefe	Unterschiedliche Schattenwertzahl, Eckradiuszahl
Hierarchie	Die Zahl der konkurrierenden Elemente im oberen Abschnitt, die Zahl der wichtigsten Aktionen genannt

Wenn Sie dieses Bild ausfüllen, haben Sie nichts zu besprechen, Sie haben eine Liste zu beheben.

Die Dinge, die Kontrolle typischerweise findet

Wenn ich diese Methode in meinen eigenen Projekten und auf den Webseiten meiner Schüler laufe, werden die Ergebnisse immer wieder wiederholt:

• ** Die Bandbreite der Buchstaben ist zu groß.** Besonders in großen Schlagzeilen. Eine kleine Wertänderung erhöht die wahrgenommene Qualität deutlich.
• Es gibt keine Leitern.** Schatten und Schichten sind zufällig; sie kommen aus einer definierten Skala auf guten Stellen.
• Er steht im Wettbewerb mit dem Hauptsichtprodukt, bekommt große visuelle Aufmerksamkeit im oberen Bereich, aber er unterdrückt die wahre Botschaft.
• "Kurze Höhe ist schmal." Der Rumpftext ist eng, das Lesen ist anstrengend.
• Der Akzent ist zu häufig, der Akzent ist überall.
• Die Lücke ist inkonsistenz zwischen 40, 56, 72.

Nichts davon erfordert "Remake the Design", die alle erstaunlich hohe Niveaus an Korrekturen und Gesamteinwirkungen haben.

Wie priorisieren Sie die Ergebnisse?

Der Bericht ist normalerweise lang, und es ist falsch, es auf einmal anzuwenden.

1. Tipographie. Hier ist die höchste Impact/Budget-Rate. Wenn sich die Schrift-, Skalierungs- und Linienhöhe verbessert, sieht die Site bereits anders aus.
2. Die Lücke Skala. Der Übergang zu einer konsistenten Skala allein nimmt die meisten der Unordnung.
3. Vereinfachen, bis eine Hauptnachricht auf einem Bildschirm bleibt.
4. "Farbe und Schatten." Das sind die letzten. Diese Wachse funktionieren nicht, wenn die untere Schicht gebrochen ist.

Und denken Sie daran: Sie müssen nicht jedes Element im Bericht anwenden. Einige Unterschiede sind bewusste Markenentscheidungen. Seine Entscheidung ist nicht immer richtig für Sie, weil die Referenz besser ist.

Eine Variable nach der anderen

Es ist ein häufiger Fehler, die Ergebnisse kollektiv zu verwenden, und selbst wenn man acht Dinge auf einmal ändert, weiß man nicht, welche funktioniert und welche man zurückbekommen wird, wenn es schlimmer wird.

Mein Weg: Achse wechseln, Screenshot machen, Seite an Seite mit der vorherigen, entscheiden. Es sieht langsam aus, sieht aber insgesamt langsamer aus, weil die Retake-Touren weggehen.

Und ich möchte noch hinzufügen: „Nach der Veränderung, schauen Sie sich die Website ein paar Stunden später." Gleich nach einer Anordnung sieht alles gut aus; die eigentliche Beurteilung erfolgt nach der Einstellung des Auges.

Sie werden vorsichtig sein, wenn sie Referenzen wählen

• ** Nicht auf eine Referenz verriegeln. ** Vergleichen Sie sie mit zwei oder drei Quellen, oder das Audit wird Sie in Richtung der Kopie dieser Website ziehen.
• "Lassen Sie die Skala ähnlich sein. " Es kann irreführend sein, die Website eines neu gegründeten Unternehmens mit der Website eines riesigen Produkts zu vergleichen; die Probleme, die sie lösen, sind unterschiedlich.
• ** Nehmen Sie das Prinzip, nicht seine Existenz.** Den Rhythmus von Raum und Kontrast Ansatz ist legitim; die Palette, Typografie und visuelle Identität zusammen zu nehmen ist das Kopieren.

Was die Kontrollen nicht fangen können

Diese Methode ist gut in der Messung der visuellen Differenz, aber es bewertet nicht Ihre gesamte Website. Vier Bereiche sind außerhalb der Reichweite, und Sie müssen auch auf diese zu betrachten:

• "Performance.** Die Referenzseite kann mit schwereren Visuals. Sie wollen nicht die Upload-Zeit beim Kopieren des Designs kopieren.
• ** Kontrastverhältnis überprüft, aber keine Tastatur-Navigation, Fokus-Indikatoren und Bildschirmleser-Kompatibilität.
• Mobil. Der Vergleich erfolgt normalerweise in einer Desktop-Ansicht. Wenn der Großteil Ihres Traffics mobil ist, wiederholen Sie die Kontrolle auf einem schmalen Bildschirm.
• Die Content-Strategie ist keine Frage des Designs, welche Teile auf der Seite stehen sollen. Das Audit sagt Ihnen, wie die vorhandenen Teile aussehen, nicht welche fehlen.

Kurz gesagt, die Prüfung beantwortet die Frage: "Wie sieht es aus?" Es beantwortet nicht die Frage: "Ist es das Richtige?" Die zweite ist immer noch Ihre Aufgabe.

Häufig gestellte Fragen

Wie oft muss ich diese Inspektion machen?

Ein großes Update vor und nach ist genug -- konstante Kontrolle bedeutet ständige Veränderung; Konsistenz ist, was Sie versuchen zu bauen.

Soll ich mal auf der Titelseite nachsehen?

Beginnen Sie mit der Titelseite, aber fügen Sie die Preis-und Produktseiten, und die Diskrepanzen in der Regel auf den Innenseiten auftreten, nicht die Titelseite.

Kann ich die Werte im Bericht direkt anwenden?

Sie können es anwenden, aber nicht stumpf. Die Höhe der Referenz kann in Ihrer Schriftart unterschiedlich sein. Nehmen Sie den Wert, überprüfen Sie es mit dem Auge in Ihrer eigenen Typografie.

Wer wird die Messwerte der Inspektion anwenden?

Die Anwendung ist oft einfach, weil die Werte konkret sind: Ändern der Schriftskala, Zeilenhöhe und Leerzeichenwerte sind einige Zeilen in der Stildatei. Der einzige Ort, der komplex ist, sind die Hierarchieergebnisse. Sie müssen möglicherweise die Sektionsreihenfolge dort ändern, was eine Designentscheidung erfordert.

Wird der Designer übernehmen?

Nein, das ist eine sehr gute Möglichkeit, einen Unterschied zu machen, aber nicht eine Markenentscheidung zu treffen, und Sie entscheiden, wie Sie aussehen wollen, und das Audit misst nur, wie weit Sie entfernt sind.

Kurz gefasst

Das Gefühl, dass "etwas fehlt, aber ich weiß nicht, was" ist die Sache, die Fortschritte im Design verlangsamt. Vergleichende Kontrolle wandelt dieses Gefühl in messbare Materialien, und jedes Problem, das in Materie verwandelt wird überschaubar.