{"id":4529,"title":"\u041c\u043e\u0441\u043a\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0430 \u00ab\u0430\u043d\u0442\u0438\u0430\u043a\u0441\u0435\u043b\u0435\u0440\u0430\u0442\u043e\u0440\u00bb","url":"\/redirect?component=advertising&id=4529&url=https:\/\/vc.ru\/promo\/266261-starthub-moscow&hash=abf1b85a7457cef1e33a57d8be96591519abffda011da33805e54ec9419f65ab","isPaidAndBannersEnabled":false}
Дизайн
kotelov.com

Для чего компании нужен UI KIT? (Front + Design)

Привет! Я — Влад Савин, и это KOTELOV! В этой статье я расскажу, что такое UI KIT, для чего он нужен, и как он сэкономит время и деньги.

В статье мы подойдем к китам, которые сделаны не только дизайнерами, но также переведены в компоненты фронтенд-разработчиками.

kotelov.com

Что такое UI KIT?

Это единый набор элементов пользовательского интерфейса. Выглядят они примерно так:

kotelov.com

Для чего он нужен?

1. Единый стиль всех проектов

Все ваши информационные системы будут идентичными. Клиенты будут узнавать вашу компанию по одинаковым элементам. Также им будет удобнее работать с каждым вашим новым продуктом, так как им будут знакомы все элементы и их поведение.

Начало проекта всегда подразумевает создание первых базовых элементов ui-kita на основе утвержденного концепта.

Основная причина — это унификация элементов интерфейса, что сокращает и упрощает работу в дальнейшем в сложных проектах, чтобы избежать ошибок в дальнейшем. И помогает скоординировать работу с разработчиками, чтобы получить дизайн единообразным на разных страницах одного проекта.

К счастью для нас прошло времена Photoshop и на рынке появилась для бога избранных Sketch (маководы ликуют), а уж позже Figma. Что в разы упростило работу для дизайнера. Всеми любимые компоненты позволили делать изменения в разы быстрее, буквально в один клик, что позволяет не бегать по всем экранам и не проверять, где там цвет поменялся, а где нет.

Андрей Залетов
Senior UI/UX designer KOTELOV

2. Экономия на разработке

Если нет кита, компании, нанимая подрядчика заполняют бриф, далее подрядчик разрабатывает с нуля дизайн, далее создает компоненты на фреймворках JavaScript (Angular, React, Vue). То есть заказчик каждый раз платит за дизайн и программирование одних и тех же элементов на фронтенде разным подрядчикам, причем элементы получаются у всех разные по дизайну и коду, что не позволяет масштабироваться. В случае с китом вы платите 1 раз.

3. Мгновенный доступ к UI KIT у всей команды

Аналитики, дизайнеры, разработчики имеют доступ к киту по ссылке. Могут самостоятельно ознакомиться со всеми элементами, правилами их использования и создавать прототипы, фронтенд и дизайн.

4. Скорость разработки

При готовом UI KIT вы имеете все элементы, такие как кнопки, поля ввода, таблицы, графики уже задизайнены и переведены в компоненты (на JS). Вы можете собирать системы, не тратя время на дизайн и разработку. Также упрощается прототипирование, если раньше вы составляли прототипы из простых форм, то сейчас можете собирать их из настоящего дизайна.

Почему важно делать UI KIT, если кнопку или поле можно отрисовать и запрограммировать достаточно быстро?

Большинству пользователей кнопка представляется, как всего лишь прямоугольник с текстом посередине:

kotelov.com

Вот так выглядит код кнопки на React:

// Core import * as React from "react"; // Styles import styles from "./BadButton.module.scss"; interface BadButtonProps { children: React.ReactNode; background?: string; color?: string; } const BadButton: React.FC<BadButtonProps> = (props) => ( <button className={styles.button} style={{ background: props.background || "#5199FF", color: props.color || "white" }} {...props} > {props.children} </button> ); // Exports export default BadButton;

А вот так выглядит удобная кнопка, которая делает взаимодействие с системой удобной:

kotelov.com

Так выглядит код кнопки здорового человека:

// Core import * as React from "react"; import classNames from "classnames"; // Utils import { capitalize } from "./utils/string"; // Styles import styles from "./GoodButton.module.scss"; const ButtonVariantTypes = ["filled", "outlined", "link"] as const; const ButtonColorTypes = ["primary", "secondary"] as const; const ButtonSizeTypes = ["small", "medium", "large"] as const; const ButtonHTMLTypes = ["submit", "button", "reset"] as const; export type ButtonVariantType = typeof ButtonVariantTypes[number]; export type ButtonColorType = typeof ButtonColorTypes[number]; export type ButtonSizeType = typeof ButtonSizeTypes[number]; export type ButtonHTMLType = typeof ButtonHTMLTypes[number]; export interface BaseButtonProps { /** * Передать дочерний элемент для кнопки */ children: React.ReactNode; /** * Определить класс для кнопки */ className?: string; /** * Выбрать вариацию отображения кнопки */ variant?: ButtonVariantType; /** * Выбрать цвет кнопки */ color?: ButtonColorType; /** * Выбрать размер кнопки */ size?: ButtonSizeType; /** * Определить размер кнопки во всю ширину от родительского контейнера */ fullWidth?: boolean; /** * Отключить кнопку */ disabled?: boolean; /** * Обработчик события на клик по мыши для кнопки */ onClick?: () => void; } export type AnchorButtonProps = { /** * Передать url и определить кнопку как ссылку */ href: string; } & BaseButtonProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "type" | "onClick">; export type NativeButtonProps = { /** * Выбрать тип кнопки */ type?: ButtonHTMLType; } & BaseButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">; export type ButtonProps = Partial<AnchorButtonProps & NativeButtonProps>; const GoodButton: React.FC<ButtonProps> = ({ children, className, variant = "filled", color = "primary", size = "small", type = "button", fullWidth, disabled, onClick, href, ...rest }) => { const Component = href ? "a" : "button"; let buttonProps; if (Component === "a") { buttonProps = { "aria-disabled": disabled }; } else { buttonProps = { type, disabled }; } return ( <Component {...rest} {...buttonProps} className={classNames( styles.root, styles[variant], styles[size], { [styles[`${variant}Color${capitalize(color)}`]]: color, [styles[`${variant}Size${capitalize(size)}`]]: size, [styles.disabled]: disabled, [styles.fullWidth]: fullWidth }, className )} onClick={onClick} > {children} </Component> ); }; // Exports export default GoodButton;

То есть разработка любого на первый взгляд простого элемента это продолжительная и дорогостоящая работа (если делать его удобным и масштабируемым), поэтому проще один раз отрисовать и запрограммировать каждый элемент и потом использовать его во всех проектах.

UI Kit для разработчика — это набор компонентов, на которых строится UI вашего сервиса. Если простыми словами, то это визуализация каждого из компонентов на разные действия пользователя.

User Interface Kit используется для упрощения, унификации, и комплексного подхода к реализации больших проектов. Он позволяет быстро и качественно создавать более сложные интерфейсы.

Игорь Лысенко
Team lead frontend developer KOTELOV

Можно ли использовать готовый UI KIT?

В интернете множество китов за небольшие деньги, что-то около 15$. Вы безусловно можете их использовать. Но они скорее подойдут для небольших проектов, которые не собираются далеко масштабироваться или же в вашей компании предполагается сделать одну систему, а не строить множество продуктов.

Основные причины для постройки, а не покупки UI KIT

1. Большие компании приводят все системы к единому виду, чтобы сотрудники и пользователи ориентировались легко в любой системе компании;

2. Компаниям необходимо соблюдать фирменный стиль;

3. При покупке UI KIT вам необходимо отталкиваться от технологий заложенных в купленном ките;

4. Купленный кит не может закрыть весь функционал систем, то есть вам необходимо будет дорисовывать его и дорабатывать;

5. Строя ui kit с нуля вы видите полноценно цель разработки. То есть сможете разрабатывать элементы исходя из задачи, делая каждый элемент удобнее.

Требования к разработчику UI KIT:

UI KIT разрабатывается только дизайнером и разработчиком уровня Senior, которые имеют опыт в подобных проектах. Дизайнер и фронтенд-разработчик должен обладать опытом и знаниями для построения сложных систем, так как ui kit будет использоваться около 5 лет всеми командами разработки вашей компании и привлекаемыми подрядчиками для большинства ваших систем.

Ну или обратитесь в KOTELOV )

Сохрани пост в закладках и подписывайся на нас на VC и в instagram, чтобы не пропустить статьи)

{ "author_name": "kotelov.com", "author_type": "self", "tags": [], "comments": 0, "likes": 17, "favorites": 66, "is_advertisement": false, "subsite_label": "design", "id": 187208, "is_wide": true, "is_ugc": true, "date": "Tue, 15 Dec 2020 16:33:13 +0300", "is_special": false }
0
0 комментариев
Популярные
По порядку
Читать все 0 комментариев
Нет смысла тягаться с крупным конкурентом, «вдохновившимся» вашим стартапом? Это не так — рассказываю на личном опыте

Привет, меня зовут Роман Рабочий. Три месяца назад я опубликовал здесь статью про свой стартап — секретаря Машу. А спустя два месяца после запуска Маши вышла копия от одного крупного банка. И вчера эстафету перенял известный сотовый оператор. Рассказываю обо всем по порядку.

«Бросил вызов Nike Air Jordan за мировое господство в кроссовках»: как Канье Уэст шёл к своему миллиарду Статьи редакции

Канье Уэст много лет настаивал на том, что он миллиардер, но Forbes признал за ним этот статус только в апреле 2020 года. В 2021-м журнал оценил состояние 44-летнего рэпера в $1,8 млрд

Канье Уэст Architecturaldigest
Toyota препятствует переходу на электромобили в Конгрессе США и других странах — NYT Статьи редакции

Компания первой запустила производство «гибридов», но с тех пор отстала от конкурентов.

Как (и зачем) мы полностью переделали интернет-банк. Опыт Альфа-Банка
Клиенты «Открытие Брокер» могут получить статус квалифицированного инвестора в личном кабинете и мобильном приложении

«Открытие Брокер» значительно упростил процедуру присвоения статуса квалифицированного инвестора для своих клиентов. Теперь его можно получить в личном кабинете на сайте и мобильном приложении «Открытие Брокер» в несколько кликов. Новый функционал позволит инвесторам не тратить время на поездку в офис для подачи документов и пользоваться всеми…

Как моё сообщество заработало 1,7 млн рублей на VK Donut

Больше шести лет назад Феликс Зинатуллин основал сервис таргетированной рекламы Церебро Таргет и запустил его сообщество ВКонтакте. Теперь там больше 200 тысяч маркетологов и предпринимателей. За год на донатах через VK Donut паблик заработал 1,7 млн рублей. Вот как это вышло.

Феликс Зинатуллин
Очередной баг Тинькова

В пятницу 23.07 начали падать китайские акции, а у меня на тот момент были МОМО и утро началось с -340$. Я решил избавиться от них, дабы не увеличивался минус. Пятница только началась и надо бы исправить это недоразумение. И я полез в TAL Education Group. Сначала заработал 200$, потом 120$, потом ещё 130$. Итого отбил минус, да ещё и заработал…

Вебинар по внедрению цифровых интеллектуальных технологий в рамках Kazan Digital Week – 2021
Duolingo привлекла $521 млн после выхода на биржу с капитализацией $3,7 млрд Статьи редакции

В 2020 году компанию оценили в $2,4 млрд.

Google перестанет пускать в офисы по всему миру сотрудников без прививок от Covid-19 Статьи редакции

Компания перенесла дату выхода сотрудников с удалёнки с 1 сентября на 18 октября из-за вспышки коронавируса.

Исследование рынка PR 2021: больше новых инструментов, усиление и расширение влияния и значимости функции

Агентство Buman Media совместно с hh.ru провели исследование российского рынка коммуникаций. В нем приняли участие более 100 директоров и руководителей направлений по корпоративным коммуникациям, работающих в различных отраслях. Сегодня, в День PR-специалиста, мы подводим итоги года в коммуникационной отрасли.

null