Как сделать кита в сообщении
UI-kit — что это простыми словами и как его сделать
UI-kit — это готовый набор элементов пользовательского интерфейса, который предназначен для того, чтобы ускорить создание дизайна, сделать его более структурным и упростить его последующую разработку. В этой статье я подробно расскажу вам про UI-kit: что это, как расшифровывается, как сделать UI-kit для сайта в Figma, как использовать его в дизайне и чем UI-kit отличается от дизайн-системы.
UI-kit — что это простыми словами
Для начинающих дизайнеров слово UI-kit, может вызвать массу вопросов. Например, почему именно kit, а не delphin 😊 и что значит UI? Давайте по порядку.
Во-первых, UI — это аббревиатура от словосочетания «User Interface», что в переводе с англ. означает «Пользовательский Интерфейс».
Во-вторых, слово «kit» в переводе с англ. означает «комплект, набор», а не морское млекопитающее как многие могут подумать 😊
Таким образом, соединив оба слово, у нас получится UI-kit — готовый набор элементов пользовательского интерфейса. Осталось разобраться, что означает слово «элементы».
Любой пользовательский интерфейс состоит из определённых элементов:
Все или часть из этих элементов присутствуют на любом сайте, сервисе или в мобильном приложении. В зависимости от типа сайта или приложения, в UI-kit включаются все необходимые элементы, из которых в итоге будет формироваться конечный пользовательский интерфейс конкретного проекта.
Какие задачи решает UI-kit в дизайне
В каждой отрасли, особенно в IT-сфере, стремятся к тому, чтобы избавиться от рутинной работы и оптимизировать рабочие процессы. Именно для этих целей и был придуман UI-kit.
1 — Структурирование работы над дизайном
При проектировании дизайна с использованием UI-kit, все ключевые элементы интерфейса собраны в одном месте, а не разбросаны по всем макетам. Таким образом дизайнеру намного проще использовать необходимые элементы в дизайне
2 — Создание дизайна в едином стиле
Используя UI-kit, вы можете легко стандартизировать свой дизайн и проектировать его в единой стилистике, при этом сохраняя логику взаимодействия элементов. Это особенно актуально при разработке сложных интерфейсов, в которых каждая последующая страница должна гармонировать с предыдущей.
Помимо этого, UI-kit можно использовать и в других проектах, в которых предполагается похожая стилистика. Например, если вы разрабатываете дизайн нескольких проектов внутри одного продукта. В этом случае, дизайн должен быть стандартизирован во всех проектах и для решения этой задачи прекрасно подойдет UI-kit.
3 — Упрощение командной работы
Если над проектом работает несколько дизайнеров и разработчиков, то UI-kit позволит решить проблему недоговоренностей. Создав UI-kit, каждый член команды будет знать как должен выглядеть тот или иной элемент и каким образом он должен себя вести в интерфейсе.
4 — Экономия времени на проектировании дизайна
Используя UI-kit, вы значительно экономите себе время на разработке дизайна и избавляете себя от рутинной работы. Вам не нужно каждый раз рисовать новый элемент дизайна с нуля, потому что у вас уже есть готовый компонент в UI-kit. Можно просто брать и вставлять в нужное место.
5 — Помощь веб-разработчикам
С помощью UI-kit, веб-разработчик может легко настроить будущую стилистику сайта, тем самым сэкономив себе немного времени на разработку. Помимо этого, веб-разработчик может легко скачивать из UI-kit нужные ему иконки или иллюстрации, вместо того чтобы рыскать по всем макетам и выискивать нужные элементы.
Что общего между UI-kit и походом в магазин
Я люблю объяснять сложные вещи простым и понятным языком. Поэтому для лучшего понимания давайте сравним UI-kit с обычным походом в магазин.
Каждый из нас ходит в магазин за покупками. И у каждого из нас есть свой любимый гипермаркет, в котором мы знаем где какой продукт лежит. Заходя в него, мы сразу идем в нужные нам отделы, берем все необходимое и оплачиваем покупку.
Таким образом, поход в магазин занимает у нас минимум времени. А теперь представьте, что каждый раз вам нужно ходить за продуктами в новый магазин. Там вы совершенно не знаете где и что лежит, поэтому вынуждены тратить время на поиски.
Тоже самое и с UI-kit. Если каждый раз при создании дизайна вы рисуете все компоненты с нуля, то на это тратите много времени. А если используете UI-kit, то экономите время на рутинной работе и оптимизируете свой рабочий процесс.
Что входит в UI-kit
В начале статьи я упомянул некоторые элементы, которые должны входить в UI-kit, но для наглядности давайте более подробно разберем каждый из них.
Каждый элемент UI-kit должен быть выполнен в виде компонента или стиля, чтобы в дальнейшем можно было легко вносить изменения в дизайн.
Навигация
В больших проектах навигация выполнена в виде отдельной панели (горизонтальной или вертикальной), которая занимает свое строго отведенное место.
В мобильных приложениях, навигация выполнена в виде меню-гамбургера или закрепленной в нижней части панели с иконками и текстом.
В проектах попроще, например в корпоративных сайтах или лэндингах, навигация более простая и чаще всего состоит из обычных текстовых ссылок.
Для навигации отрисовываются следующие состояния:
Навигация заносится в UI-kit отдельным блоком и потом переиспользуется на всех страницах проекта.
Текстовые поля
Это те элементы дизайна, с которыми пользователь взаимодействует по средствам ввода в них текста или выбора необходимых пунктов.
В UI-kit заносятся все возможные состояния текстовых полей, чтобы разработчик не гадал, как они должны себя вести при взаимодействии с ними в интерфейсе.
Обычно для текстовых полей рисуют 7 состояний:
Формы
Формы состоят из текстовых полей, о которых мы говорили выше. Наиболее популярными являются формы регистрации и подписки, оформления заказа и формы обратной связи.
Формам нужно уделять особое внимание, потому что они являются конверсионными элементами. Чем лучше они спроектированы, тем проще пользователю взаимодействовать с системой.
В UI-kit они заносятся готовыми блоками для дальнейшего удобного использования в других частях дизайна.
Кнопки
Кнопки используются во всех интерфейсах без исключения. Именно поэтому их обязательно стоит заносить в UI-kit.
Для кнопок рисуют минимум 3 состояния:
Некоторые прописывают еще состояние при нажатии, но это не обязательно.
Карточки
Под карточками подразумевается определенная совокупность элементов, которые создают один независимый компонент. Например, карточки товаров в интернет-магазинах.
Иконки
Все иконки, которые используются в дизайне, помещаются в UI-kit, чтобы их было просто и легко найти для повторного использования. Помимо этого, когда иконки находятся в UI-kite, их можно быстро выделить и пометить все сразу для экспорта.
UI-элементы
К UI-элементам относятся различного рода диалоговые окна, диаграммы, тултипы, всплывающие подсказки, снэкбары, контролы и так далее. То есть все те элементы дизайна, которые не принадлежат остальным группам.
Цвета и шрифты
Все цвета и шрифты, которые используются в дизайне, должны быть помещены в UI-kit для наглядного представления веб-разработчикам. Это упростит им дальнейшую разработку и поможет заранее прописать все необходимые стили для проекта.
Когда нужно создавать UI-kit
Ответ прост — всегда! Даже если вы разрабатываете дизайн для простенького лэндинга. Всегда помещайте в UI-kit основные элементы дизайна (цвета, шрифты, кнопки, текстовые поля, иконки и так далее). Приучайте себя к порядку и структурному подходу к дизайну. Это поможет вам в дальнейших работах над более крупными проектами.
Исключение — если вы создаете проекты «под ключ» (дизайн + верстка). В этом случае вы можете обходиться без UI-kit, потому что и так знаете как должен выглядеть конечный сайт и как должны вести себя UI элементы в нем.
Как сделать UI-kit для сайта в Figma
Для наглядности давайте я покажу, как сделать UI-kit для простенького сайта в графическом редакторе Figma.
Первым делом создаем новый документ и рисуем в нем 2 фрейма: один — под будущий сайт (назовем его Main), а второй — для UI-kita с соответствующим названием.
Во фрейме Main напишем заголовок «Мой первый UI-kit» и подзаголовок «В этом уроке я научусь создавать UI-kit».
Далее настроим параметры текста (цвет и размер) и занесем их в UI-kit, создав из них стили.
Затем нарисуем текстовое поле и кнопку в UI-kit и сформируем из них компоненты.
Отрисуем несколько состояний для текстового поля (по умолчанию, в фокусе, ошибка) и для кнопки (по умолчанию, при наведении, неактивна). Каждое новое состояние — новый компонент.
Далее из этих элементов создадим в макете небольшую форму из 2 полей и кнопки.
Таким образом мы создали небольшой сайт и простейший UI-kit для него. Если мы будем дальше разрабатывать дизайн, то уже будем опираться на имеющийся UI-kit, чтобы стиль сайта был одинаковый.
В процессе работы, вы можете корректировать UI-kit, но главное, чтобы все изменения применялись сразу во всех макетах. Для этого важно создавать из элементов компоненты, а в самих макетах использовать их дочерние копии.
Бесплатный UI-kit для скачивания
Если вы создаете дизайн под заказ, то предпочтительнее все же создавать свои UI киты под каждый конкретный проект.
Что такое гайдлайны в дизайне и чем они отличаются от UI-kit
Гайдлайн — это подробная документация того, как должен выглядеть дизайн и как должны взаимодействовать элементы друг с другом. По-другому их еще называют дизайн системами. Существует 2 самые распространенные дизайн-системы:
Отличие гайдлайнов от UI-kit заключается в том, что гайдлайн — это документация (все прописано текстом и показаны примеры как должно выглядеть), а UI-kit — это готовый набор элементов, которые можно брать и использовать в своих проектах.
У гайдлайнов Material и HIG есть свои UI-киты, которые составлены согласно документации.
Заключение
В этой статье я подробно рассказал вам про UI-kit: что это, как расшифровывается название, как сделать UI-kit для сайта в Figma, как использовать его в дизайне и чем UI-kit отличается от дизайн-системы. Надеюсь, статья была для вас полезной, и вы нашли все ответы на свои вопросы.
Что такое маркетинг-кит и руководство по его созданию с примерами
Всем привет! Сегодня я решила затронуть тему, которая волнует копирайтеров, маркетологов, владельцев бизнеса в равной степени. Заинтригованы? Тогда давайте познакомимся поближе с этим волшебным инструментом.
Маркетинг-кит – это бумажная или электронная презентация товара/услуги. Он рассказывает об эффективности товара и показывает его преимущества, заменяя продавца-консультанта. Он считается продающим буклетом компании, потому что информации в нем достаточно, чтобы принять решение о покупке. Если хотите узнать, что это такое подробнее, и как сделать, тогда читайте дальше.
Почему успешные люди пользуются маркетинг-китом
Основная цель маркетинг-кита – подтолкнуть к сотрудничеству или покупке. Важно дать понять, что совместная работа выгодна не только вам, но и читателю.
Допустим, бизнесмен ищет застройщика для аэропорта. Фирм, готовых взяться за проект, набирается сотня. Устраивается тендер, где каждая строительная организация показывает свой маркетинг-кит, оффер и т. д.
Близкий фрилансеру пример. Вы сделали мобильное приложение или рисуете комикс на заказ. Конкуренция большая, поэтому надо выделиться. Конечно, нужно обязательно придумать уникальное торговое предложение, собрать портфолио, но ведь ради большой прибыли надо все автоматизировать? Продающий буклет составляется один раз. Потом его надо просто показывать потенциальному клиенту.
Это не типичное и скучное перечисление характеристик, а убеждающий инструмент продаж.
Виды маркетинг-кита и их различия
От цели и презентуемого продукта зависит тип маркетинг-кита. Например, вы хотите продать услугу по дизайну и ремонту жилых помещений ресторанам, салонам красоты. Помимо этого, ваша компания занимается строительством и сносом старых зданий. Согласитесь, владельцу ресторана нужно только красивое оформление, а не демонтаж.
В этом случае маркетинг-кит лучше сделать под услугу, подходящую конкретной целевой аудитории.
Для фирмы
Когда речь зайдет о сотрудничестве или тендере, компанию нужно представить целиком. Представить в лучшем свете ваш бизнес деловым партнерам сможет комплексный маркетинг-кит.
Оставьте буклет деловому партнеру. Изучение информации в спокойной обстановке поможет принять решение в вашу пользу.
Для услуг
Сделайте маркетинг-кит под каждую услугу. Вы сможете сфокусировать внимание целевой аудитории на подходящем предложении.
Стоит придерживаться следующей структуры:
Здесь получается меньше листов, поэтому его дочитывают до конца чаще.
Для товара
Оптовые закупки, дорогие товары достойны отдельной “визитной карточки”. Она будет продавать, даже когда вы спите или в отпуске.
Что входит в маркетинг-кит товара:
Рассылайте буклет всем возможным покупателям. Даже если они пока пользуются другим брендом или ищут что-то подходящее, ваше предложение может спровоцировать покупку в будущем. Людям лень что-то искать. Они обращают внимание на готовые решения.
Для мероприятия
Мероприятию нужно посвятить отдельный каталог. Он задаст мотивацию читателю. Станет понятно, зачем, куда идти, и кто там будет. Неважно, проводите вы его регулярно или разово.
Что надо написать в брошюре:
Чем-то это похоже на программку, которую раздают в театре. Гость может пользоваться ею как путеводителем.
Для личности
Знаменитость, фрилансер, блогер. Все эти люди хотят одного – продать себя публике. Можно разработать медиа-кит, но это сухое описание. А вот маркетинг-кит – это оффер, повышающий узнаваемость, мотивирующий на целевые действия: покупку курсов, донаты и т. д.
Структура, которой стоит придерживаться:
Можно добавить еще несколько разделов при необходимости. Инфобизнесмену неплохо будет указать курсы с выгодой для каждого сегмента целевой аудитории. А ведущий сможет привлечь больше клиентов, когда добавит фото с мероприятий.
Для франшизы
Франшиза – право пользоваться маркой, технологиями в своем бизнесе. Цена продукта здесь высока, поэтому в ход нужно пускать мощный маркетинговый прием.
Разделы эффективного маркетинг-кита франшизы:
Золотое правило маркетинга: “Чем дороже продукт, тем детальнее нужно описать его”.
Для программы
Программа может быть как товаром, так и услугой, поэтому для разработки маркетинг-кита используется другая структура:
Структуру можно менять в зависимости от типа программы. Например, у браузеров не бывает акций, так как они бесплатные или условно-бесплатные.
Как сделать маркетинг-кит самому
У вас уже есть что продавать, осталось только красиво упаковать. Прежде чем браться за создание буклета, нужно сделать анализ ЦА, узнать, как привлечь клиентов. Важно ответить на главные вопросы:
Неважно, скачаете вы шаблон, воспользуетесь онлайн-конструктором или создадите с нуля. Вы рискуете потратить время зря без анализа.
Планирование
Большинство не учитывает при создании маркетинг-кита то, когда его будут читать. Дело в том, что от времени чтения зависит тип возражения читателя. Поэтому нужно представить, когда примерно в руках потенциального клиента окажется буклет, и разрушить любые сомнения.
В интернете маркетинг-кит распространяется с помощью:
На встрече каталог передается в руки клиента в виде:
Зачем человеку нужен ваш каталог, и что он должен сделать после ознакомления с ним. Вы определяетесь с конечной целью и строите информационную цепочку, мотивирующую на целевое действие. Какое конкретно – решать вам. Главное, зацепить читателя.
Для курсов по похудению аппетитным призывом будет “Запишись сейчас и получи 3 индивидуальных занятия с тренером онлайн”.
Примеры идеальных призывов:
Небольшая подсказка. Люди обожают все персональное, бесплатное, быстрое и понятное. Пользуйтесь этим в своем призыве к действию.
Не рубите сгоряча. Дайте отлежаться вашей идее несколько дней. Возможно, что-то покажется вам навязчивым или бесполезным. Не бойтесь менять. Спешка ни к чему. От качества призыва к действию зависит количество клиентов.
Структура с примерами
До того момента, как возьметесь за создание маркетинг-кита, подумайте над содержанием. Я подготовила примерную структуру с примерами. Можете что-то убрать или добавить, главное, у вас будет база.
Титульный лист – первое, с чем встречаются глаза читателя. Судят по обложке. Если цветовая гамма покажется неприятной, а слова неубедительными, ваш маркетинг-кит постигнет судьба мусорного ведра.
Что добавить на обложку:
Знакомство с компанией. Кратко опишите вашу деятельность и преимущества в цифрах.
Выгоды от использования вашего товара/услуги. Пишите уникально и кратко. Следите за тем, чтобы на страницах текст не сливался, иначе будет невозможно читать.
Чтобы текст действительно продавал, воспользуйтесь формулой: проблема клиента + решение + доказательства (характеристики товара, достижения) = продающий маркетинг-кит.
У нас покупают. Напишите об известных фирмах, лицах, с которыми сотрудничали. Вставьте логотипы, фотографии. Клиент начнет доверять на автомате, рассказывать о вас знакомым: “Это компания сотрудничает аж со Сбербанком”.
Наши достижения. Похвастайтесь, какие награды получали.
Презентация товаров. Добавьте фото продукции. Они должны быть яркими, качественными и вызывающими эмоции. Не забудьте про описание каждой позиции.
Чем мы лучше конкурентов. Посвятите страницу главному преимуществу, которое ищет ваша целевая аудитория в этом типе продуктов/услуг.
Как мы работаем. Разворот дает представление клиенту о результате, как будто он его уже получил. Соблюдайте четкость, краткость, лаконичность изложения.
Контакты и подведение итогов. Если у вас не слишком много условий и акций, то эту информацию можно добавить сюда. Человеческое внимание рассеянно, поэтому лучше еще раз напомнить о достоинствах продукции/услуг.
Последняя страница. Что здесь разместить:
Какие программы использовать
Освойте Photoshop, если собираетесь распечатывать маркетинг-кит. Там вы сможете грамотно сделать фон, разместить текст и сверстать.
Посмотрите также видеоурок, который научит делать маркетинг-кит в Photoshop.
PowerPoint пригодится тем, кто собирается делать презентацию. В нем вы будете собирать из картинок единый каталог.
Онлайн-редактор
Онлайн-конструктора, предлагающего уникальное решение, не существует. Нам предлагают скачать шаблон и добавить свою информацию. Так вы справитесь со страхом чистого листа и неизвестности. Но тем, кто мечтает о масштабных результатах, я посоветую три пути:
Как редактировать шаблон вы узнаете из этого видео.
6 ошибок, убивающих маркетинг-кит
Неопытные специалисты или бизнесмены, решившие сэкономить, могут сделать каталог антипродающим. И за этим кроется всего 6 маленьких, но важных деталей:
Пробегайтесь по списку каждый раз, когда беретесь за маркетинг-кит, чтобы сделать его идеальным.
Где заказать
Вы можете найти специалиста на бирже фриланса. Он возьмет с вас меньше, чем агентство. За 15 000 – 25 000 рублей вы получите готовый продающий каталог.
Цена у студий начинается от 35 000 рублей, потому что им нужно выплачивать зарплату штатным сотрудникам, покрывать ежемесячные расходы.
Как долго делается маркетинг-кит
Все зависит от количества страниц маркетинг-кита, информации. Брошюру до 15 страниц с краткими описаниями реально сделать за 6 – 8 дней. Если планируется масштабная презентация, которая с трудом помещается на 20 страницах, то тут придется подождать 2 – 3 недели.
Заключение
Если хотите выйти на хорошую прибыль, без маркетинг-кита не обойтись. Копирайтерам и маркетологам тоже советую научиться его делать, чтобы повысить ценник.
Конечно, придется обновлять каталог по мере выхода нового продукта, изменения дизайна, но это стоит того.
Дорогие копирайтеры, а вы будете добавлять маркетинг-кит в свой набор услуг? Предприниматели, а вы готовы потратиться на качественную брошюру или сделаете все сами? Пишите комментарии. Мне очень важно ваше мнение.
Подписывайтесь на блог, чтобы узнать еще много нового и полезного.