{"id":6757,"title":"\u041c\u043e\u0436\u043d\u043e \u043b\u0438 \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u044c \u043d\u043e\u0432\u0443\u044e \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u00ab\u041a\u043b\u0438\u043f\u043e\u0432\u00bb?","url":"\/redirect?component=advertising&id=6757&url=https:\/\/tjournal.ru\/promo\/437972-go-to-viral&placeBit=1&hash=a1a2bc603a905d29826016ca62137e5c33fa43b7c5c3b9ff986557245a5d7f90","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": 67, "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 комментариев
«Модульбанк» и «Ясно» проведут бесплатный воркшоп о синдроме трудоголика

30 сентября первый банк для предпринимателей «Модульбанк» и сервис психологических консультаций «Ясно» проведут второй совместный воркшоп для предпринимателей. Тема — синдром трудоголика. Эксперты «Ясно» расскажут, как владельцу бизнеса правильно отдыхать и не стыдиться этого.

Daniel Chekalov
БКС перезапускает YouTube-канал

Новые шоу для начинающих и опытных инвесторов, авторами и ведущими которых выступят профессионалы фондового рынка.

Идея линейного города, который за $200 млрд строит Саудовская Аравия: в чём её смысл и почему это уже было в Волгограде Статьи редакции

Концепция, которую применяют саудиты, не нова, её придумали ещё в 19 веке. Однако в мире есть только один крупный город по ней, и он в России.

Планируемый линейный город The Line в регионе Neom Strelcamag
Apple извинилась перед пользователем «Хабра» — он нашёл четыре уязвимости в iOS, но за полгода компания исправила одну Статьи редакции

Компания не выплатила вознаграждение, и пользователь решил опубликовать данные в открытом доступе.

Как "Альфа-Банк" украл мои деньги через своего сотрудника в офисе банка у меня на глазах накануне моего Дня Рождения

Я очень любила «Альфа-Банк» за их креатив. Именно поэтому этот банк так сильно ранил меня и разбил мне сердце. Думаю, окончательно и бесповоротно. И об этом моя препечальная история.

Фонд «Подари жизнь» совместно с компанией LegalPics запустили сервис по юридической поддержке для родителей

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

Яндекс представил обновленный интерфейс для запуска рекламы мобильных приложений

Новый интерфейс позволит завести рекламную кампанию приложений в несколько шагов. Для этого не потребуется специальных знаний и помощь специалистов. Рекламодателю нужно лишь добавить ссылку на приложение, креативы, указать географию показов, выбрать стратегию и бюджет.

5 руководителей Skillbox вошли в рейтинг ТОП-1000 лучших менеджеров России

ИД «Коммерсантъ» и Ассоциация менеджеров опубликовали результаты ежегодного рейтинга «ТОП-1000 российских менеджеров». В рейтинг вошли сразу пять топ-менеджеров Skillbox:

Amazon разработала домашнего робота Astro для переноски вещей, видеонаблюдения, воспроизведения музыки и другого Статьи редакции

Стоит $999,99.

«Яндекс» переименовал «Акрополь» в «Яндекс Банк» Статьи редакции

Компания закрыла сделку по покупке банка за 1,1 млрд рублей в июле 2021 года.

Суд с «Тинькофф» относительно масштабных «сбоев», приводящих к потере инвесторами своих средств

Всем привет! Меня зовут Валерий, брокерский договор с Тинькофф (дальше буду называть их также «банк», «брокер») № 2057742591. В результате масштабных технических сбоев в работе Тинькофф Инвестиции 24 мая 2021 г., которые, между прочим, самим Банком были признаны, я потерял 70 000 долларов (!) при торговле акциями SPCE. 24-25 мая 2021 в результате…

null