8 заметок с тегом

дизайн

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

Ольга Вовчук

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

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

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

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


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

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

Что не так:

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

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

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

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

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

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


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

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

Что не так:

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

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

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

Что сделали.

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

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

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

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

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

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

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

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

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

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

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

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

Готово.


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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





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

28 июня   вёрстка   дизайн   Ольга Вовчук

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

Ресурсы для вёрстки посадочных страниц

Ольга Вовчук

На четвёртой неделе курса Helppy мы учим студентов верстать лендинги. Для работы предлагаем сервис Tilda. У него понятный интерфейс, стильные современные шаблоны и оперативная техническая поддержка.

Но кроме Tilda на рынке много других ресурсов, с помощью которых вы сверстаете классные продающие лендинги. Мы выбрали наиболее популярные сервисы: Tilda, WordPress, LPgererator, Mobirise, Instapage, и сделали подробный обзор.

Результаты поместили в сравнительную таблицу.

Tilda Publishing


Интуитивный конструктор сайтов и лендингов с коллекцией готовых текстовых и графических модулей.

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

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

Что получите, работая в Tilda:

— 450+ профессиональных готовых блоков для сайта и интернет-магазина,
— адаптивность к смартфонам, планшетам и компьютерам,
— 20 встроенных шрифтов, возможность загрузить собственные шрифты в формате WOFF или добавить через Google Fonts,
— коллекция иконок от дизайнеров Tilda для разных сфер бизнеса, которая регулярно пополняется,
— база знаний с обучающими статьями и видео-уроками по работе с сервисом.

Что сможете:

— создавать и редактировать собственные блоки,
— подключать Google Analytics и Яндекс.Метрики,
— интегрировать в страницу сторонние сервисы: посты из соцсетей, музыкальные плееры, календари, формы приёма данных и виджеты,
— подключить платёжные системы Яндекс. Деньги или PayPal,
— сделать SEO-оптимизацию.

Язык: русский, английский.

Главный недостаток — высокие тарифы.

При регистрации Tilda предлагает всем пользователям протестировать все возможности сервиса бесплатно. На это отводится две недели. Затем ресурс попросит поменять тариф.

Тариф Free — бесплатный тариф.
Пользуясь этим тарифом, вы создадите один сайт из 50 страниц. При этом для работы доступна примерно половина блоков, в том числе Zero Block, в котором можно собирать блоки с нуля.
Нет возможности подключить собственный домен. Созданный сайт будет работать на субдомене Tilda moto.tilda.ws.

Тариф Personal — 750 рублей в месяц.
В пакет входит 1 сайт, 500 страниц, 1GB места на сервере. Вы получите доступ к полной коллекции блоков, сможете подключить к странице аналитику и платёжные сервисы, интегрировать её со сторонними сервисами.

Тариф Business — 1250 рублей в месяц.
Вы создадите 5 сайтов по 500 страниц и 1GB места на сервере, полный набор функций и возможность экспортировать исходный код.


Tilda Education — образовательный журнал платформы для создания сайтов Tilda Publishing. Практические руководства по дизайну и маркетингу для цифровых проектов.


WordPress


Конструктор сайтов, блогов и веб-приложений.

Как будет выглядеть будущий сайт определяет шаблон. Ищите подходящий вариант в официальном каталоге в разделе «Темы». Чтобы настроить тему используйте набор настроек. В каждом шаблоне он свой.

Работая с сервисом в стандартной комплектации, вы сможете частично настроить шаблон, создать страницы и первые записи
Для полноценной работы вам понадобятся плагины. Вы найдёте их соответствующем разделе административной панели и в каталогах на других сайтах. Один из таких каталогов подготовили создатели TexTerra, собрав 100+ бесплатных плагинов для бизнес-сайтов на WordPress.

Что получите:

— 8080 тем для сайта,
— 53 835 плагинов для улучшения сайта,
— настраиваемый дизайн,
— адаптивные мобильные сайты,
— СЕО-дружественность,
— мощная база знаний и развитое сообщество пользователей.

Язык: русский, английский, другие языки.

Тарифы

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

Пакет Blogger — 188 рублей в месяц.
Пакет Personal — 313 рублей в месяц.
Пакет Premium — 550 рублей в месяц.
Пакет Business — 1 499 рублей в месяц.
Пакет eCommerce — 2698 рублей в месяц.


Как создать сайт на WordPress: полное руководство для новичков — установка, настройка, работа с сайтом — мануал от TexTerra.


LPgenerator


Генератор целевых страниц.

Что получите:
— 300+ шаблонов посадочных страниц,
— мобильные целевые страницы с лид-формой,
— система сбора, фильтрации, анализа, управления и обработки полученных лидов,
— центр оптимизации конверсии,
— автоматическое подключение собственного или нового доменного имени,
— глубокая аналитика для определения ROI,
— возможность адаптировать страницу под операционные системы iOS, Android, Windows,
— верстать одностраничники без дополнительных знаний HTML и навыков программирования,
— помощь менеджера, обучающие материалы и курс по созданию и продвижению лендингов в «Университете лидогенерации».

Недостатки:
— сервис ориентирован на профессионалов,
— короткий пробный период — 7 дней,
— сложный интерфейс — нужно обучаться и разбираться. Новичкам придётся потратить немало времени, чтобы разобраться с сервисе.

Язык: русский.

Бесплатного тарифа нет, но есть тестовый период 7 дней.
Пакет «Базовый» — 559 рублей в месяц
Пакет «Продвинутый» — 1662 рублей в месяц
Пакет «Безимитный» — 2799 рублей в месяц
Пакет «Корпоративный» — 11011 рублей в месяц


База знаний — набор инструкций по работе с  LPgenerator.


Mobirise


Бесплатный конструктор сайтов, нужно устанавливать на компьютер, работает с Mac и Windows
Простой интуитивный редактор подойдёт новичкам. Чтобы разобраться в нём, потребуется не более 10 минут.

Что получите:

— 400+ блоков для создания страниц,
— 100% оптимизация для мобильных устройств в соответствии с последними тестами Google,
— темы разработаны на основе фреймворков Bootstrap 3 и Bootstrap 4, HTML+CSS — инструментов и шаблонов для верстки.

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

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

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

Язык: русский.

Сервис бесплатный. Создавая блоки и выгружая файлы на хостинг или в «облако» вы не заплатите ни копейки. Потратиться придется только на хостинг и домен.


Вводные инструкции по работе с сервисом Mobirise.

Instapage


Конструктор целевых страниц.

Что получите:

— 200+ настраиваемых и оптимизированных шаблонов,
— центр оптимизации конверсии,
— возможность работать в команде — редактировать страницу в режиме онлайн,
— интеграцию с Google Analytics и Google AdWords,
— глубокую аналитику для определения ROI,
— учебный центр с видеоуроками,
— база знаний.

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

Язык: английский.

Тарифы

Бесплатного тарифа нет. Тестовый период — 14 дней.

Сервис предлагает два тарифа и два варианта оплаты:
Пакет Core — 129$ при ежемесячной оплате или 99$ в месяц при оплате за целый год.
Пакет Enterprise — оплата рассчитывается исходя из набора выбранных функций.


Центр помощи Instapage — набор инструкций по работе с сервисом на английском языке.




Какой бы сервис вы не выбрали для работы, не забывайте про правила вёрстки и пользу для клиентов. Держите подборку статей из блога, которые помогут создавать эффективные посадочные страницы:
Как формулировать заголовки на лендингах
Как верстать фотографии на лендинге
Избавьтесь от слайдеров
Убрать жир



7 июня   вёрстка   дизайн   лендинг   Ольга Вовчук

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

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

Юлия Бреева

Начинаем новый год с новых трендов в графическом дизайне.

В Международной школе фриланса Ольги Шевченко есть Курс по дизайну для соцсетей. Автор программы Ольга Вовчук учит работать в графическом редакторе Canva и показывает как создавать картинки для соцсетей не имея специальных знаний профессионального образования.

Чтобы работы наших студентов были востребованы и актуальны, мы пригласили представителя компании «Canva Россия», Юлию Брееву и попросили рассказать, какой дизайн сделает страницу в Инстаграме эффектной и запоминающейся.

Юлия обратила внимание на три главные тенденции 2019 года в сфере графического дизайна и подготовила инструкцию, в которой показала, как быстро и просто создать современный дизайн своими руками с помощью графического редактора Canva.

Яркие цвета и жирные шрифты

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

Взгляните на аккаунт известного австралийского художника Люка Чойса. В его портфолио вы найдёте работы с известными брендами: Nike, Adidas, Google и American Express.

Инстаграм художника Люка Чойса @velvetspectrum

Привлекайте внимание пользователей яркими цветовыми схемами и крупными шрифтами 

Градиенты и дуотоны

Используйте переходы цвета где угодно: в шрифтах, изображениях, фильтрах и фонах — доверьтесь фантазии и действуйте. Дизайнеры обратили пристальное внимание на градиенты ещё в 2018 году и с удовольствием продолжают использовать их в своих работах. Наравне с многоцветной заливкой популярностью пользуется и схожий с градиентами тренд на формирование паллет, которые связывают серию постов одним доминирующим цветом.

Чтобы получить вдохновение и научиться создавать собственные цветовые сочетания, зайдите в аккаунт Джессика Колалука @designseeds. Джесика работала дизайнером и специалистом по цвету в таких компаниях, как Ford, Reebok и Timberland. На своей странице в Инстаграме она публикует дизайны с палетками, на которые можно любоваться часами.

Инстаграм Джессики Колалука @designseeds

Используйте градиенты в шрифтах, изображениях, фильтрах и фонах

Дуотон — еще один переходящий тренд 2018-2019 годов. На фотографию накладывают цветной фильтр или градиент. В результате, изображение выглядит ярче и сочнее.
Подобная дуальность выгодно выделяет аккаунт в ленте.

Бренды используют дуотоны для дополнительной ассоциации с фирменными цветами. Пример — сайт компании TQ.

Cайт компании TQ

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

Минимализм иллюстраций и футуризм картинок

Кастомные картинки и иллюстрации не выходят из моды. А в последние годы дизайнеры эксплуатируют это направление как никогда активно.
Попробуйте и вы. Даже если рисование — не ваш конёк, никто этого не заметит. В тренде минимализм и примитивизм во всех формах и проявлениях. Чтобы поймать вдохновение, зайдите на страничку французского иллюстратора Жана Жульена и полюбуйтесь его работами.

Инстаграм французского иллюстратора Жана Жульена @jean_jullien

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

Взгляните на оригинальные идеи художника из Мюнхена Алексея Гофермана, который комбинирует реальность с цифровыми элементами. Работы Алексея вы можете встретить в книгах и журналах, таких как Advanced Photoshop и  Digital Arts.

Страница с работами Алексея Гофермана на сайте Behance

Комбинируйте фотографии с рисунками и графикой, создавайте неожиданные образы

Инструкция по созданию поста для Инстаграма

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

Интуитивно понятный сервис поможет самостоятельно сверстать картинки для постов и сторис и сделать свой аккаунт неповторимым.

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

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

Создаём классный дизайн за несколько шагов

Шаблоны в редакторе создают профессиональные дизайнеры. Они постоянно следят на модными тенденциями и регулярно пополняют коллекцию. В Canva вы найдёте и градиентные фоны, и мелкие кастомные пикчи, и монофильтры, с помощью которых без труда сверстаете современный стильный дизайн.

Возьмём за основу личную фотографию и создадим публикацию-приглашение.

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

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

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

Теперь добавим изображение через вкладку «Загрузки».
Откроем настройки на верхней панели. Здесь можно добавить фильтр, настроить кросс-процесс, контраст и другие параметры.

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

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

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

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

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

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

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

Несколько простых шагов и публикация готова.

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

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

2019   дизайн   Разное

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

Разбираем типичные ошибки в дизайне картинок

Ольга Вовчук

Последние пару месяцев я публиковала в Фейсбуке посты, в которых разбирала ошибки дизайна картинок. Мы решили собрать их и опубликовать в блоге, чтобы не потерять. За это время мы успели поговорить о работе с плашками, единстве стиля и выравнивании текста.

Плашки

Для примера возьмём картинку с крупным текстовым блоком на плашке.

Что не так:

  1. Тяжёлая плашка с большим количеством дополнительных элементов смещена в сторону, перекошена, обрезана снизу и справа. Детали плашки режут героев на картинке.
  2. В тесте большое количество строк, выровненных по центру.
  3. Текстовые блоки не отцентрированы по отношению к границам плашки. Нижняя строка упирается в край. Есть ощущение тесноты.
  4. Висячий предлог в четвёртой строке портит вёрстку.

Как исправить:

  1. Выбираем правильное место для плашки. Не перекрывайте плашкой половину картинки, особенно, если на фото изображён продукт, который вы продвигаете. Не закрывайте деталями дизайна людей. Размещайте текст и геометрические фигуры так, чтобы они не резали головы и лица. Не обрезайте плашки, если они не прямоугольные. У каждого объекта на картинке должно быть своё место. Если вы размещаете элемент по принципу «чтобы не мешал», меняйте дизайн.
  2. Текст размером более трёх строк выравниваем по левой стороне.
  3. Центруем объекты. Если на плашке стоят два абзаца, выравниваем их между собой и по отношению к границам плашки. Текст не должен висеть на картинке как попало.
  4. Убираем висячие предлоги. Переносите слова из трёх и менее букв в составе в начало следующей строки. Висячие предлоги выдают любительскую вёрстку, не оставляйте их без внимания.

Что сделала:

  1. Поменяла ромбовидную плашку с рамками на прямоугольник и переместила его вниз. Если сомневаетесь в своих силах, выбирайте для дизайна простые геометрические фигуры — с ними проще работать.
  2. Пустила по периметру тонкую рамку. Она делает дизайн более сложным и не закрывает девочек, изображённых на картинке.
  3. Написала верхний абзац в две строки. Нижнюю строчку вынесла на прямоугольник, который по цвету перекликается с палитрой картинки.
  4. Оформила надписи в двух вариантах: с заглавными и строчными буквами.

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

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

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

Теперь поставим текст на плашку. Я выбрала круглую, но и прямоугольная смотрелась бы не плохо. Главное, чтобы плашка не перекрывала на картинке важные объекты, например, лица.

В таком виде текст работает эффективно и не портит дизайн.

Единство стиля

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

Попробуем разобраться на примере шаблона из фоторедактора «Канва». Я залила в него три изображения.
Все они демонстрируют примеры компактного хранения вещей.

Что не так:

  • Цвета. Если взять каждую картинку по отдельности, они все гармонируют с цветовой гаммой шаблона. На фотографиях есть бирюзовые элементы и детали, которые хорошо сочетаются с нижней салатовой плашкой.
    Проблема в интенсивности цветовой палитры. Средняя картинка слишком яркая, и боковые изображения на её фоне теряются. В результате, возникает диссонанс.
  • Фон. Слева и справа он светлый и лёгкий, а на центральной фотографии — цветной. Деревянный комод делает изображение более насыщенным и выделяет его на фоне остальных.
  • Размер. На двух первых картинках изображены крупные предметы: два больших ящика. На правой — сетка из маленьких прозрачных коробок. В итоге картинки не дружат между собой.

Как исправить:
Первый способ — наложить фильтр.

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

Перейдём ко второму способу, который состоит из нескольких этапов.

  1. Увеличиваем правую картинку, чтобы она соответствовала размерам предметов на первой фотографии.
  2. Подбираем ещё одно изображение с белым фоном и ставим его на место центральной картинки.
  3. Для верности добавляем фильтр.

Выравнивание текста

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

Для примера я взяла два слайда из презентации. Разберём их и поработаем над ошибками.

Что не так:

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

Как исправить:

  • Объединяем текст в единый блок и выравниваем по левой стороне.
  • Убираем висячие предлоги.
  • Подбираем вертикальную фотографию и увеличиваем её до размера текстового блока.

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

Ещё пример.

Что не так:

  • Неудачное оформление. Фотография мелкая, стоит в рамке, которая ни по форме, ни по цвету не вписывается в стиль слайда. Внизу висит иконка Инстаграма на фоне белого квадрата, смещённая в сторону.
  • Текст выровнен по правой стороне и прижат к границе плашки. Выглядит плохо и читать неудобно. Каждая строка начинается с нового места.

Как исправить:

  • Объединяем текст в единый блок и выравниваем по левой стороне.
  • Отбиваем в тексте двойные абзацы и убираем висячие предлоги.
  • Подбираем новую фотографию и увеличиваем её.
  • Загружаем иконку для Инстаграма.
  • Выбираем для названия аккаунта лаконичный шрифт.

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

Подведём итог
1. Выбирайте для дизайна простые геометрические фигуры.

2. Не закрывайте плашками важные элементы картинок: людей или продукты, которые продаёте.

3. Если фотография яркая и со множеством деталей, ставьте тест на плашки.

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

5. Выравнивайте объекты на картинах по отношению друг к другу и к границам изображения.

6. Выравнивайте текст по левой стороне.

Если вы хотите научиться верстать красивые картинки для соцсетей приходите на курс по дизайну для соцсетей. В программе 13 видео-инструкций, девять текстовых уроков со скриншотами, семь ресурсов для работы, 25 стоков со шрифтами и картинками и 36 готовых шаблонов для работы.

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

2018   дизайн   Маркетинг   Ольга Вовчук

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

Как создать анимированные сториз для Инстаграма

Лина Пригарницкая

Ваши подписчики в Инстаграме требуют хлеба и зрелищ, поэтому рассмотрим три платформы для создания анимированных сториз: «Леджэнд», «Крело» и «Мопико».

Леджэнд

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

Покажу, как создать красочное стори на примере анонса о курсе Helppy. Скачиваем и открываем.



Приложения сразу переводит к тексту, доступно 100 знаков. Если хотите свой фон, нажмите на иконку с картинкой и воспользуйтесь своей галереей.



Когда закончите, переходите к кнопке «Далее», чтобы выбрать анимацию. Всего доступно 18 вариаций.



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



Осталось сохранить или сразу выложить в соцсеть. Если хотите добавить музыку, рекомендую приложение «Иншот».

Вот ещё пример анимации для SMM Food. Быстро и красиво.


Крэло

Украинский онлайн-редактор по работе с вижуалами, который смело конкурирует с Канвой. Главное превосходство — банк с анимациями. Платформа предлагает шесть тысяч шаблонов для картинок, баннеров, обложек и сертификатов. Платные только отдельные элементы, фоны и стоковые картинки. Их цена не выше 0,99 долларов. Анимированные шаблоны в открытом доступе.

Проверим, как он поможет нам со сториз. Cделаю анонс для курса Helppy Lite и  курса по марктетингу для ресторанов SMM Food .

Пройдите регистрацию, после чего вас перебросит к созданию нового дизайна.



Минус нашёлся — если подбирать новый дизайн под размер сториз, а он 9:16 сантиметров, то анимированных шаблонов вы не найдёте. Попробуем сделать в страндартном размере, после чего я расскажу о приложении Иншот, которое отредактирует размер. Давайте перейдём к шаблонам. Нажмите на вариант «Анимированная публикация».



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



Нажмите на кнопку «Проигрывать» внизу страницы и полюбуйтесь на то, что получилось.



Скачаем результат.




По тому же принципу сделала анимацию для SMM Food. Разнообразие шаблонов радует.

Если текст не слишком широкий — видео поместится в сториз без лишней редактуры. Но лучше иметь запасной план, расскажу об Иншот.

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



Выберите новый проект и загрузите видео из галереи.



Теперь зайдите в раздел «Размер» и укажите 9:16.



Переходим к музыке. В разделе порядка 40 песен разных стилей.



Осталось сохранить. Чтобы не было водного знака, придётся перейти на платную версию: 2,99 доллара в месяц, 9,99 доллара в год либо за 29,99 долларов купить продвинутую версию навсегда.


Мопико

Приложение, с помощью которого вы добавите на картинку или фото анимированные стикеры. Шаблоны бесплатные — выбирайте, что нравится. Создам сториз о наборе на первый поток курса по марктетингу для ресторанов SMM Food.

«Мопико» предлагает снять новое, загрузить из галереи, найти в интернете, добавить фон или воспользоваться шаблоном. Шаблонов крайне мало, четыре-пять вариаций. Я предварительно подготовила картинку, с которой буду работать и сохранила её в галерею мобильного.



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



Я выбрала и разместила понравившиеся мне стикеры на картинку.



В итоге «Мопико» сохранит вашу картинку в галерее, отправит в Инстаграм или на другое устройство. Даже смской сбросит.



Готово! Грузите в смело в сториз или наложите музыку с помощью «Иншота».

2018   дизайн   Лина Пригарницкая   Разное

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

Как верстать фотографии на лендинге

редактор Ольги Шевченко

В статье «Избавьтесь от слайдера» я предлагаю не использовать листалки и вытащить их содержимое на страницу. Кажется, что это просто: если в слайдере 12 фотографий, берём их все и ставим рядышком сверху вниз. В итоге получается примерно так:


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

Но даже если мы подпишем картинки, нас ждёт вторая проблема — скука смертная.

Как верстать фотографии веселей

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

Посмотрите на дом и скажите, интересно ли рассматривать окна.


А теперь посмотрите на другой дом. Интересней?


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

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


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


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

Вот ещё пара примеров. В магазине студии Лебедева плакат «Суша» занимает место доминирующей иллюстрации. Фотография «Кулонуса-1» намного мельче — на неё мы смотрим во вторую очередь. В последнюю очередь бросаем взгляд на кофейные капсулы. Управление вниманием в действии.

«Магазинус» Лебедева

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

Интерфейс «Сникердистрикта»

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


Что запомнить
1. Одинаковые ряды с фотографиями — это плохо. Одинаковые ряды с подписанными фотографиями — лучше, но скучно. Ряды с подписанными фотографиями разного размера — красота.

2. Нельзя один раз сверстать лендинг и не улучшать его месяцами. Докручивайте продукт постоянно.

См. также:
Избавьтесь от слайдера
Убрать жир
Как формулировать заголовки на лендингах

2018   дизайн   лендинг   Маркетинг

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

Курс по дизайну для соцсетей

Ольга Вовчук

В соцсетях много плохого дизайна. Сммщики скачивают банальные фотографии из Гугла, лепят на них разноцветные надписи как попало — и публикуют. У читателей рябит в глазах, а бизнесмены не видят результата работы в соцсетях. Хочется красивых постов, а получается самопал. Всем грустно.

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

15

текстовых уроков с иллюстрациями и скриншотами

17

видео-уроков с подробными инструкциями

20

дополнительных ресурсов с рабочими инструментами

Для кого

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

Для бизнеса, который ведёт странички в соцсетях.
Фейбсук и Инстаграм — это ваша витрина. Если хотите привлечь в магазин больше клиентов, оформляйте витрину стильно и со вкусом. Удалённые продажи не дают покупателю оценить продукт на ощупь. Он принимает решение глазами.

Что мы называем плохим дизайном

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

Что мы называем хорошим дизайном

Картинки для первого примера мы взяли из реального аккаунта в Инстаграме, а название придумали.

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


Какая потребуется техника

Если коротко, никакой. Только компьютер и интернет. Мы специально заставили себя забыть о Фотошопе, Скетче и прочих дизайнерских наворотах, чтобы сделать хороший дизайн доступным для новичков и недизайнеров. В качестве основного инструмента на курсе рассматриваем онлайн-редактор «Канва».

При всей своей простоте «Канва» позволяет создавать крутые дизайны. Она похожа на лего: всё так же просто и понятно. Это позволит вам не тратить время на долгое изучение принципов работы сервиса, а сосредоточиться на создании дизайна.

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

Дело за малым — научиться пользоваться этим богатством правильно и эффективно. Этим и займёмся на курсе.

Что внутри курса

15 текстовых уроков со скриншотами и 17 видео-инструкций. Дополнительно — 20 бесплатных фотостоков, пять сервисов для подбора шрифтовых пар, пять стоков со шрифтами, два бесплатных стока с графикой и восемь сервисов по работе с цветом.

Регистрация
Как зарегистрироваться, создать команду проекта и выдать роли участникам. Где устанавливать элементы корпоративного стиля. Принципы работы с шаблонами и макетами для вёрстки дизайнов.

Подбор шрифтов
Три правила подбора шрифтов для надписей на картинках и список из пяти сервисов по подбору шрифтовых пар. Установка шрифтов в «Канву»: где искать, как скачать и установить на компьютер,
как перенести в «Канву».
Бонус: пять шрифтовых стока и подборка из 22 кириллических шрифтов.

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

В результате вы создадите такую картинку, например:

Пример из урока. Сверстала автор курса — Ольга Вовчук

Дизайн для турагенства
Надпись на плашке. Как выбрать, как встроить в картинку и нанести надпись — видео по созданию картинки с плашкой.

Приглашение на детский праздник
Что такое графический дизайн. Как его создать и «подружить» с контентом аккаунта. Как правильно подобрать графику и где её взять. Делаем шаблон приглашения на основе графики — видео-урок.

Визуальная концепция
Создание единого стиля аккаунта. Три способа сделать страницу оригинальной и узнаваемой в ленте.

Приёмы оформления постов
Анализ трёх реальных аккаунтов в Инстаграме и Фейсбуке — как выбрать стиль, определить цветовую палитру и подобрать шрифты. Как сочетать в одном аккаунте фотографии и графические дизайны.

Создание картинок в едином стиле своими руками
Два видео-урока по вёрстке картинок в едином стиле. Видео-инструкция по подбору цветовой палитры и три сервиса по работе с цветом.

Обложка хроники для соцсети
Видео-урок по созданию обложки хроники для Фейсбука: размеры обложки, шаблоны «Канвы», приёмы создания дизайна.

Мобильное приложение
Особенности мобильной версии «Канвы». Мастер-класс по оформлению отзыва клиента с примерами из Инстаграма и Фейсбука.

Живые дизайны
Видео-урок по созданию картинок с элементами видео. Инструкция, как создать дизайн и внедрить в него видео.

Обзор сервисов от Canva
Видео-обзор сервиса для поиска шрифтовых пар, справочника по размерам картинок для социальных сетей, фоторедактора и инструментов по работе с цветом.

Две коллекции шаблонов в формате ПНГ
Их можно использовать для оформления картинок к постам. Берёте шаблон, вставляете свои фотографии, меняете надписи — и готово.

Примеры готовых дизайнов. Сверстала автор курса — Ольга Вовчук

Со временем мы увеличим количество уроков. Когда пройдёте курс, пожалуйста, скажите нам, чего не хватило.

Как выглядят уроки

Как проходит

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

Мы не хотим, чтобы вы забросили учёбу, поэтому закроем доступ к материалам через два месяца после оплаты. Времени хватит, чтобы, не торопясь, пересмотреть и законспектировать все занятия.

Доступ к урокам вы получите в «Геткурсе» — это специальный тренинговый сервис, в котором у вас будет личный ученический кабинет.

Каждая тема подкреплена видео-уроком. Их нужно посмотреть и сделать свой вариант дизайна

Сколько стоит

Курс стоит 5000 рублей.
Чтобы записаться, заполните форму и нажмите кнопку. После этого откроется страница с вариантами оплаты.

2018   дизайн   Маркетинг   Ольга Вовчук

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

Соотношение верхнего и левого полей в вёрстке

редактор Ольги Шевченко

Допустим, вы делаете картинку с надписью.


Если вы серьёзно подходите к мелочам, наверняка вас мучает вопрос: как подобрать правильный отступ сверху и слева от надписи, приближать текст к левому краю или к верху.


Для начала уточним, что при отступе сверху не учитывается размер прописных букв. В нашем случае это О и Ш — они выше остальных букв, но мы ориентируемся на строчные.


Обратите внимание на прямоугольник в углу. В нём весь секрет: если картинка горизонтальная, то и прямоугольник должен быть горизонтальным.


У нас получился почти квадратный отступ, подвинем надпись вправо, чтобы получился прямоугольник.


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


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

Горизонтальная картинка — горизонтальный прямоугольник в углу, вертикальная картинка — вертикальный

2017   вёрстка   дизайн   Разное

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