SlideShare a Scribd company logo
6	
  
день	
  	
  




                  Web-­‐design:	
  	
  
               курс	
  для	
  новичков	
  
                  Александр	
  Лисовский	
  
                  UX,	
  UI,	
  графический	
  дизайнер	
  
 Трудоголизмъ	
  




37Signals	
  «Re:Work»,	
  фото:	
  	
  Илья	
  Борщевский	
  
Наша	
  культура	
  поощряет	
  
                              идею	
  о	
  трудоголиках.	
  




37Signals	
  «Re:Work»	
  
Трудоголики	
  также	
  упускают	
  
                      главное.	
  Они	
  пытаются	
  решать	
  
                      проблемы,	
  просто	
  посвящая	
  им	
  
                      больше	
  времени.	
  	
  
                      	
  
                      Они	
  хотят	
  компенсировать	
  
                      интеллектуальную	
  лень	
  грубой	
  
                      силой.	
  Это	
  выливается	
  в	
  неизящные	
  
                      решения.	
  	
  

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


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


37Signals	
  «Re:Work»	
  
Полезно	
  




hap://webdesignledger.com/inspiraion/inspiring-­‐wireframe-­‐sketches	
  
Полезно	
  




hap://leaerday.ru	
  
Модульная	
  сетка.	
  Продолжение.	
  
Выключите	
  отображение	
  слоя	
  фона	
  
Шрифтовая	
  сетка-­‐«зебра»	
  
Вертикальное	
  деление	
  на	
  12	
  колонок	
  
Объединяем	
  по	
  3	
  строки	
  в	
  один	
  пояс.	
  	
  
Просвет	
  между	
  поясами	
  делаем	
  в	
  одну	
  строку,	
  тем	
  самым	
  сохраняем	
  вертикальный	
  ритм.	
  
Можно	
  приступать	
  
Оформление	
  содержания	
  
Было	
  




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




Раздел:	
  «Как	
  все	
  начиналось»	
  
Основные	
  ошибки:	
  
	
  
1. 	
  Отсутствие	
  заголовка	
  
2. 	
  Кладбище	
  текста,	
  	
  
	
  	
  	
  	
  которое	
  скучно	
  читать	
  
	
  
Ищем	
  решение!	
  
Читаем	
  текст.	
  Рисуем	
  эскизы.	
  Иллюстрируем.	
  
Читаем	
  текст.	
  Рисуем	
  эскизы.	
  Иллюстрируем.	
  
Находим	
  стиль	
  оформления	
  изображения	
  
Внутренняя	
  рамка	
  изображения	
  
Создаем	
  пустой	
  слой	
  под	
  изображением	
  
Рисуем	
  кисточкой	
  	
  	
  	
  	
  	
  	
  	
  тень	
  
Группируем	
  слои	
  в	
  папку	
  
Получилось	
  аккуратно	
  :)	
  
Небольшое кафе
с отичной куней (Klinkopis)

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

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

Подбираем	
  акцидентный	
  шрифт	
  
Подбираем	
  разделительный	
  объект	
  (divider)	
  
Рефлекс	
  
Оригинальная	
  страница:	
  	
  
hap://zzwolf.com/ru/page/about-­‐start/	
  
Можно	
  повторить?	
  
   с	
  начала…	
  
Полезно	
  




hap://habrahabr.ru/post/50497/	
  
Разбор	
  полетов	
  
Варианты	
  решений	
  
hap://chocolatecoded.com.au	
  
hap://chocolatecoded.com.au	
  
hap://chocolatecoded.com.au	
  
hap://chocolatecoded.com.au	
  
Александр	
  Лисовский	
  
product	
  manager	
  ZZWolf	
  
UX,	
  UI,	
  графический	
  дизайнер	
  
	
  
(063)	
  304-­‐54-­‐85	
  
alexander.lisovsky@gmail.com	
  
facebook.com/alexlisovsky	
  

More Related Content

Viewers also liked

Быстродействие веб сайта. Методичный анализ и глубины клиентской оптимизации
Быстродействие веб сайта. Методичный анализ и глубины клиентской оптимизацииБыстродействие веб сайта. Методичный анализ и глубины клиентской оптимизации
Быстродействие веб сайта. Методичный анализ и глубины клиентской оптимизации
Yevhen Kotelnytskyi
 
Pencil
PencilPencil
Course User interface — Lesson 9
Course User interface — Lesson 9Course User interface — Lesson 9
Course User interface — Lesson 9
Oleksandr Lisovskyi
 
Course User interface - Lesson 3
Course User interface - Lesson 3Course User interface - Lesson 3
Course User interface - Lesson 3
Oleksandr Lisovskyi
 
web-design: курс для новичков. День второй.
web-design: курс для новичков. День второй.web-design: курс для новичков. День второй.
web-design: курс для новичков. День второй.Oleksandr Lisovskyi
 
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 1
Oleksandr 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 Odessa
Ivan Klimenko
 
Fake lego
Fake legoFake lego
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
 
Веб-дизайнер: горячие тренды профессии
Веб-дизайнер: горячие тренды профессииВеб-дизайнер: горячие тренды профессии
Веб-дизайнер: горячие тренды профессии
Нетология
 

Viewers also liked (20)

Быстродействие веб сайта. Методичный анализ и глубины клиентской оптимизации
Быстродействие веб сайта. Методичный анализ и глубины клиентской оптимизацииБыстродействие веб сайта. Методичный анализ и глубины клиентской оптимизации
Быстродействие веб сайта. Методичный анализ и глубины клиентской оптимизации
 
Pencil
PencilPencil
Pencil
 
Course User interface — Lesson 9
Course User interface — Lesson 9Course User interface — Lesson 9
Course User interface — Lesson 9
 
Course User interface - Lesson 3
Course User interface - Lesson 3Course User interface - Lesson 3
Course User interface - Lesson 3
 
web-design: курс для новичков. День второй.
web-design: курс для новичков. День второй.web-design: курс для новичков. День второй.
web-design: курс для новичков. День второй.
 
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)
 
Веб - дизайн
Веб - дизайнВеб - дизайн
Веб - дизайн
 
Как не отпугнуть зрителя с первого слайда. Основные ошибки в дизайне презента...
Как не отпугнуть зрителя с первого слайда. Основные ошибки в дизайне презента...Как не отпугнуть зрителя с первого слайда. Основные ошибки в дизайне презента...
Как не отпугнуть зрителя с первого слайда. Основные ошибки в дизайне презента...
 
Веб-дизайнер: горячие тренды профессии
Веб-дизайнер: горячие тренды профессииВеб-дизайнер: горячие тренды профессии
Веб-дизайнер: горячие тренды профессии
 

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

Метод Lego Serious Play для бизнеса
Метод Lego Serious Play для бизнесаМетод Lego Serious Play для бизнеса
Метод Lego Serious Play для бизнеса
Wonderfull
 
Что я делаю каждый день: дневник креативного продюсера / Альберт Жильцов (1C ...
Что я делаю каждый день: дневник креативного продюсера / Альберт Жильцов (1C ...Что я делаю каждый день: дневник креативного продюсера / Альберт Жильцов (1C ...
Что я делаю каждый день: дневник креативного продюсера / Альберт Жильцов (1C ...
DevGAMM Conference
 
Креативные методики «для чайников»
Креативные методики «для чайников»Креативные методики «для чайников»
Креативные методики «для чайников»
Ekaterina Selivanova
 
креативные люди вы нужны
креативные люди   вы нужныкреативные люди   вы нужны
креативные люди вы нужныKatya Labinskaya
 
Как создавалась Vseti.by
Как создавалась Vseti.byКак создавалась Vseti.by
Как создавалась Vseti.byStartup_Technologies
 
ефимов как Ux-специалист делился своими инструментами с agile-командами
ефимов   как Ux-специалист делился своими инструментами с agile-командамиефимов   как Ux-специалист делился своими инструментами с agile-командами
ефимов как Ux-специалист делился своими инструментами с agile-командамиMagneta AI
 
Как UX-специалист делился своими инструментами с agile-командами
Как UX-специалист делился своими инструментами с agile-командамиКак UX-специалист делился своими инструментами с agile-командами
Как UX-специалист делился своими инструментами с agile-командами
Nikita Efimov
 
Порог вхождения как критическая точка пользовательского опыта
Порог вхождения как критическая точка пользовательского опытаПорог вхождения как критическая точка пользовательского опыта
Порог вхождения как критическая точка пользовательского опыта
SQALab
 
Порог вхождения как критическая точка пользовательского опыта
Порог вхождения как критическая точка пользовательского опытаПорог вхождения как критическая точка пользовательского опыта
Порог вхождения как критическая точка пользовательского опыта
Собака Павлова
 
Experiment Prototyping
Experiment PrototypingExperiment Prototyping
Experiment Prototyping
Nikolay Yaremko
 
"Look anew". Мифы и правда о стереотипах мышления
"Look anew". Мифы и правда о стереотипах мышления"Look anew". Мифы и правда о стереотипах мышления
"Look anew". Мифы и правда о стереотипах мышления
Training Institute - ARB Pro Group
 
Генеративный дизайн. Личный опыт
Генеративный дизайн. Личный опытГенеративный дизайн. Личный опыт
Генеративный дизайн. Личный опыт
Andrew Shapiro
 
CodeFest 2010. Орлов А. — Лидерство или о грядках и огородах
CodeFest 2010. Орлов А. — Лидерство или о грядках и огородахCodeFest 2010. Орлов А. — Лидерство или о грядках и огородах
CodeFest 2010. Орлов А. — Лидерство или о грядках и огородахCodeFest
 
Вячеслав Симоненко - Принципы
Вячеслав Симоненко - ПринципыВячеслав Симоненко - Принципы
Вячеслав Симоненко - ПринципыSergey Sek
 
10 вредных советов
10 вредных советов10 вредных советов
10 вредных советов
Yulia Nesterova
 
Motivate me right
Motivate me rightMotivate me right
Motivate me right
knoppix
 
Bezumno prosto
Bezumno prostoBezumno prosto
Bezumno prosto
Roman Tkach
 

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

Метод Lego Serious Play для бизнеса
Метод Lego Serious Play для бизнесаМетод Lego Serious Play для бизнеса
Метод Lego Serious Play для бизнеса
 
Что я делаю каждый день: дневник креативного продюсера / Альберт Жильцов (1C ...
Что я делаю каждый день: дневник креативного продюсера / Альберт Жильцов (1C ...Что я делаю каждый день: дневник креативного продюсера / Альберт Жильцов (1C ...
Что я делаю каждый день: дневник креативного продюсера / Альберт Жильцов (1C ...
 
Креативные методики «для чайников»
Креативные методики «для чайников»Креативные методики «для чайников»
Креативные методики «для чайников»
 
креативные люди вы нужны
креативные люди   вы нужныкреативные люди   вы нужны
креативные люди вы нужны
 
Как создавалась Vseti.by
Как создавалась Vseti.byКак создавалась Vseti.by
Как создавалась Vseti.by
 
ефимов как Ux-специалист делился своими инструментами с agile-командами
ефимов   как Ux-специалист делился своими инструментами с agile-командамиефимов   как Ux-специалист делился своими инструментами с agile-командами
ефимов как Ux-специалист делился своими инструментами с agile-командами
 
Как UX-специалист делился своими инструментами с agile-командами
Как UX-специалист делился своими инструментами с agile-командамиКак UX-специалист делился своими инструментами с agile-командами
Как UX-специалист делился своими инструментами с agile-командами
 
Порог вхождения как критическая точка пользовательского опыта
Порог вхождения как критическая точка пользовательского опытаПорог вхождения как критическая точка пользовательского опыта
Порог вхождения как критическая точка пользовательского опыта
 
Порог вхождения как критическая точка пользовательского опыта
Порог вхождения как критическая точка пользовательского опытаПорог вхождения как критическая точка пользовательского опыта
Порог вхождения как критическая точка пользовательского опыта
 
Experiment Prototyping
Experiment PrototypingExperiment Prototyping
Experiment Prototyping
 
"Look anew". Мифы и правда о стереотипах мышления
"Look anew". Мифы и правда о стереотипах мышления"Look anew". Мифы и правда о стереотипах мышления
"Look anew". Мифы и правда о стереотипах мышления
 
Генеративный дизайн. Личный опыт
Генеративный дизайн. Личный опытГенеративный дизайн. Личный опыт
Генеративный дизайн. Личный опыт
 
CodeFest 2010. Орлов А. — Лидерство или о грядках и огородах
CodeFest 2010. Орлов А. — Лидерство или о грядках и огородахCodeFest 2010. Орлов А. — Лидерство или о грядках и огородах
CodeFest 2010. Орлов А. — Лидерство или о грядках и огородах
 
Stratoplan hpm career
Stratoplan hpm careerStratoplan hpm career
Stratoplan hpm career
 
Stratoplan hpm career
Stratoplan hpm careerStratoplan hpm career
Stratoplan hpm career
 
Вячеслав Симоненко - Принципы
Вячеслав Симоненко - ПринципыВячеслав Симоненко - Принципы
Вячеслав Симоненко - Принципы
 
10 вредных советов
10 вредных советов10 вредных советов
10 вредных советов
 
Motivate me right
Motivate me rightMotivate me right
Motivate me right
 
004 Лекция о дизайне
004 Лекция о дизайне004 Лекция о дизайне
004 Лекция о дизайне
 
Bezumno prosto
Bezumno prostoBezumno prosto
Bezumno prosto
 

More from Oleksandr Lisovskyi

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