Здравствуйте Гость ( Вход | Регистрация ) | Выслать повторно письмо для активации |
Waqula |
Отправлено: Feb 22 2008, 12:05 PM
|
Солдат Группа: Members Сообщений: 2 Пользователь №: 1417 Регистрация: 22-February 08 |
Процесс редизайна «Зеленого чемодана» не является единственно возможным вариантом, но он содержит последовательный перечень шагов, без которых сложнее было бы добиться хорошего результата.
Исходные данные Зеленый чемодан создавался как личный дневник путешествий по разным странам. Родившись еще в конце 2000 года на narod.ru, в 2004 году дорос до домена второго уровня. Тогда к рассказам об отдыхе добавились описания стран и полезные советы отправляющимся в путешествия. Так выглядело большинство страниц сайта в период с 2004 по 2007 год включительно. Работа над ошибками Преимущество редизайна над созданием сайта «с нуля» в том, что недостатки сайта, как правило уже известны. В новой версии хотелось добиться более удобной и логичной навигации, а также, как показало время, новости на сайте оказались не очень нужны (последняя датирована декабрем 2004 года), поэтому от новостей решили отказаться. В оформлении сайта тоже следовало избавиться от спорных моментов. В первую очередь решили привести в порядок иерархию заголовков. Различной размера шрифта (кегля) достаточно, чтобы указать уровни значимости заголовков. Писать заголовки прописными при этом вовсе не обязательно. Затем снять с символов типографики должность декоративных элементов: Двойное двоеточие [: :] — это не маркер списка, а две правых типографских кавычки [» »] — не лучшая альтернатива для «подробнее...» Когда ссылки выделены цветом это хорошо. А когда тем же цветом выделены и заголовки — не очень. Не сразу видно где ссылка, а где просто выделен текст. Теперь будем поступать проще: Если текст — ссылка, от он выделен цветом и подчеркнут. Если ссылкой является заголовок, то он не будет исключением. Он будет выден и подчеркнут. Но если текст не является ссылкой, он не будет выделен ни цветом ни подчеркиванием. «Реющий флаг» лучше «дырявого кирпича». Как бы ни был велик соблазн получить на выходе аккуратный прямоугольный блок текста, от выравнивания по ширине (text-align: justify;) лучше отказаться. Потому что пока еще браузеры не научились осуществлять переносы по слогам, и в аккуратном прямоугольном блоке возникают большие пробелы разной ширины, которые не улучшают ни читабельность текста, ни эстетичность внешнего вида. Особенно это заметно на узких колонках текста. Корректировка структуры. Корректировка структуры, конечно не является основной задачей дизайнера, но с помощью этой нехитрой процедуры можно существенно улучшить конечный результат. Что мы имеем по структуре: — рассказы о путешествиях, — советы путешественникам, — краткие описания стран. Эх, чего-то не хватает. Пожалуй, стоит добавить — словать туристических терминов. — и немного юмора. Вот, теперь, пожалуй, всё! Хотя, нет, нужно не забыть «Поиск по сайту». Теперь надо правильно организовать навигацию и размещение основных элементов. Макетирование Как и в прошлой версии сайта перечень основных разделов будет располагался вверху. Левая колонка содержала новостной блок и внутреннюю навигацию по разделу. От новостей мы отказались, а внутреннюю навигацию перенесем в правую колонку, потому что в левой — разместим список стран, с кратким описанием каждой. А внутнренним содержанием будут рассказы о путешествиях. Примерно так: Теперь можно сделать схему расположения основных элементов в фотошопе. Как правило, начинать макетирование с главной страницы, не очень удобно, но в случае с «зеленым чемоданом» получилось наоборот. Поэтому основная работа над макетом велась именно в «рыбе» главной страницы. Вот такая картинка получилась в итоге. Пока еще ни байта графики. Обратите внимание, что стили у текста уже прописаны. А также размечены все отступы между блоками. В процессе дальнейшей работы расположение блоков и стили текста могут меняться, но уже незначительно, основная работа уже проделана. Так бы его и оставить… но, как же сам чемодан? Да и вооще, как-то пустовато. Декорирование сайта На базе получившейся схемы с рыбой главной страницы попытаемся воссоздать декорирование сайта в новом виде. Чем будем «украшать»? да тем же, чем и на прошлой версии сайта. Задача была не в том, чтобы сделать кардинально другой сайт. Мы взяли изображение чемодана, покрасили его в зеленый цвет и продолжили его до конца страницы, сделав фоном для списка стран. Получилось, что весь мир — в чемодане. А ярлык чемодана — растянем по гризонтали, разместив на правом конце рубричное изображение. Слева на ярлыке напишем «Зеленый чемодан», разместим форму поиска и ссылку на карту сайта. (Ярлык же на чемодане нужен для поиска) Вот, собственно, черновой вариант дизайна — готов. Можно переходить к чистовому декорированию. А именно привести изображения в порядок. Обычно это называют техническим дизайном. Финальный вариант дизайна сайта Потом была верстка (преобразование графического файла в html-шаблон), привязывание шаблона к «движку» (CMS) и частичная переверстка контента. При этом не забыта типографика, справиться с которой помогает «типограф» студии Артемия Лебедева. Источник: «Мастерская корпоративного дизайна» |
DelphiST |
Отправлено: Feb 22 2008, 12:09 PM
|
Команда ЭйсВэб Группа: Super moderator Сообщений: 1093 Пользователь №: 796 Регистрация: 23-May 07 |
Прикольно! Хороший дизайн получился с чемоданом
-------------------- |
Splash |
Отправлено: Feb 22 2008, 01:54 PM
|
Команда ЭйсВэб Группа: Super moderator Сообщений: 1167 Пользователь №: 675 Регистрация: 29-April 07 |
Отлично, стильно и быстро!
Оценка: 5+ -------------------- Забавные поздравления в стихах и прозе |
mixSam |
Отправлено: Feb 22 2008, 02:15 PM
|
Майор Группа: Members Сообщений: 114 Пользователь №: 1247 Регистрация: 25-November 07 |
Гыгы, прикольно
-------------------- :)Ребят, давайте вместе нормально работать! |
Роман |
Отправлено: Feb 22 2008, 02:55 PM
|
Команда ЭйсВэб Группа: Members Сообщений: 896 Пользователь №: 1160 Регистрация: 25-September 07 |
чётко, мне нравится.
идея шикарная. |
gregst |
Отправлено: Feb 22 2008, 04:30 PM
|
Команда ЭйсВэб Группа: Super moderator Сообщений: 1012 Пользователь №: 1169 Регистрация: 28-September 07 |
классное описание проделанной работы.
гуд |
Waqula |
Отправлено: Feb 22 2008, 05:42 PM
|
Солдат Группа: Members Сообщений: 2 Пользователь №: 1417 Регистрация: 22-February 08 |
Спасибо всем!
Надеюсь, что этот материал окажется еще и полезным. Кстати, готовится похожий материал по разработке еще одного сайта. Нужно? |