Stílusvezető megtervezése: olyan elemek, amelyek vonzó termékek felépítésébe kerülnek

Ha olyan vállalatokat néz meg, mint a Dropbox, a Google és a Twitter, akkor észreveszi, hogy mindegyiknek megvan a maga egyedi esztétikája. Minden termékükben, mind a mobil, mind az interneten, érzékelhető a következetesség és az egységesség a tervezésükben.

A vállalatok és a termékek konzisztenciáját a stílusvezetőkkel lehet elérni . A stílusvezérlő olyan szabványkészlet, amely összehangolja a terveket a vállalat hangjával és küldetésével.

A következetesség azért fontos, mert bizalmat kelt. A tervezés pedig a termékek és a felhasználók közötti kapcsolatok létrehozásáról szól.

A cikk célja, hogy megismertessen Önt néhány átgondolt stílusú útmutatóval és a márkaépítési irányelvekkel. Ezenkívül bemutatja azokat a legfontosabb elemeket, amelyek minden stílusvezetőnek rendelkeznie kell.

Remélhetőleg ezek az elemek és példák inspirációs forrásként szolgálnak, és befolyásolják a fenntartható termékek tervezését a jövőben.

Mielőtt nekilátnánk ...

Íme néhány javaslat a stílusvezetők tervezéséhez.

  • Először tervezze meg termékét, majd hozzon létre egy stílusvezetőt. Ne kezdje a stílusvezető létrehozásával. Először találja ki, mi működik és mi nem. Ezután szabványosítsa.
  • Soha nem leszel teljesen elégedett a stílusvezetőddel. Rendben van. Az univerzális tervezési nyelv létrehozása iteratív folyamat.
  • Jól ismerje meg azt a hangot és üzenetet, amelyet a termék át szeretne adni, mielőtt írna egy stílus útmutatót.

Alapelvek

A stílusvezetőknek mindig tartalmazniuk kell egy oldalt a tervezési elvekről. A tervezési elvek olyan irányelvek összessége, amelyek befolyásolják a tervezők megközelítését és megoldását a termékek építése során.

A jó tervezési elv egyik legfontosabb jellemzője, hogy nem nyilvánvaló vagy túl széles. A jó tervezési elvnek elég konkrétnak kell lennie, hogy segítse a tervezőt a döntések meghozatalában.

Vessünk egy pillantást az Apple Human Interface Guidelines-re, amelynek része a tervezési elvek. Az egyik elvük a közvetlen manipuláció .

A képernyőn megjelenő tartalom közvetlen manipulálása vonzza az embereket és megkönnyíti a megértést ... Közvetlen manipulációval láthatják cselekedeteik azonnali, látható eredményét.

Ez a leírás elmagyarázza, hogy a közvetlen manipuláció olyan elv, amely a fizikai és digitális interakciókat irányítja és közvetíti. Segít a tervezőknek kiválasztani az interakció módjait, például az ellopást és a forgatást.

A tervezési elvek kidolgozásakor a kevesebb több. Kezdje három vezérelvvel, és iteráljon onnan.

A tervezési elvekről bővebben Julie Zhuo Az alapelv című cikkében olvashat. Hatalmasan befolyásolta, hogyan gondolkodom a tervezési elvekről.

Tipográfia

A tipográfia kulcsfontosságú a több termék és minta közötti egység elérésében. Minden stílusvezetőnek tartalmaznia kell néhány szakaszt, amely részletezi a tipográfiai specifikációkat.

Fontos, hogy korlátozza a használt betűtípusok és méretek számát annak érdekében, hogy a tervek egyszerűek legyenek. Általános szabályként legfeljebb két betűtípussal kezdje - az egyik a fejléceknél, a másik pedig a testén. Legtöbbször nem lesz szükséged ennél többre.

Illesszen be tipográfiai példákat is, hogy más tervezők és fejlesztők megértsék, mikor kell használni a félkövér vagy a dőlt betűt.

Ha problémája van a betűtípusok kiválasztásával, nézze meg a Typewolf és a FontPair oldalakat. A betűtípus méretezéséhez nézze meg a Modular Scale és a hozzá tartozó, Értelmesebb tipográfia című cikket.

Ne feledje, hogy a betűtípusok sem kőbe vannak vésve. Később bármikor megváltoztathatja őket.

Képek

Mutasd, ne mondd el. A képek hatékony eszköz a tervező kezében. A képek dinamikusak. Első pillantásra jelentést közvetítenek és érzelmeket váltanak ki.

Ha rendelkezik az eszközökkel, fontolja meg egy olyan szakasz beillesztését, amely részletesen leírja, hogy a többi tervező milyen képeket használjon a termék hangjának és identitásának közvetítéséhez.

A Nike jó példa egy olyan vállalatra, amely képeket használ a márkanév közvetítésére. Fotóik olyan filmminőséggel bírnak, amely arra ösztönöz, hogy vegyenek részt küldetésükben és márkájukban.

A képek nem csak fényképekre korlátozódnak. Az olyan vállalatok, mint a Dropbox, ritkán használnak fényképeket a terveikhez. Ehelyett illusztrációk segítségével közvetítik személyiségüket.

Itt van egy példa a Hubspot képalkotási útmutatójára.

Figyelje meg, hogyan írják le a fotózás hangját és célját, mielőtt példákat adna.

A képek felhasználására vonatkozó irányelvekkel a tervezők jobban kommunikálhatják a jelentést a felhasználókkal, és végső soron elmélyíthetik őket összetartó élményben.

Rácsok és távolság

A jó dizájn ugyanúgy törődik a szóközzel, mint a tartalommal. A stílusvezetőknek tükrözniük kell ezt a mentalitást, és tartalmazniuk kell egy részt a rácsokról és a távolságról.

Fontos létrehozni egy rácsrendszert, amely minden felhasználási esetre megfelel. A rácsokról szóló szakaszban adjon meg információkat, például az oszlopok és sorok számát, margókat és a felhasználási példákat.

A rácsokról való olvasáshoz lásd: Útmutató a rácsrendszerek létrehozásához, amelyek alapértelmezésként a tartalma köré épülnek. És kövesse a rácsos moduláris kialakítással.

A térköznek külön szakaszának kell lennie. A terméken belüli következetes távolság az egységesség és az egyensúly érzetét kelti.

A margók méretének felsorolása hasznos mind a tervezők, mind a fejlesztők számára. Különösen a fejlesztők kódolhatják az űrskálát Sass változókká.

Például a Marvel térköz stílusvezetését referenciaként használva a Sass megfelelője így nézhet ki:

$space-smaller: 5px;$space-small: 10px;$space-medium: 20px;$space-large: 40px;$space-larger: 80px;$space-largest: 240px;

Szín

A szín egy másik eleme a stílusvezetőknek. A szín segít a vizuális hierarchiák kialakításában és az érzelmi rezonancia létrehozásában.

A stílusvezetők színes részei megkönnyítik a tervezők életét. Ahelyett, hogy időt szánna arra, hogy mely színeket használja, a tervezők hivatkozhatnak a stílusvezetésre. Ez lehetővé teszi számukra, hogy a tartalomra összpontosítsanak.

Ahogy Buffer stílusvezetésében megfogalmazza:

A színek következetes használata megismeri és egységezi a terméket. A Buffer színvilágának célja világos, feltűnő és barátságos.

A fenti példában a Buffer megnevezi mindegyik színüket. Ez különösen hasznos a fejlesztők számára, mert a színeket Sass-változókká alakíthatják:

$primaryColor = #168eea;$headingColor = #323b43;$bodyColor = #59626a;$borderColor = #ced7df;$lightBorderColor = #eff3f6;$fillColor = #f4f7f9;

Figyelje meg, hogy a Buffer hogyan használja az primerColort olyan név helyett, mint a brandBlue . Válasszon neveket, amelyek leírják a szín szerepét, nem pedig maga a szín. Ez a megközelítés mind a tervezők, mind a mérnökök számára megkönnyíti a színértékek beállítását a név megváltoztatása nélkül.

Ha többet szeretne megtudni a szín kiválasztásáról, olvassa el a Színes tervezés című cikket.

Alkatrészek

A lot of designers and developers think about UIs as collections of components. The idea is that each UI component is its own entity. For example, a card is a single component.

Using this approach, designers can re-use components across multiple products and designs. This creates design consistency. It also minimizes the amount of time designers spend re-inventing the wheel designing UI components that already exist within an organization.

Component-based thinking also helps engineers. Design components can translate neatly into code. From an engineering perspective, components are like lego blocks that you can compose together.

While you’ll often see components in UI and pattern libraries, it’s also useful to include components in styleguides for other designers to reference.

For example, Mapbox has a styleguide that includes all of their commonly used components. This includes buttons, inputs, and forms. This way their designers and developers know what UI components are already available.

If you want to learn more about components check Brad Frost’s Atomic Web Design article.

Principles, typography, imagery, grids and spacing, color, and components. This list isn’t exhaustive, but these six topics form the basis of a good styleguide.

What are your thoughts on styleguides? What are some of the lessons that you’ve learned in the process of creating styleguides? Leave a note below or tweet at me.

If you enjoyed this article, you might enjoy Photos and stories from a designer.

Photos and stories from a designer

Some of the best designers are also some of the best storytellers.medium.com

You can find me on Medium where I publish every week. Or you can follow me on Twitter, where I post non-sensical ramblings about design, front-end development, and virtual reality.

P.S. If you enjoyed this article, it would mean a lot if you click the ? and share with friends.