Блог студии 77

Хороший дизайн

16 мая 2013

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

Вдохновение

В первый раз мои убеждения о прекрасном пошатнулись, когда я случайно попал на сайт Templatemonster – здесь всего за 30–50$ можно было купить один из тысяч шикарных, профессиональных дизайнов, а вдохновляться ими можно было совершенно бесплатно! За бессонную неделю я накачал более 60 мегабайт понравившихся скриншотов дизайнов, и будущее казалось безоблачным, осталось дождаться первых клиентов подходящей тематики и повторить для них пару-тройку припасенных идей.

Пример шаблона с сайта Templatemonster

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

Через пару лет я открыл для себя Студию Лебедева и «Ководство». Меня поразила идейность, с которой они подходили к своим работам. Казалось, дизайнеры Студии совершенно не зацикливались на красивых картинках и удобных интерфейсах, они просто у них были, как само собой разумеющееся. Их внимание было сконцентрировано на интересных метафорах, красивых, аккуратно оформленных текстах, неожиданных фишках. На лежащей где-то глубоко странице сайта запросто могла оказаться огромная сочная иллюстрация, а на странице 404й ошибки – flash-игра. Сайты, тематика которых никогда не интересовала, можно было разглядывать и изучать часами.

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

Пример макета с сайта Free-lance

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

Проектирование

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

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

Контент

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

К нам обратились представители городской еврейской общины с целью – разработать информационный проект на соответствующую тематику. Наша задача усложнялась тем, что на момент начала работ клиентом практически не было предоставлено какой-либо информации, а наших собственных знаний о еврейских календарях, праздниках, и прочих особенностях было явно недостаточно. Даже сейчас, когда, казалось бы, интернет повсюду, и у каждой второй организации есть собственный сайт, попадаются тематики, очень слабо представленные в сети. Это – одна из них. Собирая крупицы материалов в сети, проектирование сводилось, фактически, к предположениям и догадкам – что должно быть, в каком виде, что важно, что с чем и как будет взаимодействовать?

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

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

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

Основная мысль из всего этого: дизайн обязан учитывать задачи проекта, дизайнер должен четко понимать, что и как будет работать, сколько будет информации и в каком виде. Дизайн – это не только красивые «шапка» и меню – осознанное оформление информации часто требует к себе большего внимания дизайнера. Поэтому я не люблю Templatemonsters, поэтому я больше не посещаю Free-lance.ru. Поэтому мне нравится Студия Лебедева.

Хороший дизайн
  • Денис
  • арт-директор
  • 25 статей

Другие статьи автора: