Основные правила веб-дизайна

1. Следует уделить большое значение цветовой гамме для вашего сайта. Все страницы должны быть оформлены в одном стиле, чтобы у посетителя не возникло чувство путаницы и непонимания, а создалось впечатление от сайта, как от источника информации. Для веб-страниц хорошо использовать мягкие и пастельные тона. Избегайте очень ярких и пестрых цветов, и не переусердствуйте с графикой.

2. Очень важно определиться с шрифтами на сайте. Рекомендуется использовать стандартные шрифты, такие как: Arial, Tahoma, Verdana, Courier, Cosmic Sans, Times New Roman. Эти шрифты есть у всех пользователей, поэтому отображаться на сайте они будут корректно. Если необходимо написать каким-то особенным шрифтом, используйте его в виде картинки, формата gif. Подробнее о шрифтах можно прочитать в посте Каким должен быть шрифт для сайта?

3. Рыба. В идеале, лучше использовать реальное содержание. Если такового нет, используйте текст, близкий по своему типу. Многим заказчикам, да что там заказчики, и дизайнерам не нравятся эти стандартные надписи «Lorem ipsum dolor…». Будьте креативнее, вставьте текст другого содержания.

Существует два основных вида дизайна – это уникальный дизайн и шаблонный. Остановимся подробнее на каждом:

Уникальный дизайн. Это тот дизайн, который отрисован с нуля, под конкретный заказ. Дизайнер сам подбирает оформление, создает креативные элементы, разрабатывает логотип (если это требуется). Заказчик, в основном всегда, дает полную свободу действий. После этого дизайн утверждается или вносятся поправки.

Шаблонный дизайн. Дизайн, который разрабатывается на основе созданного шаблона, но это не означает, что у кого-то есть такой же. Работодатель часто предоставляет рисунок-набросок, из которого необходимо сделать качественный макет в фотошопе. Разработка дизайна по шаблону значительно уменьшает время на его изготовление. Стоимость такого шаблона стоит на порядок ниже уникального.

Что нужно сделать, прежде чем садиться за работу на компьютере.

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

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

 

Подведем итоги:

1. Сайт должен вызывать у посетителя чувство комфорта, благодаря правильному расположению информации на странице, а так же цветовой гамме.

2. Быть стильным, подчеркивать имидж компании.

3. Сочетаться с фирменным стилем компании.

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

5. Использовать только стандартные шрифты. Или же картинкой, если на сайте будет присутствовать художественный шрифт.

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

7. К макету должна прилагаться пояснительная записка.

8. Минимальная ширина макета должна равняться 1000 px, для комфортного просмотра на мониторах с маленьким разрешением.

9. Слои ни в коем случае не должны быть склеены.

10. Не удаляйте направляющие, т.к. они могут пригодиться верстальщику. И помните, что все должно быть выровнено строго до пикселя, пол пикселя – не допустимо.

Макет должен быть предоставлен в PSD варианте, плюс скриншот.

12. Чем сайт качественней, привлекательней и удобнее, тем больше шансов, что посетитель вернется на него вновь, и тем больше он будет заметен среди других. Создание сайта дело творческое, и многое зависит от воображения и таланта мастера. Разработка дизайна – дело далеко не простое, поэтому дизайнер должен полностью «вжиться» в материал.

 

Верстка

Чтобы нарезать готовый макет на части, и в дальнейшем прикрепить на сайт, потребуется верстальщик. Что такое верстка? Это процесс написания HTML и CSS кодов для веб-страниц. Каждый код отвечает за то, чтобы все элементы на странице размещались там, где нужно. Верстальщик должен знать все особенности браузеров, так как для каждого браузера необходим свой подход верстки.

Виды верстки при создании сайта:

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

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