{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Евгений Смирнов — дизайнер интерфейсов: заметки с тегом сайт", "_rss_description": "Проектирую мобильные и веб-приложения и сайты. Создаю интерактивные прототипы, чтобы протестировать идею до разработки и презентовать её заказчикам или инвесторам.", "_rss_language": "ru", "_itunes_email": "smirnov.evgeniy789@gmail.com", "_itunes_categories_xml": "", "_itunes_image": "https:\/\/yevgeniysmirnov.ru\/pictures\/userpic\/userpic-square@2x.jpg?1764698559", "_itunes_explicit": "no", "home_page_url": "https:\/\/yevgeniysmirnov.ru\/tags\/sayt\/", "feed_url": "https:\/\/yevgeniysmirnov.ru\/tags\/sayt\/json\/", "icon": "https:\/\/yevgeniysmirnov.ru\/pictures\/userpic\/userpic@2x.jpg?1764698559", "authors": [ { "name": "Евгений Смирнов", "url": "https:\/\/yevgeniysmirnov.ru\/", "avatar": "https:\/\/yevgeniysmirnov.ru\/pictures\/userpic\/userpic@2x.jpg?1764698559" } ], "items": [ { "id": "3", "url": "https:\/\/yevgeniysmirnov.ru\/all\/slanted-publishers\/", "title": "Сайт издательства о дизайне и медиа «Slanted Publishers»", "content_html": "

Сделал дизайн-концепт и продумал взаимодействия с содержанием.<\/p>\n

Задача<\/h2>\n
Объединить выразительную верстку с читаемостью и продуманными взаимодействиями.<\/p>\n

Посадочная каталога<\/h2>\n
Размер карточек меняется в зависимости от важности содержания: крупные — новости, средние — публикации, малые — товары.<\/p>\n
Изменение размеров создаёт ощущение глубины, побуждая продолжать прокрутку.<\/p>\n
\n $\"\"$ \n<\/div>\n
Принцип работы горизонтальной прокрутки<\/h2>\n
<\/iframe>\n<\/div><div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Povedenie-gorizontalnoi-prokrutki-@2x.png.jpg\" width=\"2560\" height=\"791\" alt=\"\" \/>\n<\/div>\n<p>Контейнер прокручивается в сторону движения курсора на пройденное мышкой расстояние.<\/p>\n<p>Когда курсор попадает в область контейнера прокрутки, запускается отслеживание его координат. Точка входа по <b>X<\/b> фиксируется в переменную <b>mouse_x_start<\/b> и становится точкой отсчёта. Текущая позиция курсора обновляется каждые 0.01 секунды и записывается в <b>mouse_x_present<\/b>.<\/p>\n<p>В ответ на изменение положения курсора `Content Container` прокручивается с помощью «scroll to» по формуле:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">round(\nmax( \/* Округляет число для плавной прокрутки \/\n0,\nmin( \/ Задаёт границу прокрутки вправо равную максимально возможному значению прокрутки \/\n`Content`.width - `Content Container`.width,\nscroll_offset_start\n+ (\nmouse_x_present\n- mouse_x_start\n)\n 2 \/* Дистанция, пройденная курсором, с множителем для ускорения прокрутки \/\n)\n)\n)<\/code><\/pre><h2>Прокрутка за пределами экрана<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Prokrutka-za-predelami-ekrana@2x.png.jpg\" width=\"2560\" height=\"1063\" alt=\"\" \/>\n<\/div>\n<p>Не смотря на то, что курсор упёрся в границу экрана, мышь продолжает движение, а следовательно продолжается и прокрутка контента.<\/p>\n<p>После движения, например вправо, при возврате мыши с отрывом от стола на 1—2 мм сенсор перестаёт считывать её положение. Курсор остаётся зафиксированным у границы, а следующее движение в ту же сторону продолжает прокрутку без рывков.<\/p>\n<p>Зафиксированный у края курсор легко повести в обратную сторону для изменения направления прокрутки.<\/p>\n<p>Для прокрутки также можно использовать тачпад или мышку с боковым колесом.<\/p>\n<h2>Категория с группировкой по тегам<\/h2>\n<div style=\"position: relative; padding-top: 47.92%; width: 100%\"><iframe src=\"https:\/\/kinescope.io\/embed\/xyFh3PSuE1vDgcaPSFd78M\" allow=\"autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;\" frameborder=\"0\" allowfullscreen style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"><\/iframe>\n<\/div><h2>Огранчиение горизонтальной прокрутки при быстром вериткальном движении курсора<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Ogranichenie-prokrutki@2x.png.jpg\" width=\"2560\" height=\"816\" alt=\"\" \/>\n<\/div>\n<p>Пользователь может вести курсор до нужной секции по вертикали, а затем диагональным движением начать её прокрутку.<\/p>\n<p>Если пересечь контейнер прокрутки быстрым вертикальным движением курсора, то он останется в состоянии покоя.<\/p>\n<p>Точка входа по <b>X<\/b> и <b>Y<\/b> фиксируются в переменные <b>mouse_x_start<\/b> и <b>mouse_y_start<\/b>. Текущая позиция курсора обновляется каждые 0.01 секунды и записывается в переменные <b>mouse_x_present <\/b> и <b>mouse_y_present<\/b>.<\/p>\n<p>Для включений горизонтальной прокрутки проверются условия:<\/p>\n<p><b>№1<\/b><\/p>\n<pre class=\"e2-text-code\"><code class=\"\">abs(\n mouse_x_present - mouse_x_start\n)\n> 16 px \/ Смещение курсора по X в диапазоне 0–16 px считается случайным, чтобы избежать дёргания контейнера \/<\/code><\/pre><p><b>№2<\/b><\/p>\n<pre class=\"e2-text-code\"><code class=\"\">abs(\n mouse_x_present - mouse_x_start\n) \/ Путь, пройденный курсором по горизонтали \/\n≥\nabs(\n mouse_y_present - mouse_y_start\n) \/ Путь, пройденный курсором по вертикали *\/<\/code><\/pre><h2>Навигация между тегами<\/h2>\n<div style=\"position: relative; padding-top: 38.54%; width: 100%\"><iframe src=\"https:\/\/kinescope.io\/embed\/jbHMKbc6U97km5M3XRzg2k\" allow=\"autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;\" frameborder=\"0\" allowfullscreen style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"><\/iframe>\n<\/div><h2>Поиск<\/h2>\n<p>Если результатов поиска > 10, они группируются по тегам, как на страницах News, Publisher и Shop:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Rezultatov-poiska-bolshe-10@2x.png.jpg\" width=\"2560\" height=\"1227\" alt=\"\" \/>\n<\/div>\n<p>Если результатов поиска ≤ 10, они отображаются в одной горизонтальной строке:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Rezultatov-poiska-menshe-10@2x.png.jpg\" width=\"2560\" height=\"2211\" alt=\"\" \/>\n<\/div>\n<h2>Детальная страница<\/h2>\n<p><b>Галерея с вертикальной прокруткой<\/b><\/p>\n<div style=\"position: relative; padding-top: 47.92%; width: 100%\"><iframe src=\"https:\/\/kinescope.io\/embed\/uDvEVCHvGPBKanqBGXki3C\" allow=\"autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;\" frameborder=\"0\" allowfullscreen style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"><\/iframe>\n<\/div><p>Модуль просмотра подстраивается под соотношения 21:9, 2:1, 16:9, 4:3, 1:1, 3:4:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Modul-vybrannogo-izobrazheniya@2x.png.jpg\" width=\"2560\" height=\"1075\" alt=\"\" \/>\n<\/div>\n<p><b>Экспрессивная вёрстка<\/b><\/p>\n<div style=\"position: relative; padding-top: 47.92%; width: 100%\"><iframe src=\"https:\/\/kinescope.io\/embed\/m3bgBo3qTSxZxUToD6fcbW\" allow=\"autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;\" frameborder=\"0\" allowfullscreen style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"><\/iframe>\n<\/div><p class=\"loud\">Создал выразительную и структурированную вёрстку, продумал взаимодействия с ней. Пользователь вовлекается в содержание, а бизнес поддерживает сайт без привлечения дизайнера.<\/p>\n<p>Применил знания о динамических свойствах композиции, передаче характера формой и об отношениях элементов, чтобы собрать их в единую историю.<\/p>\n<p>Макеты оживлял в ProtoPie. Зондируя идею, учёл краевые сценарии и отсеял плохие решения до разработки. И да, использовал ИИ — процесс похож на вайбкодинг, но код провалидировать я не могу, а вот логику внутри ProtoPie — могу.<\/p>\n<p class=\"foot\">© Изображения и текстовые материалы, использованные в концепте, принадлежат Slanted Publishers и взяты с <a href=\"https:\/\/www.slanted.de\/.\">https:\/\/www.slanted.de\/.<\/a><\/p>\n<p class=\"foot\">© Семейство шрифтов: Pragmatica Next by Paratype <a href=\"https:\/\/www.paratype.ru\/.\">https:\/\/www.paratype.ru\/.<\/a><\/p>\n<h2><a href=\"mailto:smirnov.evgeniy789@gmail.com\">Электропочта<\/a> • <a href=\"t.me\/eugenius_dsgn\">Телеграм<\/a><\/h2>\n", "date_published": "2026-03-29T13:16:05+05:00", "date_modified": "2026-04-12T21:07:37+05:00", "tags": [ "protopie", "вёрстка", "интерактив", "портфолио", "сайт", "типографика", "эксперимент" ], "image": "https:\/\/yevgeniysmirnov.ru\/pictures\/Posadochnaya-kataloga@2x.png.jpg", "_date_published_rfc2822": "Sun, 29 Mar 2026 13:16:05 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "3", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [ "highlight\/highlight.js", "highlight\/highlight.css" ], "og_images": [ "https:\/\/yevgeniysmirnov.ru\/pictures\/Posadochnaya-kataloga@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Povedenie-gorizontalnoi-prokrutki-@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Prokrutka-za-predelami-ekrana@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Ogranichenie-prokrutki@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Rezultatov-poiska-bolshe-10@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Rezultatov-poiska-menshe-10@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Modul-vybrannogo-izobrazheniya@2x.png.jpg" ] } }, { "id": "2", "url": "https:\/\/yevgeniysmirnov.ru\/all\/abex-windows\/", "title": "Сайт производителя противоураганных окон и дверей из Флориды", "content_html": "<p>Обновил дизайн страниц «О компании», «Услуги», «Каталог» и «Детали продукта». Новые страницы структурированно подают информацию и масштабируются без участия дизайнера.<\/p>\n<h2>Задачи<\/h2>\n<ol start=\"1\">\n<li>Cтруктурированно подать информацию об услугах и продуктах компании, чтобы повысить доверие клиентов.<\/li>\n<li>Обновить визуал, чтобы он шёл в ногу с технологиями, которые применяются в продукции.<\/li>\n<\/ol>\n<h2>О компании<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Home@2x.png.jpg\" width=\"2560\" height=\"1440\" alt=\"\" \/>\n<\/div>\n<p>Пункты навигации сгруппированы и дополнены описанием, которое раскравает экспертизу компании и спектр её услуг.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Abous-Us-1@2x.png.jpg\" width=\"2271\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Abous-Us-2@2x.png.jpg\" width=\"2108\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<p>Для фона используется близкий к бетону оттенок, который передаёт ощущение устойчивости и надёжности.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Color-background@2x.png\" width=\"1920\" height=\"368\" alt=\"\" \/>\n<\/div>\n<h2>Услуги<\/h2>\n<p>Страницы устроены единообразно, чтобы сайт был «стабильным»: одинаково работал как на уровне иерархии информации, так и на уровне взаимодействия с интерфейсом.<\/p>\n<p>При этом построение адаптируется под разную информацию и её объём, вовлекая в просмотр за счёт ритмических соотношений элементов.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Services@2x.png.jpg\" width=\"2560\" height=\"2309\" alt=\"\" \/>\n<\/div>\n<h2>Направления продукции<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Products@2x.png.jpg\" width=\"2560\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<h2>Каталог<\/h2>\n<p>Сетка позволяет добавлять новые категории по мере расширения ассортимента без привлечения дизайнера.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Catalog@2x.png.jpg\" width=\"1972\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<h2>Страница продукта<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/ProductsDetails@2x.png.jpg\" width=\"1789\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<h2>Модуль предпросмотра<\/h2>\n<p>Панорамные изображения 21:9 и 2:1 фиксируются по высоте и выходят за пределы модуля по ширине, благодаря чему основной объект остаётся по центру, крупным и читаемым.<\/p>\n<p>Форматы 1:1 и 4:3 фиксируются по высоте и ширине, чтобы сохранить детали верхней части изображения.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Preview-module@2x.png.jpg\" width=\"2560\" height=\"1936\" alt=\"\" \/>\n<\/div>\n<h2>Сетка<\/h2>\n<p>В основе сетки — фотография выполненной работы компании, а именно её левая часть, где окна уходят в перспективу и имеют разную визуальную ширину. Изменяющиеся по ширине колонки формируют горизонтальный ритм, который создаёт ощущение движения в глубину.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/LayoutSystem@2x.png.jpg\" width=\"2560\" height=\"1843\" alt=\"\" \/>\n<\/div>\n<p>Сетка адаптируется под разную информацию и её объём за счёт дополнительных направляющих линий и трёх размеров шрифта: 32 px — для навигации, 96 — заголовков, 24 — основного текста.<\/p>\n<p>Страницы выглядят целостно и масштабируются без участия дизайнера.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Layout-System2@2x.png.jpg\" width=\"2560\" height=\"1717\" alt=\"\" \/>\n<\/div>\n<p class=\"foot\">© Большинство изображений и текстовых материалов в концепте принадлежат Abex Windows и взяты с <a href=\"https:\/\/abexwindows.com\/.\">https:\/\/abexwindows.com\/.<\/a> Остальные сгенерированы с помощью ИИ.<\/p>\n<h2><a href=\"mailto:smirnov.evgeniy789@gmail.com\">Электропочта<\/a> • <a href=\"t.me\/eugenius_dsgn\">Телеграм<\/a><\/h2>\n", "date_published": "2026-02-14T14:02:42+05:00", "date_modified": "2026-04-12T21:06:02+05:00", "tags": [ "вёрстка", "портфолио", "производство окон и дверей", "редизайн", "сайт", "типографика", "эксперимент" ], "image": "https:\/\/yevgeniysmirnov.ru\/pictures\/Home@2x.png.jpg", "_date_published_rfc2822": "Sat, 14 Feb 2026 14:02:42 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "2", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/yevgeniysmirnov.ru\/pictures\/Home@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Abous-Us-1@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Abous-Us-2@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Color-background@2x.png", "https:\/\/yevgeniysmirnov.ru\/pictures\/Services@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Products@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Catalog@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/ProductsDetails@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Preview-module@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/LayoutSystem@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Layout-System2@2x.png.jpg" ] } } ], "_e2_version": 4171, "_e2_ua_string": "Aegea 11.4 (v4171e)" }