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

Ольга Вовчук

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

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

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

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


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

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

Что не так:

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

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

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

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

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

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


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

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

Что не так:

— текст некомфортно читать. Используя рукописный шрифт, автор оформил весь заголовок заглавными буквами. Когда мы пишем текст ручкой на бумаге, мы так не делаем;

— ширина текстового блока не соответствует ширине плашки. Надписи упираются в границы плашки;

— текст, расположенный в правом верхнем углу, сместился вправо. Из-за этого дизайн выглядит неаккуратно.

Что сделали.

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

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

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

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

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

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

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

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

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

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

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

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

Готово.


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

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

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

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

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

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

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

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

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

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

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

2. Отдавайте предпочтение понятным шрифтам. В первую очередь текст должен читаться, а не смотреться.

3. Размещая текстовые блоки на картинке, соблюдайте правило внешнего и внутреннего и не зажимайте надписи между другими объектами.

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

5. Ставьте текст на однотонные плашки, чтобы информацию было легче воспринимать.



Если вы хотите научиться верстать красивые картинки для соцсетей приходите на курс по дизайну для соцсетей. В программе 15 текстовых уроков с иллюстрациями и скриншотами, 17 видеоуроков с подробными инструкциями, 5 сервисов для подбора шрифтовых пар, 5 стоков со шрифтами, 2 бесплатных ресурса с графикой, 8 сервисов по работе с цветом, 20 бесплатных фотостоков.

Записаться на курс по дизайну →





Читайте также:
Тренды графического дизайна для Инстаграма в 2019 году

Поделиться
Отправить
Запинить

Рассылка статей прямо в месенджер. Раз в неделю, без спама.

Популярное
Ваш комментарий
адрес не будет опубликован

ХТМЛ не работает

Ctrl + Enter