Piligrim1
Компетентный
C недавних пор я начал увлекаться разработкой дизайнов. Хочу представить полезный урок, для тех кто хочет заниматься макетированием.
1) Дизайн должен быть таким, чтобы после верстки при минимальном разрешении экрана не было горизонтальной прокрутки.
Ошибочно предполагать, что макет должен быть шириной 1024 пикселя. Многие дизайнеры берут минимальную ширину 960 пикселей, но я считаю, что это уж слишком, если конечно, сайт не резиновый. 1002 пикселя — не совсем то. У разных браузеров разная ширина прокрутки. Оптимальный вариант 980-1000 пикселей.
Существует такой способ дизайна, при котором сайт фиксированной ширины и центрирован. Но, при более высоком разрешении экрана пользователь видит продолжение фонового изображения. Как правильно центрировать и отобразить определённый рисунок на каждое разрешение, представлено на следующем рисунке:
2) Используемый шрифт должен быть традиционным. Т.е. по умолчанию установленным на всех компьютерах.
Это нужно для того, чтобы на всех браузерах он отображался корректно. К таким шрифтам относятся: Arial, Georgia, Times New Roman, Verdana. Менее распространенные Tahoma, Calibri, Cambria. Если нужно использовать другой шрифт, например в логотипе, телефоны и пр., то нужно предусматривать, что в шаблоне это будет картинка. И, возможно, такую картинку надо будет изменять. Не забывайте отключать сглаживание шрифта, и делать жирное выделение не через Faux Bold, а через Bold, расположенный в селекторе возле выбора шрифтов.
3) При отрисовке верхнего горизонтально меню нужно помнить, что:
— пункты меню — это одни и те же повторяющиеся элементы. Нужно учитывать, что их может быть мало, может быть много. Если меню имеет 100% ширину, а расположение пунктов по центру, то они и их разделители должны иметь текстовый формат. Т.к. при центрировании используется стиль {margin:0 auto; } для блока с шириной. А при неизвестном количестве элементов ширина не задается, поэтому используется стиль {text-align:center;}, который работает только для текста.
— наведение на пункт меню (hover) при центрировании не будет отображать изменение фона ссылки от начала и конца краёв меню.
4) При отрисовке вертикального бокового меню нужно знать:
— это список. В html это выглядит так:
Таким образом, это тоже повторяющиеся элементы. Более того возможно использование выпадающего списка. Нужно иметь это в виду и рисовать так, чтобы при его использовании всё выглядело аккуратно.
— Если перед пунктом используется иконка, то она должна находиться на уровне первой строки при переносе текста.
5) Не стоит делать прозрачные растяжки.
Например, полупрозрачный background (фон страницы или контента). При верстке такого элемента используется изображение png размером в 1×1 пиксель (чаще всего) и тянется. Это всё, конечно, не страшно. Но IE6 вешается с хаками.
6) Не использовать большие фоновые картинки и фотографии.
Вешаются все. В данном случае красота требует жертв, причём человеческих. У кого медленное соединение с интернетом скорее всего уйдут с сайта раньше, чем загрузиться эта фотография. Но опять же, зависит от аудитории сайта.
7) Все блоки, находящиеся в правой колонке, левой и иногда по центру — это тоже идентичные элементы. К примеру: имеем блок новостей, блок с формой входа, информационный блок. У них должен быть один и тот же формат, они должны тянутья на ширину блока, в котором находятся.
В Html это будет так:
8) Ну и последний совет, перед тем как передать PSD в руки верстальщика и сберечь его нервы, приведите в порядок свои слои. Весь текст должен быть в одной группе, все элементы одного рисунка в другой группе, хэдер в группе «Хэдер», футер и навигация в соответствующих группах.
Для многих сложно при рисовании всё сразу именовать и распихивать по группам, особенно, когда мелких элементов очень много. Но это ваш дизайн, вам его проще и быстрее привести в порядок, чем человеку, который видит его в первый раз.
1) Дизайн должен быть таким, чтобы после верстки при минимальном разрешении экрана не было горизонтальной прокрутки.
Ошибочно предполагать, что макет должен быть шириной 1024 пикселя. Многие дизайнеры берут минимальную ширину 960 пикселей, но я считаю, что это уж слишком, если конечно, сайт не резиновый. 1002 пикселя — не совсем то. У разных браузеров разная ширина прокрутки. Оптимальный вариант 980-1000 пикселей.
Существует такой способ дизайна, при котором сайт фиксированной ширины и центрирован. Но, при более высоком разрешении экрана пользователь видит продолжение фонового изображения. Как правильно центрировать и отобразить определённый рисунок на каждое разрешение, представлено на следующем рисунке:
2) Используемый шрифт должен быть традиционным. Т.е. по умолчанию установленным на всех компьютерах.
Это нужно для того, чтобы на всех браузерах он отображался корректно. К таким шрифтам относятся: Arial, Georgia, Times New Roman, Verdana. Менее распространенные Tahoma, Calibri, Cambria. Если нужно использовать другой шрифт, например в логотипе, телефоны и пр., то нужно предусматривать, что в шаблоне это будет картинка. И, возможно, такую картинку надо будет изменять. Не забывайте отключать сглаживание шрифта, и делать жирное выделение не через Faux Bold, а через Bold, расположенный в селекторе возле выбора шрифтов.
3) При отрисовке верхнего горизонтально меню нужно помнить, что:
— пункты меню — это одни и те же повторяющиеся элементы. Нужно учитывать, что их может быть мало, может быть много. Если меню имеет 100% ширину, а расположение пунктов по центру, то они и их разделители должны иметь текстовый формат. Т.к. при центрировании используется стиль {margin:0 auto; } для блока с шириной. А при неизвестном количестве элементов ширина не задается, поэтому используется стиль {text-align:center;}, который работает только для текста.
— наведение на пункт меню (hover) при центрировании не будет отображать изменение фона ссылки от начала и конца краёв меню.
4) При отрисовке вертикального бокового меню нужно знать:
— это список. В html это выглядит так:
HTML:
<ul>
<li><a title="" href="">Главная</a></li>
<li><a title="" href="">Новости</a></li>
<li><a title="" href="">Каталог</a></li>
</ul>— Если перед пунктом используется иконка, то она должна находиться на уровне первой строки при переносе текста.
5) Не стоит делать прозрачные растяжки.
Например, полупрозрачный background (фон страницы или контента). При верстке такого элемента используется изображение png размером в 1×1 пиксель (чаще всего) и тянется. Это всё, конечно, не страшно. Но IE6 вешается с хаками.
6) Не использовать большие фоновые картинки и фотографии.
Вешаются все. В данном случае красота требует жертв, причём человеческих. У кого медленное соединение с интернетом скорее всего уйдут с сайта раньше, чем загрузиться эта фотография. Но опять же, зависит от аудитории сайта.
7) Все блоки, находящиеся в правой колонке, левой и иногда по центру — это тоже идентичные элементы. К примеру: имеем блок новостей, блок с формой входа, информационный блок. У них должен быть один и тот же формат, они должны тянутья на ширину блока, в котором находятся.
В Html это будет так:
HTML:
<section>
<h1>Новости</h1>
<p>Текст новости</p>
<section>Для многих сложно при рисовании всё сразу именовать и распихивать по группам, особенно, когда мелких элементов очень много. Но это ваш дизайн, вам его проще и быстрее привести в порядок, чем человеку, который видит его в первый раз.
Источник: dizajn.by
Последнее редактирование модератором: