Ошибки новичков дизайнеров

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

Все мы когда-то начинали свой профессиональный путь, и на пути этом совершали ошибки. Опыт работы не купишь, не продашь, и вообще ниоткуда не возьмёшь. Однако в этой статье мы попробуем помочь вам ускорить процесс получения опыта и уменьшить количество ошибок на старте, чтобы быстрее прийти к качественным результатам! В нашей онлайн-школе мы обучаем уже 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. Одинаковые однотипные элементы, несоответствие контента теме

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

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

 

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

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

Меня зовут Диана Инди, я дизайнер с 10-летним стажем и ментор дизайнеров на Solvery — помогаю тем, кому нужен совет по дизайну или карьерная консультация.

---

Ошибка 1: Пытаться изучить все сферы дизайна одновременно

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

Лучше выбрать одно направление, например, 3D-дизайн, отточить мастерство, практиковаться, брать заказы, и только после этого изучать следующую область, например, анимацию. Так вы сможете наработать сильное портфолио и поднять цены быстрее, не отвлекаясь на параллельное освоение еще пяти направлений.Один из моих менти обратился как раз с запросом “Как избавиться от ощущения, что я лоускильный”. Мы обсудили с ним его компетенции, какой прикладной опыт применения своих знаний он имеет и определили стратегию прокачивания каждого  скилла поэтапно.

Ошибка 2: Много учиться, мало практиковаться

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

К тому же, знания без практики быстро забываются, поэтому очень важно как можно скорее применять их в своей работе. Иначе просто останешься складом информации.Так произошло с одной из моих учениц. Она прошла курсы по графическому дизайну, потом по ui/ux, записалась на иллюстрацию и за все это время не взяла ни одного заказа, даже не пыталась искать. Считая, что еще не весь дизайн изучила, чтобы работать. 

Ошибка 3: Бояться задавать дополнительные вопросы заказчику, чтобы не показаться некомпетентным

«Я ведь уже профессионал, должен все понимать и схватывать на лету!» — думаем мы, когда получаем ТЗ и ничего в нем не понимаем. А проблема на деле может быть не в нас, а в составителе ТЗ — заказчики часто сами не очень понимают, что хотят, или не разбираются в терминах. Вам, как дизайнеру, нужно уметь работать в редакторах и собственно делать дизайн, а вот читать мысли в наши обязанности не входит. 

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

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

Ошибка 4: Смотреть чужие работы и из-за этого переживать, что недостаточно хорош

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

А еще, всегда держать в голове, что дизайн, в первую очередь, решает задачи бизнеса, а не создается просто, чтобы было красиво, креативно и круче, чем у других дизайнеров.Когда ко мне приходят с запросом “Как мне создавать такие же крутые работы как на Behance”, то я предлагаю посмотреть все, что было создано самим менти. Рассказать про каждую работу, как и почему он выбрал то или иное визуальное решение. Это очень повышает ценность вашего продукта в ваших же глазах.

Ошибка 5: Пытаться сделать идеальный макет с первого раза и расстраиваться из-за правок

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

Вам не нужно делать идеально — важно сделать так, как нужно клиенту, а это может сильно расходиться с вашим представлением о финальном результате. 

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

Ошибка 6: Бояться показывать свои работы, чтобы люди не подумали, что вы самозванец

У меня для вас 2 новости!

Хорошая: если вы чувствуете себя самозванцем, то, скорее всего, вы профессионал, который считает, что сумел всех обмануть. 

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

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

---

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

Большинство начинающих графических дизайнеров допускает одинаковые ошибки. CEO & Founder агентства BETA Влад Меркулов рассказал о том, как их заметить в своей работе и быстрее вырасти из джуниор-дизайнера в сеньор-специалиста.

Не смотрят на мир вокруг

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

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

Прорабатывают детали, не видя картины целиком

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

• Что должен давать этот продукт? 
• Какие принципы лежат в его основе? 

Если вы чувствуете, что делаете что-то не то — бросьте и начните все заново. 

Думают, что дизайну кто-то научит

В лучшем случае вас научат пользоваться инструментами — Photoshop, Figma. Но дизайнеру еще нужно находить решения, прокачивать эстетику, формировать свое видение картины, искать подход к задачам. Это софт-скилы, которым можно научиться только самостоятельно. 

Чтобы дойти до сеньор-позиции, кому-то потребуется 3 года, а кому-то 30 лет. Опыт совсем не играет роли. Нужно учиться не просто пользоваться программами, а мыслить определенным образом, и каждый придет к этому в свое время.