Иконки – это контент


Содержание материала:

5 советов по грамотному использованию иконок в интерфейсе

Иконки. Они популярны. Они помогают дополнять контент (в большинстве случаев). Тем не менее, они могут доставить немало сложностей.

Даже после того, как вы определились с форматом (SVG или иконочный шрифт?) и создали нужный набор, могут возникнуть определённые вопросы.

Вот прекрасный пример:

Хитро, правда? Выравнивание иконок может быть довольно сложной задачей, особенно если иконки сделаны несколькими людьми. Признаться честно, я думал, что вопрос настолько легкий, что на него можно ответить одним твитом. Однако для идеального выравнивая иконок в тексте придется постараться.

К нашему счастью, есть пара универсальных советов, соблюдая которые, мы всегда будем знать, что наши иконки выровнены идеально.

1. Определитесь с форматом иконок

Есть и другие способы создания иконок помимо SVG, и многие из них уже устарели. Вот основные способы:

Вне зависимости от ваших предпочтений, выравнивание иконок сильно зависит от выбранного формата. Допустим, все ваши иконки занесены в один спрайт. Значит, у иконок фиксированный размер (если, конечно, вы не сделали их большими с целью дальнейшего уменьшения при помощи background-size ). В таком случае намного проще подобрать размер и line-height текста для выравнивания с иконками.

9 ноября в 10:00, Ульяновск, 500–1600 ₽

Преимущество SVG в том, что он масштабируемый, и вы уделяете больше времени CSS, а не дизайну.

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

2. Используйте иконки одинакового размера

Рассмотрим идеальную ситуацию: все иконки квадратные и одного размера, 100х100. Мы знаем размеры иконок, что существенно упрощает процесс выравнивания.

Мы также знаем, что так бывает далеко не всегда. Иконки могут занимать различное пространство.

Иконка карты уже иконки аватара, а та, в свою очередь, уже иконки корзины. Да, вы можете обрезать все пустое пространство вокруг иконок для экономии размера файла, но вы получите иконки разных размеров. Если мы работаем с SVG, это не проблема. А вот для растровой графики типа PNG такой расклад нежелателен. В SVG мы можем задать определенное пространство, которое будет занимать иконка без потери разрешения, а вот растровая графика будет растягиваться и искажаться, если не соблюдать разрешение.

Тут можно подогнать условия, в которых создаются иконки, к используемому формату. Если вы используете SVG, то сама иконка может быть любого размера, но постарайтесь не трогать размеры холста в Illustrator’е (или любом другом графическом редакторе). Так вы сможете в будущем масштабировать иконки.

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

3. Размер шрифта должен подходить к размеру иконок

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

Это не значит, что иконки обязательно должны быть размера 16px, если размер шрифта текста равен 16px. Важно понимать, что ваши иконки отлично дополняют текст, будь они чуть больше, одного размера или чуть меньше основного текста. Наглядная иллюстрация хорошо выравненных иконок и плохо выравненных иконок.

Несмотря на одинаковое выравнивание в обоих примерах, слева иконки намного лучше подходят под размер текста и лучше выравнены, чем справа.

4. Точно настраивайте внешний вид с помощью CSS

Есть один точный и простой способ выравнивания иконок в тексте:

В демке ниже заметна разница между идеально выравненными иконками и текстом и иконками, которые выравнены чуть хуже.

5. Используйте классы для отдельных иконок

Пример выше неплох, но вы могли заметить, что иконка местоположения уже других и расположена дальше от текста, чем иконка музыки. Это так раздражает! Тут нас выручит CSS, написанный специально под эту иконку.

Так намного лучше!

Заключение

Если и это не помогло точно выровнять иконки и текст, то вы не одиноки. Тут все сильно зависит от того, как вы создавали иконки. CSS – довольно простой способ.

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

Оформление списка HTML5 с использованием иконок WebFonts

Неупорядоченные списки HTML выглядят скучновато. Вы можете задать стрелочку, кружок или квадрат, но их размеры и цвета, не так просто изменить. Можно использовать list-style-image, чтобы задать картинку, но она не будет 100% совпадать с размером шрифта. Оформление списка является довольно сложной вещью, а также есть баги в старых версиях IE.

А теперь представьте себе, что, если бы мы могли использовать любой значок, в любом цвете вместо стандартного непронумерованного списка…?

Webfonts

Иконки Webfont – это векторная графика, представляющая собой иконки и символы в файлах шрифтов, которые могут быть загружены и использованы в HTML, CSS и JavaScript. Они могут масштабироваться до любого размера, предлагая превосходную совместимость с браузерами (поддержка IE6 +), а один шрифт, обычно загружается быстрее, чем несколько изображений.


Есть несколько онлайн-инструментов, которые помогут вам подобрать соответствующие значки, а затем упаковать их в файлы шрифтов с кросс-браузерной поддержкой. Мы использовали Fontello, но IcoMoon и Flaticon также в состоянии сделать подобную работу.

Замена WebFont Иконок

Во-первых, нам нужен стандартный HTML список. Мы добавим класс icon к ul тегу, а еще мы можем применить различные классы к каждому li тегу, чтобы задать различные значки:

Далее, мы установим list-style-type на none, чтобы удалить стандартное оформление списка. Затем мы установим негативный text-indent на каждый li для того, чтобы передвинуть первую линию каждого элемента списка обратно. Мы использовали 1.4em, но вы можете изменить этот размер по мере необходимости:

Чтобы добавить значок, мы используем один из наших наборов иконок в content свойстве li:before псевдо-элемента. Обратите внимание, что он float:left и его ширина соответствует text-indent устанавленного выше. Таким образом, это будет толкать первую строку обратно в исходное положение:

Топ-пост этого месяца:  Динамические креативы в Facebook что это и как сделать

Теперь мы можем установить различные иконки WebFont в зависимости от имени класса li, например:

Кроме того, можно настроить различные свойства color, font-size и расстояние. Значки будут появляться, где вы хотите и в соответствие с размером текста списка. Теперь, оформления непронумерованных списков явяются очень легкой и интересной задачей!

Ionicons

Видео: Ionicons

CSS код и примеры использования этого шрифта-иконок «Ionicons». Ниже Вы видите сам CSS код и таблицу с примерами классов, содержимого (content:»») и результат.

Шрифты-иконки Ionicons

Например, Вы можете добавить такие классы на странцу или сайт, а потом их легко использовать в HTML конструкциях

Как использовать шрифты-иконки?

Например, Вы можете использовать импорт CSS кода. Скачайте и разместите у себя на сервере файлы шрифта. Затем подключите их в любой из подключенных к нужной странице CSS файл. Код подключения доступен выше. После этого, Вы сможете писать следующий код, например:

Как видите, все очень просто. Именно поэтому мы создали данную страницу, чтобы Вы смогли увидеть сразу CSS код, html код и готовый результат, чтобы не использовать дополнительное ПО. Если Вы не хотите подгружать весь CSS код, то можете использовать лишь импорт шрифта и создавать свои классы.

Обратите внимание, что код был сокращен за счет использования
[ ; speak:none; font-style:normal;font-weight:normal; font-variant:normal; text-transform:none; text-rendering:auto; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale>
, вместо стандартного перечисления всех классов и убрано слово android – заменено на a. Это все, что редактировано нами из стандартной сборки.

Где скачать иконки для сайта?

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

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

Иконки используют по разным сценариям, в зависимости от задачи.

Вместо текста, когда для букв мало места или нет вовсе; когда вы знаете, что пользователь не будет читать текст и в случаях, когда надо выиграть время.

Для экономии места на экранах с низким разрешением, зачастую, в приложениях. Тут важно использовать недвусмысленные и понятные иконки, которые правильно передают идею.

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

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

Иконки в веб-дизайне: советы, ресурсы и примеры

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

Стили дизайна

Фраза «дизайн иконок» включает в себя широкий спектр идей. С одной стороны есть очень простые и минимальные иконки в плоском дизайнерском стиле. С другой стороны — это спектр полного реализма через цифровое программное обеспечение, как Photoshop или Illustrator. Каждый проект имеет различные графические потребности и значки должны соответствовать стилю и необходимости.Популярный минималистский стиль дизайна создал много дизайнеров -последователей по всему миру. Иконки Line стали основным стилем для прошивки 7 и 8 операционной системы для смартфонов.

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

Брендинг компании

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

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

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

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

Навигация и ссылки


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

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

Определение визуальной публикации

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

Самый удачный пример этого эффекта можно найти на странице сайта GitHub. Заголовок раздела использует GitHub в Octocat талисман создавая ощущение учебного процесса с помощью школьной доски в качестве фона. Когда вы прокрутите страницу вниз, то увидите, что каждый основной блок контента использует ряд иконок.Обратите внимание, что все иконки нарисованные, и все они прорисованы в одном стиле. Каждая иконка соединяется в целое и обеспечивает ощущение, что эти иконы были созданы в виде набора (и действительно были). Но что еще более важно, значки помогают определить содержание визуально. Текст достаточен, чтобы получить сообщение, а иконки просто помогут прояснить сообщение.

Топ-пост этого месяца:  Как получить идентификатор заказа woocommerce

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

Векторные фоны

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

Сайт Бота IUSTI предоставляет услуги по установке Office, он создан с помощью векторной графики. Преимуществом создания векторной графики является то, что ваш сайт всегда будет отлично смотреться в любом разрешении.

Учебники по дизайну

Лучший способ улучшить свой собственный дизайн иконок, пополнить набор навыков используя следующие электронные учебники. Там нет мгновенного рецепта для достижения любого уровня мастерства в чем-либо. Вам следует пробовать, экспериментировать, усердно трудиться, чтобы достичь результатов.Хотя дизайн иконок — это широкий спектр, мы собрали для вас небольшой набор учебников для начала работы. Посмотрите на эти примеры, выберите то, что вам по душе, чем раньше начнете, тем скорее получите результат.

Значения иконок Font Awesome для CSS

Детальная таблица значений иконочного шрифта Font Awesome

  • ГлавнаяНовости статьиCSS , HTML Список значений шрифта Awesome для использования в css

Список значений шрифта Awesome для использования в css

  • 4.3/5
  • 8 оценок
Очень плохо! Плохо Нормально Хорошо Очень хорошо!
0% 12.5% 12.5% 12.5% 62.5%

Приветствую. Наверное вы уже знаете о таком замечательном инструменте как иконочный шрифт от Font Awesome для сайта.

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

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

Перед тем как пользоваться иконками Font Awesome на своем сайте вам нужно их будет подключить, способов есть несколько, к примеру скачать и загрузить на свой сайт или сделать прямое подключение из сервера CDNJS.

Я не буду сейчас описывать детально как подключить иконки Awesome на свой сайт с загрузкой всех файлов, так как статья чуточку о другом, как это сделать вы можете найти самостоятельно в интернете, а для того что бы подключить их из ресурса CDNJS вам достаточно на сайт где то над добавить строку:

Размещение иконок на странице сайта. Делать проще, поддерживать легче

Все должно быть изложено так просто, как только возможно, но не проще.

Добрый день уважаемые разработчики. Довольно часто просматривая копаясь в чужом коде я наталкиваюсь на такое написание кода для кнопки с иконкой.

Это стандартная форма описания кнопки. Я сам долгое время примерно так писал свой код. Данное написание особо практикуется теми, кто использует готовые иконочные шрифты на подобии FontAwesome
Небольшие трудности возникают если текст должен быть по центру, а иконка несколько смещена относительно текста. Но всё это прекрасно решаемо через свойство position:absolute; задаваемое иконке. Также бывают проблемы с позиционированием данной иконки при адаптивности кнопки, но это другая история.

Теперь я хотел бы описать свой метод оформления иконок в тексте страници (на примере всё того же FontAwesome).

Преимущества такого описания.

1) Кода стало меньше. (Это существенно облегчит вам жизнь на масштабных проектах).

2) Код стал семантически более верным. Если div(или любой другой тег) функционально у Вас выполняет назначение кнопки, то и делайте его через тег button *Иначе возможны проблемы, особенно с Apple устройствами для которых придется прописывать type=«button» для вашего не правильного тега.


3) span размещенный внутри button всегда выравнивается по центру. (*Можно сменить ему display: если вам важны внутренне отступы).

4) Как вы могли заметить, вся суть моего оформления в том что я выношу изображение иконки через псевдо класс :before (:after) и позиционирую его абсолютно. При этом у его родителя span установлен position:relative; (! Важно, чтобы для иконки присваивался отдельный класс).

5) Иконка будет всегда на своем месте относительно span, даже если у вас предусмотрена смена языка, и скажем, в другом языке данное слово могло бы визуально перекрыть иконку.

6) Иконки, оформленные таким образом легко менять, особенно если вы используете препроцессоры (SASS, SCSS, LESS. ), просто добавь нужный класс к нужному элементу.

Недостатки такого описания: (а куда же без них).

1) При использовании тега button довольно часто приходится сбрасывать или переопределять стили, иначе выглядит не очень.

2) Для каждого родительского (span) допустимо одновременно отображать только две иконки, собственно на псевдокласс :before и :after.

3) Если вы, как и я, довольно часто в своих работах используете FontAwesome, вам чаще придется посещать их официальный сайт, что бы выучить Unicode каждой иконки

Это несколько сложнее чем просто прописать классы fa fa-bars. Здесь есть и полный список иконок

4) Поскольку я в написании своего CSS стараюсь придерживаться методологии, то у меня для родительского элемента может быть и довольно много классов

Но если вас не пугает 4-5 классов для элемента, тогда Welcome.

Как использовать Font Awesome в css-свойстве content?

Как поставить font-awesome через before? Хочу попробовать использовать иконки Font Awesome перед ссылками (и после них)

Знаю, что нельзя использовать HTML код в content , но есть ли возможность установить туда иконку?

Решения

Для FontAwesome 5

font-family может быть Font Awesome 5 Free или Font Awesome 5 Brands;

Метод для FontAwesome ниже 5 версии, например для FontAwesome 4.7.0

Для начала, найдите подходящую иконку, затем зайдите на страницу выбранной иконки и найдите её Unicode обозначение.
Например, http://fontawesome.io/icon/snowflake-o/ имеет Unicode: f2dc .
Затем, пропишите:

Код выше применит иконку ко всем ссылкам сайта. Чтобы иметь возможность поставить иконку конкретно на определённый сайт, можно пометить класс

Чтобы иметь возможность поставить отступ между иконкой и ссылкой, можно использовать свойство display:inline-block и padding-right
Также иконке можно задать свой цвет color: #F00; , и выровнять её на один уровень с текстом vertical-align: middle;

Также, можно менять иконку при наведении курсора на неё

Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

Круглые иконки, вкладки, схемы и ещё 89 приёмов для оформления контента на сайте

Мы посмотрели: 13 сайтов • 147 страниц • 617 элементов за 29 часов

Чем сложнее продукт, тем подробнее нужно рассказать о нём на сайте. Вот сравните. Для того чтобы продать свитер, достаточно выложить красивые фотографии. А чтобы заинтересовать людей ипотекой, придётся тщательно описать все условия: от процентной ставки до неустойки за просрочку. В итоге получится неслабая портянка с текстом, таблицами и графиками.

К подробному и длинному рассказу о продукте трудно поддерживать интерес в процессе чтения от начала до самого конца. Пользователь видит много сплошного текста и начинает грустить.

Как оформить контент для сайта, чтобы всё было понятно? Как обратить внимание на важные вещи? Как показать весь объём данных и не утомить прокруткой длинных страниц?

Ответ мы нашли в портфолио «AIC» (компании, которая заняла первое место в рейтинге креативных агентств). Ребята прошли испытание контентом для сайтов банков, финансовых брокеров и агрохолдингов. Мы взяли тринадцать лучших сайтов «AIC» и рассмотрели на них каждую страницу. Понравилось всё: от инструкции для новичков в интернет-трейдинге до графика урожайности кукурузного поля.

Посмотрите 89 фирменных приёмов «AIC» для работы с контентом на сайте.

Дизайн иконок в 2020 году: ключевые тенденции

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

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

Давайте взглянем на то, что нового, и горячего в дизайне иконок в 2020 году!


Дизайн иконок в линейном стиле

Иконки в линейном стиле кажутся тенденцией, которая никогда не стареет.

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

Это легко увидеть на примере выше. Каждую иконку легко увидеть и понять практически в любом размере.

Простые элементы и образы

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

Результат — довольно хитрый дизайн, который заставляет пользователей смотреть.

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

Иконки с градиентами

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

Это может быть именно то, что так привлекательно в использовании градиентов в иконках (и в целом) – есть так много разных способов использовать данный тренд. Вы можете добавить градиент и все равно иметь проект, который не похож на что-то еще.

Фокус на простой раскраске

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

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

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

Все в стиле приложений

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

Иконки в стиле приложения имеют собственный стиль. Это включает в себя:

  • Квадратная форма
  • Закругленные углы
  • Цветной фон (обычно один цвет)
  • Простая форма внутри иконки
  • Большой контраст между иконкой и цветом фона
  • Нет текста или надписи

Толстые, равномерные штрихи

Популярны не только иконки в линейном стиле, но и иконки с толстыми штрихами линий.

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

Иконки с толстыми равномерными штрихами чаще всего используются сами по себе, например иконка корзины или иконка контакта. Они не часто используются в коллекции иконок.

Плоские иконки остаются популярными

В то время как большая часть жесткого акцента на плоском дизайне испарилась, дизайн иконок по-прежнему довольно плоский (или, по крайней мере, почти плоский).

Вероятно, это связано с супер-простой природой плоского дизайна и идеей о том, что этот внешний вид может легко интегрироваться с рядом других стилей.

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

Иконки эмодзи

Эмодзи почти стали своим собственным языком — более визуальной формой общения, которая становится все более общепринятой.

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

Этот стиль иконок может отлично работать для страницы контактов или для представления людей или персонажей в дизайне.

Как создать хорошую иконку

Создание хорошей иконки или набора иконок — означает не просто обратить внимание на некоторые из последних тенденций в дизайне иконок. Из-за небольшого размера иконок внимание к деталям и точность являются важной частью процесса их создания и разработки.

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

  • Начните с сетки
  • Разрабатывайте с учетом геометрии
  • Создайте уникальную форму
  • Дайте иконкам много места
  • Придерживайтесь цветов вашего бренда
  • Создавайте дизайн для минимального размера, который вам нужен
  • Не декорируйте

Вывод

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

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

Всем успешной работы и творчества!

Добавить комментарий