Горизонтальная сетка в вебе

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

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

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

/ Подробное описание проекта Espontaneo Magazine скоро появится в моём портфолио.

Как человек, не только везде продирающийся через рекламу всех мастей, но и каждый день добавляющий к её морю еще по чуть-чуть, я крайне критично отношусь к намеренному продвижению чего бы то ни было. И тем не менее, у меня существует сильная привязанность к некоторым образам или рекламным роликам. Об этом я ещё напишу подробнее (привет Кейс Поллард, Синему Муравью и Гэбриел Хаундс), а сейчас могу показать ролик кампании Go Forth от Levi’s и отдельно указать на волну, набегающую на камень в самом конце. Для меня эта секунда с волной, облизывающей валун, как-то превратилась в квинтэссенцию тоски офисного работника по путешествиям. Каждый раз, когда я вырываюсь на открытое пространство вдалеке от города, на меня накатывает эта волна и я вспоминаю ролик.
 
Странно, что до сих пор я не побежал покупать джинсы Ливайс, ведь даже сама Кейс, с её аллергией на бренды, носит 501-ю модель. Но об этом позже, а пока обратите внимание, как ролик в очередной раз отозвался во мне. Похоже, на одной фотографии мне наконец удалось запечатлеть тот самый ракурс.




Ещё в прошлой жизни мне придумалась фраза «No face behind the mask», я даже логотип к ней придумал. Не знаю, почему фраза так и не забылась до недавней белой петербургской ночи, когда я в очередной раз гулял по набережной и увидел разодранную рекламную будку с порванными листами баннеров и с всем нутром наружу — палки ламп дневного света, трансформаторы, крутящий механизм. Чувствую, что удивил не одного туриста из толпы, запечатлевающей разведённые мосты, зато теперь у меня серия фотографий с галогеновыми внутренностями. Вид будки и вызвал в памяти ту самую фразу о том, что за обложкой может и не быть реального содержания, и я понял, что это мой шанс возродить ту древнюю картинку, которая была нарисована в 2007-м.

NO FACE BEHIND THE MASK

Я решил использовать эти фотографии как тестовый контент для моих очередных экспериментов с модульной сеткой. На этот раз я пытался сделать варианты обложек журналов — странных немейнстримовых стилей оформления и содержания. Пример композиций, построенных по сетке пропорций 9×16 — с одной стороны, удачное продолжение геометрии логотипа NIketo — 1×4×9 — в четвёртое измерение, и с другой — таковы пропорции экранов Full HD, что оказалось весьма удачным совпадением. Не зря я люблю простые пропорции, всё-таки!


/ В работах использованы гарнитуры Anonymous Pro, Bebas Neue, Big Caslon, Helvetica Neue, Times New Roman.

NIKETO IDENTITY

О том, как появился мой персональный логотип (или даже бренд), можно рассказывать очень долго, а можно совсем кратко. Niketo (читается как Никéто) — результат моих привязанностей к трем вещам — научной фантастике, математике и дизайну. С детства я зачитывался любой фантастикой, что находил — даже в гостях я уходил от шумных компаний в комнату с книжными полками, и сидел в тишине, читая хоть что-то, что описывало космические приключения или другие фантастические коллизии. Или, например, я многие годы помнил и искал два романа, начатые в электричке лет двадцать назад и законченные многими годами позже — это были «Город на краю света» Гамильтона и «Город и Звёзды» Кларка.

 

В те времена родители выписывали для меня журнал «Техника — молодёжи», где печатали по главам самые известные романы. Тогда я и прочитал «2001: Космическая Одиссея», и Монолит меня заворожил загадочным происхождением, гениальностью пропорций и своей ролью в эволюции человечества. Для меня он стал символом всего необъяснимого, недоступного для Человека на текущем этапе нашего развития, атрибутом Вселенной, гораздо более населённой и еще более впечатляющей, чем мы сейчас способны воспринимать.

Пропорции Монолита — 1×4×9, квадраты трех первых целых чисел — элементарны, идеально выверены и банальны в лучшем смысле. Идея создать средство связи с другими цивилизациями и указать на его искусственное происхождение таким элегантным, очевидным способом, заслуживает отдельного поклонения, в чём я, видимо, замечен.

 

В момент, когда я решил собрать портфолио, чтобы найти работу, тяга к простоте во всем привела меня к мысли, что мой логотип должен быть настолько простым, насколько это возможно. При этом он должен выражать моё стремление к идеально выверенным пропорциям и композициям, нести интеллектуальный заряд, доступный очень узкому кругу лиц, а то и вообще мне одному, и всё-таки давать подсказку непосвящённому зрителю, какое отношение имеет логотип к названию Niketo. В итоге получилась форма с пропорциями 4×9 единиц, рассечённая линией толщиной в единицу так, чтобы в контрформе получилась буква «N».

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

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

Железо и небо

Давно уже никому не нужный блокпост над бухтой Балаклавы, рядом с еще более древним надзором в разрушенной крепости Чембало.

Ветер играет на ржавых проводах.

Бетон, железо и небо.

С большой высоты море кажется наждачкой, еще чуть — и кораблик сотрется.

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