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

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

Upload: alexander-lisovsky

Post on 18-Jan-2015

836 views

Category:

Design


2 download

DESCRIPTION

 

TRANSCRIPT

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

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

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

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

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

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

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

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

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

Было  

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

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

Было  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рефлекс  

Page 19: Web-design: курс для новичков. День третий
Page 20: Web-design: курс для новичков. День третий
Page 21: Web-design: курс для новичков. День третий
Page 22: Web-design: курс для новичков. День третий
Page 23: Web-design: курс для новичков. День третий
Page 24: Web-design: курс для новичков. День третий
Page 25: Web-design: курс для новичков. День третий
Page 26: Web-design: курс для новичков. День третий

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

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

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

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

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

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

37Signals  «Re:Work»  

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

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

37Signals  «Re:Work»  

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

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

37Signals  «Re:Work»  

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

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

37Signals  «Re:Work»  

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

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

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

hCp://www.google.com  

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

Copyright  

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

hCp://www.corbisimages.com  

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

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

hCp://www.geCyimages.com  

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

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

hCp://www.istockphoto.com  

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

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

hCp://www.shuCerstock.com  

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

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

hCp://sxc.hu  

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

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

hCp://www.photl.com  

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

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

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

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

hCp://www.iconfinder.com  

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

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

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

hCp://www.appsites.com  

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

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

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

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

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

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

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

Зачем?  

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

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

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

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

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

hCps://squareup.com  

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

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

Заголовок  

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

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

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

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

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

hCps://www.weddingpartyapp.com  

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

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

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

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

hCps://www.dropbox.com  

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

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».    Используйте  графические  элементы.  Стрелки,  иконки  и  яркие  картинки  могут  помочь  направить  взгляд  пользователя  на  нужную  область  страницы.    Используйте  контрастные  цвета  для  определенных  компонентов  веб-­‐страницы.  Яркие  элементы  выделяются,  привлекая  к  себе  внимание.  

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

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

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

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

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

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

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

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

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

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

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

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

hCp://www.freshbooks.com  

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

hCp://www.freshbooks.com  

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

hCp://www.freshbooks.com  

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

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

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

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

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

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

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

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

Page 69: Web-design: курс для новичков. День третий
Page 70: Web-design: курс для новичков. День третий
Page 71: Web-design: курс для новичков. День третий
Page 72: Web-design: курс для новичков. День третий
Page 73: Web-design: курс для новичков. День третий

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

Page 74: Web-design: курс для новичков. День третий
Page 75: Web-design: курс для новичков. День третий
Page 76: Web-design: курс для новичков. День третий
Page 77: Web-design: курс для новичков. День третий
Page 78: Web-design: курс для новичков. День третий
Page 79: Web-design: курс для новичков. День третий
Page 80: Web-design: курс для новичков. День третий
Page 81: Web-design: курс для новичков. День третий
Page 82: Web-design: курс для новичков. День третий
Page 83: Web-design: курс для новичков. День третий
Page 84: Web-design: курс для новичков. День третий
Page 85: Web-design: курс для новичков. День третий
Page 86: Web-design: курс для новичков. День третий
Page 87: Web-design: курс для новичков. День третий
Page 88: Web-design: курс для новичков. День третий
Page 89: Web-design: курс для новичков. День третий
Page 90: Web-design: курс для новичков. День третий
Page 91: Web-design: курс для новичков. День третий
Page 92: Web-design: курс для новичков. День третий

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

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

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

Page 94: Web-design: курс для новичков. День третий
Page 95: Web-design: курс для новичков. День третий
Page 96: Web-design: курс для новичков. День третий

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