Разработка макета сайта: этапы

Август 10, 2022

Главная
Информатика
Разработка макета сайта: этапы

Содержание

2. Макет сайта – это графический образ представления будущего сайта. Прежде чем создать макет сайта вам придется
3. Обязательно заранее спланируйте архитектуру сайта – что и куда будет вести и как будут взаимосвязаны элементы.
4. Далее можно сразу начать рисовать макет сайта в фотошопе, но, даже если делать макет из праздного
5. От удачного выбора цветов зависит восприятие сайта и бренда пользователями. Не советую полагаться на свои силы
6. Эти цвета гармонично сочетаются, и вы можете быть уверены в их привлекательности. С помощью Materialpalette можно
7. Плюсы такого подхода к разработке макета: вы сможете избежать распространенных ошибок, насмотревшись на качественные сайты; поймете,
8. Для начала вам нужно узнать, что такое CMS и какое у нее назначение. Аббревиатура расшифровывается как
9. Самый простой и быстрый способ сделать макет сайта – выбрать шаблон под определенную CMS и переделать
10. Когда вы уже освоились в шаблоне, можно приступать к его нарезке. Отлично, если разрешение вашего экрана
11. Откройте Photoshop и задайте ширину макета сайта 1920 рх. Этого будет достаточно для того, чтобы увидеть,
12. Подберите в шаблоне такую шапку, которая вам нравится. Вырежьте ее с помощью удобного инструмента, откройте документ
14. Скачать презентацию

Слайд 2

Макет сайта – это графический образ представления будущего сайта.
Прежде чем

создать макет сайта вам придется продумать структуру сайта, сделать прототип и выбрать цветовую схему. Обо всем этом по порядку.

Разработка макета сайта: этапы

Слайд 3

Обязательно заранее спланируйте архитектуру сайта – что и куда будет вести

и как будут взаимосвязаны элементы. Можете сделать это в голове, на бумаге.

Этап 1: структура макета сайта

Слайд 4

Далее можно сразу начать рисовать макет сайта в фотошопе, но, даже

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

Этап 2: Создание прототипа сайта

Слайд 5

От удачного выбора цветов зависит восприятие сайта и бренда пользователями. Не

советую полагаться на свои силы – подбор удачного оттенка может занять часы. Поэтому рекомендую использовать готовые палитры цветов для веба. У Google недавно вышел подробный гайд по удачным цветам для материального дизайна (тренд веб-дизайна).

Этап 3: Делаем красивый макет сайта: выбираем цвет

Слайд 6

Эти цвета гармонично сочетаются, и вы можете быть уверены в их

привлекательности. С помощью Materialpalette можно удачно подобрать два цвета – основной и акцент, а также посмотреть, как они будут выглядеть в интерфейсе. Немного больше цветов на Material Design Colors.
Представили сайт? Сделали прототип? Выбрали цвета? Теперь можно перейти к созданию самого макета. Рассмотрим один из вариантов.

Слайд 7

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

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

Способ №1. Нарезка макета из шаблона сайта

Слайд 8

Для начала вам нужно узнать, что такое CMS и какое у

нее назначение. Аббревиатура расшифровывается как Content Management System (система управления контентом).
Современные CMS используются крайне широко: без них сложно обойтись любой компании, которая выходит на интернет-площадки и нуждается в собственном сайте.

СMS

Слайд 9

Самый простой и быстрый способ сделать макет сайта – выбрать шаблон

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

Слайд 10

Когда вы уже освоились в шаблоне, можно приступать к его нарезке.

Отлично, если разрешение вашего экрана 1920 рх или больше – это позволит просто делать скриншоты частей сайта и соединять их в редакторе. Работа с макетом начинается с шапки (header), далее – разные блоки (body), в конце – подвал (footer).

Что дальше? Подбираем размер макета сайта, режем и клеим

Слайд 11

Откройте Photoshop и задайте ширину макета сайта 1920 рх. Этого будет

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

Шаг 1. Выбираем ширину макета сайта

Слайд 12

Подберите в шаблоне такую шапку, которая вам нравится. Вырежьте ее с

помощью удобного инструмента, откройте документ в Photoshop и вставьте туда (Ctrl+V). С помощью инструмента перемещения (V) поместите шапку вверху. Мне нравится шапка с topbar, где есть контактная информация о компании.

Шаг 2 . Продолжаем создание макета сайта в Photoshop

Пример шапки сайта