3.8. Дайджест. Адаптивный дизайн
Black PixelВсё самое интересное из мира дизайна и графики, собранное в одной еженедельной статье. Каждый выпуск наполнен материалами, которые публикуются на протяжении прошедшей недели. Напоминаем, что посвящена она была адаптивному дизайну.
Вдохновение
Материал, собранный нами в процессе поиска референсов для проектов, который, на наш взгляд, может вдохновить на решение дизайнерской задачи.
Адаптивные сайты
Ниже для сравнения десктопный и мобильный дизайн одних тех же сайтов
Адаптивные логотипы
Знаки и логотипы, имеющие спецверсии для разных форматов и масштабов
Обучение
Что такое адаптивность в веб-дизайне, когда она необходима, как применяется, как добиться мира и согласия между дизайнером и верстальщиком при разработке мобильной версии сайта — эти и другие вопросы подняты в коллекции собранных нами лекций и уроков
Вводная
Доклад Елены Гальцевой посвящён истории, концепциям и подходам адаптивного дизайна, а также включает в себя советы и полезные ссылки по себе.
Отличия адаптивного дизайна и отзывчивого
Ликбез по двум философиям веб-дизайна.
Создание мобильной версии лендинга
Процесс отрисовки в Photoshop адаптива сайта-одностраничника.
Разрешения экранов устройств
Вадим Паясу делиться советами по созданию десктоп- и адаптивных версий сайтов. Наглядным пособием выступает проект, созданный в конструкторе Webflow.
Разбор мобильной и планшетной версии сайта
Туториал по грамотному созданию макетов одного и того же сайта для телефонов и планшетов.
Адаптив при редизайне Яндекс.Карт
Рассказ дизайнера «Яндекс.Карт» Александра Кудымова о предпосылках и нюансах редизайна сервиса, а также о его мобильной версии.
Тонкости адаптивного дизайна и вёрстки
В своей лекции веб-евангелиста HTML Academy Вадим Макеев даёт рекомендации по тому, как получить прогнозируемый результат работы дизайнера и верстальщика на всех устройствах, а также демонстрирует технологии Auto Layout.
Десктоп- и мобильные версии сайтов
Разбор работ двух соревнующихся дизайнерских команд.
Инструменты
Сервисы для работы с адаптивным дизайном
Приложение для проверки дизайн-макетов из Фигмы на смартфоне. В наличии версии для iOS и Android.
Cервис для тестирования адаптивной версии сайта. Для работы желательно установить браузерное расширение.
Тестировщик, заточенный на экраны телефонов и планшетов в вертикальной и горизонтальной ориентации.
Плагин для Google Chrome, позволяющий в реальном времени подгонять открытую страницу под гаджеты.
Проверка оптимизации страницы для мобильных устройств от Google. Сервис демонстрирует сайта в мокапе телефона и диагностирует ошибки в коде.
Схожий инструмент от поисковика Bing.
Тест сайта на кроссбраузерность в разных операционных системах. В бесплатной версии доступны только имитация Windows 7, некоторые разрешения декстопа и стоит временной лимит, требующей перезагрузки страницы.
Ещё один тестировщик. Можно посмотреть, как выглядит сайт на экране отдельного устройства или сравнить на смартфоне и планшете.
Фигмовский плагин для объедения макетов брейкпоинтов в один фрейм с адаптивностью.
Спасибо за внимание! Подписывайся на наш @desingweek, чтобы не пропустить новые вдохновляющие и познавательные посты.