Вы находитесь на странице: 1из 4

Урок №1

Введение в профессию
Конспект

Виды сайтов 1
Одно- и многостраничники 1
Классификация сайтов 2
Выводы 4

Виды сайтов
Одно- и многостраничники
В зависимости от количества страниц сайта, из которых он состоит, они делятся на
одно- и многостраничные.

1. Одностраничные (одностраничники) – сайты, которые состоят лишь из одной


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

Примеры сайтов одностраничников:


1. www.julia-music.ru - сайт музыканта.
2. https://theplantpeople.com.au - большой информативный лендинг, с несколькими
товарами во внутренних страницах. Вся информация помещена на главную страницу,
чтобы закрыть все основные вопросы пользователя о товаре. Удобно и просто

2. Многостраничные – сайты, состоящие из нескольких или многих страниц,


связанных между собой целевыми действиями (т.е. имеется главная страница, а
переход на внутренние происходит путем клика на целевой объект - кнопку, пункт
меню и т.д.).

Примеры многостраничников:
1. www.lamoda.ru - интернет-магазин.
2. highlights.guru - сайт нашей школы.

Классификация сайтов
В зависимости от задач, решаемых сайтом, они делятся на:
- сайты-визитки
- лендинги
- интернет-магазины
- новостные ленты
- социальные сети

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

1. Сайт-визитка – тип сайта, основной задачей которого является познакомить


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

Сайт-портфолио – это один из вариантов сайта-визитки, их создают почти все


фотографы и дизайнеры, чтобы показать свои работы и дать контакты для связи.
Например, korneeviktor.com - сайт фотографа из Минска.

Корпоративный сайт также одна из разновидностей сайта-визитки. Это большие


многостраничные сайты, которые рассказывают о деятельности и структуре компании,
а затем также предоставляют контактные данные для связи. Например,
www.rosatom.ru - корпоративный сайт компании “РосАтом”.

2. Лендинг (посадочная страница, landing) – тип сайта, который нацелен на “продажу”


конкретного вида товара или услуги.
Основной особенностью такого типа сайтов является наличие CTA-элемента (call to
action, призыв к действию) – это такой элемент сайта (чаще всего кнопка), который
должен побуждать пользователя к его нажатию и выполнению определенного рода
действия (заказать звонок, оставить заявку и т.д.). Задача веб-дизайнера сделать
CTA-элемент привлекательным и видимым для пользователя.
Лендинг – это всегда одностраничный сайт, это создано для того, чтобы пользователь
сайта не отвлекался от продажной части сайта, переходя на внутренние страницы (он
должен быть максимально сосредоточен на том, что ему “продают”).

Примеры:
1. www.ecobudusa.com/Home - лендинг, который рассказывает про крутые и
современные фильтры для воды, и периодически предлагает пользователю нажать на
кнопку “enquire now” (заказать сейчас) - это и есть CTA-элемент.
2. demo.artureanec.com/html/landium/index_3.html - лендинг, который рассказывает о
платформе, на которой можно создавать простые лендинги. В качестве CTA-элемента
тут выступают кнопки “order now” (заказать сейчас), которые позволяют купить
определенный план.

3. Интернет-магазин – тип сайта, основной задачей которого является продать товар


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

Примеры:
www.mvideo.ru - магазин электротехники.
www.hardgraft.com - магазин сумок и кожаных аксессуаров.

4. Социальные сети – тип сайтов, которые основан на принципе постов и общения


между пользователями в виде сообщений. Основная особенность соцсетей в их
“бесконечном скроллинге” (скроллинг – это прокрутка сайта), вспомните, как мы иногда
бездумно скроллим ленту новостей в соцсетях. Кстати, именно от этого привычного
для многих пользователей стали появляться “бесконечно длинные” лендинги вместо
компактных многостраничников.

Примеры:
www.vk.com
www.instagram.com

5. Новостные ленты – тип сайтов, отвечающий за публикацию последних новостей в


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

Примеры:
lenta.ru - хороший пример новостного сайта, в котором грамотно расставлены акценты
на самом важном.
meduza.io - современный и понятный новостной сайт.

Каждый из приведенных типов сайтов отвечает за решение определенной задачи.


Перед тем, как начинать рисовать сайт, поговорите с заказчиком и определите, какую
же задачу должен решать именно его будущий проект. Часто бывает так, что заказчик
приходит и говорит “нарисуй мне лендинг”, а в итоге оказывается, что в его понимании
сайт должен выполнять функцию совсем не продажи, а лишь знакомства с компанией.
Так что не стесняйтесь уточнять подобные вещи у заказчика в самом начале работы, а
то в итоге окажется, что вы рисовали совсем не то..
Выводы
- В зависимости от задач сайта выделяют разные его виды;
- Начинающим веб-дизайнерам мы настоятельно рекомендуем начинать рисовать
макеты с одностраничников (идем от простого к сложному).