emo - современный интернет, веб-разработка и графический дизайн глазами профессионала

21
03/2006

Дождались! Всех приглашаю на четвертую локальную феерию праздника Святого Редизайнера. Праздник этот – почитаемая во всем мире традиция, которая не имеет точной даты, но на вопрос «Когда же?» веб-дизайнеры задумчиво кивают головой и отвечают «Скоро!». А сами возвращаются к тяжким мыслям о миграции старого контента. Здесь я расскажу вам интересную историю о том, как это происходило со мной.

перейти к комментариям (7)

Цыплят по осени считают. А эволюции сознания дизайнера – по количеству редизайнов. Это такой проверенный народ метод. В частности, к редизайну творчески мыслящего индивидуума обычно побуждает 2 фактора: технологический прогресс и индивидуальный рост. То какой-нибудь веб 5.0 появится, а твое детище все еще основано на веб 2.0, то просветлишься сакральным знанием веб-дизайна и вдохновением других мастеров – и, вуа ля!, рука тянется к мышке, чтобы все порушить и создать город-сад на обломках старого.

Как закалялась сталь

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

Во-первых, я решил отказаться от идеи выдавать себя за оркестр, тем более что команда работавшая под вывеской Emo Design, давно расползлась и потеряла актуальность. Блог и сайт разработчика решено было объединить под основным доменом emo.com.ua.

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

Задание на редизайн было следующее:

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

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

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

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

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

Наконец, после 2-3 дней формирования концепции и проб пера, в недельный срок эскизы были готовы. Их я обычно рисую в Macromedia Fireworks 8 с редкими обращениями к Adobe Photoshop CS2. Жаль, что после слияния компаний, у Fireworks нету будущего – в целом он более подходит под нужды графического веб-дизайна.

Про верстку особо сказать не чего. Хотя некоторые приемы я использовал впервые, это была фактически обычная рутинная борьба с глюками IE. Большинство из проблемных участков, решались самыми короткими и эффективными хаками вроде _height: 0; и в результате чего, CSS не проходит валидацию. Впрочем, пока достаточно и валидного XHTML кода. Из аномалий удивил Firefox – особый спецэффект проявляется если в URI присутствует ссылка на существующий в разметке якорь. Детали упущу, оставлю интригу для желающих самим найти и покумекать над этим ребусом. Скажу только, что аномалия обнаруживается в FF версий 1.5.0.х, а в 1.0, по показаниям очевидцев, ее нету.

Вопросы выбора мотора

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

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

• Бесплатный и Open-source, но возможно и недорогой платный движок
• Основанный на PHP 4.x и MySQL 4.x .
• Надежный, гибкий и масштабируемый.
• Не перегруженный кривым кодом и лишним функционалом. Code is poetry.
• С поддержкой плагинов/экстеншинов/модулей для того, чего не хватает в дефолтном инсталле. И чтобы их было в изобилии. Я не жадный, просто люблю выбирать.
• С XML-подобным темплейтным движком, или если не XML, то, по крайней мере, логичным и несложным к изучению.
• С несложной, гибкой семантикой и ИА.
• Чтобы все как у людей – clean URL, кастомные поля, тэги и так далее.
• С приятной и удобной админ-панелью.
• Развивающийся проект, с хорошим продуктивным коммьюнити

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

Фактически, этот CM-движок должен одинаково хорошо справляться как с насущными вопросами блоггинга, так и с организацией страничного контента. Да и вообще быть легким, быстрым и сильным. Только не как заяц в известном анекдоте.

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

Ревизия выявила следующую картину доминант:

Wordpress, Movable Type, Textpattern, ExpressionEngine, MODx, Logahead, Symphony21, Mooflex, Bitflux, LifeType.

Такие движки как Wordpress и Movable Type представлять не нужно – качественно развивающиеся проекты, большие коммьюнити, горы плагинов на все случаи жизни.

ExpressionEngine

С ExpressionEngine я познакомился чуть больше полугода назад. Первой мыслью было – как я раньше не заметил этот великолепный продукт? Здесь вам в распоряжение и мультиблоговость, и любые разносолы с кастомными полями, и мощнейшая система темплейтов, и развитая система прав и управления пользователями, и возможность писать как небольшие куски кода (здесь они зовутся плагинами), так и модуля и расширения, способные перевернуть все с ног на голову. Все веб-стандартно, все близко блоггерам по идеологии. Плюсов очень много, из явных минусов отмечу – тяжелую админ-панель и недешевую стоимость (впрочем, в сети всегда можно найти пиратские версии последних релизов). Впрочем, существует бесплатная версия с ограниченным функционалом под названием Expression Engine Core, призванная заменить в строю устаревший PMachine движок.

MODx

MODx – довольно свежий и интересный проект. Его козырная карта – отсутствие четких границ об сфере применения. Все решает тип сайта, его контента и умение разработчика это все запрограммировать. Из всех перечисленных здесь движков – MODx самый гибкий и мощный, а также укомплектован идеологией веб 2.0 и Ajax-аттрибутикой. Эти достоинства несколько умаляются сложностями в постигании движка – это вам не с парой тэгов TXP разобраться! Но наградой будет удобный и мощный инструмент на все случаи жизни.

Logahead

Как только появился блог-движок Logahead, к нему моментально обратилось капризное внимании прогрессивной веб-дизайнерской общественности. Продукт написанный студентом, позиционирует себя как простой и чистый блог-движок с непритязательным функционалом, спрыснутый веб 2.0 и Ajax. Простота Logahead подкупает, и хотя для продвинутого блоггера продукт пока слабоват, будущее у него несомненно есть.

Symphony21

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

Mooflex

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

Bitflux

Немецкий продукт, написанный с использованием ОО и XSLT возможностей php5. Чем-то напоминает MODx. Довольно мощный, но сложный в изучении движок, нНа php-любителя.

Победителем становится…

В конечных размышлениях, я выбирал между Textpattern и Symphony21, которому тоже очень симпатизирую. В пользу 21-й Симфонии говорили гибкость в создании решений, продуманный интерфейс, растущее коммьюнити, да и желание попробовать что-нибудь новое и интересное было не последним мотивом. С другой стороны, TXP – это надежный и хорошо знакомый движок, с огромным числом пользователей и с огромным числом плагинов, которые позволяют обойти большинство ограничений и узких мест.

Но, все таки, давняя любовь к Textpattern победила, не смотря на его некоторые коварные недостатки. Настраивание TXP на нужный лад и функционал оказалось настоящим вызовом, особенно в плане времени – я планировал закончить все 1-2 дня, а потратил почти неделю.

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

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

Финальная строка

Очередной катаклизм пережит. Конечно, не все еще закончено, нужно дописать кой-какой контент, добавить портофолио, исправить мелкие недостатки – вы понимаете о чем я :)

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