Каким должен быть дизайн сайта.
Дизайн – это первое, на что обращает внимание пользователь, зайдя на интернет-ресурс. Разработка дизайна – важная составляющая для любого сайта. Путешествуя по просторам интернета, вы наверное замечали, что одни веб-странички притягивают взгляд, другие же хочется закрыть и больше туда не возвращаться.
Почему на одном сайте, порой забываешь зачем пришел, разглядывая дизайн, его оформление, расположение элементов, а на другом, при просмотре в течении пары секунд, еще как минимум минут пять рябит в глазах от ядреных цветов и корявости в макете? Все зависит от web-дизайнера. Кто-то мастер своего дела, а у кого-то руки из ж… одного места. Что за понятие веб-дизайн? Из чего оно складывается.
Web-дизайн – это не только внешнее оформление сайта. На нем должны быть грамотно расположены элементы, а так же легко читаемый текст, и самое главное – он должен быть удобным для пользователя. Размещение информации на сайте должно быть четко продумано и оформлено соответствующим образом. Веб-дизайнер должен уметь не только хорошо рисовать и правильно подбирать цветовую гамму, но и смотреть на свой шедевр глазами посетителя.
Основные правила веб-дизайна.
1. Следует уделить большое значение цветовой гамме для вашего сайта. Все страницы должны быть оформлены в одном стиле, чтобы у посетителя не возникло чувство путаницы и непонимания, а создалось впечатление от сайта, как от источника информации. Для веб-страниц хорошо использовать мягкие и пастельные тона. Избегайте очень ярких и пестрых цветов, и не переусердствуйте с графикой.
2. Очень важно определиться с шрифтами на сайте. Рекомендуется использовать стандартные шрифты, такие как: Arial, Tahoma, Verdana, Courier, Cosmic Sans, Times New Roman. Эти шрифты есть у всех пользователей, поэтому отображаться на сайте они будут корректно. Если необходимо написать каким-то особенным шрифтом, используйте его в виде картинки, формата gif. Подробнее о шрифтах можно прочитать в посте Каким должен быть шрифт для сайта.
3. Рыба. В идеале, лучше использовать реальное содержание. Если такового нет, используйте текст, близкий по своему типу. Многим заказчикам, да что там заказчики, и дизайнерам не нравятся эти стандартные надписи « Lorem ipsum dolor…». Будьте креативнее, вставьте текст другого содержания.
Существует два основных вида дизайна – это уникальный дизайн и шаблонный. Остановимся подробнее на каждом.
Уникальный дизайн. Это тот дизайн, который отрисован с нуля, под конкретный заказ. Дизайнер сам подбирает оформление, создает креативные элементы, разрабатывает логотип (если это требуется). Заказчик, в основном всегда, дает полную свободу действий. После этого дизайн утверждается или вносятся поправки.
Шаблонный дизайн. Дизайн, который разрабатывается на основе созданного шаблона, но это не означает, что у кого-то есть такой же. Работодатель часто предоставляет рисунок-набросок, из которого необходимо сделать качественный макет в фотошопе. Разработка дизайна по шаблону значительно уменьшает время на его изготовление. Стоимость такого шаблона стоит на порядок ниже уникального.
Дизайн сайта по сетке.
Начинать разработку дизайна необходимо прежде всего с модульной сетки. Сетка образует собой блоки, равномерно разделенные по всей площади макета. Даже если вы профессионал в своем деле и не пользуетесь сеткой, используйте хотя бы направляющие в макете. Верстальщик вам потом скажет спасибо.
Ваш макет должен быть разделен на группы слоев, т.е. необходимо иметь папки с соответствующими названиями основных блоков. Каждый слой должен быть подписан правильно. Названия, такие как «Layer1», «Layer2». «Layer10» недопустимы. Если какие-то элементы макета состоят из нескольких слоев, они должны быть объединены в подгруппу внутри родительской группы.
Шрифты так же необходимо использовать в отдельных папках. Чтобы верстальщик потом не искал и не матерился, отыскивая нужные слои. Какие шрифты правильней всего использовать я рассказала выше. Шаблон выглядит достойно, когда используется не более 3-х шрифтов.
Макет должен быть в пикселях.
Пиксели и только пиксели. Размер элементов, размер шрифтов и самого макета должно быть в пикселях. Так же очень важно все округлять. Например, шрифт 17,5 пикс. округлите его до 18.
Элементы дизайна при наведении.
Вроде бы разобрались с правилами в макете, теперь необходимо подумать о том, как будет видеть его верстальщик.
В макете укажите простые ссылки, при наведении курсора и посещенные ссылки.
Меню в обычном состоянии и активное.
Цитаты, коды и таблицы.
Подразделы, выпадающее меню.
Списки в меню (упорядоченные и не упорядоченные.
Это как минимум, что нужно сделать при передачи макета в руки верстальщику. Обдумывайте все мелкие детали, по возможности ничего не упуская. Делайте заметки для дальнейшей верстки шаблона.
Что нужно сделать, прежде чем садиться за работу на компьютере.
Профессионал ли вы или начинающий веб-дизайнер, перед тем как приниматься за работу в фотошопе, возьмите лист формата А4, карандаш/ручку (кому что удобнее), и нарисуйте схематично на листе шаблон вашего будущего дизайна. Не забывайте главное правило – двигаться от большего к меньшему. Тщательно продумайте свой проект, найдите идею и составьте композицию на бумаге. Все эскизы начинайте с сетки и компоновки блоков, а так же не забывайте о расположении баннеров на сайте. После этого можете приниматься за мелкие детали.
При работе в фотошопе учитывайте пожелания заказчика, касающиеся того, какой должен быть макет, фиксированный или резиновый. Проверяйте и корректируйте каждый элемент в сетке, чтобы не получилось, что один блок заедет на другой, а текст уползет в сторону, при минимальном сжатии сайта.
Сайт должен вызывать у посетителя чувство комфорта, благодаря правильному расположению информации на странице, а так же цветовой гамме.
Быть стильным, подчеркивать имидж компании.
Сочетаться с фирменным стилем компании.
Страница должна быть легко загружаемой. что бы пользователи с медленным интернетом не психовали, в ожидании пока прорисуется вся страница.
Использовать только стандартные шрифты. Или же картинкой, если на сайте будет присутствовать художественный шрифт.
У вас должна быть подписана каждая папка и каждый слой. Кстати, не забывайте удалять невидимые слои, которые случайно были использованы в работе, но в конечном итоге не понадобились.
К макету должна прилагаться пояснительная записка.
Минимальная ширина макета должна равняться 1000 px. для комфортного просмотра на мониторах с маленьким разрешением.
Слои ни в коем случае не должны быть склеены.
Не удаляйте направляющие. т.к. они могут пригодиться верстальщику. И помните, что все должно быть выровнено строго до пикселя, пол пикселя – не допустимо.
Макет должен быть предоставлен в PSD варианте, плюс скриншот.
Чем сайт качественней, привлекательней и удобнее, тем больше шансов, что посетитель вернется на него вновь, и тем больше он будет заметен среди других. Создание сайта дело творческое, и многое зависит от воображения и таланта мастера. Разработка дизайна – дело далеко не простое, поэтому дизайнер должен полностью «вжиться» в материал.
P.S. Это первый пост, прошедший отметку в 5000 символов. Потихоньку выполняю свои цели и планы на год.
Еще статьи по теме.
Какой ноутбук выбрать для дизайнера.
Этапы разработки web-сайта.
Какие бывают web-баннеры.
Расположение элементов в веб-дизайне.
Подбор цветового решения для веб-сайта.
Так и не понял зачем тут рыба. Администрация если пишите про рыбу то почему конкретно не объясняйте что это.это Ваша ошибка.Делайте сайт для Всех а не только для отдельной группы.Да после моего сообщения последует наверное такие сообщения как,а что ты тут делаешь если не понимаешь.Сразу хочу ответить таким людям если будут.А что ты до сих пор не создал фейсбук если такой умный.Администрации сайта на будущее:пишите доступней каждому Вашему читателю и тогда к Вам потянутся.Удачи.
Спасибо за комментарий, Марио, вы все правильно подметили, просто бывают такие моменты, все удержать в голове невозможно, для этого и существуют комментарии под статьей, что бы что-то добавить или уточнить 
Рыба в веб-дизайне — временное наполнение макета страницы для имитации её законченного вида (Википедия.
