Дизайн и разработка. Сайты и мобильные приложения

Сайты и лендинги и мобильные приложения

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

Перед тем как делать сайт, нужно понять, зачем он нужен, но об этом мы поговорим чуть позже. Сначала давай посмотрим, какие виды сайтов вообще бывают. 

Сайт-визитка

Одна или несколько страниц о компании, её товарах и услугах. Минимум функций и максимум эффективности. Вот пример одностраничного сайта-визитки Evoulve и сайта-визитки с основными разделами от Black Frame. 

Корпоративный сайт

Как правило, это сайт крупной компании, на котором есть и история создания, и новости, и вакансии, и много чего ещё. Информации много, и она вся поделена по разделам. Нужен такой сайт как для улучшения имиджа, так и для привлечения клиентов. Хороший пример: сайт Vodafone.

Интернет-магазин

Самый популярный метод продаж в интернете. Виртуальная витрина с товарами и информацией о них. Легко выбрать, оплатить и заказать самому, не обращаясь в компанию напрямую. Идеальный формат взаимодействия между продавцом и покупателем. 

Интернет-магазин может быть маркетплейсом и продавать товары от разных производителей, как ASOS. Или — монобрендовым, то есть продавать товары одного бренда, как Origins.

Блог

Это онлайн-журнал, где пользователи узнают последние новости, читают статьи, разбираются в интересных им темах. Блог может быть личным — просто человек пишет о своей жизни. А может быть корпоративным. Вот отличный пример журнала банка Тинькофф, который рассказывает о деньгах и финансовой сфере вообще.

Платформа

Сеть, в которой разные группы людей обмениваются полезной информацией. Известная онлайн-школа Skyeng связывает преподавателей английского с учениками. Другой сервис, Яндекс.Практикум, учит делать сайты, управлять командой, анализировать данные и другим полезным практическим навыкам.

Социальная сеть

Сайт, предназначенный для построения социальных взаимоотношений между людьми. Может быть нацелен на широкую аудиторию, как ВК, а может быть узконаправленным. Вот, например, соцсеть для тех, кто собирает Кубик Рубика на скорость.

Если большой сайт пока не нужен или на него просто не хватает денег, делайте одностраничный лендинг.

Лендинг — это landing page, то есть посадочная или целевая страница. Её главная цель — это получение контакта клиента. В число других задач входит рассказ о продукте или услуге, конвертация посетителя в покупателя или клиента.

Лендинги различаются по форме и по содержанию. По форме они могут быть автономными (и иметь отдельный url) или быть частью существующего сайта. По содержанию лендинги можно поделить на следующие группы:

Промостраницы

Создаются для промокампании конкретного продукта или услуги. Посмотрите, как просто, но привлекательно выглядит лендинг новой дебетовой карты. Или сервис каршеринга самокатов. Или — симпатичный и доступный сервис для диабетиков.

Подписные лендинги

Создаются для сбора информации о целевой аудитории товара или услуги. Вот, например, лендинг, где можно оставить свой контакт и получить полезную информацию бесплатно.

«Вирусные» лендинги

Не содержат открытой рекламы продукта, но могут обладать логотипом или слоганом компании. «Вирусный» лендинг маскируется под статью, видеоролик, или игру, воспринимается как развлечение, а потому активно распространяется пользователями через соцсети. Вот пример лендинга с игрой Тайный Санта. Перед Новым годом пользователи сами охотно рассылают его друзьям.

Большинство лендингов создаётся по одной и той же структуре. Вот её стандартный пример:

• эффектный главный баннер;
• вводный рассказ о продукте или услуге;
• перечисление преимуществ;
• блок, призывающий клиента к действию;
• форма для сбора контактов.

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

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

1. Заголовок должен интриговать («Какой цвет будет самым модным в новом сезоне?»)
2. Заголовок должен содержать выгоду («Аккумулятор, который не сядет всю неделю»)
3. Заголовок должен быть конкретным («Повысьте эффективность своей кредитки на 25%»)
4. Заголовок должен вызывать эмоции («Вы наконец решите проблему надоевших чёрных точек»)
5. Заголовок может использовать данные пользователя с помощью utm-меток («Ремонт смартфонов рядом с метро Маяковская»)

У заголовков для лендингов даже есть ряд рабочих моделей. Например, модель «Выгода + выгода», которая отражает максимум преимуществ продукта. Или модель «Как с минимальными усилиями получить максимальные результаты», суть которой понятна из названия. Хотя фантазия маркетологов ничем не ограничена, такие приёмы делают их работу легче. Вот хорошая статья, которая поможет сделать лендинг эффективным.

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

По способу разработки приложения делятся на нативные, мобильные веб-приложения и гибридные. Первые легко исполняют свои функции и без интернета, вторые представляют из себя адаптированные под новый формат сайты, а третьи объединяют достоинства и недостатки первых двух.

По функциональности приложения можно разделить на множество разных видов: 

• игры (даже игру, к слову, можно использовать для нативного развития собственного бизнеса);
• корпоративные приложения (яркий пример приложения B2B, упрощающего работу в компании); 
• приложения для получения информации (газета может публиковать в них статьи, а любой крупный магазин — собственные новости); 
• интернет-службы (доставка, такси, клининг, билеты — и многие другие); 
• интернет-магазины (приложения магазинов уже заменяют нам их сайты);
• социальные сети (не только всем известные, но и более узконаправленные).

Есть и специальные приложения, функциональность которых строго ограничена, но почти уникальна — например, всем известный Shazam.

Что такое UX/UI

С сайтом, лендингом и мобильным приложением тесно связаны такие понятия, как UX/UI. 

UX — это User Experience (опыт пользователя). Это то, какой опыт/впечатление получает пользователь от работы с интерфейсом. Другими словами, как легко ему достичь цели (перейти в нужный раздел, заказать товар и так далее).

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

UI — это User Interface (пользовательский интерфейс). Это то, как выглядит интерфейс, как в нём визуально удобно расположены текст, кнопки и другие элементы.

В целом UX/UI дизайн — это про проектирование любых пользовательских интерфейсов, в которых удобство использования так же важно, как и внешний вид.

Разница между UX и UI в том, что UX-дизайнер планирует то, как пользователь будет взаимодействовать с интерфейсом и какие шаги нужно пройти, чтобы сделать что-то. А UI-дизайнер придумывает, как каждый из этих шагов будет выглядеть.

Так что дизайн интерфейсов — это не только про красоту, но и про структурирование и логику. Дизайн, разработанный по принципу user-friendly (ориентированный на пользователя) повышает конверсию и позитивно влияет на поведенческие факторы. Благодаря ему пользователю будет приятно пользоваться любым сайтом, лендингом или приложением. Давайте научимся, как их правильно разрабатывать.

Три этапа разработки

Глобально процесс разработки сайта, лендинга и мобильного приложения одинаков и состоит из трёх этапов.

Этап 1. Разработка функционала

На первом этапе создатели проекта придумывают, в чём будет заключаться его функциональность. Другими словами, как он сможет помочь пользователю и зачем он вообще нужен. Это будет сайт, рассказывающий о деятельности компании? Лендинг, анонсирующий новую услугу? Или мобильное приложение, которым получится заменить скидочную карту магазина? Для ответов на эти вопросы нужно изучить целевую аудиторию и понять, как транслировать ей своё УТП (уникальное торговое предложение).

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

Определившись со своими целями, создавайте user-flow — это блок-схема для работы вашего сайта или приложения. Самая простая состоит из прямоугольников и ромбов: в прямоугольниках изображены экраны, а в ромбах — условия. Например, для приложения — кликнуть по кнопке, сделать свайп вверх, кликнуть по экрану два раза. User-flow полезны, потому что дают наглядное представление о том, как будет работать продукт.

Этап 2. Проектирование

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

Здесь уже можно делать первые наброски. Где будут располагаться изображения, ярлыки, кнопки и всё остальное. Например, для отрисовки эскизов для приложения используйте удобные печатные шаблоны из UI Stencils, а после — приложение Pop. В нём можно сделать снимок всех своих рисунков и получить их кликабельный прототип.

Также во время проектирования используйте Miro, который подходит для брейнштормов и обсуждений. И Adobe XD, он поможет при проектировании интерфейсов.  

Этап 3. Дизайн

Это финальный этап — упаковка проекта в конечный продукт. У нас уже есть понимание, какие разделы будут и как пользователь будет взаимодействовать с ними. Теперь нужно придумать, как всё это будет выглядеть и как дизайн поможет в достижении поставленных целей.

Рекомендуем вдохновляться локальным и международным опытом в смежной сфере бизнеса. Много потрясающих примеров можно найти на Pinterest, Behance, Awwwards и Dribbble. Также не стесняйся изучать сайты конкурентов, чтобы узнать, как и что они предлагают, какие разделы используют, чем цепляют пользователя.

Такие программы, как Affinity Designer и Sketch, будут полезны в разработке. Также на этапе дизайна важно учитывать типографику, знать основы композиции, помнить про цветовые палитры. Для лучшего подбора цветов и их сочетаний используйте Mobile Patterns, Pttrns и Color Hunt. Дизайн создавайте в популярнейшей кросс-платформенной Figma.

Как сделать сайт или лендинг

Вариантов создания сайта и лендинга есть несколько. Простой лендинг можно сделать самостоятельно на конструкторе сайтов — например, на Tilda. Выбирайте из готовых страниц под разные цели или собирайте собственную из множества типовых блоков. Для более многостраничного сайта лучше использовать WordPress. 

Если изучишь языки программирования (HTML, CSS, JS, PHP), сможешь написать сайт с нуля и самостоятельно. А можно обратиться за помощью к профессионалу-фрилансеру (это более бюджетный, но и более рискованный вариант в плане сроков и качества) или у веб-студии (безопаснее, но ощутимо дороже).

Для увеличения конверсии лендинга можно проводить A/B‑тестирования. Это метод сравнения двух разных версий лендинга с одной переменной. Их задача — найти дизайн, слоган, УТП с максимальной конверсией. Представим, что мы тестируем разные заголовки. Половине пользователей показываем первый заголовок, другой половине — второй. После измеряем конверсию и выбираем из двух вариантов лучший. Лучше всего тестировать по одному элементу за один раз, чтобы точнее оценить результаты.

Создание сайта и даже лендинга — сложный процесс. Создать мобильное приложение тоже непросто, пусть работать с ним и придётся по-другому.

Как сделать мобильное приложение

Чтобы сделать мобильное приложение для Apple, нужно использовать Swift — язык программирования с открытым кодом. Он надёжный, интуитивно понятный и предоставляет свободу для творчества. А ещё он бесплатно доступен для использования разработчиками, преподавателями и студентами по лицензии.

А вот чтобы разработать приложение для Android, нужно выбрать один из нескольких языков программирования. Это может быть Java, Kotlin, C/C++, C# и другие. Посмотри подробное и полезное видео о разработке мобильного приложения. И почитай подборки лучших приложений для вдохновения. Вот для Android, а вот для Apple.