Сайт

Создание макетов сайта: Пошаговая инструкция, как создать макет сайта самостоятельно. Онлайн или в Photoshop

06.07.2023

Содержание

Веб-дизайн. Создание макетов сайтов — курсы в Санкт-Петербурге

  • О курсах
  • Правила приёма
  • Учебный процесс
  • Документы
  • Расписание
О курсах Правила приёма Учебный процесс

Расписание

  • Каталог курсов
  • Онлайн курсы
  • Продукты и технологии
  • Производители
  • Поиск курса
  • О программе
  • Записаться
  • Текущие занятия
  • Стоимость
  • Требования
  • Содержание

Уровень сложности:

Длительность курса: 40 ак. ч.

График обучения: 5 дней по 8 ак.ч. или 10 дней по 4 ак.ч.

Аннотация

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

В нем мы уделяем особое внимание созданию полноценного UX, и low-fidelity-прототипированию, ведь именно от правильно продуманного «скелета» зависит поведение пользователя на сайте и, соответственно, конверсия. Мы рассмотрим как стандартные пользовательские истории, так и уникальные истории из рабочей практики преподавателя.

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

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

Преподаватели

  • Медведев Андрей Владимирович

Курсы, в освоении которых помогут приобретенные знания

  • Пользователь ПК (Windows 7, MS Word 2010, Internet)

Курсы связанных направлений

  • Компьютерный дизайн
  • Интернет-технологии
  • CSS
  • HTML
  • Adobe Photoshop
  • Растровая графика
  • Векторная графика
  • Графический дизайн

Курс пока не поставлен в расписание.

Оставить заявку

Сегодня занятий по этому курсу нет.

16 000 ₽

Расчёт стоимости с учётом возможных скидок

10%
14 400 ₽

15%
13 600 ₽

20%
12 800 ₽

19 500 ₽

Скидки предоставляются в зависимости от количества слушателей, суммы договора и других условий, оговариваемых с Заказчиком.

Расчёт стоимости с учётом возможных скидок представлен как справочная информация. Фактический размер скидки может несколько отличаться из-за округления значения суммы.

Внимательно ознакомьтесь с условиями действующих акций и скидок…

Курс ориентирован на слушателей имеющих уверенные навыки работы в MS Windows, обладающих базовыми знаниями об архитектуре компьютера и периферийных устройствах.

Вступительное тестирование

Тест № ВКТ-121 Операционная система MS Windows
  • Работа с файловой системой.
  • Работа с внешними устройствами.
  • Операции с файлами.
  • «Горячие клавиши» операций с файлами.
  • Понятие файла, папки (имя, расширение, тип, размер).
  • Основы работы в программе MS Word.
  • Ввод и редактирование текста.
  • Работа с основными элементами MS Windows.
  • Открытие и сохранение документов.
  • Буфер Обмена.
  • Копирование и перемещение данных через Буфер Обмена.
  • Ярлыки: определение, виды, способы создания, операции.
  • Панель задач: назначение.

Занятие 1. Начало работы с Adobe Сreative Cloud

  • Преимущества использования Adobe Creative Cloud
    Облачное хранение данных, обновления, расширенные возможности.
  • Подготовка растровой графики в Adobe Photoshop CC
    Настройка рабочего пространства. Горячие клавиши.
    Изменение размеров растровых изображений.
    Алгоритмы интерполяции.
    Масштабирование с учетом содержимого.
    Инструменты обрезки.
  • Маскирование
    Способы сокрытия пикселей слоя.
    Виды масок и варианты их использования.
  • Корректирующие слои
    Применение команд цветовой и тоновой коррекции.
    Способы ограничения действия корректирующих слоёв.
    Аналоги применения цветовой коррекции в CSS3.

Практические работы:
«Подготовка изображений для сайта».
«Цветовые дизайн-решения».

Занятие 2. Работа со служебными наборами в Adobe Photoshop CC

  • Логика работы со служебными файлами
    Способы профессионального использования служебных наборов и предустановок.
    Сохранение, импорт/экспорт настроек.
  • Работа со слой-формами и образцами цвета
    Расширенные возможности форм.
    Использование градиентов, образцов цвета для веб-макетов.
    Импорт данных о цвете. Палитра Kuler.
  • Работа со шрифтами
    Установка настроек шрифта для веб. Веб-типографика.
    Решение проблем использования нестандартных шрифтов.
    Создание пользовательских стилей текста.
    Иконочные шрифты.
    Конвертирование шрифтов
  • Применение слоевых эффектов. Стили
    Использование режимов смешивания.
    Настройка Blending Options.
    Пользовательские стили.  
    Ограничения применения слоевых эффектов в CSS3.
  • Создание паттернов
    Алгоритмы создания бесшовных паттернов.

Практические работы:
«Анатомия слоевого эффекта».
«Цветовые дизайн-решения».
«Создание паттернов».
«Элементы веб-интерфейса».

Занятие 3. Введение в HTML

  • Использование текстового редактора Adobe Dreamweaver CC  для создания гипертекстовых документов.
  • Встраивание HTML тегов. Основные структурные теги, метаинформация, заголовок документа.
  • Форматирование и разметка документа.
  • Создание гипертекстовых ссылок.
  • Встраивание изображений.
  • Создание списков: упорядоченные, неупорядоченные, списки определений.

Практические работы:
«Верстка примитивного сайта на HTML5».

Занятие 4. Введение в CSS

  • Оформление структурных элементов.
  • Свойства текста, выравнивание.
  • Свойства ссылок.

Практические работы:
«Применение стилей CSS к сайту».

Занятие 5. Структура сайта, изучение аналогов и создание wire-фреймов в Adobe Photoshop CC и Adobe Illustrator CC 

  • Построение схемы сайта
  • Элементы страницы
    Стандартные элементы страниц
    Виджеты
  • Изучение аналогов

    Зарисовка прототипов аналогов
    Определение преимуществ и недостатков интерфейсов аналогов
  • Шаблоны проектирования
    Правила юзабилити.
    Проектирование макетов под различные размеры устройств.
    Алгоритмы построения гибких модульных сеток.
    Шаблоны 960 Grid, Boilerplate и Twitter Bootstrap.
  • Создание прототипа сайта
    Стандартные блоки сайта
    Элементы с состояниями

Практические работы:
«Исследование и зарисовка аналогов».
«Гибкие сетки».

Занятие 6. Создание прототипа макета сайта в Adobe Photoshop CC

  •  «Умные объекты»
    Профессиональное использование Smart Objects.
    Применение «умных» трансформаций.
    Профессиональное использование фильтров.
  • Организация слоев
    Режимы блокировки. Фильтрация слоев.
    Создание групп слоев. 
    Организация вариантов дизайн-решений. Палитра Layer Comps.

Практические работы:
«Гибкие сетки».
«Внедрение умных объектов».
«Создание макета веб-сайта».

Занятие 7. Создание анимированного прототипа мобильного интерфейса в Adobe After effects.

  • Подготовка графики в Photoshop
    Возможности и ограничения копирования CSS со слоев.
    Экспорт информации о шрифте.
    Дополнительные средства генерации стилей для Adobe Photoshop CC.
  • Подготовка графики для анимации
    Нарезка макета. Slices.
    Оптимизация графики. Форматы оптимизации.
    Критерии выбора формата оптимизации.
    Генерация содержимого по названию слоя.
    Подготовка изображений для дисплеев Retina.
  • Создание анимированного прототипа меню
    Средствами Adobe after effects.
  • Тестирование адаптивности
    Настройка адаптивного прототипа.

Занятие 8. Создание интерактивных прототипов (Adobe XD, Axure, Sketch)

  • Adobe XD
    Интерфейс графического редактора.  
    Возможности программы. Создание анимированного прототипа страницы.
  • Axure
    Интерфейс графического редактора.
    Возможности программы. Создание анимированного прототипа страницы.
  • Дополнительные возможности CSS Трансформация элементов страницы. Анимация средствами CSS. CSS фильтры и blending.

Занятие 9.

Использование SVG

  • Cinemagraph
    Требования к контенту. Подготовка видео. Создание «Живой фотографии» средствами Adobe Photoshop CC.
  • Использование векторной графики
    Формат SVG. Подготовка и оптимизация файла.
    Способы подключения. Анимация SVG. Создание масок прозрачности и отсечения.

Занятие 10. Экзамен


Виды макетов сайта. Комбинированный макет сайта

Продолжаем рассмотрение темы «Комбинированный макет сайта». В прошлой статье мы подробно остановились на том, как определить размеры комбинированного макета сайта, а точнее его высоту и ширину. В сегодняшней статье мы поговорим об остальных особенностях связанных с созданием комбинированного макета сайта.

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

Динамического изменения размеров разработчик добивается на стадии верстки и кодинга сайта, а вот учесть все нюансы которые возникают при динамическом изменении размеров необходимо на стадии разработки и создания комбинированного акета сайта.

И так начнем по порядку и остановимся на трех основных особенностях, которые необходимо учитывать, при разработке комбинированного макета сайта, в том случае, когда планируется изменение их размеров.

Комбинированный макет сайта

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

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

Во-вторых, тщательно подбирайте шрифты для контента сайта. Вот несколько правил, которые помогут при выборе шрифта. Такие шрифты, как Times New Roman, являются шрифтами с заческами. Их следует применять для русскоязычных сайтов с серьезным содержанием, при этом размер величины шрифта должен быть в пределах 8 –12 pt. Все параметры шрифта при этом определяются правилами CSS.

Шрифты без засечек, на подобии Tahoma, Arial, как правило, применяются уже для сайтов с более легким, развлекательным материалом. Если на вашем сайте предусмотрены широкие модули с контентом, то для удобства чтения лучше применять шрифт с засечками, это будет способствовать лучшему восприятию текста в целом.

Комбинированный макет сайта

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

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

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

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

Этапы создания макета сайта. Часть 1 Определение размеров макета сайта.

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

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

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

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

Определение размеров макета сайта

И так вы решили создавать макет сайта с фиксированной шириной. Как показывает практика разрешение монитора 1024х768рх – это-то разрешение, которое на сегодняшний день остается одним из преобладающих. Поэтому, что бы избежать горизонтальной полосы прокрутки, ширина макета не должна превышать размер 1024рх. Однако если мы поставим 1024рх, то при появлении вертикальной полосы прокрутки сразу же появится и горизонтальная, потому что к 1024рх добавится 24рх, а именно ширина той самой вертикальной полосы прокрутки. Исходя из всего этого и учитывая, что вы можете поместить в рамку свой макет или добавить внешнюю тень, общепринятой шириной макета является 960 – 980рх.

При этом начальная высота макета сайта не столь критична, потому что в любое время вы можете ее изменить. Увеличить или уменьшить в зависимости от объема информации, которую необходимо разместить на странице сайта. За основу берется 500 – 600рх. Таким образом, при создании макета для сайта с фиксированной шириной при выборе размеров нового изображения можно остановиться на размере 980х550рх.

В принципе ни чем не отличается выбор ширины и высоты будущего макета при создании макета для адаптивного сайта. Различие одно, что вам придется создавать макет для определенного разрешения отдельно и поэтому для каждого разрешения подбирается своя ширина. Если точнее то судите сами, при ширине разрешения 1024рх мы отнимали 44 – 64рх. Возьмите соотношение и вы получите тот коэффициент на который необходимо уменьшить ширину макета для того или иного разрешения.

Определение размеров макета сайта

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

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

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

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

Определение размеров макета сайта

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

Если же ширина комбинированного сайта будет изменяться в определенных пределах, ну допустим от 960 до 1900рх, то соответственно ширина макета может выбираться, как я описывал для резиновых и эластичных сайтов. Дополнительную информацию по выбору размеров макета для комбинированного сайта, так же можно найти в статье «Виды макетов сайта. Часть 5 Комбинированный макет сайта».

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

Этапы создания макета сайта. Часть 2 Определение фона для макета сайта.

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

И так, в разработанном вами дизайне предусмотрен фон, на котором будет располагаться непосредственно рабочая область сайта. При этом вам обязательно это необходимо отразить в создаваемом макете. Для этого достаточно к уже определенной ширине макета добавить 40 – 60рх.

То есть, если вы разрабатываете шаблон для сайта с фиксированной шириной и определили его размеры, как 960х550рх, в дальнейшем вам необходимо установить размеры изображения (макета) равные 1020х550рх. На этом исходном слое и размещается фон для макета, а на следующем слое уже определяется рабочая область будущего сайта. Таким образом, мы получаем задуманное фоновое сопровождение рабочей области сайта.

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

Определение фона для макета сайта

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

• Цветовой фон. Фон, который предусматривает использование однородного цвета или какого либо градиента. Иногда это может быть применение сразу нескольких цветов. Такие фоны легко заполняют все свободное пространство окна браузера и не требуют сложных манипуляций при верстке сайта;

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

Что касается работы с бесшовным фоновым изображением, то как и в первом случае особых хлопот такой вариант при верстке сайта вам не доставит.

• Фон из полногабаритного изображения. В данном случает в качестве фона используется изображение. Это изображение должно занимать всю свободную область окна браузера. При этом уже правилами CSS создается эффект, такой, что фоновое изображение стационарно, а перемещение рабочей области сайта по вертикали происходит на фоне стационарной картинки.

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

Определение фона для макета сайта

• Комбинированный фон. Это сложный фон, который предусматривает использование в совокупности цветовой составляющей, бесшовных фоновых изображений, а так же изображений и картинок. Современные возможности в сайтостроении, а конкретней правила CSS позволяют без труда создавать самые сложные комбинированные фоны. Поэтому не стоит бояться экспериментов.

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

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

И последнее при создании макета сайта, если у вас нет конкретного решения по фону для будущего сайта, оставьте это решение на окончание работ. Поверьте создать фон для уже готового макета, будет намного проще, нежели отталкиваться от пустого места. И на этом на сегодня, пожалуй, все, читайте мой блог, комментируйте статьи мне очень интересна ваша оценка.

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

Продолжаем рассматривать тему «Этапы создания макета сайта» и создавать свой макет для будущего сайта. В предыдущих двух статьях мы определись с:

• Размерами будущего макета сайта;

• Основным фоном для макета сайта.

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

Если ваша работа по созданию сайта плановая, и вы уже прошли подготовительный этап «Разработка структуры сайта». Если вы разработали «Web-дизайн сайта», а сейчас вышли на финишную прямую в этом вопросе и создаете «Макет сайта». То у вас должна быть разработанная модульная схема сайта.

Разметка макета сайта

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

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

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

В первоначальной разметке, которая составляется до, какой либо, прорисовки макета сайта, в первую очередь выделяются основные модули сайта. Выделяются шапка(header), основная часть(content) и подвал(footer). Размеры шапки и подвала, как правило, фиксированные, поэтому величина их определяется согласно уже имеющимся правилам. Все это, как правило, учитывается при разработке и создании модульной схемы сайта. Если вы не знаете, как это делается, прочитайте мою статью «Создание внешней структуры сайта. Часть 2. Модульная схема сайта».

Разметка макета сайта

Кроме основных модулей в процессе разметки макета сайта, возможно, некоторое увеличение детализации макета сайта. Что имеется ввиду. На этапе разметки макета сайта вы можете включить в разметку дополнительные блоки в основной части и других модулях. К этим дополнительным модулям, как правило, относятся колонки вертикального меню и дополнительной информации сайтбары (sidebar), область горизонтального меню и т.д.

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

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

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

Этапы создания макета сайта. Часть 4. Работа над «шапкой» (хедером) сайта.

Продолжаем рассмотрение темы «Этапы создания макета сайта». А так же продолжаем создавать свой макет для будущего сайта. В предыдущих статьях мы определись с:

• Размерами будущего макета сайта;

• Основным фоном для макета сайта;

• Разметкой макета сайта.

Сегодня мы начнем создание непосредственно макета и остановимся на создании «шапки» (хедера) сайта.

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

Если вы уже схематически проработали хедер для сайта, то тогда можно приступать к его созданию:

Шаг №1. Это определение фона хедера. Как и основной фон для макета, фон для хедера может быть простым цветовым фоном, текстурным фоном, фоном из полногабаритного изображения, а так же комбинированным фоном. Подробней об этом читайте «Этапы создания макета сайта. Часть 2 Определение фона для макета сайта».

Работа над хедером сайта

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

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

Шаг №2. Это вставка в хедер отдельных графических элементов. Не забывайте, что хедер – это тот элемент сайта, который посетитель видит в первую очередь. Именно поэтому не ограничивайте визуальное наполнение хедера лишь фоном. Довольно эффективно на функциональность хедера влияет наличие в нем графических элементов, которые позволяют посетителю безошибочно определить тематику сайта.

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

Шаг №3. Это вставка в хедер основного элемента сайта. Как правило, для только разрабатываемого сайта, основным элементом хедера является его название, которое можно дополнить слоганом сайта. Текст при этом можно выделить эффектами тени и зеркального отражения, что придаст тексту объем и выделит его среди остальных объектов хедера.

Работа над хедером сайта

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

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

Шаг №4. Это размещение на хедере запланированных дополнительных модулей. Я не зря написал дополнительных. По своему функционалу – это могут быть основные модули сайта, но в структуре хедера они должны быть все, же дополнительными и не определять дизайн и привлекательность хедера сайта.

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

На этом на сегодня мы прервемся и продолжим рассмотрение темы «Работа над «шапкой» (хедером) сайта» уже в следующей статье.

6 правил создания сеток в веб-дизайне

Поднимите свои знания в области веб-дизайна на новый уровень и изучите передовой опыт использования сеток при разработке веб-сайтов.

Содержание

  • Что такое сетка веб-сайта?
  • Роль сеток в веб-дизайне​
  • Рекомендации по использованию сеток веб-сайтов