Ich bekam neulich eine E-Mail von Andy Fitzsimon über einige Projekte, an denen er arbeitet. Eines davon war logomono, etwas, das meiner Meinung nach ziemlich interessant aussah und das ich neulich geteilt habe. Ich dachte, anstatt Dinge selbst herauszufinden und neu zu erklären, frage ich einfach Andy selbst, um meine Fragen zu beantworten. Im Interviewstil.
Meine Fragen als Überschriften; Andys Antworten folgen.
Kannst du uns eine kurze Erklärung geben, was logomono genau ist und was die Motivation dahinter ist?
logomono ist ein (ziemlich) großes und wachsendes GitHub-Repository mit einfarbigen SVG-Logos. Das Projekt existiert, um die Sorgfalt bei der Verwendung und Bezugnahme auf Logos im Web zu fördern.
Die Seite behandelt auch einige Techniken, einige Werkzeuge und einige Tutorials, die darauf abzielen, es Designern und Entwicklern zu erleichtern, Logos zu verwenden.
Um die Dinge super einfach zu halten, sind alle SVGs aus nur wenigen flachen <path>s und ohne Farbe gefertigt.
Das erste, was auf der logomono-Homepage präsentiert wird, ist eine Idee, wie Logos auf dunklen oder hellen Hintergründen funktionieren. Ist das ein Problem, das du hattest? Glaubst du, das ist eine Vorausbedingung für jedes wirklich robuste Logo?
Für so viele bestehende Logos ist die richtige Invertierung sicherlich eine höfliche und nette Sache, die man berücksichtigen sollte. Es ist ein Merkmal von Logos, das heute weitgehend ignoriert wird. Wenn das von Ihnen verwendete Logo Schattierungen (oder eine Handvoll anderer Überlegungen) aufweist, gibt es wahrscheinlich eine andere Version, die Sie auf dunklen Hintergründen verwenden sollten. Für Logo-Designer ist es eine Verpflichtung, mehrere Varianten von Logos zu erstellen, die sowohl für helle als auch für dunkle Situationen funktionieren, aber es ist ein ziemlich häufiger Bedarf. Denken Sie daran, dass Ihre Logos nicht immer ausschließlich von Ihnen verwendet werden.
logomono wurde aus Frustrationen bei meiner täglichen Arbeit als Brand Manager bei Red Hat geboren. Shadowman (das Symbol im Red Hat-Logo) hat einen Schatten über seinen Augen. Er funktioniert nicht wirklich, wenn die gleichen Füllungen auf Dunkel umgekehrt werden. Er wäre eher ein Mann mit Laseraugen, wenn diese dunklen Stellen weiß gefüllt wären.
Dasselbe kann man von den Logos meiner beiden Lieblings-Open-Source-Projekte sagen
Inkscape (das Inky, den verschmierten Berg zeigt) und Linux (mit Tux, dem Pinguin)
Wir wissen, dass Pinguine schwarze Flügel und weiße Bäuche haben. Wir wissen, dass Eiskappen auf Bergen heller sein müssen als der Berg. Es ist erstaunlich, dass dieses Detail so übersehen werden kann.
Um dieses Problem zu lösen, könnten wir dies einer Million Designern in unserem Leben hunderttausendmal erzählen. Oder wir könnten es aufschreiben und versuchen, es nützlich genug zu machen, um es sich zu merken. Deshalb existiert logomono.
Bei der Arbeit bekomme ich immer wieder Korrekturabzüge von Kunden, Partnern oder Mitarbeitern, die ein falsch invertiertes einfarbiges Red Hat-Logo verwenden. Das tut doppelt weh. Erstens, weil es das falsche Logo ist. Zweitens, weil sich ein armer Tropf die Mühe machen musste, es aus dem vollfarbigen Logo zu erstellen, das er wahrscheinlich von Wikimedia gefunden hat. Vielleicht verhunzt er sogar die Koordinaten. Vielleicht verliert unser Logo seine Nase.
Einige Designer suchen nach „einfarbiges [Firmenname] Logo“ und finden das Richtige für den richtigen Hintergrund. Aber heute bekommen sie nur Seiten wie Brands of the World und Wikimedia. Ganz zu schweigen von fiesen Seiten mit herunterladbaren Dateien, die aus automatisch nachverfolgten Vektoren und sehr alten Logo-Versionen erstellt wurden, die einfach nicht sterben wollen. Ich möchte ihnen proaktiv die besseren Versionen anbieten. Ich möchte das Bewusstsein dafür schärfen, dass Invertierung etwas ist, das die Leute hinter dem Logo gerne berücksichtigt sehen.
Einfarbig zu sein, ist auch Teil des Deals. In meinem Fall möchte ich, dass unser roter Hut, nun ja, rot ist, aber wenn er neben anderen Firmenlogos steht, kann ich die Notwendigkeit visueller Harmonie verstehen.
Es sieht so aus, als ob ein für die Invertierung bereites Logo etwas Ein-/Ausblenden und manchmal zusätzliche Elemente erfordert. Ist die Ressourcengröße dort ein Problem? Oder die Einbettungstechnik?
Ich schlage zwei optionale Klassen für potenziell drei Arten von <path>s vor
- Normale Pfade. Keine Klassen erforderlich. Sie sollten jederzeit angezeigt werden. Normalerweise der Logo-Text und für viele Marken die gesamte Logo-Umrandung. Nike, IBM, Intel… Ihr Glückspilze!
- Nur helle Hintergründe. Verwenden Sie
class="only-light-background"für Formen, die als dunklere Füllungen auf helleren Hintergründen gerendert werden sollen.Denken Sie an alles mit Augen. Man möchte, dass der Pfad die Pupillen dunkel zeichnet. Betrachten Sie Markenlogos von Hadoop, Tux oder sogar Unternehmen ohne Maskottchen wie Ford, die es bevorzugen, ihren Namen als helle Textschrift zu schreiben und entsprechend zu invertieren.
- Nur dunkle Hintergründe. Verwenden Sie
class="only-dark-background"für Pfade, die nur als helle Füllungen auf dunklem Hintergrund funktionieren.
Die Standardannahme ist ein heller Hintergrund, so speichern wir sie im Repository. So sind die Dateien auch im Rohzustand noch verwendbar. Das bedeutet, dass inline style="display: none;" bei den Pfaden für nur dunkle Hintergründe verwendet wird. Dies kann im Build-Prozess entfernt werden.
Wie Sie logomono verwenden, kann unterschiedlich sein, je nachdem, was Sie tun müssen. Wenn Sie Interaktivität haben, die den Hintergrund invertiert, dann ist es sinnvoll, alle Pfade im SVG zusammenzuhalten und die display-, opacity- oder visibility-Werte in Ihrem CSS zu überschreiben, um die Lichter und Schatten nach Bedarf umzuschalten.
Wenn Sie nur eine Version (eine dunkle oder helle Version) benötigen, könnten Sie logomono-Logos verwenden, aber ein Tool wie Gulp oder Grunt einen Task ausführen lassen, der die nicht benötigten Pfade entfernt.
Sie empfehlen die Verwendung einer viewBox, aber keine height- oder width-Attribute. Ist das in der Produktion empfehlenswert, oder meinen Sie, dass diese später hinzugefügt werden können? Ich habe festgestellt, dass ein SVG ohne eine Standardbreite/-größe so breit wie möglich ist, bis CSS es neu dimensioniert, was zu einer leider ruckeligen Ladeerfahrung führen kann.
Damit das Repository schlank und straff bleibt. Wir möchten, dass Breite und Höhe erst hinzugefügt werden, wenn der Benutzer weiß, was er will.
Wenn Sie jede logomono-Datei nehmen und zufällige Dimensionsattribute wie width="100px" height="76px" zum <svg> hinzufügen, wird nichts kaputt gehen. Sie haben jedes Logo in der von Ihnen angegebenen Größe und vermeiden das ruckelige Laden. Das kann man von einem Ordner voller unterschiedlich großer Logos nicht sagen. Wir können Ihre bevorzugten Abmessungen nicht im Voraus kennen, daher fügen wir sie nicht hinzu (Sie können es aber).
Seiten wie Slides.com machen das auf schöne Weise: Wenn Sie eine reine viewBox-SVG hochladen, fügt der Importeur Breite und Höhe basierend auf den viewBox-Abmessungen hinzu.
Eine weitere Empfehlung von Ihnen ist ein 4%-Abstand um das Logo wegen Aliasing. Können Sie das näher erläutern? Ich hätte Bedenken, dass die exakte Ausrichtung des Logos an einer Kante dann eine potenziell frustrierende Pixel-für-Pixel-Verschiebung erfordert.
Das ist etwas, zu dem ich mehr Feedback hätte. Das Problem sind Antialiasing-Überläufe.
Zuerst dachte ich: „Lasst uns die SVG-Dateien im Quell-Repository direkt an die Wand kleben: 0 0 min und max ihrer viewBox!“
Mein Gedanke war, dass wir immer eine Nachbearbeitung verwenden könnten, um die gleichen Lückenmaße zur viewBox hinzuzufügen, um Antialiasing-Überläufe zu vermeiden. Wenn also ein Logo z. B. viewBox="0 0 120 150" hat, macht die Verarbeitung es zu viewbox="-4 -4 124 154". Wenn ein anderes viewBox="0 0 50 70" hat, wird es zu viewBox="-4 -4 54 74". Das vermeidet die potenziellen Überläufe.
Aber dann dachte ich, dass das Hinzufügen und Entfernen von 4 auf jeder Achse in der viewBox für SVGs mit „großen“ Koordinatensystemen im Vergleich zu „kleinen“ Koordinatensystemen unterschiedlich wäre. Vielleicht müsste es auf einem berechneten Prozentsatz der Gesamtlänge der viewBox basieren.
Dann wurde mir klar, dass die gesamte Nachbearbeitung bedeuten würde, dass die Quelllogos im Repository als solche anfällig für die Skalierungs-Aliasing-Probleme wären, was ein No-Go ist, da diese Dateien für sich genommen nützlich sein müssen.
Dann dachte ich, dass dieser „4%“-Vorschlag den Logo-Beitragenden ein sehr geringes Ermessen für optische Anpassungen gibt.
Selbst wenn wir in einem magischen Land leben würden, in dem skalierte SVGs kein Kanten-Aliasing-Problem hätten, sind Logos wie Typografie. Runde Formen und Winkel wie O und W müssen über die wahrgenommenen Linien geschoben werden, um gerade zu erscheinen. 4% schienen der einfachste Kompromiss zu sein.
Vorerst legen wir diese ganze Idee in den „zu schwierig“-Korb. Vielleicht berechnen wir die Koordinaten für die vorhandenen Logos neu, aber nicht heute.
Wir Designer sind dazu verdammt, beim Layout unserer Arbeit zu schubsen. Hoffentlich wird dies mit 4% als allgemeine Regel so minimal wie möglich. Bei allem, was ich weiß, kann ich nicht den richtigen Weg finden, all die ausbalancierenden Faktoren zu speichern und zu respektieren, mit denen Designer jonglieren wollen.
- Logo und Text entlang einer Grundlinie
- Dicken- und Gewichtsbalance
- Optische Links/Rechts-Ausrichtung
Und das alles, während diese Dateien „roh genug“ gemacht werden, um grundlegende Bausteine des Webs zu sein: einfach beizutragen; einfach zu verwenden. Zumindest werden sie jetzt nah genug sein, damit verzeihende Augen damit umgehen können. Schieben Sie weiter, Soldat!
Vielleicht können wir in Zukunft, wenn das Web wunderbare Dinge wie Element-Media-Queries hat, logomono erweitern, um eine allgemeine Faustregel für vertikal oder horizontal gestapelte Logos oder Logos, die zu einem Symbol kollabieren, aufzunehmen. Für heute halten wir die Dinge einfach.
Kann jeder beitragen? Wenn ja, was wäre die nützlichste Arbeit?
Jeder kann beitragen
- Einfarbige Logos. Mit Abstand der nützlichste Beitrag. Finden Sie die fehlenden Logos und senden Sie eine Pull-Anfrage. Boolesche Pfade, glätten Sie den Text, kombinieren Sie doppelte Steuerpunkte.
- Verbesserungen an Tools und Projektseiten.
- Das Bewusstsein dafür, dass einige Logos Invertierungs-Liebe brauchen.
Es hilft sehr, wenn Sie für die betreffende Marke verantwortlich sind, damit die Dateien genau nach Ihren Wünschen optimiert werden können. Aber lassen Sie sich davon nicht abhalten, wenn Sie ein weiteres Logo hinzufügen möchten.