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

По вопросам рекламы: @ZokitiN
Download Telegram
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 человека уже проголосовало.
​​Что учитывать при разработке интернет-магазина🖱

Интернет-магазин это зачастую очень сложная и объемная работа, которая требует подробной аналитики и тщательного исследования пользовательского опыта👩‍💻

Несколько моментов, которые важно учитывать при разработке интернет-магазина:

1️⃣ Меню
Пользователь может зайти на сайт с абсолютно любым вопросом и хорошо, если получается дать ему ответ всего в один клик.
▪️Где посмотреть товары - "каталог" с выпадающим списком под разделы;
▪️Как доставляют товар/как происходит оплата - "доставка и оплата";
▪️Надо связаться с компанией - "контакты";
▪️Что можно купить со скидкой - "акции" и т.д.

2️⃣ Товары
Важно наиболее подробно показать товар, качественные фотографии с разных ракурсов и описание всех характеристик никогда не повредят. К примеру, если мы продаем пальто - следует указать не только доступные цвета и размеры, но и материалы, при какой температуре в нем будет комфортно, под какой тип фигуры оно подходит, как его стирать/сушить и т.д.

От количества закрытых вопросов напрямую зависит вероятность покупки товара.

3️⃣ Оплата
Все мы не очень любим расставаться с деньгами, поэтому одна из главных задач интернет-магазина - сделать этот процесс понятным и приятным. Минимум, что можно сделать - описать как будет проходить оплата на сайте, добавить несколько способов оплаты, и не бросать клиента после покупки.

Плохо - человек оплатил заказ и в ответ тишина.

Хорошо - человек оплатил заказ, в ответ ему письмо на e-mail или звонок от менеджера со словами "заказ принят, мы его собираем, отправим в ближащие 2 дня, придет через неделю, спасибо за покупку".
Всё, спокойствие о потраченых деньгах и приятное впечатление о компании гарантировано

Это лишь малая часть из того, что следует учитывать при разработке интернет-магазина, но при упущении этих моментов достойных продаж может не получиться.
Знаете ли вы разницу между лендингом и многостраничным сайтом?🤔

Да - 25
👍👍👍👍👍👍👍👍 64%
Нет - 8
👍👍👍 21%
Догадываюсь - 6
👍👍👍 15%
👥 39 человек уже проголосовало.
​​Топ-10 сервисов с иллюстрациями🔥

С сервисами-помощниками рабочий процесс всегда продуктивнее.

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

🖌 https://lukaszadam.com/illustrations⠀
Векторные иллюстрации и иконки, созданная Адамом Лукашом. Обновляется еженедельно!

🖌 https://mixkit.co/free-stock-art/⠀
Распределены по тематикам. Очень красивые😍. И абсолютно бесплатно.

🖌 https://absurd.design⠀
Любишь абсурдные иллюстрации - тебе точно сюда! Сможешь придать картинкам свой, нужный именно тебе смысл.

🖌 https://sapiens.ui8.net/⠀
Дружелюбные цветные, чёрно-белые и линейные иллюстрации.

🖌 https://ru.pngtree.com⠀
Платформа с изображениями формата PNG. Помимо огромного количества изображений, есть фоны и текстовые эффекты.

🖌 https://fresh-folk.com⠀
Огромный выбор людей и предметов с различным количеством поз, нарядов, национальностей. Можно создать сцены на любой вкус.

🖌 https://isometric.online⠀
Изометрические иллюстрации от дизайнера Сергея Тихонова. Пополняются в зависимости от запросов в поиске.

👨‍🎨Иллюстрации от дизайнера Пабло Стенли:

1. 🖌 https://www.opendoodles.com⠀
Рисованные векторные иллюстрации. Можно воспользоваться редактором, создать свои варианты👍

2. 🖌 https://www.buttsss.com⠀
Провокационные иллюстрации. Для создания развлекательного контента.

3. 🖌 https://www.humaaans.com⠀
Библиотека различных персонажей, которых ты тоже можешь видоизменить.

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