Разработка дизайна сайта. Дизайн сайта с нуля: отдельно для компьютера и для телефона
Сначала смысл каждого блока в текстовом прототипе, потом макет в Figma для компьютера и отдельный для телефона, анимация там, где она объясняет. Лендинг ТИМ ФЕСТа взяли в Made on Tilda через день после запуска.
Один блок, два макета
Каждый блок в наших кейсах отвечает на вопрос посетителя, а на телефоне отвечает по‑своему: банка во весь экран, вкладки в один ряд. Снимки с живых сайтов.
В линейке около двадцати вкусов, от лимонадов и тоников до кофейных напитков и лимитированных выпусков. Фильтры над сеткой делят их на четыре группы, так что бармен находит тоники одним нажатием. Состав вкуса появляется под банкой при наведении.
На телефоне: одна банка на экран, следующая листается вбок
Весь кейсИтоги прошлого фестиваля стоят сразу под первым экраном, вперемешку со снимками детей. Маркетологу бренда не нужно ждать презентацию: цифры для разговора с руководством уже на странице.
На телефоне: фото сверху, под ними цифры сеткой два на два
Весь кейсГенеральную уборку легче заказать, когда видно, за что платишь. На её странице работы разложены по вкладкам: комната, кухня, санузел, коридор. В каждой свой список, от мытья люстр до чистки батарей парогенератором.
На телефоне: вкладки комнат в один ряд, список работ под фото
Весь кейс
Как появляется дизайн
Сначала смысл, потом вид. Так правок меньше: спорим о том, что сказать, до того как это нарисовано.
- 1Бриф и созвон
Что продаёте, кому и чем отличаетесь. Смотрим сайты соседей и ваши примеры, что нравится и что нет.
От вас: бриф и примерыдо старта - 2Текстовый прототип
Смыслы и порядок блоков: заголовки, тексты, что в форме. Дизайн начинается, когда понятно, что говорит каждый блок.
1–2 недели - 3Главная в Figma
Макет для компьютера и отдельный для телефона, с описанием каждой анимации и зачем она. Правим по вашим комментариям, пока не утвердите.
От вас: комментарии к макету1–2 недели - 4Остальные страницы
Страницы услуг собираются по шаблону главной, поэтому новая услуга потом не требует нового дизайна.
по объёму - 5Вёрстка и анимация
Собираем на Tilda, на коде или на WordPress, отдельно раскладываем блоки под телефон и проверяем на живых экранах.
1–2 недели
- Текстовый прототип
- Макет в Figma для компьютера
- Отдельный макет для телефона
- Анимации с описанием
- Иконки и рисунки под проект
- Вёрстка и проверка на живых экранах
Фотосъёмкафото и видео даёте вы, подскажем, что снятьЛоготип с нуляделаем отдельной работой, если его нет
Фирменный стиль к сайту
Если логотипа нет или он не читается на экране, делаем его вместе с сайтом. Брендбук, визитки, обложки и баннеры собираем в том же стиле, чтобы реклама и сайт выглядели одной компанией.
- Логотипесли его нет или он не читается на экране
- Брендбук на одной страницецвета, шрифты, примеры применения
- Визиткипечатные и электронные
- Обложки соцсетей и баннерыв том же стиле, что сайт, и для рекламной сети Яндекса
- Презентациив стиле сайта, для встреч и рассылки
Сайты, где дизайн заметили
Награда Made on Tilda, анимация банок, сайт подрядчика метро и сайт услуг на 19 страниц.
Три варианта первого экрана, видео на фоне, фигуры с фотографий фестиваля обведены цветом гайдлайна. Тёмным сделали один блок, а не весь сайт, чтобы текст читался.
При прокрутке банки с первого экрана перелетают к рассказу о составе, вкусы разложены по группам, сайт на трёх языках.
Семь направлений на одном шаблоне: метро отдельно от нефтегаза, объекты с заказчиком и сроком, рекомендательные письма вместо стажа.
19 страниц: у каждой услуги своя, цена «от» в карточке, что входит по комнатам, похожий объект с ценой за метр.
Сколько стоит
Дизайн входит в цену сайта. Отдельный макет без вёрстки обсуждаем на созвоне.
Что спрашивают о дизайне
Сколько вариантов дизайна покажете?
Можно сделать сайт тёмным, как у конкурента?
Телефон будет просто уменьшенной версией?
Делаете редизайн готового сайта?
Что нужно от нас?
Сколько стоит дизайн?
Где соберём дизайн
Дизайн не привязан к платформе: макет собираем там, где сайту удобнее жить.
Цифры из наших проектов
Разборы с реальными расходами и заявками из кабинетов Директа. Без пересказа чужих статей.
Обсудим дизайн вашего сайта
Ответьте на три вопроса. Посмотрим ваш сайт или примеры, которые нравятся, и пришлём структуру, срок и цену.
Какой у вас бизнес?
Что нужно сделать?
Как удобнее получить разбор?
Куда прислать разбор?
Спасибо!
Скоро свяжемся.