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

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

Одним словом, я всегда старался делать что-то современное.)

Вот, к примеру, мой первый блог. Блог иллюстратора, рисующего в «иллюстраторе» (хотя это я рисовал, по-моему, в Macromedia Flash MX).)

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

А вот мой сайт в период, когда я вышел на тропу фильммейкинга и всевозможной кинодвижухи (или мне это так казалось). Теперь это, скорее, не сайт, а персональная страница инфобизнесмена по продаже своих услуг с прикрученным блогом для повышения конверсии и виральности.) Жаль вы уже не увидите какое замороченное у меня было там портфолио и страница «ОБО МНЕ».

Здесь я нашел тот шрифт, который меня по-настоящему зацепил и который использую в своих работах до сих пор (Gotham Pro). Из ключевых элементов дизайна — коше сверху и снизу, явно намекающее на принадлежность к видеопродашену. Еле заметные ссылки на соц.сети справа внизу также показывают, что они теперь здесь не главные. Главное — мое имя и кнопка воспроизведения шоурила. Хотя, честно признаться, кнопку можно было сделать и побольше, как, например, в новом дизайне.)

Хоть кнопка и большая (около четверти высоты экрана), с рилом мне пока нет времени разбираться. Я даже не уверен, что он мне сейчас нужен. На нее я повесил заглушку. А вот на все остальное можно повесить ярлык DONE.

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

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

У меня нет профессионального дизайнерского образования, поэтому я мог нарушить все устоявшиеся каноны чувства прекрасного. Просто искал новые формы. Если вы вдруг из какой-нибудь авторитетной «британки» или NABA, с радостью в комментах послушаю вас о том, как бы поработали с таким материалом.)

Я знаю как многие веб-дизайнеры обожают всякие сеточки, гайды и построенные по ним макеты. Но в этот раз я бунтую против системы в угоду личным вкусам и предпочтениям. Моя верстка — это нарисованная картина. Здесь, как нам говорили в художке, если приложить линейку, ничего не должно совпадать.)

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

Свет, цвет и композиция — вот мои три настоящие опорные точки. И если на первое я никак не могу повлиять, ведь фото уже выбрано, то вопрос с цветами я решил довольно просто.)

Если копнуть в историю, отправной точкой была аватарка, которую я везде использую в данный момент.)

Я просто решил взять за основу оттенки зеленого, синего и 50 оттенков серого за исключением бесполезных 47-ми, что были на ней, и организовать «цветоделение» сайта по такому же принципу. Желтый затесался случайно (надпись на футболке помогла), но стал очень удачно дополнять различные сборки и создавать необходимые акценты, поэтому был принят в мою команду.

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

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

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

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

Кстати о привлечении внимания.

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

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

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

Вот, собственно, и все, на что меня хватило при редизайне главной страницы.

Вдобавок немножко расскажу о логотипе.

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

Шло время. И в момент, когда стало понятно, что ватермарки на моих работах практически не читабельны, а ставил их я тогда везде, пришлось начать думать над более простым логотипом.

Версия 16-го года получилась то, что надо. Не напрягает, плоская (тогда я очень любил флэт-дизайн), хорошо выглядит инвертнутой на темном фоне, несет в себе какой-то смысл (i в негативном пространстве и k — мои инициалы, точка у i — напоминает пиксель, а кольцо объединяет это все в один шейп для удобства внедрения на различные носители).

Снова шло время. И вот наступил один из вечеров пандемии 2021 года. Я в очередной раз вспомнил о закрытом несколько лет назад блоге, глянул на логотип и он меня начал почему-то очень сильно раздражать. Я б сказал даже бесить.) Стал чувствовать, что округлости в нем вообще ни к чему. Круг как символ спокойствия, бесконечности, цикличности во время, когда почти весь мир в неопределенности, частичном хаосе и запредельной тревожности ну никак не вписывался в мой будущий патч. Не чувствовалась динамика в нем. Просто оставленная кем-то унылая печать. Еще и это вытянутое подобие пикселя, толкало на мысль, что человек-создатель не очень то и заморачивался. В общем, я стал ненавидеть текущий логотип и перешел на темную сторону.)

Перешел на темную сторону и это стало проблемой.)

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

Вот еще история про логотип и про то, как концентрация на чем-то одном долгое время может привести к деформации восприятия.

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

А теперь вопрос: что бы вы почувствовали на моем месте, если бы увидели это?)

А если в течении нескольких дней встретили бы в интернете с пол дюжины похожих логотипов?)

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

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

Кстати о масштабировании.

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

Если на вашем замечательном смартфоне вдруг что-то как-то некорректно отображается, без паники. Просто я в очередной раз хочу доказать всем, какой все-таки из меня оригинальный дизайнер.)

А если серьезно, пишите мне баг-репорт в любом возможном для вас виде — буду разбираться.

И в заключении этого мини-отчета о проделанной работе расскажу немного о планах на будущее.

С дизайном блога «косящем» под профессиональный, приходит и большая ответственность по его содержанию. Но вы не беспокойтесь, я человек безответственный.) Единственное чего постараюсь придерживаться, так это не вести пенсионерский блог а-ля смотрите какой я, что я делаю и где я бываю. Пока нахожусь в здравом уме, хочется принести побольше пользы от его чтения.

Если заметили, в меню на главной есть такие пункты как «TECH» и «no TECH«.

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

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

Я всё.

Если хотите почитать об этом мини-проекте по воскрешению блога в красивом оформленном виде, заходите на мой Behance, я вас там жду с нетерпением. )