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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[wpi_designer_button id=9125]

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать макет сайта?

Этой статьей я открываю серию статей посвященных теме «Макет сайта», то есть непосредственному процессу создания макета сайта. И прежде чем рассказывать о процессе создания и конкретных моментах «творчества» стоит, наверное, определиться для себя, а что же вы понимаете под выражением – макет сайта.

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

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

Как сделать макет сайта?

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

То есть, пройдя процесс подготовки и разработки дизайна сайта, у вас автоматически отпадет ряд вопросов связанных с процессом создания макета сайта. Небольшой пример. Когда я начинал разрабатывать свой первый сайт, я просмотрел и прочитал довольно большое количество уроков, в которых показывалась практика создания макета сайта в графическом редакторе Photoshop.

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

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

Как сделать макет сайта?

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

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

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

В конце хочу ответить на вопрос: как создать макет сайта? А создавать его необходимо так. На основе разработанного web-дизайна сайта и имеющейся компьютерной программы составляется, а можно сказать прорисовывается графическое представление будущего сайта. В следующих своих статьях и уроках из цикла «Макет сайта» я уже подробней остановлюсь на практике создания макет сайта.