Исходные данные
Зеленый чемодан создавался как личный дневник путешествий по разным странам. Родившись еще в конце 2000 года на narod.ru, в 2004 году дорос до домена второго уровня. Тогда к рассказам об отдыхе добавились описания стран и полезные советы отправляющимся в путешествия.

Так выглядело большинство страниц сайта в период с 2004 по 2007 год включительно.

Работа над ошибками
Преимущество редизайна над созданием сайта «с нуля» в том, что недостатки сайта, как правило уже известны.

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

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

Затем снять с символов типографики должность декоративных элементов: Двойное двоеточие [: :] — это не маркер списка, а две правых типографских кавычки [» »] — не лучшая альтернатива для «подробнее...»

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

«Реющий флаг» лучше «дырявого кирпича». Как бы ни был велик соблазн получить на выходе аккуратный прямоугольный блок текста, от выравнивания по ширине (text-align: justify;) лучше отказаться. Потому что пока еще браузеры не научились осуществлять переносы по слогам, и в аккуратном прямоугольном блоке возникают большие пробелы разной ширины, которые не улучшают ни читабельность текста, ни эстетичность внешнего вида. Особенно это заметно на узких колонках текста.

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

Что мы имеем по структуре:
— рассказы о путешествиях,
— советы путешественникам,
— краткие описания стран.

Эх, чего-то не хватает. Пожалуй, стоит добавить
— словать туристических терминов.
— и немного юмора.

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

Макетирование
Как и в прошлой версии сайта перечень основных разделов будет располагался вверху. Левая колонка содержала новостной блок и внутреннюю навигацию по разделу. От новостей мы отказались, а внутреннюю навигацию перенесем в правую колонку, потому что в левой — разместим список стран, с кратким описанием каждой. А внутнренним содержанием будут рассказы о путешествиях. Примерно так:

Теперь можно сделать схему расположения основных элементов в фотошопе.

Как правило, начинать макетирование с главной страницы, не очень удобно, но в случае с «зеленым чемоданом» получилось наоборот. Поэтому основная работа над макетом велась именно в «рыбе» главной страницы.

Вот такая картинка получилась в итоге. Пока еще ни байта графики.

Обратите внимание, что стили у текста уже прописаны. А также размечены все отступы между блоками. В процессе дальнейшей работы расположение блоков и стили текста могут меняться, но уже незначительно, основная работа уже проделана. Так бы его и оставить… но, как же сам чемодан? Да и вооще, как-то пустовато.

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

Мы взяли изображение чемодана, покрасили его в зеленый цвет и продолжили его до конца страницы, сделав фоном для списка стран. Получилось, что весь мир — в чемодане.
А ярлык чемодана — растянем по гризонтали, разместив на правом конце рубричное изображение. Слева на ярлыке напишем «Зеленый чемодан», разместим форму поиска и ссылку на карту сайта. (Ярлык же на чемодане нужен для поиска)

Вот, собственно, черновой вариант дизайна — готов. Можно переходить к чистовому декорированию. А именно привести изображения в порядок.
Обычно это называют техническим дизайном.

Финальный вариант дизайна сайта

Потом была верстка (преобразование графического файла в html-шаблон), привязывание шаблона к «движку» (CMS) и частичная переверстка контента. При этом не забыта типографика, справиться с которой помогает «типограф» студии Артемия Лебедева.
Источник: «Мастерская корпоративного дизайна»