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

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

Image for post
Image for post

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

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

1. Сетки

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

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

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

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

2. Выравнивание и выключка

Все по-разному

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

Выключка — это способ выравнивания текста внутри текстового блока.

Выравнивание — выравнивание уже готового текстового блока или других элементов относительно макета.

Выключка по ширине

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

Выключка по центру

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

3. Шумы

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

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

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

4. Негативное пространство

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

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

5. Контраст

Используете белый текст на светло-розовом фоне? Текст на высоко детализированной фотографии? “Почему бы и нет в общем-то” — скажете вы. Но нет, не надо так делать. Все, что вы располагаете на макете несёт какой-то смысл и должно быть видно. Если этого не видно, то зачем оно вообще?

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

Так вот, есть определенные стандарты доступности (Web Content Accessibility Guidelines (WCAG) 2.0), которые применимы к цветовым решениям и читаемости текстов. Обозначено три уровня доступности: А (самый низкий), АА (средний) и ААА (самый высокий). Можете не пытаться понять, как это работает, так как рассчитывается это все математически (но если вам интересно, то можете найти информацию — “окей, гугл”).

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

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

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

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

6. Плохая графика

Любите некачественные фото, но зато подходящие по тематике? Или все фото в разном стиле и разного оформления? Давайте постараемся так не делать, ведь графика — такой же важный элемент дизайна, как и все остальное. Графика должна поддерживать стилистику и придавать настроение, а также повторять и усиливать композицию, а не портить вам дизайн!

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

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

Фотостоки:
Unsplash
Pixabay
StockSnap
Pexels
Reshot
Freepik
Rawpixel

Плагины для Figma:
Photos
Unsplash
Pexels
Imagif

7. Слои и порядок

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

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

Pixel Perfect — по-разному интерпретируемое понятие в вебе, которое в данной статье используется в следующем смысле: все размеры объектов и значения их смещения по осям X и Y должны быть целыми числами. Так как наименьшая единица измерения в вебе все-таки 1 пиксель.

Помимо этого вот ⬇️ подборочка плагинов, которая поможет вам держать все в порядке:

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

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

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

8. Вдохновение

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

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

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

Как работать с вдохновением?

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

  1. выбрать любой понравившийся дизайн
  2. повторить его, чтобы иметь все элементы данного дизайна в готовом состоянии
  3. “инвертировать” дизайн — расположить ВСЕ элементы дизайна в месте, в котором данный элемент не располагался на исходном дизайне

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

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

На одном из вебинаров, который мы прикрепили ниже, мы как раз подробно рассматривали данный способ работы с вдохновением!

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

Сайты:
Behance
Dribbble
Httpster
Awwwards
Pinterest
Land-book
Site Inspire
One Page Love

Агрегаторы:
Use panda
Muzli

9. Группировка

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

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

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

10. Размеры

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

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

11. Тени

Тени на тексте

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

А вот наш вебинар на тему того, как же добиться такого актуального эффекта в тексте, который называется, кстати, неоморфизм ⬇️

Физика теней

Есть всего два варианта использования эффекта Drop Shadow (тень) в дизайне, которые идут из физики:
✅ тень
✅ свечение.

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

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

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

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

Как же сделать хорошую тень или свечение? Рассмотрим ниже! ⬇️

Тени

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

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

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

Свечение

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

Если же хотите добавить немного модного, то можно немного сместить свечение по Y 😉

12. Не те шрифты

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

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

13. Настройки текста

Любимые настройки текста у новичков — увеличенный трекинг и уменьшенный интерлиньяж. Это НЕ красиво, это НЕ аккуратно, это НЕ читаемо! Забудьте про такие настройки!

Трекинг — это расстояния между символами в тексте
Интерлиньяж — расстояние между строками

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

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

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

14. Рыбный текст

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

Используя один и тот же текст для разных сайтов и интерфейсов вы рискуете очень сильно облажаться. Старайтесь использовать тематические тексты, так как в разных сферах средняя длина слова и предложения может очень сильно варьироваться. Используя одинаковый текст везде, вы можете получить такую ситуацию, что ваш дизайн классно смотрится на коротких предложениях или словах, но в сфере, для которой вы делаете дизайн, таких слов просто НЕТ! В итоге, вы не учли контент и получили очень слабый и непродуманный вариант 😢

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

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

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

Ну что ж, в этой статье обсудили что начинающие дизайнеры ДЕЛАЮТ не так. Если вы хотите узнать, чего начинающие дизайнеры НЕ ДЕЛАЮТ, а должны бы, то ставьте лайки на статью и пишите в комментариях ➕

Written by

Та самая Соня https://www.instagram.com/sofi.webdesigner/ 😉 Арт-директор и преподаватель https://www.instagram.com/krona.studio/ 🖤

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store