Алоха! Короткую неделю стартуем с сеток и рассказывать нам об этом будет железный арт-директор Серёжа Кутьков:
Полезно почитать часть 1:
Модульные системы в вёрстке — Йозеф Мюллер-Брокманн.
Пособие для графиков, типографов и оформителей выставок. Классика от одного из самых известных и ярких представителей швейцарской школы дизайна. Много теории и примеров.
Сетки. Креативные решения для графических дизайнеров — Люсьен Робертс. Книга про использование сеток на заре появления цифровых инструментов.
⚙️ ⚙️ ⚙️
Сетки формируют структуру — каркас композиции. Это невидимые оси, к которым привязаны все элементы дизайн-макета. Без сеток невозможно обойтись в многостраничных изданиях (только если отсутствие сетки — это не специальный провокационный приём). Не профессионал, как правило, не видит по каким принципам построен тот или иной пример дизайна, но сразу подсознательно чувствует, когда эта невидимая структура нарушена. Умение работать с сеткой — одно из главных секретных оружий опытного дизайнера. Полезно почитать часть 1:
Модульные системы в вёрстке — Йозеф Мюллер-Брокманн.
Пособие для графиков, типографов и оформителей выставок. Классика от одного из самых известных и ярких представителей швейцарской школы дизайна. Много теории и примеров.
Сетки. Креативные решения для графических дизайнеров — Люсьен Робертс. Книга про использование сеток на заре появления цифровых инструментов.
Модульная сетка — универсальный инструмент организации визуального пространства, проектирования, создания композиции и управления вниманием пользователя. Она выступает в качестве основополагающего принципа дизайн-системы и помогает поддерживать ее целостность.
Полезно почитать часть 2:
Сетка — Аллен Хёрлберт. В книге рассматриваются преимущества и недостатки модульного проектирования. Хоть всё и показано на довольно старых примерах, основные идеи этой книги остаются актуальными и сейчас.
Модульные сетки. Проектирование многополосных изданий — Владимир Лаптев. Не очень старая книга (2009 г.) довольно узкой направленности. Много теории, которая повторяется в других книгах по сеткам, при этом так же много более-менее свежих примеров. Но главная особенность этой книги — это более глубокое рассмотрение именно многостраничных изданий.
Полезно почитать часть 2:
Сетка — Аллен Хёрлберт. В книге рассматриваются преимущества и недостатки модульного проектирования. Хоть всё и показано на довольно старых примерах, основные идеи этой книги остаются актуальными и сейчас.
Модульные сетки. Проектирование многополосных изданий — Владимир Лаптев. Не очень старая книга (2009 г.) довольно узкой направленности. Много теории, которая повторяется в других книгах по сеткам, при этом так же много более-менее свежих примеров. Но главная особенность этой книги — это более глубокое рассмотрение именно многостраничных изданий.
This media is not supported in your browser
VIEW IN TELEGRAM
Книги по сеткам знакомят нас с историей и общей теорией композиции. Дают базу для понимания принципов работы. Для более детального изучения доступно большое количество материалов в интернете. Это статьи, лекции, курсы и мастер-классы. Ниже несколько ссылок для новичков и не только:
[Раздел про сетки] в дизайн-альманахе Readymag. Разбор визуальной структуры нескольких онлайн-магазинов, сайтов медиа, книг и журналов.
[Модульная сетка макета с нуля: анализ, расчет и построение] — не новая, но всё ещё актуальная статья про использование сеток в веб-дизайне.
[Официальный гайд по сеткам в Материал-дизайне] андройда.
[Композиция и сетки в веб-дизайне] — лекция Евгения Кузьмина, СЕО & Арт-директора студии UPROCK.
[Grid Based Web Design Resources] на сайте Awwwards — ссылки на инструменты и генераторы, плагины, шаблоны для графических редакторов, фреймворки, книги, статьи по сеткам.
[Раздел про сетки] в дизайн-альманахе Readymag. Разбор визуальной структуры нескольких онлайн-магазинов, сайтов медиа, книг и журналов.
[Модульная сетка макета с нуля: анализ, расчет и построение] — не новая, но всё ещё актуальная статья про использование сеток в веб-дизайне.
[Официальный гайд по сеткам в Материал-дизайне] андройда.
[Композиция и сетки в веб-дизайне] — лекция Евгения Кузьмина, СЕО & Арт-директора студии UPROCK.
[Grid Based Web Design Resources] на сайте Awwwards — ссылки на инструменты и генераторы, плагины, шаблоны для графических редакторов, фреймворки, книги, статьи по сеткам.
Завершаю неделю по сеткам коллекцией примеров из Pinterest:
Сетки в логотипах — это часто называют дизайнерским фетишизмом — раскладывать графические знаки с точки зрения линий построения. Многие считают это бессмысленным занятием, но при этом не могут не согласиться, что это выглядит красиво.
Сетки в графическом дизайне — много примеров использования как простых, так и сложных сеток, но всегда с интересной композицией.
Ещё сетки в графическом дизайне — также много различных лейаутов и интересных композиционных приёмов.
Швейцарская типографика — работы по мотивам самых известных приверженцев использования сеток в дизайне, которые подняли это искусство на новый уровень.
Всем гармоничных сеток и хорошего завершения недели! До встречи, Сережа Кутьков @cjtlt.🤖
Сетки в логотипах — это часто называют дизайнерским фетишизмом — раскладывать графические знаки с точки зрения линий построения. Многие считают это бессмысленным занятием, но при этом не могут не согласиться, что это выглядит красиво.
Сетки в графическом дизайне — много примеров использования как простых, так и сложных сеток, но всегда с интересной композицией.
Ещё сетки в графическом дизайне — также много различных лейаутов и интересных композиционных приёмов.
Швейцарская типографика — работы по мотивам самых известных приверженцев использования сеток в дизайне, которые подняли это искусство на новый уровень.
Всем гармоничных сеток и хорошего завершения недели! До встречи, Сережа Кутьков @cjtlt.🤖
Салют! На прошлой неделе прокачивались в сетках, пришло время залипнуть и посмотреть на костюмы, ретрофутуризм и киберпанк. А рассказывать нам об этом будет Саша Кашин, рободизайнер:
⚙️⚙️⚙️
1. Cид Мид — художник, футурист, дизайнер, гений концепт-арта. Известен своими работами для фильмов чужие, бегущий по лезвию, трон (которые в прошлом веке снимали). Консультировал режиссера «Стартрека». Он всегда настаивал на реалистичности объектов, чтобы они не нарушали законы физики. Какое-то время жил в японском городе, который раньше был китайским, и видел тончайшие различия культур, и мог их смешивать в своих работах, например, в «Бегущий по лезвию», «Трон».
Кроме фильмов он работал в Ford как концепт-художник, был визионером, рисовал как машины могут выглядеть в будущем. Был первым, кто начал рисовать машины в контексте события, окружая объектами, людьми. В его альбомах можно заметить роботов, очень похожих на костюмы Daft Punk. Видео, в котором рассказывают более развернуто и с примерами.
⚙️⚙️⚙️
1. Cид Мид — художник, футурист, дизайнер, гений концепт-арта. Известен своими работами для фильмов чужие, бегущий по лезвию, трон (которые в прошлом веке снимали). Консультировал режиссера «Стартрека». Он всегда настаивал на реалистичности объектов, чтобы они не нарушали законы физики. Какое-то время жил в японском городе, который раньше был китайским, и видел тончайшие различия культур, и мог их смешивать в своих работах, например, в «Бегущий по лезвию», «Трон».
Кроме фильмов он работал в Ford как концепт-художник, был визионером, рисовал как машины могут выглядеть в будущем. Был первым, кто начал рисовать машины в контексте события, окружая объектами, людьми. В его альбомах можно заметить роботов, очень похожих на костюмы Daft Punk. Видео, в котором рассказывают более развернуто и с примерами.
RPReplay_Final1593502650 (1).gif
44.3 MB
Хосе Фернандез — скульптор, художник по костюмам. Его работы и работы его студии можно увидеть в фильмах «Гремлины», «Люди Х», «Люди в чёрном», «Бэтмен», «Человек-паук» и других. Можно сказать, он вдохновлялся работами Сид Мида и довел костюмы Daft Punk до того вида, что мы знаем. Также делал костюмы для нового «Трона», где принимали участие Daft Punk. И кстати именно Хосе разработал дизайн скафандров, в которых недавно улетели астронавты Crew Dragon.
Работы на их сайте. Блог с видео. ФБ, в котором постят разные модельки.
Работы на их сайте. Блог с видео. ФБ, в котором постят разные модельки.
Майкл Каплан — художник по костюмам, в голливудской киноиндустрии с 1981 года. Он делал костюмы для оригинального «Бегущего по лезвию», «Стартрека», «Бойцовского клуба», «Звездных войн» и др.
Его работы более приземленные, но не менее значимые, так как в мире киношных костюмов он один из лучших, и за костюмы для «Бегущего по лезвию» в 1983 году получил награду Британской академии кинематографического и телевизионного искусства за лучший дизайн. Есть гипотеза, что тренды в реальный мир иногда идут из кино.
А его работы можно посмотреть тут.
Его работы более приземленные, но не менее значимые, так как в мире киношных костюмов он один из лучших, и за костюмы для «Бегущего по лезвию» в 1983 году получил награду Британской академии кинематографического и телевизионного искусства за лучший дизайн. Есть гипотеза, что тренды в реальный мир иногда идут из кино.
А его работы можно посмотреть тут.
Выбираем темы для будущих подборок, присоединяйся, голосуй ⬇️
Anonymous Poll
37%
Ликбез по дизайну с WWDC 2020
12%
Игры с интересным визуалом
34%
Дизайн-мышление
17%
Типографика и леттеринг
This media is not supported in your browser
VIEW IN TELEGRAM
Салют! В голосовании победили темы WWDC и дизайн-мышления — начнём с Apple. Ваня Вавилов (Head of iOS), Саша Бабаев (CTO RMR SPb) и ex.железный дизайнер Артур Абраров отобрали наиболее интересные и полезные нововведения и лекции к ним.
App Clips
В iOS 14 появятся мини-приложения, которые можно использовать без установки полной версии.
Например, сейчас для аренды самоката надо установить приложение, зарегистрироваться и ввести данные для платежа. С App Clip сканируем QR-код на самокате или используем NFC-метку, быстро логинимся через Sign in with Apple, оплачиваем аренду через Apple Pay и катаемся! Если приложение понравилось — устанавливаем полную версию.
Другой сценарий — оплата парковки в разных городах, чтобы не скачивать каждый раз новое приложение. Есть сценарии для интернет-магазинов, кофеен, доставки еды и путешествий. Подробнее в секции от Apple.
App Clips должны быть до 10 Мбайт, используют SwiftUI и UIkit и имеют возможности приложений: используют камеры, геолокацию, Bluethooth и др.
App Clips
В iOS 14 появятся мини-приложения, которые можно использовать без установки полной версии.
Например, сейчас для аренды самоката надо установить приложение, зарегистрироваться и ввести данные для платежа. С App Clip сканируем QR-код на самокате или используем NFC-метку, быстро логинимся через Sign in with Apple, оплачиваем аренду через Apple Pay и катаемся! Если приложение понравилось — устанавливаем полную версию.
Другой сценарий — оплата парковки в разных городах, чтобы не скачивать каждый раз новое приложение. Есть сценарии для интернет-магазинов, кофеен, доставки еды и путешествий. Подробнее в секции от Apple.
App Clips должны быть до 10 Мбайт, используют SwiftUI и UIkit и имеют возможности приложений: используют камеры, геолокацию, Bluethooth и др.
This media is not supported in your browser
VIEW IN TELEGRAM
Widgets
В iPhone, iPad и Mac добавлены виджеты для главного экрана. По мнению Apple, так страница Home приобретет кардинально новый и более информативный вид. Пользователь может группировать виджеты или использовать автоматическую расстановку, например «рекомендованные», «недавно открытые».
На iPhone и iPad доступна функция Smart Stack — это по сути виджет для виджетов. Позволит объединить их в группу по какому-либо признаку и перелистывать между собой. Например, утром на главном экране будет группа с погодой и новостями, днем календарь, а вечером карта и информация о пробках.
Виджеты доступны в трех размерах для разной информационной нагрузки. Пара советов из Widget UI kit: на виджете не нужно указывать название приложения или логотип, только полезный контент. Виджеты должны выглядеть одинаково хорошо в темной и светлой теме. Текст должен быть всегда, но не переводите его в растр, чтобы функция Voice Over работала корректно. Больше информации и советов по использованию виджетов в сессии Apple.
В iPhone, iPad и Mac добавлены виджеты для главного экрана. По мнению Apple, так страница Home приобретет кардинально новый и более информативный вид. Пользователь может группировать виджеты или использовать автоматическую расстановку, например «рекомендованные», «недавно открытые».
На iPhone и iPad доступна функция Smart Stack — это по сути виджет для виджетов. Позволит объединить их в группу по какому-либо признаку и перелистывать между собой. Например, утром на главном экране будет группа с погодой и новостями, днем календарь, а вечером карта и информация о пробках.
Виджеты доступны в трех размерах для разной информационной нагрузки. Пара советов из Widget UI kit: на виджете не нужно указывать название приложения или логотип, только полезный контент. Виджеты должны выглядеть одинаково хорошо в темной и светлой теме. Текст должен быть всегда, но не переводите его в растр, чтобы функция Voice Over работала корректно. Больше информации и советов по использованию виджетов в сессии Apple.
This media is not supported in your browser
VIEW IN TELEGRAM
iPad
В iPadOS 14 новый дизайн домашнего экрана, боковая панель навигации, распознавание рукописного текста и более реалистичные AR объекты.
У многих приложений появилась боковая панель для навигации по папкам. Иконки файлов стали меньше, за счет чего на экране может быть на 300% больше контента, чем раньше.
Функция «От руки» для Apple Pencil преобразует рукописный текст в машинописный, отличает надписи от рисунков, а геометрические фигуры делает ровными и правильными. Пока программа распознает только английский и китайский языки. А если хочется самому порисовать скетчи, посмотрите сессию Inspect, modify, and construct PencilKit drawings.
Apple представила ARKit 4 с новым Depth API. Сканер LiDAR на iPad Pro 2020 оценивает расстояние до предметов и собирает данные об окружающей среде.
С помощью функции привязки к местности можно добавлять AR элементы на карты и рассматривать их со всех сторон в приложениях для iPhone и iPad. Больше о новинках для iPad.
В iPadOS 14 новый дизайн домашнего экрана, боковая панель навигации, распознавание рукописного текста и более реалистичные AR объекты.
У многих приложений появилась боковая панель для навигации по папкам. Иконки файлов стали меньше, за счет чего на экране может быть на 300% больше контента, чем раньше.
Функция «От руки» для Apple Pencil преобразует рукописный текст в машинописный, отличает надписи от рисунков, а геометрические фигуры делает ровными и правильными. Пока программа распознает только английский и китайский языки. А если хочется самому порисовать скетчи, посмотрите сессию Inspect, modify, and construct PencilKit drawings.
Apple представила ARKit 4 с новым Depth API. Сканер LiDAR на iPad Pro 2020 оценивает расстояние до предметов и собирает данные об окружающей среде.
С помощью функции привязки к местности можно добавлять AR элементы на карты и рассматривать их со всех сторон в приложениях для iPhone и iPad. Больше о новинках для iPad.
Новые дизайн-компоненты
В iOS обновлены пикеры, контекстное меню и добавлен выбор цвета.
Разработчики переосмыслили визуальный стиль пикеров и взаимодействие пользователя с ними. Выбор даты доступен в 4 режимах: обратный отсчет, время, дата, время и дата. Так будет легче переключаться между годами и месяцами в календаре. Время теперь можно ввести с клавиатуры, а не скроллить переключатель. К пикерам также добавили светло-серый бэкграунд, чтобы выбранный элемент был заметнее.
Контекстное меню можно добавить к любой кнопке, при этом меню не будет перекрывать экран смартфона. Сессия о дизайн-компонентах.
Обновление для API SwiftUI упрощает выбор цвета для приложений. У разработчиков теперь есть Color Picker, чтобы:
> выбрать цвет из сетки, спектра или с помощью ползунков.
> изменить прозрачность и переключаться между цветовыми пространствами (Display P3 и sRGB)
> выбрать цвет из любой точки экрана.
В iOS обновлены пикеры, контекстное меню и добавлен выбор цвета.
Разработчики переосмыслили визуальный стиль пикеров и взаимодействие пользователя с ними. Выбор даты доступен в 4 режимах: обратный отсчет, время, дата, время и дата. Так будет легче переключаться между годами и месяцами в календаре. Время теперь можно ввести с клавиатуры, а не скроллить переключатель. К пикерам также добавили светло-серый бэкграунд, чтобы выбранный элемент был заметнее.
Контекстное меню можно добавить к любой кнопке, при этом меню не будет перекрывать экран смартфона. Сессия о дизайн-компонентах.
Обновление для API SwiftUI упрощает выбор цвета для приложений. У разработчиков теперь есть Color Picker, чтобы:
> выбрать цвет из сетки, спектра или с помощью ползунков.
> изменить прозрачность и переключаться между цветовыми пространствами (Display P3 и sRGB)
> выбрать цвет из любой точки экрана.
Заканчиваем неделю, посвященную Apple WWDC 2020 сборной солянкой из интересных лекций по дизайну:
Design for intelligence: Discover new opportunities. Использование возможностей операционной системы для решения задач пользователей в различных сценариях: Siri, уведомления, виджеты
What’s new in watchOS design. Обновления в watchOS 7, в том числе чем отличается UI на часах и почему именно такие компоненты надо использовать
Design for the iPadOS pointer. Проектирование UI для приложений на iPad с поддержкой тач бара и мыши
What's new in Mac Catalyst и Adopt the new look of macOS. Про новые процессоры Apple Silicon
И еще несколько сессий по дизайну, менее крутых, по нашему мнению, но можно посмотреть для вдохновения:
- Evaluate and optimize voice interaction for your app.
- Design for location privacy.
- Design for intelligence: Apps, evolved.
- Design for intelligence: Make friends with “The System”.
- Design for intelligence: Meet people where they are.
Отличных выходных и до связи 🤖
Design for intelligence: Discover new opportunities. Использование возможностей операционной системы для решения задач пользователей в различных сценариях: Siri, уведомления, виджеты
What’s new in watchOS design. Обновления в watchOS 7, в том числе чем отличается UI на часах и почему именно такие компоненты надо использовать
Design for the iPadOS pointer. Проектирование UI для приложений на iPad с поддержкой тач бара и мыши
What's new in Mac Catalyst и Adopt the new look of macOS. Про новые процессоры Apple Silicon
И еще несколько сессий по дизайну, менее крутых, по нашему мнению, но можно посмотреть для вдохновения:
- Evaluate and optimize voice interaction for your app.
- Design for location privacy.
- Design for intelligence: Apps, evolved.
- Design for intelligence: Make friends with “The System”.
- Design for intelligence: Meet people where they are.
Отличных выходных и до связи 🤖
Привет, человек!
На этой неделе будем говорить о дизайн-мышлении. Оно помогает создавать не только красивые и полезные продукты, но и превратить стартап в многомиллионный бизнес.
Кейс Airbnb: как из неудачного проекта он стал бизнесом на миллиард долларов, благодаря дизайн-мышлению.
Спойлер: стартап начал приносить деньги после того, как основатели осознали, что встреча с пользователями в реальном мире – лучший способ найти решение их (и своей) проблемы.
Кейс Netflix: как исследования клиентов, постоянная итерация идей и создание прототипов стали основой роста и цифровой трансформации Netflix, и помогли достичь 182 млн. подписчиков. А если хотите узнать, как они это делают, послушайте запись подкаста с продуктовыми дизайнерами Алексом Бронки и Микаэлой Тедор.
Руководство по базовым принципам дизайн-мышления оставим тут.
На этой неделе будем говорить о дизайн-мышлении. Оно помогает создавать не только красивые и полезные продукты, но и превратить стартап в многомиллионный бизнес.
Кейс Airbnb: как из неудачного проекта он стал бизнесом на миллиард долларов, благодаря дизайн-мышлению.
Спойлер: стартап начал приносить деньги после того, как основатели осознали, что встреча с пользователями в реальном мире – лучший способ найти решение их (и своей) проблемы.
Кейс Netflix: как исследования клиентов, постоянная итерация идей и создание прототипов стали основой роста и цифровой трансформации Netflix, и помогли достичь 182 млн. подписчиков. А если хотите узнать, как они это делают, послушайте запись подкаста с продуктовыми дизайнерами Алексом Бронки и Микаэлой Тедор.
Руководство по базовым принципам дизайн-мышления оставим тут.