Звоните

8-923-199-2064

прямо сейчас

Либо закажите звонок

Сообщение успешно отправлено.
Спасибо за заявку. В ближайшее время с Вами свяжется наш специалист.
Ошибка! Пожалуйста повторите попытку.

E-mail введён некорректно!

E-mail не должен быть пустым!
Телефон введён некорректно!

Телефон не должен быть пустым!
Поле ввода не должено быть пустым!

Дизайн и верстка сайта

Встречают по одежке

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

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

Что такое web-дизайн

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

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

Цветовая гамма

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

Лучше всего использовать пастельные и мягкие тона, избегать пестрых и ярких красок, а также жутких контрастов.

Шрифты

Не менее важно определиться и  со шрифтами. Не стоит оригинальничать. Главное – читабельность, используйте стандартные шрифты, знакомые всем пользователям (Times New Roman, Cosmic Sans, Courier, Tahoma, Arial, Verdana).

Рыба

Лучше используйте реальное содержание. Но если такового нет, то возьмите близкий по типу текст. Забудьте все эти «Lorem ipsum…», будьте креативнее.

Виды дизайна

Давайте рассмотрим два основных вида – шаблонный и уникальный дизайн.

Уникальный дизайн

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

Шаблонный дизайн

Такой вид разрабатывается на базе уже созданного шаблона. И это вовсе не значит, что он уже используется на другом сайте. Чаще всего заказчик предоставляет рисунок-набросок, на основе которого необходимо создать в фотошопе качественный макет. Этот способ стоит на порядок дешевле, но и времени отнимает намного меньше.

Дизайн по сетке

Разработка дизайна начинается с модульной сетки, образующей собой блоки, разделенные равномерно по площади макета. Многие профессионалы не пользуются сеткой. Если вы относитесь к таковым, то хотя бы используйте в макете направляющие. Верстальщик вас за это поблагодарит.

Слои

Макет необходимо разделить на группы слоев. Нужно создать папки, названия которых будут соответствовать названиям основных блоков. Очень важно правильно подписать все слои. В случае, когда отдельные элементы макета включают несколько слоев, их следует объединить в подгруппу и разместить внутри родительской группы.

Шрифты

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

Пиксели

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

Элементы при наведении

Теперь, когда мы поговорили о правилах в макете, давайте подумаем о том, как увидит его верстальщик

  • - укажите в макете простые ссылки, которые появляются по наведению курсора и посещенные ссылки;
  • - меню активное и в обычном состоянии;
  • - подразделы и выпадающее меню;
  • - таблицы, коды и цитаты;
  • - упорядоченные и неупорядоченные списки в меню.
  • - заголовки.

Это минимум, который необходимо сделать перед передачей макета верстальщику.

Еще несколько советов

  1. Несмотря на уровень вашего профессионализма, прежде чем открыть Фотошоп, возьмите лист бумаги и схематично нарисуйте будущий шаблон.
  2. Двигайтесь от большего к меньшему.
  3. Начинайте эскизы с сетки и блоков, но не забывайте о баннерах.
  4. Учитывайте пожелания заказчика. Он должен определиться, какой макет ему нужен: резиновый или фиксированный.
  5. Все элементы в сетке тщательно проверяйте и при необходимости корректируйте, чтобы блоки не наезжали друг на друга, а текст не уползал при сжатии сайта.
  6. Подписывайте все слои и все папки и не забудьте удалить невидимые слои, которые не понадобились. Следите, чтобы слои не были склеены.
  7. Приложите к макету пояснительную записку.
  8. 1000 px – минимальная ширина макета, позволяющая комфортно просматривать сайт на мониторах с небольшим разрешением.
  9. Направляющие удалять не нужно, они пригодятся верстальщику.
  10. Предоставляйте макет в PSD и прикладывайте скриншот.

Качественная верстка – это наше все

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

Верстка сайта – это формирование интернет-страницы по готовому макету. В процессе создается код страницы с помощью языка разметки гипертекста html, понятного веб-браузерам, а также оформляется при помощи CSS — каскадных таблиц стилей

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

Дизайн и верстка ширины

Чтобы изначально придуманный дизайн страницы не сломался, необходимо учитывать, что мониторы у веб-серферов имеют самые разные разрешения. Сегодня существует два варианта разработки дизайн-макета: резиновый сайт или фиксированный по ширине.

Согласно статистике, большинство используемых ныне мониторов имеют разрешение 1024х768 пикселей. Чтобы не возникала горизонтальная полоса прокрутки, и не искажался дизайн, средняя ширина макета должна быть в районе 800-990 пикселей. Но такая верстка отличается одним существенным недостатком – неэффективным использованием свободной площади.

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

Учитываем кроссбраузерность

На сегодняшний день существуют самые разные браузеры, которые используются для серфинга. В числе наиболее популярных – Chrome, Firefox, Opera, IE. Каждый из них может отображать одну и ту же html-страницу по-разному. Их разработчики пытаются перейти на единый стандарт использования языка гипертекстовой разметки, но еще не пришли к единому мнению. Поэтому важно учитывать кроссбраузерность.

Чистый код

Красивый, чистый код – это правило хорошего тона верстальщика. Код html разметки необходимо красиво отформатировать, включить комментарии и выделить логические блоки.

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

Табличная и блочная верстка сайтов

Надо сказать, что для верстки сайтов используются два принципиально разные способы.

1. Табличная верстка – с помощью таблиц. Она использует элементы разметки, не соответствующие семантике, которую они несут. Это позволяет получить внешние эффекты, поскольку таблицы изначально не предназначались для построения каркаса страниц. С их помощью осуществлялся лишь стандартный ввод данных. Такой способ зачастую значительно затрудняет обработку страниц веб-обозревателем и может вызвать ошибки в коде.

2. Блочная верстка осуществляется с помощью блоков (слоев). Этот способ более удобен с точки зрения разделения оформления и содержания. Он предоставляет намного больше возможностей, код получается компактнее, а скорость загрузки высокой. Настраивать свойства блоков через CSS намного проще.

Верстка слоями позволяет эффективно разрабатывать сайты, которые корректно отобразятся в браузерах.