Дизайн начинается не с выбора шрифта. Он начинается с правильного вопроса. Двигаемся от смысла к форме, а не наоборот.
МЕНЬШЕ СЛУЧАЙНЫХ РЕШЕНИЙ. БОЛЬШЕ ВНУТРЕННЕЙ ЛОГИКИ.
Разбираемся в задаче
Что вы делаете, кому это нужно и что человек должен понять за первые минуты. Собираем контекст, ограничения и главное действие.
НА ВЫХОДЕ → ОБЩЕЕ ПОНИМАНИЕ ЗАДАЧИ
Собираем основу
Выстраиваем структуру, последовательность блоков и путь пользователя. Проверяем, есть ли у каждого раздела ясная роль.
НА ВЫХОДЕ → СТРУКТУРА И ПРОТОТИП
Находим характер
Подбираем типографику, цвет, ритм и графику. Формируем язык, который поддерживает содержание, а не спорит с ним.
НА ВЫХОДЕ → ВИЗУАЛЬНАЯ СИСТЕМА
Доводим до работающего
Собираем страницы, продумываем состояния и проверяем поведение на разных экранах. Уделяем внимание не только первому впечатлению, но и повседневному использованию.
НА ВЫХОДЕ → ГОТОВЫЙ ЦИФРОВОЙ ОПЫТ
NOTBADPROD / ПРИНЦИП МАСТЕРСКОЙ
not bad. just thoughtful.
04 / О мастерской
Хороший сайт ничего не усложняет.
NotBadProd — пространство для цифровых идей, самостоятельных проектов и осмысленных визуальных экспериментов. Нам интересны вещи, которые приятно не только рассматривать, но и использовать.
Содержание прежде оформления
Сначала определяем, что хотим сказать. Затем решаем, как это будет выглядеть.
Маленький экран — полноценный опыт
Не уменьшаем большой макет, а заново проверяем приоритеты и удобство.
Система вместо набора украшений
Повторяемые решения помогают проекту оставаться цельным, когда он растёт.
05 / Журнал
Наблюдения из процесса.
Заметки о дизайне и разработке. Без сложных слов там, где можно сказать проще.
ПРОЦЕСС / ЗАМЕТКА 01
Хороший сайт начинается до первого макета
Пять вопросов, которые помогают не потеряться между идеей и красивыми экранами.
Aa.
ТИПОГРАФИКА / ЗАМЕТКА 02
Текст, который хочется дочитать
Как размер, ритм и свободное пространство превращают набор слов в понятный рассказ.
Перед публикацией
ВЕБ / ЗАМЕТКА 03
Последний взгляд перед запуском
Практический список: что проверить, когда дизайн уже готов и хочется нажать «Опубликовать».
06 / Вопросы
Несколько вещей, которые стоит прояснить.
Чтобы начало работы было таким же понятным, как результат.
Что нужно, чтобы начать?
Достаточно описать идею своими словами: для кого проект, какую задачу он решает и что должен сделать посетитель. Готовое техническое задание не обязательно. Ниже есть короткий конструктор брифа — он поможет собрать мысли в один документ.
Можно начать с одной страницы?
Да. Когда у проекта одно понятное предложение и одно основное действие, одностраничный сайт может быть хорошей отправной точкой. Важнее не количество экранов, а то, хватает ли информации для осознанного следующего шага.
Какие материалы стоит подготовить?
Описание проекта, тексты, существующий логотип и доступные изображения. Полезны примеры, которые нравятся, — с пояснением, что именно в них привлекает. У материалов должны быть понятные права использования. Отсутствующие тексты или фотографии лучше отметить сразу.
От чего зависят объём и сроки?
От количества уникальных страниц, сложности взаимодействий, готовности контента и числа согласований. Полезно отделить необходимое для первой версии от того, что можно добавить позже. Конкретный график имеет смысл составлять после определения задачи, а не до неё.
Можно развивать проект постепенно?
Именно для этого нужна система: единая типографика, повторяемые компоненты и ясная структура. Первая версия может решать одну задачу. Новые разделы и функции стоит добавлять тогда, когда для них появляется реальная потребность.
Куда отправляется бриф с этой страницы?
Никуда автоматически. Конструктор создаёт текстовый файл прямо в браузере. Скачайте его или скопируйте содержимое, затем передайте адресату через выбранный вами канал связи. Форма не отправляет заявку и не сохраняет введённый текст на сервере.
07 / Следующий шаг
Есть идея? Давайте её сформулируем.
Несколько вопросов — и у вас есть короткий бриф, с которого удобно начать разговор о проекте.
Без регистрации и сбора контактов. Документ создаётся локально, в вашем браузере.
Авторский концепт / Веб-дизайн
NORD — пространство для главного.
ФОРМАТРедакционный сайт
ФОКУССтруктура, типографика, ритм
NORD — исследование того, как может выглядеть небольшой журнал о пространстве, предметах и внимательном отношении к повседневности. Не каталог бесконечных публикаций, а спокойная среда, в которой у каждой истории есть место.
Исходная идея
Собрать в одной визуальной системе короткие наблюдения, большие материалы и тематические подборки. Главная страница должна приглашать к чтению, а не конкурировать с содержанием за внимание.
Что заложено в концепт
Контраст крупного редакционного заголовка и сдержанной служебной типографики. Мягкая зелёная палитра напоминает о природных материалах, но не превращает каждый экран в иллюстрацию. Свободное пространство работает как пауза между историями.
Выразительная первая история вместо перегруженного слайдера.
Понятные рубрики: пространства, предметы и наблюдения.
Разный масштаб карточек для разных редакционных задач.
Спокойная страница чтения без отвлекающих блоков.
Главное решение
Редакционный характер создают не декоративные эффекты, а последовательность: сначала тема, потом короткое приглашение, затем сама история. В этом концепте форма поддерживает привычку читать внимательно.
Самостоятельное визуальное исследование NotBadProd. Представленный макет — концепт, не действующий журнал и не выполненный клиентский заказ.
Авторский концепт / Визуальная система
FORME — характер простых вещей.
ФОРМАТПредметный бренд
ФОКУСАйдентика, палитра, веб-направление
FORME — концепция визуального языка для предметов, которые хочется оставить рядом надолго. Керамика, округлые силуэты, тёплые оттенки и ощущение тактильности стали отправной точкой исследования.
Задача
Сделать образ бренда выразительным без демонстративной роскоши. Чтобы знак, упаковка и сайт ощущались продолжением самих объектов: простыми, тёплыми и немного несовершенными.
Визуальная логика
Мягкие засечки логотипа поддерживают округлые формы предметов. Терракотовый и кремовый оттенки задают основную пару, а приглушённый зелёный позволяет менять настроение, не теряя целостности.
В композиции достаточно крупных свободных полей. Продукт не приходится обрамлять множеством декоративных элементов: важнее дать рассмотреть его силуэт и отношения с пространством.
Логотип с мягким ритмом и компактными пропорциями.
Ограниченная палитра для упаковки, публикаций и сайта.
Крупная предметная композиция как главный акцент.
Короткие фразы вместо чрезмерно торжественных описаний.
Продолжение в цифровой среде
Первый экран сайта сохраняет ту же логику. Одно обещание, одна композиция, одно следующее действие. Важно, чтобы бренд узнавался не только по логотипу, но и по общему способу говорить.
Авторский концепт NotBadProd. Изображённые предметы — стилизованные графические композиции; магазин и продажа товаров в этом проекте не реализованы.
Авторский концепт / Продуктовый интерфейс
Orbit — планы без лишнего шума.
ФОРМАТЛичный планировщик
ФОКУСПриоритеты, состояния, навигация
Orbit — визуальное исследование рабочего пространства, в котором задачи не выглядят бесконечным потоком срочных сообщений. В центре внимания — текущая неделя и небольшое число действительно важных действий.
Отправная точка
Интерфейсу планировщика легко стать перегруженным: проекты, календари, фильтры, метки и счётчики требуют внимания одновременно. Здесь попробован другой подход — сначала показать ближайшие дела, а дополнительные инструменты оставить на втором плане.
Как устроен экран
Левая панель отвечает за устойчивую навигацию. Календарная строка даёт контекст, а центральная область — конкретные задачи. Нейтральный фон отделяет рабочее содержимое от элементов управления.
Один заметный путь к созданию новой задачи.
Небольшое число цветов с конкретной ролью.
Короткие подписи, которые можно понять без инструкции.
Предусмотренная логика для пустого списка и завершённого дня.
Что важно проверить дальше
Перед реальной разработкой такой концепт нужно превратить в прототип и проверить на повседневных сценариях: перенос дела, поиск заметки, возвращение к незавершённой задаче. Красивый обзорный экран — только начало продуктовой работы.
Самостоятельный интерфейсный концепт. Карточка показывает визуальное направление, а не работающий сервис. Регистрация и хранение пользовательских задач здесь не предусмотрены.
Авторский концепт / Цифровой журнал
Amber — сохранить то, что откликнулось.
ФОРМАТБиблиотека заметок
ФОКУСРедакционный стиль и навигация
Amber — идея личной цифровой библиотеки: короткие мысли, найденные связи, фрагменты будущих проектов. Не новостная лента, которую нужно успевать читать, а место, к которому можно возвращаться.
Настроение
Бумажная карточка и обложка тетради стали отправными образами. Тёплый охристый цвет объединяет коллекцию, а контраст крупного названия и мелких служебных пометок напоминает о печатном издании.
Предлагаемая структура
Главная страница начинает разговор с одной мыслью, затем предлагает тематические коллекции. Вместо длинной хронологии — несколько понятных входов: наблюдения, рабочие идеи, чтение и визуальные находки.
Короткая заметка как самостоятельная единица содержания.
Тематические связи вместо бесконечного списка тегов.
Сдержанная навигация, не спорящая с чтением.
Визуальный язык бумажного архива без буквальной имитации бумаги.
Основной принцип
Сохранить ощущение личного пространства, но убрать хаос случайных записей. Хорошая библиотека не просто хранит материал — она помогает снова его найти и увидеть в новом контексте.
Авторское визуальное исследование NotBadProd. Это концепция журнала; полноценная система публикаций и личный архив не входят в демонстрационный макет.
Журнал / Процесс / Заметка 01
Хороший сайт начинается до первого макета.
Когда появляется идея сайта, хочется сразу выбирать шрифты, рассматривать референсы и обсуждать первый экран. Это приятная часть работы. Но полезнее начать с нескольких вопросов, ответы на которые потом помогут оценивать любые визуальные решения.
1. Для кого существует эта страница?
«Для всех, кому интересно» — слишком широкая отправная точка. Попробуйте представить конкретную ситуацию: человек впервые услышал о проекте, сравнивает несколько решений или уже готов сделать следующий шаг. У этих посетителей будут разные вопросы.
Необязательно составлять подробный портрет аудитории. Для начала достаточно закончить фразу: «На эту страницу приходит человек, который хочет…». Чем конкретнее продолжение, тем проще отбирать содержание.
2. Что нужно понять в первую очередь?
Полезный первый экран не обязан рассказать всё. Он должен дать ориентир. Что это за проект, почему он может быть нужен и куда двигаться дальше? Попробуйте выразить основную мысль обычными словами, без «инновационных экосистем» и других формулировок, за которыми трудно увидеть предмет разговора.
3. Какое действие главное?
Прочитать материал, посмотреть работы, выбрать услугу или составить запрос — это разные сценарии. На странице могут быть дополнительные действия, но лучше заранее определить одно основное. Оно станет опорой для порядка разделов и подписей на кнопках.
Сначала ясный маршрут. Потом выразительная форма.
4. Чем можно подтвердить сказанное?
Список достоинств звучит убедительнее, когда рядом есть конкретика: фрагмент работы, описание процесса, понятный пример или ответ на частый вопрос. Если проект только начинается, честно покажите концепт и ход мысли. Выдуманные достижения не заменяют содержательный рассказ.
5. Что пока не нужно?
Составьте два списка: необходимое для первой версии и то, что можно отложить. Возможность добавить раздел ещё не означает, что его стоит добавлять сейчас. Иногда хороший результат — не новая функция, а решение отказаться от неё.
Небольшое упражнение
Запишите цель страницы в одном предложении. Под каждым будущим разделом укажите, на какой вопрос он отвечает. Если ответить трудно, пересмотрите раздел до того, как потратите время на его оформление.
Так появляется рабочий критерий: обсуждать можно не то, насколько макет похож на понравившийся пример, а то, помогает ли он вашему посетителю разобраться.
Редакционная заметка NotBadProd. Это подход к работе, а не универсальная формула: окончательная структура зависит от конкретного проекта.
Журнал / Типографика / Заметка 02
Текст, который хочется дочитать.
Типографика начинается не с необычного шрифта. В первую очередь она определяет, как человек движется по тексту: где замечает главное, где делает паузу и насколько легко возвращается к нужному фрагменту.
Сначала — иерархия
У заголовка раздела, вводного абзаца и подписи разные задачи. Полезно сделать эти роли видимыми. Разница в размере, насыщенности или расстоянии часто помогает больше, чем ещё один декоративный шрифт.
Посмотрите на страницу, не вчитываясь. Видно ли, где начинается новая тема? Отличается ли основное содержание от пояснений? Если все элементы требуют одинакового внимания, расставьте приоритеты заново.
Ритм важнее количества приёмов
Выберите небольшое число повторяемых правил: как выглядит заголовок, сколько воздуха остаётся после него, как отделяется следующий абзац. Последовательность делает даже очень простой набор текста собранным.
Не пытайтесь решить все проблемы увеличением межстрочного интервала. Иногда нужно сократить предложение, разделить длинный абзац или убрать повторяющуюся мысль.
У строки тоже есть удобный масштаб
В широком блоке короткая заметка может выглядеть потерянной, а длинный текст — слишком плотным. Проверяйте ширину текстовой колонки на реальном содержании, а не на красивом временном абзаце. Прочитайте несколько фрагментов целиком и обратите внимание, удобно ли находить начало следующей строки.
Хорошая типографика не мешает услышать то, что написано.
Маленький текст требует отдельного внимания
Подписи, пункты меню и сообщения формы часто получают меньше внимания, чем большие заголовки. Проверьте, не становятся ли они слишком бледными или мелкими. Важная информация не должна прятаться только потому, что она служебная.
Мобильная версия — другая композиция
На узком экране меняются переносы, плотность и отношения между элементами. Заголовок, который выглядел сдержанно на широком макете, может занять почти весь первый экран. Иногда достаточно изменить размер; иногда нужно отредактировать сам текст.
Быстрая проверка
Откройте страницу на телефоне, увеличьте масштаб и прочитайте её без спешки. Затем пройдитесь только по заголовкам. В первом случае должен получиться удобный рассказ, во втором — понятный план. Если оба сценария работают, у текста уже есть крепкая основа.
Редакционная заметка NotBadProd. Приведённые принципы — ориентир для проверки собственных макетов, а не набор обязательных числовых правил.
Журнал / Веб / Заметка 03
Последний взгляд перед запуском.
Финальная проверка — это не только поиск опечаток. Полезно на время забыть, как устроен проект изнутри, и пройти его как новый посетитель. Ниже — практический маршрут для небольшой информационной страницы.
Содержание
На первом экране понятно, о чём сайт и кому он может быть нужен.
Не осталось временных текстов, случайных дат и неподтверждённых утверждений.
Названия, термины и стиль обращений одинаковы во всех разделах.
Контакты, если они указаны, действительно существуют и проверены.
У изображений и других материалов есть понятные права использования.
Переходы и действия
Нажмите каждую ссылку, кнопку и пункт меню. Важен не только сам переход, но и соответствие ожиданию: «Читать» должно открывать материал, а «Скачать» — давать файл. Неработающую функцию лучше убрать, чем маскировать красивой кнопкой.
Для формы проверьте пустой ввод, слишком короткий текст и обычный корректный сценарий. Сообщение после действия должно описывать то, что произошло на самом деле. Если данные только подготовлены для скачивания, нельзя сообщать, что заявка отправлена.
Разные способы пользоваться страницей
На узком экране нет случайной горизонтальной прокрутки.
Навигация и главные действия остаются доступны на телефоне.
До интерактивных элементов можно дойти клавишей Tab.
Текущий фокус виден, а поля формы имеют понятные подписи.
Дополнительные окна можно закрыть без поиска незаметной кнопки.
Изображения и загрузка
Откройте страницу в новом окне и посмотрите, как она появляется. Не пропадают ли важные элементы, не скачет ли расположение блоков, не мешают ли внешние ресурсы увидеть основное содержание? Не стоит оценивать только один удачный запуск на собственном компьютере.
Что будет после публикации
Сохраните исходную версию и определите, где находятся файлы. Полезно иметь понятный способ вернуться к предыдущему состоянию. Затем откройте опубликованный адрес с другого устройства и повторите основные действия уже там.
Готовность — это не отсутствие новых идей. Это работающий основной сценарий.
Не пытайтесь превратить последний просмотр в бесконечный редизайн. Исправьте то, что мешает пониманию и использованию. Новые возможности запишите отдельно — они могут дождаться следующей версии.
Этот список относится к содержанию и интерфейсу небольшой страницы. Он не заменяет отдельную проверку безопасности, инфраструктуры или специальных требований проекта.
О странице / Данные
Без лишнего сбора данных.
Что делает эта страница
В этой версии страницы нет рекламных пикселей, внешней аналитики, загрузки шрифтов со сторонних сервисов и встроенных социальных виджетов. Код страницы не устанавливает cookie и не использует постоянное хранилище браузера для введённых вами данных.
Как работает бриф
Ответы используются только для создания текстового документа в текущей вкладке. Они не отправляются через форму на сервер. Вы можете скачать файл или по отдельному нажатию скопировать его содержимое в буфер обмена.
Страница не гарантирует удаление текста из истории восстановления вкладок или памяти самого браузера. Не вводите пароли, закрытые ключи, платёжные данные и другую конфиденциальную информацию.
Обычное соединение с сайтом
При открытии страницы ваш браузер обращается к серверу сайта. Сервер и обслуживающая инфраструктура могут обрабатывать технические данные соединения, включая IP-адрес и параметры запроса. Правила серверного журналирования определяются владельцем размещения и не настраиваются этим HTML-файлом.
Проекты в портфолио
Показанные проекты — самостоятельные дизайн-концепты. Их названия и иллюстрации не означают сотрудничества с одноимёнными организациями. На странице нет вымышленных отзывов, клиентских результатов или неподтверждённых наград.