Курс по веб-дизайну с нуля
Введение
Какие существуют виды сайтов. Этапы разработки. Что есть плохой и хороший визуал. С чего начинается создание сайта.
PDF к лекции: *доступно на курсе
Домашнее задание
Определить тип сайта, «хороший» и «плохой» дизайн. Написать почему считаете дизайн плохим или хорошим. Можно рассмотреть с точки зрения плюсов и минусов сайта.
Сайты в папке: https://yadi.sk/d/s2mq1OjEVwVnpQ
(чтобы рассмотреть картинку больше - скачайте ее или откройте с компьютера)
Все картинки в папке пронумерованы. Просьба в карточке Trello писать по номерам сайтов.
Создаете карточку в Trello под своим именем. Называете ее «Задание 1».
Внутри карточки в поле «описание» пишете номер картинки и ответ. Пример: «картинка 4: плохой дизайн, потому что много паттернов, непривлекательные цвета, все сливается и т.д.»
Формат сдачи задания: текст
Сайты в папке: https://yadi.sk/d/s2mq1OjEVwVnpQ
(чтобы рассмотреть картинку больше - скачайте ее или откройте с компьютера)
Все картинки в папке пронумерованы. Просьба в карточке Trello писать по номерам сайтов.
Создаете карточку в Trello под своим именем. Называете ее «Задание 1».
Внутри карточки в поле «описание» пишете номер картинки и ответ. Пример: «картинка 4: плохой дизайн, потому что много паттернов, непривлекательные цвета, все сливается и т.д.»
Формат сдачи задания: текст
Задача 1
Задача 2
Остались вопросы? Задай их в чат своей группы.
Определения:
Узор, повторяющийся элемент, декоративная подложка под элементы дизайна. Ниже будет несколько примеров паттернов в дизайне.
С помощью них здорово задавать атмосферу в дизайне, выделять какие-то важные элементы на сайте. Также их несложно перенести на какую-либо печатную продукцию - визитки, блокноты, одежда, оформление машины. То есть это может стать отличительной чертой вашего дизайна.
С помощью них здорово задавать атмосферу в дизайне, выделять какие-то важные элементы на сайте. Также их несложно перенести на какую-либо печатную продукцию - визитки, блокноты, одежда, оформление машины. То есть это может стать отличительной чертой вашего дизайна.
то, как выглядит интерфейс и то, какие физические характеристики приобретает. Определяет, какого цвета будет ваше «изделие», удобно ли будет человеку попадать пальцем в кнопочки, читабельным ли будет текст и тому подобное.
Но также важно не забывать, что, как и в UX, юзабилити не должно страдать, создавать дизайн нужно прежде всего, думая о пользователе.
Но также важно не забывать, что, как и в UX, юзабилити не должно страдать, создавать дизайн нужно прежде всего, думая о пользователе.
то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом. Удается ли ему достичь цели и на сколько просто или сложно это сделать.
Еще UX это про дизайн системы в целом. Как ту или иную организацию с помощью дизайна сделать удобнее, чтобы пользователь достигал той цели, за которой пришел, а также ему было максимально удобно пользоваться сервисом.
Еще UX это про дизайн системы в целом. Как ту или иную организацию с помощью дизайна сделать удобнее, чтобы пользователь достигал той цели, за которой пришел, а также ему было максимально удобно пользоваться сервисом.
Юзабилити (удобство использования) - это качественная оценка простоты и комфорта работы с сайтом. Пользователь должен без труда находить нужную информацию, не теряясь в функционале и многочисленных страницах, и при этом получать эстетическое удовольствие от работы с ресурсом.
вид заливки в компьютерной графике, которая по заданным параметрам цвета в ключевых точках рассчитывает промежуточные цвета остальных точек. При этом создаются плавные переходы из одного цвета в другой.
Линейный градиент идет от точки А в точку B по прямой и меняет свой цвет.
Радиальный градиент идет из центра к краям круга.
Линейный градиент идет от точки А в точку B по прямой и меняет свой цвет.
Радиальный градиент идет из центра к краям круга.
Примеры паттернов:
Примеры красивых линейных градиентов:
Создание градиентов мы рассмотрим на практических уроках, но понимать что такое одна точка и вторая и как они располагаются вы должны.
На картинке наглядно показано, как градиент создается.
На картинке наглядно показано, как градиент создается.
При работе с текстами, если они не выступают в роли декора, не используем обводки на шрифтах, тени, градиенты и прочие элементы. Это прошлый век.
Но к текстам еще вернемся на следующих лекциях :)
Но к текстам еще вернемся на следующих лекциях :)
Градиенты плохие и хорошие:
Примеры хороших сайтов
Не забудь открыть в полный размер (нажми на картинку).
Композиция, типографика, свободное пространство, правильный выбор стилистики. Да, можно придраться к некоторым элементам, но в целом эти сайты хороши.
Композиция, типографика, свободное пространство, правильный выбор стилистики. Да, можно придраться к некоторым элементам, но в целом эти сайты хороши.
Примеры плохих сайтов
Нечитабельный контент - тексты, формы, управляющие элементы на фонах. Обводки на кнопках, это тоже нехорошо. Странные несочетаемые объекты по всему дизайну сайта, нет гармонии. Плохая типографика, устаревшая стилистика и тд. Потренируйтесь разглядывать детали – пишите в чат, что нашли на конкретных сайтах и что считаете "не очень".
Молодец! Сегодня ты пополнил свою копилку знаний!
Обязательно загляни в "информационный портал", там тебя ждут дополнительные материалы
Обязательно загляни в "информационный портал", там тебя ждут дополнительные материалы
Понравилася урок? Это только начало! Присоединяйся к курсу!