Полезное дизайнерам и разрабочикам №12: палитры, слайдеры, иконки, эффекты

Судя по списку лучших статей 2018 в блоге за прошлый год было опубликовано всего 3 статьи-подборки полезных сервисов. Изначально мы планировали размещать их ежемесячно, но в реальности все получилось по-другому —   последний подобный выпуск №11 вы могли наблюдать аж в августе.

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

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

Emoji Builder

Emoji Builder

Инструмент Emoji Builder позволяет создавать уникальную картинку эмоджи, которую можно использовать как аватарку. Финальное изображение компонуется из нескольких элементов: формы лица, нескольких вариантов глаз, рта + парочки уникальных аксессуаров. Справа находится список добавленных объектов — вам разрешается менять расположение слоев или удалять их.

Screen Guru

Screen Guru

На главной странице Screen Guru вводите URL адрес нужного веб-сайта, и спустя несколько минут получаете полноценный скриншот соответствующей страницы. Чтобы сохранить картинку кликаете правой кнопкой мышки и выбираете соответствующий пункт меню. Есть и другие подходы как сделать скриншот.

Meteocons

Meteocons

Проект иконок Meteocons содержит более 40-ка элементов, доступных во всевозможных форматах: EPS, SVG, PSD, CSH, веб и десктопный шрифты. Архив является полностью бесплатным (в том числе и для коммерческого использования) + все обновления также будут такими.  Он отлично подойдет при проектировании дизайна интерфейсов. Советуем также глянуть 60+ наборов иконок погоды для Фотошопа.

Hue. Free color palettes

Hue. Free color palettes

Недавно мы рассказывали как сделать цветовую палитру для сайта, а сегодня предлагаем дополнительно скачать коллекцию готовых вариантов под названием Hue. Здесь используется цветовое соотношение 60% / 30% / 10%, что позволяет получить максимально сбалансированную и гармоничную картинку. В наборе найдете 20 комбинаций цветов с типовым дизайном страниц. Материалы заточены под Sketch, допускается легкое их редактирование. При скачивании автор просит оплатить донат, но в форме можно поставить и ноль.

Typography Sessions

Typography With Sessions

Веб-страница Typography With Sessions, как вы уже догадались, посвящена типографике. Это весьма оригинальная и наглядна демонстрация возможностей набора шрифтов Typekit и Adobe Muse. Сделано в формате лонгрида, весьма красочно и вдохновляюще. Советуем глянуть.

Diagonal Slideshow

Diagonal Slideshow

Diagonal Slideshow — скрипт/пример оригинального слайдшоу с перелистыванием кадров по диагонали. Есть некоторый эффект при наведении на центральную (активную) фотку + при клике на ее появится краткое описание (см. гифку выше). Страница превью содержит линк на Github с архивом галереи.

Physics Based Background Scroll Effects

Physics Based Background Scroll Effects

Еще один скрипт в сегодняшнем обзоре — Physics Scroll Effects. Он позволяет создать «реальный физический эффект» в фоне сайта при прокрутке. По ссылке найдете описание реализации данного решения + примеры нескольких разных фонов.

Fast Load Times

Fast load times

При разработке современного веб-проекта очень важно измерять, оптимизировать и мониторить скорость его загрузки. Этот параметр является для поисковиков и ваших посетителей очень важным. На странице Fast Load Times найдете список советов/рекомендаций по улучшению скорости, а именно: механизмы измерения показателя, оптимизация картинок, Javascript, шрифтов, расчет соответствующего бюджета и т.п.

Horizontal Scrolling Containers CSS Grid

Horizontal Scrolling Containers with CSS Grid

В статье Horizontal Scrolling with CSS Grid рассматривается процесс создания горизонтального скролинга блочных элементов. Как сделать так, чтобы он в итоге выглядел и работал максимально эффективно. В тексте каждая строка кода имеет пояснение — даже если вы начинающий разработчик, сможете все понять. Ранее мы приводили примеры и других слайдеров для сайта.

The Font Loading Checklist

The Font Loading Checklist

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

Fun Link Hover Effects

Having Fun With Link Hover Effects

Ранее мы рассматривали несколько способов подчеркивания ссылок с text-decoration, однако в статье Having Fun With Link Hover Effects представлена совершенно иная, нетипичная для веба идея — выделение линков волнистой линией. Автор заметки приводит не только пример данной реализации, но и показывает несколько других не менее интересных фишек: анимацию, эффекты с заливкой, тенью и др.

Всего в подборке уместилось 11 полезных ссылок по разным направлениям — от фоновых эффектов до слайдеров и эмоджи. Это все, что осталось с прошлого 2018 года, и до сих пор все еще актуально. А мы тем временем начинаем собирать для вас новый список интересных материалов.

Оставить комментарий

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *