Курс

Web-дизайн с нуля

Занятие 1.

Цели/задачи курса, теория, сбор контента, черновой макет.

из чего состоит курс, цели и задачи

Цель курса:

Пройти поэтапный процесс создания сайта от постановки задачи до реализации цели.

Пройти этапы:

  1. постановка цели, аналитика темы и целевой аудитории,
  2. сбор информации и подготовка контента,
  3. создание прототипа,
  4. дизайн сайта,
  5. верстка,
  6. запуск рекламной компании,
  7. аналитика метрик.

Задача курса

Научиться ремеслу Web-дизайна. Создавать качественный дизайн осознано.

что такое дизайн,

Web-дизайн?

Дизайн это решение поставленной задачи.

Дизайна без задачи не бывает.

Web-дизайн – это решение задачи в интерактивной среде интернета.

Что бы создать правильный дизайн, надо понять пользователя, его задачу и решить её (группа пользователей – целевая аудитория).

 

типы сайтов

Сайт визитка

Задача: разместить информацию о компании, услугах, портфолио.

landing page

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

промо сайты

Задача: повышение узнаваемости бренда или продукта. Создавать правильные эмоции и ассоциации.

многостраничные информационные сайты

Задача: собрать максимум посетителей, привлекая их информацией. Обмен информацией. Продажа рекламных площадей.

интернет магазин

Выставочная площадка товаров. Продажа товаров.

веб-сервисы

Решение сложных задач.

этапы создания сайта и роли участников

аналитика ниши

Узнать задачу заказчика, какой продукт, какая идея, понимание целевой аудитории. Мозговой штурм. Опрос целевой аудитории, анализ конкурентов.

 

структурирование информации

Майндмеп. Логическое разбиение информации по группам. Понимание в каком порядке и что показывать пользователям.

 

Создание прототипа

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

 

концепция дизайна сайта

Эмоции, стиль исполнения, шрифты, цветовая палитра.

 

контент

Прописывание чистовых текстов. Организация фото- видеосессий. Подготовка иллюстраций и 3D визуализаций.

 

web-дизайн

Создание графического макета.

 

web-верстка

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

 

Web-програмиррование

Интеграция системы управления.

 

наполнение сайта контентом

Заполнение всей информации на шаблонные страницы.

 

маркетинг

Действия направленные на получения целевого трафика на сайт. Реклама, промо-акции и т.д.

 

аналитика

Анализ поведения пользователей на сайте по информации собранной аналитическими ресурсами. Яндекс.Метрика например. Предложение гипотез по улучшению показателей. А/Б тестирование.

 

хостинг, домен в двух словах

хостинг

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

Средняя минимальная цена 1500р. в год: 5 сайтов.

 

Домен

Как номер телефона, только в интрнете. Символьное имя, помогающее находить адреса интернет-серверов.

Средняя минимальная цена $5 в год: 1 сайт.

 

практическая часть:

сбор информации, аналитика ниши,структурирование информации

1. Определить задачу заказчика/сайта

Продавать, продвигать, рекламировать, собирать заявки и т.д.

2. бриф

Кто? Что?

Кто заказчик? Что продаете? Кто целевая аудитория?

Сколько?

Сколько лет? Сколько заказов выполнили? Сколько клиентов? Сколько сотрудников?

Где?

Где офис? где заказчики? куда поставляете? откуда сырье?

Когда?

Срок доставки? Время на каждом этапе? Как быстро реагируете на заявку?

Как?

Как устроен процесс взаимодействия с клиентом? Как происходит производство товара?

Зачем?

Зачем ваш проект? Зачем клиенты должны покупать ваш продукт и т.д.

 

3. мозговой штурм

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

4. проработка целевой аудитории

Кто покупатели? Разбор и сортировка по ценности и приоритету. Проработка задачи пользователя.

5. опрос целевой аудитории

Что важно? Что волнует? Почему выбрали тех или иных? Проработка задачи пользователя.

6. сбор и структурирование информации в карту смыслов

Занести в майнд меп (карту смыслов) https://www.mindmup.com структурировать по смысловым нагрузкам.

7. Подготовка контента

Фотосессия, фотосток, гугл-поиск, 3D визуализация, иллюстрирование.

домашнее задание

1. выбрать тему проекта.

2. провести сбор информации.

3. прочитать главред все статьи