Жилэкспертиза

Задание

Имеется старый сайт Жилэкспертизы, который выглядит так:

Требуется разработать новый дизайн. Техническое задание лежит на странице конкурса. В общем, структура должна быть такой:

Что здесь? Логотип, телефоны, горизонтальное меню сверху и вертикальное слева... Справа поиск, блок текста и калькулятор перепланировки. Особое внимание требовалось уделить иллюстрированию и повышению заметности блоков с жизненными ситуациями в «шапке» сайта (обозначены овалами). Итак, главное маневры:

Первый вариант

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

Теперь главный элемент – четыре ссылки быстрого доступа. Все рисуют прямоугольные ячейки. Ну пусть. Мне круглые тоже нравятся. Создадим четыре круга, в них нарисуем маленькие картинки по смыслу. Сделаем блоки позаметнее:

Такого черновика пока хватит, хоть и не всё аккуратно прорисовано и местами криво. Когда участвуешь в конкурсе этого для начала достаточно. Главное сразу посмотреть на реакцию, узнать, нравится ли этот вариант хозяину или нет. Надо сразу понять, стоит ли продолжать доработку вообще. Организатор оценит черновик и укажет, что бы он хотел поменять (или что этот черновик можно выкинуть...).

Доработка

Итак, черновик понравился и поступили новые указания. Цвета нужно сделать понежнее. Четыре «шарика» смотрятся и влезают нормально. Но необходимо теперь продумать, каким образом можно будет добавлять новые ячейки быстрого доступа. Макет по заданию должен быть «резиновым», то есть растягиваться в разумных пределах по ширине окна браузера. Да будет так. Итак, фишки для компактности сделаем скользящими, наезжающими друг на друга и при наведении указателя мыши всплывающими наверх:

Итак, небольшое программирование этого блока после вёрстки решит проблему заслонения.

Дополненный вариант

Проработаем теперь поподробнее каждый элемент. Первым делом приведём в порядок блоки слева и справа, добавим красивую схемку планировки, телефонную трубку. Потом уже украсим текст:

Как вариант подведём гамму к цвету логотипа и удалим одну фишку:

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