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

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

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

Узнать подробнее о структуре сайта можно в этой статье: от иерархии страниц зависит успешное SEO-продвижение, удобство для посетителей и продажи.

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

Создать полноценный сайт без знания кода можно с помощью «Конструктора сайтов RU-CENTER». Конструктор поддерживает готовые шаблоны, темы и шрифты — останется только придумать текст и подобрать фотографии.

Первый экран

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

Основные элементы

Заголовок. Часто это название того, что продается на сайте, слоган или вдохновляющая цитата.

Что продается — одежда, бренд — «О, май». Источник: ohmy.ru

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

Кнопка. Можно добавить целевое действие сразу на обложку: те, кто искал именно вас или уже заходил к вам, смогут сразу оформить заказ или перейти к новинкам и акциям.

На что обратить внимание

Не обязательно использовать все и сразу: фоновое изображение, заголовок и кнопку. Часто на главном экране — только картинка.

Пример первого экрана: меню (о нем дальше будет отдельный блок), изображение кольца из последней коллекции, слоган в виде закольцованной бегущей строки и кнопка. Источник: jewelry-in-august.com

Как выглядит сайт на разных устройствах. Во многих конструкторах сайтов можно посмотреть, что увидят посетители, если зайдут с ноутбука, смартфона или компьютера с большим экраном. Либо можно воспользоваться для этого расширением Window Resizer. Фрилансеры и дизайн-студии обычно проверяют этот момент, но лучше прописать его в ТЗ.

Меню и навигация

Понятные меню и навигация помогут посетителю сайта легко найти нужную информацию.

Основные элементы

Кликабельный логотип. Нажав на него, посетитель перейдет в начало главной страницы. Блок «Главная» можно удалить из меню.

Хедер (шапка сайта). Можно добавить меню, контакты, поле для поиска, выбора языка или города. Стоит выносить сюда то, что важно для вашего бизнеса: например, разделы «Доставка» и «Возврат».

Пример хедера. Источник: moscow.petrovich.ru

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

Подчеркнутый раздел «Книги» подсказывает посетителю, где он находится. Источник: popcornbooks.me

Кнопка «Наверх» помогает быстро попасть в начало страницы, а не пролистывать ее вручную. Может быть в виде слова, стрелки вверх или другого элемента.

Пример кнопки «Вверх» в виде стрелки — появляется при скролле. Источник: travki.co/tea

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

Примеры фильтров и сортировки. Источник: ru.puma.com

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

HOME / ЖЕНЩИНЫ / ДЖИНСЫ И ДЕНИМ — это и есть хлебные крошки. Источник: cosstores.com/ru_ru

Перелинковка. Можно добавить на страницу товара блок с подборкой «Вам может понравиться» и предложить перейти на другие страницы сайта.

Пример перелинковки «Вам также понравится». Источник: 365detox.ru

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

Каталог в виде плитки: сперва видишь все категории, что есть — и выбираешь нужную. Источник: periodica.press

На что обратить внимание

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

Фиксированное меню. Можно зафиксировать меню (слева или сверху): посетитель в любой момент при скролле найдет нужный раздел.

Фиксированное меню при просмотре сайта всегда остается слева. Источник: studio-29.ru

Лаконичность. Лучше сделать не более 4−5 пунктов меню, а их названия — из одного короткого слова.

О компании

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

Основные элементы

О проекте, бренде или компании. Кто вы такие, чем интересны и полезны для клиента, ваша миссия, как все начиналось, с какой идеи. Можно добавить сюда ленту из «Инстаграма» или видео и показать процесс создания продукта.

Это не просто картинки о производстве украшений, а гифки. Источник: jewelry-in-august.com/about/

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

Возможности — это тоже о преимуществах. Источник: e-kontur.ru/possibilities

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

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

Факты с цифрами. Цифры легко воспринимаются и привлекают внимание. Оптимально использовать 3–5 факта в цифрах и краткое пояснение к ним. Главное — чтобы они были понятными и классными не для вас, а для посетителей. «В прошлом году мы продали 3 000 смартфонов» — непонятно, много это или мало. А вот цифры у издательства МИФ звучат убедительно: «Мы издали 3 145 книг за 15 лет. Если посчитать, то это — книга за 2 дня».

Факты с цифрами можно подавать нестандартно. Источник: skyeng.ru

Кейсы и портфолио. Собрать истории компаний или клиентов, которые добились успеха с помощью вашего продукта. Рассказать, как вы помогли разным клиентам, какие были задачи, или показать фотографии «до и после».

Пример кейсов. Источник: plantsforfriends.ru/projects

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

На что обратить внимание

Не ставьте иконки ради иконок. Первые попавшиеся в стоках иконки могут смазать впечатление.

Для иконок можно использовать эмодзи, если это выглядит органично. Источник: ru.bookmate.com

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

На этом сайте каждый блок визуально отличается от другого: например, раздел «Курсы» выполнен на черном фоне, а раздел «Микрорубрики» — на белом. Источник: arzamas.academy

Продукты и услуги

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

Основные элементы

Описание проекта, продукта или услуги. Как продукт или услуга помогает решить проблему человека, какую несет пользу, чем интересен или как и зачем создавался: с картинками, видео и доказательствами. В интернет-магазинах это карточки товаров.

Способ приготовления и что во вкусе: информация для любителей спешелти-кофе. Источник: chernyi.coffee

Товарные сетки. Как расположить товары в интернет-магазине, зависит от количества категорий и самих товаров. Например, платья можно расположить в виде плитки товаров: при нажатии на понравившееся откроется поп-ап с карточкой товара.

Пример плитки товаров в категории «Платья». Источник: my812.ru

Пример поп-апа с карточкой товара. Источник: my812.ru

Доставка. Условия, куда доставляете, сколько стоит и куда обращаться за поддержкой.

Возврат. Условия, как сделать и что заполнить. Можно сразу прикрепить формы заявлений.

Все документы по возврату — в одном месте. Источник: chernyi.coffee

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

Источник: stories.com/ru_ru/

На что обратить внимание

Четко дать понять, что предлагается на сайте. Посетитель впервые сталкивается с вашим продуктом, услугой и проектом: пусть за короткое время он максимально полно поймет, что вы предлагаете.

Объяснять понятно для клиента, а не себя. Чем проще и понятнее описание продукта, тем легче будет клиенту принять решение о покупке.

Отзывы

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

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

Пример отзывов в карточке товара. Источник: divan.ru

Форма для заявок, бронирования и записи

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

Форма может быть развернутой, как на скрине, или открываться, когда посетитель нажмет на кнопку (CTA). Источник: excusemyfrench. ru

Блок обычно состоит из заголовка, подзаголовка и формы, или только из заголовка и кнопки. Иногда нужно объяснить, зачем, например, подписываться на вашу рассылку. И стоит настроить страницу благодарности или сообщение, которые будут появляться после подписки: «Спасибо, что подписались на рассылку».

На сайте можно разместить простую форму подписки на рассылку и настроить поп-ап, где уже будут объяснения, зачем стоит подписаться. Источник: vetermagazine.ru

Вопросы и ответы

Этот блок работает со страхами и сомнениями клиентов, которые собираются что-то купить. Можно собрать частые вопросы и развернуто ответить на них.

Посетитель может открыть ответ на вопрос, который его интересует. Источник: postpartum.ru

Блог и новости

Раздел добавляет экспертности и доверия к компании, продуктам или услугам. А еще показывает, что вы растете, меняетесь и не боитесь делиться опытом.

Можно публиковать свежие интервью со ссылками. Источник: lucyzharikova. com/about

Основные элементы

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

В блоге можно подробнее рассказать о преимуществах продукта, о том, как его выбирать и ухаживать за ним. Источник: linentexture.com/blog

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

Источник: detali.net/news

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

Можно поделиться фрагментом лекции, чтобы получить контакт посетителя. Источник: authentic.academy

Публикации. Они выступают как социальное доказательство: о вас пишут, значит, вы существуете. Иногда достаточно добавить логотипы СМИ: даже не читая текст, посетитель может заметить их.

Вариант с логотипами, которые говорят сами за себя. Источник: heisplant.ru

Контакты

Как с вами связаться: адрес, email, телефон или карта с инструкцией, как добраться. Сюда можно добавить форму обратной связи.

Источник: arzamas.academy

Футер

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

Источник: monochrome.ru

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

Перейти ко всем материалам блога

как преподнести пользователю информацию и не нарушить композицию ресурса

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

Что такое информационные блоки

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

Также мы классифицируем информационные блоки на несколько категорий:

1. Текстовый контент. Это блоки, состоящие только из текста. Как правило, к ним относятся описания товаров и их характеристики, блок — описание компании, страницы с условиями доставки и оплаты.
2. Информация в шапке и подвале сайта. В таких блоках размещаются контактные данные, иконки с корзиной, ссылки на страницы с условиями покупки и прочее.
3. Призывы к действию. Данные элементы тоже можно считать информационными блоками, так как все больше дизайнеров помещают в блоки информацию о компании и дополнительных преимуществах при заказе.
4. Поп-апы. Отдельные всплывающие окна с информацией об акциях компании и веб-формами для заказа.
5. Объявления о работе с сайтом. Такие окна сообщают пользователям о технических неполадках или условиях пользования, рассказывают о правилах работы с сайтом.
6. Инфоблоки на карточках товаров. Обычно это описание условий покупки, блоки с описанием алгоритма доставки и оплаты и прочее.
7. Блоки в сайдбаре. Это элементы, расположенные на боковых панелях сайта.

О каждой категории мы поговорим подробнее, разберем особенности дизайна и приведем примеры с различных сайтов.

Текстовый контент: дизайн инфоблоков с текстом

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

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

Предположим, что мы не позаботились о шрифтах и читабельности текста и оформили этот инфоблок так:

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

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

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

Шапка и подвал сайта

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

При создании дизайна таких инфоблоков важно обращать внимание на:

1. Типографику — размер текста, можно ли без усилий разобрать надписи.
2. Цветовую палитру — можно ли заметить надписи на фоне, гармонирует ли текст с основными оттенками на сайте.
3. Иконки — используются ли изображения в шапке, ассоциируются ли иконки с их назначением (например, для поиска чаще всего используется символ лупы, поэтому лучше применять его).
4. Интервалы и пустое пространство — текст не должен наезжать на другие надписи или изображения, должно быть достаточно пространства (подробнее об использовании свободного пространства на сайте можно прочитать здесь).

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

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

Призывы к действию

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

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

1. Обозначить конкретную выгоду. Пользователи охотнее совершают целевые действия, если понимают, какие преимущества получают. Это может быть бесплатный подарок, скидка при первом заказе или что-то подобное.
2. Оформить отличной от основного контента цветовой палитрой. Чтобы привлечь внимание к блоку, можно оформить элемент с помощью ярких цветовых оттенков, градиента или яркого изображения. Так пользователь остановит свой взгляд на блоке и, возможно, совершит целевое действие.
3. Продумать расположение блока. Также важно расположить блок таким образом, чтобы он не нарушил целостной композиции сайта и, в то же время, выделился среди контента. Лучше всего размещать призывы к действию на первом экране (самой просматриваемой части сайта) и встраивать в контент.

Более подробно об оформлении призывов к действию мы писали в нашем блоге.

Поп-апы

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

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

Также некоторые сайты размещают различные интерактивные инфоблоки, которые сворачиваются при нажатии:

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

Однако, не стоит злоупотреблять использованием поп-апов. Часто всплывающие окна воспринимаются посетителями сайта как назойливая реклама. Потенциальный клиент может уйти к конкурентам.

Технические объявления

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

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

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

Блоки в сайдбаре

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

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

При создании дизайна таких блоков необходимо учитывать:

• размеры сайдбара. Как правило, боковая панель занимает от 20 до 40% общего места на странице. Поэтому блоки будут примерно одинаковые по ширине, слишком большой текст не будет помещаться в узкие рамки;
• «баннерную слепоту». Вследствие того, что в сайдбарах часто размещается реклама, пользователи часто стали игнорировать содержимое боковой панели. Чтобы этого не произошло, нужно делать блоки информативными и полезными для посетителей сайта;
• изображения и иконки. Чтобы привлечь внимание пользователя к информации, лучше использовать небольшие изображения, иконки и другие полудекоративные элементы.

Например, на сайте «Лабиринта» все акции отмечены иконками:

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

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

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

Блоки на карточках товара

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

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

При создании дизайна инфоблоков в карточках товара дизайнеру важно учитывать:

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

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

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

BlockSite: блокируйте веб-сайты и оставайтесь сосредоточенными

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

 Сделайте производительность своим приоритетом с BlockSite. 
⭐️Особенности⭐️
Хотите знать, как заблокировать сайт? Мы вас прикрыли! Просто добавьте веб-сайты в свой черный список, а мы сделаем все остальное, мы даже добавим несколько действительно забавных изображений, если вы попытаетесь зайти на сайты, пока они заблокированы 💩
⏰Расширение «Оставайся сосредоточенным»
Теперь вы можете удалить все отвлекающие и вредные веб-сайты из своей жизни, заблокировав их, пока вам нужно оставаться в зоне и работать продуктивно. Вы даже можете установить себе таймер фокусировки и следить за тем, чтобы вы оставались в курсе в течение дня, находясь на работе или в школе.
👨🏼‍💻Режим фокусировки
Функция таймера режима фокусировки позволяет вам контролировать свое расписание с помощью таймера техники Pomodoro. Разбейте свои задачи на интервалы, традиционно 25 минут, за которыми следует небольшой перерыв. В «Режиме фокусировки» вы можете установить время, когда отключать веб-сайты, а когда свободно просматривать их — сила воли не требуется.
🔞Контент для взрослых
Вы когда-нибудь задумывались, как заблокировать контент для взрослых на вашем устройстве? Ну теперь вы можете . .. легко! Благодаря встроенному блокировщику для взрослых, который по умолчанию блокирует все известные сайты для взрослых, гарантируя, что вы не увидите неприемлемого контента.
📅Расписание
Настройте свои собственные ежедневные расписания и распорядок дня, когда вам нужно идти в ногу с функцией «Планирование», которая позволяет вам устанавливать дни и время, когда вы можете получить доступ к определенным сайтам и приложениям.
⏳Управление временем
Доступно множество советов, но с различными функциями приложения и расширениями ваш график управления временем никогда не будет выглядеть лучше. Вы сможете выполнить все свои задачи, и у вас еще останется время для просмотра ваших любимых сайтов и приложений между ними.
📱Защита паролем
Если вы заблокировали приложение или веб-сайт, вы можете разблокировать его с помощью кода доступа по вашему выбору, что немного усложняет откладывание. Вы также можете защитить паролем страницу опций, чтобы не было возможности легко удалить сайты из списка.
🏙Пользовательская заблокированная страница
Пришло время заняться творчеством! Теперь вы можете создать свою собственную заблокированную страницу, выбрав собственное изображение и текст, чтобы создать индивидуальные заблокированные страницы и сделать их уникальными для вас.  Вы также можете проверить изменения на экране в режиме реального времени перед сохранением, чтобы убедиться, что все именно так, как вы хотите.
🚫Предотвращение удаления
Благодаря функции предотвращения удаления никто не сможет удалить приложение с вашего устройства без вашего ведома, а это означает, что вам придется оставаться очень продуктивным 😁
🌎Премиум-функция - Перенаправление сайта
Вы можете выбрать веб-сайт, на который вы хотите быть перенаправлены, вместо представленного забавного изображения.
📱💻Синхронизация
BlockSite — это кросс-браузерный блокировщик веб-сайтов/URL-адресов и приложений, который помогает вам управлять использованием вашего веб-сайта и управлять отвлекающими факторами и зависимостями. Он также доступен на вашем мобильном устройстве и может быть синхронизирован между вашим настольным компьютером и мобильным телефоном, чтобы вы могли продуктивно работать и иметь полный контроль над своим расписанием, где бы вы ни находились.
💡Инсайты
Изучите тенденции просмотра вашего веб-сайта на BlockSite! Теперь вы можете видеть, как вы тратите свое время на веб-сайты, с помощью нашей функции статистики.  Вы также можете проверить, сколько времени вы сэкономили, категории веб-сайтов, которые вы посещаете чаще всего, и многое другое.
В рамках этого процесса BlockSite получает и анализирует сводную обезличенную информацию о ваших мобильных данных и использовании приложений.
Это расширение позволяет вам блокировать определенные сайты на основе заданных вами параметров, включая разрешения и предоставляя нам доступ к webRequest, AllHost, webNavigation, файлам cookie, управлению, уведомлениям, contextMenus, webRequestBlocking, неограниченному хранилищу, вкладкам, хранилищу и gcm. В рамках нашего сервиса мы поддерживаем и обновляем базу данных известных сайтов с контентом для взрослых. Каждый URL-адрес, который вы посещаете, проверяется по этой базе данных на случай, если вы захотите заблокировать контент. Для получения дополнительной информации ознакомьтесь с нашей политикой конфиденциальности: https://blocksite.co/privacy/
Ваша конфиденциальность важна для нас. Собранные данные не используются для идентификации отдельных пользователей.  Собранные данные не передаются третьим лицам в целях маркетинга или таргетинга на отдельных пользователей. Вы всегда можете отказаться от сбора данных, сняв флажок рядом со словами «Блокировать сайты для взрослых», который можно найти на вкладке «Настройки» на странице «Параметры». Обратите внимание, что после отказа некоторые услуги, предоставляемые BlockSite, больше не будут доступны. 

Веб-сайт

Дополнительная информация

Версия: 6.1.1
Обновлено: 15 февраля 2023 г.
Уилмингтон, Делавэр, 19801-1239
США

18 советов, которые помогут вам оставаться сосредоточенными и контролировать ситуацию

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

Сотрудники, которые работают в основном за своими компьютерами (и, будем честны, большинство из нас), отвлекаются в среднем каждые 10,5 минут. Для некоторых эти отвлекающие факторы включают в себя чтение электронных писем или чтение уведомлений, которые они получили на свой телефон, для других это проверка того, что их друзья делают, например, в Facebook или Instagram. Наша продолжительность концентрации внимания составляет от 10 до 20 минут, поэтому легко понять, как человек быстро отвлекается от поставленной задачи.

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

Будь хозяином своего времени

Многие этого не замечают, но большую часть дня наше время контролируется другими. Контроль своего времени является ключом к выполнению необходимой работы. Например, уведомления приходят, когда их отправляет кто-то ДРУГОЙ. Это обычно приводит к тому, что мы прекращаем то, что мы делали, читаем их, думаем о них, отвечаем и так далее.

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

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

1. Однозадачность, не многозадачность. Это означает, что вы работаете над чем-то одним за раз. Это даст вам лучший контроль над вашей задачей и уменьшит потерю внимания при переключении между задачами. Например, даже если вы получите текстовое сообщение, вам нужно проигнорировать его и сосредоточиться на одной задаче, над которой вы сейчас работаете, и помните, что вы не Не начинайте ничего, пока эта задача не будет выполнена (даже не отвечая на сообщение).
2. Мы все хотим ответить на это сообщение или письмо, которое мы только что получили. Кто-то на другой стороне чего-то ждет! Помните, что не так давно у нас не было мобильных телефонов, а электронная почта не была в нашем кармане, легко доступной. Отправители могут немного подождать. Чтобы вам было легче морально, делайте запланированные перерывы. Метод Pomodoro гласит, что нужно работать в течение установленного времени (обычно рекомендуется 25 минут), а затем сделать 5-минутный перерыв. В течение 25 минут рабочего времени вы никому не отвечаете (и желательно не проверяете свой телефон или почту), а в течение 5 минут перерыва вы можете отвечать кому хотите, отправлять сообщения или просто расслабиться и очистить свой разум. чтобы повысить концентрацию внимания, пока вы находитесь в 25-минутном рабочем периоде. Фокус-бустер красиво сформулировал это » Управляя отвлекающими факторами в свою пользу, вы работаете лучше, и самое худшее, что может случиться, это то, что вы можете перезвонить, отправить электронное письмо или сообщение через 25 минут ».

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

Подготовьте рабочую среду

Очень важно иметь удобное место, в котором вам нравится работать. Крайне важно, чтобы это не отвлекало внимание.

3. Первый шаг в создании среды, в которой вы можете сосредоточиться во время работы или учебы, — это найти тихое место в доме, офисе или любом другом рабочем месте. Если это невозможно, убедитесь, что у вас есть хорошие наушники, чтобы блокировать шум (несколько советов о том, что вы можете послушать, мы обсудим позже). Если вы используете наушники, убедитесь, что они (1) накладные или с шумоподавлением, поскольку они помогут вам блокировать как можно больше звука, и (2) что они видны другим. Идея последнего заключается в том, чтобы убедиться, что люди знают, что вы работаете, и пытаетесь оставаться сосредоточенным.
4. Как только вы нашли место и/или наушники, вам нужно их настроить. Начните с очистки ненужных бумаг, почты и тому подобного. Независимо от того, работаете ли вы с листом бумаги или ноутбуком, убедитесь, что на рабочем месте достаточно места для него. Убедитесь, что у вас есть все необходимое для работы, и сосредоточьтесь на своих целях. Выпейте и перекусите, чтобы у вас не было повода покинуть это место, пока вы работаете. Если вы планируете использовать технику помидора, мы советуем вам не забыть иметь таймер или загрузить расширение для Chrome. как BlockSite и использовать их рабочий режим в качестве таймера. Рабочий режим не только предупредит вас об окончании рабочего сеанса, но также будет отсчитывать время вашего перерыва, чтобы вы знали, когда пора отложить телефон и снова приступить к работе. Вы также можете настроить блокировку определенных сайтов во время работы, доступ к которым возможен только во время перерыва.
5. Если вы работаете в общественном месте, например, в кафе (мы не рекомендуем это делать, так как там есть много отвлекающих факторов, которые вы не можете контролировать), постарайтесь не подключаться к Wi-Fi, если это возможно. Таким образом, по крайней мере, на вашем ноутбуке вам будет труднее отвлекаться на другие, менее важные вещи.

Поставьте перед собой цели и задачи

Порядок — это ключ. Нужно уметь легко различать задачи и связывать их с основной целью или задачей.

6. Первое, что нужно сделать, это записать наши цели и задачи. Прочитав это, найдите 15-20 минут, чтобы сесть и записать все свои цели. Затем начните разбивать их на более мелкие задачи. Эти более мелкие задачи должны быть задачами, которые вы можете выполнить и выполнимы. Предпочтительно с интервалами в 25 минут каждый, но они могут быть больше и требуют больше времени или сеансов метода Помидора. Всем нравится выполнять задачи. Это приводит к повышению морального духа и повышению производительности. Выполняя эти небольшие задачи для достижения, вы дадите себе стимул делать больше.
7. Хороший трюк, которым поделился с нами один из наших пользователей, заключается в том, что после того, как вы поставили эти задачи, вы добавляете их в Google Sheet. Этот пользователь обновлял свой Google Sheet каждую рабочую сессию и отслеживал каждую задачу, над которой он работал в это время. Для этого они установили функцию «перенаправления на» на BlockSite. Эта функция предлагает способ для каждого сайта в черном списке вашего BlockSite перенаправить на определенный URL-адрес. Это создавало эффект домино, когда каждый раз, когда пользователь терял фокус, он переходил на заблокированный сайт, например, социальную сеть или новостной сайт, а затем автоматически перенаправлялся на свой Google Sheet. Они увидели задачу, над которой ДОЛЖНЫ работать, и снова сосредоточились. Другая идея — записать свою любимую цитату в этот документ или в список дел, выделив конкретную задачу. Это напомнит вам, что многое нужно сделать, и вы должны сосредоточиться на своих целях.

Планируйте заранее

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

Здесь вы найдете несколько советов о том, как планировать заранее и быть максимально продуктивным и эффективным. Эти методы были изучены в течение длительного периода времени, а также некоторых моментов из метода Дэвида Аллена «Getting Things Done» (GTD).

8. Хитрость здесь в том, чтобы иметь систему и ДОВЕРЯТЬ ей. Если у вас еженедельный обзор, не пропускайте его. Если вы записываете каждую идею или задачу, которая приходит вам в голову, в список дел, то записывайте их все. Как только вы начнете отклоняться от своей рутины и метода, вы перестанете им доверять, а если вы им не доверяете, вы не будете их использовать. Этот метод не является обязательным, чтобы оставаться сосредоточенным во время учебы или работы, но он делает его намного более эффективным. Все начинания трудны, но как только вы начнете, вы даже не заметите, что у вас есть рутина.
9. Самое простое действие — создать список задач, если у вас его еще нет. Для этого можно использовать множество приложений, например Todoist, или приложение для заметок на телефоне. Конечно, старая добрая ручка и бумага тоже помогут. Мы предпочитаем приложения, так как в наши дни у нас всегда есть телефоны, но вы вольны решать, что лучше всего подходит для вас, ключ в том, чтобы просто записать все, что вы хотите сделать, где бы это ни было.
10. Далее мы предлагаем вам еженедельный обзор. Раз в неделю в установленное время и день КАЖДУЮ НЕДЕЛЮ просматривайте все задачи, которые вы добавили в свой список. Примерно спланируйте, что вы хотите сделать в какой день на следующей неделе, что вы не будете делать на следующей неделе и что является хорошей идеей, но, возможно, не должно быть в вашем списке. Запишите цель, если вы еще этого не сделали, для общей задачи и начните добавлять свои следующие действия. Следующее действие действительно помогает прояснить, что вам нужно сделать. Не просто пишите, приготовить болоньезе  скорее написать,  купить томатный соус, 250 г говяжьего фарша, 1 луковицу…  Вы поняли.
11. Планирование следующего дня поможет вам получить дополнительный толчок, чтобы по-настоящему сосредоточиться на своих целях. Каждый вечер выделяйте 5 минут и планируйте, что вы хотите сделать на следующий день. Даже если у вас нет времени все спланировать, по крайней мере запишите, что является вашей «Обязательной целью» (или то, что мы любим называть MAG) на следующий день. MAG будет единственной вещью, которую вы ДОЛЖНЫ сделать на следующий день. Даже если вы больше ничего не сделаете, эта задача будет выполнена. MAG должен быть реалистичным (лучше всего, чтобы он был как можно меньше). MAG будет первым, что вы сделаете, садясь за работу. Планируя таким образом, вы сможете сосредоточиться на своих целях и достичь их с большим успехом.

Создание привычек

Улучшение внимания — это не одноразовая вещь, это система, которая работает вместе с вашими задачами, чтобы повысить вашу производительность при работе над ними. Это означает создание привычек. Сначала вам придется напоминать себе о работе по этой системе, но вскоре вы осознаете ее преимущества, и она станет для вас второй натурой.

12. Захвати все. Во время работы в голову лезут мысли. Будь то отличная идея, над которой мы хотим поработать, что-то, что нам нужно купить, чтобы приготовить ужин, или что-то, что мы хотим рассказать своей второй половинке. Не поддавайтесь искушению перестать работать и отвлечься. Запишите это на потом. В рамках своей рутины вы можете установить время, когда вы просматриваете эти заметки, и тогда вы не забудете. Это придаст вам уверенности в себе, чтобы вы продолжали сосредотачиваться, а не дрейфовали, мечтая о разных вещах. Отличное приложение, которое поможет вам сохранить все ваши ссылки, с которыми вы сталкиваетесь и к которым хотите вернуться, когда вы не во время фокус-сессии, — это Pocket.
13. Уберите телефон или переведите его в авиарежим. Кому-то это может показаться ненужным, а кому-то слишком экстремальным. Но если даже не смотреть в телефон или знать, что вы можете получить сообщение, это поможет вам сосредоточиться. Один приятный трюк, с которым мы столкнулись, — это фактически заблокировать ваш телефон. Этот контейнер, вероятно, предназначен для того, чтобы вы не съели другое печенье, но почему бы не использовать его для блокировки телефона, пока вы сосредоточены на работе или учебе. Вы можете перевести свой телефон в режим полета, положить его в контейнер и установить таймер, на который вы хотите заблокировать его (Метод Помидора предлагает установить его на 25 минут). Таким образом, вы точно не будете отвлекаться от своего телефона как минимум на 25 минут.
14. Как вы можете видеть на графике ниже, исследования показывают, что утро — лучшее время для работы: вы более сосредоточены и продуктивны. Вы полны энергии, ваш разум чист от хлама и он не «устал» после рабочего дня. Добавление этого в ваши привычки будет полезно с точки зрения выполнения вашей работы и сохранения концентрации. Начните с того, что каждый день устанавливайте время в своем календаре для работы с глубоким фокусом, и постепенно вы войдете в привычку вставать и готовиться, а затем садиться и выполнять работу над своим MAG. Это поможет вам быстрее достичь своих целей и задач.

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

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

15. Brain.fm создает музыку, которая « звучит иначе — и влияет на ваш мозг иначе — чем любая другая музыка ». Это платная услуга, но вы можете попробовать 5 сеансов бесплатно, прежде чем платить. Мы попробовали их бесплатные сеансы и должны признать, что это действительно работает!
16. Существует также расширение Chrome, о котором мы думаем, что здесь стоит упомянуть. OneTab сжимает все открытые вкладки и позволяет открывать наборы вкладок по релевантности вместо того, чтобы открывать все вкладки. Идея состоит в том, что если у вас открыто меньше вкладок, вы с меньшей вероятностью пойдете проверять что-то на «одну секунду» на другом сайте, что отвлекает вас от того, над чем вы работаете.
17. Умный технический прием, который мы нашли, чтобы помочь вам оставаться сосредоточенным и не отвлекаться, представляет собой тип умных часов, но не типичный, о котором вы могли бы подумать, известный как гибридные умные часы. На самом деле это аналоговые часы, на них нельзя получить текст из уведомлений и нельзя с них отвечать на звонки. Однако он предупредит вас, когда кто-то, кого вы установили как «VIP», позвонит или отправит сообщение, переместив циферблаты в заранее определенное положение. Таким образом, вы можете спрятать свой телефон, зная, что если поступит какой-то важный звонок или текст, вы будете уведомлены и в то же время удалите все другие нежелательные звонки или тексты, чтобы вы могли сосредоточиться. Он по-прежнему позволит вам делать все крутые вещи, которые умные часы позволяют вам делать, например, управлять своей музыкой, но он устранит некоторые отвлекающие факторы, с которыми вы могли бы столкнуться в противном случае.
18. Многие из нас используют Gmail для своей электронной почты. При правильной настройке и использовании Gmail может сделать нашу жизнь проще и продуктивнее. Вот несколько простых лайфхаков, которые вы можете начать использовать уже сегодня в Gmail.
    
    1. Отключение разговоров в Gmail — при отключении разговора все ответы на него отправляются прямо в архив. Таким образом вы уменьшите шум и беспорядок в своей почте Gmail, И это уменьшит количество получаемых вами электронных писем. Уменьшение количества получаемых электронных писем отлично подходит для того, чтобы оставаться сосредоточенным, поскольку это означает меньшее количество уведомлений, что означает, что вы можете оставаться сосредоточенным, не отвлекаясь постоянно. . Чтобы отключить разговор, просто откройте разговор, который вы хотите отключить, нажмите на 3 точки рядом с темой и выберите «Отключить звук» в меню.
    2. Кнопка повтора — в Gmail есть параметр повтора, который означает, что вы можете установить, когда вы хотите получать определенные электронные письма. Это не уменьшит количество получаемых вами писем. При разумном использовании вы можете настроить групповые электронные письма для отображения в определенное время (скажем, каждый день в полдень) и, таким образом, сосредоточиться на задачах, которые у вас есть, зная, что у вас будут все те электронные письма, на которые вы хотели ответить или прочитать лучше. Вам в удобное для ВАС время. Это связано с тем, что мы говорили ранее о том, чтобы быть «хозяином своего времени». Не позволяйте электронным письмам, которые отправляют другие, контролировать ваше время, когда вы их читаете и когда вы отвечаете на них. Установите повтор на следующий слот, который вы должны просмотреть эти электронные письма. Для этого нажмите кнопку повтора (вы можете найти ее, наведя курсор на письмо в папке «Входящие» или внутри самого письма). Установите время, когда вы хотите его получить, и вуаля! вы можете не беспокоиться, зная, что это письмо появится в нужное время и по вашей «команде».

Заключение

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

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

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

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