SlideShare a Scribd company logo
1 of 96
Download to read offline
Александр	
  Лисовский	
  
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	
  
Доступно	
  (7-­‐60$/1),	
  качественно	
  




           hCp://www.istockphoto.com	
  
Доступно	
  (5-­‐60$/1),	
  качественно	
  




           hCp://www.shuCerstock.com	
  
Бесплатно,	
  мало	
  качественного	
  




                hCp://sxc.hu	
  
Бесплатно	
  +	
  платно,	
  стараются	
  




             hCp://www.photl.com	
  
Где	
  искать	
  иконки?	
  
hCp://www.iconfinder.com	
  
Где	
  еще	
  искать	
  вдохновение?	
  
hCp://www.appsites.com	
  
Промо	
  страницы	
  
 (landing	
  page)	
  
Что	
  такое	
  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.	
  
    	
  
    Дополнительная	
  информацию	
  должна	
  быть	
  наготове.	
  Именно	
  она	
  
    должна	
  убедить	
  пользователя	
  предпринять	
  необходимое	
  действие.	
  

hCp://habrahabr.ru/post/143923/	
  
hCps://squareup.com	
  
Заголовок	
  
             	
  
             Именно	
  он	
  дает	
  пользователю	
  понять,	
  чего	
  ожидать	
  
             от	
  этой	
  странички	
  и	
  что	
  он	
  попал	
  в	
  нужно	
  место.	
  
             	
  
             У	
  заголовка	
  всего	
  одна	
  цель	
  –	
  заставить	
  
             пользователя	
  оставаться	
  на	
  странице	
  как	
  можно	
  
             дольше.	
  
             	
  
             	
  




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


hCp://habrahabr.ru/post/143923/	
  
hCps://www.weddingpartyapp.com	
  
Простота	
  
    	
  
    Каждый	
  элемент	
  страницы	
  должен	
  подталкивать	
  пользователя	
  
    совершить	
  действие.	
  Убирайте	
  лишнее.	
  
    	
  
    У	
  landing	
  page	
  должен	
  быть	
  один	
  главный	
  call	
  to	
  achon.	
  Цель	
  странички	
  
    должна	
  быть	
  предельно	
  ясна	
  и	
  заключается	
  в	
  том,	
  что	
  пользователю	
  
    необходимо	
  выполнить	
  одно	
  единственное	
  действие.	
  Наличие	
  других	
  
    действий	
  призвано	
  способствовать	
  выполнению	
  главного.	
  
    	
  
    На	
  landing	
  page	
  должно	
  быть	
  много	
  свободного	
  пространства.	
  Слишком	
  
    перегруженная	
  страница	
  может	
  отпугнуть	
  пользователя.	
  




hCp://habrahabr.ru/post/143923/	
  
hCps://www.dropbox.com	
  
Траектория	
  взгляда	
  
    	
  
    Расположите	
  элементы	
  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://habrahabr.ru/post/143923/	
  
hCp://www.letsdothis-­‐now.org	
  
Релевантность	
  
                	
  
                Создавайте	
  отдельные	
  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://habrahabr.ru/post/143923/	
  
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	
  
	
  
	
  

More Related Content

Viewers also liked

Быстродействие веб сайта. Методичный анализ и глубины клиентской оптимизации
Быстродействие веб сайта. Методичный анализ и глубины клиентской оптимизацииБыстродействие веб сайта. Методичный анализ и глубины клиентской оптимизации
Быстродействие веб сайта. Методичный анализ и глубины клиентской оптимизацииYevhen Kotelnytskyi
 
web-design: курс для новичков. День второй.
web-design: курс для новичков. День второй.web-design: курс для новичков. День второй.
web-design: курс для новичков. День второй.Oleksandr Lisovskyi
 
Веб-дизайнер: сайт как интерфейс взаимодействия с пользователями
Веб-дизайнер: сайт как интерфейс взаимодействия с пользователямиВеб-дизайнер: сайт как интерфейс взаимодействия с пользователями
Веб-дизайнер: сайт как интерфейс взаимодействия с пользователямиНетология
 
Компонентный дизайн. Денис Шумов, Михаил Кучин, основатели студии М18.
Компонентный дизайн. Денис Шумов, Михаил Кучин, основатели студии М18.Компонентный дизайн. Денис Шумов, Михаил Кучин, основатели студии М18.
Компонентный дизайн. Денис Шумов, Михаил Кучин, основатели студии М18.SPECIA
 
Web-design: курс для новичков. День второй.
Web-design: курс для новичков. День второй.Web-design: курс для новичков. День второй.
Web-design: курс для новичков. День второй.Oleksandr Lisovskyi
 
Какие бывают стили сайтов в веб-дизайне
Какие бывают стили сайтов в веб-дизайнеКакие бывают стили сайтов в веб-дизайне
Какие бывают стили сайтов в веб-дизайнеRinat Shaikhutdinov
 
Course User interface - Lesson 1
Course User interface - Lesson 1Course User interface - Lesson 1
Course User interface - Lesson 1Oleksandr Lisovskyi
 
Design Course 3 process
Design Course 3 processDesign Course 3 process
Design Course 3 processKostya Gorskiy
 
Dribbble Meetup Odessa
Dribbble Meetup OdessaDribbble Meetup Odessa
Dribbble Meetup OdessaIvan Klimenko
 
Web-design: курс для новичков. День 1.
Web-design: курс для новичков. День 1.Web-design: курс для новичков. День 1.
Web-design: курс для новичков. День 1.Oleksandr Lisovskyi
 
Основы дизайна веб-приложений
Основы дизайна веб-приложенийОсновы дизайна веб-приложений
Основы дизайна веб-приложенийРуслан Раянов
 
Композиция в веб-дизайне
Композиция в веб-дизайнеКомпозиция в веб-дизайне
Композиция в веб-дизайнеEkaterina Andreeva
 
Design in iOS7 (WebCamp 2013)
Design in iOS7 (WebCamp 2013)Design in iOS7 (WebCamp 2013)
Design in iOS7 (WebCamp 2013)Dmitriy Chuta
 
Как не отпугнуть зрителя с первого слайда. Основные ошибки в дизайне презента...
Как не отпугнуть зрителя с первого слайда. Основные ошибки в дизайне презента...Как не отпугнуть зрителя с первого слайда. Основные ошибки в дизайне презента...
Как не отпугнуть зрителя с первого слайда. Основные ошибки в дизайне презента...IdealPresentation.com
 
Веб-дизайнер: горячие тренды профессии
Веб-дизайнер: горячие тренды профессииВеб-дизайнер: горячие тренды профессии
Веб-дизайнер: горячие тренды профессииНетология
 
Развитие дизайнера 2.0
Развитие дизайнера 2.0Развитие дизайнера 2.0
Развитие дизайнера 2.0Nimax
 

Viewers also liked (18)

Быстродействие веб сайта. Методичный анализ и глубины клиентской оптимизации
Быстродействие веб сайта. Методичный анализ и глубины клиентской оптимизацииБыстродействие веб сайта. Методичный анализ и глубины клиентской оптимизации
Быстродействие веб сайта. Методичный анализ и глубины клиентской оптимизации
 
web-design: курс для новичков. День второй.
web-design: курс для новичков. День второй.web-design: курс для новичков. День второй.
web-design: курс для новичков. День второй.
 
Веб-дизайнер: сайт как интерфейс взаимодействия с пользователями
Веб-дизайнер: сайт как интерфейс взаимодействия с пользователямиВеб-дизайнер: сайт как интерфейс взаимодействия с пользователями
Веб-дизайнер: сайт как интерфейс взаимодействия с пользователями
 
Компонентный дизайн. Денис Шумов, Михаил Кучин, основатели студии М18.
Компонентный дизайн. Денис Шумов, Михаил Кучин, основатели студии М18.Компонентный дизайн. Денис Шумов, Михаил Кучин, основатели студии М18.
Компонентный дизайн. Денис Шумов, Михаил Кучин, основатели студии М18.
 
Web-design: курс для новичков. День второй.
Web-design: курс для новичков. День второй.Web-design: курс для новичков. День второй.
Web-design: курс для новичков. День второй.
 
Какие бывают стили сайтов в веб-дизайне
Какие бывают стили сайтов в веб-дизайнеКакие бывают стили сайтов в веб-дизайне
Какие бывают стили сайтов в веб-дизайне
 
Course User interface - Lesson 1
Course User interface - Lesson 1Course User interface - Lesson 1
Course User interface - Lesson 1
 
Design Course 3 process
Design Course 3 processDesign Course 3 process
Design Course 3 process
 
Dribbble Meetup Odessa
Dribbble Meetup OdessaDribbble Meetup Odessa
Dribbble Meetup Odessa
 
Fake lego
Fake legoFake lego
Fake lego
 
Web-design: курс для новичков. День 1.
Web-design: курс для новичков. День 1.Web-design: курс для новичков. День 1.
Web-design: курс для новичков. День 1.
 
Основы дизайна веб-приложений
Основы дизайна веб-приложенийОсновы дизайна веб-приложений
Основы дизайна веб-приложений
 
Композиция в веб-дизайне
Композиция в веб-дизайнеКомпозиция в веб-дизайне
Композиция в веб-дизайне
 
Design in iOS7 (WebCamp 2013)
Design in iOS7 (WebCamp 2013)Design in iOS7 (WebCamp 2013)
Design in iOS7 (WebCamp 2013)
 
Веб - дизайн
Веб - дизайнВеб - дизайн
Веб - дизайн
 
Как не отпугнуть зрителя с первого слайда. Основные ошибки в дизайне презента...
Как не отпугнуть зрителя с первого слайда. Основные ошибки в дизайне презента...Как не отпугнуть зрителя с первого слайда. Основные ошибки в дизайне презента...
Как не отпугнуть зрителя с первого слайда. Основные ошибки в дизайне презента...
 
Веб-дизайнер: горячие тренды профессии
Веб-дизайнер: горячие тренды профессииВеб-дизайнер: горячие тренды профессии
Веб-дизайнер: горячие тренды профессии
 
Развитие дизайнера 2.0
Развитие дизайнера 2.0Развитие дизайнера 2.0
Развитие дизайнера 2.0
 

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

Как ставить задачи [копи]райтеру (Анна Каправчук)
Как ставить задачи [копи]райтеру (Анна Каправчук)Как ставить задачи [копи]райтеру (Анна Каправчук)
Как ставить задачи [копи]райтеру (Анна Каправчук)Асия Дулатова
 
юзабилити не существует
юзабилити не существуетюзабилити не существует
юзабилити не существуетSamson Bezmyatezhny
 
Креативность?! Школа Практической Рекламы А-3 для AIESEC 31.03.12
Креативность?! Школа Практической Рекламы А-3 для AIESEC 31.03.12Креативность?! Школа Практической Рекламы А-3 для AIESEC 31.03.12
Креативность?! Школа Практической Рекламы А-3 для AIESEC 31.03.12A-3 School Of Practical Advertising
 
Интернет-маркетинг для дизайнеров интерьеров
Интернет-маркетинг для дизайнеров интерьеровИнтернет-маркетинг для дизайнеров интерьеров
Интернет-маркетинг для дизайнеров интерьеровMaxim Prikhodko
 
02 сайт метод.отдела02
02   сайт метод.отдела0202   сайт метод.отдела02
02 сайт метод.отдела02Katerina Efimova
 
Юзабилити или как сделать ваш сайт идеальным
Юзабилити или как сделать ваш сайт идеальнымЮзабилити или как сделать ваш сайт идеальным
Юзабилити или как сделать ваш сайт идеальнымDmitry Nikotin
 
Понять и запустить: методика оценки креативных и имиджевых проектов
Понять и запустить: методика оценки креативных и имиджевых проектовПонять и запустить: методика оценки креативных и имиджевых проектов
Понять и запустить: методика оценки креативных и имиджевых проектовmakelove
 
наглядное пособие по Seo копирайтингу
наглядное пособие по Seo копирайтингунаглядное пособие по Seo копирайтингу
наглядное пособие по Seo копирайтингуpoliscnua
 
Seo copywriting ot ingate
Seo copywriting ot ingateSeo copywriting ot ingate
Seo copywriting ot ingatetaranovich
 
Наглядное пособие по Seo копирайтингу
Наглядное пособие по Seo копирайтингуНаглядное пособие по Seo копирайтингу
Наглядное пособие по Seo копирайтингуOlya Rys
 
Наглядное пособие по Seo копирайтингу
Наглядное пособие по Seo копирайтингуНаглядное пособие по Seo копирайтингу
Наглядное пособие по Seo копирайтингуpoliscnua
 
Немного о лендингах
Немного о лендингахНемного о лендингах
Немного о лендингахPavel Trubetskov
 

Similar to Web-design: курс для новичков. День третий. (20)

Experiment Prototyping
Experiment PrototypingExperiment Prototyping
Experiment Prototyping
 
Как ставить задачи [копи]райтеру (Анна Каправчук)
Как ставить задачи [копи]райтеру (Анна Каправчук)Как ставить задачи [копи]райтеру (Анна Каправчук)
Как ставить задачи [копи]райтеру (Анна Каправчук)
 
юзабилити не существует
юзабилити не существуетюзабилити не существует
юзабилити не существует
 
I'm designer!
I'm designer!I'm designer!
I'm designer!
 
Креативность?! Школа Практической Рекламы А-3 для AIESEC 31.03.12
Креативность?! Школа Практической Рекламы А-3 для AIESEC 31.03.12Креативность?! Школа Практической Рекламы А-3 для AIESEC 31.03.12
Креативность?! Школа Практической Рекламы А-3 для AIESEC 31.03.12
 
Интернет-маркетинг для дизайнеров интерьеров
Интернет-маркетинг для дизайнеров интерьеровИнтернет-маркетинг для дизайнеров интерьеров
Интернет-маркетинг для дизайнеров интерьеров
 
Дизайн сайта
Дизайн сайтаДизайн сайта
Дизайн сайта
 
02 сайт метод.отдела02
02   сайт метод.отдела0202   сайт метод.отдела02
02 сайт метод.отдела02
 
Юзабилити или как сделать ваш сайт идеальным
Юзабилити или как сделать ваш сайт идеальнымЮзабилити или как сделать ваш сайт идеальным
Юзабилити или как сделать ваш сайт идеальным
 
Otdelka
OtdelkaOtdelka
Otdelka
 
004 Лекция о дизайне
004 Лекция о дизайне004 Лекция о дизайне
004 Лекция о дизайне
 
uCoz
uCozuCoz
uCoz
 
Project Cilvek
Project CilvekProject Cilvek
Project Cilvek
 
Lsr for istartup_2013
Lsr for istartup_2013Lsr for istartup_2013
Lsr for istartup_2013
 
Понять и запустить: методика оценки креативных и имиджевых проектов
Понять и запустить: методика оценки креативных и имиджевых проектовПонять и запустить: методика оценки креативных и имиджевых проектов
Понять и запустить: методика оценки креативных и имиджевых проектов
 
наглядное пособие по Seo копирайтингу
наглядное пособие по Seo копирайтингунаглядное пособие по Seo копирайтингу
наглядное пособие по Seo копирайтингу
 
Seo copywriting ot ingate
Seo copywriting ot ingateSeo copywriting ot ingate
Seo copywriting ot ingate
 
Наглядное пособие по Seo копирайтингу
Наглядное пособие по Seo копирайтингуНаглядное пособие по Seo копирайтингу
Наглядное пособие по Seo копирайтингу
 
Наглядное пособие по Seo копирайтингу
Наглядное пособие по Seo копирайтингуНаглядное пособие по Seo копирайтингу
Наглядное пособие по Seo копирайтингу
 
Немного о лендингах
Немного о лендингахНемного о лендингах
Немного о лендингах
 

More from Oleksandr Lisovskyi

Робота дизайнера у технологічному стартапі
Робота дизайнера у технологічному стартапіРобота дизайнера у технологічному стартапі
Робота дизайнера у технологічному стартапіOleksandr Lisovskyi
 
Course User interface — Lesson 11
Course User interface — Lesson 11Course User interface — Lesson 11
Course User interface — Lesson 11Oleksandr Lisovskyi
 
Course User interface — Lesson 7
Course User interface — Lesson 7Course User interface — Lesson 7
Course User interface — Lesson 7Oleksandr Lisovskyi
 
Course User interface - Lesson 5
Course User interface - Lesson 5Course User interface - Lesson 5
Course User interface - Lesson 5Oleksandr Lisovskyi
 
Course User interface - Lesson 2
Course User interface - Lesson 2Course User interface - Lesson 2
Course User interface - Lesson 2Oleksandr Lisovskyi
 
3D-печать. Тенденции развития отрасли.
3D-печать. Тенденции развития отрасли.3D-печать. Тенденции развития отрасли.
3D-печать. Тенденции развития отрасли.Oleksandr Lisovskyi
 
О дизайне интерфейсов для HR-IT CLUB
О дизайне интерфейсов для HR-IT CLUBО дизайне интерфейсов для HR-IT CLUB
О дизайне интерфейсов для HR-IT CLUBOleksandr Lisovskyi
 
Web-design: курс для новичков. День пятый.
Web-design: курс для новичков. День пятый.Web-design: курс для новичков. День пятый.
Web-design: курс для новичков. День пятый.Oleksandr Lisovskyi
 
Web-design: курс для новичков. День четвертый.
Web-design: курс для новичков. День четвертый.Web-design: курс для новичков. День четвертый.
Web-design: курс для новичков. День четвертый.Oleksandr Lisovskyi
 
Web-design: курс для новичков. День третий.
Web-design: курс для новичков. День третий.Web-design: курс для новичков. День третий.
Web-design: курс для новичков. День третий.Oleksandr Lisovskyi
 
Web-design: курс для новичков
Web-design: курс для новичковWeb-design: курс для новичков
Web-design: курс для новичковOleksandr Lisovskyi
 

More from Oleksandr Lisovskyi (17)

Робота дизайнера у технологічному стартапі
Робота дизайнера у технологічному стартапіРобота дизайнера у технологічному стартапі
Робота дизайнера у технологічному стартапі
 
Design process
Design processDesign process
Design process
 
Course User interface — Lesson 11
Course User interface — Lesson 11Course User interface — Lesson 11
Course User interface — Lesson 11
 
Best Day of my life
Best Day of my lifeBest Day of my life
Best Day of my life
 
Course User interface — Lesson 7
Course User interface — Lesson 7Course User interface — Lesson 7
Course User interface — Lesson 7
 
Course User interface - Lesson 5
Course User interface - Lesson 5Course User interface - Lesson 5
Course User interface - Lesson 5
 
Course User interface - Lesson 2
Course User interface - Lesson 2Course User interface - Lesson 2
Course User interface - Lesson 2
 
About 3D printing
About 3D printingAbout 3D printing
About 3D printing
 
3D-печать. Тенденции развития отрасли.
3D-печать. Тенденции развития отрасли.3D-печать. Тенденции развития отрасли.
3D-печать. Тенденции развития отрасли.
 
UX. How to start?
UX. How to start?UX. How to start?
UX. How to start?
 
О дизайне интерфейсов для HR-IT CLUB
О дизайне интерфейсов для HR-IT CLUBО дизайне интерфейсов для HR-IT CLUB
О дизайне интерфейсов для HR-IT CLUB
 
ZZ Photo presentation IDCEE2014
ZZ Photo presentation IDCEE2014ZZ Photo presentation IDCEE2014
ZZ Photo presentation IDCEE2014
 
Holy Stories
Holy StoriesHoly Stories
Holy Stories
 
Web-design: курс для новичков. День пятый.
Web-design: курс для новичков. День пятый.Web-design: курс для новичков. День пятый.
Web-design: курс для новичков. День пятый.
 
Web-design: курс для новичков. День четвертый.
Web-design: курс для новичков. День четвертый.Web-design: курс для новичков. День четвертый.
Web-design: курс для новичков. День четвертый.
 
Web-design: курс для новичков. День третий.
Web-design: курс для новичков. День третий.Web-design: курс для новичков. День третий.
Web-design: курс для новичков. День третий.
 
Web-design: курс для новичков
Web-design: курс для новичковWeb-design: курс для новичков
Web-design: курс для новичков
 

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

  • 1. Александр  Лисовский   UX,  UI,  графический  дизайнер  
  • 5. Было   Раздел:  «Как  все  начиналось»  
  • 6. Было   Раздел:  «Как  все  начиналось»  
  • 7. Основные  ошибки:     1.   Отсутствие  заголовка   2.   Кладбище  текста,            которое  скучно  читать     Ищем  решение!  
  • 8. Читаем  текст.  Рисуем  эскизы.  Иллюстрируем.  
  • 9. Читаем  текст.  Рисуем  эскизы.  Иллюстрируем.  
  • 12. Создаем  пустой  слой  под  изображением  
  • 13. Рисуем  кисточкой                тень  
  • 16. Небольшое кафе с отичной куней (Klinkopis) Небольшое кафе с отличной кухней (Neucha) Небольшое кафе с отличной кухней (Neuch) Подбираем  акцидентный  шрифт  
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26. Оригинальная  страница:     hCp://zzwolf.com/ru/page/about-­‐start/  
  • 27.  Трудоголизмъ   37Signals  «Re:Work»,  фото:    Илья  Борщевский  
  • 28. Наша  культура  поощряет   идею  о  трудоголиках.   37Signals  «Re:Work»  
  • 29.
  • 30. Трудоголики  также  упускают   главное.  Они  пытаются  решать   проблемы,  просто  посвящая  им   больше  времени.       Они  хотят  компенсировать   интеллектуальную  лень  грубой   силой.  Это  выливается  в  неизящные   решения.     37Signals  «Re:Work»  
  • 31.
  • 32. Вы  перестаете  быть  способными   решать,  что  стоит  усилий,  а  что  нет.   И  все  заканчивается  усталостью  и   полным  истощением  организма.       Никто  не  в  силах  принимать  важные   решения,  будучи  сильно  уставшим.     37Signals  «Re:Work»  
  • 33. Трудоголики  –  не  герои.  Они  не   берегут  время,  они  просто  сжигают   его.       Настоящий  герой  уже  давно  дома,   он  нашел  более  быстрый  способ   завершить  свои  дела.     37Signals  «Re:Work»  
  • 37. Очень  дорого,  но  очень  качественно   hCp://www.corbisimages.com  
  • 38. Очень  дорого,  но  очень  качественно   hCp://www.geCyimages.com  
  • 42. Бесплатно  +  платно,  стараются   hCp://www.photl.com  
  • 45. Где  еще  искать  вдохновение?  
  • 47. Промо  страницы   (landing  page)  
  • 48. Что  такое  landing  page?     Перед  тем,  как  мы  начнем  давайте  определим  понятие  landing   page:     с  технической  точки  зрения  landing  page  –  это  страница,  которая   состоит  из  таких  же  элементов,  как  и  обычная  веб-­‐страница  (HTML,   CSS,  текст,  картинки,  видео  и  т.д.)   с  точки  зрения  бизнеса  –  это  страница,  которая  подталкивает   пользователя  совершить  требуемое  действие  (покупка  или   подписка)   с  точки  зрения  пользователя  –  это  страница,  на  которую  он   перешел  по  ссылке  с  другого  сайта  (из  поисковика,  твиттера,   кликнув  на  баннер)     hCp://habrahabr.ru/post/143923/  
  • 49. Зачем?     Три  наиболее  частых  причины  создания  landing  page:   1.  заставить  пользователя  зарегистрироваться  или   подписаться  на  рассылку     2.  продать  конкретный  продукт  в  конкретной  ситуации   (распродажа  или  промо-­‐акция)     3.  заставить  пользователя  скачать  или  установить  софт   hCp://habrahabr.ru/post/143923/  
  • 50. Сall  to  achons     Выражайтесь  четко.  Конкретно  говорите  пользователю,  что  именно  он   должен  сделать  и  что  будет  потом.     Не  злоупотребляйте  call  to  achon-­‐ами.  Если  на  сайте  их  немного,  то   можно  сфокусироваться  на  том,  чтобы  пользователь  предпринял   желаемое  действие  как  можно  скорее.     Используйте  кнопки.  Кнопки  –  это  традиционный  контрол  и  любой   пользователь  знает,  что  по  нему  можно  кликнуть.  Хороший  дизайн   кнопки  еще  раз  обращает  внимание  на  call  to  ac‰on.     Дополнительная  информацию  должна  быть  наготове.  Именно  она   должна  убедить  пользователя  предпринять  необходимое  действие.   hCp://habrahabr.ru/post/143923/  
  • 52. Заголовок     Именно  он  дает  пользователю  понять,  чего  ожидать   от  этой  странички  и  что  он  попал  в  нужно  место.     У  заголовка  всего  одна  цель  –  заставить   пользователя  оставаться  на  странице  как  можно   дольше.       hCp://habrahabr.ru/post/143923/  
  • 53. Заголовок     Пишите  простые  и  короткие  заголовки.  Не  тратьте  время  пользователя,   объясните  ему  главную  идею  того,  что  он  может  получить  на  этом  сайте   как  можно  скорее.     Дизайн  должен  привлекать  внимание  пользователя.  Используйте   большой  шрифт  и  располагайте  заголовок  на  заметном  месте  –  вверху   страницы,  там  где  ему  положено  быть.     Используйте  релевантные  слова.  Используйте  слова  и  фразы,  благодаря   которым  пользователи  придут  к  Вам  из  поисковиков  –  используйте  тэги   h1  и  h2  для  заголовков.     hCp://habrahabr.ru/post/143923/  
  • 55. Простота     Каждый  элемент  страницы  должен  подталкивать  пользователя   совершить  действие.  Убирайте  лишнее.     У  landing  page  должен  быть  один  главный  call  to  achon.  Цель  странички   должна  быть  предельно  ясна  и  заключается  в  том,  что  пользователю   необходимо  выполнить  одно  единственное  действие.  Наличие  других   действий  призвано  способствовать  выполнению  главного.     На  landing  page  должно  быть  много  свободного  пространства.  Слишком   перегруженная  страница  может  отпугнуть  пользователя.   hCp://habrahabr.ru/post/143923/  
  • 57. Траектория  взгляда     Расположите  элементы  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://habrahabr.ru/post/143923/  
  • 59. Релевантность     Создавайте  отдельные  landing  page  для  каждой   маркетинговой  кампании.  Если  Вы  делаете  рекламную   компанию  с  Facebook,  то  это  должно  быть  отражено  на   landing  page.     Landing  page  должна  меняться  в  зависимости  от  источника   –  добавляйте  контент,  промо-­‐коды  и  call  to  ac‰on-­‐ы.   hCp://habrahabr.ru/post/143923/  
  • 60. Битва  за  доверие     Предлагайте  убедительную  гарантию.  Например,  если  Вы  предлагаете   купить  товар,  то  нужно  предусмотреть  возможность  возврата  их  денег,   если  они  не  удовлетворены  приобретенным.     Постарайтесь  предвидеть,  в  чем  будет  сомневаться  пользователь  и   убедите  его  в  обратном.  Расскажите  подробнее,  что  пользователь   получит,  совершив  такое  действие.  Чаще  всего  беспокойство  связано  с   расходами,  временем  или  безопасностью.     Если  возможно,  то  предлагайте  попробовать  услугу  или  товар   бесплатно.  Например,  если  Вы  продаете  платную  услугу  и  имеется   несколько  тарифов,  то  предусмотрите  наличие  бесплатного  тарифа  где   не  нужно  будет  указывать  данные  кредитной  карты.   hCp://habrahabr.ru/post/143923/  
  • 61. Битва  за  доверие     Размещайте  социальные  данные  из  авторитетных  и   известных  веб-­‐сервисов.  Хорошим  примером  является   количество  лайков  в  Facebook.     Используйте  элементы  доверия  связанные  с  call  to  achon  и   размещайте  их  рядом.     Будьте  честными.  Не  стоит  публиковать  поддельные   статусы  или  отзывы  с  других  сайтов.   hCp://habrahabr.ru/post/143923/  
  • 65. Дефицит     Помещайте  на  странице  текст,  который  передает   ощущение  срочности.  Например,  четко  заявив,  что   специальные  скидки  скоро  закончатся,  можно  призвать   пользователей  купить  товар  прямо  сейчас.     Динамически  обновляйте  информацию,  сообщающую  о   дефиците.  Например,  можно  показать  на  странице  счетчик   количества  оставшихся  товаров.   hCp://habrahabr.ru/post/143923/  
  • 66.
  • 67. Можно  повторить?   с  начала…  
  • 68. Сайт  для  iPhone  приложения,   которое  помогает     приготовиться  к  свадьбе  
  • 69.
  • 70.
  • 71.
  • 72.
  • 73. Группа  А:     сайт  анимационного  проекта  
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 93. Разбор  домашки:  сайт  телеканала  
  • 94.
  • 95.
  • 96. Александр  Лисовский   Менеджер  продукта  в  ZZWolf   UX,  UI,  графический  дизайнер     (063)  304-­‐54-­‐85   alexander.lisovsky@gmail.com   facebook.com/alexlisovsky   pinterest.com/alexlisovsky