На Пикабу часто проскакивают посты в духе «Сделал сайт на конструкторе за вечер, почему нет заказов?». Как человек, который ежедневно копается в коде и UX, я решил разложить по полочкам, почему попытка сэкономить 50к на старте превращается в потерю миллионов в перспективе.
Если вы думаете, что поисковикам плевать на дизайн — вы застряли в 2010-м. Сейчас объясню, почему Google и Яндекс считают ваш шаблонный сайт «цифровым мусором».
1. Вес имеет значение
Шаблон — это швейцарский нож, в котором 90% инструментов вам не нужны. В коде висят библиотеки для калькуляторов, галерей и форм, которые вы даже не включали. Итог: PageSpeed горит красным, а поисковый робот, как ленивый гость, уходит, не дождавшись загрузки.
2. Поведенческий фактор — это приговор
В 2026 году нейросети поисковиков научились понимать, «удобно» пользователю или нет. Если человек заходит на типовой лендинг, который он видел уже сотню раз под разными брендами, он закрывает вкладку через 3 секунды. Поисковик ставит галочку: «Сайт — скучное Г, понижаем».
Кстати, больше примеров того, как дизайн влияет на бабки, я разбираю в своем ТГ-канале:
t.me/wedizstudio. Там без цензуры о том, что реально работает в вебе.
3. SEO-капкан в структуре
В шаблоне вы не хозяин. Вы не можете поменять иерархию заголовков или переделать разметку так, как того требует семантическое ядро. Вы пытаетесь натянуть сову на глобус, а поисковик видит дублирование структур и считает вас очередным «дорвеем».
Что делать?
Если бюджет поджимает — берите Tilda или WordPress, но не используйте стандартные блоки. Делайте Zero Block (в Тильде) или кастомную верстку. Уникальность — это не про «красивые картинки», а про чистый код и путь пользователя (UX).
Если вы понимаете, что шаблонный сайт — это тупик, и вам нужен уникальный инструмент, который реально будет приводить клиентов, пишите мне. Я делаю дизайн, который поисковики любят с первого сканирования. Обсудить проект можно тут:
Я начинающий веб-разработчик, пишу понемножку. Опыта коммерческой разработки ноль, работала вообще по другой стезе, несмотря на то, что по образованию программист. Сейчас я вообще сижу в декрете, учусь на вышке и стараюсь вобрать в себя побольше знаний.
Ранее главным образом меня интересовал функционал сайта.
Но в последнее время я решила поднатаскать навыки именно внешнего оформления сайтов. Поэтому взялась усиленно изучать различные фичи css, которые раньше мне были не знакомы (о чём сожалею - проекты выглядели бы куда презентабельнее).
Верстаю пока странички по шаблонам из figma. Здесь буду показывать свой прогресс. Будет интересно потом это вспомнить. А сейчас мне интересно услышать мнения, а возможно, и советы от опытных разработчиков - что не так, что следует исправлять и т.п.
Начну, пожалуй, с проекта № 7. На мой взгляд, он выглядит неплохо.
Почему я начинаю с седьмого проекта? На гитхабе эти проекты начинаются с 3-го - потому что первые два были посвящены гридам и флексам. А еще потому что предыдущие мне кажутся плохими и я их не исправляла. Хорошие решения я перенимаю из них в новые проекты, плохие же оставляю в прошлом и новый проект начинаю с новым опытом. Хотя, в любом случае - эти проекты на github открыты и можно мне перемыть косточки :)
В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа.
Решение проблемы с помощью JavaScript
Для автоматического предотвращения переносов после коротких слов можно использовать JavaScript, который заменяет обычные пробелы на неразрывные пробелы ( ) после определённых слов.
// Перенос висячих слов
document.addEventListener('DOMContentLoaded', function () {
// 1. Находим все текстовые элементы, которые нужно обработать
Скрипт находит все основные текстовые элементы на странице: параграфы, заголовки, элементы списков и другие. Вы можете расширить этот список, добавив другие селекторы.
TreeWalker позволяет пройти по всем текстовым узлам внутри элемента, включая вложенные теги. Это важно, так как текст может содержать форматирование (, и т.д.).
5. Регулярное выражение для замены
text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {
Регулярное выражение ищет: · (^|\s) — начало строки или пробел (группа 1); · ([а-яё]{1,2}) — слово из 1-2 русских букв (группа 2); · \s — пробел после слова; · Флаги gi означают глобальный поиск без учёта регистра.
6. Условная замена
if (prepositions.includes(word.toLowerCase())) {
return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел
}
Если найденное короткое слово есть в списке предлогов, обычный пробел заменяется на неразрывный пробел (\u00A0). Это предотвращает разрыв строки между предлогом и следующим словом.
Результат работы
После выполнения скрипта текст “Я иду в магазин” не будет разорван на строки как “Я иду в” и “магазин”. Предлог “в” всегда останется на одной строке со следующим словом благодаря неразрывному пробелу.
Настройка скрипта
Вы можете легко адаптировать скрипт под свои нужды: · Добавить новые селекторы в querySelectorAll() для обработки других элементов; · Расширить список слов в массиве prepositions; · Изменить длину слов в регулярном выражении с {1,2} на другое значение; · Добавить обработку других языков, изменив диапазон символов в регулярном выражении.
Этот простой скрипт значительно улучшает типографику русскоязычных веб-страниц, делая текст более читаемым и профессионально оформленным.
P.S.: это JS решение иногда не во всех случаях срабатывает + бывают сложности с адаптивностью: на смартфонах может переносить совсем не так, как хотелось бы, текст может «уехать» за пределы контейнера, нужно будет «фиксить» эти моменты в CSS.
Разработчики, а как вы решаете вопрос переноса «висячих» слов?
Подписывайся на мой телеграм-канал, чтобы узнать ещё больше полезных фишек верстки и веб-дизайна.
В последнее время я замечаю любопытную тенденцию: люди скачут от одной нейросети к другой, чтобы добиться чуть более впечатляющих результатов, но при этом игнорируют инструменты, уже ставшие незаменимыми для сотен тысяч пользователей. Один из таких недооценённых — Claude, запущенный в марте 2023 года командой бывших разработчиков OpenAI.
Почему стоит обратить на него внимание?
Claude не страдает провалами в памяти: он запоминает контекст беседы от первого до последнего сообщения. В отличие от GPT, который «забывал» пользователя после десятка реплик.
Во-вторых, эта модель отлично подходит для веб-разработки. Она разбирается в нужном стеке — будь то HTML + JS + Tailwind, React или что-то иное — и способна предложить грамотную структуру кода.
Если загрузить ему документацию или целую библиотеку, он не потеряется и будет умело применять полученные данные в ходе обсуждения и написания кода.
Поделюсь личным опытом: я создавал AI-помощника для хостинга и решил протестировать Claude. Взял пару примеров подобных ботов с дизайнерских площадок, показал их модели — и буквально за десять сообщений у меня получился почти готовый прототип.
Рассказываю как делался сайт для известного видеопродакшена и какие есть подводные камни при технической реализации сайта с огромным количеством видеоматериала.
В 2022 году ко мне обратилась команда Hoody FX для редизайна текущего сайта. На тот момент в их портфолио были работы с McDonald's, Champion, Sony, Doja Cat, Samsung, Aeroflot, Fanta, AUDI, Ariana Grande и так далее
Это был небольшой лендосик, где по большей части были одни скриншоты работ (напоминаю, компания занимается видеопродакшеном, а именно VFX). В целом, все. Также это была просто верстка, то есть невозможно было добавлять какие-то новые работы из панели администратора. Ее просто не было.
Как-то так выглядело портфолио – скриншоты из видео, при наведении появляется название. В целом, это имеет место быть, но... Точно ли на сайте продакшена? Чуть позже разберемся
Работа с ретушью – это одно из главных направлений компании. Снова скриншоты, которые просто листаешь сам. На сайт они выгружены не в лучшем своем качестве
Если углубляться, и смотреть шоурилы конкурентов (например, Technicolor Group), то пользователю нативно понятно из видео, что такое VFX и как это работает по пальцам. У нас же нет этого объяснения по пальцам, – вместо этого видео с конечным результатом В целом, это вся старая версия сайта, больше там ничего не было. Ни контактов, ни команды, ни описания направлений студии и других вещей, которые бы базово проинформировали пользователя о компании.
Личный бренд у компании сложился задолго до создания сайта, их работы гремели и без него. Поэтому основная задача состояла в том, чтобы освежить дизайн, сделать удобный и понятный интерфейс, а также создать возможность добавлять работы в портфолио самостоятельно без привлечения программистов и иных сторонних специалистов. Самое главное – это кейсы, они должны быть рассортированы, и с 1 секунды цеплять взгляд пользователя.
Начинаем работу.
Что было сделано по пунктам:
Изучили деятельность компании (саму нишу), исследовали ЦА (в нашем случае это другие видеопродакшены, студии смежных направлений, которые буду заинтересованы в подряде) и конкурентов.
Сформулировали креативную концепцию. Мы перелопатили кучу референсов — изучили международные рейтинги сайтов нашей и смежных ниш, изучили все известные подборки сайтов, но и про конкурентов не забыли. По итогу мы имели внушительную коллекцию того «как надо», а вместе с этим — конкретное видение структуры и стиля. Сформировали визуальный код — простота структуры, лаконичность графики, ясность языка.
Приступили к написанию текстов. С учетом специфики ниши придерживались информационного стиля текста – главное, на что будет смотреть потребитель это визуал. Поэтому огромные полотна текста точно не в этот раз. Должно быть кратко, емко и по делу.
Оформили смыслы в дизайн-концепцию. Дизайн-макет получился удобным, очень простым в навигации.
Заранее для верстки подготовили все необходимые нарезки из видео и шоурилы. Основная цель этого пункта – отразить портфолио через небольшую демонстрацию видео. Мы отошли от идеи со скриншотами из видео.
Сделали адаптивную верстку на WordPress с гибкой панелью администратора. Теперь команда может добавлять видео на сайт самостоятельно в пару кликов, а также распределить видеоматериал в нужный каталог и поставить ему нужное динамичное превью с описанием.
Основные моменты при создании сайта:
Визуальный код компании должен остаться таким же. То есть в брендинг мы не лезем. Элементы фирменного стиля это то, что остается неизменным, и то с чем мы должны работать (хотя это усложняет задачу, потому что часто он становится неактуальным спустя время, например, как вышло у нас, либо он изначально был сделан посредственно другими дизайнерами). За основной стиль взяли минимализм. Пространство не должно перебить форму. Простота структуры, легкость в навигации, лаконичность графики и ясность языка.
Бриф и наша подборка референсов открыли дорогу к дизайну всех страниц, а заказчики со своей стороны подготовили демонстративный шоурил. Теперь при первом касании с сайтом было понятно, что перед нами студия визуальных эффектов. Была проведена работа с типографикой, а также обработка фонового видео (ниже пример).
50 оттенков типографики или как мы выбирали гарнитуру (тут без интерлиньяжа и других внутренних настроек шрифта, примеряли разные варианты с клиентом)
Разместили ключевые элементы (меню навигации) в легкодоступных местах. И протестировали на штате компании, чтобы убедиться в том, что он действительно прост в использовании. А вот и главный экран сайта:
За основу был взят информационный стиль текста – легко понимается, поскольку предоставляет собой прямую информацию без использования сложного языка или метафор. Также он позволяет пользователям быстро найти нужную информацию, что экономит время посетителя сайта и увеличивает удовлетворенность от его использования ресурса.
Пример интеграции текста на сайт. Перечисление основных направлений и видов услуг студии
Вместо обычной фотографии на весь экран сделали слайдшоу из детализированных скриншотов с работами по направлению Beauty Work. Фотогалерею клиент может пополнять самостоятельно.
Каталог с работами – простой и удобный. Во-первых, по сравнению с прошлой версией у нас есть появилась удобное разделение кейсов на три направления: рекламные ролики, клипы и фильмы (раньше был единый каталог). Во-вторых, без какого-либо наведения на работу и появления текста при ховере мы сразу видим, что это за компания/артист/песни и т.д. (ранее название и компанию, для которой делался ролик, можно было узнать лишь при выполнении лишнего действия). В-третьих, демонстрация превью, а именно самых ярких моментов из видеороликов, пришла на замену статичным скриншотам. Каталог с работами на примере рекламных роликов:
Скорость считывания информации у пользователей увеличится – им не придется выполнять лишние действия в виде наведения на карточку с видео, чтобы узнать название; а также лишний раз включать ролик, чтобы понять настроение, мотив и посыл работы, ведь у каждой теперь есть превью. Также были сделаны такие блоки как контактная информация, информация о трудоустройстве в компанию, клиенты компании и ее новости (последние выпущенные работы; автоматически подгружаются самые последние работы из каталога). Например, ниже скриншот блока с новостями. Автоматически подгружаются последние работы из общего каталога с кейсами
Сложности при создании сайта, с которыми мы столкнулись
Все было бы хорошо, если бы это не был наш первый заказ в нише видеопродакшена. На тот момент они правда были первыми, а после этого я очень часто работала с видеопродакшенами. Самая большая и сложная сложность – это огромное количество видеоматериала, который афигеть сколько весит. Как размещать на одной странице по 30 видео с превью, если каждый видеоролик весит по несколько ГБ? Мы не хотели оставлять скриншоты принципиально – это не про VFX, это не про обладаение формы над пространством. Нет. Расчет был как раз на то, что эти превью и перехватят все внимание пользователя.
Большая ошибка. Мы просто посмотрели по таймкодам какие моменты из роликов можно поставить на превью: сделали в панели администратора ячейку, чтобы в два клика можно было выставлять нужный промежуток времени. Итого, что получилось – ничего не грузит. Видео прогружается до момента с установленным таймкодом по 10-20 секунд. Чем дальше тот самый сочный момент из превью – тем дольше это все прогружалось. Пипец, подумали мы.Как решили? Наняли обычного монтажера, чтобы он сделал нам превью. Техническое задание простое – дали разрешение для превью (оно не превышало показатели в 600p, точно не вспомню), длительность не больше 10 секунд, выбираешь самые яркие моменты. В целом, все. Итого каждый кусочек видео весил в среднем не больше 10 Мб.
Также старались не размещать на одной странице большое количество видеороликов: на главной странице это реализовано как карусель из видео, а в каталоге у нас получилось достаточно большое скопление роликов, но разбитое на страницы (добавили пагинацию). Кстати, сами видео вытянуты из Vimeo: работы заказчика изначально хранились там. Заглядывая в мои будущие кейсы также советую Dropbox, если рассматриваете облачное хранилище для подобных сайтов.
Панель администратора делали на WordPress. Свои задачи в части обновления контента она выполняет по сей день хорошо. Достаточно просто знать как работает редактирование страницы Вконтакте, чтобы отредактировать страницу на сайте в нашей панели администратора. Вот как она выглядела изнутри (наши с разработчиком скриншоты во время работы):
Общие впечатления по сайту
Это не самая сильная работа, но хотелось начать цикл статей про разработанные мною сайты с каких-то интересных кейсов. Может с технической точки зрения они будут вам полезны. Например, в видеопродакшенах ждите много работы с видео – причем иногда неожиданной). Я буду дальше рассказывать про другие кейсы в нише видеопродакшена, там тоже будут свои нюансы: выбор CMS или другой подводный камушек.
Сайт до сих пор служит компании, они самостоятельно добавляют туда материалы, по SEO он нормально продвигается, так что всё гуд и свою задачу мы выполнили :)
Пост не прошел незамеченным, на следующий день всё исправили. Думаю, кто-то явно получил люлей из-за этого, сорян :)
Услышал о курсе "Управление IT-командой" от университета сбера, решил ради интереса глянуть, что это за зверь, который стоит 260к за 2.5 месяца.
Зайдя на сайт, первое, что увидел - кнопка призыва к действию, на которой наложились две надписи друг на друга. “А вы точно умеете управлять хотя бы своей IT командой?" - подумал я.
Но пролистав сайт дальше, я всё понял и так))) Скрины ниже:
Проходил я курсы по вёрстке HTML & CSS в практикуме, там соответственно и познакомился с этим сайтом.
Мне очень понравилось оформление и доступное описание. Круто свёрстан. А сейчас вижу, что можно дополнительные знания приобретать и узнавать что-то про JavaScript. Освежить уже имеющиеся знания.
Понимаю, есть огромное количество других ресурсов, можно просто гуглить спокойно. Но для меня, как человека не особо шарящего (только в темноте, когда телефон ищу), это был и остаётся очень удобный ресурс. Главное понятный. Для новичка топ🤓
А для прошаренного, там есть недописанные статьи. Получается, можно стать один из авторов))
