{"id":4859,"title":"\u0422\u0435\u0441\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u043a\u0442\u043e\u0432: vc.ru \u0432 \u0432\u0430\u0448\u0438\u0445 \u0440\u0443\u043a\u0430\u0445","url":"\/redirect?component=advertising&id=4859&url=https:\/\/vc.ru\/special\/bettervc&hash=06e04557a2c39e6c33fa846ba405896b7fed5804f421a1db543b59166c87d7da","isPaidAndBannersEnabled":false}
Дизайн
Alexey Vasilevsky

Метод Content Brick. Как создать структуру веб-сайта быстрее и проще чем это было раньше?

Обычный способ создавать структуру сайта — это рисовать всем привычные MindMap схемы или проектировать User Flow, создавая вначале пользовательский путь и затем прототипировать структуру. Обычный Mindmapping не помогает это делать наглядно и быстро, поскольку на одной странице может быть множество информационных блоков и они должны быть перед глазами, когда проектируешь проект. И вообще, создание удобной структуры было прерогативой опытных веб-мастеров.

Немного статистики и исследования

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

Таким образом, некоторые пользователи обращаются к специальным визуальным сервисам карт сайта.

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

Недостаточно создать точную карту сайта без блоков контента внутри каждой страницы.

Karl Plaude
автор метода Content Brick

Метод Content Brick

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

Только за один год количество пользователей, которые начали использовать этот метод выросло в три раза.

Сравнительная таблица роста трафика Octopus.do за год

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

Сравнительная таблица органического трафика Octopus.do за полгода.

Как нам это удалось?

Метод Content Brick был придуман нами в 2016 году и увеличил скорость и простоту проектирования структуры веб-сайтов в несколько раз благодаря созданию и распределению контентных блоков для каждой отдельной страницы и последующему объединению этих страниц в одну общую структуру.

Давайте начнем с начала и объясним все более подробно.

История создания метода Content Brick

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

Это звучит смешно, но мы действительно делали прототипы сайтов на бумажных стикерах вплоть до 2019 года, пока не создали Octopus и вот почему.

В руках была стопка небольших стикеров с фломастером и поверхность стола где можно было удобно раскладывать подписанные стикеры.

Один стикер — это одна страница сайта (page). Стоить заметить, что форма прямоугольника что у сайта, что стикера одинаковая.

Octopus page

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

Поэтому, визуализируя информационную структуру страницы сайта, мы фломастером на стикере делали список контентных блоков, отмечая каждый буллетом. Эти контентные буллеты на стикерах мы называли кирпичами, наверное потому, что строили веб-сайт. Таким образом мы скоро стали называть их Content Brick или Content Block, но название прижилось первое.

Octopus Content Brick Method

Content Brick — логическая еденица контента на странице

За несколько часов на столе появлялось множество листочков (будущих страниц веб-сайта — Page), разложенных в иерархическом порядке. И каждый такой листочек содержал в себе список Content Brick.

Это было действительно наглядно. Благодаря Contents Brick на листочках можно было спроектировать количество будущих страниц и связи между ними.

Как все начиналось

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

Кстати вы по прежнему можете использовать бумажные стикеры и фломастер или воспользоваться Октопусом.

Несколько простых шагов «Content Brick» для проектирования структуры сайта или приложения

Шаг 1. Mainpage First vs Structure First

Первое, с чем вам нужно определиться, — это с методом выбор построения структуры веб-сайта: Mainpage First или Structure First (начинать с главной страницы или с общей структуры)

Mainpage First

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

  • Header
  • About
  • Introduction
  • News
  • List of products
  • Footer

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

Structure First

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

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

Lifehack:

Если вы не хотите создавать структуру с нуля или вам просто лень, вы можете воспользоваться нашим visual sitemap generator и посмотреть структуру любого сайта в Интернете или взять готовые примеры, которые мы сделали site map examples.

Шаг 2. Визуализация контентных блоков

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

Титульная страница состоит из таких Content Bricks:

  • Header
  • Sign Up
  • About
  • Introduction
  • Features
  • Video
  • Images
  • Footer

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

Посмотрите, что получится, если мы добавим этим блокам немного графики (вайрфреймы):

Octopus Wireframes

Согласитесь, это совсем другое дело.

Lifehack:

Вам не нужно долго думать какой wireframe отнести к тому или иному контентному блоку, мы это уже сделали за вас. Их не так много (всего 21), но зато они самые ходовые. Вам остается только быстро выбрать нужный.

Немного технической информации:

Что такое low fidelity wireframe?

Low fidelity wireframe можно сравнить с наброском или эскизом. Это самый простой и быстрый способ визуализации будущей веб-страницы или интерфейса. Он примерно показывает, какая информация и где будет отображаться на экране.

Шаг 3. «Вид с высоты птичьего полета» и подсчет веб-проекта

Выше мы рассказали о том, что вам может дать метод проектирования сайтов Content Brick. Но он может вам дать еще одно важное преимущество — «Вид с высоты птичьего полета».

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

Такого преимущества вам не даст простой mindmapping. Например со своими разработчиками вы сможете оценить количество часов, которое будет затрачено на разработку будущего проекта, причем сегментировать это для каждого этапа разработки (design, frontend, development, testing и тд) или дать задание копирайтеру, который начнет готовить тексты, ведь у него уже все будет перед глазами.

Заключение

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

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

{ "author_name": "Alexey Vasilevsky", "author_type": "self", "tags": [], "comments": 15, "likes": 39, "favorites": 164, "is_advertisement": false, "subsite_label": "design", "id": 219997, "is_wide": true, "is_ugc": true, "date": "Tue, 16 Mar 2021 10:38:56 +0300", "is_special": false }
0
15 комментариев
Популярные
По порядку
Написать комментарий...
9

/зануда он/
Зумеры изобрели листочек с бумажкой для работы :). Все по кругу, чесслово. Не, верю, что удобный сервис. Просто улыбнуло новое модное название старому доброму способу работы ).
/зануда офф/

Ответить
0

"Не, верю, что удобный сервис" для этого и дал пруф на статистику, что бы поверили )

Ответить
1

виноват, по иронии опечатался в "но".

Ответить
2

Отлегло 😌

Ответить
2

Октопус настоящее открытие 20го для меня 👍

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

Ответить
1

интересненько)

Ответить
1

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

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

Ответить
–1

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

Ответить
1

Серьезно? 😄

Ответить
–1

Ну если у ТСа есть тариф с отчуждаемым кодом, то вопрос решается
А так - да, я понял, что вопрос риторический))

Ответить
0

Все действительно состоит из простых вещей, правда, что бы это превратить в онлайн понадобилось несколько лет работы целой команды и еще непочатый 
край. Вот только роадмап на пару месяцев —
https://tweek.so/share/sgfw3hqGQXkGeIdYs2jU

Ответить
0

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

Ответить
0

Бесплатный Microsoft Whiteboard + Windows планшет или любой wacom, или huion или трансформер с пером или iPad (на iOS есть ms whiteboard) со стилусом , это сейчас лучшее что есть для прототипирования идей и майндмапов, ну или по старинке ручка и блокнот. Главное писать от руки, когда печатаешь это не то

Ответить
0

Хочется попробовать, но к сожалению на iPad запустить не удалось(((

Ответить
0

пока только для декстоп, но в планах.
наш роадмэп — https://tweek.so/share/sgfw3hqGQXkGeIdYs2jU

Ответить
Читать все 15 комментариев
PERI развивает систему управления производством с 1С:ERP
От простого робота до Защитника: как мы создавали телефонного секретаря Олега, которого потом начали копировать

В начале июня мы запустили Защитника Олега — нашего нового общедоступного телефонного секретаря, разработанного на базе похожего решения для абонентов Тинькофф Мобайла (работает с 2019 года).

«Ростелеком» подал на меня в суд после смены провайдера

Дело было в 2019 году. Мой провайдер в целом меня устраивал, но цена казалась слегка завышенной, да и просадки в скорости частенько бывали.
И тут как-то звонит мне человек с незнакомого номера, предлагает подключиться к Ростелекому, сэкономить 100 рублей в месяц, получить выше скорость и хороший роутер в аренду за рубль. Я заинтересовался, но мне…

«Spotify: История продукта». Создание десктопного приложения

От десктопного приложения с серверами в шкафу до революционного формата потоковой передачи музыки.
«Spotify: История продукта» — серия статей от команды Spotify в России, где читатели vc.ru могут узнать, как создавался сервис, какие решения стояли за продуктовыми изменениями и кто придумал музыкальные стриминги такими, какими они выглядят сейчас.

Aleph расширяет присутствие на Ближнем Востоке: холдинг приобрел контрольный пакет акций Connect Ads

Aleph Holding, глобальный партнер крупнейших диджитал платформ и материнская компания Httpool, объявил о приобретении контрольного пакета акций Connect Ads. Компания является провайдером цифровых медиа и рекламных решений в странах Ближнего Востока и Африки.

Власти США предъявили обвинения основателю производителя электрогрузовиков Nikola миллиардеру Тревору Милтону Статьи редакции

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

Тревор Милтон The Verge
На сайте «Медузы» появится витрина с мерчем — часть средств от продаж пойдёт на поддержку работы издания Статьи редакции

Создавать и продавать мерч будут партнёры, издание — придумывать идею и слоганы.

На первые страницы Google в Норвегии поднялся спам-сайт, замаскированный картинкой со «Смешариками» Статьи редакции

«Один спамерский домен получает большую долю всего поискового трафика Google в стране».

Эту картинку видит пользователь при заходе на сайт мошенников
Как оцифровать ремонт колесных пар? Ответ нашли в Первой грузовой компании

Мы завершили разработку интеллектуальной системы, которая на основе контрольно-технических измерений позволяет отслеживать толщину колесных пар (ИС КТИ). С ее помощью компания снижает расходы на ремонт и повышает уровень клиентского сервиса. Проект является частью масштабной разработки под названием «Цифровой вагон». В статье мы подробно…

«Яндекс.Про» отстранил курьера от работы из-за неправильного адреса клиента

Несколько лет назад я прочитал на VC занимательную статью о том, как в одной из американских IT компаний искусственный интеллект самостоятельно уволил сотрудника, а тот никак не смог этому противостоять. Тогда мне это показалось забавным, исключительным случаем, но я и подумать не мог, что такие ситуации могут быть отлажены в «систему» и…

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

Объясняем на простых примерах.

null