Насмотренность для дизайнера интерфейсов: как её развить и почему это важно

Для наглядности давайте рассмотрим два примера, которые ярко иллюстрируют, как дизайн может быть адаптирован под разные задачи и аудитории. Первый пример — сайт Nixon, который посвящен продаже часов. Его стиль можно охарактеризовать как минималистичный и утончённый. Нейтральная цветовая палитра, включающая бежевый фон и чёрный текст, создают ощущение премиальности. Здесь внимание сосредоточено на продукте: крупные изображения часов и лаконичный слоган говорят сами за себя. Простая типографика усиливает этот эффект, делая текст понятным и легко воспринимаемым.

Второй пример — сайт Burek, посвященный фастфуду. Его стиль абсолютно противоположен: яркий, динамичный и эмоциональный. Оранжевый фон и насыщенные цвета ингредиентов, таких как зелёный салат и нарезанные ломтики красного помидора, мгновенно привлекают внимание. Элементы дизайна, такие как «летающая» еда, создают ощущение движения, энергии и веселья. Типографика проста и дружелюбна, делая акцент на бренде и ключевых элементах интерфейса, например на таких, как кнопка доставки. Этот сайт сразу вызывает аппетит.

Эти примеры демонстрируют, как важна насмотренность для дизайнера. Анализируя такие сайты, можно заметить, как стиль, цвета и композиция решают разные задачи. Nixon создает ощущение утончённости и высокого качества, тогда как Burek вызывает эмоциональную вовлеченность и желание утолить голод. Насмотренность помогает дизайнеру понимать, какие решения работают в том или ином контексте, адаптировать идеи под свои задачи и находить баланс между функциональностью и визуальной привлекательностью. Таким образом, умение анализировать и черпать вдохновение из разных источников позволяет дизайнерам создавать уникальные и эффективные проекты, которые соответствуют ожиданиям аудитории и целям компании.

Эти ресурсы демонстрируют разнообразие стилей, подходов и решений. Вы увидите, как дизайнеры создают целостные концепции, подходящие для разных контекстов: от минималистичных магазинов до сложных корпоративных порталов.

Важно не просто просматривать примеры, но и фиксировать те элементы, которые особенно понравились. Это могут быть:

• Ссылки и кнопки — их форма, цвет и анимация.
• Заголовки и шрифты — как подчеркивается иерархия и текстовый контент.
• Карточки товаров — оформление и структура, с учётом контекста и задач бизнеса.
• Анимации — насколько они плавные, интуитивные и соответствуют общему стилю.
• Общие стилистические и композиционные решения — цветовая гамма, иконки, иллюстрации.

Например, у меня есть собственная коллекция примеров анонсных карточек товара. На скриншоте ниже видно насколько разными могут быть эти карточки в зависимости от задачи бизнеса, темы, потребностей пользователя, наличия контента и других факторов. Подобные коллекции помогут вам увидеть «разнообразие» и понять, как дизайн работает в различных ситуациях.

Предлагаю рассмотреть представленные ниже скриншоты анонсных карточек взятых из разных интернет-магазинов. Несмотря на общую схожесть, у них есть существенные различия, связанные с контекстом и функциональным назначением. Например, расположение названий товаров и цен варьируется: в одних карточках заголовок размещён в верхней части, в других – в нижней. Это связано с визуальными акцентами и предполагаемым поведением пользователей: если название товара находится сверху, это привлекает внимание к бренду или типу продукта, так как взгляд покупателя естественным образом скользит сверху вниз. В то же время, для товаров, где важна визуальная составляющая, как, например, мебель или декор, название и цена перемещаются вниз, оставляя изображение в центре внимания. В некоторых случаях цена располагается рядом с кнопками «Купить», чтобы стимулировать действие. Таким образом, размещение текстовых элементов определяется стратегией привлечения внимания, особенностями категории товаров и ожидаемым поведением покупателей.

Каждый дизайнер может завести свою цифровую библиотеку понравившихся решений. Для этого можно
использовать такие инструменты, как Pinterest, Miro или Figma, где вы сможете удобно организовать и
классифицировать изображения. Кроме этого, вы можете хранить их на локальном компьютере или в облачном хранилище. В первую очередь инструмент для создания скриншотов экрана должен быть удобным и быстрым, чтобы не вызывать раздражения и не отнимать много времени.

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