Типичные ошибки в дизайне картинок. Часть вторая

Типичные ошибки в дизайне картинок. Часть вторая Дизайн

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

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

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

Мы отобрали самые любопытные моменты работы и включили их в статью.

Типичные ошибки в дизайне картинок. Часть вторая

Дизайн для инвестиционной компании

Автор оформил дизайн в стиле компании. Выглядит строго и лаконично.

Типичные ошибки в дизайне картинок. Часть вторая

Что не так:

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

Проанализировав недочёты, мы выработали два решения.

Оставляем исходный дизайн, подбираем оригинальный шрифт и размещаем его с отступом от границ.

Типичные ошибки в дизайне картинок. Часть вторая

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

Типичные ошибки в дизайне картинок. Часть вторая

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

Дизайн для туристической компании

У картинки неплохой дизайн. Автор разделил её на четыре части: две из которых отвёл под плашки, а остальные под фотографии.

Типичные ошибки в дизайне картинок. Часть вторая

Что не так:

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

Что сделали.

Мы решили поиграть на сочетании классических и рукописных шрифтов и подготовили два дизайна.

Типичные ошибки в дизайне картинок. Часть вторая

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

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

Дизайн для образовательного проекта

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

Разберём каждую картинку отдельно и исправим ошибки.

Первый дизайн

Типичные ошибки в дизайне картинок. Часть вторая

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

Чтобы вёрстка выглядела более профессионально, мы сократили расстояние между строками в заголовке и подзаголовке и немного опустили зелёный текстовый блок. Результат справа.

Второй дизайн

Типичные ошибки в дизайне картинок. Часть вторая

На левой исходной картинке заголовок слился с подзаголовком. Кроме этого, верхняя строка заголовка стоит вплотную к картинке.

Как исправить.
Немного уменьшим шрифт, сократим межстрочное расстояние в заголовке и опустим текст вниз.
За счёт освободившегося места, отодвинем подзаголовок дальше от оранжевого текстового блока.

Готово.

Дизайны для страницы психолога

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

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

Для вёрстки альтернативных вариантов мы подобрали готовые шаблоны из фоторедактора Canva.
Чтобы картинки выглядели однотипно, в каждом дизайне использовали похожие детали — рамки от паларойдовских фотографий, элементы зелёного и оранжевого цветов, шрифт для заголовков.

Посмотрим, что получилось.

Первый дизайн

Типичные ошибки в дизайне картинок. Часть вторая

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

Заголовок сделали крупнее и разместили на однотонной плашке в виде листа бумаги.

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

Второй дизайн

Типичные ошибки в дизайне картинок. Часть вторая

На этом дизайне тоже использовали дополнительный фон. Мы поставили на него фотографию в рамке, в нижней части которой разместили заголовок.

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

  • Подведём итог

    Выбирайте шрифты, которые соответствуют стилю проекта.

  • Отдавайте предпочтение понятным шрифтам. В первую очередь текст должен читаться, а не смотреться.
  • Размещая текстовые блоки на картинке, соблюдайте правило внешнего и внутреннего и не зажимайте надписи между другими объектами.
  • Чтобы дизайны из одного аккаунта выглядели однотипно, используйте одинаковые шрифты.
  • Ставьте текст на однотонные плашки, чтобы информацию было легче воспринимать.
Ольга Шевченко
Я основатель первой в мире школы фриланса, сертифицированной Европейской ассоциацией вузов и преподавателей
Задать вопрос
Если вы хотите научиться верстать красивые картинки для соцсетей приходите на курс по дизайну для соцсетей. В программе 15 текстовых уроков с иллюстрациями и скриншотами, 17 видеоуроков с подробными инструкциями, 5 сервисов для подбора шрифтовых пар, 5 стоков со шрифтами, 2 бесплатных ресурса с графикой, 8 сервисов по работе с цветом, 20 бесплатных фотостоков.

Оцените статью
( Пока оценок нет )
Поделиться с друзьями
helppy.pro
Добавить комментарий