🧰 Restaurant Generator — плагин позволяет заполнять компоненты реалистичной информацией о ресторанах

Dezzigners

Галя, у нас отмена.

Антон из X5 Tech написал о скелетонах.

— Это такая загрузка экрана, когда сначала отображаются серые прямоугольники, а потом вместо них появляется контент;
— Их важно анимировать, чтобы всё это не было похоже на баг;
— Прижилась пульсация (мерцание) и волна (единое для всех блоков смещение градиента, background: fixed);
— Плюс скелетона в предварительном представлении структуры экрана и возможности отображать контент по мере его загрузки;
— Каждый прямоугольник скелетона — обёртка для контента и заглушка на время загрузки;
— Но что должно быть внутри обёртки: атом, молекула или организм в терминах атомарного дизайна?
— Отдельными блоками скелетона может быть то, что запрашивается с сервера отдельными запросами;
— Скелетировать можно всю страницу (высоконагруженные проекты, у значимой доли пользователей плохой интернет), её части (тяжёлые блоки с таблицами, статистикой) или отдельные элементы (результат множества запросов, сложного вычисления и так далее);
— Будьте последовательны. Если где-то есть скелетоны, спиннеры в раскрывающихся списках смотрятся странно;
— Заглушки должны соответствовать размеру контента (в первую очередь высоте), чтобы при загрузке ничего не скакало, а также его внешнему виду, чтобы не сильно контрастировать с контентом;
— Если в карточках может быть разный состав контента, ради простоты можно сделать для всех карточек одну усреднённую заглушку;
— Высокая детализация требует затрат, которые не всегда оправданы. Например, вкладки могут быть одним прямоугольником. Обычно это один компонент на странице, его заглушка воспринимается как заголовок, да и показывать заглушки отдельных табов непросто;
— Но иногда повышение детализации имеет смысл и помогает сразу привлечь внимание к определённой части страницы;
— Повторяющиеся элементы вроде ячеек с текстом в таблице можно скелетировать красиво, сделав заглушки разной ширины (90, 75, 85, 80, 65% от ширины ячейки) и сохранив выравнивание.

#loader

Шрифт Mistery Zero by Alitdesign

Бесплатно для личных проектов.

Лицензия тут

📁Скачать Шрифт

#Latin

🅰️ Новые шрифты

Крутые постеры для вашего вдохновения.

📙 Shock Design

Бесплатный инструмент, который за счет нейросети превращает чёрно-белые фотографии в цветные.

palette.fm

Источник

👨 Дизайн-телега

Cloudy wh a chance of Doge - Night View
Автор

🌠 UI_UX inspiration

Баба Клава vs. Дизайн: Кто победил?

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

Читать на дизайнерс | #статья