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

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

Что такое UI KIT?

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

/users_files/KOTELOV/Group 493.png

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

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

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

/users_files/KOTELOV/загруженное (1).png

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

/users_files/KOTELOV/код кнопки.jpg

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

/users_files/KOTELOV/загруженное.png

Так выглядит код кнопки здорового человека (в редакторе нет функции ввода кода, поэтому как-то так): 

// 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, "type" | "onClick">;

export type NativeButtonProps = {

/**

* Выбрать тип кнопки

*/

type?: ButtonHTMLType;

} & BaseButtonProps &

Omit, "type" | "onClick">;

export type ButtonProps = Partial;

const GoodButton: React.FC = ({

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 (

{...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}

);

};

// Exports

export default GoodButton;

import * as React from "react";

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

"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 )

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