10 digitale Design- und Styleguide-Illustrationen von beliebten Unternehmen wie Apple, Google und Starbucks

Wenn Sie sich jemals gefragt haben, wie Designer bei Apple jeden einzelnen Aspekt in iOS definiert haben, als sie es letztendlich konstruiert haben, dann sind Sie vielleicht an der richtigen Stelle.

Da sich die technologische Innovation ständig weiterentwickelt, wird das Webdesign immer formalisierter. World-Wide-Web-Designer und -Entwickler müssen Code erstellen, der sich nahtlos von Laptops auf Mobiltelefone übertragen lässt, die Website-Navigation einfach verständlich macht und andere Website-Funktionen erneuern – das sind alles Faktoren, die Unternehmen in digitalen Designleitfäden standardisieren.

Elektronische Design-Führer haben sich als praktischer für das Gesamtbild und die Einprägsamkeit einer Marke im Internet erwiesen, weil sie die Erwartungen und Maßstäbe für Unternehmens-Webdisplays festgelegt haben. Sie sind besonders wichtig für Websites und Produkte, die erstklassige Benutzer-Torturen abliefern müssen.

In diesem Beitrag gehen wir detailliert darauf ein, was digitale Type Guides sind, und zeigen Ihnen einige beeindruckende Illustrationen von bekannten Unternehmen, die sie ordnungsgemäß erstellt haben.

Diese Art der Modeinformation ist als Handbuch zu pflegen, das Stil- und Gestaltungskriterien für die digitale Existenz eines Unternehmens festlegt. Seine Hauptabsicht besteht darin, einen universellen Stiltyp für den Markennamen zu erstellen und eine gewisse Regelmäßigkeit über alle Kanäle und Medien hinweg herzustellen, den Ort, an dem Sie Ihre Marke aufbauen, Farbpalette, Typografie, Bildvorschläge und so weiter.

Im Gegensatz zu Modeführern von Herstellern, die das Logo, die Missionserklärung, Käuferpersönlichkeiten und den Tonfall eines Unternehmens enthalten, konzentrieren sich Webdesign-Design und Styleguides auf digitale Präsentationen wie UX/UI.

Aber als UX-Designer bin ich generell neugierig, was findet man in den digitalen Modeführern einflussreicher Anbieter wie Apple, Google und Starbucks?

Ob Sie es glauben oder nicht, viele Anbieter machen diese Informationen öffentlich zugänglich – sie machen es nur wirklich nicht leicht, sie zu finden. Jedes Mal, wenn ich über eine Single stolpere, markiere ich sie. Hier sind einige der besten, die ich so bedeutend gefunden habe.

Beispiele für brillante digitale Styleguides

1. Apple-iOS

Der Design- und Styleguide von Apple ist besonders spannend, da er Aspekte zum Entwerfen einer voll funktionsfähigen Methode enthält. Monterey, eine der neuesten Versionen von Apples OS X, hat eine einfachere Benutzeroberfläche als sein Vorgänger Yosemite. Apple demonstriert diesen subtilen, aber greifbaren Unterschied mit wirklich guten grafischen Vergleichen und diskutiert dann über die Gründe, die jede einzelne Facette des Layouts des laufenden Systems antreiben. Es gibt Ihnen einen Einblick in die Köpfe der Designer.

2. Google: Materiallayout

Google war Vorreiter einer Design- und Stilrichtung, die als Produktstruktur bezeichnet wird und als Hybrid zwischen skeuomorphem Design und Stil (Verläufe, Texturen, sanfte Elemente) und flachem Stil (einfach, farbenfroh, geometrisch) existiert. Dabei haben sie das Positive vermischt Aspekte, die mit jedem einzelnen Design und Stildesign verbunden sind, wobei das Negative vermieden wird.

Da Google seit einigen Jahrzehnten an Produktstilen arbeitet, haben Sie wahrscheinlich jeden Tag damit interagiert – Google Kalender-App, irgendjemand? Dieses Design- und Stilhandbuch beschreibt genau, was Materials Design ist und wie Google es verwendet. Und ich muss sagen, dass es bei weitem einer der besten Schriftführer ist, die ich je gesehen habe.

3. Starbucks

Dies ist nur einer der minimalistischsten Design- und Stilleitfäden, die ich mir angesehen habe – und er beherbergt eine Menge praktischer Fakten. Es legt großen Wert auf Code und Sie können erklären, dass es von Entwicklern für Entwickler erstellt wurde. Es fehlen Elemente, die mit Markennamen verknüpft sind, sodass es die Grenze zwischen einem Website-Designhandbuch und einer Codebibliothek überschreitet.

4. Atlassian

Die Merchandise-Suite, für die Atlassian modelliert, ist gigantisch – also haben sie natürlich einen gigantischen Modeführer. Von grundlegenden Dingen (wie Farbpalette und Typografie) über Komponenten (wie Tabellen und QuickInfos) bis hin zu einer vollständigen Musterbibliothek enthält dieses Handbuch so ziemlich alles, worauf Sie sich bei einem Produkt dieser Größe verlassen können.

Vielleicht das Beste von allem, der Grundgedanke hinter dem vollständigen Typenhandbuch ist auf der Homepage des Hauses in drei täuschend einfachen Bedingungen zusammengefasst.

5. Mozilla

Dieses elektronische Design-Tutorial befasst sich hauptsächlich mit Branding und Kommunikation. Aber da Mozilla in letzter Zeit eine „Privatsphäre und offenes World Wide Web“-Taktik bekommen hat, ist es erstaunlich zu sehen, wie sie dies in ihrem Design replizieren.

Die Homepage von Mozilla macht auch eine fantastische Karriere darin, zu skizzieren, wie seine UX/UI für Männer und Frauen mit Sehbehinderungen oder Behinderungen zugänglich sein soll – eine Sache inklusive und wichtig, da das Know-how viel revolutionärer werden wird.

6. Puffer

Die Typenrichtlinie von Buffer ist klein und prägnant, wahrscheinlich vom Raster über Modale an einer einzigen Position. Es ist eine angenehme Erinnerung daran, dass Ihr elektronisches Mode-Tutorial nicht auffällig sein muss, wenn es alle idealen Punkte kommuniziert. Unternehmen, die nach einem Anfangspunkt suchen, können Notizen aus den einfachen Designrichtlinien von Buffer berücksichtigen und daraus ihre Produkte zusammenstellen.

7. Yelp

Wenn Sie nach einer zuverlässigen Instanz eines Website-Design- und Stilleitfadens suchen, hat Yelp das enthaltene erhalten. Es ist nicht nur vollständig, sondern erklärt auch sein Atomic Design-Verfahren wie ein Kochbuch und unterteilt Website-Komponenten als Substanzen, die zu einem Gericht beitragen.

Dieses Detail hat es in sich: Typografie, Layout, Varianten, Container, Navigation und Codeschnipsel für jedes einzelne Stück. Sie leisten großartige Arbeit darin, zu erklären, was so ziemlich jedes Element ist, wo es wirklich verwendet werden sollte und wie es ausgeführt werden sollte.

8. GOV. Britische Inseln

Englands Website für Regierungslösungen wurde allgemein als erste Instanz für qualitativ hochwertige UX angekündigt. Wieso den? Aus dem Grund, weil es sich durch einen unkomplizierten und schnell zu bedienenden Stil und ein Design auszeichnet, das zu viele Informationen und Fakten unterbringt.

Wenn Sie sich dafür interessieren, was ein klares und kraftvolles Layout ausmachen kann (Tipp: Es beginnt im Allgemeinen mit der Verwendung von Volltonfarben, Typografie und Abständen), dann ist das Schrifthandbuch von GOV.UK einen Blick wert. Ähnlich wie die Website ist es sehr, sehr einfach, aber sehr aufschlussreich.

9. Abweichende Kunst

Die neuen Informationen im DeviantArt-Stil sind exklusiv, weil sie wirklich mehr als nur Informationen sind – sie sind Informationen. Es erzählt eine Geschichte und nutzt gewagte, raumfüllende Bilder, um die Person in die emotionale Expertise der Marke DeviantArt einzutauchen. Abgesehen davon handelt es sich ausschließlich um einen Leitfaden für Branding-Modelle, sodass nur Produkte wie Farbe und Typografie beschichtet werden.

10. Disqus

Farbe, Symbole, Typografie und Logo … Disqus hält es mit diesen Informationen kürzer und süßer. Aber es kann alles auf eine ziemlich angenehme, organisierte Weise angeboten werden. Dieser Ratgeber könnte als gutes Beispiel für den „Startpunkt“ bei der Erstellung einer eigenen Stilrichtlinie verwendet werden, da er alle Grundlagen enthält.

Erfahrung beeinflusst, um Ihr ganz eigenes Handbuch zu erstellen?

Jetzt kann es Ihr Schalter sein. Indem Sie ein Tutorial für elektronische Schriften in Ihrem Unternehmen nutzen, können Sie die Designsprache Ihrer Marke an interne Designer, Organisationen, Marketingbegleiter und sogar Kunden weitergeben.

Beginnen Sie mit den grundlegenden Standardfaktoren (Schattierung, Typografie, Logo, Bilder), integrieren Sie einige Nutzungsempfehlungen („tun Sie es und Sie sollten es nicht“) und integrieren Sie sogar einige Netzteile, wenn Sie dies benötigen (Module, Vorlagen, Codeschnipsel). Nutzen Sie Beispiele anderer Anbieter, um von den Besten zu lernen, und Ihre Mitarbeiter werden im Handumdrehen regelmäßige Muster erstellen.