Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ПРОЕКТИРОВАНИЕ
ИНТЕРФЕЙСОВ
занятие №3
Alexander Lisovsky
Co-Founder at ZZ Photo, UX/UI designer
a.lisovsky@zzphoto.me
facebook.com/alexlisovsky, pinterest.com/a...
Если бы дизайнеры…
youtube.com/watch?v=oxUbXgGnSyA
Промо страницы
(landing page)
http://habrahabr.ru/post/143923/
Что такое landing page?
Определим понятие landing page:
С технической точки зрения landin...
http://habrahabr.ru/post/143923/
Зачем?
Три наиболее частых причины создания landing page:
1. заставить пользователя зарег...
http://habrahabr.ru/post/143923/
Сall to actions
Выражайтесь четко. Конкретно говорите пользователю, что именно
он должен ...
https://squareup.com
http://habrahabr.ru/post/143923/
Заголовок
Именно он дает пользователю понять, чего ожидать
от этой странички и что он поп...
http://habrahabr.ru/post/143923/
Заголовок
Пишите простые и короткие заголовки. Не тратьте время
пользователя, объясните е...
https://www.weddingpartyapp.com
http://habrahabr.ru/post/143923/
Простота
Каждый элемент страницы должен подталкивать
пользователя совершить действие. Уби...
https://www.dropbox.com
http://habrahabr.ru/post/143923/
Траектория взгляда
Расположите элементы landing page в логической визуальной
последовател...
http://www.letsdothis-now.org
http://habrahabr.ru/post/143923/
Релевантность
Создавайте отдельные landing page для каждой
маркетинговой кампании. Если В...
http://habrahabr.ru/post/143923/
Битва за доверие
Предлагайте убедительную гарантию. Например, если Вы
предлагаете купить ...
http://habrahabr.ru/post/143923/
Битва за доверие
Размещайте социальные данные из
авторитетных и известных веб-сервисов.
Х...
http://www.freshbooks.com
http://www.freshbooks.com
http://www.freshbooks.com
http://habrahabr.ru/post/143923/
Дефицит
Помещайте на странице текст, который передает
ощущение срочности. Например, четко...
Можно повторить?
с начала…
Неужели Photoshop?!
File > New
Модульная сетка: колонки
Модульная сетка: текстовая сетка
Модульная сетка: блоки
Практическое задание:
Индивидуальное задание.
Времени: 135 минут.
Создаем главную страницу по шаблону
http://london-templa...
Оформление содержания
сайта
http://we-make-lj.livejournal.com
1. Заголовки
H1 - он в названии страницы
H2 - делит страницу на смысловые блоки
H3 - дробит смысловые блоки
H4 - чуть боль...
2. Тексты
абзац основного набора
большой текст, для выделения важной
информации
малый тект, для сносок, примечаний,
подпис...
3. Списки
ненумерованный список, с буллитами
нумерованный список
вложенный список (не больше одного
уровня вложенности)
ht...
4. Ссылки
обычные ссылки в тексте
обычное состояние
наведенная
посещенная
второстепенные ссылки (например теги или хлебные...
5. Псевдоактивность
аккордеон (для примера на 3-4 пункта)
обычное состояние, с одним развернутым
пунктом, и на один из дру...
6. Иллюстрации
полосная иллюстрация, на всю ширину поля набора
иллюстрация в нутри блока текста
иллюстрация, которая при к...
7. Таблицы
один стиль оформления простой таблицы
второй стиль оформления более сложной
таблицы
http://we-make-lj.livejourn...
8. Формы
Простая форма, помещенная внутрь страницы
(например «Обратная связь» или «Регистрация»)
содержит в себе:
сам блок...
9. Компоновки
(3) в одну колонку (основной набор)
(1:1:1) в три равных колонки
(2:1) в две колонки: большая и малая
(1:2) ...
10. Файлы для скачивания
Word (doc, docx, rtf)
Excel
PDF
RAR
ZIP
любой другой формат (общая иконка)
http://we-make-lj.live...
Теперь точно, все понял!
Рекомендуемые уроки по Photoshop:
Google “Photoshop video tutorials for beginners”
Alexander Lisovsky
Co-Founder at ZZ Photo
UX/UI designer
a.lisovsky@zzphoto.me
facebook.com/alexlisovsky, pinterest.com/al...
Course User interface - Lesson 3
Course User interface - Lesson 3
Course User interface - Lesson 3
Course User interface - Lesson 3
Course User interface - Lesson 3
Course User interface - Lesson 3
Course User interface - Lesson 3
Course User interface - Lesson 3
Course User interface - Lesson 3
Course User interface - Lesson 3
Course User interface - Lesson 3
Course User interface - Lesson 3
Course User interface - Lesson 3
Course User interface - Lesson 3
Course User interface - Lesson 3
Upcoming SlideShare
Loading in …5
×

Course User interface - Lesson 3

938 views

Published on

Course User interface at Bionic University by Oleksandr Lisovskyi

Published in: Design
  • Login to see the comments

Course User interface - Lesson 3

  1. 1. ПРОЕКТИРОВАНИЕ ИНТЕРФЕЙСОВ занятие №3
  2. 2. Alexander Lisovsky Co-Founder at ZZ Photo, UX/UI designer a.lisovsky@zzphoto.me facebook.com/alexlisovsky, pinterest.com/alexlisovsky, twitter.com/lisovsky
  3. 3. Если бы дизайнеры… youtube.com/watch?v=oxUbXgGnSyA
  4. 4. Промо страницы (landing page)
  5. 5. http://habrahabr.ru/post/143923/ Что такое landing page? Определим понятие landing page: С технической точки зрения landing page – это обычная веб-страница (HTML, CSS, текст, картинки, видео и т.д.) С точки зрения бизнеса – это страница, которая подталкивает пользователя совершить требуемое действие (покупка или подписка) С точки зрения пользователя – это страница, на которую он перешел по ссылке с другого сайта (из поисковика, твиттера, кликнув на баннер)
  6. 6. http://habrahabr.ru/post/143923/ Зачем? Три наиболее частых причины создания landing page: 1. заставить пользователя зарегистрироваться или подписаться на рассылку 2. продать конкретный продукт в конкретной ситуации (распродажа или промо-акция) 3. заставить пользователя скачать или установить софт
  7. 7. http://habrahabr.ru/post/143923/ Сall to actions Выражайтесь четко. Конкретно говорите пользователю, что именно он должен сделать и что будет потом. Не злоупотребляйте call to action-ами. Если на сайте их мало, то можно сфокусироваться на том, чтобы пользователь предпринял желаемое действие как можно скорее. Используйте кнопки. Кнопки – это традиционный контрол и любой пользователь знает, что по нему можно кликнуть. Хороший дизайн кнопки еще раз обращает внимание на call to action. Дополнительная информацию должна быть наготове. Именно она должна убедить пользователя предпринять необходимое действие.
  8. 8. https://squareup.com
  9. 9. http://habrahabr.ru/post/143923/ Заголовок Именно он дает пользователю понять, чего ожидать от этой странички и что он попал в нужно место. У заголовка всего одна цель – заставить пользователя оставаться на странице как можно дольше.
  10. 10. http://habrahabr.ru/post/143923/ Заголовок Пишите простые и короткие заголовки. Не тратьте время пользователя, объясните ему главную идею того, что он может получить на этом сайте как можно скорее. Дизайн должен привлекать внимание пользователя. Используйте большой шрифт и располагайте заголовок на заметном месте – вверху страницы, там где ему положено быть. Используйте релевантные слова. Используйте слова и фразы, благодаря которым пользователи придут к Вам из поисковиков – используйте тэги h1 и h2 для заголовков.
  11. 11. https://www.weddingpartyapp.com
  12. 12. http://habrahabr.ru/post/143923/ Простота Каждый элемент страницы должен подталкивать пользователя совершить действие. Убирайте лишнее. У landing page должен быть один главный call to action. Цель странички должна быть предельно ясна и заключается в том, что пользователю необходимо выполнить одно единственное действие. Наличие других действий призвано способствовать выполнению главного. На landing page должно быть много свободного пространства. Слишком перегруженная страница может отпугнуть пользователя.
  13. 13. https://www.dropbox.com
  14. 14. http://habrahabr.ru/post/143923/ Траектория взгляда Расположите элементы landing page в логической визуальной последовательности. Определите порядок, в котором нужно просматривать элементы и придерживайтесь его. Узнать больше о визуальной последовательности можно тут: http://sixrevisions.com/graphics-design/visual-weight-designs/ Используйте графические элементы. Стрелки, иконки и яркие картинки могут помочь направить взгляд пользователя на нужную область страницы. Используйте контрастные цвета для определенных компонентов веб-страницы. Яркие элементы выделяются, привлекая к себе внимание.
  15. 15. http://www.letsdothis-now.org
  16. 16. http://habrahabr.ru/post/143923/ Релевантность Создавайте отдельные landing page для каждой маркетинговой кампании. Если Вы делаете рекламную компанию с Facebook, то это должно быть отражено на landing page. Landing page должна меняться в зависимости от источника – добавляйте контент, промо-коды и call to action-ы.
  17. 17. http://habrahabr.ru/post/143923/ Битва за доверие Предлагайте убедительную гарантию. Например, если Вы предлагаете купить товар, то нужно предусмотреть возможность возврата их денег, если они не удовлетворены приобретенным. Постарайтесь предвидеть, в чем будет сомневаться пользователь и убедите его в обратном. Расскажите подробнее, что пользователь получит, совершив такое действие. Чаще всего беспокойство связано с расходами, временем или безопасностью. Если возможно, то предлагайте попробовать услугу или товар бесплатно. Например, если Вы продаете платную услугу и имеется несколько тарифов, то предусмотрите наличие бесплатного тарифа где не нужно будет указывать данные кредитной карты.
  18. 18. http://habrahabr.ru/post/143923/ Битва за доверие Размещайте социальные данные из авторитетных и известных веб-сервисов. Хорошим примером является количество лайков в Facebook. Используйте элементы доверия связанные с call to action и размещайте их рядом. Будьте честными. Не стоит публиковать поддельные статусы или отзывы с других сайтов.
  19. 19. http://www.freshbooks.com
  20. 20. http://www.freshbooks.com
  21. 21. http://www.freshbooks.com
  22. 22. http://habrahabr.ru/post/143923/ Дефицит Помещайте на странице текст, который передает ощущение срочности. Например, четко заявив, что специальные скидки скоро закончатся, можно призвать пользователей купить товар прямо сейчас. Динамически обновляйте информацию, сообщающую о дефиците. Например, можно показать на странице счетчик количества оставшихся товаров.
  23. 23. Можно повторить? с начала…
  24. 24. Неужели Photoshop?!
  25. 25. File > New
  26. 26. Модульная сетка: колонки
  27. 27. Модульная сетка: текстовая сетка
  28. 28. Модульная сетка: блоки
  29. 29. Практическое задание: Индивидуальное задание. Времени: 135 минут. Создаем главную страницу по шаблону http://london-template.webflow.com/
  30. 30. Оформление содержания сайта http://we-make-lj.livejournal.com
  31. 31. 1. Заголовки H1 - он в названии страницы H2 - делит страницу на смысловые блоки H3 - дробит смысловые блоки H4 - чуть больше основного набора H5 - равный шрифту основного набора http://we-make-lj.livejournal.com
  32. 32. 2. Тексты абзац основного набора большой текст, для выделения важной информации малый тект, для сносок, примечаний, подписей к иллюстрациям цитата маркер, для выделение фоном важной информации http://we-make-lj.livejournal.com
  33. 33. 3. Списки ненумерованный список, с буллитами нумерованный список вложенный список (не больше одного уровня вложенности) http://we-make-lj.livejournal.com
  34. 34. 4. Ссылки обычные ссылки в тексте обычное состояние наведенная посещенная второстепенные ссылки (например теги или хлебные крошки) обычное состояние наведенная псевдоссылки (открывает слой или данные без перезагрузки экрана) обычное состояние наведенная ссылка, которая открывает e-mail ссылка, которая открывает звонок Skype ссылка, которая откроется в новом окне ссылка, которая открывает ссылку на карту (Google, Yandex) http://we-make-lj.livejournal.com
  35. 35. 5. Псевдоактивность аккордеон (для примера на 3-4 пункта) обычное состояние, с одним развернутым пунктом, и на один из других пунктов наведен курсор табы (для примера 3-4 пункта) один пункт развернут и активен, один пункт спокойный/обычный, на один наведен курсор tooltip (подсказка) для аббривиатур, показано как выделяется текст, и всплывшая подсказка при наведении курсора (+ смена внешнего вида курсора) http://we-make-lj.livejournal.com
  36. 36. 6. Иллюстрации полосная иллюстрация, на всю ширину поля набора иллюстрация в нутри блока текста иллюстрация, которая при клике открывает бОльшую картинку (обычное состояние и с наведенным курсором) фотогаллерея, внутри текста общий вид фотогаллереи, один элемент с наведенным курсором открыта большая картинка видеоплеер внутри контента (если нет нужды разрабатывать свой плеер, а использовать готовый, то я рекомендую использовать Vimeo: он бесплатный, его легко социализировать, и он настраивается по внешнему виду и цветовой гамме, благодаря чему его можно вписать в дизайн) http://we-make-lj.livejournal.com
  37. 37. 7. Таблицы один стиль оформления простой таблицы второй стиль оформления более сложной таблицы http://we-make-lj.livejournal.com
  38. 38. 8. Формы Простая форма, помещенная внутрь страницы (например «Обратная связь» или «Регистрация») содержит в себе: сам блок form поля строчного ввода (input), показано обычное поле недоступное поле поле в которое сейчас происходит ввод поле в котором ошибочные данные поле ввода текста (textarea) размещение названия поля показано как реализовать поля, обязательные для заполнения (*) подсказка к полю в каком формате нужно вводить данные. подсказку о сообщении того, что какое-то поле заполнено неправильно галочки checkbox, в двух состояниях (пустая и чекнутая) http://we-make-lj.livejournal.com capcha, для проверки человечности обычное состояние сообщение, что капчу заполнили неверно состояния обычных кнопок: обычное состояние наведенная недоступная прогресс выполнения состояния кнопки по-умолчанию (более важной, например «Отправить» или «Добавить») обычное состояние наведенная прогресс выполнения сообщения ОК, ваше сообщение отправлено Ошибка, не удалось отправить сообщение
  39. 39. 9. Компоновки (3) в одну колонку (основной набор) (1:1:1) в три равных колонки (2:1) в две колонки: большая и малая (1:2) в две колонки: малая и большая (1:1) в две равные колонки Других дроблений внутри поля контента данный дизайн не предусматривает. Для других проектов могут быть другие варианты компоновок, которые обуславливаются дизайном и модульной сеткой проекта. http://we-make-lj.livejournal.com
  40. 40. 10. Файлы для скачивания Word (doc, docx, rtf) Excel PDF RAR ZIP любой другой формат (общая иконка) http://we-make-lj.livejournal.com
  41. 41. Теперь точно, все понял!
  42. 42. Рекомендуемые уроки по Photoshop: Google “Photoshop video tutorials for beginners”
  43. 43. Alexander Lisovsky Co-Founder at ZZ Photo UX/UI designer a.lisovsky@zzphoto.me facebook.com/alexlisovsky, pinterest.com/alexlisovsky, twitter.com/lisovsky

×