Главная страница иконка: Иконка Главная страница в стиле iOS


29.04.2023 Facebook Twitter LinkedIn Google+ Разное


Главная значок картинки Иконка для бесплатной загрузки

Недавний:

смайлик скачать значок флаг социальные медиа телефон

pitr
@pitr


минималистская контур

Описание:

<p>Красный дом дома значок желтого начало pitr возвращение go</p> <p><em>Главная значок картинки</em></p>

Похожие изображения с iStock | Сохранить сейчас

Похожие бесплатные иконки

значок photoshop graphic значки

Books icon (PSD)

значки социальные значок социальный медиа иконы

Social Media Icon Set

iphone app icon app store значки

App Store iOS Icon

значки икона set glyph icon set

Feather Icon Set

икона set минимальный значки

Flat Icon Set

значок набор matijasundalic. com tags:flat

Flat Icon Set

web голубой темный

Indra — 80 free weather & activities icon

значок пользовательский интерфейс веб-сайт

Business Icon Set

главная страница дом здание

Home

главная страница здание домашняя страница

Home

главная страница здание домашняя страница

Home

главная страница здание домашняя страница

Home

главная страница здание домашняя страница

Home

главная страница здание домашняя страница

Home

главная страница здание домашняя страница

Home

главная страница здание домашняя страница

Home

главная страница здание домашняя страница

Home

главная страница здание домашняя страница

Home

Выберите Язык

English (US) Deutsch Español Français Italiano 日本語 한국어 Nederlands Polski Português Português (Brasil) Русский Svenska Türkçe 中文(简体) 中文(繁体)

Сообщить об ошибке

×

Как уйти от банальных метафор в иконках

На сайтах иконки используются как дополнительный арт-объект, чтобы избавиться от пустоты. Они превратились в визуальный мусор. Попробуем добавить в них немного смысла и привлечь к ним внимание.

Речь опять пойдет о метафорах, поэтому советуем прочитать первую часть — так будет интереснее. В этот раз сосредоточимся на иконках. Мы в Далее условно их делим на интерфейсные и акцентирующие внимание.

Интерфейсные иконки

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

Как писал Джон Сатио в статье Making up metaphors, чтобы поменять настройки, пользователь будет искать шестеренку, а для поиска – лупу. Такой образ должен считываться сразу, без пояснений. Если дизайнер попытается создать новый образ для настроек или поиска, он будет не очевиден для пользователя и отдалит его от цели.

Если переложить метафору на текст, то любая иконка — это простое предложение, в котором есть только существительное, глагол и реже — дополнение. Отправить файл по почте, например. Совмещаем силуэты для этих двух слов и получаем иконку со стрелкой.


Лучше не использовать непонятные свойства в иконках. Возьмем иконку Эйрдропа. Кружочки вокруг треугольника означают беспроводную связь, но пользователю не важно, как мы передаем этот файл. Главное, само действие, а детали нас волнуют во вторую очередь.

Чтобы найти иконку, воспользуйтесь поиском по ключевым словам на thenounproject.com или по изображениям в Гугле.

Акцентирующие внимание иконки

Иконки — это такой же инструмент управления вниманием, как типографика, изображения и микроанимации. Если вы хотите привлечь внимание читателя, нужно обходиться минимумом визуальных средств и не использовать скучные интерфейсные иконки.

Чтобы украсить страницу, иконки добавляют везде. Ими выделяют любой короткий текст на странице: блок с преимуществами, блок «как мы работаем», какие-то ключевые цифры. Везде иконки, поэтому блок ничем не отличается от остальных? Добавим цветную плашку под текст!

Успокойте страницу: грамотно подобранные цифры привлекут внимание без иконок, а процесс работы можно проиллюстрировать фотографиями, полезными материалами или ссылками. Старайтесь привлечь внимание иконками только к одному блоку на странице.

При этом иконки должны быть яркими и большими. Можно взять за основу интерфейсные иконки, добавить к ним цвет и придумать более интересную метафору к глаголу или существительному.

Акцентирующие внимание иконки — это такие миниатюрные иллюстрации. У них сохраняется структура предложения, как у интерфейсных иконок, но они не обязательно должны быть понятными с первого взгляда. Их главная задача — привлечь внимание.

Придерживайтесь единой стилистики иконок. Например, для сайта о финансовой культуре мы делали многие изображения словно от руки, в небрежной манере. Иконки повторяют эту стилистику.

Некоторые элементы становятся настолько узнаваемыми, что к ним не нужно придумывать метафоры. Зачем рисовать мешок с золотом для изображения денег, если монеты с символом рубля достаточно?

Иконки с персонажами

Если хочется добавить жизни в иконки, не останавливаясь на аналогиях, создайте героя — вымышленного амбассадора бренда или продукта. Откройте свою базу интерфейсных иконок и вместе с редактором придумайте персонажа, которого вы будете транслировать во всех коммуникациях, визуальных и текстовых.

Можно создать персонажа бренда и моделировать с ним разные ситуации. При создании персонажа, можно отталкиваться от нескольких факторов.

Цель. Какой эффект должен производить персонаж? Можно сделать интерфейс более дружелюбным и менее официальным, добавив мультяшных персонажей. С их помощью можно создавать разные метафоры и настроение. Эти персонажи не обязательно должны быть связаны с продукцией бренда, главное, чтобы они запоминались и присутствовали не в одном блоке, а в разных разделах сайта.

Персонажи могут быть и серьезными, собранные из геометрических форм или изображенные на линейных иллюстрациях.

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

Фирменный стиль. Построить логику можно исходя из набора графических элементов бренда. Для промостраниц новой линейки шампуней Le Petit Marseillais мы использовали персонажа на логотипе — мальчика в тельняшке. Можно создать дополнительных персонажей в том же стиле, которые будут ассоциироваться с брендом: девочку в тельняшке, собаку. Поскольку продукция связана с ароматами Прованса, ассоциации с Францией гармонично дополнят дизайн страницы. Все эти элементы складываются в единую историю запоминающийся персонаж может использоваться и в иллюстрации, и в анимации.

Если у бренда уже есть запоминающийся персонаж, для иконок можно использовать деталь, которая будет ассоциироваться с ним на уровне метонимии. Например, нос клоуна для McDonalds или уши Микки Мауса для Disney.

В итоге

  1. Соберите в таблицу иконки действий, универсальные иконки и базовые силуэты предметов по тематике своего бренда;
  2. Комбинируйте действия с предметами и получайте узнаваемые интерфейсные иконки;
  3. Создайте базу для действий и предметов в ваших иконках, добавьте цветовую кодировку и объедините иконки в одну дизайн-систему;
  4. Придумайте персонажа бренда в таблицу и придумайте с ним иконки;
  5. Обходитесь минимальными средствами, чтобы расставить приоритеты на странице.
Comments