Веб-студия ONE PAGE

Life-кейс | ПРОЕКТ 341 - ПРЕЗЕНТАЦИЯ Union Industrials

Вот мы и закончили с дизайном презентации.
Про структуру, текст и логику писали в прошлом посте, а сейчас про дизайн.

Что интересного было в дизайне.
Ввиду того, что это b2b-сегмент, тем более промышленный сектор, мы не стали уходить в сложные дизайн-решения. А прибегли к стилю СЧЧ - серьезность, четкость, читабельность.

С - серьезность.
Компания достаточно крупная, с 13 филиалами и собственными складами по РФ, квалифицированными узкими специалистами в отрасли. Нужно это показать, причём сделать так, чтобы это считывалось даже при беглом просмотре презентации. Поэтому вместо классического слайда с преимуществами, подсвечиваем их с разных сторон в первых 4-х слайдах.

Есть действительно уникальные преимущества, которые не должны потеряться в общей массе. Например, 13 собственных складов есть далеко не у всех. Или многочисленные офисы и собственные ремонтные центры по РФ. Всё это заслуживает отдельного слайда)

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

Ч - читабельность.
Мало просто написать хороший текст, нужно его еще в дизайне сделать читабельным. Чтобы, не читая, а просто прощелкав презентацию, глаза зацепились за нужные заголовки и важные детали.

Знаем не понаслышке, что есть такие дизайнеры, которые смотрят на текст как на элемент дизайна. Цель - сделать красиво, а считывается этот текст или нет, ему не важно. Мы таких не держим))

Life-кейс | ПРОЕКТ 345 - Лендинг «Что слышно?»

Что слышно об этом проекте?)
Подготовили 4 дизайн-концепта, два забраковали на внутреннем согласовании, а два отправили заказчику.

Про задачу.
По сути задача любого дизайна - хорошо упаковать текст, особенно если он объёмный. Ну и сам текст должен быть интересно написан. Когда мы этого достигаем, то можем смело надеяться, что сайт пролистают и даже дочитают до конца. В данном проекте принципиально важно, чтобы текст был именно прочитан, так как цель образовательная. Напомним, что у нас не продающий лендинг в классическом понимании, а "спецпроект", одна из целей которого просветить человека в области шумоизоляции (в другие цели здесь углубляться не будем).

Про дизайн.
На этот проект очень хорошо ложится стикерно-иллюстрированый стиль, так как с помощью иллюстраций очень хорошо можно сопроводить текст в смысловом направлении, без перегрузки. Фото так не работают. Фото человека может напрячь, вызвать негативные эмоции. Или, наоборот, я могу начать долго всматриваться в красивую девушку, например. То же самое касается и фото объектов, природы и т.п. Например, увидев лес, я могу погрузиться в летние теплые воспоминания. И вот я уже сижу и выбираю тур выходного дня, вместо того, что бы дочитать статью))

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

Иллюстрации - другая история, в них нет глубокого смысла и опасности "улететь" в мыслительный процесс. В нашей памяти же нет воспоминаний например, как мы гуляли по рисованному лесу или давно мечтали жить в нарисованном доме с нарисованной девушкой))) С помощью рисунков мы просто подчеркиваем текст и усиливаем его восприятие.

Логика проста, как и выбор стилистики)

Life-кейс | ПРОЕКТ 345 - Лендинг «Что слышно?»

Иногда сильно устаешь от проектов, в которых все построено на продаже. Презентации, демонстрация преимуществ и все, что напрямую связано с маркетингом. К слову, 99% проектов, которые мы делаем, именно такие. Как и 99% на рынке)))

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

Также есть формат исследований, это что-то между кейсом и классической статьей. Вообще всё это можно назвать нативной продажей. Как раз такой проект у нас сейчас в работе. Чуть-чуть в детали погрузим.

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

Интересная идея. И это задача не совсем про маркетинг, а ближе к PR. Мы тут вроде как не продаём ничего, а просто просвещаем, что как раз и является одной из главных задач пиара.

Мы и сами много нового узнали) Прочитали прорву научных статей про шум, провели даже небольшой опрос потенциальной аудитории. В итоге, текст и структура будущего лендинга уже готовы. Отправили заказчику на согласование. Уже не терпится приступить к дизайну, так как уже полно идей, как это все завернуть в дизайне.

Life-кейс | ПРОЕКТ 341 - ПРЕЗЕНТАЦИЯ Union Industrials

В 2016 году у нас был первый договор с этим заказчиком.
И за 8 лет нашего сотрудничества мы сделали огромное количество проектов.

Сейчас у нас новая интересная задача - разработать презентацию компании.

Вроде бы банально, но у нас всё глобально) Изучили вдоль и попрек интернет-представленность компании. Текущие материалы: старые презентации, буклеты, сайты и т.п.
Посмотрели, что у конкурентов. Закидали заказчика вопросами и определили этапность работ.
После чего подготовили структуру будущей презентации👆

Цель презентации: познакомить потенциального клиента из сегмента b2b с компанией. По сути, визитная карточка компании.

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

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

Life-кейс | ПРОЕКТ 343 - ТЕРМОПЛИТЫ РАФИНАД

Закончили работу над дизайном лендинга и отправили на согласование. Про идею выбранной стилистик рассказывали в прошлом посте проекта.

Основная задача лендинга рассказать о новом продукте конечному потребителю (b2c) - т.е. не продавать, а презентовать.

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

1. В первую очередь показать конечный результат использования термоплиты - теплый дом и уют, чтобы вызвать эмоции у ЦА. Никто не мечтает о термоплите, мечтают о доме)

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

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

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

Life-кейс | ПРОЕКТ 342 - QUALITY START

Задизайнили вторую продуктовую страницу. Про красоту опустим, говорим про логику)

Продукт сложный - новая IT-разработка, система для увеличения эффективности и осуществления контроля на предприятии. Здесь важно правильно донести смыслы, потому что продукт очень легко перепутать с банальным умным видеонаблюдением. А в нашем случае видеонаблюдение - лишь малая часть функционала.

Основная фишка в том, что система в моменте отслеживает, анализирует сотрудников и объекты. А в случае возникновения каких-то инцидентов она может отправлять уведомление о них. Также система позволяет анализировать выработку каждого сотрудника и даже начислять премии, ну или наоборот.

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

А в следующих блоках уже раскрываем преимущества более подробно. От ключевых до менее важных. Например, сначала говорим про повышение эффективности, далее контроль сотрудников, расследование инцидентов и т.д.

Life-кейс | ПРОЕКТ 340 - СЕРВИС MPBoost

Дизайн полностью готов. А мы готовы поделиться ходом наших творческих мыслей)

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

Мы много проектов разработали в этом направлении, просмотрели и проанализировали массу сайтов сервисов. И знаете, это напомнило старую добрую игру “Найди 5 отличий”.

Проблема в том, что все они схожи по функционалу, и это понятно. Но идентичных даже близнецов не бывает, что уж там сервисы) Отличия и фишки есть у каждого, просто на сайте их не видно. Чтобы найти, нужно каждый блок перебирать очень внимательно. Никого критиковать не хотим, но это косяк разработчиков сайта. Именно на них ложиться задача учесть эти нюансы и грамотно представить продукт. Естественно, так не у всех, но таких немало.

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

Life-кейс | ПРОЕКТ 342 - QUALITY START

Наконец, демонстрируем вам полную версию дизайна первой продуктовой страницы. Кто делал ставки на первую концепцию, улыбнитесь, потому что заказчик выбрал именно её)

Писать много не будем, просто смотрите, какой гармоничный дизайн получился))

Мы не скромные, но практичные, и в дизайне сделали ставку на типографику и читабельность. Именно поэтому отказались от 3-й концепции с 3D, чтобы не отвлекать внимание от текста.

Главная задача - погрузить читателя, директора производства, в смыслы, которые заложены в тексте. Простыми словами, нужно, чтобы он прочитал текст и понял, что за продукт мы ему предлагаем. Продукт НОВЫЙ на рынке, поэтому это так важно.

Структура классическая:
Сначала говорим что за продукт и для чего он вам, подчёркиваем выгоды.
Затем раскрываем детали и функционал.
Завершаем экспертными блоками о компании и регалиях разработчика приложения.

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

НАФИГА КОЗЕ БАЯН ДИЗАЙНЕРУ КУРС ДЛЯ РУКОВОДИТЕЛЕЙ?

Поздравляем нашего старшего дизайнера Екатерину с окончанием экспресс-курса для руководителей в школе управления. А нас с классным сотрудником, который стал ещё круче в профессиональном плане.

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

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

Именно поэтому политикой студии было принято решение дополнить профессионализм старшего дизайнера навыками управленца)) Уверены, что это напрямую повлияет на эффективность и энтузиазм всех наших дизайнеров. А наши, то есть ваши, проекты будут достойным результатом нашего роста.

Life-кейс | ПРОЕКТ 343 - ТЕРМОПЛИТЫ РАФИНАД

Подготовили дизайн-концепты. Естественно, тёплые и уютные. Термоплиты же)

Сегмент b2c, и это очень важно.

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

Мы предположили, что у потенциального покупателя есть мечта - построить загородный дом, создать в нём уютное и тёплое гнёздышко. Решили развивать эту концепцию - уютный дом как результат использования термоплит РАФИНАД. Мы буквально заселяем человека в дом его мечты)

Сфокусировались на доме и разработали 3 концепции:

1. Летняя тема. Камерность, вечер, лето, на небе звёзды, в доме тёплый свет. Ощущение умиротворения, тепла и уюта.
2. Зимняя тема. Лес, белый снег и тёплый дом, в который хочется зайти и согреться.
3. Показываем и дом, и плиту. Дом здесь отходит на второй план и акцент смещается на плиту.

Мы погружаем человека в нужную атмосферу и пытаемся воздействовать на эмоции. Плита ему не нужна, ему нужен тёплый и уютный дом)

Посмотрим, что скажет заказчик…

Life-кейс | ПРОЕКТ 342 - QUALITY START

После вчерашнего созвона продумали новые идеи по иллюстрациям и подготовили новые версии дизайн-концептов. Кто не в курсе, о чём это мы тут, читайте предыдущий пост по этому проекту👆

В какую сторону мы думали и собственно коротко о каждой концепции:

1. Бумажные журналы превращаются в электронные. А зачем? На первой иллюстрации изображена куча разных журналов, что-то в них зачёркнуто - показываем трудность работы в таком формате. И вот этот весь хаос заходит в приложение и цифровизуются. Визуально этот переход обозначен пунктирной стрелкой. В приложении проставлены галочки - символ порядка. Работа в приложении становится более лёгкой, упорядоченной и эффективной.

2. Вторая иллюстрация - это ещё одно визуальное воплощение первой идеи, только отрисковка в изометрии.

3. В третьей концепции показываем не только качество и чёткую работу приложения, но и для кого оно предназначено - пищевое производство. На иллюстрации 3D изображение, которое показывает кучу ящиков со стопками журналов. На пищевое производство указывает конвейерная лента с разными продуктами, таким образом мы охватываем все производства. (В прошлом посте проекта говорили о том, почему нельзя показывать какое-то одно производство).

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

Также доработали текст с целью показать выгоды в первом экране: в 2 раза меньше записей, в 3 раза быстрее, 100%-я заполняемость. Заголовок дополнили указанием ЦА - приложение для пищевых производств.

Отправили концепции заказчику, самим интересно, какую версию он выберет. А вы увидите её уже в полном дизайне. Делайте ставки)

Life-кейс | ПРОЕКТ 342 - QUALITY START

Подготовили концепцию. Созвонились с заказчиком и провели презентацию. В целом всем все понравилось. Но…

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

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

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

—-

Несколько аргументов в поддержку предложенной нами дизайн-концепции, почему мы сделали именно так.

Мы уже взрослые мальчики и девочки, поэтому от некоторых дизайн-идей отказались сразу. Например:

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

Фото пищевых производств.
Твёрдое НЕТ без обсуждений. Хотя джун-дизайнер уже побежал на фото-сток искать пищевое производство))
Пищевые производства ооочень разные. Если покажем колбасу, то технолог из производства напитков может подумать, что продукт не для него. Ну и еще есть много нюансов.

Фото довольных технологов и директоров производств.
Любимая тема на сайтах)) Но мы не сторонники данного подхода. Во-первых, использование людей довольно опасный приём. Мы же для чего их ставим? Чтобы человек себя погрузил в этот образ. А здесь нет единого образа, люди все разные: девочки, мальчики, с бородой и без, в очках, с пирсингом и т.д. Во-вторых,в данной тематике это вообще не уместно.

В общем, суть такая - нам нужно визуально показывать результат работы приложения, а не само приложение. “Смотрите, у вас было так, а будет вот так”.

—-
PS: В дизайн-концепции было еще несколько блоков, но про них мы расскажем позже))) А также покажем новую версию главного экрана.

Life-кейс | ПРОЕКТ 343 - ТЕРМОПЛИТЫ РАФИНАД

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

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

Но мы все равно вставили свои 5 копеек)) Маркетологи заказчика, конечно, в своём деле очень хороши, но они не могут учесть все нюансы, которые касаются сайта. Здесь есть своя специфика, поэтому, если видим необходимость, всегда стараемся донести свои мысли до заказчика.

В итоге, перед запуском в дизайн перенесли структуру и текст в вид схематичного прототипа, поштурмили внутри студии и внесли по тексту и структуре ряд правок и предложений, которые впоследствии заказчик согласовал.

НЕ ОТХОДЯ ОТ ПРОИЗВОДСТВА

Почему к нам обращаются крупные производственные компании за разработкой сайтов?

Учимся на практике, вникаем во внутренние процессы, видим бизнес изнутри. И это нам даёт отличный материал и бесценный опыт для разработки сайтов производственных компаний.

Игорь Костромин - руководитель студии ONE PAGE недавно посетил производство медоварни “Степь и ветер”. Визит состоялся в рамках обучения в школе управления, и его целью было проанализировать оргсхему компании и найти ошибки.

Говорит, что приняли его тепло, правда без коньяка, всё-таки не налоговый инспектор) Но провели по всем отделам: маркетинга, SMM, финансовому и производственному. Все планы, статистику, KPI и прочие важные штуки предоставили.

В общем, Игорь время зря не терял…

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

Life-кейс | ПРОЕКТ 340 - СЕРВИС MPBoost

Сегодня отправляем заказчику дизайн-концепты.

Подготовили 2 варианта. В бэкграунде осталось ещё 3, но они не прошли наш строгий внутренний контроль)

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

В этом проекте особую ставку мы делали именно на копирайтинг. Долго и тщательно продумывали заголовок, с заказчиком ещё пришлось “побороться” за наш вариант) Или нужно было показать, какой функционал приоритетный, а на какой не стоит делать ставку.

Поэтому на этапе дизайна акцент сместился на типографику. И именно шрифтами и расположением текста в том числе удалось передать все нужные смыслы.

РАСПЕЧАТАЛИ ДИПЛОМЫ🏆

Вы тоже храните фото только в телефоне и никогда не распечатываете?)

Вот такая же ерунда с нашими дипломами и наградами. Решили часть распечатать и украсить ими стену в офисе. На самом деле в такие минуты понимаешь, насколько крут)

В далеком 2019 году мы случайно узнали, что заняли 4 место среди разработчиков промо-сайтов для корпораций, хотя никогда не гнались за ачивками такого рода. Ну и потом пошли по наклонной) С каждым годом прибавлялись разные диджитальные награды.

Сейчас 20 штук распечатали, не верите, пересчитайте)

Life-кейс | ПРОЕКТ 342 - QUALITY START

Недавно стартовал очень интересный для нас проект QUALITY START - компания, которая занимается консалтингом и разработкой IT-продуктов в сфере пищевой промышленности.

Задача - разработать 5 лендингов, и 3 из них нужно успеть до 20 октября. Но мы и не такое проворачивали, особенно в b2b проектах)

Уже закончили со структурой и текстом для одной из продуктовых страниц - приложения для пищевых производств. И есть интересные мысли…

Это далеко не первый наш проект для IT-продукта, поэтому и конкурентов анализировали, почти точно зная, что мы там увидим, а точнее не увидим. Видео и фото, которые демонстрировали бы возможности продукта детально. Должна быть чёткая корреляция с текстом. Назвали функцию - показали видео или скриншот.

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

Возможно, мы не в меру въедливые, но убеждены, что для подобных продуктов болтология не подходит. Поэтому “заставили” заказчика снять короткие скринкасты по 30-60 сек. на каждый функционал. Также их YouTube пересмотрели и некоторые видео просто адаптировали под наши задачи.

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

Сейчас в процессе разработка дизайн-концепций первого лендинга, а параллельно продолжаем работу над текстом и структурой для остальных 4-х. Следите за проектом, он обещает быть полным интересных идей и решений)