Fullstack Founder

Метка: дизайн

  • Как я два месяца не делал базу знаний

    Как я два месяца не делал базу знаний

    Пару месяцев назад я выбирал базу знаний. Думал про Open Source, думал про платные.

    При подробном разборе выяснилось, что наша база знаний состоит из нескольких частей:
    – Дизайн главной страницы с категориями и списком статей
    – Дизайн статьи
    – Интерфейс редактирования статей и категорий
    – Управление пользователями
    – Шапка, подвал
    – Дополнения в духе “была ли эта статья полезна?”

    Внутри SaaS продукта у нас уже были шапка, подвал, редактор статей, управление пользователями и общий дизайн проекта. Полный набор запчастей! Итог простой: базу знаний внутри проекта мы делаем сами.

    Модуль работы со статьями и категориями был написан за несколько часов с помощью Cursor. Код не критический, всё проверил вручную. Нарисуем и сверстаем дизайн ещё за пару дней — это уже в процессе работы. На старте допы, переводы и версии документации нам не нужны. Вот и всё приключение!

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

    В итоге потратил пару месяцев на инерцию и два дня на реализацию.

    Мой вывод: велосипеды можно изобретать, если задачи простые и понятные.

  • Как лигатуры в браузер попали

    Как лигатуры в браузер попали

    В посте про хэштеги затронул лигатуры, есть потребность пояснить, что это за штука такая. Если просто — это две буквы, соединённые в один символ.

    Это изобретение появилось одновременно из-за лени и ради красоты. Первые лигатуры писали вручную в манускриптах до изобретения печати. В типографском ручном наборе каждый символ был представлен отдельным кубиком ­— глифом. Но некоторые дополнительные глифы включали в себя сразу два символа. Получалась экономия времени при сборке страницы и экономия пространства на бумаге. Эту технику использовал Гутенберг при печати своих первых Библий.

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

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

    Adobe и Microsoft в середине 90-х объединились и сделали стандарт шрифтов OpenType. Это сделало лигатуры доступными на всех платформах. Но поддержку в интерфейсах и браузерах пришлось ждать ещё почти десятилетие.

    Apple, как известные фанаты дизайнерских мелочей, разработали свою технологию рендера шрифтов и свои шрифты. Так в интерфейсах на Mac OS, начиная с версии 8.5 (1998 год!), шрифты стали автоматически использовать лигатуры.

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

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

  • Разбил мобильник

    Разбил мобильник

    Сегодня я просто поною в канале, ладно?

    Уронил с высоты и разбил свой iPhone 12 mini. Он пережил множество падений, но это оказалось фатальным: теперь экран показывает яркие полосы вместо изображения. Это знак, что пора обновить телефон, подумал я.

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

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

    Последний iPhone mini был 13-го поколения, то есть 4 года назад. Я стал искать, есть ли современные телефоны подобного размера. Меня удивило, но их больше не выпускают даже на Android! Десятки производителей выпускают линейки устройств разного размера. Но под управление одной рукой можно найти только ударопрочные смартфоны в бронированном корпусе со слабой начинкой или устаревшие модели нижнего ценового сегмента.

    Штош, я пытался. Заказал себе mini из старых запасов, благо стоит он как недорогой Android.

    Вопросы в воздух:
    – Я последний человек, кому нужен удобный телефон?
    – Почему в Apple забили на принципы эргономики?
    – Как лопатами пользуются люди с одной рукой?

  • QR-коды

    QR-коды

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

    Поэтому в 1994 году японец Масахиро Хара разработал новый тип кода быстрого считывания — Quick Response code. Масахиро работал на заводе по производству автозапчастей Denso Wave, одного из поставщиков Toyota. Сотрудникам завода приходилось постоянно сканировать штрих-коды. Благодаря разметке из трёх чёрных квадратов, QR-коды можно считывать под любым углом или даже вверх ногами. Изобретатель отказался патентовать свою разработку, что позволило QR-кодам распространиться повсеместно.

    Идея QR-кодов пришла в голову Масахиро, когда он смотрел на доску для игры в Го. Черные и белые фишки напомнили ему бинарный код, где чёрные кодируют единицы, а белые — нули.

    QR-код может кодировать разные типы данных:
    – Числа как в традиционных штрих-кодах.
    – Буквы, числа и знаки пунктуации. Этот формат используют в том числе для адресов сайтов и vCard.
    – Бинарные данные — единицы и нули. Эти коды применяют в качестве меток для роботов.
    – Кандзи — базовые китайские иероглифы, которые включены в японскую письменную систему. Это что-то вроде древних эмодзи.

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

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

    Большой толчок в распространении QR получили во время COVID-19 — ситуация требовала бесконтактную передачу информации. Очень скоро их адаптировали для платежей.

    Если захотите сгенерировать QR-код, воспользуйтесь проверенными сервисами:
    Генератор от Adobe.
    GoQR. Тут есть также API для программной генерации.

  • Машина времени для интернета

    Машина времени для интернета

    Помните фразу “интернет всё помнит”?
    Проект Wayback Machine, известный среди вебмастеров как Веб Архив, сохраняет копии сайтов. Интереса ради можно посмотреть как выглядели известные сайты в прошлом. А можно найти свои старые сайты, в том числе те, которые уже недоступны. В архиве хранятся копии, сделанные в разные даты, поэтому можно отследить эволюцию дизайна или как постепенно добавлялся контент.

    Частая боль веб-студий — сданные клиентам сайты со временем исчезают. Клиенты не продлевают домен, теряют доступ к хостингу, закрывают компании. Или новая команда изменяет оригинальный сайт так, что дизайнеру становится стыдно. Также вебмастеры используют этот проект, чтобы воскресить свои утерянные сайты или восстановить контент на выкупленном домене. Бэкэнд уже не восстановить, но можно сохранить вёрстку и статьи.

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

  • Я чайник!

    Я чайник!

    В 1990 году первым устройством, управляемым через интернет, стал тостер. А 1 апреля 1998 года был предложен шуточный стандарт RFC 2324 для управления кофе-машинами через HTTP-протокол.
    Браузер шлёт запрос на веб-сервер, а веб-сервер сообщает браузеру о своём состоянии кодом из трёх цифр. Для тех случаев, когда запрос на варку кофе получает чайник, был выделен специальный код статуса веб-сервера 418 — Я чайник. Он должен сообщить, что сервер не сможет сварить кофе, но вместо этого сервер сообщает, что он простой чайник. Ответ фактически правильный, но пользователю не помогает — ну, чайник, а мне что делать-то?

    Мы должны видеть страницу сайта или страницу с ошибкой и понятными инструкциями. Коды со статусом веб-сервера предназначены для программистов, сисадминов и SEOшников. Кодов более 60, с некоторыми из них вы наверняка сталкивались.
    404 — Страница не найдена. Самый известный код ответа. День вебмастера отмечается каждый год 4.04. Эти страницы часто оформляют веб-дизайнеры.
    301 — Документ переехал. Чаще всего этот статус появляется в результате работы SEOшника. Пользователя моментально перенаправляет на другой адрес.
    500 — Внутренняя ошибка сервера. Программист залил код с ошибками.
    502 — Шлюз недоступен. Позовите сисадмина.
    503 — Сервис недоступен. Позовите сисадмина и программиста.

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

    Однажды программисты научат серверы сообщать в случае ошибок, что этот сайт не сможет сварить вам кофе. Но это неточно.

  • Модель RDB — инструмент для мышления маркетолога

    Модель RDB — инструмент для мышления маркетолога

    Все коммерческие предложения, лендинги, ТЗ на рекламные плакаты и вообще всю маркетинговую коммуникацию я уже много лет проектирую на основе модели RDB. Про неё я узнал из выступления Ильи Балахнина и тут же применил на одном из клиентских проектов. Удалось вырастить конверсию лендинга в 3 раза не прибегая к редизайну — я просто блоки переставил местами в соответствии с моделью.
    Модель даёт отличные результаты на практике, потому что позволяет выстраивать повествование про ваш бренд или предложение в понятном потребителю порядке.

    Resonance
    В резонансе нужно русским по белому написать ваше предложение на понятном клиенту языке. Запуск интернет-магазина для бренда одежды за 30 дней.
    Клиент узнаёт себя, чётко и ясно понимает вашу услугу. Важно, чтобы всё окружение резонанса транслировало сопутствующую атмосферу и атрибуты. Картинка с котятами не подойдёт — нужны картинки интерфейсов современных интернет-магазинов с одеждой, фэшн-фотографии и процесса оформления заказа. Шрифты, цветовая палитра, Tone of Voice — должны соответствовать резонансу. Не стесняемся лепить самую банальщину. Клиника — врачей в белых халатах, а не яблоки на тарелке или здоровых пациентов.

    Differentiation — отличие от других.
    Для B2C брендов нужно говорить про потребителя и как его индивидуальность будет подчёркивать этот продукт или услуга. Чем он будет отличаться от других после покупки.
    Для B2B рынка мы делаем ровно наоборот — доказываем, что мы такие же, как и все: соблюдаем стандарты, имеем лицензию, делаем по методологии. Корпоративный клиент не хочет рисковать, поэтому предпочтёт проверенное решение. Магазин на WordPress, а не самопис от нашей студии. Бухучёт по международному стандарту, а не по авторской методике.

    Belief — создаём доверие и внушаем веру в продукт или компанию. Размещаем логотипы и отзывы клиентов. Показываем производство и работников. Публикуем реквизиты компании. Даём значимые цифры, подтверждающие наш опыт и компетенции. 3 тысячи сайтов сделано, 20 тысяч клиентов выздоровело, 300 миллионов рублей потрачено.

    В ходе применения RDB и обратной связи я немного модифицировал формулу. Мой порядок применения модели: RBDB, — два раза используется Belief. Первый раз мы создаём доверие сразу после резонанса. Внимание покупателя захвачено, нужно сказать, что мы норм, чтобы следующий блок был встречен с предварительно сформированным доверием. Достаточно краткой полоски логотипов, фотографий людей и значимые цифры. Второй раз мы будем использовать весь арсенал — отзывы, фотографии, сертификаты и награды, видео-ролики и демонстрацию внутрянки. Этот Belief может быть огромным лонгридом для самых недоверчивых Осликов по матрице Винни-Пуха.

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

  • Выводы с прожарки КП

    Выводы с прожарки КП

    Сегодня в клубе Галера в прямом эфире я с коллегами-экспертами разбирал два десятка коммерческих предложений (КП) диджитал агентств.

    Рефлексирую полученный опыт в виде чеклиста:
    – На обложке КП нужно написать русским по белому какая именно услуга предлагается, название клиента и название агентства.
    – После обложки хорошо бы кратко представить агентство и вызвать доверие логотипами клиентов, рейтингами и значимыми цифрами.
    – Если показываете фотографию одного только основателя, агентство воспринимается как лавочка фрилансера. Покажите групповое фото или кружочки с командой.
    – Дизайн продаёт без слов. Возьмите на создание шаблона КП лучшего дизайнера, которого только сможете себе позволить — это быстро окупится.
    – КП нужно адаптировать под клиента и писать на языке клиента. Многие КП сделаны на языке агентства и клиенту не понятны.
    – Смету, медиаплан, десяток подробных кейсов, аудит и даже концепцию можно приложить дополнительными документами и дать ссылки.
    – Подрядчики на трафик любят делать разбор рынка клиента и его конкурентов. Выглядит, как будто агентство напрашивается на проверку домашки.
    – Агентства склонны сильно раздувать КП. Клиент не будет читать 40 слайдов, у него лежит целая пачка таких же КП. Нужно учиться зацепить клиента в 10 слайдов, включая обложку.
    – На последнем слайде — контактные данные менеджера по продажам и название агентства ещё раз. На этом слайде больше ничего не нужно.
    – Цена должна быть на одной из первых или последних страниц. Если она спрятана в середину КП, её будет очень сложно найти.
    – Не стесняйтесь писать цену большим шрифтом и заметно. Клиент ожидает, что вы назовёте цену, не нужно её прятать в таблицах.
    – Цена должна содержать полную стоимость для клиента: со стоимостью услуг агентства, рекламным бюджетом и НДС. Часто указывают только стоимость услуги, хотя клиент будет оплачивать всё вместе.
    – Окупаемость нужно считать исходя из полных затрат, включая услуги агентства, а не только из рекламного бюджета.
    – Указывайте на какой системе налогообложения вы работаете. Клиентам с НДС это важно.

    Вижу, что формат прожарки КП очень популярен в клубе. Так и просится собрать набор универсальных правил) Вместе с тем, я понимаю, что КП может успешно продавать своему покупателю и нарушать при этом все правила.

    Поэтому, универсальная рекомендация:
    – Сделать партизанскую разведку, чтобы отстроить КП от конкурентов.
    – Регулярно улучшать и изменять КП по результатам продаж.

  • Favicon для сайта

    Favicon для сайта

    Фавикон — иконка для избранного. То самое лого сайта с вкладки браузера.
    Раньше это была иконка 16х16px, но сейчас для корректной работы на всех устройствах можно сделать до 27 изображений разного размера и формата.

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

    Favicon используется:
    – В заголовке или на вкладке браузера
    – В поиске Google и Яндекс — около названия сайта будет показана иконка
    – В разных программах, которые работают с сайтами.
    – В качестве иконки на мобильнике, если пользователь сохранит сайт на рабочий стол

    Для полной поддержки нужен векторный логотип компании, из которого мы будем делать полный набор:
    – SVG-иконку, которая автоматически включает темную или светлую версию под тему оформления пользователя (а что, так можно было?).
    – PNG 512х512 и 192х192 без полей под Android.
    – PNG 512х512 и 180х180 с отступами от края под iOS.
    – PNG 32х32 и 16х16, запакованные как favicon.ico для совместимости со старыми девайсами.
    – JSON-файл manifest.webmanifest в корень сайта со ссылками на файлы иконок для мобилок и PWA.
    Полный гид по техническим подробностям от Злых Марсиан (обновлено в 2025 году).
    Инструкции такого размера ради одной иконки меня удручают. Выглядит как подарочный ребус для досуга дизайнера.

    Лайфхак: У моего блога ещё нет логотипа. Поэтому я решил взять в качестве иконки обычную эмодзи. Пусть будет 🤖

    Найденный сайт позволил выбрать эмодзи и сразу получить набор иконок всех нужных размеров. Не хватает только SVG-версии. Её нахожу на другом сайте по запросу robot emoji svg download. Обойдусь без тёмной версии, её создание выглядит для меня трудозатратно.
    В обоих случаях это одна и та же иконка из бесплатного набора, который выпустил Twitter под open source лицензией MIT — можно использовать в качестве фавиконки ничего не нарушая.

    Ещё полезные ссылки:
    – Генератор иконок из вашей картинки
    – Упаковщик favicon.ico
    – Инструкция как сделать SVG-иконку с темной и светлой версией

  • Фуллстек парадокс

    Фуллстек парадокс

    В начале 2000-х в веб-разработке не было фронтэндов или бэкэндов.
    Была профессия вебмастер. Этот человек мог сделать сайт целиком. Он умел общаться с полиграфическим дизайнером про внешний вид сайта, верстать HTML таблицами, оптимизировать графику, писать java script. Стек был небольшой и было мало слоёв абстракции.
    Если было нужно что-то покруче, звали программиста и он писал CGI-скрипты на Perl, PHP или C.

    Прошло 25 лет. В этом году искал для клиента fullstack-разработчика. Вакансии такие на рынке есть. Например, одновременно с моей вакансией продвигали объявление от Теремка на такой же стек. На такую вакансию массово откликаются фронтэнд-разработчики. Почему так?

    В момент, когда фронт научился писать запросы к базе данных и создавать API-методы, он достиг своей полноты. В его мировоззрении всё жизненное пространство в этот момент освоено. Всё так, но для бэкэнд разработчика уровень фронтов на его территории — Intern или Junior.

    Современный бэкенд разработчик часто знает HTML, CSS и Java Script. Может так случиться, что был у него опыт разработки на React, но он не будет считать это значительным достижением. Хорошо, если в резюме укажет. Его территория упирается с одной стороны в серверное администрирование и облака, с другой находится уровень железа: производительность процессора, работа с памятью, операции чтения и записи на жесткий диск. Пляж фронтэндов находится на периферии его владений и занимает небольшой участок с выходом в море.

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

    Количество абстракций в процессе разработки выросло. У пирога было три слоя, а в современном рецепте их пятнадцать. Изобретают новые фреймворки, меняются библиотеки и подходы. Рынок делает веб-программирование всё более абстрактным и сложным.

    Практические выводы:
    – Если вам нужен в команду разработчик с полным спектром знаний — ищите сеньора бэкендера, у которого был опыт работы на фронте. Вакансии Веб-разработчик, Программист или Backend-developer. Но делать фронт его руками очень дорого.
    – В команду нужно брать и фронтов и бэков. Бэки будут ворчать и не хотеть делать задачи фронтов, фронты не владеют всей картиной происходящего на бэке.
    – LLM уже сейчас помогает бэкендерам делать сносный фронтэнд. Скоро всё перемешается снова.