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

В этой статье мы расскажем, что такое UI KIT, для чего он нужен, и как он сэкономит время и деньги.

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

Что такое UI KIT?

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

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

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, если кнопку или поле можно отрисовать и запрограммировать достаточно быстро?

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

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

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

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

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

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

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

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

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

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

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