ДИЗАЙНЁРСТВО
280 subscribers
86 photos
4 videos
87 links
Дизайнерское братство. Проекты. Заказчики. Биржи. Инструменты. Канал будет полезен всем дизайнерам.

По вопросам рекламы: @ZokitiN
Download Telegram
​​Методы создания заголовков

От хорошего заголовка порой зависит 30% эффективности всего макета. Будь то рекламный креатив или landing page. Именно по этой причине дизайнеру также нужно обладать навыком создания заголовков.

Метод 4U
Заголовок состоит из четырех особенных элементов:
Полезность (Usefulness) - какую пользу несет в себе продукт?
Уникальность (Uniqueness) - чем отличается продукт от аналогов?
Ультра-специфичность (Ultraspecificity) - конкретика пользы в виде цифр и фактов.
Срочность (Urgency) - ограничение срока предложения или срочность эффективности.
При этом можно менять порядок элементов в формуле и исключать один из элементов в случае отсутствия.

Примеры заголовков, написанных по данному методу:
"Похудейте на 10 кг к лету по индивидуальному плану"
"Выучите английский с нуля до уровня Inermediate за 3 месяца занимаясь с носителем"
"Нарисуйте 5 картин для своего интерьера в течение 1 месячного курса"

Недостатки метода 4U:
1. Заголовок получается длинным, что мешает при оформлении дизайна.
2. Порой сложно найти какой то из U.
3. Заголовок может получиться скучным. Выход в данной ситуации - креативизация. Как вариант можно подобрать метафоры и сравнения.

О методе создания более креативных заголовков читайте в следующем посте.
​​Психология цветовосприятия 🧠🌈
Символика цветов и особенности их воздействия.

Красный📕
Активизирует и возбуждает. Учащает сердцебиение и и создает острую необходимость, поэтому его часто используют при оформлении скидок и распродаж в ритейле.
Среди популярных брендов, которые выбрали красный в качестве основного цвета: Coca-Cola, Canon, Levis, H&M и другие.

Оранжевый📙
Тепло, уверенность, свет. Зачастую используют для призыва к действию: продать, купить, подписаться.
Примеры брендов: Mozilla FireFox, Amazon.

Желтый📒
Радость, интеллект, энергия. Часто имеет большее влияние в соседстве с более темным цветом.
Пример брендов: Билайн, СТС, Яндекс.

Зеленый📗
Природа, рост, гармония. Воздействует успокаивающе и нейтрально. Популярен в финансовой сфере: банки, биржи, финансовые компании.
Примеры брендов: Freedom Finance, Starbucks, NVIDIA.

Синий, голубой📘
Стабильность, надежность. Действует успокаивающе и расслабляюще. Один из наиболее популярных цветов.
Также популярен в финансовой сфере и в сегменте b2b.
Примеры брендов: Facebook, VK, Visa, Samsung, PayPal.
Design by:
AR Shakir | UI Designer
https://dribbble.com/arshakir
​​Прототип сайта - ключ к высокой конверсии 🎯

7 шагов для составления качественного прототипа сайта

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

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

3. Анализ Целевой аудитории
Вы уже знаете продукт, цели и источники переходов. Раскройте портрет пользователя, который попадет на сайт. Как правило, целевую аудиторию можно разделить на 2-3 основных сегмента. Опишите каждый сегмент, их боли и пользу от продукта.

4. Составление структуры и распределение элементов сайта в прототипе
Проведенный ранее анализ в полной мере позволит вам понять, в каком порядке стоит подавать информацию на сайте, какие блоки будут наиболее полезными.

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

6. Тестирование
Данный этап проводится после завершение работ над сайтом. Протестируйте работу форм и функционала на сайте, адаптивность и удобство для навигации.

7. Оптимизация сайта
После запуска стоит продолжить отслеживание и тестирования сайта. Так, благодаря метрике вы сможете отследить поведение реальных пользователей на сайте и оптимизировать ключевые элементы, отредактировать тексты или порядок блоков на странице.
This media is not supported in your browser
VIEW IN TELEGRAM
Mama Joyce Peppa Sauce - Animated CTA button Shopify checkout

Added to UI Animation and Microinteractions
July 14, 2021
This media is not supported in your browser
VIEW IN TELEGRAM
Organic Animations, Transitions and Mask Effects - Portes fermées

Added by Awwwards to The Best of Navigation
​​Принцип "mobile first" vs привычная отрисовка макета с десктопной версии.

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

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

Так и появился принцип "mobile first", предполагающий старт отрисовки макета именно для смартфонов.

Теперь о плюсах и минусах данного подхода.

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

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

Какой подход выбираете вы?
​​Продолжаем тему синдрома самозванца

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

Добивающими внешними факторами для возникновения синдрома самозванца является привычка сравнивать себя с окружающими, а также просмотр социальных сетей с бесконечными постами "успешных и красивых" людей 👺

Вот и долгожданная подборка способов преодоления синдрома самозванца:

1 способ: здоровый самоанализ.
- Посмотрите со стороны на все свои достижения и выпишите их (только без "у меня нет достижений". Каждый из нас получал оценки в школе, учился чему-то новому, пробовал новые дела. Иначе вы бы это сейчас не читали)
- Проанализируйте, что поспособствовало достижению успеха (только объективно, а не "просто повезло")
В результате вы поймете, что

2 способ: разрешите себе быть неидеальным.
Примите себя полностью со всеми недостатками и положительными чертами. Вы - есть вы. И это самое прекрасное!

2 способ: воспринимайте новые задачи как квест.
Вместо того, чтобы в очередной раз браться за задачу с мыслью о том, что вы ее провалите, попробуйте представить, что это новое приключение. Вам ничего не грозит. Это всего лишь игра. Да будет энтузиазм вместе с вами!

4 способ: вы - не есть ваши мысли.
Зачастую именно наши мысли, зависящие от эмоций, ограничивают нас. Научитесь включать внешнего "наблюдателя" и смотреть на ситуацию с точки зрения фактов. Вы поймете, насколько проще обстоит ситуация.

И помните, синдром самозванца появляется каждый раз когда вы выходите из зоны комфорта. А это значит, что вы не стоите на месте.

Радуйтесь этому чувству. Гордитесь им! 🤗
This media is not supported in your browser
VIEW IN TELEGRAM
BOT Bottle on the table - Button hover and click animation

Added to UI Animation and Microinteractions
August 20, 2021
Веб-дизайнер в 2021. Какие навыки нужны веб-дизайнеру, чтобы оставаться востребованным? 👨‍💻

1. Графический дизайн
Безусловно, самый важный навык любого дизайнера. Умение работать с цветом, шрифтами, формами и иллюстрациями - главные инструменты для влияния на пользователя.

2. UX дизайн (дизайн интерфейсов).
Навык проектирования сценария пользователя на сайте, ведения его к целевому действию. Напрямую связан с психологией восприятия.

3. Насмотренность и постоянный интерес к современным тенденциям.
Тот самый навык, который позволяет дизайнеру не сидеть на месте, а постоянно развиваться. Только так у вас получится создавать сайты в соответствие с новыми трендами.

4. Понимание основ маркетинга.
Благодаря таким знаниям хороший дизайнер создаст не просто красивый сайт, а конверсионный (заточенный под рекламу) сайт. Полезным будет изучить успешные кейсы компаний, а также психология восприятия в помощь.

5. Веб-разработка. Хотя бы ее основы.
Причем дизайнеру не обязательно уметь программировать сайты, но важно знать основные принципы и требования. Это позволит упростить работу разработчику сайта и получить качественный итоговый результат, соответствующий макету.

Обо всём этом вы узнаете в нашем канале
This media is not supported in your browser
VIEW IN TELEGRAM
Benjamin Righetti - Scroll animations, mixing vertical and horizontal scroll

Added by Awwwards to UI Animation and Microinteractions
​​Иконки являются универсальным графическим средством донесения информации до пользователей.

Интересный факт об особенностях обозначения понятия иконок. В английском языке графические элементы пользовательского интерфейса Microsoft называются словом «icon». Однако при переводе на русский возникли трудности с подбором термина.

Слова "иконка" было отвергнуто из-за боязни вызвать конфликты на религиозной почве, подходящая альтернатива "пиктограмма" была отброшена из-за большой длины. В конечном итоге было принято решение об обозначении иконок в интерфейсе Microsoft термином «значок».

В завершении темы предлагаем вам подборку сервисов с бесплатными иконками:

iconduck.com
Множество разнообразных бесплатных иконок на любой вкус и цвет.

iconduck.com
Есть платные и бесплатные наборы иконок. Большое разнообразие.

illustrationkit.com/illustrations
Бесплатные векторные иллюстрации.

icons8.ru
165100 иконок для фотошоп.

icons.modulz.app
Яркий набор иконок 15х15 px. Удобно копируются сразу в клипборд.

icons.mono.company
Удобно скачивать, большое разнообразие простых черно-белых иконок.

teenyicons.com
Коллекция монохромных иконок, можно менять размер сразу на сайте перед тем, как скачать.
​​РОЛЬ ЛОГОТИПА И ЕГО ФУНКЦИИ

В чем же роль логотипа?

1️⃣ Отличать, защищать

✔️ Логотип позволяет отличать и выделять из сотен/тысяч конкурентов - компанию или специалиста и его продукцию/услуги.

✔️ Защитная же цель – уберечь себя от подделок и недобросовестных конкурентов.

2️⃣ Гарантия качества

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

3️⃣ Эстетически привлекать и влюблять

Красивый логотип повышает ценность товара/услуги, когда он становится неотъемлемым элементом оформления продукции.

Неоспоримый факт: эстетическая ценность имеет определенное объективное значение для потребителя.

4️⃣ Рекламировать

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

Будем говорить о сроках на создание сайта. Есть диапазоны сроков реализации для лендинга, многостраничника и интернет-магазина, которые +- у всех специалистов, рассмотрим их ниже. Но есть риск в них не вписаться, особенно если вы новичок в дизайне и еще непонятно сколько займет создание дизайна именно у вас. А вдруг муза не посетит? Что тогда делать?

📍Будем рассматривать вариант: дизайн + верстка на Тильде, так как при верстке программистом объективно оценить сроки может только специалист. Макет лучше отдавать на оценку сроков, уже после разработки.

❗️Еще нюанс, писать сроки в рабочих днях, то есть — это стандартная 5-дневная неделя, дизайнер тоже человек и должен отдыхать в выходные, как и заказчик.

Сроки:
— Лендинг 7-14 дней (в стандартных блоках быстрее делается, чем в зеро)
— Многостраничный сайт от 21 дня (все зависит от кол-ва страниц)
— Интернет магазин от 28 дней (зависит от страниц и сервисов, которые нужно прикрутить: доставка, касса и тд)

С опытом вы научитесь точно планировать сроки, а пока пара советов.

1️⃣Разделите создание сайта на маленькие задачи. Сначала составление Технического задания (ТЗ), потом прототипирование, создание макета, верстка и запуск сайта.

Например, при создании лендинга (14 дней) на ТЗ можно выделить 2 дня, на прототип 2-3, на дизайн и верстку 5-7, и пару дней на согласование каждого этапа.

2️⃣Когда ставите сроки выполнения проекта, прибавьте 1-2 запасных дня, на непредвиденный случай. Если сделаете раньше, клиент будет доволен, но у вас всегда должен быть запас времени на срочные задачи или в конце концов на отдых.
"Упаковка важна так же, как и продукт. Иногда даже важнее" Джек Траут

Согласны?

Да, согласен - 22
👍👍👍👍👍👍👍👍 92%
Нет, не согласен - 1
👍 4%
Не всегда. Иногда она не обязаьельна - 1
👍 4%
👥 24 человека уже проголосовало.