Создать форум бесплатно: ixbb.ru :: Календарь на Март 2024 года: calendar2008.ru/2024/mart/

  Reply to this topicStart new topicStart Poll

Редизайн сайта

, Пошаговое описание процесса
Waqula
Отправлено: Feb 22 2008, 12:05 PM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 2
Пользователь №: 1417
Регистрация:
22-February 08



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Потом была верстка (преобразование графического файла в html-шаблон), привязывание шаблона к «движку» (CMS) и частичная переверстка контента. При этом не забыта типографика, справиться с которой помогает «типограф» студии Артемия Лебедева.
Источник: «Мастерская корпоративного дизайна»
PMEmail Poster
Top
DelphiST
Отправлено: Feb 22 2008, 12:09 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 1093
Пользователь №: 796
Регистрация:
23-May 07



Прикольно! Хороший дизайн получился с чемоданом


--------------------
user posted image
PMEmail PosterICQ
Top
Splash
Отправлено: Feb 22 2008, 01:54 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 1167
Пользователь №: 675
Регистрация:
29-April 07



Отлично, стильно и быстро!
Оценка: 5+


--------------------
Забавные поздравления в стихах и прозе
PMUsers WebsiteICQ
Top
mixSam
Отправлено: Feb 22 2008, 02:15 PM
Quote Post


  Майор
*

Группа: Members
Сообщений: 114
Пользователь №: 1247
Регистрация:
25-November 07



Гыгы, прикольно biggrin.gif


--------------------
:)Ребят, давайте вместе нормально работать!
PMEmail Poster
Top
Роман
Отправлено: Feb 22 2008, 02:55 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Members
Сообщений: 896
Пользователь №: 1160
Регистрация:
25-September 07



чётко, мне нравится.
идея шикарная. wink.gif
PMICQ
Top
gregst
Отправлено: Feb 22 2008, 04:30 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 1012
Пользователь №: 1169
Регистрация:
28-September 07



классное описание проделанной работы.
гуд
PMEmail Poster
Top
Waqula
Отправлено: Feb 22 2008, 05:42 PM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 2
Пользователь №: 1417
Регистрация:
22-February 08



Спасибо всем!
Надеюсь, что этот материал окажется еще и полезным.
Кстати, готовится похожий материал по разработке еще одного сайта. Нужно?
PMEmail Poster
Top

Topic Options Reply to this topicStart new topicStart Poll

 



[ Script Execution time: 0.0324 ]   [ 10 queries used ]   [ GZIP выключен ]