+7(919)219-14-03
Персональный менеджер
Веб-дизайн колледж. Создание главной страницы сайта

Веб-дизайн колледж. Создание главной страницы сайта

Главная страница сайта - Ее еще называют домашней страницей. Это та страница, на которую пользователь попадает при открытии сайта. Чтобы вернуться на главную страницу сайта, необходимо кликнуть на логотип компании.

12 июля в 17:30

Урок №3 Веб-дизайн колледж. Создание главной страницы сайта

В зависимости от того, какой тип сайта перед нами, главная страница может быть:

  • единственной ( - единственной (одностраничник - лендинг, сайт-визитка)
  • одной из многих (многостраничник - корпоративный сайт, новостная лента, интернет-магазин и т.д.)

Сбор контента для проекта.

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

  • тексты
  • шрифты
  • фотографии/иллюстрации
  • иконки
  • модульные сетки
  • мудборд
  • примеры композиционных решений
  • прототип

Удобство хранение контента.

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

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

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

Создание главного экрана.

Главный экран - первый раздел главной страницы макета.

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

Основные проблемы при создании главного экрана:

1) Навигация (обычное меню или гамбургер). Почитайте на досуге статью: "Обычное меню против гамбургера"
2) Размещение текста на фотографии
3) Иерархия текстовых блоков
4) Композиция
5) Создание эффектной типографики

1) Навигация. Если вы разрабатывает макет для десктопа или планшета. то отдавайте предпочтение обычному виду меню.

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

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

Это можно сделать следующим образом:

  • цветокоррекцией (вспоминаем прошлый урок)
  • наложением цвета (чаще всего накладывают полупрозрачный черный цвет)
  • наложением градиента
  • наложением текстуры

3) Иерархия текстовых блоков. Весь контент в макете имеет иерархия значимости, в том числе и текст. Самые важные тексты должна быть выделены, чтобы отличаться от второстепенного текста.

Способы выделения:

  • размер (заголовки чаще всего делаю большого размера
  • размера - от 30 и выше, в зависимости от объема заголовка)
  • начертание (чтобы сделать заголовок заметнее, иногда делают его более жирным)
  • цвет (используйте контрастные с фоном цвета)

4) Композиция. Расположение текста во многом зависит от фотографии. Если фотография симметричная или ее основной акцент находится по центру, тогда и текст будет размещаться по центру.

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

5) Создание эффектной типографики. Для того, чтобы удивить пользователя и подольше его задержать на сайте. Существует прием, который называется: "эффектная типографика"

  • эффекты заведения
  • длинные тени (long shadow)
  • поворот текста
  • коллажирование
  • иллюстрирование

Создание информационных разделов сайта.

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

Самая необходимая информация, которую должен получить пользователь:

  • чем компания занимается
  • какие товары или услуги может предоставить
  • как можно связаться с компанией

Основные трудности при создании разделов:

1) Создание большого текстового блока
2) Размещение текста и фото/видео
3) Создание фотогалереи/портфолио
4) Создание футере

1) Создание большого текстового блока.

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

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

https://www.apple.com/ru/

2) Размещение текста и фото/видео.

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

  • подбирайте текст и фотографии примерно одной насыщенности
  • между текстом и фотографией делайте различимый отступ
  • фотография должна подкреплять суть текстового блока

3) Создание портфолио.

В зависимости от тематики и задач, которые ставятся, раздел “портфолио” может выглядеть совершенно по-разному

Важно понять, что важно увидеть пользователю в первую очередь.

4) Создание футера.

Футер - это нижняя часть сайта, завершающая проект.

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

Видео-уроки:

https://zen.yandex.ru/media/id/5f5a7a2e186bea34b535fa36/vebdizain-kolledj-sozdanie-glavnoi-stranicy-saita-60ae8a38156c7c57e2ba5f5a

1) Дизайн главной страницы сайта. Ее еще называют домашней страницей. Это та страница, на которую пользователь попадает при открытии сайта. Чтобы вернуться на главную страницу сайта, необходимо кликнуть на логотип компании.

2) Практическое занятие по созданию дизайна главной страницы сайта.

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

4) Создание двух главных экранов в фотошопе. Для женской и мужской аудитории.

Мы разобрали модуль №3 Веб-дизайн колледж. Создание главной страницы сайта

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

Урок №2. Веб-дизайн обучение. Технический дизайн. https://zen.yandex.ru/media/id/5f5a7a2e186bea34b535fa36/vebdizain-video-uroki-tehnicheskii-dizain-60a7f97cba5f7856863a1ec1

Веб-дизайн колледж. Создание главной страницы сайта


Подарок внутри! Подписка на обновление блога по Web-дизайну.
Бесплатный подарок для подписчиков нашего блога->
Курсы по Веб-дизайну!
* Поля, обязательные для заполнения
Нажимая "Подписаться", Вы принимаете условия обработки персональных данных.
Теги: Web-дизайн

Другие статьи блога

Агрессия человека
Агрессия человека
Наше слово в Fashion-индустрии. Ещё один уникальный проект от IQSites.
Наше слово в Fashion-индустрии. Ещё один уникальный проект от IQSites.
Курсы по созданию сайтов
Курсы по созданию сайтов

Наверх
array(5) { ["id"]=> int(0) ["ip"]=> string(14) "34.226.244.254" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "d324331b60f74080b8b6114bd8c7e3d4" }