Пройдя эти 15 шагов к прекрасной верстке веб-сайта, вы узнаете то, что каждый веб-программист, работающий в сфере создания веб-сайтов, должен знать и понять прежде, чем начать новый проект, и на что он должен обратить внимание во время процесса верстки.
Эти шаги охватывают не только дизайн, но и аспекты общих принципов верстки. Следуйте им, и вы скоро будете на пути к созданию профессиональных макетов сайта.
1. Изложите свое видение сайта на чистом листе бумаги
Это кажется очевидным, но в большинстве случаев создания макета веб-сайта дизайнеры сразу начинают творить прямо в Photoshop, прежде чем потратить несколько минут на решение возникающей проблемы. Самая частая проблема — в логичном расположении блоков, и она не может быть решена путем создания градиента или тени. Подумайте о содержание вашего будущего сайта, создайте на листе бумаги расположение блоков и примерный функционал, как бы пройдите все ключевые блоки с точки зрения посетителя веб-сайта. Все это надо сделать, прежде чем начать рисовать тени.
2. Начните свой эскиз с верхнего слоя навигации
В самом начале создания структуры вашего проекта, первое, что надо сделать, это начать с верхнего слоя навигации, так называемый UI (user interface), который решает все проблемы дизайна. Обычно это верхнее меню, которое определяет общий пользовательский интерфейс, это меню объединяет содержание сайта и позволяет перемещаться по нему. Верхний слой навигации может включать в себя и перемещение по компонентам сайта, например, в виде боковых и нижних сайдбаров или меню.
Если вы подойдете к вашему дизайну с этой точки зрения, вы будете иметь четкое понимание структуры сайта при проектировании и остальных разделов и страниц.
3. Добавьте сетку к своему макету PSD
Это даже проще, чем кажется на первый взгляд. Прежде чем приступить к разработке макета в Photoshop, необходимо для начала создать сетку. Нет никаких уважительных причин для запуска проекта без сетки, и если вы этого не сделаете, так или иначе, проект не будет выглядеть так хорошо, как вам хотелось бы.
Сетка поможет вам структурировать расположение различных разделов, она поможет выдерживать конкретные требования к размеру экрана, станет подспорьем при создании адаптивного шаблона, просто будет заставлять вас быть последовательным с точки зрения интервалов в шаблоне и многих других вопросов дизайна.