Провёл я намедне обновление стилистической части своего скромного сайта и не только.
Зачем я этим заморочился, как я это провернул и на какие грабли наступил — расскажу вам вкратце.
Прежде всего, хочу признаться, что с графическим дизайном я плохо дружу. Давно понял, что это откровенно не моё… Хотя, возможно, сказывается недостаток опыта в этом направлении.
Мне бы хотелось чувствовать себя увереннее в этой нише, поэтому остаётся, перешагивая через страх, просто делать, когда это нужно. По факту, меня не интересует сам графический дизайн как отдельная дисциплина, но вот его роль в решении задач графического интерфейса (GUI), как подразделе пользовательского интерфейса (UX) как некоторой философии общения системы и человека — вот это уже любопытно.
Основной причиной всех этих излишних (если по-честному) телодвижений стала необходимость создания некоторого шаблона и единого формата подачи моих запланированных лекционных-кастов (подробностей я пока что раскрывать не буду — сначала перепрыгну, а «гоп» проговорим потом вместе). То есть мне нужно было просто оформить страницы-слайды. Вот я и подумал: а почему бы и не захватить при этом всё остальное и не вывести некоторый единый стиль подачи? При том, что я долгое время использовал невнятные заглушки везде, где только можно. Кроме этого, сама задача формулирования конкретного стиля и его практическое применение, считаю неплохой разминкой для извилин.
По сути, конечной целью должно было стать нечто близкое к понятию «фирменный стиль». Хотя мне не нравится такая аналогия, т.к. в случае оного главной целью является узнаваемость.
Я же хотел просто придать некоторый оттенок или вкус своим материалам. Чтобы звучало лаконично, звонко и в тон моему характеру. Близкое по духу, так сказать.
Сама идея и первые потуги вертелась давным-давно, ещё когда я только начал собирать этот сайт. Но быстро уткнувшись в полнейшее отсутствие вижена со своей стороны — я вскоре отказался от этих косметических наворотов и решил сконцентрироваться только на структуре сайта и функционале, использовав простую лаконичную цветовую и формфактор схему. (К слову, старая структура сохранилась, за небольшим исключением, и в текущей версии). Выглядело это как-то так:
Но вот совсем недавно меня кольнуло где-то в районе печени, и, не теряя времени, я быстренько собрал небольшую пачку референсов:
Этот небольшой набор позволил мне зафиксировать основные характерные черты желаемой эстетики, которые я собирался использовать:
- Лаконичность — малый набор цветов и их сочетаний. При этом соотношение цветов выстраиваем по классической схеме «главный — дополнительный — акценты»
- Гибкость — выбранные закономерности должны будут подходить для оформления холста практически любого формата (альбомный, книжный, круглый итд). Этот критерий связан с используемым в моем базовом дизайне сайта принципов адаптивной вёрстки — т.е. адаптация системы под разные разрешения и форматы экранов.
- Флэт — популярный нынче плоский подход к дизайну действительно хорошо работает, особенно в услових адаптивной вёрстки. Хотя в некоторых случаях я всё же буду делать лирические отступления в сторону художественности за счёт мелких вкраплений градиентов или цветовых переходов.
- Хаотичность — «панки грязи не боятся!». Хотелось привнести в общий стиль привкус простоты и поношенности, присущий моей любимой панк-культуре. i..i
- Физичность — потенциальная возможность реализовать некоторые реальные предметы, такие как визитка, значок или коробок спичек. Я очень люблю подобные мелочи и, возможно, закажу небольшую пачку значков для себя и друзей. Буду ходить и при встрече радовать клёвых людей приятными подарками. =^,….,^=
Затем, пройдя небольшую серию поисков, я собрал для себя вот такой вот файлик, с некоторыми базовыми сочетаниями элементов, чтобы всегда был под рукой:
Самое интересное в этом всём, наверное вот эта неведомая загогулина, вокруг которой всё вертится. Я не хочу сейчас её разъяснять, а наоборот — с удовольствием послушаю вашу реакцию и ассоциации. Скажу лишь, что по сути, это некоторый абстрактный символ, построенный на моих личных предпочтениях и характере (хотя в основе есть доля конкретики и отсылки имеют место быть). Цели создания бренда или культа «аля-Эпл», как я уже говорил, не стояло, но всё же… от того, что ЭТО со временем будет узнаваться — хуже не станет. (особенно в наше время переизбытка информации и контента)
Структурных изменений было немного, но они любопытные.
Во-первых, я полностью выпилил форму обратной связи и ссылку на печатную PDF-версию резюме. Я уверен, что крайне маловероятна ситуация, когда человек, пожелавший связаться со мной, даже при отсутствии какого-либо почтового клиента (в чём я сомневаюсь) не сможет этого сделать другими, куда более привычными ему способами. А эта олдовая форма слишком тяжеловесна и неудобна. С печатной версией резюме всё просто: в нашем деле они больше не имеют особого смысла — сейчас достаточно держать в адекватном состоянии свой LinkedIn профиль и до вас доберутся все, кому это надо. А в случае чего, распечатку можно вывести прямиком с него же.
А во-вторых, тоненький хедер (светлая полоска в верхней части) позволил мне перенести переключатель языка на более видное место, и, что куда важнее, указать оба языка одновременно (это как раз к вопросу GUI).
Из граблей — наверное самым узким местом оказались злобные соц. сети и прочие платформы. Проблема в том, что все они используют абсолютно разный подход к персонализации и оформлению профилей (кто-то использует симметричную структуру, кто-то асимметричные разновидности, а кто-то вообще скачет-туда сюда в разных адаптивных состояних под девайсы и экраны). В общем жуть жуткая. Я уже молчу про аватары и иконки, которые так же прописаны у всех по-разному (особенно вымораживают принудительные прямоугольные рамки и местами неадекватное отношение к png с альфой. Поубивал бы.). На удивление — меньше всего проблем возникло с молодой платформой ArtStation. Неплохая у них системка вышла в целом, хотя и имеются нюансы.
Ну и можно заметить, что даже сейчас на сейте имеются некоторые отступления от этого шаблона. Это означает лишь то, что я не собираюсь привязываться к нему и буду продолжать вносить изменения уже по ходу, как говорится, «на живом пациенте». Я очень люблю такой подход, когда ты не пытаешься сразу выдать идеальный конечный вариант, а пропуская через серию итераций, с каждым изменением приближаешься к нему. При этом на каждой шаге решение работает и выглядит более-менее законченным в целом (солидарно машем лапками в сторону славных ребят из Valve).
Что это значит? А это значит, что возможно завтра я проснусь и, в очередной раз, всё переделаю к чёртовой бабушке. =)