Ох уж эти иконки, с ними всегда куча проблем. То рисовать долго, то просто не получается, а при скачивании сложно найти набор нужных иконок в одном стиле и вообще в целом подходящие. "Что мне делать?"
1-ое правило - Иконки должны отражать суть. Если ваша иконка не помогает понять смысл, то она вообще не нужна. Поэтому если это поле поиска, то подходит лупа. Вы можете креативить и размещать на месте лупы собак ищеек, но на вашем интерфейсе это отразится плохо. Пользователю ваша логика не очевидна. Дизайн должен быть простым и понятным всем. Поэтому старайтесь не искать сложные пути, а мыслить проще.
2-ое правило - Иконки должны быть в одном стиле. Если вы выбрали однопиксельный контур, значит все иконки должны быть такими. Это сделает ваш дизайн более стильным и упрощенным. "Красота — это повтор. Красота — это когда есть ровный, предсказуемый ритм."
Если глаз замылился и вы уже не можете отличить хорошо у вас получилось или нет, дайте себе день на отдых (займитесь другими рабочими моментами), а после посмотрите на свой дизайн и спросите "хочу ли я с ним взаимодействовать?"
Важно чтобы иконки приносили пользу, а не вред. Если они будут слишком яркие и большие, но при этом не нести смысловой загруженности, то это будет отвлекать от текста и выглядеть агрессивно.
На картинке первые созданные иконки. Как вы можете заметить они особенно не изменились. Сегодня мы сделали их более утонченными, для того чтобы они не выглядели такими яростными. Но в 1981 году выбора не было, нужно как то выделять иконки на таком шумящем фоне, к тому же госпожа Графика, была не на том уровне, так что простительно.
Почему кроме небольших стилистических изменений всё осталось как раньше? Пользователь уже получил опыт именно с этими иконками, они понятны и мгновенно распознаются. Вы привыкли, что яблоко круглое, если вам дадут квадратное, то первой реакцией будет сомнение "что это?".
Все циклично, особенно мода. Вы можете это увидеть на примере иконок 1985. Стиль которым мы так любим и сейчас. Дизайн "8бит".
darknet.lenta.ru
Пример сайта в стиле 8 БИТ
Минусы очевидны, неудобно, не красиво, агрессивно, рваные углы, ощущение беспокойства.
Плюсы - настолько сильно влияет на запоминаемость, что можно поступиться всем остальным, т.к кол-во контента ограничено, и большие тексты пользователю читать не придется. Так же найдется процент пользователей, которым наоборот будет комфортно с такой подачей (это я про себя, ибо достали глянцевые подачи, как на счет треша).
Сейчас модно, но рисовать довольно энергозатратно, если есть желание создать тематический сайт и вложить большое количество сил на отрисовку всех элементов, то вариант прикольный.
В общем все эти пиксельные времена длились довольно долго, настолько долго, что мы сейчас даже видим в них что-то красивое. Благо настали 2000-е.
Первое что бросается в глаза, это много-много градиентов и цветов, все такое объемное. В общем хотите сделать не крутые и устаревшие иконки нагромождайте их цветами и объемами, 2000-е оценят.
Я иду огромными шагами, вся эта феерия цвета длилась достаточно долго, цвета постепенно становились мягче, иконки сглаживались, эффект отражения постепенно становился незаметнее.
К чему мы пришли? Обратимся к Apple:
Итак, иконки очень простые и понятные. Нарисовать такие под силу и начинающему дизайнеру. Они в очень сдержанном стиле и соблюдают заданную толщину. Вы это заметили потому что и один ipad в иконке и четыре обладают одинаковой толщиной линий. Иконки не тонкие, хорошо читаются.
Пропорции гаджетов соответствуют реальности. Это важно не только для иконок , но и для любого графического элемента. Соблюдение реальных пропорций по отношению друг к другу - это правильно.
Чтобы нарисовать такие иконки достаточно стилизовать реальные гаджеты.
Google придерживается другого стиля. При этом иконки простые, это определенно минимализм. Цвета далеки от ядовитых, ближе к спокойным, несмотря на высокую цветность. Нет градиентов - плоский дизайн. Каждая иконка похожа на мини-лого. Выглядит чудно.
Яндекс использует обе разновидности, для обозначения значимости. Продукты яндекса изображены яркими прорисованными иконками. Внутри же этих сервисов иконки тонкие и одноцветные.
Как вы заметили, на примерах нет сложных иконок, в ваших руках нарисовать такие же самостоятельно. Выберите хороший пример или найдите подходящую контурную иконку, а после обведите её или задайте нужную толщину. Как это сделать описано в уроке Иконки. Сервисы для поиска иконок прикреплены внутри ссылки.
Рисуйте иконки в большом размере и векторные, чтобы они не теряли качество в будущем.
Оценить
