Сегодня:
Блог: "Основы сайтостроения и веб дизайна"
сайтостроение

Переход на: Главная / Макет сайта /

Этапы создания макета сайта.

АвторАвтор: aklychin

Дата добавленияДата добавления: 23.05.2013

Число просмотровЧисло просмотров: 12975



Здравствуйте уважаемый читатель блога "Основы сайтостроения и web дизайна".


Продолжаем знакомство с материалами темы «Web-дизайн сайта». И сегодня, я думаю, последняя статья из этой серии, которая будет посвящена вопросу создания макета сайта. Почему одна статья по такому важному вопросу? Хочу пояснить сразу, что в данной статье я хочу познакомить читателя лишь с этапами создания макета сайта, а полное описание процесса, в разделе моего блога «Макет сайта».


Этапы создания макета сайта


Если Вы шли последовательно к моменту создания макета сайта, то тогда вы уже имеете:


1. Разработанную концепцию дизайна, то есть:

• индивидуальный или фирменный стиль;

• цветовое решение для сайта;

• дизайн-идею основополагающих страниц сайта;

• дополнительные параметры и технические моменты дизайна сайта.

2. Составленный список модулей сайта;

3. Созданную внешнюю структуру сайта;

4. Созданные заготовки шаблонов специальных элементов сайта;

5. Подобранную и обработанную графику для сайта;

6. Графически проработанные модули сайта.


Таким образом, имея практически всю дополнительную информацию и материалы, можно приступать к разработке непосредственно макета сайта. И так, что же вообще такое макет сайта? И что включает в себя процесс создания макета сайта? На эти вопросы далее я и постараюсь ответить.


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


Этапы создания макета сайта


И так перейдем непосредственно к этапам создания макета сайта. Я бы выделил следующие этапы:


1. Определение размеров будущего макета сайта. Многие практические уроки, как правило, начинаются с фразы «Создадим новый файл в Photoshop шириной столько то и высотой столько то». Откуда берется высота и ширина не понятно, но вот как вам ее определить читайте в разделе «Макет сайта».


2. Определение и установка общего фона макета сайта. Имея, как говорится на руках, цветовое решение по сайту и основные принципы индивидуального или фирменного стиля вам не составит труда определиться с общим фоном будущего макета.


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


4. Работа над «шапкой» (хедером) сайта. Этап сложный и я считаю наиболее ответственный. Здесь должна работать ваша фантазия и логика комплектации данного блока. Почему этап наиболее ответственный? Ведь не секрет, что при загрузке сайта, посетитель в первую очередь видит его верхнюю часть и поэтому первое впечатление во многом зависит именно от хедера.


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


Этапы создания макета сайта


6. Работа над основной частью сайта. Имея эскизы внешней структуры сайта и поблочное деление основной части, проводим при помощи направляющих (при работе в Photoshop) разметку и прорисовываем каждый блок. В текстовые блоки обязательно вставляйте текст, не оставляйте их пустыми. Это поможет иметь более детальное представление о будущем сайте и, конечно же, поможет подобрать наиболее подходящие шрифты.


7. Работа над «подвалом» (футером) сайта. Не стану скрывать, что данный этап наиболее простой при создании макета сайта. Однако если вы все же решили идти в ногу со временем и поместить в футер достаточно информации, то и данный этап займет у вас немало времени на проработку.


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


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


На этом, пожалуй, все. Читайте мой блог, знакомьтесь с новыми материалами и удачи вам.


Поделиться

Добавьте Ваш комментарий и оцените статью:

+ Добавлять комментарии и оценивать статью могут только зарегистрированные пользователи. Если Вы регистрировались, то просто авторизируйте свой аккаунт.


Комментарии к данной статье:


Подписаться на обновления блога

монетизация сайтаРеклама
заработок на сайтеПомощь

Понравился проект?

Внесите вклад в его развитие, пожертвовав любую сумму на один из кошельков:

Z255632435111

R174106546724

Деньги пойдут на оплату серверов, зарплату авторам уроков и развитие ресурса.

В примечании к платежу укажите Ваш email или логин на нашем проекте.

Администрация.

Статистика блога:

Статей: 107

Комментариев: 10

Зарегистрировано: 17

Все права защищены сopyright © Блог - "Основы сайтостроения и веб дизайна" 2012 - 2017