Ко мне обратилась студия Inky. У них появилась проблема — нужно разработать дизайн сайта портфолио. Все работы лежат либо в телеграфе, либо в фигме, либо просто скидываются ссылками в чате — несолидно.
Решение
Создать дизайн сайта на основании описания и пожеланий клиента, кратко и эффектно рассказать о студии.
Исследование конкурентов
Дизайн сайта
Главная страница
Страница кейса
Мобильная версия
UI-кит
Подарок, обложки для соц. сетей 🎁
Отзыв клиента ❤️
Было приятно поработать со специалистом такого уровня.
Перед стартом работ обсудили большую часть нюансов, после чего Даниил по шагам расписал этапы работ, по которым легко отслеживать текущий прогресс дизайна сайта.
Это круто, так как сразу становится понятно, что уже было сделано и что осталось, а также в конце проекта у вас не возникнет неопределенность.
Порадовало общение, за время которого ответы на любые вопросы предоставлялись быстро, насколько это вообще возможно.
Если вам нужна четкость в работе над вашим проектом — смело обращайтесь к Даниилу!
Еще благодарю за пак для соц. сетей! Круто, что дал больше, чем договаривались изначально.
Школа Animation School запускает поддержку начинающих специалистов по анимации. Не знаешь как решить проблему → можно просто спросить у специалистов в индустрии.
Задача
Разработать сайт из 6 блоков в стилистике сайта. Клиент предоставил готовые цвета, структуру сайта и изображение персонажа школы.
У клиента было мало времени, всего 7 дней. Главная задача — успеть к сроку, не проседая в качестве.
Решение
Разработали дизайн лендинга из 6 блоков и сверстали на тильде за неделю. Добавили анимации, сделали мобильную версию, подключили домен и запустили в срок
Remake — продукт для готового оформления GetCourse. Команда увидела, что школы заказывают одно и тоже и решила сделать шаблон, который можно поставить за 3 дня. Помогли 24 школам преобразить свои личные кабинеты на GetCourse.
Задача
Обновить сайт для продукта Remake — готового оформления для школ на Геткурсе. Старый сайт не показывал продукт достаточно хорошо и у пользователей оставалась куча вопросов.
Лиды не понимали продукт. Приходилось делать отдельные презентации и объяснять на созвонах. Некоторые не понимали, что можно заказать уникальный дизайн и уходили к конкурентам.
Что сделали
Написали структуру
Написали тексты
Продумали погружение и понимание продукта
Задизайнили обложки
Создали дизайн сайта
Заверстали на Тильде
Прикрутили анимацию
Настроили цели
Структура
Начали составлять структуру исходя из анализа лидов и их вопросов. Все, что волновало пользователей — теперь на сайте. Раньше пользователи спрашивали о количестве страниц оформления, узнавали как устаналивается шаблон, спрашивали про уникальное оформление. Теперь все ответы на вопросы содержатся на сайте.
Блоки сайта
Первый блок — чтобы было понятно, куда попали и что предлагают.
Как будет выглядеть школа — сразу показываем дизайн, который будет после установки.
Можно ли изменить — за показом шаблонного дизайна сразу закрываем вопрос про изменения, надо показать, что менять шаблон можно точечными правками.
Наши клиенты — показываем с кем работали, чтобы покупатель понимал уровень клиентов готового оформления и это вызвало доверие.
Почему работать нужно с нами — надо показать не просто«мы крутые», а объяснить реальные отличия от конкурентов, чтобы пользователь сам себе сказал: «емае, да они крутые!».
Детали продукта — важно показать, что продукт не просто меняет цвета, а добавляет удобство. В Геткурсе много проблем и одним визуалом его не изменить. Поэтому в этом блоке надо показать как продукт решает пролему удобства.
Кейсы с готовым оформлением — показываем как выглядят кейсы, которые купили готовое оформление и сильно его не меняли.
Установка шаблона — показываем видео одного из основателей. Где он показывает установку Ремейка. В Геткурс-тусовке важны сроки. Часто владельцы приходят за дизайном, когда через неделю запуск. Этим блоком показываем, что мы можем сделать это быстро.
Тарифы — после всего что показали, предлагаем сделку. Показываем тарифы.
Триггерный блок уникального дизайна — вдруг человеку нужен уникальный дизайн? Говорим об этом сразу под тарифами. Чтобы когда мысль«Блин, а мне за столько не надо, подешевле да поменьше бы» — блок тут как тут. Нет бюджета или не нужны все страницы — оставьте заявку, обсудим.
Об уникальном дизайне — показываем кейсы уникального дизайна и говорим, что у нас не только шаблоны, а еще уникальность.
Отзывы клиентов — отзывы клиентов делаем не 100 500 штук, важно не показать количество, а показать как мы работаем и результаты клиентов. Качество важнее количества.
Демо продукта — некоторые пользователи могут не доверять, пока не увидят продукт. Предлагаем оставить заявку в обмен на демо-доступ. Пользователь сможет сам зайти, потрогать продукт и решить.
Команда продукта — важно показать, что команда не вчера появилась, а ребята уже с опытом. Показываем имя, регалии, личные сайты. Чтобы можно было зайти и посмотреть, все ли хорошо.
Процесс установки школы — чтобы ввязываться в это дело, нужно понимать какие шаги идут друг за другом. Именно для этого этот блок и нужен. Рассказываем по шагам что будет, кто выдает доступы, когда платят, кто и где тестирует.
Ответы на вопросы — Геткурс и его оформление не простая ниша, могут быть вопросы. Сделали блок с ответами, чтобы не раздувать лендинг.
Триггер обращения к основателю — в конце делаем триггер«Не знаете, что выбрать?». Даем контакт основателя и предлагаем проконсультироваться.
Тексты
В предыдущих версиях сайта текст был прописан неверно. Он был слишком банальным, не затрагивал боли пользователей.
Блок из старой версии сайта
Например в блоке преимуществ для владельцев«Оформление геткурса как отстройка конкурентов» понятна каждому владельцу. Это довольно понятная вещь и каждый из исполнителей может написать это на своем сайте.
Мы решили основываться на том, какие преимущества есть конкретно у продукта, не в целом почему оформление это хорошо, а почему нужно покупать именно этот продукт.
Погружение и понимание продукта
Продукт готового оформления не самый простой. Его сложно описать в двух словах и быстро закрыть все вопросы. Поэтому нужно было погрузить посетителя в продукт. Для этого мы выбрали такие фишки.
Демо изменений
Цель: показать, что шаблон можно менять. Чуть поменял — добавил уникальности.
Что сделали: заскринили главные экраны школ-клиентов, вставили в фигму и записали гифку со сменой страниц.
Демо установки
Цель: показать, что сроки установки — не маркетиновая уловка, а реальность.
Что сделали: показали урок однго из основателей продукта. С объяснениями как ставить Ремейк видео занимает 16 минут. 3 дня на устанвоку становятся правдивее. В тексте использовали простоватую подачу. Словно берем сами себя«на слабо».
Краткость отзывов
Цель: сделать так, чтобы отзывы читали. Не просто«сделали в срок, спасибо!» и не поэмы из 10-абзацев.
Что сделали: вычитали отзывы, взяли самое важное, вытащили факты и оформили крупно.
Дизайн
При создании сайта мы сделали приняли решение делать легкий дизайн, который сделает акцент не на себе, а на продукте, потому что главный персонаж сайта — продукт. Все остальное должно быть незаметными декорациями на фоне продукта.
Дизайн сайта выделяет все самое важное и оставляет за скобками пространственные рассуждения и хваствоство. Сайт рассказыает о продукте просто и по делу. Если отзыв — то не 5 абзацев текста, а факты.
Каждый абзац текста на сайте был продуман и находится на сайте по какой-то причине. Каждая обложка преимущества или деталей продукта раскрывает текст, помогает узнать больше.
У потенциальных клиентов есть возможность посмотреть на процесс установки. Ничего не скрывается в недрах команды — установка показана стразу на странице.
Модульность блоков
Дизайн сайта выполнен в нейтральном стиле, без сильных визуальных различий в блоках. Это позволит пересобирать внутренние страницы не переделывая дизайн.
Ниже я показал, как может выглядеть страница услуги уникального оформления. Копируем почти все блоки, перетасовываем, лишние удалям. Вуа-ля, новая страница услуги за 15 минут, собранная менеджером.
Результат
Получился стильный, современный сайт, который рассказывает о продукте, минимизируя вопросы потенциальных покупателей.
Сайт попал в галерею лучших сайтов, созданных на Тильде. Нахождение в галерее лучших сайтов на Тильде деет проекту дополнительный трафик. Только за первый день сайт посетили 283 человека, пришедшие с сайта madeontilda.
Ко мне обратился Александр Фирсов, основатель школы BlaBlaInvest. Он продает свой гайд, где рассказывает об инвестициях. Гайд называться«Метавселенским». Целевая аудитория 35+.
Проблема
Текущий сайт не отражает безумности метавселенных, не дает нужного настроя. Хочется чтобы было бодро.
Задача
Нужно подобрать несколько концептов, которые подходят под метавселенную тему, тему Алисы и какой-то спойкойный вариант.
П метвселенные, специально намешаны разные стили, галактика и портал.
Про Алису, но персонажи из других вселенных все равно просачиваются
Спокойный дизайн с зведным фоном. Подходит для спокойного и привычного посприятия
Реакция клиента
ПК-версия
После дизайна мобильной версии мы не стали делать отдельно дизайн ПК версии, а решили сделать верстку на Тильде. ПК-версия получилась такой.
Я не одобрил такой варинант. Слева миньон болтался без дела совсем. Он не выглядывал как в мобилке. Справа объезьяна с фиолетовым облаком оттягивала все внимание. Верстка ушла на доработку.
Второй вариант был лушче, но тоже не подходил. В центре слишком все сбито в кучу, а по боком много свободного места. В итоге я придумал фишку — просто повернуть расположение изображений изображений по почасовой, чтобы уйти с центральной линии текста, кнопки и цены.
На выходе получился вот такой дизайн и я понял, что это то, что нужно.
Верстка
Версталось все на Тильде с сложной и базовой анимацией.
Разработать промостаниц для сбора заявок на покупку или аренду приложений. Сайт помогает потенциальным покупателям ознакомиться с условиями и преимуществами компании.
Пожелания клиента
Клиенту не понравилось, что предыдущий дизайнер разрабатывал дизайн с эмоджи. Надо было этого избежать. Сайт должен быть быть легким и стильным.
В верстке должна быть минимальная анимация, плавный скролл при клике в меню, кнопка наверх.
Дизайн-процесс
Клиент предоставил весь текст, нам оставалось только преобразовать его в дизайн. Посмотрели сайты конкурентов, подметили хорошие и не очень решения. Спросили у клиента, какие сайты им нравятся, а какие нет и начали работу.
Поиск референсов
Посмотрели референсы и начали строить стиль.
Утверждение
Когда я только начинал работать дизайнером, я отдавал готовый дизайн макета за пару дней до дедлайна. Это опасно, потому что времени на правки мало. А шанс того, что клиенту не понравится какой-то блок или весь макет — велик.
Сейчас утверждение идет так:
первый блок в течение 1−2 дней,
несколько блоков еще в течение 1−2 дней,
за 3−4 дня до дедлайна весь макет.
Показали несколько варинтов первого блока, а потом несколько блоков, включая подвал. Клиент утвердил все с первого раза.
Результат
Процесс верстки
Я предлагал сверстать сайт на Тильде, но клиент попросил сделать статичную верстку на html, css, js, без использования конструкторов. В этом есть свои преимущества, дальнейшее масштабирование до wordpress или другой cms.
Анимация в первом экране
Клиент попросил сделать интересную анимацию на первом экране. параллакс-эффект. Чтобы при скролле. Максим — верстальщик, придумал сделать перемещение изначальных«пятен» градинета. Получилось легко и залипательно 🙂
Обратился разработчик с задачей разработки лендинга портфолио. У него был старый сайт, но не подходил по дизайну и функциональности.
В планах сделать полноценный сайт с кейсами и блогом. Пообщавшись, мы пришли к выводу, что нам нужно сначала сделать лендинг, чтобы клиенты уже могли его найти.
После этого уже можно вторым этапом делать кейса, а третьим этапом блог.
Начали с лендинга. Его целевая аудитория по разработке — государственные организации. Нам не надо делать студийного проекта уровень, просто и со вкусом.
Также у клиента был ограниченный бюджет — 20 000₽. Я предложил только ПК версию и с ограничением в 6 блоков.
Решение
Разработал дизайн лендинга с основными секциями, которые дают понимание, что это за разработчик и что он может предложить.
Так как я сам часто нанимаю разработчников для своих проектов, я понимаю что нужно отразить, чтобы клиент мог принять решение о навыках разработчика.
Ко мне обратился Роман с задачей разработки лендинга и сбора фирменного стиля. Он сам создал дизайн текущего лендинга, но для нового лендинга захотел привлечь профессионала.
Ему также не нравилось, что инстаграм, геткурс и лендинг в разных стилях.
Нужно было сделать лёгкий и современный дизайн для женщин 35−50 лет. Не перегруженный, но эстетичный
Старый дизайн
Решение
Разработали прототип и дизайн лендинга на 15 секций. Определились с цветами и элементами для фирменного стиля.
Дизайн лендинга я делал для своего курса Notion Pro. Делать дизайн своим продуктам очень сложно — никто не подгоняет и не даёт правок. Можно растягивать проект до бесконечности.
Я решил флексить. Поставить себе срок 3 дня и сделать сайт. Этот дизайн лендинга удалось сделать за несколько часов.
Ко мне обратилась компания MethEd. Им нужно было создать дизайн лендинга для курса по вёрстке. Они запускали первый поток через несколько недель.
Нужно создать лёгкий и простой дизайн. Клиент не хотел следить за мной и контроллировать процесс. Договорились о фидбеке клиента на контрольных точках: пк-версия и мобильная-версия.
Решение
В сжатые сроки разработал дизайн лендинга в 2 разрешениях: пк и мобильный. Разработал UI-кит, дизайн модальных окон. Клиент остался доволен и планирует продложать работу над расширением объёма и функциональности сайта.
Итоговый дизайн
Пк-версия
Мобильная версия
Модальное окно
[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta]
В сжатые сроки разработать дизайн лендинга для вебинара«Не как у всех: сложный свет для фотографов» по готовой структуре и текстам. Нужен был современный и креативный дизайн.
Решение
Разработал дизайн лендинга в 3 разрешениях. Уложился в сжатые сроки. Клиент остался доволен креативностью и стилем лендинга.
Сделал дизайн лендинга для компании, которая занимается вывозом лома.
Компания вывозит лом металлов с дачных и городских участков. Помогает вывозить лом после разбора конструкций. Классно, что можно отправить фото и получить оценку дохода по фото.
Разработал прототип, компьютерную и мобильную версию дизайна. Лендинг вышел в 7 экранов. Стиль лендинга — строгий, как и сама компания: приезжают вовремя, не обманут с взвешиванием, уберут за собой.
Закончил дизайн лендинга для консультанта-нумеролога
Мила занимается нумерологией. Нумерология — наука о числах в вашей жизни. Она рассказывает и показывает, как числа влияют на вашу судьбу, счастье, карьеру, успехе в отношениях.
Лендинг получился мистическим, но в то же время легким и понятным — как и сама нумерология.
Машинка может ездить по бездорожью, продолжает ехать даже если перевернется. Можно менять подвеску. Разгоняется до 20 км/час.
Так как тематика детская, лендинг получился сочным и красочным. Разработал компьютерную и мобильную версию в 10 экранов. В итоговой версии лендинга будут анимированы летающие элементы, пульсирующие круги и блики на кнопках для повышения конверсии.
