Категория: HTML5.
В данной статье мы рассмотрим такие аспекты как проектирование веб сайта, какой выбрать редактор для подготовки макета сайта, как сохранить исходники, как правильно работать с текстом и многое другое. Эта статья главным образом предназначена для начинающих веб-дизайнеров.
В каком графическом редакторе лучше рисовать дизайн сайта?
Вы можете проектировать ваш будущий сайт в любом графическом редакторе, в котром вы привыкли работать. Лично для меня, например удобно использовать Illustrator, хотя большинство дизайнеров стараются использовать Photshop для этих целей. Это частично связанно с тем, что браузеры не отображают векторные изображения. В результате в процессе подготовки макета сайта, все графические элементы преобразуются растровые, это чаще всего JPG. Однако если вам нужен прозрачный или полупрозрачный фон, можно использовать PNG. Но большинство дизайнеров используют Photoshop не только поэтому, а потому что эта программа достаточно известна, и большинство желающих стать дизайнерами, как правило начинают изучение компьютерной графики с Фотошопа.
Эта программа имеет все необходимые инструменты для раскройки уже нарисованного PSD макета для дальнейшей его верстки на HTML.
Какой использовать размер, чтобы сделать сайт?
Во-первых, нужно забыть такое понятие как dpi или метрическая система. Размеры блоков и вставки изображений на сайте указаны в пикселях или процентах (ширина и высота) окна браузера (или родительского элемента). Если размеры на вашем сайте являются определёнными в процентах, этот сайт называется адаптивным. Адаптивные сайты весьма удобны, ведь сайт одинаково хорошо выглядит на любых экранах, но прежде чем делать адаптивный дизайн надо хорошо подумать какие блоки будут растягиваться при увеличении окна, а какие нет. Вы можете поступить следующим образом, создать несколько файлов с разными размерами (например, 1280×1024, 1920×1280 и 1024×768), которые наглядно покажут, как сайт будет выглядеть в зависимости от разрешения экрана. Когда вы делаете, например макет визитки или баннера, вы знаете конечные размеры. Но в случае с дизайном сайта дела обстоят немного сложнее. Потому как все мониторы имеют разное разрешение экрана, то есть количество пикселей по ширине и высоте, и это должно быть учтено в конструкции дизайна. Большинство мониторов на данный момент имеют разрешение 1280 или 1920 пикселей. Как правило мы всегда опираемся на большинство. Но не делайте текстовые блоки больше 800 пикселей. Когда мы имеем разрешение 800 на 600 пикселей, ты теряем внешний вид сайта, но это не так страшно. Вот когда строка не помещается на нашем мониторе, читать текст становиться очень неудобно. Лучше сделать сайт 1024 пикселя в ширину и добавить в макет немного свободного места до размера 1280, и выровнять его по центру. Свободное место по краям, это необязательно белое поле, вы можете залить его другим цветом или заполнить повторяющимися графическими элементами (бесшовные текстуры).
Вы также можете использовать неповторяющиеся фоновые изображения и масштабировать их до 100% ширины и отключить прокрутку.
Как сделать красивый дизайн сайта?
Фраза красивый дизайн может легко напугать грамотного вебмастера. Сайт в первую очередь должен быть функциональным, во вторых сайт должен быстро загружаться и быть удобным для пользователя. Понятие красота, как правило, менее важно. Кроме того все люди разные на вкус и цвет. Таким образом, вряд ли кото сможет научить вас как сделать, абсолютно красивый дизайн для всех. Создавая новый дизайн было бы неплохо подумать, прежде всего, о функциональности сайта. Разместить элементы таким образом, что бы посетитель мог легко найти нужную ему информации. Надо заботиться о том, чтобы пользователь, пришедший на сайт не убежал сразу испугавшись. Для этого не надо использовать множество анимированных объектов в дизайне, такие сайты похожи на порнографические, с которых вот-вот полезут ужасные вирусы на компьютер.
Кроме того такие элементы отвлекают внимание от основной части сайта, текста.
Работа с текстом.
Некогда не забывайте о типографике, цвета текста и фона должны быть контрастными и яркими, основной текст должен быть читабельным, а навигация заметна. Не забывайте, что если вы использовали необычный шрифт, которого может не быть на компьютере пользователя, это создаёт риск что ваш сайт будет неправильно отображаться и потеряет внешний вид. Так что используйте обычные шрифты в дизайне. Конечно, есть способы, что бы использовать необычные, экзотические шрифты в дизайне сайта. Вы можете растрировать текст и вставить его как изображение, но этот способ не всегда приемлем, а также поисковые системы не смогут индексировать такой текст.
Можно использовать CSS для загрузки шрифта на компьютере пользователя, хотя он вряд ли разрешит загрузку, и наконец, можно изменить шрифт с помощью jQuery Cufon.