Hoboken Yogi - Button hover circle animation

Added to UI Animation and Microinteractions
September 21, 2021

​​Сколько времени заложить на проект, чтобы не облажаться?
⠀
Будем говорить о сроках на создание сайта. Есть диапазоны сроков реализации для лендинга, многостраничника и интернет-магазина, которые +- у всех специалистов, рассмотрим их ниже. Но есть риск в них не вписаться, особенно если вы новичок в дизайне и еще непонятно сколько займет создание дизайна именно у вас. А вдруг муза не посетит? Что тогда делать?
⠀
📍Будем рассматривать вариант: дизайн + верстка на Тильде, так как при верстке программистом объективно оценить сроки может только специалист. Макет лучше отдавать на оценку сроков, уже после разработки.
⠀
❗️Еще нюанс, писать сроки в рабочих днях, то есть — это стандартная 5-дневная неделя, дизайнер тоже человек и должен отдыхать в выходные, как и заказчик.
⠀
✅ Сроки:
— Лендинг 7-14 дней (в стандартных блоках быстрее делается, чем в зеро)
— Многостраничный сайт от 21 дня (все зависит от кол-ва страниц)
— Интернет магазин от 28 дней (зависит от страниц и сервисов, которые нужно прикрутить: доставка, касса и тд)
⠀
С опытом вы научитесь точно планировать сроки, а пока пара советов.
⠀
1️⃣Разделите создание сайта на маленькие задачи. Сначала составление Технического задания (ТЗ), потом прототипирование, создание макета, верстка и запуск сайта.
⠀
Например, при создании лендинга (14 дней) на ТЗ можно выделить 2 дня, на прототип 2-3, на дизайн и верстку 5-7, и пару дней на согласование каждого этапа.
⠀
2️⃣Когда ставите сроки выполнения проекта, прибавьте 1-2 запасных дня, на непредвиденный случай. Если сделаете раньше, клиент будет доволен, но у вас всегда должен быть запас времени на срочные задачи или в конце концов на отдых.

fanfanfan Design Studio - Circle hover animation

Added by Awwwards to UI Animation and Microinteractions

"Упаковка важна так же, как и продукт. Иногда даже важнее" Джек Траут

Согласны?

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

2021 Virtual Webbys - CTA button to enter

Added by Awwwards to UI Animation and Microinteractions

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

Несколько моментов, которые важно учитывать при разработке интернет-магазина:
⠀
1️⃣ Меню
Пользователь может зайти на сайт с абсолютно любым вопросом и хорошо, если получается дать ему ответ всего в один клик.
▪️Где посмотреть товары - "каталог" с выпадающим списком под разделы;
▪️Как доставляют товар/как происходит оплата - "доставка и оплата";
▪️Надо связаться с компанией - "контакты";
▪️Что можно купить со скидкой - "акции" и т.д.
⠀
2️⃣ Товары
Важно наиболее подробно показать товар, качественные фотографии с разных ракурсов и описание всех характеристик никогда не повредят. К примеру, если мы продаем пальто - следует указать не только доступные цвета и размеры, но и материалы, при какой температуре в нем будет комфортно, под какой тип фигуры оно подходит, как его стирать/сушить и т.д.
⠀
❗От количества закрытых вопросов напрямую зависит вероятность покупки товара.
⠀
3️⃣ Оплата
Все мы не очень любим расставаться с деньгами, поэтому одна из главных задач интернет-магазина - сделать этот процесс понятным и приятным. Минимум, что можно сделать - описать как будет проходить оплата на сайте, добавить несколько способов оплаты, и не бросать клиента после покупки.
⠀
❌Плохо - человек оплатил заказ и в ответ тишина.
⠀
✅ Хорошо - человек оплатил заказ, в ответ ему письмо на e-mail или звонок от менеджера со словами "заказ принят, мы его собираем, отправим в ближащие 2 дня, придет через неделю, спасибо за покупку".
Всё, спокойствие о потраченых деньгах и приятное впечатление о компании гарантировано✔
⠀
Это лишь малая часть из того, что следует учитывать при разработке интернет-магазина, но при упущении этих моментов достойных продаж может не получиться.

Знаете ли вы разницу между лендингом и многостраничным сайтом?🤔

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

Restore Hope Appeal - Call to action button

Added by Awwwards to UI Animation and Microinteractions

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

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

2021 Virtual Webbys - CTA button to enter

Added by Awwwards to UI Animation and Microinteractions

​​7 полезных расширений для веб-дизайнера
⠀
Расширения для браузера помогают оптимизировать и ускорить рабочий процесс.
⠀
Узнать, на какой платформе сделан сайт, посмотреть какой шрифт использован в сайте, узнать код цвета, сделать полный скрин страницы или ее часть, все это очень сильно упрощает работу.
⠀
Главные расширения:
⠀
1. ANNEXX - набор инструментов для расширешия возможностей зеро блока в тильде. Подписка здесь платная, около 8$ в месяц. С ним зеро блок в тильде стал чуть больше похож на фигму.
⠀
2. Wappalyzer - инструмент определяет на чем сделан сайт. Выручает часто.
⠀
3. FireShot - скриншоты страниц. Можно сделать полностью скрин всего сайта, можно только одного экрана, а можно просто вырезать квадратик. Удобно еще тем, что не нужно сохранять на компьютер участок, а просто скопировать его и вставить в фигму или мессенджер.
⠀
4. WhatTheFont - определитель шрифта на сайте. Нажимаешь на расширение, наводишь на слово и получаешь название шрифта.
⠀
5. ImageDownloader - автоматическая загрузка всех фото с сайта.
⠀
6. ColorZilla - определитель кода цвета на сайте. При наведении на любое место на сайте, расширение выдаст код цвета.
⠀
7. iloveadaptive - просмотр своего сайта на разных устройствах и проверка адаптивности.

WebGL playful microinteraction - Thibaut Foussard

Added by Awwwards to UI Animation and Microinteractions

Kffein - UI microinteraction on contact page

Added by Awwwards to Contact Pages