Вокруг дизайна

В комментариях к своей книге от читательницы я услышала вопрос, вдохновивший меня на написание этой заметки: а почему ни слова о дизайне сайтов, рассчитанных на карманные компьютеры?

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

С чего же начать, делая сайт для КПК? Наверное, со скрипта, который будет определять, каким устройством пользователь собирается просмотреть сайт, и в зависимости от результатов направлять его на основной сайт, либо на тот, что ради заботы о пользователях сделан для КПК.

КПК-версия – облегченная. Возможно, стоит в нее включать только основную информацию, только самое ценное, что есть на сайте.

Основные критерии к дизайну сайта для КПК можно перечислить тезисно. Их немного и они  вытекают из особенностей всех этих наладонников, коммуникаторов и т.п.

1. Максимально облегченный сайт. Буквально только текст и цветные плашки. Убираем все градиенты, фоны, завитушечки, фотографии, навороченные шапки - все прочь!

2. Резиновая верстка с расчетом на основные разрешения, например, по ширине от 240 пикселей. Да, тут сильно не разбежишься, но несмотря на то, что многие КПК уже умеют показывать в разрешении от 640х480 пикселей (и это просто огромная площадь для творчества!), все равно, по традиции, смотреть надо на меньшие размеры.

3. Пиксельные иконки. Украсить сайт для КПК помогут иконки, но не простые, а 16х16 пикселей и меньше. Достаем из закромов подзабытые пиксельные иконки и используем по необходимости.

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

Как понять, можно ли обойтись без специально заточенной под КПК версии? Просто зайдите на сайт с КПК, причем с разных моделей, и полюбуйтесь на свое творение под другим углом. Узнаете много нового.

Версия для КПК критически необходима только очень посещаемым сайтам, предоставляющим самый полезный контент. Но возможно когда-нибудь станет хорошим тоном обязательно включать этот пункт в ТЗ на разработку сайта. А может быть вообще веб и устройства для его просмотра станут настолько другими, что эта заметка станет абсолютно неактуальной, кто знает.

В ожидании Нового Года – рассказ с картинками на тему дизайна и дизайнеров.

Получаешь заказ на дизайн по e-mail. Спрашиваешь, что там будет, о чем сайт, какие цвета нравятся. Просишь прислать логотип и скан визитки (фирменный стиль надо соблюсти, все серьезно!) и говоришь – ок, завтра все будет. С вас 50 долларов по вебмани.

Открываешь фотошоп. Создаешь файл размером 1000 на 1000 пикселей. Красишь в белый. Ставишь логотип в левый верхний угол. На этом мысль останавливается.

Идешь покурить, налить чаю, съесть бутерброд с колбасой. Возвращаешься к фотошопу. Лезешь на templatemonster.com в поисках вдохновения. Так, чего там нового Ягуар нарисовал? Изучаешь тенденции. Немного жалеешь, что ты не Ягуар, потом аккуратно копируешь пару крутых элементов в свой макет. Перекрашиваешь, чтобы не подумали, что ты непрофессионал.

На полмакета резервируешь место для шапки, прямо под логотипом.  Пикселей 400 в высоту. Или 432, как получится. Под шапкой полоска с градиентиком – меню. Главная, о нас, продукция, каталог, партнеры, контакты. Теперь нужно в шапку какую-то красивую картинку. Идешь в фотобанк. Проводишь там минут сорок, рассматривая картинки, но ничего путного не находишь. Ничего не подходит. Фоток дохрена, а все хлам какой-то. Ну кому нужен вот этот мужик в трусах?

Ладно, черт с ней, с шапкой,  пока можно набросать области контента. Слева большой блок основного текста, справа узкая колонка новостей, которые обновляются раз в полгода, и какой-нибудь чепухи типа логотипов партнеров. Яндекс.Весна или Липсум.ком – наши главные копирайтеры. Выбираем Tahoma 10 pt, темно-серый или черный цвет – нормалёк.

Полдела сделано, можно и передохнуть. Чай, кофе, покурить… Надо теперь посмотреть, что в мире дизайна происходит. Набираешь артлебедев.ру. Глядишь свежие работы, потом бизнес-линч. Ржешь над недоумками-дизайнерами и комментариями Лебедева, гладишь себя по голове – ну уж ты-то кру-у-уче дизу делаешь! Точно, надо Лебедеву будет этот сайт показать, когда нарисуешь. Идешь на дизайнерский форум, обсуждать работы новичков и читать разные топики. Попутно рисуешь фотожабу на предлагаемую в одном из топиков тему. Судя по комментам к жабе – Лебедев жалкий неудачник по сравнению с тобой.

Ладно, хватит бездельничать. Надо ж сайт дорисовать! Опять открываешь сайт фотобанка, тыришь оттуда красивую девку, небоскребы, облака, травку и до кучи еще чашку кофе (раздел «новости» иллюстрировать). Попутно опять ругаешь поисковик, который подсовывает не те фотки. Небо, девку и небоскребы – в шапку, туда же сверху лепишь слоган.

Что-то пустовато. Собираешь кучку глянцевых иконок по всему интернету, в художественном беспорядке разбрасываешь. Для клиента ничего не жалко! Что еще? Ага, подвал, точно.  Тонкой линией отчерчиваешь подвал, потому что сайт без подвала выглядит незаконченным. Что там пишут обычно? © 2008, Все права защищены. Дизайн: «Иван Сидорофф студио». Порядок. Можно отправлять клиенту.

Звонок  в дверь. Открываешь – а там стоит директор «Пётр Васильефф студио», Петька из соседней квартиры и говорит: бросай свой фотошоп, пошли пиво с креветками пить! А ты ему и отвечаешь: завтра зачет по матанализу, а шпора из инета не скачана,  да и батя скоро с работы придет, комп отберет. Так что давайте, коллега, форум  лидеров  отечественного веб-дизайна перенесем на завтра! И купи сухариков.