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

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

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

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

kotelov.com

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

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

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

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

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

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

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

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

Вот так выглядит код кнопки на 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;

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

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

// 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

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

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

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

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

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

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

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

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

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

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

Что такое UI KIT?

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

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

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

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

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

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

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

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

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