Евгений Грачёв | Одомашненная страница

В предыдущей версии (январь 2010 года) сайт выглядел следующим образом:

Сайт был привязан к левому краю экрана и имел фиксированную ширину, из-за чего на мониторах с высоким разрешением (а особенно на широко- экранных) справа появлялось всё больше пустоты. Кроме того, он совершенно не был приспособлен для постепенно набиравших популярность айФонов, айПадов и прочих смартфонов и планшетов: достаточно мелкий текст затруднял чтение, а на ссылки невозможно было нажать пальцем. Исходя из этого, задачей было привести сайт в соответствие современным реалиям, постаравшись при этом не сильно менять сам дизайн.

Что ж, рисуем макет. Сайт делаем шире, размер текста увеличиваем, шрифт меняем на более лёгкий. Облака оставляем, но делаем их крупнее и располагаем по центру. Герб тоже оставляем на месте, но убираем девизную ленту, чтобы в общем сайт выглядел чище:

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

В нарушение всех корпоративных правил и указаний брендбуков в разделе «Работа» логотипы компаний-работодателей делаем в этом же стиле. Заодно убираем с сайта все flash-элементы: большую по размеру карту меняем на картинку со ссылкой на Google Maps, а в разделе «Галерея» делаем слайд-шоу на основе CSS — это гарантирует, что сайт будет работать даже на тех устройствах, которые по какой-то причине не поддерживают технологию flash.

В разделе «О себе» информация даётся в виде анкеты, и среди «вопросов» есть такие как «любимые писатели», «любимые музыканты» и прочие. Решаем, что нужно попробовать использовать фотографии этих самых «любимых», тем более что к каждому «вопросу» набирается не больше пяти «ответов». Как уже говорили выше, фон у сайта сложный, поэтому фотографии делаем чёрно-белыми:

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

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

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

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

Когда очередь доходит до страницы для «ошибки 404», возникает вполне справедливый вопрос: на каком языке её делать? Языков у нас много, а 404-я страница всего одна. Правильный ответ — ни на каком: