|
| 1 | +--- |
| 2 | +title: Рекомендации по брендингу |
| 3 | +--- |
| 4 | + |
| 5 | +import { Aside } from '@astrojs/starlight/components'; |
| 6 | + |
| 7 | +import StaticImageDownload from '../../../../components/StaticImageDownload.astro'; |
| 8 | + |
| 9 | +# Рекомендации по брендингу |
| 10 | + |
| 11 | +Визуальная айдентика FSD основана на его ключевых концепциях: `Layered`, `Sliced self-contained parts`, `Parts & Compose`, `Segmented`. |
| 12 | +Но мы также стремимся к простой и красивой айдентике, которая бы отражала философию FSD и была бы легко узнаваемой. |
| 13 | + |
| 14 | +**Пожалуйста, используйте айдентику FSD "as-is", без изменений, но с нашими ассетами для вашего удобства.** Этот бренд-гайд поможет вам использовать айдентику FSD корректно. |
| 15 | + |
| 16 | +<Aside type="caution"> |
| 17 | + |
| 18 | +FSD прежде имел [другую легаси-айдентику](https://drive.google.com/drive/folders/11Y-3qZ_C9jOFoW2UbSp11YasOhw4yBdl?usp=sharing). Старый дизайн не отражал главные концепции методологии. Также это было создано как грубый черновик, который был должен быть актуализирован. |
| 19 | + |
| 20 | +Для совместимого и долгосрочного использования бренда, мы тщательно работали над ребрендингом в течение года (2021-2022). **Чтобы вы могли быть уверенными в использовании айдентики FSD 🍰** |
| 21 | + |
| 22 | +*Но используйте именно актуальную айдентику, не старую!* |
| 23 | + |
| 24 | +</Aside> |
| 25 | + |
| 26 | +## Название \{#title} |
| 27 | + |
| 28 | +- ✅ **Правильно:** `Feature-Sliced Design`, `FSD` |
| 29 | +- ❌ **Неправильно:** `Feature-Sliced`, `Feature Sliced`, `FeatureSliced`, `feature-sliced`, `feature sliced`, `FS` |
| 30 | + |
| 31 | +## Эмодзи \{#emojii} |
| 32 | + |
| 33 | +Образ торта 🍰 хорошо отражает ключевые концепции FSD, поэтому оно было выбрано как наше фирменное эмодзи. |
| 34 | + |
| 35 | +> Пример: *"🍰 Architectural design methodology for Frontend projects"* |
| 36 | +
|
| 37 | +## Лого & Палитра \{#logo--palettte} |
| 38 | + |
| 39 | +FSD имеет несколько вариаций логотипа для разных контекстов, но рекомендовано использовать **primary** |
| 40 | + |
| 41 | +<table style={{ textAlign: "center" }}> |
| 42 | + <tr> |
| 43 | + <td>Тема</td> |
| 44 | + <td>Лого <sub style={{ color: "gray", display: "block" }}>(Ctrl/Cmd + Click для скачивания)</sub></td> |
| 45 | + <td>Использование</td> |
| 46 | + </tr> |
| 47 | + <tr> |
| 48 | + <td style={{ color: "#FFF", background: "linear-gradient(135deg, rgba(41,190,220,1) 0%, rgba(81,122,237,1) 100%)" }}>primary <br/> (#29BEDC, #517AED)</td> |
| 49 | + <td> |
| 50 | + <StaticImageDownload path="/img/brand/logo-primary.png" height="130" alt="logo-primary" /> |
| 51 | + </td> |
| 52 | + <td>Предпочтительно в большинстве случаев</td> |
| 53 | + </tr> |
| 54 | + <tr> |
| 55 | + <td style={{ color: "#FFF", background: "#3193FF" }}>flat <br/> (#3193FF)</td> |
| 56 | + <td> |
| 57 | + <StaticImageDownload path="/img/brand/logo-flat.png" height="130" alt="logo-flat" /> |
| 58 | + </td> |
| 59 | + <td>Для одноцветного контекста</td> |
| 60 | + </tr> |
| 61 | + <tr> |
| 62 | + <td style={{ color: "#000", background: "#FFF" }}>monochrome <br /> (#FFF)</td> |
| 63 | + <td style={{ color: "#000", background: "#242526" }}> |
| 64 | + <StaticImageDownload path="/img/brand/logo-monochrome.png" height="130" alt="logo-monochrome" /> |
| 65 | + </td> |
| 66 | + <td>Для черно-белого контекста</td> |
| 67 | + </tr> |
| 68 | + <tr> |
| 69 | + <td style={{ color: "#FFF", background: "#3193FF" }}>square <br/> (#3193FF)</td> |
| 70 | + <td><StaticImageDownload path="/img/brand/logo-square.png" height="130" alt="logo-square" /></td> |
| 71 | + <td>Для квадратных размеров</td> |
| 72 | + </tr> |
| 73 | +</table> |
| 74 | + |
| 75 | +## Баннеры & Схемы \{#banners--schemes} |
| 76 | + |
| 77 | +<StaticImageDownload path="/img/brand/banner-primary.jpg" height="256" alt="banner-primary" /> |
| 78 | +<StaticImageDownload path="/img/brand/banner-monochrome.jpg" height="256" alt="banner-monochrome" /> |
| 79 | + |
| 80 | +## Social Preview |
| 81 | + |
| 82 | +Работа в процессе... |
| 83 | + |
| 84 | +## Шаблон для презентаций \{#presentation-template} |
| 85 | + |
| 86 | +Работа в процессе... |
| 87 | + |
| 88 | +## См. также \{#see-also} |
| 89 | + |
| 90 | +- [Обсуждение (github)](https://github.com/feature-sliced/documentation/discussions/399) |
| 91 | +- [История ребрендинга с референсами (figma)](https://www.figma.com/file/RPphccpoeasVB0lMpZwPVR/FSD-Brand?node-id=0%3A1) |
0 commit comments