Приготовьте СВОИ молескины

Если кто-то по этому эскизу догадается, что здесь прослеживается связь с героями фильма "Братья Блюз': то я очень удивлюсь! У меня, кстати, для эскизов отведена обычная тетрадь в клетку, а вовсе не блокнот от фирмы Moleskine, хотя, признаться, этот бренд захватил столько умов творческих людей и имеет такую замечательную легенду, что порой задумываешься о его приобретении. Но уверяю, макеты, сделанные на обычной тетрадной бумаге и даже на чем-то другом, ничуть не хуже. Я заметила, что юные веб-дизайнеры настолько увлечены компьютером, графическими программами и вообще технологиями, что считают рисование на бумажках просто ненужным. Но когда количество часов, проведеиных у монитора, превышает разумное значение, вдруг осознаешь: а ведь я могу думать над дизайном вне компьютера. Идеи - всегда с нами, и, чтобы хранить их, компьютер не нужен. Если с техникой исполнения все в порядке, то большую часть времени занимают раздумья над идеей сайта. Так что можно и не сидеть за столом, как прикованный к окну Photoshop. Взял блокнот, устроился, где тебе удобно, и думаешь о проекте. Рисуешь наброски, планируешь, где что будет на сайте располагаться. За пятнадцать минут можно набросать четыре-пять вариантов, не заботясь о технике и красоте. Глава 7. Приготовьте свои молескины 93 Можно ли нарисовать дизайн сайта, минуя этап разработки лейаута? Можно, но это не совсем удобно: вы можете слишком увлечься декорированием какой-то одной детали и совсем забыть об остальных, а затем внезапно обнаружить ошибку на самом видном месте. Поэтому резонно сразу обозначить фронт работ: наметить блоки, определиться с размещением и только после этого приступать к оформлению. Согласитесъ, менять местами смысловые блоки и устраивать глобальные перестановки лучше не на финальной стадии, а в самом начале. Кому-то потребуются усилия воли, чтобы упорядочить свою работу с макетом и начинать с разметки, а кто-то и не представляет себе другого варианта действий. Возможно, я не сделаю сейчас никакого открытия, но когда-то для меня стало откровением, что профессионалъные дизайнеры, загрузив Photoshop, первым делом вытягивают из линеек направляющие (grids). Подсказка: чтобы отобразить на экране линейки, выберите команду меню Хочу добавить, что с появлением "красивых" версий операционных систем все больше дизайнеров удовлетворяются стандартным видом кнопок и не придумывают лишнего. Максимум - это смена цвета. И это правильно, потому что времена ужасных серых прямоугольных кнопок из Windows 2000 и более ранних версий давно позади. Куда ставить такие кнопки? Можно, конечно, сказать "куда хотите': и в чем-то этот ответ будет правильным, но меточным. Я думаю, что негоже на информационных сайтах заменять графическими кнопками все ссылки подряд. И вообще, там, где от ссылки требуется только повести пользователя на другую страницу, не требуется излишняя декоративность. А вот если вы хотите обратить внимание человека на какуюто Очень Важную Ссылку, можно прибегмуть к кнопке. Она может быть достаточно крупной и яркой и размещаться на самом видном месте, но в этом случае такая кнопка должна быть единственной! Двадцать очень заметных кнопок, каждая из которых влечет и манит к себе, - зрелище не для слабонервных. liаннеры Поговорим о самом нелюбимом - о графических баннерах, для которых клиент часто просит подобрать место, а их стандартные форматы настолько не вписываются ни в какие сетки (кроме, может быть, формата 240х400 пикселей), что хочется заплакать и убежать. Если вы делаете сайт, на котором его владелец планирует размещать рекламу, лучше заранее узнать, какую именно и где. Хотя дизайнеру хотелось бы, чтобы ничто не портило его детище, скорее всего, самые дорогие баннерные места будут располагаться высоко и на виду, а вовсе не где-то в подвале. Задача дизайнера - сделать так, чтобы баннер, каким бы он ни был, вписывался в сетку сайта. Лучше всего встраиваются в дизайн: текстовая контекстная реклама наподобие Google Adsense, "тизеры" (реклама с картинкой стандартного размера и текстом), затем - флеш-баннеры, растягивающиеся по заданной ширине, и наконец - реклама одной строкой на всю ширину сайта. Реклама на современном сайте - это неизбежность, которую нужно просто принять как часть нашей повседневной работы. rраф11Ч8СК118 3JI8M8HTЬI Нет абсолютно никаких правил относительно того, где должны располагаться графические элементы. Фотографии и иллюстрации могут находиться в шапке сайта, а могут быть равномерно разбросаны по всей странице, тогда как шапка будет отсутствовать как класс. Чаще всего, конечно, самое большое количество изображений располагается вверху, чтобы зрителя с первого взгляда сбивала с ног нереальная красота, оставляющая неизгладимое впечатление. Главное, чтобы за графикой не потерялось все остальное - контент, по которому пользователь поймет, где он находится и о чем все это. Глава 7. Приготовьте свои молескины 1 05 3пементы rnaвнoii страницы Есть несколько традиционных вещей, которые регулярно размещают на главных страницах сайтов, особенно корпоративных. Во-первых, это Wеlсоте-текст: какоенибудь приветствие, краткий рассказ о компании, а в запущенном случае - фотография ее директора. В целом я не против, если в двух абзацах, не больше, мне дадут понять, на какой сайт я попала. Описывать содержание сайта и показывать лицо директора, конечно, вовсе необязательно. Такое небольтое вступление располагают обычно сразу под шапкой сайта. Во-вторых, раздел новостей компании. Блок с новостями присутствует, наверное, на 90% корпоративных сайтов, и чем реже новости обновляются, тем более спорен сам факт присутствия новостиого блока. Считается так: если у компании действительно есть о чем писать хотя бы раз в неделю (а лучше раз в два-три дня), то пусть новости будут. Если же что-то новое появляется раз в месяц, то постоянно висящий блок попусту занимает место. В этом случае можно предусмотреть "плавающее" место для новостей где-нибудь вверху: пока новость достаточно свежа, пусть она будет на видном месте в особом блоке. Как только она становится малоактуальной, она исчезает и автоматически перекочевывает в архив новостей. В-третьих, краткий перечень услуг, предоставляемых компанией, либо три-четыре самых популярных товара, которые она продает или производит. Чем "вкуснее" и интереснее будет подан этот раздел, тем лучше. Это на самом деле самое главное из того, что должен увидеть пользователь, все остальное - во многом лишь дань традиции. Есть еще самые разнообразные дополнительные элементы, которые я часто вижу на сайтах: голосования, подписка на рассылку, счетчики посещений, календари, блоки с обширной контактной информацией, ссылки на другие сайты по той же тематике . . . Всего и не упомнишь. Как располагать все это, да и стоят ли эти элементы того, чтобы вообще появиться на сайте, - зависит от многих факторов. Я считаю почти все, перечисленное выше, ненужным мусором, а кто-то думает иначе. Но добавление любых функций на сайт должно быть осмысленным и практически оправданным. Если клиент хочет все и сразу, но не знает, зачем ему это, то лучше свериться с задачами, которые должен решать сайт. Возможно, все это добро вовсе и не нужно на имиджевом сайте. Вы дизайнер и всегда вправе высказать свое мнение, если сможете его аргументировать. В целом для главной страницы можно сформулировать такое правило: только самая ценная и важная информация. За остальным пользователь пройдет в другие разделы, если сочтет нужным. На то нам и даны ссылки. Внутренние страницы На внутренних страницах также не должен твориться безудержный бардак: именно ради упорядочения информации и создаются всевозможные разделы и подразделы. 1 О& Часть Il. Ловкость рук Прорабатывая лейаут внутренних страниц, опирайтесь на уже созданное - на главную страницу и на общую сетку. Можно сохранить расположение блоков для всех страниц сайта, что так часто делается на новостных сайтах и крупных порталах. Второй вариант: расположение элементов главной страницы сложнее и прихотливее, блоки на внутренних страницах располагаются более традиционно. И третий вариант: для каждой страницы (или ряда страниц) разрабатывается своя схема расположения контента. Так часто бывает, если на разных страницах располагается разная информация: тексты, фотогалерея, видеофайлы, чат, форум и т.д. Но в любом случае нужно сохранять единообразие оформления всего сайта. Вопервых, это модульная сетка. На ее пропорциях держится все. Во-вторых, это цветовое и графическое оформление сайта. Логотип, главное меню, подвальная область и шапка (или ее элементы) должны находиться на своем месте и никуда не мигрировать. Какие-то отступления могут быть, но визуально страницы всегда должны быть связаны одна с другой.