{"id":4536,"title":"\u0410\u043d\u0442\u0438\u0430\u043a\u0441\u0435\u043b\u0435\u0440\u0430\u0442\u043e\u0440: \u0433\u0440\u0430\u043d\u0442\u043e\u0432 \u043d\u0435\u0442, \u043d\u043e \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e","url":"\/redirect?component=advertising&id=4536&url=https:\/\/vc.ru\/promo\/266261-starthub-moscow&hash=d1d5b6ef1ee3cc36b0c67152c74e57ccabb2fddc028b491a5ce00213a11bf2b4","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 комментариев
Бизнес-модель на 1 листе

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

Что такое инвестиции?

Привет, друзья! Что такое инвестиции?

Поддельные штрафы, «левые» QR-коды и фейковые тесты на ковид. Как защититься от мошенников в сети

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

7 советов стартапам по работе с корпорациями

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

Wildberries проиграл продавцу суд на 39 млн рублей

Мы уверены, что тысячи продавцов мечтают подать такой иск по отношению к маркетплейсу, но боятся. Но эти опасения — дело временное. Как только долговая планка маркетплейса достигает предела — доходит до суда. У героя этого дела терпение кончилось после сотни поданных обращений и появления суммы долга с 6 нулями.

Не покупает рекламу, не продаёт акции, не повышает цены: как производитель соуса Huy Fong занял 10% рынка США Статьи редакции

Основатель Дэвид Тран сбежал из коммунистического Вьетнама, открыл свой бизнес в США и достиг выручки в $150 млн в год без торговой марки и маркетинга.

Дэвид Тран с главными символами компании — бутылками соуса шрирачи Huy Fong Foods
Цифры в спорте: как выиграть матч еще до его начала
Пирамида Finiko собрала миллиарды рублей и рухнула — но это не первый проект её создателя, где люди потеряли деньги Статьи редакции

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

Кирилл Доронин
Джефф Безос предложил покрыть до $2 млрд расходов NASA в обмен на контракт для отправки космонавтов на Луну Статьи редакции

В апреле NASA отдало контракт SpaceX, но в мае приостановило его из-за протеста конкурентов.

Лунный посадочный модуль Blue Moon
Санкт-Петербургская биржа начнёт торговать акциями онлайн-брокера Robinhood Статьи редакции

Компания запланировала привлечь $2 млрд и продать 55 млн акций по цене от $38 до $42 за штуку.

Роскомнадзор заблокировал сайт с текстами песен Genius.com Статьи редакции

За несколько лет десятки материалов сайта были внесены в список запрещённых в России.

null