Опубликовано Типичные ошибки начинающих дизайнеров. Как их избежать?
Многим начинающим дизайнерам кажется, что от них требуется создать яркий, запоминающийся и уникальный дизайн. Однако главной задачей является увеличение конверсии с сайта заказчика. Лучше использовать проверенные и даже шаблонные решения, но чтобы они принесли результат. Ошибки дизайнеров способны подорвать доверие пользователя к сайту и негативно сказаться на продвижении.
Типичные ошибки web-дизайнеров
Большинство ошибок носит технический характер, но могут быть моменты, неочевидные на первый взгляд ни для дизайнера, ни для заказчика. Некоторые из рассмотренных ниже ошибок допускают даже опытные дизайнеры.
Ошибка 1: Не прослеживается разделение на блоки
Большинство сайтов, особенно, если это одностраничный лендинг, нужно делить на блоки для простоты восприятия пользователя. Так пользователям проще воспринимать информацию, плюс, верстальщику гораздо проще будет сделать навигацию по странице, если она разделена на такие блоки.
Неопытный дизайнер может сделать разделение страницы на блоки только с помощью заголовков. Это может быть оправдано в случае, если речь идет о странице, на которой мало контента. В остальных случаях рекомендуется продумать разделение между блоками.
Может наблюдаться и обратная ситуация, когда разделение между блоками слишком яркое. Сайт все же должен смотреться единым целым, поэтому делать для каждой секции отдельный фон, использовать множество декоративных элементов тоже не следует.
Ошибка 2: Нет единого стиля для отступов
Неопытные дизайнеры иногда «забивают» на приведение отступов к единому стилю. Страница из-за этого выглядит неаккуратно, плюс, напрямую влияют на восприятие пользователем содержимого ресурса. Если будут слишком маленькие отступы, то контент на сайте будет сливаться и его будет неудобно воспринимать. В случае со слишком большими отступами блоки могут перестать смотреться как единое целое.
Ошибка 3: Нечитаемый текст
Ошибки с нечитаемым текстом допускаются в большинстве случаев, когда текст накладывается поверх какого-то фонового изображения.
У посетителя не должно возникать необходимости рассматривать под прищуром текст, особенно, если это заголовок. Даже если сливающийся текст не сильно важен, он все равно должен выделяться на фоновом изображении, чтобы дизайн выглядел гармонично.
Ошибка 4: Намешать много стилей
Даже если в ТЗ написано, что нужно сделать яркий и запоминающийся дизайн-макет, то это не значит, что нужно намешивать несколько стилей. Смесь нескольких стилей на странице затрудняем восприятие информации, а порой выглядит очень непрофессионально и дешево.
Ошибка 5: Непродуманная навигация
Пользователь должен легко получить доступ к любому уголку сайта. Для этого важно продумать меню, которым будет удобно пользоваться со всех страниц ресурса. Ошибку с навигацией можно разделить на несколько категорий:
- Нет совсем никакого меню. Часто подобные ошибки встречаются при создании одностраничных макетов. Если на лендинге много блоков с контентом, то пользователю будет сложно изучать его без меню.
- Меню находится в непривычном для пользователя месте.
- В меню расположено слишком много позиций, которые для большинства пользователей не интересны и только мешают.
- Не предусмотрен поиск по сайту (касается многостраничных ресурсов).
- Блоки с контентом расставлены нелогично с точки зрения пользователя, например, сначала идет блок с оформлением покупки, а только потом описание товара.
Ошибка 6: Необработанные или некачественные фотографии
Не все владельцы бизнеса могут предоставить уникальные и качественные фотографии. В таком случае большинство дизайнеров скачивают бесплатные изображения с фото-стоков. Неправильно подобранные и никак не обработанные стоковые фотографии создают у посетителя чувство дешевизны и несерьезности проекта. Также стоит учитывать, что фотографии должны быть в тему, а не просто для того «чтобы были».
Ошибка 7: Непродуманная цветовая гамма
Когда используется слишком много цветов в макете сайта, он становится слишком ярким и негармоничным.
Многих пользователей это будет отвлекать, а кого-то побудит уйти с сайта. Непродуманная цветовая гамма может привести к некорректному отображению контента.
Ошибка 8: Непродуманный макет
Помимо общего расположения блоков важно четко обозначить их размер. Если этого не сделать, то сайт будет плохо смотреться на экранах с разным разрешением. Также блоки на странице могут быть разного размера в ширину, что тоже негативно скажется как на адаптивности, так и на внешнем виде макета.
Важно создать еще и мобильную версию дизайна. Большинство пользователей сейчас смотрят контент через мобильные. Если не создать дизайн для мобильной версии страницы, то будут сложности при верстке мобильного варианта сайта.
Как избежать ошибок
Ошибки дизайнеров, описанные выше, очень легко избежать, если следовать универсальным советам.
Делайте четкое разделение на блоки
Между смысловыми блоками на странице обязательно должны быть отступы, которые больше остальных.
Некоторые блоки желательно выделять цветом или фоновым изображением. Дополнительно можно использовать какие-либо декоративные элементы интерфейса, например, линии.
Однако не нужно делать для каждого блока отдельный фон и/или отдельные стили. Хватит того, что будет несколько акцентных блоков, а между остальными будут увеличены отступы.
Задать единые стили отступов
Укажите единый размер отступов между абзацами, изображениями, заголовками, смысловыми блоками и прочими элементами. По ходу всего макета соблюдайте указанные отступы.
Проверяйте текст на читаемость
Текст, особенно расположенный поверх картинок, должен без проблем читаться и при этом не перегораживать что-то важное на картинке. Для этого можно чуть затемнить изображение, добавить тексту тени (уместно только для заголовков) или разместить текст поверх изображения так, чтобы он лучше читался.
Соблюдайте единый стиль
Не нужно мешать разные стили.
Определите один и используйте его по ходу всего макета.
Продумывайте навигацию
На всех сайтах, за исключением совсем небольших посадочных страниц, должно быть меню. Располагайте его в привычном месте для большинства пользователей — в шапке сайта. Меню можно скрыть за кнопкой, но пользователь должен понимать, что это именно меню сайта. Если в меню много пунктов, то его можно сделать многоуровневым, скрыв неважные разделы.
Используйте релевантные и качественные фотографии
Фотографии на сайте должны подходить по смыслу к блоку, где они используются. Также их желательно предварительно обработать, чтобы они лучше смотрелись с общей стилистикой макета. Не используйте фото с водяными знаками и фото с поисковой выдачи.
Определитесь с цветовой гаммой
Во всем макете используйте 2−3 основных цвета. Они должны гармонировать между собой и не мешать пользователю изучать контент. Помимо основных 2−3 цветов можно использовать вспомогательные, но очень редко и только если это действительно необходимо.
Продумайте макет
Делайте макет по сетке, чтобы избежать появления блоков разного размера, а также лучше продумать адаптивность элементов под разные разрешения экранов. Для мобильной версии сайта требуется сделать собственный дизайн-макет, где будет показано расположение элементов и их поведение при просмотре со смартфона.
Как построить сотрудничество с заказчиком на выгодных условиях
Чтобы заказчик платил больше за работу и прислушивался к вашему мнению, вам требуется зарекомендовать себя как специалиста. Сделать это не очень сложно, просто следуйте этим советам:
- Продемонстрируйте релевантное портфолио. Даже если работ в портфолио немного, то это не страшно, но они должны быть правило оформлены в виде кейса. Заказчик должен видеть не только красивую картинку, но и то как вы пришли к такому результату и почему.
- Задавайте наводящие вопросы о компании и задаче. Так вы покажете, что заинтересованы в проекте заказчика, а также сможете избежать часть из описанных выше ошибок.
- Не стесняйтесь предлагать свое видение дизайна. Заказчик не всегда может знать, как сделать сайт удобным с точки зрения пользователя, поэтому если вы дадите аргументированную точку зрения, то вас станут выше ценить.
- Заранее обговорите организационные моменты: сроки, оплату, штрафы, возможные форс-мажоры.
- Запросите у клиента список сайтов-конкурентов и/или сайтов, которые ему нравятся в плане дизайна, удобства использования. Так вы сможете лучше понимать друг друга в ходе работы.
Общие советы дизайнерам
Работая дизайнером в digital-сфере важно постоянно совершенствовать свои профессиональные и коммуникационные навыки. В качестве итога статьи вот несколько советов для дизайнеров:
- Смотрите работы более опытных коллег. Это можно делать на площадках для дизайнеров и творческих людей: Behance, Dribble, Pinterest, в тематических группах в соц сетях.
- Не стесняйтесь запрашивать обратную связь от коллег или заказчиков. Так вы сможете быстрее понять, что нужно улучшить.
- Если вы новичок, то попытайтесь скопировать несколько хороших работ с Behance или Dribble (не для портфолио). Так вы сможете лучше понять, как правильно делать дизайн сайтов.
- Оформляйте портфолио в виде кейсов. Например, много хороших кейсов можно посмотреть на Behance. Потенциальному клиенту важнее видеть не просто красивую картинку, а как и почему вы пришли к такому результату.
- Постоянно обучайтесь и следите за трендами.
Ошибки в дизайне часто делаются из-за того, что дизайнер отталкивается не от потребностей клиента или юзабитили, а от визуальной привлекательности сайта. Красота тоже важна, но на первом месте должно быть удобство пользователя и выполнение задач клиента.
Топ-15 ошибок новичков в веб-дизайне — Дизайн на vc.ru
Как сделать хорошо, если еще ни разу ничего не делал? Никак! Поэтому надо делать и ошибаться. А эта статья поможет увидеть ошибки и исправить их.
3264 просмотров
Все мы когда-то начинали свой профессиональный путь, и на пути этом совершали ошибки.
Опыт работы не купишь, не продашь, и вообще ниоткуда не возьмёшь. Однако в этой статье мы попробуем помочь вам ускорить процесс получения опыта и уменьшить количество ошибок на старте, чтобы быстрее прийти к качественным результатам! В нашей онлайн-школе мы обучаем уже 14 поток веб-дизайнеров с нуля и каждый день видим одни и те же ошибки в разном проявлении. Поэтому мы решили их обобщить и показать, как от них избавиться.
Но не бойтесь ошибаться! Ошибки — неизменная часть процесса преодоления себя и выхода на новый уровень знаний.
Ошибка № 1. Сетки
Все новички знают, что такое сетки, но почти никогда ими не пользуются, даже если сетка в макете включена. Обычно это происходит из-за незнания или неумения пользоваться данным инструментом.
Правильно подобранная сетка поможет выдержать ритм элементов, улучшить композицию и навести порядок в макете (выравнивание все-таки штука важная).
Сетки можно разделить на много разных видов по разным классификациям.
Рассмотрим несколько наиболее употребимых и понятных:
- равномерные сетки
- динамичные сетки
Многие слышали про стандартную 12-колоночную сетку. Данная сетка обычно является равномерной, так как ширина колонок остаётся неизменной (все колонки такой сетки равны между собой). Такие сетки больше подходят новичкам, так как держат в некоторых жестких рамках и приучают к порядку. Помимо этого, при работе с такими сетками дизайн обычно отталкивается от сетки, а не сетка от дизайна. Поэтому данный вариант поможет дизайнеру структурировать макет и поработать с другими аспектами дизайна, а не делать упор на композиции.
Динамичные сетки в свою очередь подстраиваются под дизайн. В этом случае сетка идет от дизайна, от композиции, от идеи. Это сложнее, особенно на первых порах.
Ошибка № 2. Выравнивание и выключка
Одна из любимых ошибок новичков — разные выключки у разных элементов. Напримевыключка текста по центру, выровнен он по левому краю блока, а кнопка — по правому краю, и так далее.
Старайтесь на начальных этапах уж точно придерживаться какой-то одной стороны: выключку по левому краю и выравнивание тоже. Такое строгое выравнивание — ваш спасательный круг.
Выключка — это способ выравнивания текста внутри текстового блока.
Выравнивание
— выравнивание уже готового текстового блока или других элементов относительно макета.
Новички часто любят использовать выключку по ширине. Данный приём пришёл из печатной продукции, а именно из книг, где выравнивание по ширине используется для удобства чтения. Основной проблемой данной выключки является то, что при использовании ее в вебе без переносов слов по слогам (как в печати) мы получаем дыры в тексте, что сказывается не в лучшую сторону на удобстве чтения.
Если говорить про выключку по центру, то ее крайне нежелательно применять в двух случаях:
- если в текстовом блоке много строк (более трех)
- если текстовый блок широкий
И то, и другое негативно сказывается на удобстве чтения.
Ошибка № 3. Визуальный шум
Палочки, точечки, штрихи, кружочки, галочки — любимые украшательства многих начинающих дизайнеров. Если вы добавляете эти шумы, то вы пока неуверенно работаете с пространством макета и контентом. Это, конечно, поправимо, но пока — не надо захламлять дизайн лишними элементами.
Важно понимать, что есть шумы, а есть детали. Работая с деталями, вы улучшаете дизайн. Используя шумы, вы его ухудшаете. Шумы захламляют пространство, не несут смысла, не поддерживают идею и стилистику бренда.
Детали – это показатель вашей экспертности.
Ошибка № 4. Негативное пространство
Все элементы дизайна лежат почти друг на друге, чтобы побольше влезло? Избавьтесь от этого. Добавляйте в макет отступы ото всех элементов, дайте объектам «дышать». Не стоит заполнять все пространство макета. Зачастую именно негативное пространство и отсутствие лишних объектов помогает обратить внимание на самое важное.
В теории дизайна это называется «эффектом изоляции»: вы выделяете наиболее важный объект пустотой вокруг него.
Ошибка № 5. Контраст
Используете белый текст на светло-розовом фоне? Пишете заголовок поверх пестрой фотографии? Не надо так. Все элементы в вашем дизайн-макете несут какой-то смысл. А в чем их смысл, если их даже не видно?
Помимо эстетической составляющей дизайна, существует еще и функциональная: насколько ваш конечный дизайн будет понятен и доступен пользователю. Сможет ли ваш дедушка прочитать написанный вами на экране текст? Ваш дизайн должен учитывать все группы пользователей, которые будут с ним взаимодействовать.
Есть стандарты доступности (Web Content Accessibility Guidelines (WCAG) 2.0), которые применимы к цветовым решениям и читаемости текстов. Обозначено три уровня доступности: А (самый низкий), АА (средний) и ААА (самый высокий).
Эти уровни рассчитываются математически и по-разному вычисляются для различных размеров текста (заголовки или основной текст), а также для графических элементов (иконки, например).
- для основного текста (до 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, и вы решили набрать из каждого макета различные элементы и приемы и встроить их в свой дизайн? В итоге вы получите кашу из разностильных объектов. Не надо так. Референсами можно и нужно пользоваться, но надо понимать, КАК это делать.
Во-первых, референс ни в коем случае нельзя полностью копировать и выставлять за свое! Во-вторых, вы должны вдохновляться осознанно, а не просто «понравилось — взял».
Разные способы работы с референсами для получения нужного результата, мы рассматриваем на курсе «Профессия digital-дизайнер», один из таких способов описан ниже.
Метод инвертирования дизайна
Основная идея данного способа заключается в том, что необходимо:
- выбрать любой понравившийся дизайн
- повторить его, чтобы иметь все элементы данного дизайна в готовом состоянии
- «инвертировать» дизайн — расположить ВСЕ элементы дизайна в местах, отличных от их расположения в исходном дизайне
На данном этапе уже получился дизайн, выполненный на основе готового, но уже ваш, уникальный. Теперь можно приступить к вариациям: изменить положения объектов, их размер, цвет, типографику и так далее, и получить еще несколько вариантов дизайна.
Таким образом, можно быстро сгенерировать несколько различных вариантов дизайна, выбрать из них наиболее подходящий и «докрутить» уже именно его под свою тему и нужды.
Подробнее о том, как работает метод инвертированного дизайна, в этом видео
Подборка ресурсов для вдохновения
Сайты:
Behance
Dribbble
Httpster
Awwwards
Land-book
Site Inspire
One Page Love
Агрегаторы:
Use panda
Ошибка № 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. Одинаковые однотипные элементы, несоответствие контента теме
Данная ошибка схожа с предыдущей, разница лишь в типе контента. Помимо текста-рыбы новички используют одинаковые фото (например, для карточек товаров или для отзывов). Результат — однотипные и неживые интерфейсы. То же самое относится к одинаковым иконкам и даже целым блокам.
Конечно, все изображения должны обязательно соответствовать тематике вашего интерфейса, «рыбные» фотографии категорически не допускаются!
19 распространенных ошибок в графическом дизайне, совершаемых людьми, не являющимися дизайнерами
Когда в последний раз вы смотрели на потрясающий графический дизайн и думали: «Вау. Хотел бы я это сделать».
Отличные новости: вы можете! Вам просто нужно избегать этих распространенных ошибок графического дизайна, чтобы вы тоже могли создавать потрясающую графику, даже если вы не дизайнер.
Чтобы помочь вам узнать еще больше об основных правилах графического дизайна, мы составили целый список, наполненный примерами, чтобы продемонстрировать, что именно вы должны делать в следующий раз, когда вы откроете свою учетную запись Visme, чтобы начать новый дизайн-проект.
Давайте углубимся.
1 Использование слов вместо визуальных образов
Один из самых быстрых способов отключить вашу аудиторию — включить слишком много текста в сообщение, которое должно быть преимущественно визуальным. Особенно это касается дизайна инфографики и презентаций.
2 Плохая читабельность
Еще одна распространенная ошибка — попытка уместить слишком много слов в одну строку текста. Для удобства чтения оптимальная длина строки составляет от 50 до 60 символов.
3 Несоответствие шрифтов
Недизайнеры также склонны перебарщивать, комбинируя слишком много шрифтов. Это придает дизайну неорганизованный и непрофессиональный вид.
Создайте свой собственный визуальный контент уже сегодня! Попробуйте бесплатно
4 Плохой кернинг
Большинство людей, не являющихся дизайнерами, не задумываются о расстоянии между буквами, называемом кернингом, но это может иметь большое значение в как выглядит ваш проект.
5 Неверный выбор цветов
Одним из наиболее важных дизайнерских решений, которые вы примете при создании своего проекта, является выбор цветовых комбинаций. Часто проект с хорошим коммуникативным потенциалом может пойти наперекосяк, если не будут выбраны правильные цвета. Для вдохновения вы можете обратиться к этому инструменту.
6 Отсутствие пустого пространства
Верным признаком дизайнера-любителя является отсутствие пустого пространства (или отрицательного пространства) в визуальном дизайне. Но вместо того, чтобы смотреть на белое пространство как на пустое пространство, рассматривайте его как любой другой важный элемент дизайна. Хорошим примером является веб-сайт Google. Вы никогда не бродите вокруг, задаваясь вопросом, где находится панель поиска.
наш браузер не поддерживает тег видео.
Хотите создать собственную графику, но не дизайнер?
- Выберите из десятков профессиональных шаблонов
- Создание презентаций, инфографики, печатных материалов, социальной графики и многого другого
- Настройте что угодно в соответствии с имиджем вашего бренда и потребностями контента
Зарегистрироваться.
Это бесплатно.
7 Произвольное размещение элементов
Одним из способов создать порядок и симметрию в дизайне является правильное выравнивание элементов. Отсутствие согласованности может привести к тому, что продукт будет выглядеть беспорядочно и неорганизованно.
8 Невозможность создания контраста
Другая распространенная проблема заключается в неэффективном использовании контраста в дизайне. Незнание того, как эффективно использовать контраст, может означать разницу между эффективным дизайном и неэффективным. В приведенном ниже примере используются светлый цвет, темный цвет и яркий цвет.
Создайте свой собственный визуальный контент уже сегодня! Попробуйте бесплатно
9 Неправильное масштабирование
Люди, не являющиеся дизайнерами, также иногда неохотно используют большие и малые масштабы. Но их не должно быть. Когда это будет сделано, важно убедиться, что элементы не растянуты непреднамеренным образом, чтобы они не деформировались.
10 Игнорирование правил визуальной иерархии
Важным принципом графического дизайна является визуальная иерархия. Он сообщает зрителю о важности каждого элемента по отношению к остальным.
Например, в приведенном ниже дизайне самый крупный текст является самым важным сообщением, за ним следуют подзаголовок, а затем основной текст.
11 Трудночитаемый текст
Цель хорошего дизайна не только в том, чтобы быть эстетически привлекательным, но и в том, чтобы эффективно передать сообщение. В соответствии с этим текст должен не только соответствовать целям дизайна, но и быть легко читаемым. Размещение текста, а также контраст между текстом и фоном очень важны
12 Неподходящие сочетания шрифтов
Умение сочетать шрифты — еще один важный навык, который должен освоить не дизайнер. Как и все другие элементы дизайна, правильно подобранные шрифты сами по себе передают сообщение.
Например, есть шрифты, передающие элегантность и формальность, в то время как другие имеют более доступный и беззаботный вид.
наш браузер не поддерживает тег видео.
Нужно срочно создать графику, а не дизайнер?
- Выберите из десятков профессиональных шаблонов
- Создание презентаций, инфографики, печатных материалов, социальной графики и многого другого
- Настройте что угодно в соответствии с имиджем вашего бренда и потребностями контента
Зарегистрироваться. Это бесплатно.
13 Недостаточное расстояние между строками
Интерлиньяж — это расстояние между строками текста. Как видно из приведенных ниже примеров, слишком большое расстояние между строками может привести к тому, что ваш текст будет выглядеть бессвязным, а слишком малое пространство может привести к тому, что блоки будут казаться слишком тесными и переполненными.
14 Использование растровых изображений
Недизайнеры часто совершают ошибку, используя растровые изображения вместо векторов.
В то время как первый состоит из пикселей и становится размытым при увеличении, последний состоит из геометрических линий и кривых, поэтому их можно масштабировать до любого размера, и они по-прежнему выглядят четкими. Если вы беспокоитесь о том, что ваш дизайн станет пиксельным, рекомендуется сделать его больше, чем нужно. Если вы начнете с высокого разрешения и уменьшите масштаб, изображения все равно будут четкими. Вы всегда можете уменьшить разрешение, но никогда не сможете его увеличить.
15 Стремление к полной симметрии
Другой распространенной ошибкой является попытка сделать дизайн слишком совершенным и симметричным. Использование абсолютной симметрии может сделать дизайн скучным, в то время как использование чего-то не столь симметричного может создать более привлекательный дизайн.
16 Неспособность эффективно общаться
В этом виноваты как дизайнеры, так и не дизайнеры. Часто мы можем настолько увлечься созданием дизайна, который отвечает нашим собственным вкусам и эстетическим предпочтениям, что забываем о потребностях клиента и, что хуже всего, о содержании и о том, как оно должно служить своей аудитории.
17 Копирование чужих работ
Хотя и рекомендуется искать вдохновение в чужих творениях, копировать чужие работы и выдавать их за свои совершенно недопустимо.
В конце концов это не только повредит вашему авторитету, но и ограничит охват и воздействие вашего сообщения.
Кроме того, держитесь подальше от клише и слишком часто используемых элементов дизайна, подобных приведенным здесь.
18 Забыть о среде
Другим важным фактором, который часто упускают из виду, является среда, на которой будет отображаться ваш дизайн. Будет ли он опубликован в Интернете, в книге или журнале, может иметь большое значение в том, как вы будете создавать свой дизайн.
Например, если ваше произведение будет помещено в книгу в переплете, вы должны учитывать пространство между двумя страницами, которое называется канавкой. Прежде чем излагать свои идеи, не размещайте какие-либо важные элементы дизайна в этом пространстве, так как они будут потеряны в процессе переплета.
Кроме того, если вам нужно напечатать свой дизайн, обязательно измените цветовой режим CMYK, а не RGB, который является цветовым режимом для проектов, отображаемых на мобильных устройствах и экранах компьютеров.
наш браузер не поддерживает тег видео.
Срочно нужен дизайн? Создайте свою собственную графику.
- Выберите из десятков профессиональных шаблонов
- Создание презентаций, инфографики, печатных материалов, социальной графики и многого другого
- Настройте что угодно в соответствии с имиджем вашего бренда и потребностями в контенте
Зарегистрироваться. Это бесплатно.
19 Непоследовательность
Еще одна ошибка, которой следует избегать, — отсутствие последовательности и повторений в ваших проектах. Например, вы должны использовать одни и те же визуальные элементы (например, фильтры изображений или типы кнопок) и макеты во всем проекте.
Но не переусердствуйте. Вы также не хотите, чтобы каждая страница выглядела слишком похожей на остальные.
Ваша очередь
Теперь, когда вы прочитали о некоторых наиболее распространенных ошибках, совершаемых недизайнерами, вы можете посмотреть, как Payman Taei объясняет их в видео выше.
А если вы хотите получать дополнительные советы о том, как стать лучшим визуальным коммуникатором, не забудьте подписаться на нашу еженедельную рассылку по номеру .
22 Распространенные ошибки графического дизайна, которых следует избегать
Графический дизайн работает параллельно с содержанием, чтобы определить успех кампании. Избегайте этих ошибок графического дизайна любой ценой.
Содержание
- Насколько ошибки графического дизайна вредны для вашей кампании
- Можете ли вы угадать ошибки графического дизайна по этим примерам?
- Ключевые выводы
- Заключение
- Часто задаваемые вопросы
Изображение стоит тысячи слов, если оно правильно представлено.
Неправильно изображенные визуальные эффекты могут нанести серьезный ущерб вашим усилиям. Независимо от того, используете ли вы свою графику на макетах веб-сайтов, сообщениях в социальных сетях или создаете связную маркетинговую кампанию, необходимо соблюдать определенные правила.
Правила графического дизайна, если их соблюдать, повышают узнаваемость вашего бренда, укрепляют лояльность и развивают доброжелательность. С другой стороны, ошибки графического дизайна снижают силу вашего бренда, его охват, лояльность и эффективность.
В этом блоге мы рассмотрим некоторые из самых серьезных ошибок графического дизайна, которые могут разрушить ваш бренд. Хорошее знание этих ошибок поможет вам оставаться на вершине визуального маркетинга.
Источник
Как ошибки графического дизайна вредны для вашей кампании
Графический дизайн — один из столпов маркетинговой кампании. Плохо сделанный или плохо реализованный графический дизайн может привести к резкому падению вашего маркетинга, нанеся ущерб вашему бренду.
Создание графики, которая не соответствует истории вашего бренда, — одна из худших ошибок графического дизайна, которую вы можете совершить. Когда вы совершите эту ошибку, ваш бренд не займет уникальное место в сознании потенциального клиента. Вы проигрываете в «позиционировании».
22 ошибки графического дизайна, которые вы никогда не должны совершать
Читайте дальше, чтобы узнать о 22 ошибках графического дизайна, которых следует избегать.
1. Непоследовательность
Ваш графический дизайн должен давать ощущение единства. Используйте одни и те же визуальные элементы во всем дизайне. Например, кнопка «Свяжитесь с нами», синяя и закругленная в верхней части веб-страницы, должна быть такой же в нижней части материала. У вас не может быть красной кнопки внизу материала. Однако не переусердствуйте с консистенцией.
2. Проектирование не для среды
Появляется ли ваш дизайн в печати, в Интернете или на телевидении? Среда имеет решающее значение для выбора стиля вашего дизайна.
Например, цветовая модель RGB хорошо подходит для Интернета, а CMYK — для печати. Различные стили дизайна хорошо подходят для разных сред. Не проектировать для среды — это рецепт провала.
3. Плагиат других дизайнов
Копирование дизайна приводит к потере доверия к вам как к бренду и как к личности. Поиск вдохновения отличается от копирования. Вдохновенная работа обычно берет элементы нескольких творений и синхронизирует их в новый продукт. Скопированная работа мгновенно идентифицируется и не приклеивается сама по себе. Никогда не копируйте чужой дизайн.
4. Нечеткая передача сообщения
Иногда графические дизайнеры настолько увлекаются цветами и формами, что забывают смысл. Основная обязанность графического дизайнера — эффективно передать сообщение. Цвета и формы — это только средства, а не цель. Помните, что окончательная мера вашего успеха — это то, насколько хорошо вы донесли сообщение.
5. Слишком много симметрии
Симметрия является неотъемлемой частью эстетики.
Однако, когда симметрия преувеличена, вам не хватает потока и направления. Абсолютная симметрия скучна и не бросается в глаза зрителям. Баланс и гармония должны сочетаться с цветными штрихами и вариациями.
6. Использование пиксельной графики
Растровые изображения состоят из пикселей. При увеличении они становятся размытыми. С другой стороны, векторные изображения состоят из геометрических кривых и линий. При увеличении они все еще кажутся четкими. Хорошее эмпирическое правило — начинать с большего дизайна, чем требуется. Если вы уменьшите изображения, они останутся четкими. Однако это может быть не так при их масштабировании.
7. Неверный межстрочный интервал
Интерлиньяж — это межстрочный интервал: расстояние между набранными строками. Неправильный межстрочный интервал — одна из самых серьезных ошибок графического дизайна. Слишком большое расстояние между строками делает текст несвязанным. С другой стороны, слишком маленькое расстояние между строками квалифицируется как скученность.
Для правильного эффекта выберите оптимальный межстрочный интервал.
8. Выбор неправильных сочетаний шрифтов
Комбинации шрифтов основаны на назначении графики. Вы хотите, чтобы графика произвела впечатление? Хочешь показаться артистичным? Комический шрифт служит этой цели лучше всего?
Какими бы ни были ваши потребности, они удовлетворяются путем комбинирования шрифтов, которые хорошо сочетаются друг с другом. Иногда цель дизайна лучше всего достигается за счет использования одного и того же шрифта. Иногда вам может понадобиться использовать комбинацию шрифтов, которые совпадают по стилю и эффекту.
9. Использование неразборчивого текста
Очаровательная эстетика – одна из целей дизайна. Во-вторых, эффективное общение. Текст, являющийся частью дизайна, никогда не должен быть сложным для чтения. Он должен быть хорошо расположен и хорошо контрастировать. Короче говоря, чтение вашего сообщения должно быть легким для глаз и разума потенциального клиента.
Вы видите, что некоторые статьи представляют собой просто стену текста? Стена текста обычно определяется как большой кусок информации, который не читается, несъедобен и не усваивается. Чтобы понравиться читателю, статьи должны быть написаны небольшими, легко усваиваемыми порциями. Никогда не пишите абзацы длиной более десяти строк!
10. Несоблюдение визуальной иерархии
Источник
Визуальная иерархия является неотъемлемой частью любого дизайна. Место и важность каждого элемента определяются посредством визуальной иерархии. Обычно более важные элементы больше, чем менее важные. Внедрение визуальной иерархии необходимо для правильной передачи маркетингового сообщения.
11. Не удалось масштабировать
Помните, что не следует искажать дизайн из-за неуместного растяжения. При правильном подходе сочетание крупного и мелкого масштаба становится мощным оружием в арсенале графического дизайнера. Правильное масштабирование дизайна может создать потрясающий, драматический эффект.
12. Отсутствие контраста
Недостаточный контраст — смерть многих графических дизайнов. Неправильный контраст может создать неэффективный дизайн. Выбирайте цвета правильно. Затем контраст между светлыми и темными элементами в дизайне помогает создать поразительный эффект.
13. Несовпадение элементов
Для некоторых целей требуется центрирование элементов. Другие требуют элементов с выравниванием по правому или левому краю. Не обращая внимания на обоснование, можно создать асинхронный дизайн. Произвольное размещение элементов делает дизайн беспорядочным и неорганизованным. Один из способов упорядочить визуальные элементы — использовать сетки.
14. Отсутствие отрицательного пространства
Когда графика не использует отрицательное пространство, она теряет свою силу и очарование. Когда в визуальном дизайне отсутствует негативное пространство (также известное как белое пространство), это выглядит непрофессионально, даже дилетантски. Отличным примером использования пустого пространства является страница поиска Google.
Мысль направляется непосредственно к окну поиска в центре страницы, без отвлекающих элементов.
15. Использование неэффективных цветовых комбинаций
Некоторые цвета хорошо сочетаются друг с другом. Другие нет. Это простая математика. Проекты могут пострадать, если графический дизайн не основан на эстетической цветовой палитре. Правильные сочетания цветов должны хорошо контрастировать. Они должны заинтересовать пользователя. Кроме того, они должны сделать контент более читабельным. Одним из замечательных инструментов для выбора цвета в Интернете является Paletton.
16. Использование неправильного кернинга
Плохой кернинг — это неправильный межбуквенный интервал, из-за которого ваш проект может выглядеть непрофессионально. Для опытных графических дизайнеров кернинг не является чем-то второстепенным: он необходим для дизайна. Ваши буквы должны быть расположены таким образом, чтобы весь текст выглядел упорядоченным и четким, и его было легко читать.
17.
Использование слишком большого количества шрифтовСоответствующие шрифты являются частью игры. Но вам нужно, чтобы это было просто. Слишком много шрифтов похоже на пословицу: «Слишком много поваров портят бульон». Иногда сообщение требует использования только одного шрифта; а в других случаях вам может понадобиться использовать более одного. В идеале никогда не следует использовать более трех.
18. Позволить словам преобладать над визуальными эффектами
Правду говорят: картинка стоит тысячи слов. Иногда графический дизайн связан с общением с чувствами, а не с логикой. Визуальные эффекты часто рассказывают историю лучше, чем слова. Ваш потенциальный клиент обычно не хочет, чтобы ему рассказывали всю историю. Вот где в игру вступает принцип «показывай, а не рассказывай». Графический дизайн, как правило, заключается в том, чтобы нарисовать картинку в уме потенциального клиента, и именно поэтому вы должны использовать больше визуальных эффектов, а не слов.
19.
Использование стоковых изображений В профессиональном графическом дизайне следует избегать использования стоковых изображений. Стоковые изображения доступны по цене, но обычно делают проект дешевым и непрофессиональным. Обычно они носят общий и репрезентативный характер, что может разбавить суть вашей истории. В частности, стоковые изображения с низким разрешением — не лучший вариант при создании профессионального графического дизайна.
20. Отсутствие корректуры
Хорошо написанный текст, а также хорошо расставленные знаки препинания оцениваются в баллах за профессионализм. Клиенты ожидают, что маркетинговые материалы будут соответствовать правилам английского языка. Если вы не вычитываете свои материалы и распространяете их с вопиющими ошибками, ваши клиенты не воспримут вас всерьез. Чтобы убедиться, что ваши усилия не пропали даром, убедитесь, что вы представили их экспертной паре глаз, например, профессиональному редактору.
21. Использование неправильного формата изображения
Вы можете сохранить изображение в формате JPEG, PNG, GIF, PDF, PSD или AI.
Формат, в котором вы хотите сохранить файл, должен зависеть от вашей конечной цели.
JPEG : отлично подходят для файлов с градиентами. Они допускают сжатие и, таким образом, меньшие размеры файлов.
PNG : эти файлы не теряют качество при редактировании; они без потерь. Обычно они больше, чем JPEG, и поддерживают прозрачность.
GIF : Этот формат полезен, если у вас есть небольшая анимация.
PDF : PDF-файлы отлично подходят для просмотра, печати и отправки.
PSD : Это файл Adobe Photoshop.
AI : это файл Adobe Illustrator.
22. Создание монотонного дизайна
Если ваш дизайн не универсален, он потерян. Лучшие проекты универсальны и вечнозелены. Они также многоцелевые. Например, логотип должен хорошо смотреться на визитке, на флаерах, а также на вашем сайте. Это важно для согласованности бренда, а также максимизирует ценность работы, которую вы вложили в свою графику.
Можете ли вы угадать ошибки графического дизайна по этим примерам?
У нас есть для вас небольшое задание. В приведенных ниже примерах найдите ошибки графического дизайна. Вы можете записать их на заметку, чтобы не совершать таких же ошибок в своей работе.
1. Пример 1
Источник
2. Пример 2
Источник
3. Пример 3
Источник
Ключевые выводы
- Графический дизайн должен представлять собой четкое сочетание изображений и текста.
- Для профессиональных рекламных кампаний важно избегать ошибок графического дизайна.
- Ведение списка ошибок графического дизайна в сознании важно для обеспечения профессионального подхода.
- Грамотное использование графического дизайна может означать разницу между победившей кампанией и провальной.
- Графический дизайн — основа эффективного маркетинга.
- Графический дизайн — это не только искусство, но и наука.
Заключение
Графический дизайн — это наука о том, как синхронизировать изображения со словами для достижения максимального эффекта.
У каждого элемента графического дизайна есть цель. Помня о цели, избегайте возможных ошибок графического дизайна, чтобы создать выигрышную маркетинговую кампанию.
Помните, что графический дизайн требует постоянного обучения. Чем больше вы открыты для обучения, тем больших высот вы достигнете. Потолок здесь продолжает подниматься. Избегайте худших ошибок графического дизайна, просматривая этот блог еще раз. Тогда вооружитесь, чтобы побеждать в мире онлайн- и офлайн-маркетинга.
Часто задаваемые вопросы
1. Почему говорят, что картинка стоит тысячи слов?
Картинки передают послание целостности. Одно слово говорит гораздо меньше, если оно не сочетается с соответствующим изображением. Подобно тому, как целое больше, чем сумма его частей, картина говорит так же много, как и тысяча слов. Вот почему говорят: «Картинка стоит тысячи слов».
2. Правильно ли говорить: «Контент превыше всего»?
В онлайн-мире важнее всего контент.
Даже в автономном режиме иногда вам нужны правильные слова, чтобы передать сообщение, отображаемое визуальным элементом. Часто все, что нужно, это правильные слова. Тем не менее, даже звездный контент должен быть представлен должным образом, чтобы он был удобоваримым. Вам нужно эффективно использовать правильный межстрочный и межбуквенный интервал, а также другие элементы дизайна, такие как негативное пространство.
3. Кто может изучать графический дизайн?
Так же, как каждый может научиться писать или говорить, каждый может научиться графическому дизайну. Однако не все пишут и говорят одинаково эффективно. После шестимесячного обучения графическому дизайну человек А может стать фантастическим дизайнером, а человек Б — посредственным. Здесь важен талант.
4. Какова цель графического дизайна?
Цель графического дизайна — эффективно передать сообщение.
Сообщение может быть коммерческим предложением, упражнением по созданию бренда, усилием вовлечения или рекламным текстом для получения конверсий. Графический дизайн должен быть адаптирован для выполнения своей цели. Не существует универсального подхода, которому нужно следовать. Каждое сообщение уникально и требует пользовательских комбинаций шрифтов, негативного пространства, визуальной иерархии и цветов.
5. Сколько времени мне потребуется, чтобы освоить графический дизайн?
Все люди разные. Визуальный гений может освоить графический дизайн за несколько месяцев. Обычно одаренный человек может занять два года. Другой человек может не освоить графический дизайн даже спустя годы. Это зависит от того, сколько часов вы потратили и насколько последовательны вы в учебе.
6. Где можно научиться графическому дизайну?
Существуют государственные и частные учебные заведения, в которых обучают графическому дизайну.
Для тех, кому не хватает времени и денег, есть очень доступные онлайн-курсы, которые можно изучать в любое время. Ознакомьтесь с курсами в Udemy, Udacity и Coursera, среди прочих.
7. Как избежать ошибок графического дизайна?
Чтобы избежать ошибок графического дизайна, вам нужен готовый счетчик, такой как этот блог. Со временем вы поймете, когда находитесь на правильном пути. После обращения к руководству по ошибкам вы будете делать меньше ошибок, и вскоре вы сможете делать графический дизайн без каких-либо ошибок.
8. Какие есть инструменты для графического дизайна?
Существует множество бесплатных и платных инструментов для графического дизайна. Adobe Photoshop, Adobe Illustrator и пакет CorelDRAW Graphics — вот некоторые варианты для тех, кто готов потратить несколько долларов. Кроме того, существует множество бесплатных онлайн-инструментов для различных функций, таких как сжатие изображений, изменение размера и т.