Насмотренность для дизайнера интерфейсов: как развить насмотренность и почему это важно
Развитие насмотренности — важный этап для дизайнера, так как это помогает не только генерировать новые идеи, но и учиться понимать, почему одни решения работают лучше других. Это «понимание» подразумевает не просто пассивное наблюдение, но и активный анализ и накопление визуального «опыта», что в конечном счёте будет вдохновлять и развивать ваш собственный профессиональный стиль.
Зачем нужна насмотренность?
Насмотренность — это как библиотека визуальных знаний, которую дизайнер создаёт сам для себя. Она состоит из множества деталей: от элементов навигации до стиля иллюстраций. Чем больше решений вы видите и анализируете, тем шире ваш «дизайнерский» кругозор и тем больше идей вы сможете предложить в будущем при выполнении рабочих проектов.
Развивая насмотренность, дизайнер учится:
- Понимать современные тенденции в дизайне интерфейсов.
- Видеть, как разные дизайнеры решают похожие задачи.
- Осознавать, почему тот или иной элемент выглядит гармонично и функционально.
- Определять успешные стилистические и композиционные решения для различных типов проектов.
Для наглядности давайте рассмотрим два примера, которые ярко иллюстрируют, как дизайн может быть адаптирован под разные задачи и аудитории. Первый пример — сайт Nixon, который посвящен продаже часов. Его стиль можно охарактеризовать как минималистичный и утончённый. Нейтральная цветовая палитра, включающая бежевый фон и чёрный текст, создают ощущение премиальности. Здесь внимание сосредоточено на продукте: крупные изображения часов и лаконичный слоган говорят сами за себя. Простая типографика усиливает этот эффект, делая текст понятным и легко воспринимаемым.
Второй пример — сайт Burek, посвященный фастфуду. Его стиль абсолютно противоположен: яркий, динамичный и эмоциональный. Оранжевый фон и насыщенные цвета ингредиентов, таких как зелёный салат и нарезанные ломтики красного помидора, мгновенно привлекают внимание. Элементы дизайна, такие как «летающая» еда, создают ощущение движения, энергии и веселья. Типографика проста и дружелюбна, делая акцент на бренде и ключевых элементах интерфейса, например на таких, как кнопка доставки. Этот сайт сразу вызывает аппетит.
Эти примеры демонстрируют, как важна насмотренность для дизайнера. Анализируя такие сайты, можно заметить, как стиль, цвета и композиция решают разные задачи. Nixon создает ощущение утончённости и высокого качества, тогда как Burek вызывает эмоциональную вовлеченность и желание утолить голод. Насмотренность помогает дизайнеру понимать, какие решения работают в том или ином контексте, адаптировать идеи под свои задачи и находить баланс между функциональностью и визуальной привлекательностью. Таким образом, умение анализировать и черпать вдохновение из разных источников позволяет дизайнерам создавать уникальные и эффективные проекты, которые соответствуют ожиданиям аудитории и целям компании.
Как и где смотреть?
Сайты с примерами работ от признанных дизайнеров и студий помогут вам получить представление о том, как в мире выглядит качественный дизайн интерфейса. Для регулярного просмотра рекомендуется выделять хотя бы 30 минут в день, изучая работы на платформах, где выкладываются примеры интересующего вас дизайна. Вот небольшой список таких ресурсов:
Вот небольшой список таких ресурсов:
- Awards от RatingRuneta — Всероссийская премия за лучшие сайты и мобильные приложения.
- Awwwards — известный портал с проектами со всего мира.
Design Made in Germany — немецкий сайт с подборками лучших дизайнерских решений. - Behance — крупная платформа для дизайнеров разных направлений, где также есть категории веб- и UI-дизайна.
- Dprofile — площадка для дизайнеров, агентств, представителей бизнеса.
- CSS Design Awards — подборки с хорошими сайтами.
- One Page Love — коллекция одностраничников.
- Land-book — еще одна подборка лендингов.
- Pinterest — универсальный ресурс для вдохновения: от дизайна и сайтов до цветовых палитр. Умные рекомендации и удобное сохранение делают его отличным инструментом для поиска идей.
- Dribbble — сообщество профессионалов с закрытым доступом для публикаций. Хотя смотреть работы могут все, что делает платформу отличной для изучения трендов и лучших решений.
- Scrnshts.club — превью современных сайтов с акцентом на навигацию и концепты для мобильных. Полезно для анализа мобильных интерфейсов и адаптивных решений.
- Abduzeedo.com — подборки по категориям, таким как 3D, брендинг, графика и UX/UI. Отличный ресурс для тех, кто ищет концептуальные и нестандартные идеи.
- Mobbin.design — библиотека с 50 тысячами скриншотов для тех, кто работает с мобильными приложениями. Удобная сортировка для быстрого поиска нужных примеров.
- Hoverstat.es — платформа с креативными и нестандартными сайтами. Подходит для поиска свежих и конкурсных идей, впечатляющих подходов и новых веб-решений.
Эти ресурсы демонстрируют разнообразие стилей, подходов и решений. Вы увидите, как дизайнеры создают целостные концепции, подходящие для разных контекстов: от минималистичных магазинов до сложных корпоративных порталов.
Как анализировать примеры?
Важно не просто просматривать примеры, но и фиксировать те элементы, которые особенно понравились. Это могут быть:
- Ссылки и кнопки — их форма, цвет, анимация.
- Заголовки и шрифты — как подчеркивается иерархия и текстовый контент.
- Карточки товаров — оформление и структура, с учётом контекста и задач продукта.
- Анимации и переходы — насколько они плавные, интуитивные и соответствуют общему стилю.
- Общие стилистические решения — цветовая гамма, иконки, иллюстрации.
Например, у меня есть коллекция примеров анонсных карточек товара. На скриншоте ниже видно насколько разными могут быть анонсные карточки в зависимости от задачи бизнеса, темы, потребностей пользователя, наличия контента и других факторов. Эти примеры помогают видеть разнообразие и понять, как дизайн работает в различных ситуациях.
Предлагаю рассмотреть представленные ниже скриншоты анонсных карточек взятых из разных интернет-магазинов. Несмотря на общую схожесть, у них есть существенные различия, связанные с контекстом и функциональным назначением. Например, расположение названий товаров и цен варьируется: в одних карточках заголовок размещён в верхней части, в других – в нижней. Это связано с визуальными акцентами и предполагаемым поведением пользователей: если название товара находится сверху, это привлекает внимание к бренду или типу продукта, так как взгляд покупателя естественным образом скользит сверху вниз. В то же время, для товаров, где важна визуальная составляющая, как, например, мебель или декор, название и цена перемещаются вниз, оставляя изображение в центре внимания. В некоторых случаях цена располагается рядом с кнопками «Купить», чтобы стимулировать действие. Таким образом, размещение текстовых элементов определяется стратегией привлечения внимания, особенностями категории товаров и ожидаемым поведением покупателей.
Вопросы для анализа:
- Что в этом элементе привлекло ваше внимание? Возможно, необычный цвет или форма?
- Почему это решение работает?
- Оно выделяет ключевую информацию или упрощает навигацию?
Как можно адаптировать это решение? - Можно ли этот элемент перенести в другой контекст, изменить или адаптировать для ваших задач?
Создание своей коллекции
Каждый дизайнер может завести свою цифровую библиотеку понравившихся решений. Для этого можноиспользовать такие инструменты, как Pinterest, Miro или Figma, где вы сможете удобно организовать иклассифицировать изображения. Кроме этого, вы можете хранить их на локальном компьютере или в облачном хранилище. В первую очередь инструмент для создания скриншотов экрана должен быть удобным и быстрым, чтобы не вызывать раздражения и не отнимать много времени.
Собранные примеры помогут вам преодолеть творческие застои, когда сложно придумать что-то новое. Просматривая свои коллекции, вы легко найдёте интересное решение, которое сможете частично адаптировать или полностью переработать под свою задачу. При этом помните, важно не копировать чужие проекты напрямую, а использовать их как отправную точку для создания уникального подхода к решению именно вашей задачи. Ниже я делюсь скриншотом своей коллекции, которую начал собирать в начале своего пути в качестве дизайнера.
Преимущества развитой насмотренности
В конце этого урока вы найдёте задание. Выполняйте его регулярно и через некоторое время вы ощутите результат. Вы заметите, как меняется ваше восприятие интерфейсов и насколько вдумчивей станет ваш подход к решению дизайн-задач.
Итак, давайте подведем итог к этому уроку и коротко резюмируем те преимущества, которые мы сможем получить благодаря развитию личной насмотренности:
- Вы станете понимать тренды и уметь подмечать нюансы в чужих дизайн-решениях, что поможет вам формировать собственный дизайнерский стиль.
- Просматривание дизайн-решений будет давать вам идеи, которые сможете использовать в собственной работе, сэкономив время на поиске новых подходов.
- Собственная коллекция удачных примеров позволит вам быстрее выходить из застоя идей во время перегрузок в работе.
- Сможете понимать то, что работает, аргументировать и защищать свои решения перед командой изаказчиками.
- Однажды вы перестанете собирать эту коллекцию, выработав свои принципы работы, но не перестанете анализировать чужие решения в рамках выполнения своей задачи.
Задание для самостоятельного развития
1. Сбор коллекции
В течение 2-3 дней выделяй по 30 минут для просмотра сайтов и интерфейсов на таких ресурсах из этого урока. Собери коллекцию хедеров и футеров (не менее 15 примеров), которые показались удачными и интересными. Сохрани их в удобном инструменте (например, в облачное хранилище или Figma).
2. Анализ
После завершения сбора коллекции, внимательно изучи её и ответь на вопросы:
- Какие элементы повторяются в хедерах и футерах?
- Какие из них оказались наиболее функциональными и эстетичными?
- Какие решения кажутся вам наиболее удачными и почему?
- Какие цели они помогают достигать — например, упрощают навигацию, привлекают внимание к важным элементам или делают интерфейс более целостным?
- Какую закономерность или принцип вы заметили в этих примерах? Как эти принципы помогают создать эффективные интерфейсы?
3. Рефлексия
Сформулируй выводы: что вы заметили и осознали в процессе анализа. Как эти наблюдения помогут при создании собственных дизайнов в будущем?
Статья обновляется по ссылке https://piktografika.ru
