Топ-15 ошибок новичков в веб-дизайне

Как сделать хорошо, если еще ни разу ничего не делал? Никак! Поэтому надо делать и ошибаться. А эта статья поможет увидеть ошибки и исправить их.

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

Но не бойтесь ошибаться! Ошибки — неизменная часть процесса преодоления себя и выхода на новый уровень знаний.

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

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

Сетки можно разделить на много разных видов по разным классификациям. Рассмотрим несколько наиболее употребимых и понятных:

• равномерные сетки
• динамичные сетки

Многие слышали про стандартную 12-колоночную сетку. Данная сетка обычно является равномерной, так как ширина колонок остаётся неизменной (все колонки такой сетки равны между собой). Такие сетки больше подходят новичкам, так как держат в некоторых жестких рамках и приучают к порядку. Помимо этого, при работе с такими сетками дизайн обычно отталкивается от сетки, а не сетка от дизайна. Поэтому данный вариант поможет дизайнеру структурировать макет и поработать с другими аспектами дизайна, а не делать упор на композиции.

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

Одна из любимых ошибок новичков — разные выключки у разных элементов. Напримевыключка текста по центру, выровнен он по левому краю блока, а кнопка — по правому краю, и так далее. Старайтесь на начальных этапах уж точно придерживаться какой-то одной стороны: выключку по левому краю и выравнивание тоже. Такое строгое выравнивание — ваш спасательный круг.

Новички часто любят использовать выключку по ширине. Данный приём пришёл из печатной продукции, а именно из книг, где выравнивание по ширине используется для удобства чтения. Основной проблемой данной выключки является то, что при использовании ее в вебе без переносов слов по слогам (как в печати) мы получаем дыры в тексте, что сказывается не в лучшую сторону на удобстве чтения.

Если говорить про выключку по центру, то ее крайне нежелательно применять в двух случаях:

• если в текстовом блоке много строк (более трех)
• если текстовый блок широкий

И то, и другое негативно сказывается на удобстве чтения.

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

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

Детали – это показатель вашей экспертности.

Все элементы дизайна лежат почти друг на друге, чтобы побольше влезло? Избавьтесь от этого. Добавляйте в макет отступы ото всех элементов, дайте объектам «дышать». Не стоит заполнять все пространство макета. Зачастую именно негативное пространство и отсутствие лишних объектов помогает обратить внимание на самое важное.

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

Используете белый текст на светло-розовом фоне? Пишете заголовок поверх пестрой фотографии? Не надо так. Все элементы в вашем дизайн-макете несут какой-то смысл. А в чем их смысл, если их даже не видно?

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

Есть стандарты доступности (Web Content Accessibility Guidelines (WCAG) 2.0), которые применимы к цветовым решениям и читаемости текстов. Обозначено три уровня доступности: А (самый низкий), АА (средний) и ААА (самый высокий).

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

• для основного текста (до 24 px)
• для заголовков (от 24 px или жирного текста)
  
• для графических элементов (иконки или обводки)
  

Данный плагин оценивает соответствие уровня контрастности для АА и ААА.

Фото классно подходит по тематике, ну и что, что разрешение вполовину меньше нужного! Пусть фото все будут в разном стиле и разного оформления, зато как хорошо в дизайн вписываются!

Узнали себя? Не надо так. Графика — такой же важный элемент дизайна, как и все остальное. Графика должна поддерживать стилистику и придавать настроение, а также повторять и усиливать композицию, а не портить ваш дизайн.

Где брать фото для своих проектов? Ниже — подборка стоков и плагинов, где вы можете брать изображения. Не забывайте об авторском праве и правилах использования фото с подобных ресурсов. На хороших сервисах всегда есть информация о том, как, где и в каком виде вы можете использовать данные изображения.

Фотостоки:

Unsplash

Pixabay

StockSnap

Pexels

Reshot

Freepik

Rawpixel

Плагины для Figma:

Photos

Unsplash

Pexels

Imagif

Беспорядок на страницах и в слоях сразу выдаёт неопытного дизайнера. Правильно сгруппированные и названные страницы и слои позволят и вам, и другим работающим с вашим дизайном специалистам быстрее ориентироваться в макетах и держать все под контролем. Используйте, например, смайлики, чтобы показать степень готовности макета 🔴 (не готово), 🟡 (в процессе), 🟢 (готово).

Pixel Perfect

Убирает все несовершенства и неаккуратные значения в дизайне (14 вместо 13,86, например), а также сдвигает и меняет размеры объектов, чтобы получались целые значения, то есть осуществляет Pixel Perfect.

Clean Document

Может удалять все скрытые ненужные (запасные) слои, разгруппировывать однослойные группы, переименовывать слои, сортировать страницы и осуществлять Pixel Perfect.

Lilgrid

Расставляет выбранные хаотичные элементы по заданной вами сетке.

Понравилось несколько макетов на Dribbble или Behance, и вы решили набрать из каждого макета различные элементы и приемы и встроить их в свой дизайн? В итоге вы получите кашу из разностильных объектов. Не надо так. Референсами можно и нужно пользоваться, но надо понимать, КАК это делать.

Во-первых, референс ни в коем случае нельзя полностью копировать и выставлять за свое! Во-вторых, вы должны вдохновляться осознанно, а не просто «понравилось — взял».

Разные способы работы с референсами для получения нужного результата, мы рассматриваем на курсе «Профессия digital-дизайнер», один из таких способов описан ниже.

Основная идея данного способа заключается в том, что необходимо:

• выбрать любой понравившийся дизайн
• повторить его, чтобы иметь все элементы данного дизайна в готовом состоянии
• «инвертировать» дизайн — расположить ВСЕ элементы дизайна в местах, отличных от их расположения в исходном дизайне

На данном этапе уже получился дизайн, выполненный на основе готового, но уже ваш, уникальный. Теперь можно приступить к вариациям: изменить положения объектов, их размер, цвет, типографику и так далее, и получить еще несколько вариантов дизайна.

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

Подробнее о том, как работает метод инвертированного дизайна, в этом видео

Сайты:

Behance

Dribbble

Httpster

Awwwards

Pinterest

Land-book

Site Inspire

One Page Love

Агрегаторы:

Use panda

Muzli

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

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

Небольшая видео-заметка на тему правила внутреннего-внешнего.

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

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

Есть всего два варианта использования эффекта Drop Shadow (тень) в дизайне. Оба этих варианта имеют корни в физике:

• тень
• свечение

Тень всегда отбрасывается объектом в какую-либо сторону, когда на него падает свет. Не бывает такой ситуации, что объект равномерно отбрасывает равномерно одинаковую тень сразу на все 360 градусов, а именно такие тени часто делают новички. Тень в реальности всегда смещена по осям X/Y.

Свечение же в свою очередь излучается объектом, который может этот сам свет генерировать.

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

Правило 1: Тень всегда смещена по осям X/Y

Правило 2: Прозрачность и размытие. Не используем очень темный цвет тени в дизайне, потому что будет грязно и мрачно. Помимо этого размываем тень так, чтобы ее переход в фон был максимально мягким!

Правило 3: Цвет тени. Не используйте чёрные тени, особенно у насыщенных ярких объектов. Старайтесь делать тень в оттенке того цвета, на который эта самая тень ложится. Также лучше добавить оттенок объекта, отбрасывающего тень.

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

Также можно немного сместить свечение по Y:

Новички часто используют в работах немодные, неактуальные шрифты, которые сильно «старят» дизайн. Если вы думаете, что декоративные или рукописные шрифты сделают ваш дизайн интереснее — нет, не сделают. Смотрите трендовые актуальные работы и анализируйте шрифты, которые в них используются.

Помимо актуальности не стоит забывать про соответствие шрифтов стилистике дизайна и целевой аудитории. Если вы делаете сайт про тракторы, не стоит использовать шрифт с цветочками.

Любимые настройки текста у новичков — увеличенный трекинг и уменьшенный интерлиньяж.

Это НЕ красиво.

Это НЕ аккуратно.

Это НЕ читаемо.

Не стоит увеличивать трекинг в нормальных наборных шрифтах, взятых, например, с Gooogle Fonts. Авторы шрифтов уже все за вас продумали, и маловероятно, что вы лучше них знаете, какие настройки надо использовать

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

А вот величина интерлиньяжа всегда зависит от кегля и желаемого эффекта. Для основного текста интерлиньяж может варьироваться от 120% до 170%.

И, пожалуйста, забудьте про бесконечный Italic в свои текстах.😉

Многие новички влюблены в “Lorem ipsum…”. Удобно, просто, быстро, красиво? Не очень. Всеми опытными дизайнерами такие тексты-рыбы (заполнители) воспринимаются очень скептически, а их использование сразу выдает в вас новичка.

Используя один и тот же текст для разных сайтов и интерфейсов, вы рискуете допустить серьезную ошибку.

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

Старайтесь использовать в дизайне реальный контент или тематические тексты, так как в разных сферах средняя длина слова и предложения может очень сильно варьироваться.

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

Конечно, все изображения должны обязательно соответствовать тематике вашего интерфейса, «рыбные» фотографии категорически не допускаются!