Ссылка на канал (нажми)

!1
О чем курс и как
будет проходить Каждый урок - приближает к
созданию собственного сайта.

Заранее подумайте над тематикой, что

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

Здесь не будет обещаний, что у вас будут

миллионы после обучения. Чтобы они
были нужно “пахать” в хорошем смысле
слова. Хвататься за любую возможность
в дизайне и развивать свой навык.
!2

!2
Трудности,
которые нужно
преодолеть
• Потеря мотивации:

• Сложное задание, тяжело делать

• Не получается красиво
• У других лучше, я не научусь
• Не успеваю

!3

!3
Цель курса: Для чего нужен сайт?

рассказать о себе или своем

научиться создавать качественный и красивый дизайн, 01
разобраться в технических моментах сервисов.
бизнесе

02 продать услугу/товар

03 собрать заявки

протестировать спрос на
04 услугу

05 анонсировать мероприятие

поделиться бесплатными
06 материалами
!4
протестировать различные
07 источники трафика !4
О чем сегодня
поговорим?
✓ Какого типа бывают сайты

✓ Какие существуют варианты

разработки

✓ Какие есть этапы разработки

✓ Плюсы конструкторов

✓ Где создается дизайн сайтов

✓ Хороший и плохой дизайн

!5
UI и UX. Что это?

UI User Interface
(пользовательский интерфейс) UX User Experience
(пользовательский опыт)

то, как выглядит интерфейс и то, какие то, какой опыт/впечатление

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

UX/UI дизайнера должен «продать» товар или услугу через интерфейс. Именно на основе
работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?»
Нравится или не нравится. Купить или не купить.

!6
Какие бывают сайты?
немного про типы и инструменты
Типы сайтов
Многостраничник
01
сайт-визитка, корпоративный,
портал, набор одностраничников

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

03 Лендинг (одностраничник)

!8
Многостраничник
сайт-визитка, корпоративный, портал,
набор одностраничников

01 Сайт-визитка

• Содержит несколько страниц с

информацией о компании.
• Минимальный набор информации
об услугах, клиентах, сотрудниках.

Для кого:
• Для начинающих компаний

!9
Многостраничник
сайт-визитка, корпоративный, портал, набор
одностраничников

02 Корпоративный
• Содержит большой объем
информации о компании.
• Услуги, продукция, примеры работ,
контакты, команда, блог компании,
отзывы и т.д.
• Больше страниц чем в сайте-визитке

Для кого:
• Для крупных брендов

!10
Многостраничник
сайт-визитка, корпоративный, портал, набор
одностраничников

03 Портал
• Большой многостраничный сайт.
• Содержит огромный объем информации
в виде статей, гайдов и т.д..
• Может иметь форум.
• Часто выступает в роли рекламной
площадки для других компаний.

Для кого:
• Для крупных компаний, как
дополнительное средство самопиара
• Для компаний, которые хотят получать
доход с рекламы на портале

!11
Интернет магазин
• Продажа товаров
• Личный кабинет для клиентов
• Информация по доставке и оплате
• Контакты компании
• Большое количество страниц

Для кого:
• Для компаний, которые продают
товары оффлайн и хотят
дополнительные продажи из
интернета
• Для компаний, которые продают
онлайн продукты

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

Для кого:
• Для всех

!13
Варианты 01 Дизайн + верстка + CMS

разработки
✓Индивидуальный дизайн,
соответствие брендингу
✓Возможность управлять сайтом,
не ломая дизайн
Минус: дорого, долго
02
02 Онлайн-конструкторы

✓Быстро
✓Дешево
Минус: ограниченный функционал и
дизайн

03 Дизайн + онлайн-констуктор

✓Средняя скорость разработки

✓Дешево
✓Уникальный дизайн
Минус: сайт не является полностью
вашим и вы обязаны платить сервису
за его использование
!14
Онлайн
конструкторы ❖Tilda - простой, современный,
интеграция с разными системами
управления, сбора данных, оплаты
и т.д.

❖Insales - для и-магазинов, но

бесплатных шаблонов не так много

❖Nethouse - недорогой конструктор,

но обновляется реже чем Tilda

❖Wix - многофункциональный
конструктор, но имеет ряд
недостатков, которые сводятся к
огромному кол-ву багов
и т.д.

!15
Этапы создания
сайта:
01 Анализ конкурентов и ЦА

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

текстов

03 Дизайн

04 Верстка

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

06 Подключение сервисов статистики,

оплаты, сбора заявок и т.д.
!16
Процесс работы 01 Узнать ТЗ, заполнить бриф

дизайнера
с заказчиком
02 Приступить к дизайну

03 Утвердить дизайн, правки

04 Создать на Tilda

05 Сделать мобильную версию

06 Технич.настройки, проверить

!17
Где создается
дизайн:
01 02

Photoshop Figma
• Большое кол-во • Простой и интуитивно-
фильтров; понятный интерфейс;
• огромный функционал; • Есть все необходимое
• обработка фото; для создания простого
• создание 3D; сайта.
• запись операций.

сложен для новичка меньше функционал

!18
цвета !19
!20
!21
!22
!23
!24
Домашнее срок сдачи: до 10 марта.

задание
Определить «хороший» и «плохой» дизайн. Написать почему так считаете.
01
Сайты в папке: https://www.dropbox.com/sh/5z2zpzzhf1fd62q/AADfDk_o-
exe3gPnFnDETl4ya?dl=0
Все картинки в папке пронумерованы.

1. Создаете карточку в Trello под своим именем. Называете ее «Задание 1».

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

02 Пройти тест по ссылке: https://forms.gle/azZbrJhgCRixpywD6

!25
Спасибо за
просмотр!

!26