Erzählen Sie die Geschichte des Grafikdesigns

Lassen Sie uns eine überzeugende Erzählung aus einer Skizzen -UI -Komponente herstellen. Wir werden seine Elemente analysieren - Kore, Typografie, Dimensionen - und sie in eine Geschichte für vielfältiges Publikum übersetzen: visuell, auditorisch, taktil. Das Ziel? Eine ansprechende, leicht verständliche und unvergessliche Erfahrung. Klarheit und Kohärenz sind von größter Bedeutung.

Mein Kollege Katie hat eine UI -Komponente ausgewählt. Ich werde es kommentieren (unsere Hauptwerkzeuge sind SCSS, Zweig und Handwerk, aber die Vorlagensprache ist nicht kritisch), und sie wird Feedback geben. Im Idealfall werde ich die meisten Details richtig erwerben, mit ein paar Fehlern, um zu veranschaulichen, wie Informationen während der Übergabe verloren gehen können.

Bei der Entwicklung von Weißlabel oder Framework ist die Priorität Flexibilität und Anpassungsfähigkeit. Inhalt und Stil werden weitgehend agnostisch gehalten (innerhalb von Produktgrenzen), da das ultimative Ziel und Zweck des Codes unbekannt sind. Mein jüngster Übergang zu einer Webdesignagentur hat diesen Fokus jedoch umgedreht. Hier liegt der Schwerpunkt auf maßgeschneiderten, hochgeschnittenen Designs, die tief in die spezifischen Bedürfnisse des Kunden und der Zielgruppe integriert sind.

Die enge Zusammenarbeit mit einem Grafikdesigner wie Katie, die mit akribisch gefertigten Pixel-Perfekt-UI anstelle von Drahtrahmen oder anfänglichen Erzählungen arbeitet, ist eine Lernkurve. Ich bringe jedoch wertvolle Fähigkeiten auf den Tisch: Dokumentdesign .

Dokumentdesign - im Wesentlichen das semantische Web mit Barrierefreiheit im Kern - involviert die Behandlung von Grafikdesign als Kommunikationssystem. Wir übersetzen den zugrunde liegenden Zweck von Farben, Typografie und Layout in einen zugänglichen, linearen und navigierbaren Dom. Es ist html, einfach und einfach. Überraschenderweise wird dieses Grundprinzip jedoch oft übersehen.

Katie stellte eine Skizzendatei mit Artboards und klaren Designspezifikationen zur Verfügung. Meine Analyse enthält sechs oder sieben Komponenten mit einem ähnlichen Kartenparadigma:

• Eine Karte enthält Metadaten über eine Site -Seite.
• Es enthält ein Bild/Medien und eine Metadaten (ein Medienobjekt).
• Es wird innerhalb einer Gruppe ähnlicher Objekte angezeigt.
• Diese Gruppe wird konsequent eingegeben (keine Mischung von Suchergebnissen, Nachrichtenartikeln und Klassen).
• Jedes Objekt hat einen einzelnen Seitenlink und keine anderen Aktionen.
• Jedes Objekt enthält einen Aufruf zum Handeln (z. B. "Buch").
• Optionale Elemente: Zeiten, Kategorien, Abzeichen.
• Erforderliche Elemente: Medien, Titel, Link.

Die Karte ist das primäre Navigationselement. Benutzer durchqueren geführten Pfade und wählen aus Kartensätzen basierend auf Seiten der obersten Ebene ("Was ist auf" Klassen "). Es ist nicht interaktiv, sondern ein Leitfaden, eine Karteikarte, die Benutzer zu ihrem Ziel führt - in diesem Fall ein Show -Ticket.

Betrachten Sie diese Analogie: Beschreibung eines Showflyers über das Telefon. Sie würden den Text wörtlich nicht rezitieren, beginnend mit irrelevanten Details. Sie würden auch nicht nur Farben und Schriftarten beschreiben. Sie würden die wesentlichen Informationen übermitteln: "Es ist der größte Showman , Dienstag um 19:30 Uhr, Odeon in der Oxford Street in der Nähe der Straßenbahn." Dies ist die Essenz des Dokumentendesigns.

Zählen, Gruppen und Name

Strukturieren wir jede Karte in einem Listenelement. Wir brauchen eine zählbare Gruppe, die wir mit einer Überschrift vorstellen werden (<h3></h3> ). Auf diese Weise können Benutzer von Bildschirmleser:

1. Identifizieren Sie die Liste im Überblick über die Überschriften.
2. Sehen Sie sich die Elementzahl im Voraus an.
3. Navigieren Sie zum nächsten Listenelement/zur nächsten Liste.
4. Überspringen Sie die Gruppe und fahren Sie mit der nächsten Seite fort (Pagination ist das folgende Meilenstein).

---

=================================================================ieben =================================================================ieben =================================================================ieben =================================================================ieben =================================================================ieben =================================================================ieben =================================================================ieben =================================================================ieben

Anker

Jede Karte wird in ein Ankerelement eingewickelt (<a></a> ). Dadurch wird der Link priorisiert, sodass Benutzer sofort nach der Identifizierung der entsprechenden Karte klicken können. Während ein großer klickbarer Bereich von Vorteil ist, sollte er nicht zu einer Usability -Falle werden. Die großzügige Rinne der Karte bietet ausreichend Abstand, um versehentliche Klicks zu minimieren.

Titel

Der Showtitel wird eine Überschrift sein (<h3></h3> ), widerspiegeln seine visuelle Bedeutung. Benutzer, die schnell Überschriften scannen, finden diese Schlüsselinformationen problemlos. Das Bild geht der Überschrift voraus; Da Bildbeschreibungen über die API nicht verfügbar sind, bleibt das alt -Attribut leer.

Nun für die Metadaten:

• Abzeichen
• Datum/Uhrzeit
• Kategorien

Abzeichen

Das Abzeichen zeigt den Veranstaltungsortspezifischen Informationen. Obwohl sein Nutzervorteil nicht sofort ersichtlich ist, erfordert der visuelle Schwerpunkt die Aufnahme. Um zu vermeiden, dass es während des nicht visuellen Browsings übersehen wird, werde ich es direkt nach dem Titel entweder zuerst oder zuletzt für eine konsequente Zugänglichkeit platzieren. Anstatt<abbr></abbr> Ich werde einfacher Text verwenden, da die Markenfarbe als klarer Indikator für den Eigentum an Veranstaltungsort dient.

<p> HAC -Highlight</p>

Das Abzeichen ist organisationsspezifisch und unterscheidet sich in Hausveranstaltungen von den von externen Organisationen veranstalteten Ereignissen.

Datum/Uhrzeit

Die Daten sind entscheidend und werden in a platziert<h4></h4> Element, Erleichterung des schnellen Scans für bestimmte Daten oder Zeiten. Der<time></time> Das Element sorgt für eine ordnungsgemäße Date/Uhrzeit -Interpretation durch assistive Technologien.

Kategorien/Tags

Die Kategorien folgen dem Abzeichen und dem Datum und spiegeln ihre visuelle Entschlossenheit wider. Wir vermeiden eine Wiederholung, indem wir bestimmte Informationen vor allgemeinen Informationen platzieren. Ein einfaches Tag geht der Kategorieliste für Klarheit voraus. Hartcodierter Abstand verhindert selbst bei der Textkompression das Stegeln.

<p> Kategorien: { % für die Kategorie in Kategorien.All () %} {{Kategorie}} { % wenn nicht schleifen.</p>

Die Farbkodierung von Primärkategorien wird in CSS behandelt, da es sich um einen nonverbalen Hinweis handelt, der keine verbale Beschreibung erfordert. Die primäre Kategorie wird zuerst platziert, aber nicht explizit gekennzeichnet, da der bereits bestehende Kategoriefilter eine effizientere Auswahlmethode bietet.

Aktion

Der Aufruf zum Handeln ("Buch", "Lernen Sie mehr") wird als Spannweite gestaltet, die zuletzt das Ende der Karte signalisiert. Dies stellt sicher, dass keine Daten der Aktion folgen.

Abschluss

Dieses Markup prioriert die Zähl-, Gruppierungs- und Benennungsdaten, wodurch sowohl eine lineare als auch nichtlineare Interaktion ermöglicht werden. Die Seite ist verständlich, wenn Sie nacheinander oder in Teilen lesen und eine effiziente Navigation erleichtern.

Katies Feedback

Katie Parry, Designerin: Ausgezeichneter Artikel! Der<time></time> Die Handhabung des Elements ist besonders klug. Benutzer assistive Technologie erhalten jedoch Informationen in einer vorbestimmten Reihenfolge. Ohne zu filtern, erfordert das Auffinden spezifischer Ereignisse (z. B. Tanzveranstaltungen) das Navigieren durch Titel, Abzeichen, Daten und Kategorien, die umständlich sein können. Dies ist kein Codierungsfehler, sondern eine Einschränkung des aktuellen Webparadigmas. Etwas für zukünftige Verbesserungen zu berücksichtigen.

Mein Entwurfsprozess beginnt oft mit Veranstaltungskarten, noch vor der Einrichtung von ortsweiten Typografie. Visuell sollten diese Karten:

• Ähneln einer Liste für intuitive Verwendung.
• Geben Sie ausreichende Informationen zur Bewertung der Benutzerinteresse (Bild, Titel, Datum, Link) an.
• Fügen Sie einen klaren Aufruf zum Handeln (Link) hinzu.
• Leicht scannelbar sein.

Die visuelle Skannbarkeit wird durch konsistente Platzierung von Informationstypen und eine klare visuelle Hierarchie erreicht. Typografie und Abstand sind der Schlüssel. Titel sind sehr prominent; Daten sind konsequent gestaltet, aber von Titeln unterschieden; Kategorien haben einen anderen Stil. Der Abstand in der Code -Probe muss für eine optimale Skannierbarkeit angepasst werden.

Benutzer scannen nach verschiedenen Informationen. Einige stöbern im Allgemeinen; Andere suchen nach bestimmten Ereignissen oder Kategorien. Karten müssen dieses vielfältige Verhalten aufnehmen. Während Konventionen existieren, variiert das Kartendesign in den Projekten.

Es muss ein Gleichgewicht zwischen vertrauten Schnittstellen und kundenspezifischen Originalität eingeschlagen werden. Benutzerdefinierte Schriften und Farbpaletten tragen dazu bei, die Benutzerfindung ist jedoch von entscheidender Bedeutung. Ich recherchiere Kunden und ihr Publikum (Überprüfungsseiten, soziale Medien), um Einblicke zu finden, die das Design beeinflussen. Eine verstärkte Entwicklerbeteiligung in dieser Entdeckungsphase wäre von Vorteil. Derzeit verwende ich umfangreiche Skizzennotizen und manchmal Tabellenkalkulationen, um die Funktionalität zu definieren. Ein Datenpopulator wäre ideal!

Das obige ist der detaillierte Inhalt vonErzählen Sie die Geschichte des Grafikdesigns. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!