Web-design: курс для новичков. День 1.
-
Upload
alexander-lisovsky -
Category
Design
-
view
1.455 -
download
2
description
Transcript of Web-design: курс для новичков. День 1.
![Page 1: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/1.jpg)
Александр Лисовский UX, UI, графический дизайнер
![Page 2: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/2.jpg)
Курс поддерживают:
![Page 3: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/3.jpg)
Перспективы:
![Page 4: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/4.jpg)
Глупых вопросов не бывает.
![Page 5: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/5.jpg)
Разновидности дизайна
![Page 6: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/6.jpg)
Порода: дизайнер Отряд: компьютерные Семейство: креативные
![Page 7: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/7.jpg)
Дизайн: Промышленный Ланшафтный Архитектурный Интерьерный Графический …
![Page 8: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/8.jpg)
Графический дизайн: Идентификация (логотипы, фирм стили) Иконки Иллюстрации Полиграфия Видео 3D Интерактивный …
![Page 9: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/9.jpg)
Интерактивный: Дизайн десктопных приложений Мобильных приложений Веб дизайн …
![Page 10: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/10.jpg)
10 мифов про дизайн
![Page 11: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/11.jpg)
10. Графический дизайн это легко
![Page 12: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/12.jpg)
9. Графический дизайн может сделать вас богатым.
Быстро.
![Page 13: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/13.jpg)
Веб-‐дизайн: 1 — 5 лет: $52,000 — $76,500 5 +: $74,750 — $103,750 Креативные директора: 5 — 8 лет: $89,500 — $124,500 8+: $97,250 — $169,500
О зарплатах: h^p://ain.ua/2013/01/08/107663
![Page 14: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/14.jpg)
8. Графический дизайнер должен разбираться во всем
![Page 15: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/15.jpg)
7. Заказчик всегда прав
![Page 16: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/16.jpg)
6. Обучение заканчивается после окончания ВУЗа
![Page 17: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/17.jpg)
5. Дизайн – самое важное
![Page 18: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/18.jpg)
4. Исправить дизайн можно очень быстро
![Page 19: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/19.jpg)
3. Дизайнерами рождаются
![Page 20: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/20.jpg)
2. Дизайн – это работа за компьютером все время
![Page 21: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/21.jpg)
1. Каждый может быть дизайнером
![Page 22: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/22.jpg)
Разумное творение h^p://youtu.be/kkGeOWYOFoA
![Page 23: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/23.jpg)
Что такое дизайн?
![Page 24: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/24.jpg)
Дизайн – это война
![Page 25: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/25.jpg)
В чем заключается работа дизайнера?
![Page 26: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/26.jpg)
«Наша работа заключается в том, чтобы найти наиболее удобный, простой и красивый способ решения поставленной задачи, не потеряв по дороге смысл.»
h^p://www.artlebedev.ru/studio/
![Page 27: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/27.jpg)
За что платят дизайнерам?
![Page 28: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/28.jpg)
Сервис + Креатив + Знания = Успешный дизайнер
![Page 29: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/29.jpg)
Сервис
h^p://www.artlebedev.ru/studio/
![Page 30: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/30.jpg)
Есть огромное количество клиентов и работ, для которых не нужны какие-‐то особые знания или умения, не нужен яркии креатив.
h^p://cossa.ru/ar|cles/234/31167/
![Page 31: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/31.jpg)
Надо просто уметь делать одно и то же изо дня в день и не задавать лишних вопросов. За это могут платить, может, и не большие, но постоянные деньги, а процесс масштабируем и понятен.
h^p://cossa.ru/ar|cles/234/31167/
![Page 32: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/32.jpg)
Креатив
h^p://www.artlebedev.ru/studio/
![Page 33: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/33.jpg)
Клиенты покупают не умные мысли, а готовые идеи, которые, как раз, делает креатив. Также оценить какие-‐то стратегические выкладки в отрыве от конкретной креативной идеи бывает почти невозможно.
h^p://cossa.ru/ar|cles/234/31167/
![Page 34: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/34.jpg)
Но самое важное, что есть довольно большая группа людей, которая гонится за яркими и прорывными идеями.
h^p://cossa.ru/ar|cles/234/31167/
![Page 35: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/35.jpg)
Самый глубокий сайт
h^p://thedeepestsite.com
![Page 36: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/36.jpg)
Самый глубокий сайт
Кампания «Самый глубокий сайт» была разработана для продвижения минеральной воды «Боржоми». Ресурс позволяет совершить воображаемое путешествие на глубину, где зарождается вода «Боржоми». Результат: число уникальных посетителей сайта превысило 400 000. Агентство: Ogilvy & Mather Ukraine
![Page 37: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/37.jpg)
OldSpice
44.665.053 просмотра h^p://www.youtube.com/watch?v=owGykVbfgUE
![Page 38: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/38.jpg)
Итоги кампании
• В течение всего периода кампании количество фолловеров в Twieer Old Spice увеличилось на 2700%, активность пользователей Facebook – на 800%, посещение сайта www.oldspice.com – на 300%, a канал OldSpice на YouTube стал самым популярным (323 739 подписчиков).
• Через полгода количество impressions (показ – одна рекламная единица, доставленная из одного источника) достигло 1,4 миллиарда, продажи геля для душа Old Spice были на 27% больше, чем в прошлом году, в последние три месяца кампании продажи увеличились на 55%, а за последний месяц – на 107%.
![Page 39: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/39.jpg)
Знания
h^p://www.artlebedev.ru/studio/
![Page 40: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/40.jpg)
Чтобы знать больше всех или что-‐то особенное, необходимо быть экспертом в конкретнои дисциплине, т.е. необходима специализация. А жадность говорит, что надо заниматься всем.
h^p://cossa.ru/ar|cles/234/31167/
![Page 41: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/41.jpg)
![Page 42: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/42.jpg)
Специализация по областям знаний или категориям бизнесов открывает почти безграничные возможности для дифференциации, а значит, и конкуренции.
h^p://cossa.ru/ar|cles/234/31167/
![Page 43: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/43.jpg)
Сестры Лопухины
h^p://www.adme.ua/vdohnovenie919705/dizajnery-‐kalligrafy-‐sestry-‐lopuhiny-‐103255/
![Page 44: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/44.jpg)
Татьяна Карташева
h^p://kartasheva.com
![Page 45: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/45.jpg)
Андрей Шевченко
h^p://www.adme.ua/shevchenkoandrej/dizajner-‐znakov-‐i-‐bukv-‐andrej-‐shevchenko-‐101805/
![Page 46: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/46.jpg)
Будущее digital и медиа
![Page 47: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/47.jpg)
h^p://cossa.ru/ar|cles/152/30293/
![Page 48: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/48.jpg)
По итогам 2011 года количество проданных персональных компьютеров оказалось в 2,5 раза меньше числа реализованных смартфонов и в 3 раза — планшетов (350 млн против 820 и 920 млн соответственно
h^p://cossa.ru/ar|cles/152/30293/
Мобильная революция & cмерть десктопов
![Page 49: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/49.jpg)
По прогнозам экспертов, к середине 2013 года количество загрузок приложений в Apple AppStore превысит 60 млрд. Уже сегодня пользователи больше времени тратят на приложения, а не на просмотр страниц в браузере.
h^p://cossa.ru/ar|cles/152/30293/
![Page 50: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/50.jpg)
h^p://cossa.ru/ar|cles/152/30293/
![Page 51: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/51.jpg)
Совсем недавно доминирующей была точка зрения, что в интернете никто и никогда не станет платить за контент.
h^p://cossa.ru/ar|cles/152/30293/
Медиареволюция
![Page 52: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/52.jpg)
Предупрежден -‐ значит, вооружен. Выбор профессии.
![Page 53: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/53.jpg)
Аудитория Сети растет, в то время как у печатных СМИ, радио и общедоступного телевидения наблюдается снижение показателей
h^p://cossa.ru/ar|cles/152/30293/
![Page 54: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/54.jpg)
Самой неэффективной становится реклама в печатных СМИ. В связи с этим доходы от неё в 2012 году откатились на рекордно низкий уровень — как в 1950-‐х годах. Одни лишь Google сейчас зарабатывает на рекламе больше, чем все американские газеты и журналы вместе взятые.
h^p://cossa.ru/ar|cles/152/30293/
![Page 55: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/55.jpg)
С появлением Smart TV возникла возможность смотреть только то, что хочется, в любое время. По сравнению с результатами 2009 года, сегодня платные ТВ-‐подписки существенно потеряли (за один квартал > 100 тысяч человек), а YouTube, Hulu и Ne�lix стабильно увеличивают аудиторию.
h^p://cossa.ru/ar|cles/152/30293/
![Page 56: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/56.jpg)
Вдохновение
![Page 57: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/57.jpg)
Pinterest.com
pinterest.com/alexlisovsky
![Page 58: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/58.jpg)
![Page 59: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/59.jpg)
Behance.net
![Page 60: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/60.jpg)
Dribbble.com
![Page 61: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/61.jpg)
Perns.com
![Page 62: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/62.jpg)
h^p://www.awwwards.com
![Page 63: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/63.jpg)
ui-‐cloud.com
![Page 64: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/64.jpg)
h^p://psd.tutsplus.com
![Page 65: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/65.jpg)
h^p://uxarchive.com/tasks/onboarding
![Page 66: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/66.jpg)
Технологии Технология не равно Идея. Параллакс контента Drag-‐and-‐drop Адаптивный дизайн и т.д.
h^p://www.slideshare.net/Notamedia
![Page 67: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/67.jpg)
Логика vs. Эмоция
h^p://www.slideshare.net/Notamedia
Программный интерфейс
Промо сайт
![Page 68: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/68.jpg)
Логика vs. Эмоция
h^p://www.slideshare.net/Notamedia
Обычная работа
Каннский лев
![Page 69: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/69.jpg)
Скоро уже начнем?
![Page 70: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/70.jpg)
Теория без практики мертва. Практика без теории слепа.
![Page 71: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/71.jpg)
![Page 72: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/72.jpg)
![Page 73: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/73.jpg)
![Page 74: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/74.jpg)
![Page 75: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/75.jpg)
![Page 76: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/76.jpg)
![Page 77: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/77.jpg)
![Page 78: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/78.jpg)
![Page 79: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/79.jpg)
Почти запомнил!..
![Page 80: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/80.jpg)
Конечно, давайте продолжим изучать теорию
![Page 81: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/81.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Линии
![Page 82: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/82.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Линии
![Page 83: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/83.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Линии
![Page 84: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/84.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 85: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/85.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 86: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/86.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Объект и пространство
![Page 87: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/87.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Объект и пространство
![Page 88: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/88.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Объект и пространство
![Page 89: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/89.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Объект и пространство
![Page 90: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/90.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Контраст
![Page 91: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/91.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Контраст
![Page 92: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/92.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Контраст
![Page 93: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/93.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 94: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/94.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 95: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/95.jpg)
Основные правила дизайна
Текст
![Page 96: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/96.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 97: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/97.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 98: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/98.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 99: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/99.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 100: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/100.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Текст
![Page 101: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/101.jpg)
h^p://www.slideshare.net/smoofles/interface-‐design-‐basics-‐2182094
Основные правила дизайна
Символы
Добавить Закрыть/отменить
![Page 102: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/102.jpg)
Основные правила дизайна
Цвета
![Page 103: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/103.jpg)
Перерыв?
![Page 104: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/104.jpg)
![Page 105: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/105.jpg)
Те, кто читают книги всегда будут управлять теми, кто смотрит телевизор
Фелиция Жанлис
![Page 106: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/106.jpg)
h^p://www.artlebedev.ru/everything/izdal/kniga-‐pro-‐bukvy2/
![Page 107: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/107.jpg)
h^p://mann-‐ivanov-‐ferber.ru/books/Luchiernoctar/Rework1/
![Page 108: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/108.jpg)
h^p://mann-‐ivanov-‐ferber.ru/books/paperbook/DeliveringHappiness/
![Page 109: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/109.jpg)
How to: Тени
![Page 110: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/110.jpg)
Тени -‐ это один из камней преткновения всех дизайнеров. По теням часто судят о качестве работ, об уровне дизайнера. Есть некоторые стереотипы, некие "правила хорошего тона", по которым мы судим о качестве тени. Вообще, утверждение, что фотореалистичная тень -‐ это хорошо, а остальное плохо -‐ в корне неверно. Очень часто приходится править и корректировать фотореалистичную тень, чтобы получить чистый качественный элемент дизайна сайта. Также нередко требуется изобразить схематическую тень, чтобы просто оттенить важный блок или меню. Ниже я привожу три основных правила изображения теней.
h^p://www.pirogov.ru
![Page 111: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/111.jpg)
h^p://www.pirogov.ru
Как нельзя
![Page 112: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/112.jpg)
h^p://www.pirogov.ru
Первое правило
1. Тень не должна быть грязью Приведённые ниже рисунки демонстрируют, как не надо делать тень. На рисунках показаны слишком резкие переходы из белого цвета в чёрный. В природе, при дневном освещении, такие переходы очень редки.
![Page 113: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/113.jpg)
h^p://www.pirogov.ru
Правило первое
Тут тень светлее и прозрачнее. Она не оттягивает на себя внимание. Такое использование тени, как на рис.2а и рис.2b часто применяется в корпоративных сайтах. И порой настораживает, что дизайнеры воспринимают это как признак плохого тона.
![Page 114: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/114.jpg)
h^p://www.pirogov.ru
Исключения из правила
Если на рисунке показана ночь, и наш обьект освещается лампой, то тени очень контрастные. Всё зависит от освещения. В данном уроке рассказывается про общий случай, когда всё освещено дневным светом.
![Page 115: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/115.jpg)
h^p://www.pirogov.ru
Правило второе
Тень -‐ это не наложение чёрного цвета Очень часто рисуют тень, накладывая чёрный цвет в разных пропорциях и с разной прозрачностью. Это неверно. Тень -‐ это область, куда не попадает прямой свет от источника. А значит, что эта область окрашена в естественный цвет предмета. Она может казаться даже насыщеннее той области, куда падает свет, если предмет имеет достаточно яркий "родной" цвет. Также при выборе цвета тени следует учитывать тот момент, что сам объект может частично отражать свет на плоскость. Например, если объект ярко-‐красный, то он будет отбрасывать часть красного цвета на плоскость, на которой стоит.
![Page 116: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/116.jpg)
h^p://www.pirogov.ru
Правило второе
![Page 117: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/117.jpg)
h^p://www.pirogov.ru
Правило второе
Основной фон -‐ белый, цвет тени -‐ серый. Зеленая панель тоже отбрасывает зеленый свет на поверхность. Поэтому дублируем серый слой тени, перекрашиваем его в тёмно-‐зеленый цвет, и стираем те области, которые не находятся в непосредственной близости к красной поверхности. В результате получится, что около нашей панели тень имеет чуть зеленоватый оттенок, нежели вдали от неё.
![Page 118: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/118.jpg)
h^p://www.pirogov.ru
Правило третье
Ближе -‐ темнее и чётче По умолчанию мы рассматриваем не точечный источник света, а распределённый. Это правило следует из физических особенностей распространения света от распределённого источника. Делается подобная тень так: Вначале создается обычный теневой слой. Потом, дальше от панели, он сильно размывается (можно просто инструментом "blur"). И в конце правый и левый края (дальние от предмета -‐ ближние к нам) чуть подтираются ластиком, для того, чтобы не было таких чётких граней тени.
![Page 119: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/119.jpg)
h^p://www.pirogov.ru
Правило третье
![Page 120: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/120.jpg)
h^p://www.pirogov.ru
Тень от куба
![Page 121: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/121.jpg)
h^p://www.pirogov.ru
Тень от куба
Вначале сделаем тень в непосредственной близости к кубу. По третьему правилу это наиболее тёмная область. Подправим сам куб, чтобы он был немного темнее к основанию, и нарисуем ближнюю область тени.
![Page 122: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/122.jpg)
h^p://www.pirogov.ru
Тень от куба
Получилась неплохая тень для куба, стоящего на поверхности и освещаемого дневным светом. Если мы захотим сделать тень ещё и от солнца или от какого-‐нибудь фонаря, то используем третье правило. А также следим, чтобы тень была не чёрная (так как объект ярко-‐зелёный) и не слишком тёмная.
![Page 123: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/123.jpg)
h^p://www.pirogov.ru
Тень от куба
Тень может быть от нескольких источников света.
![Page 124: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/124.jpg)
Машина
![Page 125: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/125.jpg)
Машина
![Page 126: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/126.jpg)
Машина
![Page 127: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/127.jpg)
Машина
![Page 128: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/128.jpg)
Машина
![Page 129: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/129.jpg)
Машина
![Page 130: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/130.jpg)
Машина
![Page 131: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/131.jpg)
Для вдохновения: hep://www.behance.net/gallery/Citroen-‐DS3-‐Cab/5258951
![Page 132: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/132.jpg)
Я провожаю поезда истошным криком идиота, мне нравится моя работа, гори гори моя звезда!
![Page 133: Web-design: курс для новичков. День 1.](https://reader034.fdocument.pub/reader034/viewer/2022042601/547b570bb4795977098b4cda/html5/thumbnails/133.jpg)
Александр Лисовский Менеджер продукта в ZZWolf UX, UI, графический дизайнер (063) 304-‐54-‐85 [email protected] facebook.com/alexlisovsky pinterest.com/alexlisovsky