Zeichenblatt

Marks sheet

Ein Logo wird eher ausgewählt als generiert. Die Aufgabe besteht darin, fünf ehrliche, unterschiedliche Ideen vor die Person zu legen, die jeweils in den Größen geprüft sind, in denen ein Logo tatsächlich lebt, auf einer Seite, die sie in einer Minute beurteilen kann. Diese Seite ist das Marks sheet. Es ist eine Seite zum Anschauen, nicht zum Lesen: fünf Spalten mit Bildern und fast keinen Worten.

Die Methode stammt aus zwei realen Identitätsprojekten, bei denen die Person innerhalb von neunzig Sekunden nach dem Öffnen des Blatts ein Zeichen auswählte, sowie aus Tests gegen das, was ein fähiges Modell ohne jede Methode produziert. Die Tests lehrten zwei Dinge, und die nachstehenden Schritte dienen beiden.

• Disziplin ist das, was die Methode hinzufügt. Reales Wissen über die Marke vor dem Zeichnen, fünf wirklich unterschiedliche Ideen, Nachweis bei 16 Pixeln, eine benannte Schwäche für jedes Zeichen und eine Wahl, die bei der Person bleibt.
• Charakter ist das, was sie nicht verlieren darf. Die Zeichen, die Menschen bevorzugen, ergeben auf den ersten Blick Sinn und sehen sorgfältig gezeichnet aus. Ein Blatt mit ordentlichen Glyphen, die jeweils einen Satz brauchen, um etwas zu bedeuten, verliert gegen ein einziges kühnes, gut gezeichnetes Bild des Namens.

Arbeiten Sie schnell. In den Quellprojekten war das Blatt fünf Minuten nach der Anfrage geöffnet. Es ist ein erster Blick und eine weitere Runde ist billig, also wählen Sie gut, zeichnen Sie sorgfältig und polieren Sie nicht.

Die Schritte: Die Marke kennen, die Ideen finden, fünf skizzieren und auswählen, das Blatt erstellen, es betrachten, öffnen und präsentieren, weitere Runden durchführen, die Auswahl anwenden.

1. Lernen Sie die Marke kennen, bevor Sie zeichnen

Sie benötigen fünf Dinge. Suchen Sie danach, bevor Sie danach fragen.

• Der Name, genau so, wie die Marke ihn schreibt, in ihrer eigenen Schrift, und was er bedeutet: die wörtliche Bedeutung, die Wurzel, ein Idiom, das er anklingen lässt, ein Wortspiel.
• Was sie tut, in einem Satz, idealerweise als Veränderung: was hineingeht und was herauskommt.
• Für wen sie ist und wie sie sich anfühlen soll, in zwei oder drei Worten.
• Was bereits existiert: die Schriftart, die die Website verwendet, ein altes Logo, die Überschrift, der eigene Wortschatz des Produkts.
• Alles, was die Person bereits gesagt hat über das Logo: eine Einschränkung, eine Skizze, ein Logo, das sie bewundert.

Lesen Sie in einem Projekt zuerst: die README, den Text der Landing Page, den Seitentitel und die Metadaten, die Schriftarteinrichtung (@font-face, next/font, die Tailwind-Konfiguration, einen Google Fonts-Link), alle Marken- oder Logodateien und das bisherige Gespräch. Fragen Sie nur nach dem, was Sie nicht finden konnten, in einer Nachricht mit höchstens drei kurzen Fragen. Wenn die Person nicht gefragt werden kann oder Ihnen gesagt hat, machen Sie einfach weiter, dann machen Sie weiter und sagen Sie, was Sie angenommen haben, wenn Sie präsentieren.

Dies kommt zuerst, weil Zeichen, die ohne dies gezeichnet werden, als Stock-Icons herauskommen. Auf den Quellblättern stützte sich jedes Zeichen auf etwas Spezifisches: was der Name bedeutet, eine Zeile aus der Überschrift der Website, was das System mit den Dingen macht, die es verarbeitet.

Das Standard-Briefing

Sofern die Person nichts anderes gesagt hat, entwerfen Sie danach: einfarbig, so einfach wie möglich, mit einem Zweck, ein wenig einzigartig.

Das bedeutet Schwarz auf warmem Off-White und nichts anderes. Wenn sie Farbe wünschen oder die Website eine Akzentfarbe hat, wählen Sie die Form dennoch zuerst in Schwarz. Farbe sollte nicht das sein, was eine schwache Form akzeptabel macht, und ein Zeichen muss ohnehin in einer Farbe funktionieren (Tab-Icons, Stempel, dunkle Oberflächen). Farbe und Effekte kommen, wenn das Zeichen angewendet wird.

2. Finden Sie Ideen aus verschiedenen Quellen

Schreiben Sie etwa zehn Kandidaten auf, jeweils eine Zeile. Lesen Sie references/concept-moves.md, bevor Sie sie auflisten: Es beschreibt die Quellen, aus denen gute Zeichen kommen, mit Beispielen und der Falle in jeder.

Zielen Sie auf eine breite Streuung der Arten ab, denn der Geschmack der Menschen spaltet sich entlang dieser Linien:

• ein Zeichen, das auf dem Buchstaben der Marke aufbaut;
• ein Bild des Namens, wenn der Name ein Ding ist;
• was das Produkt tut, dargestellt als eine Form;
• ein Zeichen oder Muster aus der eigenen Welt der Marke;
• eines oder zwei von weiter außerhalb.

Regeln für die Auswahl unter ihnen:

• Fünf Ideen, nicht fünf Stile. Zwei Zeichen, die auf derselben Metapher aufbauen, zählen als eines. Gruppieren Sie die Kandidaten nach der zugrundeliegenden Idee und behalten Sie eines aus jeder Gruppe.
• Die meisten sollten auf den ersten Blick lesbar sein. Das Blatt erklärt nichts: Ein Zeichen hat sein Bild und einen kurzen Namen. Also sollten mindestens drei der endgültigen fünf allein daraus Sinn ergeben: ein Ding, ein Buchstabe, eine Aktion, die man sehen kann. Ihre Nachricht kann ein Zeichen vertiefen, nicht retten. Eine bloße Glyphe, die ohne einen Satz nichts ist (ein Punkt und ein Strich, zwei Schrägstriche, ein einfacher Block), muss auffällig sein, um einen Platz zu verdienen.
• Silhouette vor Geschichte. Wählen Sie zwischen zwei Kandidaten die stärkere Form, nicht die klügere Geschichte. Die Geschichte wird einmal erzählt und die Form jeden Tag gesehen.
• Nennen Sie die offensichtlichen Icons und rationieren Sie sie. Jede Kategorie hat eines: eine Sprechblase für Chat, ein Haus für Immobilien, ein Funke für KI, ein Warenkorb für Geschäfte, ein Schild für Sicherheit, eine Seite oder ein Stapel von Linien für alles, was mit Dokumenten zu tun hat. Der Name hat oft auch eines (eine Flamme für eine Marke namens Kiln). Sagen Sie, welche dies für diese Marke sind. Höchstens eines der fünf darf sich auf eines von ihnen stützen, und nur verschmolzen mit etwas, das nur diese Marke besitzt. Ein Zeichen, das eine Seite ist, und ein anderes, das eine Flamme ist, sind zwei, nicht jeweils eines. Alles, was die Person ausgeschlossen hat, bleibt ausgeschlossen.
• Eine Idee pro Zeichen. Wenn ein Zeichen das Wort "und" braucht, um es zu erklären, sind es zwei Zeichen. Teilen Sie es oder lassen Sie die Hälfte weg.

Erste Ideen ballen sich im Offensichtlichen. Auf einem Quellblatt waren drei der ersten fünf Zeichen Sprechblasen, und das Zeichen, das gewann, kam aus einer späteren Runde, die von ihnen ferngehalten wurde.

Fünf ist die richtige Anzahl, es sei denn, die Person bittet um eine andere: weniger gibt keine echte Wahl, mehr macht das Wählen zur Arbeit, und fünf Spalten passen auf einen Bildschirm.

3. Skizzieren Sie, dann wählen Sie fünf aus

Zeichnen Sie Ihre Kandidaten, bevor Sie sich für welche entscheiden. Kopieren Sie assets/contact-sheet.html nach design-lab/logo/candidates.html im Projekt, fügen Sie ein <symbol> pro Kandidat hinzu, rendern Sie es mit dem Skript aus Schritt 5 und betrachten Sie das Bild. Es zeigt jeden Kandidaten groß, klein und als echten 16px-Icon vergrößert. Behalten Sie die fünf, die als Formen am stärksten und als Ideen am weitesten voneinander entfernt sind, und verbessern Sie diese. Verwenden Sie den Großteil Ihrer Zeichenzeit für die beiden, an die Sie am meisten glauben: Das Blatt braucht mindestens ein Zeichen, das Sie ausliefern würden, wie es ist, und ein Blatt mit fünf gleichwertigen ersten Entwürfen verliert gegen ein einziges fertiges Logo.

Ein Kontaktblatt ist normal. Ein zweites ist zum Neuzeichnen von Zeichen, die fast funktionieren. Hören Sie dort auf: Die Person kann um eine weitere Runde bitten. Löschen Sie candidates.html und sein Bild, bevor Sie präsentieren.

Dieser Schritt existiert, weil eine Zeichnung in Ihrem Kopf und eine Zeichnung auf der Seite unterschiedliche Dinge sind. In Tests erzeugten die Durchläufe, die ihre Kandidaten vor der Auswahl betrachteten, deutlich bessere Zeichen als die Durchläufe, die fünf zeichneten und aufhörten.

Wie man ein Zeichen zeichnet

Jedes Zeichen ist ein <symbol> auf einem 64 mal 64 Raster.

• Wenige Teile, eine Silhouette. Eins bis vier Formen; das Render-Skript warnt vor einem Zeichen, das mehr verwendet. Einfach bedeutet nicht nur Rechtecke: Ein Bogen, eine Kurve, eine ausgestellte Glocke oder der Bauch eines Buchstabens ist willkommen, wenn es eine einzige saubere Form ist. Beide Zeichen, die aus den Quellprojekten ausgeliefert wurden, sind vier abgerundete Rechtecke, und das beste Zeichen in Tests war eine einzige Silhouette des Dings, nach dem die Marke benannt ist.
• Solide Formen oder fette Linien. Eine solide Form trägt kein fill-Attribut, weil das Blatt dieselbe Zeichnung an einer Stelle schwarz und an einer anderen weiß malt. Eine liniengezeichnete Form trägt fill="none" stroke="currentColor", runde Enden und Verbindungen und eine Strichstärke für das gesamte Zeichen, 7 Einheiten oder mehr. Keine Verläufe, Deckkraft, Filter, Masken oder <text>. Ein Buchstabe wird aus Formen gebaut und nie getippt, da ein getippter Buchstabe die Schriftart von jemand anderem ist.
• Berechnen, nicht raten. Für alles, was über Rechtecke und Kreise hinausgeht, arbeiten Sie die Punkte aus: wo ein Bogen auf eine Linie trifft, wo eine Kurve endet, eine gleichmäßige Dicke um eine Biegung herum. Ein paar Zeilen Python, die den Pfad ausgeben, sind schneller als Raten, und geratene Kurven sehen geraten aus.
• Am Raster ausrichten. Ganze oder halbe Einheiten, gleiche Abstände, ausgerichtete Kanten, ein Eckradius über das gesamte Zeichen.
• Füllen Sie die Box gleichmäßig aus. Lassen Sie jedes Zeichen in seiner längeren Richtung etwa 48 Einheiten umfassen, zentriert, sodass die fünf ein ähnliches Gewicht haben und der Vergleich fair ist.
• Entwerfen Sie für das Tab-Icon. Ein Abstand oder eine Linie dünner als etwa 6 Einheiten wird bei 16 Pixeln zu Matsch. Große Formen und offene Lücken überleben, und sie ergeben normalerweise ein besseres Zeichen in jeder Größe.
• Folgen Sie der Leserichtung. Ein Zeichen, das ein Vorher und ein Nachher zeigt, läuft in der Richtung, in der die Skriptsprache der Marke gelesen wird: von rechts nach links für Arabisch oder Hebräisch.

4. Erstellen Sie das Blatt

Kopieren Sie assets/sheet-template.html nach design-lab/logo/marks-sheet.html im Projekt, erstellen Sie die Ordner und füllen Sie die sechs nummerierten Stellen aus. Das Skript der Vorlage baut jede Spalte aus Ihren Symbolen, sodass jedes Zeichen einmal gezeichnet wird und in jeder Größe identisch ist.

Die Seite ist bewusst schlicht: ein einzeiliger Titel, dann fünf Spalten nebeneinander. Jede Spalte zeigt von oben:

• das Zeichen, groß;
• das Zeichen neben dem Namen, auf hellem und dunklem Hintergrund;
• das Zeichen als Icon bei 64, 32 und 16 Pixeln, und dieses 16-Pixel-Icon vergrößert, damit seine echten Pixel sichtbar sind;
• zwei Schaltflächen, die dieses einzelne Zeichen auf transparentem Hintergrund als PNG und als SVG herunterladen.

Menschen schauen sich diese Seite an; sie lesen sie nicht. Fügen Sie nichts hinzu: keine Begründungen, keine Bildunterschriften, keine Zeile zur Lesart, keine Empfehlung. Was ein Zeichen bedeutet, wo es schwach ist und welches Sie wählen würden, gehört alles in Ihre Nachricht (Schritt 6).

• Sprache. Schreiben Sie den Titel und die Namen in der Sprache der Marke, derjenigen, in der ihr Wortzeichen ist, wenn die Person sie eindeutig liest. Setzen Sie dir="rtl" für rechts-nach-links-Schriften. Wenn die Marke in zwei Schriften geschrieben ist, zeigt das Blatt die Hauptschrift; die zweite Verknüpfung kommt mit der Auswahl.
• Schriftart. Setzen Sie das Wortzeichen in der Schriftart, die die Marke wirklich verwendet: die eigenen Schriftdateien des Projekts über einen relativen Pfad zum Blatt oder die gehostete Schriftart, die die Website lädt. Passen Sie Gewicht, Groß-/Kleinschreibung und Buchstabenabstand an, die die Website ihrem Namen gibt. Wenn die Marke keine Schriftart hat, wählen Sie eine absichtlich aus und sagen Sie es.
• Titel. Eine kurze Zeile, zum Beispiel "Fünf Logos für Harbor".
• Namen. Jedes Zeichen erhält einen kurzen Namen von ein bis drei Wörtern, niemals einen Satz. Menschen wählen und merken sich Zeichen anhand des Namens ("Ich mag den Knoten"), also leistet der Name echte Arbeit.
• Buchstaben. Kennzeichnen Sie die Zeichen mit A bis E.
• Dateiname. Ein kurzer, klein geschriebener Name in lateinischen Buchstaben für die Downloads: harbor ergibt harbor-logo-A.png.

Wenn das Projekt bereits ein Marks sheet hat, überschreiben Sie es nicht. Schritt 7 sagt, was zu tun ist.

5. Schauen Sie es sich an, bevor sie es tun

Rendern Sie das Blatt, dann schauen Sie sich das Bild an. Das Skript befindet sich im eigenen Ordner dieser Fähigkeit und funktioniert auf jeder HTML-Seite, einschließlich des Kontaktblatts:

bash "<Ordnern dieser Fähigkeit>/scripts/render.sh" design-lab/logo/marks-sheet.html

Es schreibt ein PNG neben das HTML mit dem Headless Chromium, das die Maschine hat, und gibt den Pfad aus, gefolgt von einer Warnung für jedes Zeichen, das aus mehr als vier Formen oder mit einer Linie dünner als 7 Einheiten gezeichnet ist. Handeln Sie aufgrund dieser Warnungen. Öffnen Sie dieses Bild und überprüfen Sie Zeichen für Zeichen:

• Ist es überhaupt das Blatt: fünf Spalten, die richtige Schriftart beim Wortzeichen, keine übriggebliebenen {{Platzhalter}}? Ein Render kann still die falsche Seite oder eine Fallback-Schriftart erfassen.
• Liest sich jedes Zeichen so, wie sein Name sagt, ohne etwas anderes, um es zu erklären?
• Liest sich ein Zeichen als etwas, das Sie nicht beabsichtigt haben: eine Ziffer, ein anderer Buchstabe, ein Menü-Icon, ein Logo, das Sie bereits kennen?
• Bleiben im vergrößerten 16px-Icon am unteren Rand jeder Spalte die Formen getrennt, oder schließen sich Lücken und werden dünne Teile grau?
• Ist etwas am Rand seiner Box abgeschnitten, außermittig oder sichtbar schwerer oder leichter als seine Nachbarn?
• Passt ein langer Name immer noch neben sein Zeichen, und ist jede Spalte gleich hoch?
• Sitzt das Zeichen neben dem Wortzeichen gut mit dem Namen, oder stottert es, indem es den ersten Buchstaben des Namens direkt daneben wiederholt?

Beheben Sie, was Sie finden, und rendern Sie erneut, um zu bestätigen. Ein Zeichen, das bei 16px versagt, wird mit weniger, größeren Teilen neu gezeichnet oder durch Ihren nächstbesten Kandidaten ersetzt. Höchstens zwei der fünf dürfen mit einer bekannten Schwäche bei 16px gezeigt werden, und jedes muss dies in seiner Schwächenzeile angeben.

Wenn das Skript nicht rendern kann (es beendet sich mit einem Grund), öffnen Sie das HTML in einem Browser, den Sie screenshoten können, falls Sie einen haben. Wenn Sie überhaupt nicht schauen können, sagen Sie es, wenn Sie präsentieren.

6. Öffnen Sie es und präsentieren Sie

Öffnen Sie das Blatt für die Person: open unter macOS, xdg-open unter Linux, start unter Windows. Das HTML ist das, was zu öffnen ist, und das PNG dient zum Überprüfen und Teilen. Lassen Sie beide in design-lab/logo/ und committen Sie sie nur, wenn die Person oder die eigenen Regeln des Projekts es sagen.

Verbinden Sie kein Zeichen mit dem Produkt und erstellen Sie keine Produktionsdateien, bevor die Person gewählt hat. Das ist ihre Entscheidung, und es dauert zwei Minuten, sobald sie getroffen ist. Die Download-Schaltflächen auf dem Blatt dienen zum Ausprobieren eines Zeichens in einer Folie oder einem Mock-up. Die richtigen Dateien kommen mit der Auswahl.

Schreiben Sie dann eine kurze Nachricht:

• wo das Blatt ist und dass es geöffnet ist;
• eine Zeile pro Zeichen, als Buchstabe, Name, was es ist und warum es zu dieser Marke gehört, und seine ehrliche Schwäche, falls es eine hat ("am nächsten an einem generischen Gebäude-Icon", "leise und ein wenig wörtlich"). Die Seite trägt nichts davon, also ist die Zeile der Ort, an dem die Bedeutung eines Zeichens lebt;
• Ihre Wahl und warum, in ein oder zwei Sätzen. Empfehlen Sie ein Zeichen, das Sie ausliefern würden, wie es ist: eines, das auf den ersten Blick lesbar ist und als 16px-Icon hält. Wenn die Idee, die Ihnen am besten gefällt, einen bekannten Fehler hat, sagen Sie, es ist Ihre Lieblingsidee, und nennen Sie ein anderes Zeichen als das auszuliefernde;
• eine abschließende Frage: welches oder welche zwei weiterverfolgt werden sollen. Sagen Sie, dass Sie, sobald sie gewählt haben, die Dateien erstellen und es in die Website einfügen.

Geben Sie eine echte Meinung und echte Schwächen ab, dann überlassen Sie die Wahl ihnen. In den Quellprojekten überstimmte die Person die Empfehlung einmal. Bitten Sie sie nicht, Farben, Stile oder Schriftarten zu diesem Zeitpunkt zu wählen, und halten Sie die Nachricht auf diese wenigen Zeilen: Die Seite zeigt und die Nachricht erklärt, jeweils einmal.

7. Weitere Runden

• "Noch fünf." Schreiben Sie eine neue Datei, marks-sheet-2.html, und setzen Sie die Buchstaben fort (F bis J), sodass jedes Zeichen über Runden hinweg einen eindeutigen Buchstaben behält. Setzen Sie einen Link zurück zum vorherigen Blatt unter dem Titel, so wie es die Vorlage zeigt. Die neuen fünf müssen aus Ideen stammen, die die früheren nicht behandelt haben, nicht aus verfeinerten Versionen von diesen. Die Person kann später eine Runde anfordern, um zwei zu verfeinern, und diese Verfeinerung erhält einen neuen Buchstaben und ersetzt das alte Zeichen auf dem Blatt. Wenn das Projekt ein Blatt mit 5+5=10 Zeichen hat, müssen die Buchstaben A bis J gehen und das zweite Blatt muss die vorherigen fünf in Miniatur zeigen, damit die Person nicht zurückblättern muss.
• "Verfeinern Sie diese zwei." Zeichnen Sie beide neu mit derselben Idee (eine andere Ausführung, ein anderer Grad an Ausarbeitung). Ersetzen Sie das alte Zeichen auf demselben Blatt, das seinen Buchstaben behält, oder hängen Sie "v2" mit einem weiteren Buchstaben an, wenn die Person beide Versionen sehen soll.
• "Für den Endspurt." Wenn die Person zu zögern scheint, fragen Sie, ob sie einen abschließenden Favoriten oder eine Bedingung hat ("wenn dieses Ding bei 16px funktionieren würde"). Zeigen Sie dann nur den gerenderten 16px-Icon. Wenn sie danach nicht wählen kann, fragen Sie nach einem Adjektiv (mutig, ruhig, verspielt) und wählen Sie das passendste der fünf aus.

Jede Runde muss das Blatt öffnen, eine kurze Nachricht senden und die Wahl bei der Person lassen. Füllen Sie das Blatt nie stillschweigend auf: Die Person muss wissen, dass es ein Update gibt.

8. Wenden Sie die Wahl an

Sobald die Person gewählt hat, zeichnen Sie es neu — nicht das Symbol aus dem Blatt kopieren — und erstellen Sie die richtigen ausgelieferten Dateien:

• Ein einzelnes <symbol> mit derselben ID, das bereit ist, in die Website eingefügt zu werden.
• Eine PNG-Datei, 64×64, transparent.
• Eine SVG-Datei, die nur das Symbol auf transparentem Hintergrund enthält, keine Seite.
• Eine Faksimile-Datei: 64×64, schwarzes Symbol auf Off-White, zum Drucken.
• Wenn die Website ein Favicon verwendet, ein Favicon mit der Größe und dem Format, das die Website bereits verwendet. Wenn Sie sich nicht sicher sind, erstellen Sie ein 32×32-PNG, ein 16×16-PNG und eine favicon.ico, die beide enthält.
• Ein Log in den Farben der Website: das Symbol und der Name nebeneinander in der Schriftart der Marke, ausgerichtet wie auf der Website. Erstellen Sie sowohl helle als auch dunkle Versionen, wenn die Website beide hat. Speichern Sie es als SVG.

Legen Sie sie alle in design-lab/logo/pick/ ab, benannt nach der Wahl. Aktualisieren Sie die Website nicht und fügen Sie keinen Code hinzu, es sei denn, die Person bittet darum: Das Platzieren des Logos im Quellcode ist ihre eigene Aufgabe in ihrem eigenen Tempo. Sagen Sie in Ihrer Nachricht, dass die Dateien bereit sind und wo, und fragen Sie, ob sie die richtigen Größen und Formate haben. Wenn nicht, passen Sie sie an.

Zeichnen Sie das Zeichen nach, anstatt das SVG aus dem Blatt zu nehmen, denn Sie können die Gelegenheit nutzen, seine Proportionen zu optimieren, wenn das Symbol zum ersten Mal neben dem Namen der Website sitzt, sowie seine Position relativ zur anderen Seite des Logos: Schauen Sie es sich im Kontext an, nicht nur allein.

Erstellen Sie schließlich die Produktions-Assets: In den meisten Projekten sind dies das Wortzeichen (das bereits da sein sollte) und das Symbol in einem von zwei Layouts — gestapelt oder nebeneinander. Um zu entscheiden, reicht es normalerweise aus, eines in einem Satz zu platzieren — wenn es sich natürlich in die Website einfügt, ist dieses Layout fast immer das richtige. Nehmen Sie eine Entscheidung und begründen Sie sie. Wenn die Website eine Kopfzeile hat, zeigen Sie, wie das Ding hineinpasst.