Пиксельная графика ATM-Direct

Саша, хотим стилизовать дизайн сайта ATM-Direct. Общее направление — пиксельная графика. Посмотри, что можно улучшить. Какие идеи?

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

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

У выделенных цветом элементов появляется особая важность и дополнительный смысл

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

Было

Стало

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

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

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

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

В сбалансированном дизайне сложно определить что дополняет, подпись — картинку или наоборот

Клин из ATM на схеме показывает готовность компании работать с сетями разного размера

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