С чего начать создание прототипа
1 Распределение контента по разделам на основе маркетинговой структуру АИДА
Контент 1 который дал вам клиент 2 контент который вы хотите добавить на основе анализа / исследования
2 использование схем таблиц переключателей - для того что бы сайтом было удобно пользоваться!
3 написание заголовков
Контент 1 который дал вам клиент 2 контент который вы хотите добавить на основе анализа / исследования
2 использование схем таблиц переключателей - для того что бы сайтом было удобно пользоваться!
3 написание заголовков
создание элементов юкит
кнопок и переключателей
виды кнопок
текстовые
скругленные
кнопок и переключателей
виды кнопок
текстовые
скругленные
01
Написание заголовков для сайта
Написание текста для
главного экрана сайта или офера
главного экрана сайта или офера
Оффер отвечает на основные вопросы посетителя сайта здесь и сейчас. Он убеждает остаться на сайте, отправить вам заявку, купить ваш продукт. Это то о чем хотят узнать посетители вашего сайта в первые 10 секунд
Торговое предложение должно быть конкретным и понятным с первого взгляда. Ценность его для клиента должна быть очевидной.
Как этого добиться?
помощники в работе с текстом главред, проверка орфографии, чат гпт (теперь внутри тильда)
Оффер (или уникальное торговое предложение) — это фраза, которая содержит суть вашего предложения (что вы предлагаете) и объяснение его выгоды для клиента.
Доп материалы для ознакомления
Методика хорошего заголовка — техника 4U
Основные правила написания контента для сайта — ясность, ценность для клиента, точность.
Полезность (Usefulness)
То, ради чего вы нужны клиенту. «Сэкономьте, улучшите, обезопасьте, накормите, порадуйте» — заголовок начинается с повелительного глагола.
Уникальность (Unique)
То, чем вы отличаетесь от конкурентов. Предложение выгоднее по цене: «Коттедж в 2 раза дешевле квартиры». Оригинальность товара: «Новые системы безопасности».
Прицельность (Ultra-Specific)
Выгода клиента, измеримая в цифрах или процентах. «Сэкономьте до 4000 рублей», «Увеличьте конверсию оффера на 70%».
Срочность (Urgency)
Ограничение предложения во времени. «Купите со скидкой до 15 апреля», «Используйте программу бесплатно 30 дней».
Самая распространенная методика хорошего заголовка — техника 4U — возникла до появления первого в мире сайта. Формулу идеального заголовка предложил Дэвид Огилви ещё в 50-е годы XX века. Но актуальность она не потеряла.
{ Качество продукта } [ SEO-фраза ], созданный для [ преимущество потребителя ]
Например: «Удобный конструктор писем, созданный для того, чтобы делать рассылки быстро и экономить время».
{ Прилагательное } + [ Продукт / Услуга ] для [ характеристика целевой аудитории ]
Например: Дистанционный курс по HTML для девушек, мечтающих научиться программировать с нуля.
[ Название продукта ] — это [ категория продукта ], который [ работа, которую он выполняет лучше других ]
Например: «Oki — это приложение для заказа еды, которое находит выгодные предложения в радиусе одного километра».
[ Уменьшите боль / проблему ] [ неожиданным способом ]
Например: «Повышайте ваш доход, когда делаете покупки».
[Делай что-то как [вдохновляющий пример] без [нежелательных последствий]
Например: Научись играть в теннис как звезда без изнуряющих тренировок.
[ Занимайтесь желаемым делом ] без [ неприятных эмоций ] / [ неожиданным способом ]
Например: «Путешествуйте без ограничений, не бросая карьеру».
{ Качество продукта } + { качество продукта } [SEO-фраза], который [ желанный результат ]
Например: Необычные авторские чехлы для телефона, которые защитят ваш телефон от ударов.
[ Действие ] + [ SEO-фраза ], за [ время ]
Например: Создавайте профессиональные презентации за 30 минут.
[ Обещание результата ] за [ время ]. [ Дополнительное преимущество ]
Например: Привезем, соберем и установим дом за один день. Обработаем поверхность противопожарным средством бесплатно.
Делаем + { качество продукта } + [ продукт ], который [ преимущество потребителя ]
Например: Делаем доступные видеоролики для сайта, которые увеличивают продажи вашего бизнеса.
Например: «Удобный конструктор писем, созданный для того, чтобы делать рассылки быстро и экономить время».
{ Прилагательное } + [ Продукт / Услуга ] для [ характеристика целевой аудитории ]
Например: Дистанционный курс по HTML для девушек, мечтающих научиться программировать с нуля.
[ Название продукта ] — это [ категория продукта ], который [ работа, которую он выполняет лучше других ]
Например: «Oki — это приложение для заказа еды, которое находит выгодные предложения в радиусе одного километра».
[ Уменьшите боль / проблему ] [ неожиданным способом ]
Например: «Повышайте ваш доход, когда делаете покупки».
[Делай что-то как [вдохновляющий пример] без [нежелательных последствий]
Например: Научись играть в теннис как звезда без изнуряющих тренировок.
[ Занимайтесь желаемым делом ] без [ неприятных эмоций ] / [ неожиданным способом ]
Например: «Путешествуйте без ограничений, не бросая карьеру».
{ Качество продукта } + { качество продукта } [SEO-фраза], который [ желанный результат ]
Например: Необычные авторские чехлы для телефона, которые защитят ваш телефон от ударов.
[ Действие ] + [ SEO-фраза ], за [ время ]
Например: Создавайте профессиональные презентации за 30 минут.
[ Обещание результата ] за [ время ]. [ Дополнительное преимущество ]
Например: Привезем, соберем и установим дом за один день. Обработаем поверхность противопожарным средством бесплатно.
Делаем + { качество продукта } + [ продукт ], который [ преимущество потребителя ]
Например: Делаем доступные видеоролики для сайта, которые увеличивают продажи вашего бизнеса.
Попробуйте потренироваться в написании разных заголовков и выберите подходящий. Формулы и примеры помогут сориентироваться.
Шпаргалка 4 U
Сборка прототипа, композиция и работа с сеткой
Сетка — это только инструмент, который помогает сделать готовый макет ровным.
С помощью сетки дизайнер устанавливает правила выравнивания и добавления новых элементов в макет.
Ускорять вёрстку макета.
С сеткой веб-дизайнер тратит меньше усилий на размещение новых элементов.
С помощью сетки дизайнер устанавливает правила выравнивания и добавления новых элементов в макет.
Ускорять вёрстку макета.
С сеткой веб-дизайнер тратит меньше усилий на размещение новых элементов.
Сетка Тильды — Columns 12, Margin 103, Gutter 40
В ИДЕАЛЕ ВЕСЬ КОНТЕНТ ДОЛЖЕН НАХОДИТЬСЯ В ПРЕДЕЛАХ СЕТКИ, ЕСЛИ ТЕКСТОВЫЙ КОНТЕНТ КОЛОНКИ ПОМЕЩЁН В БОКС, ГРАНИЦЫ БОКСА ДОЛЖНЫ НАЧИНАТЬСЯ НАЧАЛОМ КОЛОНКИ И ЗАКАНЧИВАТЬСЯ КОНЦОМ КОЛОНКИ (БОКС ДОЛЖЕН ЗАНИМАТЬ ЦЕЛОЕ КОЛИЧЕСТВО КОЛОНОК)
про ритм /повторение и отступы
найти статью про композицию
найти статью про композицию
Принципы и правила композиции
Направление взгляда
При F-образной композиции сначала считывается левая сторона вертикально, потом по горизонтали, причем верхние элементы запоминаются хорошо, а нижние уже не так значимы.
При Z-образной композиции человек считывает информацию слева направо и по диагонали, по траектории одноименной буквы.
Z-образная композиции
F-образная композиции
При построении композиции UI-дизайнерами используются два паттерна направления взгляда пользователя: Z и F-образные.
Ритм / повторение и отступы
Смысловых отступов между разделами, также вы можете разделить блоки разным фоном
Отступы от контента внутри карточки до краев должны быть одинаковые
Отступы внутри кнопки также отступы должны иметь воздух
Межстрочное расстояние по всему сайту! Межбуквенное менять нельзя!
Должно быть одинаковое расстояние у:
Между одинаковыми группами
Расстояние между заголовком под заголовком и кнопкой , между заголовком и текстом , внутри оферной конструкции
Внешний отступ всегда больше, чем внутренний
Правило третей
Важно знать меру! Используйте не все точки сразу. Достаточно одной или двух. Иначе взгляд пользователя разбежится по странице и эффект будет обратным, сопоставимым с только что раскрытой газетой.
Базовая основа построения композиции — правило третей. Разделите экран на девять равных частей при помощи двух вертикальных и двух горизонтальных линий. Точки пересечения этих линий — это те позиции, в которых фокусируется взгляд в первую очередь. Считается, что самые важные элементы необходимо располагать именно в этих зонах, либо по периметру линий.
Негативное пространство
Не бойтесь его использовать! Если информации много, разбейте ее на несколько блоков, структурируйте.
Чем чище макет, чем больше свободного пространства вокруг элементов, тем легче считывать информацию и фокусироваться на важном. Прочь лишние иконки, цветочки, картинки.
Принцип сочетаемости
Изображения
При создании гармоничной композиции на сайте важно использовать сочетаемые элементы. Это как пазл: множество элементов, которые идеально подходят друг к другу, складываются в единую картинку, логичную и понятную.
Фотографии необходимо подбирать из одной фотосессии, либо с одинаковой обработкой.
Иконки из одного набора
Иконки должны сочетаться между собой, быть в одной палитре, одинакового размера, с одинаковой толщиной линий.
О шрифтах
про читабельность
1 межстрочка
2 читаб шрифт
3 контраст с фоном
иерархия
акценты в тексте выделение
1 увеличение шрифта
2 изменение цвета или жирности
3 подчеркивание, обводка
поиск бесплатных шрифтов стоки и гугл фондс!
про читабельность
1 межстрочка
2 читаб шрифт
3 контраст с фоном
иерархия
акценты в тексте выделение
1 увеличение шрифта
2 изменение цвета или жирности
3 подчеркивание, обводка
поиск бесплатных шрифтов стоки и гугл фондс!
Размеры шрифтов иерархия
Заголовки на странице сайта имеют иерархию от h1, h2, h3.......
Чем выше уровень заголовка, тем крупнее шрифт.
Для компьютера
Для телефона
Оптимальный размер заголовка h1 до 60 px
Задача заголовков — структурировать материал на странице. Так он быстрее считывается, в нем легче ориентироваться и искать информацию.
В заголовках, а также в остальном тексте на сайте должны быть выдержаны единые размеры, начертание, жирность, одинаковый выбор шрифта. Н-заголовки одного уровня должны быть одного размера, наборный текст — одного размера, меньшего чем заголовки и т. д. Так сайт аккуратно выглядит с точки зрения верстки
Доп материалы для ознакомления
Домашнее задание
1 Перенесите свой скетч в графический редактор Фигма используя правила композиции и сетки
(вместо текста можете использовать любые текстовые вырезки или назвать разделы на свое усмотрение)
2 Исправьте макет опираясь на правила композиции и сетки
