Pixel Art веб-дизайн

Что такое Pixel Art веб-дизайн?

Pixel art дизайн отсылает к консолям и домашним компьютерам конца 1980-х - начала 1990-х, когда разрешение экрана и количество цветов были жёстко ограничены. Каждую форму приходилось собирать из видимых квадратных пикселей, каждого персонажа рисовать как небольшую сетку плоских цветных блоков, а край каждой панели делать либо прямым углом, либо намеренной ступенчатой «зазубриной» вместо плавной кривой. Интерфейсы той эпохи читались в первую очередь как игровой HUD, а уже потом как программа: полоска здоровья, счётчик очков и диалоговое окно занимали на экране не меньше места, чем то, чем на самом деле управлял игрок.

В вебе стиль сохраняет это ограничение уже как эстетический выбор, а не техническое - жёсткие, неразмытые края (image-rendering выставлен в pixelated, а не smooth), массивные рамки вместо мягких теней, и UI-обвязка, сделанная так, будто она сама часть игры, а не рамка вокруг неё. Скан-линии, мигающий текстовый курсор и ступенчатые «срезанные» углы окон заменяют собой блюр и градиенты, которые обычно использует интерфейс более высокого разрешения.

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

Ключевые визуальные характеристики

• Жёсткие, неразмытые края у любой формы - квадратные пиксели вместо плавных кривых, за счёт image-rendering: pixelated вместо блюра или тени
• Ступенчатые, «срезанные» рамки окон у панелей и диалоговых окон вместо скруглённых углов - отсылка к зазубренным рамкам меню 8-битных игр
• Статус-бар как основной, а не второстепенный UI-элемент - показатели здоровья, счёта или уровня стоят на первом экране, а не спрятаны в настройках
• Параллакс-вьюпорт игры со слоями фона (небо, дальние холмы, передний ряд платформы) вместо одного плоского hero-изображения
• Массивные смещённые тени и толстые плоские рамки вместо блюра - в композиции нет размытия вообще
• Оверлей скан-линий и мигающий блочный курсор - прямые отсылки к CRT-экранам и текстовым окнам консолей

Цветовые характеристики

• Небольшая, намеренно ограниченная палитра вместо широкого диапазона градиентов - каждая поверхность читается как один плоский цветной блок, как в ограниченной палитре спрайта
• Тёмный фон-«экран» в паре с одним насыщенным основным цветом и одним контрастным акцентом - отсылка к цветовому кодированию здоровья/очков на консоли
• Акцентный цвет зарезервирован под интерактивные или «живые» элементы - сердца, монеты, активный слот инвентаря, - чтобы глаз читал их как игровое состояние, а не декор

Типографика

• Моноширинный шрифтовой стек вместо растрового консольного шрифта - без загрузки внешнего пиксельного фонта
• Жирное начертание и широкий трекинг по всему тексту, имитирующие угловатый вид растрового текста низкого разрешения
• Заглавные буквы в подписях HUD (название уровня, счёт, статус) - та же конвенция, которую консольные интерфейсы использовали, чтобы мелкий растровый текст оставался читаемым

UI-паттерны

• Статус-бар, объединяющий индикатор здоровья/жизней, название уровня или локации и счётчик очков или валюты в одной строке
• Hero-секция в виде игрового вьюпорта с параллакс-слоями неба и холмов, спрайтом на платформе и ступенчатыми угловыми скобками, обрамляющими сцену
• RPG-диалоговое окно с портретом, именем говорящего и мигающим курсором в конце текущей строки текста
• Подвал с D-pad и кнопками вместо основного призыва к действию, вместе с мигающей надписью «press start»