Brandbook design examples

How to get executive buy-in for your design system approach

PRODUCT DESIGNArgument collection to convince the product stakeholders to build a design systemToday, design systems are mentioned in almost every conference dedicated to Internet marketing. Media makes ratings of the most successful cases, and big brands are actively working on their implementation. In this article, we’ll talk about why design systems are needed and how to correctly implement them in business.What is a design systemThe term itself appeared in the middle of the 20th century. During this period, design systems were actively in demand in retail: supermarkets and product manufacturers used them to create the identity of their packaging.With the Internet, web design has confidently stepped into our world. Until the end of the 2000s, it was quite primitive: the websites were a series of chaotic flash-animations and were completely uncomfortable to use. There was no such term as usability.The situation changed after 2010 when people thought about how to make the site user-friendly and optimize the resources of the team that works on it. These problems had to be solved by the design system.In fact, such systems on the web are elements of the visual part of the brand. They consist of small particles: fonts, colors, shapes, icons, transparency, and rounding. The components of the site are assembled of those — buttons, input fields, text blocks, forms, filters, and bar elements. Meanwhile, the code is attached to them, which allows the layout designer to quickly construct new projects.The first meaningful attempt to create such a system was made by Google. In 2014, the Material Design project was launched, which changed the interface of Youtube, Google Maps, and other services of the corporation. Later, similar systems appeared at large international brands — banks and online services. We could find the best examples of the design system on some web platforms. The most famous of them were styleguides.io and designerlynx.co.Who needs a design system?Design systems are convenient for the end-user. Practically, everything is implemented for him. Everyone should feel equally comfortable surfing the company’s content through an application or a desktop browser.Large services that often updating current products and launch new ones require such systems. A good example is Airbnb. According to the creators, building the design system was worth the investment and a huge leap forward. Since the design language and code are often shared, they can build and release features on all native platforms at roughly the same time. Development became generally much faster.Airbnb’s Design System Component PageDesign systems are also in demand for small fast-growing projects, as they facilitate to quickly launch new services, including new sections and functions on sites.In general, a design system is able to achieve the following business objectives:Increase brand recognition — a company, that designed every detail of the service’s interface, will be captured by customer’s memory much longer;Optimize the work of the team — the design system will take over part of the operating issues that assigned to developers and designers;Save time — it will be much easier to assemble new pages: just pull out the prepared elements from the data library and construct them in a single puzzle;Will provide media publicity — the business community is keenly interested in fresh design system projects.Today, banks, online platforms, and service providers use design systems in our world. It is important for them that the user feels as comfortable as possible, using their products from any device. One more example of an interesting case of the Uber design system can be found here.The design system increases employee confidence in the products of their company and positively affects the brand reputation. Its integration can be a good PR step and improve the company’s position in the digital services market.Deciding between the design system and Ul-kitBut the question is many companies manage with a regular UI kit and feel quite good. Why do they need a design system?To understand, we’ll first agree on the terms. UI kit is a set of interface elements for a website — buttons, tabs, arrows, sliders, etc. All visual components of the project are stored in the UI kit. And, if necessary, on their basis you can construct the whole website.The design system is a broader concept, which includes both the philosophical part (brand values) and the applied one — guidelines, brand book, and UI kit. It’s a set of brand components with the maximum upgrade presented as one package. And lastly, UI kits are translated into code, which allows you to assemble new projects even faster.It makes sense to create a design system, and not just a UI kit, if:The company has several related products that require systemic scaling;The company got the necessity to optimize the work of development teams;The brand doesn’t have a single visual language;There is already a completed UI kit, but there is no single data library that could be used by both developers and designers.If we are talking about a startup, it is better to concentrate on key business processes — the development of the sales funnel, product, and desired service level. These actions will provide a profit in the short term.Speaking about the design system, everything is a bit more complicated — they won’t bring money here and now. This is a long-term project that focused on the strategic development of your brand. Developing a good design system takes at least six months and requires specialists in the state who will devote almost all of their working time to it.It will take at least one designer, who will draw the elements, components, templates, and the developer who will connect them to code. If the customer does not want to invest his money and time into this, you can completely get by with the regular UI kit.Before you start developing a design system, you need to complete several actions:Align and agree with the whole development team. This project will require the mobilization of all workforce. The easiest way is to motivating colleagues, explaining the design system will simplify their work: creating new projects will be easier and faster.Define the criteria to be used to measure the effectiveness of the system. This may be increasing of customer loyalty or website conversion;Be ready to maintain the relevance of the design system. It will take a lot of time until the final version has launched. During this time, the team may have new ideas, and the system should be able to ensure them. Only in this way, the system will be effective.Bringing the value of a design system to the product stakeholdersCreating a design system is obviously profitable for designers and developers. Because it simplifies their work. But all developers have faced one problem — how to convince all stakeholders or your product management of the advantages of implementing such a system?Define the pain of your company for todayAs we learned above, not every company needs design systems. If you are an agency, offer them to customers who have a stable market position and a strong digital base. Small startups and companies could exist with the UI kit.Collect the feedbackContact with the product manager or customer support staff. These people will help you understand what problems a business faces every day. Think of the solution based on design system implementation and offer the arranged proposal to the management.Focus on the resultUsually, the head is not aware of design systems. He just wants to see the result of your work. Therefore, it’s crucial to emphasize the outputs of the implementation of the system instead of focusing on the workflow. Those are optimization of the work of designers and developers and customer satisfaction, who would certainly appreciate the updated service.Show business benefitsVisual design is a subjective thing, it is difficult to immediately evaluate its profit. You can come from another angle and evaluate the effectiveness of the system for the company itself. The design system automates the process of developing new products and simplifies the work of the team.This allows you to reduce the huge amount of operating work and focus employees on creativity and strategy.Accessibility Scale. A peace of Eleks’ Design SystemA good design system will perfectly handle the task of optimizing the company staff — the necessity for a huge team of designers and developers will simply disappear. Tell your boss about this, and you will not meet the skepticism of your idea.Resources we found helpful:Atomic Design by Brad FrostDesigning The Perfect Date And Time Picker by Vitaly FriedmanFeel free to get in touch with me on Facebook, Behance.How to get executive buy-in for your design system approach was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Historian Mark Solonin. Worldbuilding

This case presents the final materials that showcase the Soloning brand, including, an illustration system, a website, print posters, magazine covers, gift bags, stickers, and a YouTube filming room interior design; equipped with examples and development guidelines.+Illustrations +UI +Identity +War of Ukraine +Wars of Israel +The final solution +CrucifixionBy uncovering The Soviet Union’s and post-Soviet Union’s history we can better understand the processes of modern times in the whole world, as the influence on the world since 1917 has been very significant.Ahead of the whole planet. Moon race part no. 04One of the leading motives of the work is — hidden from others, forbidden, and it’s reflected by the usage of barbed wire.Pro barbed wire [Digital]Use the Pro barbed wire to charge your device — you remember the history, and you are connected.We are charged with unknown.The gallery mobile screen with one of the videos from the “Moon Race” series (December 2022).Desktop screen set. [ATF]War of Ukraine. [Print]GiftsGive us what we need, so we could stop it now.{The Scream}General guiding principleThe H/I direction is guided by the logo position — vertical or horizontal.Meanings[his]story taler | Every stream Mark starts by saying — “Hi to all kind people”Examples of the usageColorsGuiding principleColor red simbolise the Soviet Union’s armi (Red Army). At the same time, the Soviet Union’s and post-Soviet Union’s history is a general subject for Solonin’s research. Because of this fact, red was chosen to be the main accent color.Color paletteSometimes even barbed wire bloomsTrue history is desirable fruit.Final solutionRed since 1917The ScreamDon’t help us to scream. Help us to win. War of Ukraine. Part no. 2Give us what we need, so we could stop it now. War of Ukraine. Part no. 1A million were killed in one night. Wars of Israel. Part no. 5Guiding principle.Elements of the illustrations that are used in posters can have a dark color because, in the case of posters, we want to have a better focus on the visual message; for the other formats, the textual content is a number one priority, so other colors are used instead of the dark and only lines are dark.Why do we need to study history?We study history because history doesn’t stay behind us. Studying history helps us understand how events in the past made things the way they are today. With lessons from the past, we not only learn about ourselves and how we came to be but also develop the ability to avoid mistakes and create better paths for our societies.I beg youHouse; Sounds spelled — Chaos; only outwardly attractive.Divide and conquerHow Mandatory Palestine was divided. Wars of Israel. Part no. 1Why World War II archives are still secret. World War II. Part no. 2Just one more step. Wars of Israel. Part no. 3Why do we need to learn about the Soviet Union?By uncovering The Soviet Union’s and post-Soviet Union’s history we can better understand the processes of modern times in the whole world, as the influence on the world since 1917 has been very significant.RecommendationDo not play this game with professional cheaters. Study the history with Mark Solonin.Step by step. Video by video“Dripping water hollows out stone, not through force but through persistence.” — OvidTypefaceNeue Machina is a powerful and meticulously crafted typeface boasting monospace/geometric type features as well as apparent and deep ink traps in its heavier weights. It is inspired by the aesthetics of robotics and machines. A font suited for the future of technology. It was designed to be versatile, to blend in your designs in its lighter weights or to give them a lot of personality in its heavier ones.NewspaperDear Mark, I’m watching your channel since its inception. I’m very thankful to you for the highest level of historical and technical education you are providing. I appreciate the courage and honesty you demonstrated many times by touching on very “hot” and “inconvenient” topics of Soviet, Ukrainian, and Israeli history. Every country has its own “skeletons in the closet” — pages of history that are shameful. The faster people of respective countries would acknowledge the error of the past, the faster we will move to a better future. It seems to me that the Ukrainian people made the right choice. It is a long way but Ukraine will be successful in joining the civilized world. — Al TsaWars of IsraelMoon raceCover: “How Mandatory Palestine was divided”.LogoIndependent historian Mark Solonin -> History soloh justificationIt’s all about history. In Solonin’s case, history is the main and only subject of interest and the final product is the research result, whether in the format of a YouTube video, lection, book, or magazine publication.o justificationSome of the text styles use the letter “o” in a different style — in a ‘lighter’ font weight. This is because of the logotype where we want to highlight that Solonin is a solo historian.Main characterIconThe icon is the Solonins profile. Solonin is the main hero after all. Small icon size. The stroke is heavier than in the large version.The main character in the illustrationsI am not sure the complete truth can be figured out. Somehow each desid to believe in one or another teller’s historical version. Considering that each of us has his own understanding, history is the personification of one’s beliefs. Long story short all the characters of the illustrations are Solonins with the difference being that the icon uses more geometric elements than the illustration characters.IllustrationsOne-to-one ratio version developed for the web. For print, the position and ratio of the illustration canvas may be treated freely.Magazine coversCover: open spine, hot foil on canvasPaper: Via Felt Jute 220 g, Munken Pure Rough 150 g, 300 g Printer: Concordia Print Store — Boutique d’impressionGood day for all kind peopleGreetings.Placement: cover back.Digital materialsThis chapter includes examples from website landings on mobile and desktop, a few critical website pages including the website loader concept, video recording room interior design, and a YouTube channel example.Use the Pro barbed wire to charge your device — you remember the history, and you are connected.We are charged with unknown.Repetition is the mother of doctrineDigital posterWebsite landingWhen the new video has been published it’s also promoted on the website’s front page. This way visitors won’t miss a new publication.Video pageAll the videos are recorded in the studio that was specially designed for Solonin production shootings.Interior designVideos are the main way of communication. It’s why the interior design of the studio needs to be relevant. We have integrated the main elements of the Solonin brand into the room and clothes design.Selected screensLanding loaderGeneral guiding principle usage exampleFully loaded landing ATF sectionPlacement of the illustrationsYouTubeThe channel cover is the poster (have a more massive usage of the black color) of the latest movie.Mobile screensThe main challenge we have faced working with the mobile version of the website landings is illustration treatment. More specifically the placement of the artwork. The full-screen canvas was providing a very nice picture, but in this case, the textual content has a bit less readability, so we have decided to have a clear separation between the artwork and the textual content.I could not do this without the help of my dears:Limor Jamaica — set design and photography,&Alex Voloshin — barbed wire manufacturing.+Don’t let making you a fool. Learn the history with Solonin!______________________________꩜ In addition, you can find me on: Behance | Dribbble | Linkedin | Instagram | TwitterHistorian Mark Solonin. Worldbuilding was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.