Дневник Alexey Blogoodf

+39.42
7 читателей, 5 постов

Информационный город на ВДНХ


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

Паттерн для фоновых изображений

Информационно-обучающий экран с тачэкраном

Информационный экран для записи на курсы с тачэкраном
Что же такое «Информационный город»? Если вы не посещали раньше данную выставку на ВДНХ, то вы многое пропустили. Так вот, это выставка, на которой представлены современные технологии в IT и диджитал индустрии: интеллектуальные системы, дополненная и виртуальная реальность, smart технологии, мобильные приложения и игры, квадрокоптеры, а так же многое другое.

План-схема павильона
В новом павильоне будут проходить лекции и обучающие курсы в различных областях и направлениях it и бизнеса, например Java скрипт или робототехника.

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

Простые правила для создания дизайна иконки


Недавно я прочитал статью Скотта Льюиса, который является профессиональным дизайнером иконок Iconfinder.com. Скотт получил степень в области графического дизайна в Университете Восточной Каролины и разрабатывает иконки более 25 лет.
Меня заинтересовали его советы по созданию иконки, а также его подход.

Три основных составляющих хорошего дизайна иконки

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

Форма

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


Эстетическое единство

Элементы, которые используются при создании одной иконки или наборе иконок, например закруглённые или острые углы определённых размеров (2, 4 или 8 пикселей), толщины линий (2 пикселя или 4 пикселя), стиля (flat, outline), цветовая гамма и т.д., должны быть едиными.
Таким образом, эстетическое единство представляет собой набор элементов дизайна, который повторяется во всем сете. Это видно в примере ниже.


Узнаваемость

Узнаваемость является главным критерием, это сущность иконки. Узнаваемость включает в себя те свойства, которые человек обычно ассоциирует с тем или иным объектом, с той или иной идеей, но так же может включать в себя что-то неожиданное – это и создаёт уникальность, например, недоведённая обводка и округлые блики.
3

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

Сетка

Всегда начинайте рисовать иконки в сетке. Я использую сетку 32x32 пикселя, при этом внешние два пикселя оставляю всегда пустыми. Цель этой зоны – создать свободное пространство вокруг иконки. Если вы делаете круглые иконки, то она должна затрагивать все четыре края, без выхода в зону свободного пространства, но порой, чтоб сохранить целостность иконки, какой-то элемент может выходить за пределы круга, как на картинке:

4

Стороны

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

6_1

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

Геометрические формы

Начните с простых геометрических форм. Даже если значок будет в конечном итоге более органичным, то всё равно начните с простых геометрических форм в Adobe Illustrator. Когда дело доходит до создания иконок, особенно маленьких размеров, то базовые геометрические формы сделают края более точными и позволят быстро регулировать относительный масштаб элементов.
7

Цифры: Края, линии, углы, кривые

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

УГЛЫ
В большинстве случаев необходимо придерживаться угла в 45 градусов или кратных ему. Сглаживание угла в 45 градусов не даёт появиться лишним пикселям, таким образом получаем чёткий результат с идеальной диагональю, создавая приятные и узнаваемые очертания для человеческого глаза. Эти очертания объединяют весь сет иконок, а так же создают единство в пределах одного значка. Если ваш дизайн заставляет нарушить правило угла в 45 градусов, то попробуйте сделать его равным 22,5 или 11,25 градусов, так как сглаживание будет более-менее ровными.
8

КРИВЫЕ
Это самые заметные области, которые могут ухудшить качество иконки. Благодаря им можно отличить профессионала от любителя. Так как человеческий глаз способен обнаруживать мелкие неточности, то рисование от руки не поможет вам достичь целей. Положитесь на инструменты, формы и цифры, чтобы создавать кривые.
9

ЗАКРУГЛЕНИЕ УГЛОВ
Радиус закругления углов составляет 2 пикселя. Для иконки 32x32 пикселя такой радиус вполне достаточен, чтобы угол был действительно закруглённым, и при этом не смягчает углы на столько, чтобы округлить дизайн до пузыря. Главное помните, что от выбора радиуса скругления будет зависеть дизайна самого значка.

СГЛАЖИВАНИЕ ПИКСЕЛЕЙ
Идеальное выравнивание пикселей имеет важное значение для дизайна иконок маленьких размеров. Сглаживание углов на таких иконках может сделать значок размытым и нечётким. Пространство между линиями, которое не приводится в соответствие с пиксельной сеткой будет сглаживаться и станет нечетким. Как упоминалось выше, 45 градусные углы и кратные им сглаживаются лучше.

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

ТОЛЩИНА ЛИНИИ
Вообще лучше всего использовать в одной иконке не более двух вариантов толщины линии, но иногда и три варианта просто необходимы. Ваше цель состоит в том, чтобы визуально обеспечить иерархию и разнообразие без разрушения целостности всего сета. Использование более чем трех толщин линий может разрушить структурированность и сплоченность. Что касается самой ширины линии, то лучше брать опять кратные двум и четырём пикселям, их легко масштабировать и делать ровные шаги. Старайтесь избегайте очень тонких линий, особенно в базовых значках и плоских иконках, но это правило не действует, если вы намеренно создаете иконки из тонких линий.
11

Используйте повторяющиеся элементы дизайна и акценты в сетах иконок

Например, Хеммо де Йонг известный голландский дизайнер во всех своих иконках использует повторяющийся элемент — острый угол.
13

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

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

Сделайте иконку уникальной

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

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

Сет иконок, которые были использованы на iconfinder и на shutterstock.



end

Сет из 88 аватарок профессий для CreativeMarket — первый товар



Наконец настал тот самый момент, появилось свободное время, которое было решено посвятить освоению Маркетов. Я собрал в кучу аватарки профессий, которые делал для Shutterstock и занялся их оформлением:
1) Инженеры, строители, рабочие
2) Пожарники и спасатели
3) Полицейские и военные
4) Пилоты и стюардессы
5) Шеф-повара и суши-повара
7) Доктора и фармацевты









Редактирование заняло пол дня точно, так как на каждой аватарке я переделывал тени в более реалистичные и плавные.



И когда все аватарки были выстроены в плотные ряды, я приступил к оформлению товара.



Подготовил главное «продающее» изображение



Разместил аватарки на нескольких мокапах для большей наглядности













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



После добавления этого товара, мне написали из креатива о том, что мой сет включён в This Week's Fresh Design Products: Vol. 22 (а значит была произведена рассылка всем-всем участникам креатива) — это и принесло основные просмотры, но на данный момент ни одной продажи ещё не было, увы.

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

Спасибо, и надеюсь на вашу помощь в продвижении моей работы с помощью лайков, пинов и реблогов)

Этот же сет я разместил на TheHungryJpeg
  • 5
  • 0
  • +5

Французский бульдожка в nanoline

Недавно делал логотип для кулинарного блога Underdog Chef. В качестве логотипа был выбран французский бульдог. Вдохновение пришло моментально и образ в голове пульсировал во всех красках. Я тут же приступил к работе. В качестве основного образа послужил мой пёс.



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



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



Следующий шаг — сделать логотип в векторе. Для этого я поместил бульдожку в иллюстратор (без трассировки), и начал обводить его инструментом Curvature Tool.





Вот что получилось после обводки.



А вот так выглядит финальный логотип.



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







Спасибо!

Дизайн паттернов: тренды 2016 года

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

ГЕНЕРАТИВНЫЙ ПАТТЕРН

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











ИНФОРМАЦИОННЫЕ ПАТТЕРНЫ

Бизнес продолжает придерживаться концепции «больше информации», тем самым визуализирует её (информацию) в паттернах, несмотря на тот факт, что с большим количеством информации в паттерне в будущем очень сложно производить изменения. Эти сложности касаются и адаптивного дизайна, так как необходимо продумать отображение информации в паттерне для разных размеров экрана. В идеи информационного паттерна придерживаются простых математических форм, совместно со всевозможными числовыми данными, графиками и прочим. Все силы брошены на простоту понимания. Многие компании благодаря информационным паттернам проявляют свою уникальность, используя абстрактные концепции. Всё это привело к появлению огромного количества сайтов, показывающих всевозможные формы информационных паттернов, которыми залюбуется даже ребёнок.







КРАФТОВЫЕ ПАТТЕРНЫ

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







АНИМАЦИОННЫЕ ПАТТЕРНЫ

Паттерны не просто сделать подвижными. Долгое время дизайнеры создавали анимированные gif для motion паттернов. Этот метод чаще всего используется в сочетании с SVG для создания больших циклов, то есть привлечение анимации в паттерны все еще актуально.







СЕТЧАТЫЕ ПАТТЕРНЫ

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