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

2. Тренды
веб-­‐дизайна
в
2013
году
h9p://naikom.ru/blog/archives/6551P_acRon_ids=497416576977861&P_
acRon_types=og.likes&P_source=aggregaRon&P_aggregaRon_id=288381481237582

3. Адаптивный
веб-­‐дизайн
Вместо
создания
нескольких
версий
сайта
для
всех
видов
устройств,
умные
люди
сейчас
делают
один
адаптивный
шаблон,
который
подходит
под
все
все
типы
экранов.
Преимущества
в
стоимости
очевидны.

5. Параллакс-­‐эффект
и
скроллинг
Параллакс
это
некий
3D-­‐эффект,
достигаемый
несколькими
слоями,
движущимися
с
разной
скоростью.
В
будущем
году
его
можно
будет
встретить
даже
чаще,
чем
в
прошедшем.
Очень
хорошо
смотрится
в
мини-­‐сайтах
и
презентациях.
Другой
популярный
эффект
это
вертикальный
или
горизонтальный
скороллинг
с
зафиксированным
меню.
Часто
этот
прием
сочетают
с
параллаксом.

6. h9p://www.bagigia.com

7. Минимализм
Не
выйдет
из
тренда.

8. Эмоции

9. Интересная
типографика
Времена,
когда
целые
сайты
содержали
в
себе
только
Arial
и
Tahoma
уже
прошли.
Вместе
с
появлением
новых
технологий,
расширяются
и
границы
типографики
на
сайтах.
Так
что
можно
смело
ждать
большого
количества
интересных
решений.

11. Текстуры
(Скевоморфизм)
Почему
в
современных
интерфейсах
так
любят
текстуры
дерева,
кожи,
бумаги
и
т.д.?
Потому
они
нам
как
родные,
интерфейсы
становятся
реалистичнее,
приятнее
и
«теплее»

13. Большие
картинки
Скорость
интернета
уже
давно
не
является
проблемой.
Поэтому
и
большие
картинки
не
являются
такой
уж
проблемой.
Ожидается,
что
многие
будут
использовать
большие
изображения
на
фоне

14. h9p://vandelaydesign.com/blog/galleries/blurred-­‐backgrounds/

17. Редкий
дизайнер
не
любит
обсудить
работу
коллеги…

18. Проблема
www.hopechannel.info

21. Проблема
Куда
мы
попали?
Три
стиля
в
меню.
o_O
Перебор.
Пиктограмма?
Ошибка
освещения
Не,
не
слышал.
переключателя
Есть
ли
острая
необходимость
в
подменю?

22. Проблема
0
800
ХХ
ХХХ
ХХ
+38
093
ХХ
ХХХ
ХХ
Радио
«Голос
Надії»
Самое
главное?
Даем
возможность
Слушать
воспроизвести
сразу
В
каждом
банере
разные
стилевые
решения.
4
стиля
написания
текста
Сбивчивый
стиль
написания
номеров
телефонов
Кавычки
«»
vs.
“”
www.hopechannel.info

23. Решение
h9p://www.fox.com

24. Куда
ведет
первая
иконка?
Почему
YouTube
отличается?
www.hopechannel.info

25. После
facebook
и
Зачем
писать
Контент
наше
все!
skype
читать
все
уже
Анонс?
не
хочется
Воруется
на
украшательства
30%
площади!
Идентификатор
Выезжает
плашка
состояния
для
описания
слишком
заметен

26. Решение
h9p://www.nbc.com

27. Решение
h9p://www.fox.com

28. Самое
главное?
Слишком
сложно.
Где
пиктограмма
Воспроизведения
видео?
Как
понять
что
выбрано?

29. Зачем
усложнять?
VS.

30. Где
текущая
передача?
Что
за
ней?

31. Решение
h9p://www.fox.com

32. Решение
h9p://kanalukraina.tv

33. Решение
h9p://inter.ua/uk/

34. Почему
название/картинка/
Кто
мыслит
такими
анонс
оторванны
друг
категориями?
от
друга?
www.hopechannel.info
Нужно
дать
возможность
Воспроизвести
видео
уже
здесь

35. Решение
h9p://www.fox.com

36. Как
сделать
красивый
фон?

37. Размытое
фото

38. Большое
фото

39. Рисунок
от
руки

40. Однотонный

41. Белый
и
черный

42. Текстуры

43. Текстуры

44. Сделай
сам

45. Ненавязчивый
3D

46. Мелованная
доска

47. Сделай
сам
.psd
прилагается

48. Советы
и
общие
рекомендации
Сохранить
разборчивость
Никогда
(никогда!!!)
не
приносите
в
жертву
различаемость
текстуры.
Многие
совершают
эту
ошибку
и
может
пройти
довольно
много
времени,
прежде
чем
дизайнер
осознает
это.
Разборчивость
в
интернете
имеет
первостепенное
значение.
Если
пользователь
не
может
прочитать
сообщение,
тогда
какой
смысл
его
писать,
не
говоря
о
его
текстурировании?
h9p://naikom.ru/blog/archives/5035

49. Не
переусердствуйте
В
печати
текстуры
трудно
переусердствовать
—
в
зависимости
от
жанра,
конечно.
В
интернете,
однако,
текстура
может
отвлекать,
если
ее
слишком
много.
Больше
практики
Экспериментируйте
с
вашим
дизайном.
Попробуйте
несколько
вещей.
Применяйте
текстуры
там,
где
вы
их
не
применяли.
Используйте
текстуры,
которые
никогда
бы
не
использовали.
Вы
никогда
не
узнаете
заранее,
пока
не
попробуете.
h9p://naikom.ru/blog/archives/5035

50. Используйте
текстуры
со
смыслом
Протестируйте
ваш
метод,
прежде
чем
использовать
его
на
сайте
заказчика.
Всегда
убеждайтесь,
что
вы
использовали
текстуры,
соответствующие
плану.
Если
в
произведенном
улучшении
нет
смысла,
лучше
его
убрать.
Нет
смысла
в
размещать
текстуру
везде.
Основная
цель
заключается
в
распространении
информации.
А
как
это
можно
сделать,
если
текст
не
читается?
Кроме
того,
внимание
к
тонкостям
и
нюансам
—
лучший
способ
для
демонстрации
мастерства.
Вдумывайтесь
в
эффект,
который
хотите
достичь
Как
мы
уже
знаем,
увлекаться
текстурой
не
стоит.
Держите
в
уме
конечный
эффект
—
это
лучший
способ
избежать
ошибок.
Если
вы
хотите
тонкую
текстуру
фона,
просто
сделайте
его,
а
затем
переходите
к
следующему
элементу.
В
противном
случае,
вам
будет
сложно
сделать
что-­‐то
стоящее.
h9p://naikom.ru/blog/archives/5035

51. Собирайте
ресурсы,
чтобы
вам
не
приходилось
искать
их
каждый
раз
Вы
можете
сэкономить
огромное
количество
времени
на
загрузку
и
архивирование
ресурсов,
которые
окажутся
для
вас
полезными.
Содержите
ваши
файлы
организованно.
Это
ужасное
ощущение
—
найти
классный
набор
кистей,
а
потом
забыть,
где
же
вы
его
нашли.
Изучайте
маски
Изучение
работы
слоев
и
масок
сэкономит
вам
время
в
долгосрочной
перспективе
и
станет
сильным
инструментом
в
вашем
арсенале.
Маски
являются
отличным
способом,
чтобы
экспериментировать
с
дизайном.
По
этой
теме
в
интернете
есть
множество
материала.
h9p://naikom.ru/blog/archives/5035

52. Легкая
фактура

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

54. Дима
Петриченко

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