Памятка дизайнеру сайтов

<h2 style="font-style: oblique; font-size: 1.7em; margin-bottom: 20px; color: rgb(0, 51, 102); font-family: arial;">Памятка дизайнеру сайтов</h2><p style="margin-bottom: 5px; font-family: arial; font-size: 1.1em;">Автор: Павел Колодяжный</p><p style="margin-bottom: 20px; font-family: arial; font-size: 1.1em;">Оригинал: [Only registered and activated users can see links. Click Here To Register...] | [Only registered and activated users can see links. Click Here To Register...]</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Вторая версия статьи, расширенная и дополненая.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Большая часть готовилась для моего выступления на «[Only registered and activated users can see links. Click Here To Register...]», куда я, к сожалению, не доехал.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">К сожалению огромная армия даже опытных, «модных» и эффектных дизайнеров забывают, что& результатом их творчества должен быть сайт, а не только «супер-скриншот» годный только для портфолио.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Первоначально эта памятка писалась мною для внутреннего пользования но, обрастая материалами, выросла в самостоятельную статью. Америку я не открыл, а просто собрал воедино и сформулировал ряд требований, которые должен учитывать дизайнер в процессе проектирования и оформления сайта.</p><h2 style="margin: 50px 0pt 20px; font-size: 1.6em; font-weight: normal; color: rgb(0, 51, 102); font-family: arial;">Вначале думаем, потом делаем</h2><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Это очень простое и часто нарушаемое правило. Особенно молодыми дизайнерами.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Я настоятельно рекомендую всем и каждому: возьмите карандаш и бумагу. Подумайте над задачами и идеей сайта. Сделайте быстрые черновые эскизы, найдите композицию, приблизительную сетку, расположение блоков и элементов, почеркушки требуемых иллюстраций. И только после этого садитесь за компьютер.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Такой простой ход в разы продуктивнее, экономит кучу времени и помогает находить более интересные решения.</p><p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 330px;">Пример быстрого наброска и полученного результата</p><h2 style="margin: 50px 0pt 20px; font-size: 1.6em; font-weight: normal; color: rgb(0, 51, 102); font-family: arial;">От большего к меньшему, от общего к частному</h2><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Это второе простое правило. И оно также часто нарушается.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Классическое преподавание рисунка и живописи учит: «Двигайтесь от большего к меньшему, от общего к частному. Вначале проработайте общую композицию, самые большие массы и объемы, самые крупные пятна, а потом дорабатывайте, уточняйте, насыщайте деталями.»</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Это правило целиком применимо ко всем аспектам и жанрам дизайна.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Продумайте свой проект, найдите идею и композицию, нарисуйте серию эскизов. И потом, планомерно, эти эскизы воплощайте, начиная с сетки, компоновки блоков, элементов, крупных цветовых пятен. И последовательно насыщайте их деталями.</p><p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 330px;">Пример пошагового уточнения и доработки макета от общего к частному.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Надо признать, что я часто видел, как художники-самоучки-самородки начинали писать портрет человека с глаза, или с пальца левой ноги. И не раз видел, как некоторые дизайнеры начинают рисовать сайт с какой-то одной-частной иконки. И в обоих случаях, к моему удивлению, получался интересный результат.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Но это долгий путь, часто требующий больших корректировок и переделок в процессе дизайна. Возможно, он применим для творчества, но в дизайне-профессии, когда в определенный срок нужно получить хороший результат, я считаю, что подобный подход недопустим. Нужны гарантированные технологии процесса, чтобы получать гаранитрованные результаты в четкие сроки. А не просто «получится-неполучится».</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Итак, подытожим: «От большего к меньшему, от общего к частному».</p><h2 style="margin: 50px 0pt 20px; font-size: 1.6em; font-weight: normal; color: rgb(0, 51, 102); font-family: arial;">Модульная сетка</h2><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Одно из первых решений в процессе создания дизайна — это модульная сетка. Единый каркас и схема расположения всех основных блоков и элементов, проходящий через все страницы сайта.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Сетки бывают простые и сложные, гибкие в использовании и не очень. Это не столь важно. Важно то, что если вы при проектировании дизайна задали определенную сетку модулей — будьте добры ей следовать. От первой до последней страницы своего проекта. А если в процессе прорисовки внутренних страниц у вас появились элементы, не ложащиеся в принятую сетку — значит вы недостаточно времени уделили её проектированию.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Следование единой модульной сетке в рамках проекта не только увеличит цельность и логичность восприятия сайта, но и многократно упростит труд разработчикам.</p><p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 330px;">Пример использования модульной сетки</p><p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 330px;">Пример использования модульной сетки</p><h2 style="margin: 50px 0pt 20px; font-size: 1.6em; font-weight: normal; color: rgb(0, 51, 102); font-family: arial;">Масштабируемость</h2><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">В наше время, когда у всех пользователей самые различные мониторы, есть смысл делать преимущественно «резиновые» сайты. Т.е. сайты, которые масштабируются под разрешение монитора пользователя.</p><p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 330px;">Отображение эластичного сайта на различных мониторах</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Итак, делая «резиновый» дизайн не забываем, что:</p><ul style="margin: 10px 50px; line-height: 15px; font-family: arial; font-size: 1.1em;"> <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">Общая композиция не должна нарушаться ни при каком разрешении монитора у посетителя. <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">Все элементы масштабируются в зависимости от размера экрана пользователя и размера шрифта. <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">Вся модульная сетка, блоки и прочие горизонтали масштабируются в процентах. <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">Все шрифты, отступы, почти все вертикали масштабируются в em. Во многих случаях, это касается даже рамок (border). <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">Исключение могут составлять лишь картинки. И то, жесткий размер в px для многих изображений — ограничение лишь по вертикали.[/list]<h3 style="margin: 20px 0pt 10px; font-style: oblique; color: rgb(0, 34, 68); font-size: 1.5em; font-family: arial;">«Сжатие-растяжение»</h3><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Оптимальна для использования так называемая «полу-резина», т.е. сайт растягивается и сжимается до определенного предела.</p><h4 style="margin: 10px 0pt; color: rgb(68, 68, 68);">min</h4><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Первое, с чего нужно начать — это найти минимальное сжатие сайта.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Минимальная ширина сайта, безусловно, определяется задачами сайта и его целевой аудиторией. Фактически сейчас есть только два минимальных параметра: 760 px и 990 px. Первый оптимален для корпоративных сайтов либо ресурсов, рассчитанных на самую массовую и разношерстную аудиторию (например, массовые сервисы: почтовые, поисковые, новостные и т.п.). Второй подходит для сайтов имиджевого и промоушен назначения.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Проверяем, и если требуется корректируем, каждый элемент модульной сетки, чтобы не возникало наездов/нахлестов элементов друг на друга при минимальном сжатии сайта.</p><h4 style="margin: 10px 0pt; color: rgb(68, 68, 68);">max</h4><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Максимальная ширина сайта может быть разной, но, как правило, рекомендуется диапазон для растяжения не выше, чем в полтора-два раза от размера минимального сжатия. Это обусловлено тем, что при растягивании сайта более, чем в полтора раза композиция, обычно, рушится.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Нужно определить, что произойдет со всем сайтом, при размере монитора пользователя свыше максимальной ширины. Решаем, куда он будет выравниваться. Вправо? Влево? По центру?</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Добиваемся завершенного вида сайта и его естественного перехода в окружение при разрешении свыше максимального. Недопустимо, чтобы сайт на большом мониторе выглядел как «обрезанный».</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Рисуем все иллюстрации и неповторяющиеся фоны из принципа «у кого больше монитор, тот больше увидит». Обычно, ширина иллюстраций обусловлена шириной отведенных под них блоков модульной сетки в состоянии max.</p><h2 style="margin: 50px 0pt 20px; font-size: 1.6em; font-weight: normal; color: rgb(0, 51, 102); font-family: arial;">Запас на рост сайта</h2><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">В большей сфере задач, если речь идет не о сайте-визитке или промо-сайте, нужно учесть, что количество страниц и разделов сайта может расти и меняться.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Поэтому:</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Навигация должна строиться так, чтобы добавление новых пунктов меню, а уж тем более изменение названия пунктов происходило безболезненно. Недопустимо, чтобы добавление нового раздела приводило к пересмотрению навигации.</p><p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 340px;">Пример «безболезненного» изменения/добавления древовидной навигации первого и второго уровня</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">В некоторых случаях нужно предусматривать безболезненное для внешнего вида добавление/скрытие информационных/функциональных блоков на сайте.</p><p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 340px;">Пример «безболезненного» перемещения, изменения/удаления блоков сайта</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Учитывая экранную масштабируемость, а также добавление новых материалов на сайт, рекомендуется отдавать предпочтение текстовым заголовкам и навигации.</p><h2 style="margin: 50px 0pt 20px; font-size: 1.6em; font-weight: normal; color: rgb(0, 51, 102); font-family: arial;">Шрифтовая схема</h2><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Большая часть сайтов смотрится цельно и завершенно при построении дизайна на основе одного-трех шрифтов.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Базовый шрифт — основной шрифт материалов сайта.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Акцидентный — шрифт для заголовков.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">В некоторых случаях вводятся дополнительные шрифты для:</p><ul style="margin: 10px 50px; line-height: 15px; font-family: arial; font-size: 1.1em;"> <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">меню и навигации; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">блоков выделения (важной информации, цитат, выносок); <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">для мелкого текста, с целью повысить читабельность.[/list]<p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Дизайнер должен спланировать единую общую схему размеров отступов/заступов для всех элементов на сайте, иерархию заголовков и навигационных элементов (например, для древовидного меню или облака тегов). Она должна быть цельной и использоваться на всех страницах сайта.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Всё последующее оформление информации на сайте должно строится на базе общей схемы.</p><p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 330px;">Шрифтовая схема простого корпоративного сайта</p><h2 style="margin: 50px 0pt 20px; font-size: 1.6em; font-weight: normal; color: rgb(0, 51, 102); font-family: arial;">Реакция на пользователя</h2><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Дизайнер должен спланировать, что будет происходить с элементами, реагирующими на действия пользователя.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Рассмотрим типичные элементы.</p><h3 style="margin: 20px 0pt 10px; font-style: oblique; color: rgb(0, 34, 68); font-size: 1.5em; font-family: arial;">Навигация</h3><p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 330px;">Фрагмент макета сайта, на котором показаны три состояния навигации: обычный вид меню, пункт меню при наведенном курсоре, выделение текущего раздела.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">В зависимости от типа и масштабности сайта, нужно показать ряд состояний пункта навигации.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Типичный набор:</p><ul style="margin: 10px 50px; line-height: 15px; font-family: arial; font-size: 1.1em;"> <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">Нормальный вид. <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">Мы навели курсор. <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">Мы находимся в этом разделе. <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">Мы находимся в этом разделе, но прошли глубже. <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">Мы навели курсор на пункт родительского раздела.[/list]<p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">При этом минимальный набор для всех элементов навигации, включая переключатели и элементы управления — это нормальный и активный вид. Т.е. минимум, для всех управляющих и навигационных элементов это — «вкл./выкл.».</p><p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 330px;">Различные состояния элемента навигации</p><h3 style="margin: 20px 0pt 10px; font-style: oblique; color: rgb(0, 34, 68); font-size: 1.5em; font-family: arial;">Ссылки</h3><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Ссылки, расположенные в тексте, всегда подчеркнуты и должны отличаться по цвету от основного текста.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Желательно, а в навигации обязательно, предусмотреть внешний вид ссылки, при наведении курсора.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">В больших объемах текста и при выдаче разнородной информации (например, оглавлении статей, карты сайта и т.п.), обязательно нужно предусмотреть внешний вид для посещенных ссылок. И они также требуют своего внешнего вида при наведении курсора.</p><h4 style="margin: 10px 0pt; color: rgb(68, 68, 68);">Ссылки с дополнтельными свойствами</h4><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Для ссылок, которые предусматривают дополнительные возможности, особенно при использовании в тексте, рекомендуется предусмотреть небольшую иконку, которая подскажет пользователю о дополнительных свойствах ссылки.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Таких иконок требуют ссылки:</p><ul style="margin: 10px 50px; line-height: 15px; font-family: arial; font-size: 1.1em;"> <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">альтернативное получение данных (RSS, PDA, версия для печати) <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">скачивание файлов, расположенных на сервере <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">обращение к популярным ресурсам (Яндекс, Google, Flickr, LJ, картографические сервисы, Википедия и т.п.) <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">e-mail адресов <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">открытие форм <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">открытие ссылки в новом окне[/list]<p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 330px;">Примеры использования дополнительных иконок «в*жизни».</p><h3 style="margin: 20px 0pt 10px; font-style: oblique; color: rgb(0, 34, 68); font-size: 1.5em; font-family: arial;">Псевдо-ссылки</h3><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Псевдоссылки, т.е. ссылки, которые не ведут на другую страницу, а открывают/скрывают информацию на текущей, без ее перезагрузки, обозначаем пунктирным подчеркиванием. Во всем остальном, на них распространяется все, что указано для обычных ссылок.</p><p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 330px;">Один из примеров использования псевдоссылок.</p><h3 style="margin: 20px 0pt 10px; font-style: oblique; color: rgb(0, 34, 68); font-size: 1.5em; font-family: arial;">Табы</h3><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Табы — это некоторая смесь элемента навигации и элемента управления.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Для них учитываем состояния:</p><ul style="margin: 10px 50px; line-height: 15px; font-family: arial; font-size: 1.1em;"> <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">таб неактивен <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">наведен курсор (opt) <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">загрузчик содержания (opt) <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">таб активен[/list]<p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 350px;">Фрагмент сайта, на котором видны сразу три состояния табов: активный таб, наведен курсор и обычное, неактивное, состояние.</p><h3 style="margin: 20px 0pt 10px; font-style: oblique; color: rgb(0, 34, 68); font-size: 1.5em; font-family: arial;">Курсор</h3><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Предусматриваем реакцию курсора при наведении. Особенно, если речь идет о нестандартных элементах управления, таких как навигация, псевдо-ссылки и табы (hand), подсказки (help), изменение размера элемента и перетаскивание.</p><h2 style="margin: 50px 0pt 20px; font-size: 1.6em; font-weight: normal; color: rgb(0, 51, 102); font-family: arial;">Оформление содержания</h2><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">В интернете правит информация. Сайт — всего лишь способ её доставки. Внешнее оформление сайта — лишь рамка, задающая эмоциональный настрой и подкрепляющая бренд.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Именно изучая информацию пользователь проводит самую большую часть своего времени на сайте. И именно по этой причине нужно уделить оформлению содержания должное внимание.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Задачи сайта и его содержание всегда разное. Поэтому оформлять это содержание также всегда нужно по разному.</p><p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 360px;">Фрагмент новостного сайта, на котором дизайнер показал большую часть типичных элементов для оформления содержания.</p><h3 style="margin: 20px 0pt 10px; font-style: oblique; color: rgb(0, 34, 68); font-size: 1.5em; font-family: arial;">Элементы содержания</h3><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Сразу нужно сказать, что предусмотреть заранее все возможные варианты оформления нельзя. Мы рассмотрим лишь типичные.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Например, для корпоративного сайта:</p><ul style="margin: 10px 50px; line-height: 15px; font-family: arial; font-size: 1.1em;"> <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">абзац текста; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">иерархия заголовков трех-четырех уровней; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">ссылки, псевдо-ссылки; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">элемент выделения важной информации; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">цитата; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">ненумерованный список; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">нумерованный список; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">вложенные списки; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">иллюстрация на полосу, в текст; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">таблица или несколько их типов; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">файлы для скачивания; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">выноски; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">оформление маргиналий, если такие используются; <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">подача информации в 2–3 колонки (зависит от сетки); <li style="border-bottom: medium none; overflow: visible; list-style-type: disc; list-style-image: none; list-style-position: outside;">простая форма.[/list]<h3 style="margin: 20px 0pt 10px; font-style: oblique; color: rgb(0, 34, 68); font-size: 1.5em; font-family: arial;">Рыба</h3><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">В идеале, нужно оперировать реальным содержанием. Если такого нет, то как минимум, «рыба» должна быть максимально-типичная для оформляемой страницы по своему типу и объему. Это позволит избежать пробелов в оформлении и досадного вида сайта после сдачи в эксплуатацию.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Полностью недопустимо использование «рыбы» из другого языка, т.к. объемы текста и средняя длина слов различаются. Например в английском и русском это очень заметно.</p><p style="margin: -30px 0pt 20px 200px; font-size: 0.9em; font-style: oblique; width: 330px;">Различный рисунок идентичных по содержанию блоков текста на разных языках.</p><h2 style="margin: 50px 0pt 20px; font-size: 1.6em; font-weight: normal; color: rgb(0, 51, 102); font-family: arial;">P.S.</h2><p style="margin-bottom: 10px; font-family: arial; font-size: 1.1em;">Приведенные требования не являются догмой. От любых правил иногда можно отступать. Только делать это нужно не по незнанию, а осознанно.</p><h3 style="margin: 50px 0pt 10px; font-style: oblique; color: rgb(0, 34, 68); font-size: 1.5em; font-family: arial;">Об авторе</h3><p style="font-family: arial; font-size: 0.9em;">Павел Колодяжный. Арт-директор и основатель дизайн-бюро «[Only registered and activated users can see links. Click Here To Register...]».</p><p style="margin-bottom: 10px; font-family: arial; font-size: 0.9em; width:520px">Специализируется на разработке интернет-сайтов и проектировании интерфейсов. Общий стаж в дизайне — 9 лет. Как автор и со-автор причастен к появлению на свет более сотни сайтов и около трех десятков интерфейсов. Среди работ есть проекты для таких компаний, как Sunbay Software, Space Andventures, Pulsar Software Systems, Canon Inc., Yandex, Yamaha Motors. Не смотря на прежние достижения считает, что самые интересные проекты еще впереди.</p><h3 style="margin: 50px 0pt 10px; font-style: oblique; color: rgb(0, 34, 68); font-size: 1.5em; font-family: arial;">Благодарности</h3><p style="margin-bottom: 10px; font-family: arial; font-size: 0.9em; width:520px">Всем моим коллегам и сотрудникам, так как все примеры это фрагменты работ нашего бюро.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 0.9em; width:520px">Евгению Чепорову, который подтолкнул меня к созданию статьи. [Only registered and activated users can see links. Click Here To Register...], который помогал мне с иллюстративными примерами.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 0.9em; width:520px">[Only registered and activated users can see links. Click Here To Register...] (из [Only registered and activated users can see links. Click Here To Register...]) за советы и конструктивную критику текстов.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 0.9em; width:520px">[Only registered and activated users can see links. Click Here To Register...], за корректуру, перевод англоязычной версии и за то, что она убедила меня закончить статью, когда хотел бросить.</p><p style="margin-bottom: 10px; font-family: arial; font-size: 0.9em; width:520px">Всем пользователям [Only registered and activated users can see links. Click Here To Register...] и [Only registered and activated users can see links. Click Here To Register...], за комментарии, отзывы и вопросы, благодаря которым я доработал и расширил этот материал.</p>