web-design: курс для новичков. День третий

Александр  Лисовский  UX,  UI,  графический  дизайнер  

Сайт  благотворительного  проекта  

Сайт  благотворительного  проекта  

Оформление  содержания  

Было  

Раздел:  «Как  все  начиналось»  

Было  

Раздел:  «Как  все  начиналось»  

Основные  ошибки:    1.   Отсутствие  заголовка  2.   Кладбище  текста,            которое  скучно  читать    Ищем  решение!  

Читаем  текст.  Рисуем  эскизы.  Иллюстрируем.  

Читаем  текст.  Рисуем  эскизы.  Иллюстрируем.  

Находим  стиль  оформления  изображения  

Внутренняя  рамка  изображения  

Создаем  пустой  слой  под  изображением  

Рисуем  кисточкой                тень  

Группируем  слои  в  папку  

Получилось  аккуратно  :)  

Небольшое кафе с отичной куней (Klinkopis)

Небольшое кафе с отличной кухней (Neucha)

Небольшое кафе с отличной кухней (Neuch)

Подбираем  акцидентный  шрифт  

Подбираем  разделительный  объект  (divider)  

Рефлекс  

Оригинальная  страница:    hCp://zzwolf.com/ru/page/about-­‐start/  

 Трудоголизмъ  

37Signals  «Re:Work»,  фото:    Илья  Борщевский  

Наша  культура  поощряет  идею  о  трудоголиках.  

37Signals  «Re:Work»  

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

37Signals  «Re:Work»  

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

37Signals  «Re:Work»  

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

37Signals  «Re:Work»  

Где  искать  фото?  

hCp://www.google.com  

Copyright  

hCp://www.corbisimages.com  

Очень  дорого,  но  очень  качественно  

hCp://www.geCyimages.com  

Очень  дорого,  но  очень  качественно  

hCp://www.istockphoto.com  

Доступно  (7-­‐60$/1),  качественно  

hCp://www.shuCerstock.com  

Доступно  (5-­‐60$/1),  качественно  

hCp://sxc.hu  

Бесплатно,  мало  качественного  

hCp://www.photl.com  

Бесплатно  +  платно,  стараются  

Где  искать  иконки?  

hCp://www.iconfinder.com  

Где  еще  искать  вдохновение?  

hCp://www.appsites.com  

Промо  страницы  (landing  page)  

hCp://habrahabr.ru/post/143923/  

Что  такое  landing  page?    Перед  тем,  как  мы  начнем  давайте  определим  понятие  landing  page:    с  технической  точки  зрения  landing  page  –  это  страница,  которая  состоит  из  таких  же  элементов,  как  и  обычная  веб-­‐страница  (HTML,  CSS,  текст,  картинки,  видео  и  т.д.)  с  точки  зрения  бизнеса  –  это  страница,  которая  подталкивает  пользователя  совершить  требуемое  действие  (покупка  или  подписка)  с  точки  зрения  пользователя  –  это  страница,  на  которую  он  перешел  по  ссылке  с  другого  сайта  (из  поисковика,  твиттера,  кликнув  на  баннер)    

hCp://habrahabr.ru/post/143923/  

Зачем?  

 Три  наиболее  частых  причины  создания  landing  page:  1.  заставить  пользователя  зарегистрироваться  или  подписаться  на  рассылку    2.  продать  конкретный  продукт  в  конкретной  ситуации  (распродажа  или  промо-­‐акция)    3.  заставить  пользователя  скачать  или  установить  софт  

hCp://habrahabr.ru/post/143923/  

Сall  to  achons    Выражайтесь  четко.  Конкретно  говорите  пользователю,  что  именно  он  должен  сделать  и  что  будет  потом.    Не  злоупотребляйте  call  to  achon-­‐ами.  Если  на  сайте  их  немного,  то  можно  сфокусироваться  на  том,  чтобы  пользователь  предпринял  желаемое  действие  как  можно  скорее.    Используйте  кнопки.  Кнопки  –  это  традиционный  контрол  и  любой  пользователь  знает,  что  по  нему  можно  кликнуть.  Хороший  дизайн  кнопки  еще  раз  обращает  внимание  на  call  to  ac�on.    Дополнительная  информацию  должна  быть  наготове.  Именно  она  должна  убедить  пользователя  предпринять  необходимое  действие.  

hCps://squareup.com  

hCp://habrahabr.ru/post/143923/  

Заголовок  

 Именно  он  дает  пользователю  понять,  чего  ожидать  от  этой  странички  и  что  он  попал  в  нужно  место.    У  заголовка  всего  одна  цель  –  заставить  пользователя  оставаться  на  странице  как  можно  дольше.      

hCp://habrahabr.ru/post/143923/  

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

hCps://www.weddingpartyapp.com  

hCp://habrahabr.ru/post/143923/  

Простота    Каждый  элемент  страницы  должен  подталкивать  пользователя  совершить  действие.  Убирайте  лишнее.    У  landing  page  должен  быть  один  главный  call  to  achon.  Цель  странички  должна  быть  предельно  ясна  и  заключается  в  том,  что  пользователю  необходимо  выполнить  одно  единственное  действие.  Наличие  других  действий  призвано  способствовать  выполнению  главного.    На  landing  page  должно  быть  много  свободного  пространства.  Слишком  перегруженная  страница  может  отпугнуть  пользователя.  

hCps://www.dropbox.com  

hCp://habrahabr.ru/post/143923/  

Траектория  взгляда    Расположите  элементы  landing  page  в  логической  визуальной  последовательности.  Определите  порядок,  в  котором  нужно  просматривать  элементы  и  придерживайтесь  его.  Узнать  больше  о  визуальной  последовательности  можно  тут:  «Working  with  Visual  Weight  in  Your  Designs»,  «Crea�ng  Focal  Points  in  Your  Web  Design»  «Using  Power  Structure  and  Gestalt  for  Visual  Hierarchy».    Используйте  графические  элементы.  Стрелки,  иконки  и  яркие  картинки  могут  помочь  направить  взгляд  пользователя  на  нужную  область  страницы.    Используйте  контрастные  цвета  для  определенных  компонентов  веб-­‐страницы.  Яркие  элементы  выделяются,  привлекая  к  себе  внимание.  

hCp://www.letsdothis-­‐now.org  

hCp://habrahabr.ru/post/143923/  

Релевантность    Создавайте  отдельные  landing  page  для  каждой  маркетинговой  кампании.  Если  Вы  делаете  рекламную  компанию  с  Facebook,  то  это  должно  быть  отражено  на  landing  page.    Landing  page  должна  меняться  в  зависимости  от  источника  –  добавляйте  контент,  промо-­‐коды  и  call  to  ac�on-­‐ы.  

hCp://habrahabr.ru/post/143923/  

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

hCp://habrahabr.ru/post/143923/  

Битва  за  доверие    Размещайте  социальные  данные  из  авторитетных  и  известных  веб-­‐сервисов.  Хорошим  примером  является  количество  лайков  в  Facebook.    Используйте  элементы  доверия  связанные  с  call  to  achon  и  размещайте  их  рядом.    Будьте  честными.  Не  стоит  публиковать  поддельные  статусы  или  отзывы  с  других  сайтов.  

hCp://www.freshbooks.com  

hCp://www.freshbooks.com  

hCp://www.freshbooks.com  

hCp://habrahabr.ru/post/143923/  

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

Можно  повторить?  с  начала…  

Сайт  для  iPhone  приложения,  которое  помогает    

приготовиться  к  свадьбе  

Группа  А:    сайт  анимационного  проекта  

Разбор  полетов  

Разбор  домашки:  сайт  телеканала  

Александр  Лисовский  Менеджер  продукта  в  ZZWolf  UX,  UI,  графический  дизайнер    (063)  304-­‐54-­‐85  alexander.lisovsky@gmail.com  facebook.com/alexlisovsky  pinterest.com/alexlisovsky