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

По вопросам рекламы: @ZokitiN
Download Telegram
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⠀
Библиотека различных персонажей, которых ты тоже можешь видоизменить.

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

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

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

Главные расширения:

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

2. Wappalyzer - инструмент определяет на чем сделан сайт. Выручает часто.

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

4. WhatTheFont - определитель шрифта на сайте. Нажимаешь на расширение, наводишь на слово и получаешь название шрифта.

5. ImageDownloader - автоматическая загрузка всех фото с сайта.

6. ColorZilla - определитель кода цвета на сайте. При наведении на любое место на сайте, расширение выдаст код цвета.

7. iloveadaptive - просмотр своего сайта на разных устройствах и проверка адаптивности.