Используя этот сайт, вы даете согласие на использование файлов cookie, помогающих нам сделать его удобнее для вас. Подробнее...
ок
Бриф / Почти Генератор Лендингов SVOEMEDIA
Укажите, как мы можем с вами связаться
Укажите тип проекта
Обращаем ваше внимание, что в рамках Генератора мы не подключим эквайринг и онлайн-кассу (вам нужно будет сделать это самостоятельно при необходимости).
О чем ваш будущий сайт?
Например, анонс мероприятия или йога-центр
Укажите точное название бренда/проекта для отображения на сайте
Например, йога-центр «Лотос», SuperMarketing 2024
География продукта/услуги/бренда, для которых создается сайт
Какое ключевое действие человек должен совершить на сайте?
Например: оставить заявку на..., перейти на другой сайт...
Расскажите, откуда на сайт придут люди?
У вас уже есть доменное имя? Требуется ли его подключение?
Когда планируете запустить проект?
Обращаем ваше внимание, что среднее время разработки (после поступления оплаты) — 7 дней.
Если у вас уже есть аккаунт на Тильде, укажите email, на который он зарегистрирован
Если его еще нет — заведите
Хотите ли вы принимать оплату на сайте?
Обращаем внимание, что в стандартный Генератор за 50 тысяч рублей мы не подключаем оплату (вы можете это сделать самостоятельно)
Есть ли у вас готовая структура, тексты, может быть, прототипы?
Укажите ссылку, если есть или напишите — нет (мы вышлем вам дополнительный бриф)
Есть ли у вас коммуникационная политика? Какого тона стоит придерживаться на сайте?
Напишите ссылку на коммуникационную политику или укажите, какого тона стоит придерживаться (например, Строгий, формальный, на «вы» /Простой, понятный / С юмором / Дерзкий, на «ты»...).
Есть ли у вас логотип, иные элементы айдентики, брендбук, требований которого стоит придерживаться? Если да — укажите ссылку
Обращаем внимание, что в рамках Генератора мы не создаем логотипы (но если нет — что-то придумаем)
Какого стиля в оформлении стоит придерживаться?
Какой стиль вам ближе?
Аудитория вашего бизнеса: кто эти люди? Опишите их
Что важно для клиентов при выборе продукта? Какие сомнения могут возникнуть при выборе?
Укажите адреса сайтов ваших конкурентов
Напишите, что нравится, а что нет
Расскажем о форме оплаты
Если вы физическое лицо, то после подтверждения заявки, мы вышлем вам ссылку на оплату банковской картой. Если вы юридическое лицо — запросим реквизиты и отправим счет.
Есть еще что-то важное, о чем мы должны знать?
Напишите здесь
Как вас зовут?
С кем нам предстоит общаться?
Ваш номер телефона или аккаунт в телеграм или ватсап
Как удобнее с вами связаться?
Ваш email
На него мы вышлем ссылку для оплаты или счет
Ваш email
хотите делать шаблоны?
Расскажите о себе
Расскажите о себе, покажите ваши работы и укажите ожидаемый гонорар за шаблон
хотите оплатить продукты как юридическое лицо или ИП?
просто заполните эту форму с реквизитами и расскажите, что вам нужно, мы подготовим документы
Название организации для документов
Адрес
ИНН
КПП (для ИП не заполняется)
БИК банка
Наименование банка
Корреспондентский счет
Расчетный счет
Укажите состав вашего заказа
Обращаем ваше внимание, что для шаблонов сайтов действует правило — 1 лицензия = 1 сайт.
расскажите о своей задаче или задайте нам вопрос
Ваш телефон или любой удобный мессенджер
Расскажите о вашей задаче и укажите примерный бюджет
расскажите об интересном проекте
Ввести email и подписаться
задайте нам вопрос, выскажите мнение
расскажите, что пошло не так? постараемся помочь
задайте нам вопрос?
поделитесь своим мнением или задайте вопрос
расскажите о своей задаче или задайте нам вопрос
Расскажите кратко о проекте и укажите приблизительный бюджет
подписаться
подписывайтесь на email или в телеграм (@svoemedia)
подписаться
подписывайтесь на email или в телеграм (@svoemedia)
включить уведомления о новых модулях
подписывайтесь на email или в телеграм (@svoemedia)
включить уведомления о новых модулях
подписывайтесь на email или в телеграм (@svoemedia)
хотите нарисовать что-то для нашего блога? мы — за!
Условия — партнерские и не коммерческие для обоих из сторон. Вы получаете ссылку на вас, а мы — иллюстрацию :) Пришлите, пожалуйста, ссылку на ваше портфолио:
Пришлите ссылку на ваше портфолио, инстаграм или беханс (где размещены ваши работы?)
хотите написать для SVOEMEDIA или позвать нас подготовить статью для вас?
Условия — партнерские и не коммерческие для обоих из сторон. Подробнее здесь
Какой проект/компанию вы представляете?
Расскажите — вы хотите опубликоваться у нас или наоборот? Или что-то другое?
Если у нас — напишите предполагаемую тему вашего материала и основные тезисы. Если хотите позвать нас — напишите, какие темы вас интересуют?
хотите стать нашим партнером?
Расскажите о вашем проекте
Какой проект/компанию вы представляете?
Расскажите — чего хотите?
нашли баг? расскажите, что не так и на какой странице :)
Спасибо, что помогаете нам стать лучше!

Идея, вдохновляющие примеры и структура будущего сайта

Концепция. Мудборды. Составляем блок-схему сайта так, чтобы ей можно было пользоваться. Из каких страниц состоит любой проект.
Команда SVOEMEDIA
Последнее обновление: февраль 2020
модуль 4
Мы уже провели исследование себя, аудитории и конкурентов и готовы переосмыслить полученные данные: нет, все понятно, но что конкретно? Задача этапа — ответить на вопрос «Что делаем?». Сколько в нашем сайте будет страниц? О чем примерно будем на них говорить и почему? Какими средствами будем решать запросы аудитории? Результатом этого этапа должны стать описанная концепция, схема будущего сайта и техническое задание на тексты для автора.
Мы будем очень рады, если вы процитируете наш материал, но обязательно укажите активную ссылку на него. Спасибо!
Мы уже провели исследование себя, аудитории и конкурентов и готовы переосмыслить полученные данные: нет, все понятно, но что конкретно? Задача этапа — ответить на вопрос «Что делаем?». Сколько в нашем сайте будет страниц? О чем примерно будем на них говорить и почему? Какими средствами будем решать запросы аудитории? Результатом этого этапа должны стать описанная концепция, схема будущего сайта и техническое задание на тексты для автора.
Мы будем очень рады, если вы процитируете наш материал, но обязательно укажите активную ссылку на него. Спасибо!

Идея сайта

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

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

Прежде, чем переходить дальше, ответьте на вопросы (если на какой-то из них вы ответили — нет, вернитесь к Модулю 3):

● Учли ли вы все данные, собранные на предыдущих этапах?
● Понимаете ли вы, зачем нужен этот сайт?
● Понимаете ли вы, какие особенности есть у продукта?
● Изучили ли вы опыт конкурентов?
● Понимаете ли вы посетителей сайта?
● Удалось ли сформировать идею сайта?
Хорошая идея — основа любого хорошего дизайна. Это помогает вам сэкономить на дополнительных итерациях и позволяет нам разрабатывать продукт, который лучше соответствует потребностям рынка и потребностям пользователей.

Вдохновляющие примеры

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

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

Для лендингов, корпоративных сайтов, нам больше всего нравится работать с Lapa.Ninja, Onepagelove, Behance, Httpster, Awwwards, Land-Book. Для интернет-магазинов дополнительно стоит рассмотреть Ecomm.design.
Общее ощущение от сайта в первую очередь зависит от цветов, шрифтов или фотографий, которые вы используете. Наша задача на этом этапе — найти примеры (или референсы — это одно и то же) и составить мудборд (или доску настроения) для проекта.

Помните: не копируйте, — вдохновляйтесь.

Где искать вдохновение
Мудборд

Вы можете найти вдохновение здесь:

Подготовка картонов

Этот шаг важен для вас и вашего клиента. Конечно, будут ситуации, когда вы закончите свой дизайн, и клиент будет в восторге, но это не всегда так. Мы рекомендуем вам подготовить доску с большим количеством фотографий и картинок, которые покажут вашему клиенту, что вы хотели бы сделать с будущим приложением, какие «чувства» вызовут ваши проекты, и, наконец, чего ожидает клиент. Благодаря такому подходу вы увеличите шансы того, что клиенту понравятся ваши решения, и покажете, что цените отзывы клиентов. Приблизительное время: 4 часа. Посетите эту ссылку, чтобы увидеть пример доски объявлений.

**Как подготовить доску настроения?**Мы используем платы от InVision по следующим причинам:

  • гибкость
  • Предопределенные макеты
  • Возможность добавлять изображения, шрифты и вложения
Конечно, не стесняйтесь выбирать свой собственный инструмент!

Важный этап до начала работы над дизайном.

Рефы обычно делят на 3 части:

  1. тематические — анализ конкурентов;
  2. технологические — уместность использования технологических приемов;
  3. стилистические — изображение, типографика, цвета, композиция, форма, сетки;
Тематические референсы — это анализ конкурентов. Допустим, вы делаете сайт для хлебопекарни в городе Иваново. Сначала смотрите какие есть хлебопекарни в окрестностях и какие есть у них сайты. Какие есть прямые конкуренты, не обязательно в рамках местности. Важно узнать у заказчика с кем он конкурирует, кого он считает на своём же уровне, кого он считает выше и к кому он хочет тянуться. Соответственно, вы смотрите на них и задача может быть сформирована следующим образом: «Вот есть у нас лидеры рынка, мы тянемся к ним, мне у них нравится то-то и то-то» или «У нас есть основные конкуренты, у них есть новый сайт, он вышел вот в таком ключе и нам очень важно дистанцироваться и сегментировать относительно него, то есть не быть похожими на них».

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

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

Основной принцип подбора референсов

Грамотное комбинировать те или иные части. Допустим, на одном сайте вам понравилась цветовая гамма, на другом идея подачи информации, на третьем интересная сетка. Задача состоит в том, чтобы все вещи которые вам нравятся стали гармонично уживаться в рамках вашего одного проекта. Когда мы берём референс, мы дробим его на минимальный набор элементов и из них, как из кубиков собираем наш сайт.

Где и как собирать референсы

Как анализировать технологические референсы

Нужно быть максимально занудными и разложить всё по полочкам. Очень хорошо если вы создадите табличку или сделаю это в любой другой удобной для вас форме. Самое главное, вы должны разложить те решения, которые заслуживают внимания по вашему мнению друг напротив друга, чтобы все они были перед глазами и вы могли отметить плюсы и минусы, которые вы в них видите. Это нужно не только вам, но и коллегам, чтобы вы все вместе могли оценить предложенные варианты. Лично мне проще это делать в фигме, я могу приложить скрин страницы или части страницы и рядом написать комментарий. Помните, главное, чтобы вам было удобно!

Технологические референсы можете выписать в таблицу. Укажите ссылку на сайта и краткое описание.

Стилистические референсы удобно собирать в мудборды.

Мудборд — набор картинок в определенной стилистике или тематике, который помогает презентовать и согласовать с клиентом визуал вашего будущего проекта.

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

Есть 2 типа мудборда:

  • Для клиента. Разобрались выше
  • Для себя
Для себя нужно, чтобы всегда оставаться на острие и понимать самые последние стили и тенденции.

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

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

Мудборды удобно собирать в Pinterest

Для примера посмотрите пинтерест Юры Ветрова, дизайн директора mail.ru.

Не забудьте прочесть статью про мудборды, чтобы лучше со всем разобраться.

Ищите референсы в muz.li или по следующим ссылкам:

стилистические

https://www.awwwards.com/

https://www.behance.net/search вписывайте в поиске что вас интересует

https://land-book.com/

http://onepagelove.com/ без VPN в РФ не открывается

технические решения

http://csswinner.com/ без VPN в РФ не открывается

https://cssdesignawards.com/

Структура сайта

Возьмем наши кирпичики и «потаскаем» их по будущей структуре.
Теперь наша задача — по каждой из выявленных проблем / вопросов / гипотез понять, какое решение мы предложим на нашем сайте.
Основная цель процесса проектирования - не просто создавать красивые картинки или удовлетворять субъективные ощущения различных заинтересованных сторон. Основная цель - привести бизнес-цели клиента в соответствие с целями пользователей, предоставляя доступный, удобный и привлекательный продукт. Мы хотим сделать продукт, который не только выглядит великолепно, но, что более важно, также отлично работает и полностью соответствует ожиданиям пользователей (или даже превосходит их). Этап «Идея» помогает в этом, предоставляя клиенту необходимую информацию для принятия решения о будущей форме и направлении продукта. Это также приводит к подготовке результатов, которые будут служить якорем, чтобы держать всю команду на одной странице на каждом этапе пути.

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

  • Было рассмотрено ценностное предложение продукта, и поэтому вероятность того, что пользователи сочтут его релевантным, будет увеличена.
  • Продукт будет основан на гипотезах и предположениях, которые были подтверждены достоверными данными; таким образом, существует более высокая вероятность того, что пользователи будут более удовлетворены решением.
  • Продукт будет основан не на одной идее, а на анализе множества возможных решений.
  • В начале этапа проектирования вы будете знать весь спектр возможных решений и сможете выбрать лучшие.
  • Вы сможете поделиться результатами этой работы внутренне и внешне (например, с инвесторами).
  • Этап разработки будет легче и быстрее, потому что многие важные вопросы уже были даны ответы.
  • Любой новый член команды сможет более легко и эффективно узнать всеобъемлющее видение продукта.
Все твердят: сайт начинается с контента, с прототипа. На самом деле это не совсем так. Сайт начинается с идеи и понимания структуры сайта.


Одностраничник — это на самом деле не одна страница, это:

1. Сам лендинг
2. Страница Ошибки или 404 страница
3. Страница Политики обработки персональных данных
4. Страница Публичной оферты (если вы планируете продавать с сайта)
5. Страницы успеха, на которых будет написано «Спасибо, что купили у нас курс».

ПРИМЕР СТРУКТУРЫ





Инструменты для работы над структурой лендинга:

Фигма

Realtimeboard

Бальзамик


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

  • Wireframing vs. Prototyping
  • Каркасные инструменты и советы
  • 4 шага, чтобы создать свой первый каркас
  • Каркасные Ресурсы
Wireframing vs. Prototyping

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

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


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


Карта сайта Хиллари Питтс разбивает сайт электронной коммерции на самые основные строительные блоки. Вы когда-нибудь смотрели из окна самолета и видели схему совершенно нового подразделения, обретающего форму ниже? Это похоже на карту сайта: след, указывающий, где должны быть построены структуры, как видно с высоты 30 000 футов.

Карта сайта предоставляет диаграмму иерархии сайта и показывает, где каждая страница вписывается в эту иерархию.

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

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

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

Создание вашей карты сайта

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

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

Например, вот 3 распространенных способа создания карты сайта вместе с информацией, которую лучше всего передавать:

1. Список Формат списка представляет собой простой упорядоченный или неупорядоченный список, который использует вложение для передачи иерархии. Вот пример, основанный на части основного сайта Webflow:

Показатель

- дизайнер

- CMS

- Редактор

- Хостинг

  • Клиенты
  • Groupon
  • Новая история
  • Возможно
  • Поваренная соль
  • Фрилансеры
Это отлично подходит для общения тем страницы и относительной иерархии. Вы сразу можете увидеть, что страницы для Дизайнера, CMS, Редактора, Хостинга и Клиентов имеют одинаковый уровень значимости, а конкретные истории клиентов находятся на один уровень ниже.

Что не очень хорошо в общении, так это пути пользователей между этими страницами. Например, нет никаких указаний на то, что Designer, CMS, Editor и Hosting отображаются в раскрывающемся меню «Функции» в главной навигации сайта. Или что каждая из этих страниц связана с главной страницей сайта.

Это делает формат списка удобным, например, для инвентаризации страницы, но вы не захотите передать его клиенту и сказать: «Вот как люди будут перемещаться по сайту».

2. Горизонтальная диаграмма Карта сайта Хиллари Питтс (вверху этого раздела) представляет собой горизонтальную диаграмму, вероятно, наиболее знакомую форму карты сайта.

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

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

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

3. Вертикальная диаграмма Вертикальная диаграмма - это просто горизонтальная диаграмма, перевернутая на бок. Поскольку поток слева направо обозначает прогресс (в культурах, где чтение потоков слева направо), вертикальные диаграммы наиболее полезны для отображения более ограниченного опыта, такого как конкретный пользовательский поток, или структуры более конкретной области сайт.

Сечение потока покупка горизонтальной диаграммы Pitts' будет хорошим кандидатом для вертикальной диаграммы (и на самом деле, вид представляет собой вертикальную диаграмму, встроенный в горизонтальной).

Возникли проблемы с вашей картой сайта? Попробуйте сортировать карты!

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

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

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

Инструменты Sitemap

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

Вот несколько инструментов, которые поставляются с предварительно загруженными элементами карты сайта:

Зачем вам нужен каркас

Если карта сайта предоставляет план для всего вашего веб-сайта, каркас представляет план для одной страницы (или группы страниц). Это то, что вы бы увидели, если бы вы могли взять свою карту сайта, а затем увеличить масштаб и улучшить одну страницу на этой карте высокого уровня.

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

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

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


Re Дерек Кларк создал этот каркас , который показывает только основные элементы макета страницы, но все же сообщает о том, как будет выглядеть и функционировать окончательный дизайн. Найдите минутку, чтобы рассмотреть этот каркас с точки зрения содержания. На самом деле это имеет много последствий, которые нужно либо превратить в стандарты контента, либо пересмотреть с учетом стандартов контента!

Например:

  • Большой заголовок означает, что статьи не могут содержать более 6 или 7 слов.
  • Тизеры статей могут быть сравнительно длинными, что может помочь смягчить вышеуказанный лимит
  • Каждая статья должна будет выделить изображение
  • Заголовки слайдера должны быть очень короткими из-за размера шрифта
  • В правом верхнем углу находится «переключатель страны», что может означать необходимость перевода контента сайта. Это может оказать значительное влияние на дизайн, так как заголовок из 6 или 7 слов на немецком языке, вероятно, будет намного длиннее, чем написанный на английском.
И это только для начала.

Дайте заинтересованным сторонам достаточно, чтобы получить правильную идею


Simple Простые нарисованные от руки каркасы Virgil Pana отражают суть окончательного дизайна. Не путайте каркас с прототипом. Каркасы обеспечивают схематическое представление с убранной графикой и контентом (обычно), показывая основную структуру. Прототипы, с другой стороны, должны представлять рабочую версию конечного сайта (хотя уровень точности, опять же, может широко варьироваться).

Каркас позволяет заинтересованным сторонам видеть, как будут работать и функционировать отдельные страницы сайта. А поскольку в коде ничего не указано в каркасе, заинтересованные стороны могут запросить радикальные изменения еще до того, как вы начнете проектировать.

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

Прежде чем показывать кому-либо свои каркасы, нужно четко уяснить, что именно представляет.

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

Если есть сомнения, комментируйте

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

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


An Анимированный GIF, составленный из нескольких каркасов, созданных Крисом Баннистером . Лично мне нравится маркировать секции каркаса в каркасе , если я могу придумать ясное и простое имя. Я только что видел слишком много заинтересованных сторон, неправильно понимающих цель секции, и это недоразумение искажает их обратную связь, чтобы экономить на этом простом дополнении.

Файлы Sitemap и каркасы помогут вам начать работу с контентом.

Что было первым: курица или яйцо? Кому интересно - важен желток. Дизайн похож на оболочку, которая удерживает содержимое вместе.

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

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

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

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

Этот веб-сайт надеется увеличить онлайн-продажи? Затем вам нужно убедиться, что каждый продукт имеет хорошо написанное описание бренда и все характеристики, которые потенциальный покупатель хотел бы знать. Что очень важно для структурирования полей CMS, которые вам понадобятся для вашей коллекции продуктов!

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

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

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

Дизайн контента форм


Raw Сырьевые материалы влияют на то, как страница будет выглядеть и перемещаться. Изображение пользователя Flickr PerzonSEO . Контент включает в себя все существенное на веб-сайте. Будь то видео, объясняющее продукт, анимация, показывающая, как работает приложение, или страница с информацией о некоммерческой организации, каждый элемент предназначен для передачи сообщения или рассказа истории. Вам не нужно иметь весь этот контент под рукой, прежде чем создавать свой дизайн, но это, безусловно, помогает.

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

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

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

Знай своего SEO

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

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

Когда вы включаете работу заранее, процесс становится проще

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

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


MoodДанная доска объявлений Studio-JQ сочетает в себе различные логотипы, цветовые сочетания и изображения для инкапсуляции и представления визуальных идей для нового веб-дизайна. Moodboards - это коллаж из изображений, текста и других визуальных элементов, которые помогают нам лучше понять бренд. Это неформальная сборка - нет внутренней потребности в иерархии или организации. Но при просмотре в гештальте появляются шаблоны и темы. Соединение доски настроений помогает вам визуально общаться, что иначе сложно описать.

Прежде чем начать, попросите клиента составить список слов или фраз, которые они ассоциируют со своим брендом. Это должно быть быстрое упражнение, фокусирующееся на непосредственных чувствах или эмоциях, которые возбуждает бренд. Подумайте, Coca Cola, Apple и Whole Foods - какие слова эти бренды приходят на ум? Ваше настроение должно начинаться с собственного сильного списка идей и эмоций.

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

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


MoreЭто более организованная доска объявлений Брайана Рау для кейтеринговой компании объединяет графику, типографику и цвета в единую тему. Создать стиль плитки


TileЭтот стиль в стиле Жозефины Нино дает четкое и точное представление элементов дизайна для предлагаемого сайта электронной коммерции. Допустим, вы попадаете во франшизу быстрого питания в стране, где вы не говорите на этом языке. Будь то Burger King, McDonald's или Kentucky Fried Chicken, вы сразу узнаете, где находитесь.

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

Плитка стиля - это набор визуальных компонентов, используемых для создания дизайна. Они берут широкие мазки доски объявлений и превращают их в настоящие строительные блоки.

Стиль плитки обеспечивает визуальное руководство для различных компонентов дизайна сайта, включая:

ЛоготипыHeadersBody copyButtonsColor palettesPatternsДругие визуальные эффекты, связанные с брендомОпциональные: слова и фразы, которые вызывают эмоциональные аспекты бренда

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

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

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

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

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

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

Построить элемент коллаж


Element Этот элемент коллажа MDS демонстрирует, как кнопки будут выглядеть и функционировать на разных устройствах. У вас есть интересные идеи для интерактивных элементов или другого динамического волшебства? Элементные коллажи - хороший способ собрать их в одном месте и заставить их выглядеть и функционировать так же, как в конечном проекте . Будь то кнопка с необычным состоянием наведения или творческий способ раскрытия различных типов контента, коллажи элементов показывают клиенту, как все будет работать, когда сайт работает.

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



Посмотрите наш бриф, на который можно опираться
В итоге мы получим документ, описывающий проект, и конкретный список основных задач. Их не обязательно решать срочно, но стоит перенести их в таймлайн — так вы точно ничего не забудете.
Конкуренты — это те, с кем вы делите одни и те же деньги. Покупают либо у вас, либо у них.
Например, вы хотите открыть интернет-магазин с товарами высокого качества для кошек в Москве.
Потребность аудитории: уход за питомцем.
Ваши конкуренты: магазины для кошек (1 — продают все, 2 — продают только премиум-товары), магазины для других животных, специалисты по какому-нибудь кошачьему премиум-уходу... Если они продают свои продукты или услуги в Москве — они ваши конкуренты.

Или вы собираетесь провести конференцию в Новосибирске для рынка e-commerce.
Потребность аудитории: узнать о трендах и новых инструментах рынка, получить новые связи, увеличить свой доход, применив полезные знания.
Ваши конкуренты: мероприятия по этой теме, онлайн-школы или курсы по этой теме, аналитики рынка... И не только в Новосибирске, если вы планируете привлекать участников, например, со всего региона.
С какими заблуждениями про конкурентов мы обычно сталкиваемся:
Заблуждение 1: «У нас нет конкурентов, потому что мы такие классные, что за конкурентов никого не считаем».
Здоровые амбиции — это всегда хорошо, но не стоит пренебрегать конкурентами и не обращать внимание на компании, делящие с вами один пирог. То, из-за чего вы не считаете кого-то способным с вами соперничать — это ваши преимущества и ваши отличия, но это не означает, что кроме вас больше никого нет, как и не означает, что вы не должны за ними наблюдать. Если они поумнее, то уже изучили вас вдоль и поперек и готовят ответный удар вашей уникальности.
Конкурент — это тот, кто работает на рынке, удовлетворяя ту же потребность у той же аудитории, что и вы. Партнер — это тот, кто работает на вашем рынке и для той же аудитории, но не удовлетворяет такую же потребность.
Бывают исключения. Например, если мы и другая студия продаем один и тот же продукт, но за разную стоимость и с разным подходом (читай для другой группы аудитории). В этом случае мы можем действительно стать «партнерами» и делиться клиентами.
Отмечу, что это не рекомендация :)
Кроме тех конкурентов, кого вы и так знаете, обязательно изучите поисковую выдачу (чтобы не пропустить слона) и посмотрите, кто продает то же самое в соцсетях. И то и другое делается по ключевым словам.

Например, для сайта реставратора антикварной и старинной мебели в Москве такими запросами могут быть «антиквариат», «старинная мебель», а остальные подсказки можно узнать, проверив их через Яндекс.Вордстат (расширьте этот список). Список подсказок также проверьте в Facebook, ВКонтакте, Instagram. Посмотрите, какие компании рекламируются по этим запросам и/или появляются в топ-10 Яндекс и Google.

Добавьте ваши находки в таблицу ниже.

Нажмите на картинку, чтобы увеличить
Составьте сводную таблицу конкурентов и проанализируйте их по таким, например, вопросам:

— позиционирование;
— URL (адрес сайта);
— преимущества;
— основной призыв к действию;
— структура сайта;
— удобство сайта;
— продукты;
— их стоимость;
— какие этапы клиент проходит от знакомства до покупки;
— процесс покупки и оплаты;
— доставка;
— что происходит после покупки;
— как «удерживают» клиента, если он сомневается;
— как показана экспертность;
— сильные стороны;
— слабые стороны.

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

Сравните конкурентов с собой (первая колонка). Выделите, чем вы лучше? Что есть у вас, чего нет у них? Отметьте свои сильные и слабые стороны.
Можно ли менять/добавлять/убирать некоторые вопросы?
Да, конечно. Например, для уже упомянутого примера по конференции для e-commerce стоит рассмотреть дополнительные вопросы:
— каких экспертов привлекают конкуренты;
— какая у них программа;
— что входит в пакет участника;
— дополнительные бонусы.

Сколько должно быть конкурентов?
5-10 будет достаточно. Лучше возьмите меньше и обработайте их полностью, чем много и как попало.
Если вы в курсе о Методе персон, отметим: мы не очень хотим, чтобы вы привязывались к названиям методик (поэтому будем называть сегментированную аудиторию набором групп), чтобы вы не добавляли лишнюю информацию в исследование.
Как правило, вот так вот сходу нарисовать персону можно только если: а) делаешь персоны каждый день по долгу службы, б) просто повезло сразу попасть в точку. Обычно все готовые персоны, с которыми мы сталкиваемся при разработке, содержат много лишней информации. И чаще всего это не способствует более глубокому изучению персоны, а только путает, ведь это гипотеза (!), а мы бегаем и ищем мужчину-программиста 35 лет с айфоном и двумя собаками, совершающего пробежки по утрам. Не делайте так.
Вот какие вопросы мы считаем действительно важными при описании групп аудиторий в общем случае (набор этот может меняться):
В какой ситуации клиент интересуется продуктом?
Уровень экспертизы, опыт в теме (влияет на язык).
В чем сомнения при выборе? С какими сложностями сталкивается?
Какие вопросы задаст?
Чего ожидает от продукта?
Как ищет информацию?
А как делать? Как нарисовать классную табличку? Как понять, что может быть основой для сегментации, и как разделить аудиторию на группы, если не получается аналитически?

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

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

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

1. Заполнить информацию о себе и зафиксировать все важные данные и материалы.
2. Проанализировать конкурентов и составить сводный список.
3. Проанализировать аудиторию и выделить группы.
Иллюстрации: иконка для обложки — Freepik для Flaticon
comments powered by HyperComments
Хотите узнавать о новых модулях?
Понравилось? Делитесь с друзьями! Им полезно, нам — приятно
Подпишитесь в телеграм или по email
Заполняя форму, вы соглашаетесь на обработку персональных данных
нам нужна ваша куртка и мотоцикл — и вас переадресует на страницу с шаблоном
оставьте свою почту, чтобы получить шаблон (кроме этого, вам начнет приходить наш полезный дайджест — раз в месяц, не чаще)
нам нужна ваша куртка и мотоцикл — и вас переадресует на страницу с шаблоном
оставьте свою почту, чтобы получить шаблон (кроме этого, вам начнет приходить наш полезный дайджест — раз в месяц, не чаще)
нам нужна ваша куртка и мотоцикл — и вас переадресует на страницу с шаблоном
оставьте свою почту, чтобы получить шаблон (кроме этого, вам начнет приходить наш полезный дайджест — раз в месяц, не чаще)
Made on
Tilda