Веб-дизайн

Где можно бесплатно научиться веб дизайну (не для работы, а для своего сайта)

?
Дизайн - это умение рисовать, теория цвета и прочие тонкости. Вы действительно о дизайне или о чём-то другом?
Роман Маркелов
Роман Маркелов
70 117
Лучший ответ
Дизайн - сложная наука: люди занимающиеся дизайном продолжают учиться ему всю жизнь, даже после пяти лет обучения в ВУЗе по специальности "дизайнер". Какими-то статейками из интернета вопрос НЕ решается... или учись ПО НАСТОЯЩЕМУ, или не трать время и закажи дизайн у специалиста...
Eziz Mammetdurdyev Учится веб дизайну в вузе - не то, чтобы плохая затея, а наихудшая
Если нет таланта, то нигде.
Сергей Цыбин
Сергей Цыбин
77 873
на Ютубе.
Испытываю «твоё разочарование» в связи с тем, что все «оскорбляют» твой дизайн — расскажу о «базе» в веб дизайне. Базовая психология и базовое введение в проектирование пользовательских интерфейсов. Поскольку писать приходится много — рассказать об остальном не могу. Сам найдешь. ​​​​​​​

*В России практически никто не учит веб-дизайну. К разочарованию большинства, выбор цвета и типографии — малая часть веб-дизайна, и которая обладает гораздо большими «деталями», чем думаете. 

Во-первых, необходимо запомнить, что каждый дизайн стремится либо создать чувство единства среди разрозненных элементов, либо творчески разрушить это единство, чтобы поощрить конкретное действие. Иными словами, веб-дизайн — это использование психологии человека. И без этого успешный дизайн не создать. 

Есть несколько рекомендаций, за которые мы должны поблагодарить гештальтпсихологию, которая искала способ объяснить, как люди приходят к осмысленному (или обманчивому) восприятию в хаотичном мире. В общем, благодаря этим усилиям были определены 4 основных понятия, которые описывают, как люди интерпретируют визуальные данные. 
Появление. Если кратко, то он гласит, что мы пытается понять смысл целого прежде, чем мы начнем идентифицировать его части. 

Дли дизайна это «появление» означает, что мы должны придерживаться привычных и легко узнаваемых моделей. Но это совсем не значит, что вы, как дизайнер, должны забыть про «творческую разработку». Здесь и появляется первая сложность — «появление» указывает на иерархию визуальной интерпретации: мы начинаем с целого, затем приближаемся к частям. Это означает, что вы можете творчески подходить к отдельным элементам кнопки или формы, но при условии, что этот элемент распознается как форма и кнопка. 

На самом деле, «появление» предлагает убедительный аргумент в пользу минимализма: более простые элементы легче распознать. Так что, минимализм — это действительно здорово.

2. Реификация. Принцип реификации гласит, что наш разум заполняет пробелы в визуальной информации, чтобы идентифицировать объекты. Это, опять же, если кратко.  

В веб дизайне это означает, что вам не нужно показывать весь элемент, чтобы его можно было идентифицировать. Вы можете использовать этот принцип для того, чтобы сэкономить место в макете, предложить содержание следующего слайда в слайдере и многое другое. 

3. Мультистабильность. Обобщенно, это когда вы смотрите на «обманчивое изображение», где изображены два человека, но вы наблюдаете лишь одного под определенным углом. Под другим углом — другого. Или стрелочка в логотипе FedEx

В эффективном применении в веб дизайне это может быть непростой задачей, потому что она способствует, скорее, путанице, чем пониманию 

Но как доказали сотни мощных логотипов или, например, дизайн творческих сайтов — использование мультитабильности может оказать мощный эффект для «запоминания» вашего бренда. Например, логотип FedEx (между E и X есть стрелочка). 

4. Инвариантность. Этот принцип гласит, что мы действительно хорошо распознаем «сходства и различия». Это означает, что действительно легко выделить что-то из толпы похожих объектов. Например, красная шапка (мультфильм) — она выделяется и запоминается благодаря пестрым цветам, которые выделяются на остальном «сером» фоне. 

В веб дизайне инвариантность может привести к мощным результатам, когда один «выделяющийся элемент» находится в однородной группе. Одна из областей, где это необходимо применять — таблица с ценами. 

Когда, например, таблица с ценообразованием использует неизменность, чтобы выделить «пользовательский» вариант и привлечь внимание к совершенно другому цвету. 

Резюмируем принципы Гештальтпсихологии в веб дизайне: 

1. Начинаем с целого, а затем пробираемся к частям
    или
2. Пытаемся разбить запутанное целое на более простые составляющие час
Петруха Фёдоров 2. Пытаемся разбить запутанное целое на более простые составляющие части. 

И это лишь самое, самое начало. Дальше идет закрытие, симметрия и порядок, изображение/фон, взаимосвязанные области, равномерная связность, близость, продолжение, синхронность, параллелизм, сходство, точки фокуса, прошлый опыт и прочее. И это будет лишь 25-тая часть из того, что необходимо выучить, потому что дальше идут глобальные темы про теорию цвета, типографию, расстояние и т. п

Тем не менее, устав писать, расскажу об основах пользовательского интерфейса. Так сказать, 8 рекомендаций для проектирования элегантного, простого в использовании и ориентированного на человека пользовательский интерфейс. Принципы пользовательского опыта сами найдете. Где нибудь. 

И так, во-первых, веб-сайт — это гораздо больше, чем
Петруха Фёдоров группа страниц, связанные ссылками. Это интерфейс, пространство, где разные вещи — в данном случае, человек и компания - встречаются, общаются и влияют друг на друга. Это взаимодействие создает впечатление для посетителя, и, как веб-дизайнер (потенциальный), ваша задача — сделать опыт настолько хорошим, насколько это возможно. 

И ключом к этому является думать о вашем пользователе в первую очередь и всегда. Эти принципы основаны на выводах HCI (научное исследование взаимодействия человека с компьютером). 

Короче: 1. Знайте своих пользователей. Прежде всего, вы должны знать, кто ваши пользователи — внутри и снаружи. Это означает знание всех демографических данных. Но что более важно — знать что им нужно, и что мешает достичь этих целей. Достижение необходимого уровня эмпатии требует более
Петруха Фёдоров тщательного анализа статистики. Это требует знакомства с людьми, которые собираются пользоваться вашим сайтом, и постоянно задавать вопросы: «каковы ваши цели?», «что вам мешает достичь этих целей?», «как веб-сайт способен помочь преодолеть или обойти эти проблемы?». 

Выводы, которые вы узнаете из анализа данных и общения с пользователями будут информировать каждое из ваших решений, начиная от того, какие люди собираются пользоваться веб-сайтом, заканчивая тем, какие типы контента необходимо выделить в этом интерфейсе. 

2. Определите, как люди будут использовать ваш интерфейс. Перед тем, как вы создадите свой интерфейс, вы должны определить, как люди будут его использовать. С ростом распространенности сенсорных устройств это становится всё более важной проблемой, чем вы думаете.
Петруха Фёдоров Достаточно взглянуть, например, на Тиндер: пользовательский опыт приложения определяется простотой и импульсивностью простого свайпа. 

Люди используют веб-сайты и приложения двумя способами: напрямую (взаимодействуя с элементом продукта) и косвенно (взаимодействуя с элементом, схожим по отношению к продукту). 

Чтобы было проще разобраться: 

Примеры прямых: нажатие по кнопке, смахивание карты, перетаскивание элемента пальцем (сенсор). 

Примеры косвенных: Указывая и щелкая мышью, используя горячие клавиши, писанина в поле формы. 

И так: вам необходимо определить «кто ваши пользователи» и «какими устройствами пользуются». Это должно глубоко вас информировать для последующих решений. Если вы разрабатываете интерфейс для пожилых людей или людей с ограниченной «ловкостью рук» — вы не должны
Петруха Фёдоров полагаться на «смахивание». Если, например, для писателей или программистов, которые взаимодействуют (в основном) с приложениями через клавиатуру — вы должны поддерживать все распространенные сочетания клавиш, чтобы минимизировать работу с мышью. 

3. Установите ожидания. У большинства взаимодействий с сайтом или приложением есть последствие: нажатие по кнопке может означать потерю денег, стирание комментария или что-то еще, что явно не будет приятным. Соответственно, когда есть последствие — есть и беспокойство. 

Поэтому обязательно дайте пользователям знать, что произойдет после того, как они нажмут эту кнопку прежде, чем они ею воспользуются. Вы можете сделать это с помощью дизайна разными способами (в том числе, способом копирования)
Петруха Фёдоров Например, устанавливая ожидание с дизайном:
- Подсветка кнопки, которая соответствует желаемому действию. 
- Использование «широко-известного» символа. Для примера, крестик в правой части корзины, что её закрыть. Или «плюсик» — чтобы добавить товар в корзину. 
- Выбор цвета с соответствующим значением (вспомните светофор: зеленый — дальше, красный — остановиться/назад). 

Или устанавливая ожидание с копией
- создание четкой копии кнопки
- попам с предупреждением «вы действительно хотите удалить экран» — (пример Invision)

Для людей с необратимыми последствиями, такими как постоянное удаление чего-либо, имеет смысл спросить, а уверенны ли они?
Петруха Фёдоров 4. Сделайте обратную связь — быстрой. В реальном мире окружающая среда даёт нам обратную связь. Мы говорим, а другие отвечают (во всяком случае, зачастую). Мы издеваемся над кошкой, а она шипит и царапается. 

Слишком часто цифровые интерфейсы не могут дать «мгновенной обратной связи» — из-за этого мы задаемся вопросом: «может, стоит перезагрузить страницу?», «перезагрузить ноутбук?» или «выбросить ноутбук из ближайшего окна и приобрести новый?». 

Здесь выручает загрузочная анимация, которая даёт понять, что страница загружается, и вскоре (наверное) — загрузится. Более этого, она создает ощущение, что загрузка происходит «быстрее».
Петруха Фёдоров В общем, просто убедитесь что всё происходит «мгновенно». Например, для населения России достаточно 4 секунд, чтобы закрыть ваш сайт. Для США чуть меньше — 3 секунды. 

5. Тщательно продумайте расположение и размер элемента. Закон Фиттса гласит, что время достижения цели зависит от расстояния до цели и её размера. 

Другими слова: чем ближе или больше что-то, тем быстрее вы можете навести на него курсор. Это, очевидно, имеет всевозможные последствия для взаимодействия и дизайна пользовательского интерфейса, но три из наиболее важных:
Петруха Фёдоров 1. Сделайте кнопки и другие «цели нажатия» — относительно большими, чтобы их было легче увидеть и щелкнуть. Это особенно важно для меню. 

2. Размещайте навигацию (и другие общие интерактивные элементы, такие как панель поиска) по краям или углам экрана. Последнее может показаться нелогичным, но это работает, потому что уменьшает потребность в точности: пользователю не нужно беспокоиться о «превышении цели клика». 

Пока вы думаете о размещении и размере элемента, всегда помните о своей модели взаимодействия. Если ваш сайт требует горизонтальной прокрутки, вам нужно подумать, где и как настроить пользователей на этот необычный тип взаимодействия.
Петруха Фёдоров 6. Не игнорируйте стандарты. Будучи очень креативными, дизайнеры, как правило, любят изобретать что-то новое, но это не всегда удачная затея. 

Зачем? Обновленная версия знакомого взаимодействия или интерфейса добавляет «когнитивную нагрузку»: это заставляет людей снова думать о процессе, который они уже изучили. Очевидно, что вы можете заново изобрести колесо, сколько захотите, но только если это действительно улучшит дизайн. 

Это практическое правило объясняет, почему в строке меню Google Docs есть почти все те же параметры, что и в ворде (до висты).
Петруха Фёдоров 7. Сделайте ваши интерфейсы легкими в изучении. Когда речь заходит о простоте, люди часто ссылаются на статью психолога из Гарварда — Миллера (Джордж, вроде), которая называется «Магическое число семь, плюс или минус два: некоторые ограничения нашей способности обрабатывать информацию». В статье предполагается, что люди могут держать только 5-9 вещей в их кратковременной памяти с любой надежностью. Сам Миллер назвал это совпадением, но, похоже, это никого не удерживает от цитирования) 

Тем не менее, логично, что чем проще, тем легче запомнить в краткосрочной перспективе. Поэтому, когда это возможно, ограничивайте количество вещей, которые нужно запомнить человеку, чтобы эффективно использовать ваш интерфейс. Вы можете облегчить это, разбивая информацию на части — легко усваиваемые куски.
Петруха Фёдоров Эта идея согласуется с Законом сохранения сложности Теслера, который гласит, что дизайнеры пользовательского интерфейса должны максимально упрощать свои интерфейсы. Это означает, что необходимо «маскировать» сложность приложения за упрощенным интерфейсом, когда это возможно. Популярным примером того, что продукт не соответствует этому закону — Microsoft Word. 

Большинство людей в ворде делают лишь несколько базовых вещей — например, набирают текст. И, конечно же, есть и те, кто используют его для выполнения всевозможных «расширенных действий», но во всём мире все открывают один и тот же ворд с одним и тем же пользовательским интерфейсом, в результате чего наш среднестатистический «Артём», который не является опытным пользователем, поражен разнообразием вариантов, которые, вероятно, никогд
Петруха Фёдоров икогда не будут использованы. 

Это привело к концепции, называемой «прогрессивным раскрытием», где расширенные функции скрыты на вторичных интерфейсах. Вы часто будете видеть это на домашних страницах веб-сайтов, где короткие фрагменты текста представляют продукт или функцию, а затем предлагают перейти по ссылке на страницу, где пользователи могут узнать больше.  

В общем, избегайте использования кнопок «узнать больше» и «аналогичного не специфического текста» в ссылках и кнопках. Зачем? Это не говорит пользователям, о чём они «узнают больше». Часто люди просто просматривают страницу в поисках ссылки, которая ведет их туда, куда они хотят, и «узнать больше», которая повторяется 25 раз подряд — не поможет.
Петруха Фёдоров И последнее: Сделайте процесс принятия решений — простым. Слишком много веб-сайтов «кричит на нас»: Баннеры, которые внезапно расширяются и превращаются в полно-экранные рекламные объявления», попапы, просящие подписаться на блог, когда вы еще и блог-то не видели, всплывающие подсказки, и всплывающие, и снова всплывающие. 

Иногда мечтаешь о более спокойной сети, и закон Хикса дает нам повод для её создания. Идея так же проста, как и её конечный результат: чем больше опций вы предоставляете пользователю, тем труднее ему принять решение.
Петруха Фёдоров Это влияет практически на всё, что мы строим:

- Общие макеты
- Навигационное меню
- Таблицы с ценообразованием
- Индекс блога
- Фиды контента

В общем, список до бесконечности огромен, но результат таков: чем проще мы создаем наши проекты, тем быстрее и проще пользователям принимать решения, которые мы хотим, чтобы они принимали. Именно поэтому на целевых страницах и в электронных письмах, не связанных с новостями, должен быть только один призыв к действию.
Петруха Фёдоров А к вопросу о том, как научиться — выучить правила в веб-дизайне и на основе готовых работ на дрибле — делать свои. Сперва переделывать, а потом — создавать свои. И необходимо выучить Figma, Photoshop, After Effects и, желательно, Синему
веб-дизайну дейст. не учат в этой стране... абыдна... учат писать теги... учат писать пхп и js-скрипты... учат расставлять шапки-футеры, кейвордсы и дескрипторы.... и усё!