К главным ошибкам стадии design можно отнести

Время на прочтение
4 мин

Количество просмотров 22K

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

Приведём восемь распространённых ошибок в оформлении визуального сообщения и как их избежать.

1. Безупречная симметрия

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

2. Недостаточно белого пространства

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

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

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

3. Недостаточно повторяемости

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

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

4. Центрирование текста

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

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

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

5. Слишком много текста на одной строке

Чтение большого объёма текста, сформированного в множество длинных строк вызывает усталость глаз. Контент куда проще читать и усваивать, если он организован с соблюдением оптимальной длины строки. Последнее зависит от отступов, размеров и типа шрифта. Как правило человеку комфортно читать текст, длина строк которого 10 сантиметров, что равно 45-70 символам, включая пробелы, при размере шрифта 11-13 пикселей.

6. Неудачный кернинг

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

7. Перебор со шрифтами и цветом

Контраст — это важное и веское правило в дизайне для поддержания композиционного равновесия макета. Пользователь переживает эмоциональное впечатление, замечая необычные моменты оформления, контраст добавляет фокуса и не допускает, чтобы дизайн выглядел скучно и плоско.
Для выделения транслируемого сообщения можно выбирать и варьировать разнообразные цвета, шрифты, текстуры, размеры и формы — главное, не перестараться.
К примеру, последнее, что хотелось бы видеть на посадочной странице или брошюре — это беспорядочная смесь шрифтов. Это не только разрушает дизайн макета и выглядит отталкивающе, но ещё и не позволяет сосредоточиться на контенте. Эксперименты с выбором шрифтов должны ограничиваться 2-3 гарнитурами, сочитающихся с дизайном конкретного проекта.
Тоже справедливо и в отношении подбора цветов: избыток цветов создаёт впечатление кричащей, угнетающей и дешёвой безвкусицы. Ограничивайтесь 2-4 цветами, и всегда учитывайте разборчивость текста на выбранных цветах.

8. Использование растровых изображений

Растровые изображения — это сетка пикселей, это типичные файлы форматов: jpg/jpeg, tiff, gif, bmp, and png. Они зависят от разрешения, поэтому, увеличивая растровое изображение, оно становится неровными и размытыми. В свою очередь, векторные объекты масштабируемы и их можно увеличить без потери качества изображения, их линии будут оставаться четкими и резкими, как на экране так и в печати.

В заключение

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

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

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

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

Ошибка № 1. Сетки

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

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

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

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

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

Ошибка № 2. Выравнивание и выключка

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

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

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

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

Ошибка № 3. Визуальный шум

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

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

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

Ошибка № 4. Негативное пространство

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

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

Ошибка № 5. Контраст

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

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

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

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

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

Ошибка № 6. Плохая графика

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

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

Подборка стоков и плагинов

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

Фотостоки:

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

Ошибка № 7. Слои и порядок

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

Подборка плагинов для порядка в макете

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

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

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

Ошибка № 8. Работа с референсами

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

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

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

Метод инвертирования дизайна

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

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

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

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

Подборка ресурсов для вдохновения

Сайты:

Агрегаторы:

Ошибка № 9. Группировка

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

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

Ошибка № 10. Размеры элементов

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

Ошибка № 11. Тени

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

Физика теней

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

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

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

Тень или свечение?

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

Как сделать тень? 3 правила

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

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

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

Как сделать свечение?

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

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

Ошибка № 12. Не те шрифты

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

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

Ошибка № 13. Настройки текста

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

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

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

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

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

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

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

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

Ошибка № 14. Рыбный текст

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

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

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

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

Ошибка № 15. Одинаковые однотипные элементы, несоответствие контента теме

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

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

15 Дек 2022

6253

0

Далее текст от лица автора

Ошибка 1. Группы вместо фреймов

Я не разрешаю своим студентам* использовать группы. Почему? Фреймы лучше в 99% случаев, потому что в отличие от групп они позволяют применять такие функции Figma как автолейауты, привязки (constraints), компоненты, сетки и другие

*Примечание переводчика. Молли — создатель проекта UI Prep, в рамках которого она обучает UX/UI дизайну

Ошибка 2. Супер-пупер наборы компонентов

Дизайнерам нравится создавать универсальный набор компонентов со множеством вариантов и свойств. Но при работе над проектом разделение компонентов на типы/подтипы облегчает их поиск и использование. Например, вместо одного суперкомпонента для всех типов кнопок разбейте их на подтипы. Вы с лёгкостью найдёте их на панели Assets и быстро настроите.

Ошибка 3. Слишком большое количество цветовых стилей

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

Например, присвойте номера десяти оттенкам/тонам вашего основного цвета. Затем создайте стили для разных состояний этого цвета: 50 (фон), 600 (базовый/по умолчанию), 700 (при наведении), 800 (при нажатии).

Ошибка 4. Неправильное использование иконок

У иконок обманчивый вид. Они выглядят как безобидные маленькие компоненты, но при неправильной настройке могут создать проблемы.

Правила для иконок:

• Держите все векторные фигуры иконок в стандартных квадратных фреймах
• Убедитесь, что одна иконка — это один вектор
• Никогда не вращайте иконки для создания новых версий (например, стрелка влево/вправо)
• Объединяйте в варианты только те иконки, которые тесно связаны между собой

Ошибка 5. Видимость всех компонентов на панели Assets

Скройте некоторые компоненты на панели Assets. Для этого нужно добавить «.» или «_» в начало их названия. Это полезно только в случае атомарных компонентов, из которых состоят другие компоненты. Например, присвойте вложенным иконкам статуса для аватара наименование «.status», чтобы они не были видны на панели Assets и не загромождали её. И только полный компонент аватара отобразите на панели.

Ошибка 6. Использование жёлтого цвета в дизайне

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

Ошибка 7. Отсутствие описаний для стилей и компонентов

Используйте описания для стилей и компонентов, чтобы быстрее находить их и применять. Например, добавьте описания, чтобы:

• знать, когда или где элемент должен использоваться (например, для основного цвета/700 напишите пояснение: «при наведении»)
• ключевые слова для поиска помогали быстро находить нужную информацию на панели Assets (например, для иконки сердца добавьте описание: «нравится, избранное, сохранить» («like, love, favorite, save»)).

Ошибка 8. Ориентация на размеры устройств, а не на брейкпоинты*

Figma предлагает размеры фреймов на основе общепринятой ширины устройств. Это нормально… но с точки зрения дизайна гораздо практичнее опираться на брейкпоинты! Используйте следующую ширину фреймов в макетах:

• Маленький: 375px
• Средний: 600px
• Большой: 900px
• Очень большой: 1200px

Подробнее читайте здесь.

*Примечание переводчика. Брейкпоинты — контрольные точки дизайна, которые дают возможность дизайнерам и разработчикам контролировать макет дизайна при его масштабировании из мобильной версии в десктопную. Они помогают адаптировать дизайн к устройствам любого размера без ущерба для UX

Ошибка 9. Использование автоматической высоты строки (интерлиньяжа) для текста

Автоматическая высота строки в Figma хорошо работает для многих текстовых стилей. Но вам не помешает немного её настроить.

Следуйте следующим рекомендациям по настройке интерлиньяжа:

1. Увеличьте расстояние между абзацами — задайте значение высоты строки, равное 150%
2. Уменьшите расстояние между заголовками и текстом — задайте значение высоты строки, равное 120%
3. Округлите все значения интерлиньяжа до ближайшего числа в 8px или в 4px. Это улучшит восприятие текста

Ошибка 10. Хранение стилей и компонентов в одном файле

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