Создание макета сайта

загружено (30)

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

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

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

Определившись с шаблонной сеткой, переходим к ее наполнению. Для этого нам потребуется графический редактор. Использовать рекомендую Photoshop для основного создания шаблона, и фоторедактор Movavi для создания эффектов изображений. Практически любой стандартный сайт (без креативного вмешательства) представляет собой три части: header, content и footer. На макете эти три части должны быть по разным папкам и слои, привязанные к определенным участкам макета, также должны находиться в этих папках. Это удобно и практично. Последующие вложенные подразделы также должны создаваться внутри основных трех разделов.

Обязательно следует отрисовать все активные элементы вроде ссылок или кнопок с их действиями. Это значит, что если при наведении на кнопку она изменяется, то в макете у вас должно быть два состояния этой кнопки: активное и неактивное. Показывая макет клиенту, вы должны показать все возможные варианты изменения состояний элементов, иначе в последствие, возможно, вам придется что-либо переделывать.

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

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

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