Наши слоны: что я узнал про китайцев и китайский веб-дизайн, пока создавал сайт для мясокомбината
Самое мясо китайского веб-дизайна, или Как не стать лосем в Поднебесной. Путеводитель по провинциям визуального хаоса
Китайский иероглиф 象 означает «слон», а еще — «образ» и «символ». Это одно из слов, которое я запомнил, пока мы делали B2B-сайт для белорусского мясокомбината с прицелом на китайских клиентов. Чтобы не промахнуться с визуальным языком и не провалить проект, мне пришлось разобраться, как устроен китайский веб: чем он отличается, как выглядит хороший сайт в глазах китайского заказчика и почему наши привычные решения там не работают.
Я прочитал несколько книг, нашел исследования и перелопатил десятки китайских сайтов. В этом тексте собрал главное — коротко, по делу и с примерами. Если вам предстоит выходить на китайский рынок, адаптировать продукт или просто любопытно, как там все устроено — будет полезно.
Меня зовут Дмитрий Хоружко, я основатель агентства Nineseven.ru. Поехали.
Почему на сайтах так много всего и ничего непонятно
10-15 лет назад китайские сайты выглядели так, будто кто-то вылил на экран кашу из иероглифов, а потом еще ее размазал. Движущиеся блоки с текстом, миллион анимированных баннеров, зашкаливающее количество картинок — у европейца или американца все это вызывало кровь из глаз. А китайцу было хорошо. Впрочем, хорошо и сейчас. И на это есть четыре причины.
4399.com — крупнейшая в КНР платформа бесплатных флеш-игр
Медленный интернет и жадность. Когда скорости были низкими, на одну страницу пытались впихнуть как можно больше всего — особенно ссылок, на которые пользователи нажимали, после чего веб-мастер получал копеечку. Серьезные изменения начались в 2013 году, когда пользователи начали массово переходить с ADSL на оптоволоконный интернет — скорость выросла в десятки раз. Но привычка к пестрым сайтам частично осталась.
Восточноазиатское мышление. Если коротко, условное западное мышление — это когда сосредотачиваешься на чем-то одном и не очень обращаешь внимания на контекст. Отсюда все эти законы композиции в живописи, где есть ось симметрии и центральный объект. Восточноазиатское мышление — когда больше обращаешь внимание на контекст. Это отражается и в традиционной китайской живописи с ее идеей упорядоченного хаоса. Грубо говоря, в композиции всегда есть легкая асимметрия, а благодаря линиям главным оказывается не самый крупный или не центральный объект.
Эту разницу в мышлении отлично продемонстрировал эксперимент. Американцев и японцев попросили сделать фотопортрет девушки. В результате американцы фокусировались на ее лице, а японцы старались взять в кадр как можно больше окружения. Причем тут китайцы? У них такая же иероглифическая система (японцы заимствовали ее) и похожее традиционное искусство.
Короче говоря, восточноазиаты лучше ориентируются в хаосе и выцепляют из него важное. При этом они абсолютно не теряются и на минималистичных европейских сайтах. А вот мы на восточноазиатских…
Нужно ощущение базара. Великий шелковый путь, «очки н-н-нада» и скидки на «Алиэкспресс» — китайцы торговали, торгуют и будут торговать. И они делают это в высококонкурентной среде, поэтому о товаре хотят рассказать сразу все. Вообще китайцам важно ощущение оживленного рынка где-нибудь в деревне у бабушки под Гуанчжоу. Об этом в интервью 2013 года заявили бывший генеральный директор Alibaba Дэвид Вэй и председатель Yihaodian (торговой компании, которую сегодня поглотила JD.com) Ю Ган.
«Наш первый сайт имитировал минималистичный дизайн Amazon, с очень понятной навигацией для поиска и так далее, но нашим клиентам это не понравилось. … Им нравится, когда на странице много всего», — сказал Ган.
Иероглифы без пробелов. Это не ошибка и не экономия места. В китайской письменности действительно не разделяют слова, пробелы ставят только после знаков препинания. К тому же у китайцев нет заглавных иероглифов. Из-за этого весь текст для нас превращается в кашу. Собственно такое же ощущение вызывают и китайские книги. Но в том числе благодаря этому иероглифы обладают большей плотностью информации (обычно одно слово = два иероглифа).
Все эти принципы продолжают работать и сегодня. Но тем не менее многие сайты в КНР уже ничем не отличаются от российских, белорусских или американских. Даже маркетплейсы. Вот для сравнения несколько скринов: если заменить иероглифы на кириллицу или латиницу, отличий не так уж много.
Чжунхуа цзыхай, или Почему со шрифтами особо не поиграешься
Если у нас для каждого сайта подбирают несколько шрифтов с разными начертаниями или вообще создают свои, то в Китае с этим парятся намного меньше. И не потому что там нет специалистов по типографике, а потому что это сложно и долго.
Во-первых, иероглифов очень много. Сколько точно — сказать невозможно, потому что они регулярно рождаются и умирают. В 1994 году в Китае выпустили «Чжунхуаа цзыхай» — самый крупный печатный словарь иероглифов — в нем их было аж 85 568. По словам китайского лингвиста Чжоу Югуана, «6600 иероглифов покрывают 99,999% всех иероглифов, встречающихся в современных китайских текстах». Но все равно это очень много. Сделать 33 буквы или 6600 иероглифов? Разница, как говорится, налицо.
Во-вторых, есть иероглифы традиционные и упрощенные. Традиционная китайская письменность, по мнению коммунистов во главе с Мао Цзэдуном, была слишком сложна — в 1956 году ее решили упростить, чтобы народ быстрее учился писать и читать инструкции к станкам и винтовкам. Через 8 лет упорной работы выкатили 2235 упрощенных иероглифов.
Тем не менее старые варианты написания не ушли и сегодня живут вместе с упрощенными. А на Тайване, в Гонконге и Макао есть только традиционные. Дело в том, что Тайвань не был под властью коммунистов, а Гонконг и Макао снова стали частью Китая только в 1997 и 1999 годах (их вернули Англия и Португалия соответственно. Почитайте — там интересная история). При этом если человек знает упрощенный вариант, он не прочтет традиционный и наоборот.
В общем, делать еще плюс 2235 иероглифов для авторского шрифта — хоть и офигенно, но долго и дорого.
В-третьих, в них слишком много мелких и важных деталей. Иероглифы состоят из черт (маленьких черточек, которых насчитывается три десятка) и компонентов (сочетаний этих черт). Если в одном иероглифе двадцать черт, а в другом пять, то сложно подобрать размер, при котором на экране все они будут хорошо видны. Не то чтобы это суперпроблема, но все же она осложняет работу типографов.
Создавать китайские шрифты для веба — серьезный геморрой (а создавать их для типографий — геморрой в терминальной стадии). Тем не менее выбор есть.
Все китайские шрифты можно разделить на три типа:
Сонгти (с засечками)
Хэйти (без засечек)
Кайти (имитирует рукописный шрифт)
К первым двум относится SimSun и SimHei, которые предустановлены в Windows и Word. К последнему — Kaiti. Все три стали веб-стандартом. На их основе делают другие шрифты. Есть и другие, но по сравнению с кириллическими и латинскими — выбора все равно меньше.
Однако мудрые китайцы нашли выход даже для небольших проектов: создают дизайнерские решения для нескольких иероглифов, помещают их на картинку — вот и уникальный шрифт. Вообще иероглифы на картинке — довольно распространенная вещь в китайском вебе. Принцип @font-face (то есть загрузка даже тех шрифтов, которых нет на устройстве пользователя) здесь особо не работает. Так что в основном довольствуются тем, что используют один стандартный шрифт и картинки для авторских.
Фрагмент главной страницы сайта Shineway, поставщика свинины. Интересно, что центральная часть (над кнопкой) сделана в виде картинки — текст скопировать нельзя. А вот в элементах справа и слева — можно
Красный — хорошо, серый — плохо, но не всегда. Особенности цветов
Выбирать цвет для китайского сайта — это как выбирать лучшую песчинку в пустыне. Дело в том, что в Поднебесной уживаются сразу несколько подходов.
Во-первых, традиционный, описанный во всяких культурологических книжках типа «Эстетики цвета в Китае» Го Хао. Во-вторых, европейский. Объясню на примере.
Еще лет 10 назад было распространено цветовое кодирование рейтингов, которое отчасти противоречит нашему:Красный или оранжевый — хорошоЖелтый — нейтральноСерый или черный — плохо
Теперь же почти все пришло к единообразию: звездочки и серые или черные цифры. Да, в Китае все еще есть сайты, где действует система кодирования, описанная выше, где-то вместо звездочек применяют цветочки, но в целом можно сделать цифровой рейтинг вообще без цвета — и вас поймут. Это значительно упрощает задачу.
А так это делают в 2025 году. Слева — рейтинг продавца на Ebay. Справа — на Taobao (сколько бы звезд ни было — они все равно останутся красными; цифры внизу— рейтинг доставки, товаров и обслуживания)
music.163.com — музыкальный стриминговый сервис. Здесь красным обозначены топ-3 песен в разных категориях. И вообще красный присутствует только как акцентный цвет
Если говорить об общем оформлении, то тут, как ни странно, тоже нет строгих правил. Не будет такого, что вы сделаете желтой шапку сайта, а люди откажутся заходить на него, «потому что желтый — цвет порнографии». Такое значение правда есть. Оно появилось, потому что слово желтый звучит примерно так же, как и «непристойный» (huáng), однако имеет разные иероглифы. При этом желтый — это еще цвет власти, цвет императора. Такой вот семантический симбиоз.
Сайт Meituan, сервиса по доставке еды, покупке билетов, вызову такси и поиску исполнителей для различных работ (да, такое вот разнообразие). Сервис не обвиняли в непристойности из-за желтого цвета
Такая же история с красным. Есть куча статей, где его называют главным цветом веб-дизайна Поднебесной и вообще главным китайским цветом. Да, он ассоциируется с выгодой, удачей, праздником, патриотизмом. Во-первых, потому что это цвет китайского Нового года. Во-вторых, потому что на различные праздники принято дарить деньги в красных конвертах («хунбао»). В-третьих, большая часть рекламы, сообщающей о скидках, оформлена в красных тонах. В конце концов флаг КНР красный.
Однако нельзя сказать, что этот цвет захватил все сайты. Ему на пятки наступает синий. Если верить исследованию 2023 года, то международные и местные бренды в КНР чаще выбирают его в качестве доминирующего. Тут надо сказать, что не только компании, которые выходят на международный рынок, типа Haier, но и внутренние, вроде China Mobile.
Социальное доказательство, или Веб-конфуцианство
Я говорю про отзывы на сайтах. У нас в сфере b2b они важны, но в Китае — еще важнее. Все дело снова в культуре. В КНР больше развит коллективизм: людям важно ощущать себя частью группы и доверять ей. Это следствие конфуцианской философии, для которой важна иерархия, семейственность и долгосрочная стабильность. А с учетом того, что главное для китайского бизнесмена — личные контакты, которые выстраиваются долго и тщательно, отзывы таких же бизнесменов на сайте помогут ему принять решение о будущих переговорах. Помимо отзывов нужно добавить фотографии сотрудников, корпоративных мероприятий, самого производства — это поможет понять, насколько надежен и крут потенциальный партнер, можно ли строить с ним долгосрочные отношения.
Мы решили прикрутить на сайт видео-отзывы. Идея не новая, но китайские бизнесмены от этой прикормки дуреют: все «отзовики» представляются и нет проблем с тем, чтобы найти их в сети
Есть теория, что коллективизм китайцев — это следствие принадлежности к цивилизации риса. Если коротко, то суть ее такая: выращивание риса требует много людей и четкой групповой работы (строительства каналов, поддержания уровня воды, создания колес с водоподъемными ковшами и т. д.), а значит рисоводы просто обязаны налаживать прочный контакт друг с другом, чтобы соблюдать все технологические стандарты. Отсюда и коллективизм. Для выращивания той же пшеницы столько людей не нужно: вспахал поле, засеял, подождал, потом собрал.
В пользу такой теории риса говорит исследование университетов Мичигана, Вирджинии, Пекина и Гуанчжоу, опубликованное в журнале Science. Ученые сравнивали пшеничные и рисовые регионы Китая на предмет разводов. В рисовых супруги расстаются в два раза реже. Так что если хотите крепкую семью — заведите рисовую плантацию.
Видео, видео и все, что похоже на видео
На китайских маркетплейсах уже давно топы продаж делают стримеры. По сути платформы добавили старый и не очень добрый формат «магазин на диване»: блогеры впаривают подписчикам товары, делают это бодро и креативно, чтобы попасть в топы рекомендаций. Учитывая любовь китайцев ко всему яркому и движущемуся (смотрите первый пункт статьи), неудивительно, что и сайты прикрепляют видео на главные страницы.
В целом люди смотрят видео все чаще и просто отвыкают от статичных картинок. Уже в 2024 году 97% китайцев (ничего не утверждаем, но Nineseven.ru — не просто так Nineseven.ru…) активно потребляли такой контент. Удивительно, что в стране, где придумали TikTok, этот показатель не достиг 100%.
Видео на сайте белорусского мясокомбината «Александров». Мы еще добавили горизонтальную прокрутку, простые, но эффектные анимации и каталог в виде быка. В общем, все для вовлечения наших китайских друзей
Что в итоге: как мы вышли сухими из соевого соуса и с сайтом для «Александрова»
Сайт для мясной фабрики «Александров» стал для нас настоящим квестом, но мы его прошли, и даже с плюсом. Учитывая все китайские заморочки — от любви к красному и анимациям до иероглифов и горизонтальной прокрутки, — мы сделали сайт, который не только зашел китайским партнерам, но и реально приносит заявки. Каталог в виде быка, видео-отзывы, яркие цвета и куча движухи на экране — все это сработало как надо.
Итог: заявки из Китая, Узбекистана, Казахстана и даже Азербайджана с Арменией посыпались, как рис на свадьбе. Клиент доволен, мы довольны, а ящик заказчика завален письмами — вплоть до «Где моя говядина?».
16,5 дней на макет сайта - Кто он, этот ваш идеальный веб-дизайн?
🖐Привет, это Денис из NIXELE™! И сегодня вы узнаете
🔥Почему «красиво» — не значит «удобно», а также почему это можно опровергнуть...
📱Насколько в создании веб-дизайна не важен макет и почему на самом деле инструкцию придумали дебилы (или нет)?
🌭Из-за чего бутылка кетчупа это самый главный феил в дизайне, почему красивая картинка решает, а удобство и визуал – вообще не первое о чем стоит думать в веб-дизайне и наконец таки узнаем ответ на вопрос:
💯Кто он, этот ваш идеальный дизайн сайта?
Я решил начать с прогулки: свежий воздух и окружающая атмосфера натолкнули на одну интересную мысль когда я проходил мимо нового жилищного комплекса…
Смотрите, это логотип «Пятерочки» в одном из современных жк в Москве. Вроде бы обычная картина, но посмотрите внимательнее, можете открыть панораму и оглянуться вокруг🧐
Здесь в стильном и продуманном районе нет места ярким цветам - красному и зеленому, только стильный хай -тек. Однако если видишь что-то резко выдающееся, то это триггерит.
В вывеске этой «Пятерочки» есть очень важный смысл - она не выбивается из общего стиля жк, в котором находится. При этом не теряет своей узнаваемости. Это довольно простой, но емкий смысл, который мы сегодня попробуем на вкус⬇
📌Что же получается, «Пятерочка» осознает важность визуальной эстетики?
Все так, красивый визуал смотрится выигрышно и человек в большинстве случаев не станет жаловаться на трудности поиска данного магазина, если такие трудности действительно возникнут.
А это визуализация различия вывески на разном фоне(фасаде).
Поэтому здесь использовали простой цветной логотип без яркой подложки. Это делает магазин чуть менее узнаваемым издалека, но более привлекательным в окружающей обстановке, согласитесь. В конце концов это выглядит стильно.
Тогда я осознал, что проектирование не всегда самое важное и тратить на дизайн 16,5 дней точно не стоит. Визуальная составляющая зачастую имеет куда более важное значение перед планом. Получается все мои эти наброски не нужны были?
🔹Эстетика как никогда важна, она приоритетнее макета, НО ключевое — смог ли пользователь выполнить нужное ему действие. Разберемся подробнее.
🤷♂Создание макета сайта это действительно бесполезное занятие?
Я сразу побежал домой изучать взаимосвязь макета и эстетики в веб-дизайне и вот что нашел:
Японские эксперты Масааки Куросу и Каори Кашимура в дизайн-центре компании Hitachi попросили оценить 26 сайтов 292-ух студентов факультета дизайна и психологии. Pезультаты показали положительные результаты в сторону эстетики дизайна: визуально более стильные и красивые сайты выбирали чаще, даже когда навигация ставила в тупик.
Все же визуальная эстетика цепляет больше - она на первом плане. Я стал разбираться дальше: если сайт не имеет четкой структуры, то неудачный опыт использования сайта может обернуться тем, что юзер никогда больше не зайдет на данный веб-ресурс.
Об Этом уже говорит работа Флориана Гейгля и Кристины Лерман под названием «Оценка влияния смещения кликов и вставки ссылок в Интернете на навигацию».
В этом исследовании авторы анализировали, как визуальные акценты на ссылках (например, размещение в верхней части страницы) и добавление новых ссылок влияют на поведение пользователей при навигации по веб-сайтам.
Они пришли к выводу, что такие изменения могут существенно изменить маршруты пользователей, что подчеркивает важность продуманной навигационной структуры для эффективного взаимодействия с сайтом
🧐Именно поэтому дизайн может бесить. Красивый, но совершенно непригодный для удобного использования интерфейс может раздражать.
🔹Нужна успешная комбинация - эстетическое впечатление + легко совершенное плановое действие(визуал UI + макет UX). Вместе они подталкивают пользователя на следующий шаг и приводят к целевому действию, а также мотивируют к повторному посещению сайта.
👟Простыми словами - кроссовки должны быть стильными и соответствовать трендам, но самое главное — они должны быть удобными!
Кажется, что каким бы дискофмортым ни был макет(UX), всегда будет важна эстетика(UI) - тяга человека к идеальному невероятно велика!
🔑От сложного к простому - что такое UI/UX дизайн. Аналогия.
Представьте: вы собираете конструктор «Лего-техник», то есть механизм, из подвижных деталей(UX) и обычных блоков, создающих визуальную часть(UI).
Поворотные механизмы в виде шестеренок, троса и колес консруктора(UX) дополняет стильное сочетание желтого и черного(UI)
В вашем распоряжении любые детальки лего, но использовать можно конечное их число - это 100%-ный объем. И для каждого человека в данном фиксированном объеме будет свое идеальное и уникальное сочетание практичности и визуальной эстетики «шестеренок» и «обычных блоков».
👉Кстати, буду намеренно «ужирнять» сокращения UI и UX, а также относящиеся к ним слова, чтобы вам было проще разбираться с аналогиями и понимать их значение
С заботой - NIXELE™
Происходит наращивание новых нейронных связей и мы пониманием, что важно правильно сочетать UI и UX составляющие дизайна.
🎏Визуал по-разному привлекает разные категории людей
Все не так однозначно, нельзя сделать «супер» и «мега» и для всех сразу «в одном флаконе».
Дизайн-завод «Флакон» — креативное пространство в Москве, торгово-выставочный и офисный комплекс
Посмотрите, главное, что мы должны осознать из исследования Hitachi – это не то, что планирование элементов взаимодействия придумали дебилы и вообще, они тратят много времени на дизайн-макеты сайтов зря — нет! Эстетика может улучшить восприятие эргономичности даже если функциональность остается неизменной.
Воу! Эргономичность, - сложное слово, кажется мы можем обойтись и без него! Само слово означает приспособление предметов труда для комфортной и эффективной работы
Вы никогда не сможете нормально использовать новый телефон, пока не настроите размер значков, язык клавиатуры, уведомления и подсказки таким образом, как удобно именно вам для лучшей продуктивности
Юзабилити - слово-близнец эргономики, крайне важна, но ее польза зависит напрямую от первого впечатления, формируемого визуалом UI. Получается, часть времени из более чем двухнедельной работы стоило потратить на анализ аудитории, для которой делаю дизайн сайта.
🔹Ключевое на чем нужно сосредоточиться при разработке дизайна сайта – не UI и не UX составляющие, даже не их сочетание. Самое важное – понять что именно ожидает увидеть пользователь. Потому что от его потребностей и зависит правильное сочетание UI/UX.
«Если между ожиданиями клиентов от продуктов или услуг и их реальным дизайном существует большая разница, то мы вынуждены вступать в неравный бой, пытаясь заставить клиентов пересмотреть их устоявшиеся представления»
Из книги Джона Уэлена «Дизайн пользовательского опыта»
Тесты, тестирование, тестики🔥
— Знаете почему программирование и веб-дизайн одно и то же?
— Потому что это все IT? — спросите вы
— Да, скорее всего вы правы! — Но почему?
Potomu chto никогда не знаешь кто он, этот твой пользователь))
Поэтому необходимо знать погоду сайта, дизайн которого создаешь. А осадки на ней - это user flow. Смотите, так выглядит погодный циклон на сайте:
Подобная функция в «Яндекс метрике» называется «Вебвизор». Она помогает понять куда чаще нажимают пользователи и как работает визуальная часть сайта
Именно такую карту наша команда использовала при запуске тестовой версии сайта хоккейной лиги чемпионата кхл 3на3. На тепловой карте мы с командой отчетливо видели какие элементы привлекают пользователя и работают так, как и было задумано, а какие остаются без внимания и требуют UI/UX доработки.
При помощи user flow, составленного на старте разработки проекта, можно на этапе запуска также отследить путь пользователя, например до страницы покупки билетов.
В нашем случае, наносить на user flow метки, показывающие, где пользователь проходит целую страницу до покупки билетов на матчи, вместо того, чтобы найти кнопку покупки билетов вверху главной.
📌Как повлияло на разработку веб-дизайна
Сейчас моя работа начинается с гугл формы и опросников и это не просто дополнительная опция в разработке веб-дизайна — нет! Наоборот — это серьезность и ответственность. Я осознаю важность первичного анализа потребностей не только клиента, но и целевой аудитории.
💡Важно тестировать свои программы, методы статьи, рефераты и другие работы, чтобы осозновать их недочеты. И веб-дизайн тому не исключение.
🔹Но работа над анализом аудитории это не только тестирование после создания дизайна, но и аналитика потребностей ца перед началом работы - фундамент и неотъемлемая часть создания любого продукта.
👽Важно не просто создавать дизайн, опираясь на тенденции эстетики и тем более тренды, но и тестировать потенциальную аудиторию, даже стараться не ограничиваться только ей.
Ведь цель дизайна сайта, не только замотивировать потенциального покупателя купить авто именно здесь, но и привести к целевому действию юзера, «случайно» попавшего на ваш сайт.
📌Как вы думаете, что вам может рассказать одна бутылка кетчупа?
Вроде бы ничего особенного, только если это не бутылка Heinz. Знакомтесь — мем, посвященный именно ей:
Важная мысь невероятно проста: не пытайтесь изобрести бутылку кетчупа заново, научитесь использовать ее правильно в зависимости от человека. С одной стороны - она выглядитт правильно и привлекательно в вертикальном положении, но ведь ее используют вверх ногами и это практично с точки зрения UX.
Эталона идеального дизайна сайта не существует, но существует план, который может помочь.
⚡8 советов от NIXELE™ по созданию идельного дизайна сайта
Чаще соприкасайтесь с прекрасным но не утопайте в нем - выделите на подбор примеров только час, разбейте их по группам и оттолкнитесь от чего-то одного
Стройте здание, начиная с фундамента, но не израсходуйте весь материал — сравнивайте макет со схемой построения успешных сайтов, но не крутите один элемент сликом долго
Проверенные решения на то и провренные, они работают — изучайте теорию и психологию, используйте нейросети и выбирайте с умом то, на чем будет посторен UI/UX дизайн
Нет ничего страшного в том, чтобы спросить у девушки или мамы какие цветы она любит - общайтесь с целевой аудиторией напрямую, чтобы узнавать предпочтения и ожидания своих «любимчиков»
Будьте открытее к общению — опрашивайте не только ца, но и своих друзей и знакомых. Порой люди, совсем далекие от темы, могут натолкнуть на интересные мысли
Не бойтесь сносить здание под корень — не бойтесь начать все с начала, даже если работу полностью придется стереть
Ставьте широкие видовые окна — делайте дизайн «прозрачным» в первую очередь понятным и доступным, и только потом красивым
Любите себя — прощайте себе даже крупномасштабные косяки и умейте найти силы на то, чтобы вернуться к работе, даже когда много правок
Теперь есть понимание того, что сначала необходимо проводить качественный обзор того, над чем планируешь «взять высоту».
🔹Визуал и практичность работают вместе, полагаясь на потребности пользователя. Знакомтесь: формула которую мы вывели
UI - визуал; UX - пользовательский опыт; TA - целевая аудитория; DS - дизайн
На самом деле - выбор за вами, и только вам решать каким будет ваш идеальный дизайн, но ключики к этому лежат через вашу чуткость, талант и усердный труд.
И кстати, без помощи тяжело потом что-либо искать по это статье. Поэтому для вас, ключевые тезисы я отметил вот так 🔹
С любовью и заботой - NIXELE™
🙌Спасибо за прочтение данной статьи, ваша активность помогает скорейшему выходу нового материала
👉Всегда рад обратной связи — не забывайте про чек-поинты в виде опросов выше и по ссылке) Увидимся в следующей статье😉
4.04 - World Webmasters Dаy [вехи_истории]
4 апреля отмечается День веб-мастера (World Webmasters Day) – праздник всех, кто разрабатывает, поддерживает и совершенствует сайты. Веб-мастера — это программисты, дизайнеры, SEO-специалисты, администраторы и многие другие профессионалы.
Выбор даты не случаен: 4.04 ассоциируется с известной ошибкой 404 «Страница не найдена». Это своеобразный символ работы веб-мастеров, ведь их задача — следить, чтобы сайты всегда работали гладко и без сбоев, но не всегда получается)
С момента появления первых веб-страниц интернет сильно изменился. Если раньше веб-разработчик отвечал за всё — от написания кода до оформления, то сегодня сфера веб-разработки включает UX/UI-дизайн, поисковую оптимизацию, маркетинг и кибербезопасность.
День веб разработчика!
Не забудьте в этот день поздравить своих веб разработчиков и всех тех людей кто причастных к созданию всего что есть в интернете.
Что я узнал за 15 лет в веб-дизайне
Больших денег в веб-дизе нет, но на жизнь заработать можно почти всегда. В 2010 когда я начинал, я как студент работал на пол ставки в местном провайдере и зарабатывал 9к. Потом со своими начальными навыками фотошопа я пошел на фриланс и стал зарабатывать на дизайне те же 9-10 но за пару часов в день. Я делал в основном всякий фотомонтаж и денег было немного, но потом выцепил одного клиента именно на дизайн лендингов (тогда это была прям новинка, вообще никто не понимал что это) и стал зарабатывать 30-60 что было прям огонь по тем временам, потом больше по мере увеличения количества клиентов. Тем не менее сейчас я редко вижу веб-дизайнеров, которые имеют больше 100-120 в регионах, в столицах, понятно, больше ( Это именно веб-диз, UI/UX зарабатывают больше, до 250-300, но там и работа совсем иная). Думаю, фрилансом можно заработать больше, статистики у меня нет, но тоже со временем, сначала попробуй базу клиентов набери. Бывают исключения и звезды с крутыми прайсами, но в среднем в вебдизайне не озолотишься, поэтому идти сюда имеет смысл только если сам процесс очень нравится и если есть склонность к профессии.
Дизайнеров как собак нерезанных, но хороших почти нет. По личному дизайнометру процентов 80 это совсем шляпа, даже не джуны. Люди проходят курсы и начинают считать себя звездами, ЧСВ зашкаливает, зарплату просят 100+ сразу. Скорее всего виноваты курсы, которые обещают то, чего реально на рынке нет. Тем не менее, действительно хорошего дизайнера с днём с огнем не сыщешь.
Работа веб-дизайнера прежде всего техническая, хотя новички часто думают, что это творчество/искусство. Во-первых, есть ТЗ, есть задача которую надо решить. В этом нет места самовыражению, или ок, есть, ног прям чуть-чуть. Во-вторых, все уже давно придумано: возможные композиции элементов, правила близости, консистентные приёмы, удачные сочетания цветов и т.п. Это все базируется на психологии и уже устоявшихся привычных правилах. Типа все привыкли что у автомобиля две фары, и можно сделать три, конечно (и иногда делают), но в целом смысла в этом мало. Так же и в веб-дизайне. Важно правильно проанализировать нишу клиента, конкурентов, хорошие решения и применить все это в своем проекте. Творческая часть обычно занимает процентов 5, все остальное работа с существующими решениями, их анализ и правильное применение. Как пример, новички часто пытаются что-нибудь эдакое придумать с логотипом, вместо того, чтобы расположить его слева сверху.
Если у вас нет дизайна, то это тоже дизайн, просто плохой.
Плохой дизайн тоже может работать. Если вы предлагаете что-то очень выгодное, то это купят даже на чёрном сайте с чёрным текстом (ладно, чуть серым). Если вы предлагаете какую-то ненужную фигню, то никакой дизайн её не спасёт. Сначала идёт смысл, за ним текстовое выражение этого смысла, за ним уже дизайн. Задача дизайнера правильно перенести текст в визуал: сфокусировать внимание пользователя на важном, сделать восприятие удобнее, чем просто простыня текста, усилить образы картинками или иллюстрациями, визуализировать важные цифры, добавить немного правильного настроения. И все. Переоценивать важность дизайна тоже не надо. Маркетинг и УТП первичнее.
Тем не менее, хорошие дизайн-решения круто влияют на результат. В 2012 клиент попросил меня чуть визуально освежить старый сайт. Там был трафик, но сайт был визуально прям уставший. Мы согласовали план работ. В процессе я все пытался понять где у них контакты. Они были как-то кривы спрятаны в нижнем меню. Тогда это решение только набирало популярность и я предложил повесить сверху красную кнопку с формой "обратный звонок". У клиента заявки посыпались как из рога изобилия с этой кнопки. Оказывается, раньше, люди, действительно не могли найти контакты и забивали. Ровно из-за этой истории я назвал потом студию "Красная кнопка".
Новый дизайн можно сломать продажи. Один раз мы "освежили дизайн" сделали его современным, сохранив общий стиль и логику. И продажи упали. Почему-то иногда люди не доверяют слишком красивому дизайну. Но, только иногда, чаще всего хороший современный дизайн лучше продаёт чем старый.
Клиент часто прав. Очень нередко новички хотят "сделать красиво", вместо того чтобы послушать клиента, который лучше понимает как его продукт/услугу продавать. Опытный дизайнер выслушает, выделит суть, сделает правильно с точки зрения продаж и одновременно красиво.
Веб-дизайнеры обычно не умеют рисовать от руки. Им и не надо.
Сверстать можно что угодно. Но лучше знать как работает html вёрстка и делать корректно.
Какие вопросы задать перед разработкой сайта, чтобы потом не было мучительно больно
Когда запускаешь сайт, вопросы, которые реально влияют на деньги и сроки, обычно остаются за скобками. Клиент не спрашивает, потому что не знает, подрядчик молчит, потому что «и так все понятно». В итоге рождаются сайты-франкенштейны, съедающие бюджеты и нервы.
Я собрал 33 неудобных, местами абсурдных, но критически важных вопроса, которые нужно задавать до старта. Чтобы потом не спрашивать себя: «Как мы вообще докатились до такого?»
Какие еще вилки? Просто скажите, сколько стоит разработка сайта?
Вопрос важный, сложный и совершенно бесполезный при первом контакте со студией. Для расчета сметы нужно понимать основные разделы, их наполнение и функционал. То есть цена зависит от структуры сайта, а у нас ее пока нет. Поэтому сначала всегда просим клиента описать структуру или собрать в формате майндмэп — интеллектуальной карты будущего сайта. Так хотя бы приблизительно понятно, насколько сложным он будет.
Дело в том, что бывает интернет-магазин простой как фабричная табуретка и безотказный как автомат Калашникова: страницы каталога, карточки товаров, корзина, форма оплаты. А бывает с дополнительными фишками — автоматической выгрузкой товаров из CRM, интеграцией с платежными системами или складскими учетами. И вот все эти интеграции и другие сложные штуки обычно не видны в интеллект-карте. Их нельзя просто так прикинуть. Поэтому назвать точную сумму заранее не получится.
Можно назвать стоимость на основе предыдущих проектов, но это как на глаз пытаться определить размер обуви перед покупкой — получится очень приблизительно.
Мы можем озвучить вилку и уточнить: «Вот столько будет стоить проект, если вы не планируете сложные процессы вроде подключения платежных систем».
Именно поэтому важно начинать с проработки структуры и уточнения всех нюансов. Сначала создаем базовый план, потом детализируем задачи и только после этого выдаем точную смету.
Меня зовут Дмитрий Хоружко, я основатель агентства по веб-разработке Nineseven
Ладно, а что включено в смету?
После первых обсуждений клиент часто берет смету в руки и начинает детально разглядывать: «А это точно включено? А чат будет? А корзина есть?» И тут важно быть максимально прозрачными.
Смета не может описывать все до мелочей, особенно если на этапе пресейла нет технического задания. Мы не закладываем туда каждую мелочь вроде виджета с чатом или специфических функций заказа, если они изначально не были оговорены.
Здесь нужно четко понимать: если в ТЗ не прописано, то мы это не делаем. При этом если клиент видит, что чего-то не хватает, это всегда можно добавить. Правда, за отдельную плату.
В чем отличие дешевого сайта от дорогого?
Дешевый сайт — это ограниченные возможности, стандартные решения и минимум кастомизации.
Дорогой сайт — это сложный функционал, индивидуальный подход, проработка всех деталей. Разница примерно такая же, как между одеждой с рынка и пошивом на заказ.
Однако у всех свои понятия «дорого» и «дешево». Рынок очень разнородный, ценники варьируются от 2000 до 50 000 долларов и выше. Все зависит от задач, а иногда и наглости исполнителей.
А как вообще проходит разработка?
Здесь стандартный процесс:
Проектирование. Создаем прототипы страниц, планируем функционал.
Дизайн. Рисуем концепцию и дорабатываем ее до финального варианта.
HTML-верстка. Превращаем дизайн в рабочие страницы.
Натяжка на CMS. Подключаем систему управления контентом, чтобы сайт можно было редактировать.
Проверка и доработка. Тестируем функционал и вносим правки.
Финал. Подключаем аналитику, SEO.
Этапы всегда выглядят одинаково, но каждый проект требует своих решений, а значит — своих сроков.
Часики тикают. Сколько времени нужно на разработку сайта?
Это второй по популярности вопрос. Иногда он звучит конкретнее: «Можно ли успеть к маю/Новому году/именинам эрцгерцога?». Но ответ всегда одинаковый: сроки зависят от объема и структуры сайта. Чем больше разделов, чем сложнее функционал, тем дольше процесс. Простой лендинг можно сделать за несколько недель, а интернет-магазин с интеграциями займет месяцы.
Еще один важный фактор — участие самого клиента. Если он отвечает оперативно, согласовывает макеты в срок, то работа идет быстрее. Но если каждое решение занимает недели, никакие ускорения команды не спасут и именины эрцгерцога пройдут без сайта.
Вообще приоткрою секрет: наши разработчики оценивают задачи не в часах, а в сторипоинтах. Так мы называем уровень сложности задачи. Скажем, если он равен четырем, значит закрыть ее можно в течение дня. А уже менеджер конвертирует это в часы с учетом переговоров, скорости ответа клиентов и т. д. Подробнее о том, зачем это нужно, можно прочитать в моем тг-канале.
Можно ускорить разработку? Нанять больше специалистов и сделать все в пять раз быстрее?
Теоретически — да. Можно подключить больше разработчиков, разделить задачи на несколько потоков. Но на практике это срабатывает далеко не всегда. Почему?
Все в очередной раз упирается во взаимодействие клиента и студии. Работа идет быстрее, если клиент четко ставит задачи и вовремя принимает решения. Если согласования занимают дни и недели, никакая скорость команды не поможет.
К тому же любое ускорение — это всегда компромисс между качеством и сроками. Хотите быстрее? Нужно больше ресурсов. Но чтобы это сработало, придется включаться в процесс так же активно, как мы.
Что от меня нужно для начала работы?
Чаще всего клиенты не спрашивают об этом — мы сами даем списоки, проводим их за руку через весь процесс.
Но если вдруг вопрос возникает, вот что нужно:
Структура сайта.
Материалы для контента: тексты, изображения, логотипы.
Уточнение функциональных требований (нужны ли интеграции с CRM, платежными системами и т. д.)
Если чего-то не хватает, то мы подскажем и поможем собрать все необходимое сами или порекомендуем, к кому обратиться.
Можно ли вносить изменения, когда разработка уже идет?
Формально — нет, но жизнь вносит свои коррективы. Если вы хотите что-то поменять или добавить, это не проблема. Главное, чтобы изменения не затрагивали уже согласованные этапы.
Но давайте честно: если вы на середине проекта вдруг решаете, что нужна не просто «форма обратной связи», а интеграция с CRM и автоматические ответы, то сроки и стоимость разработки вырастут. Поэтому мы всегда фиксируем исходное ТЗ и стараемся минимизировать изменения в процессе работы.
Какие функции можно добавить на сайт?
Функции сайта напрямую зависят от его структуры. Мы отталкиваемся от интеллект-карты, смотрим на указанные разделы и включаем в разработку все необходимое.
Для раздела «Контакты» — форму обратной связи.
Для «Личного кабинета» — историю заказов, профили пользователей.
И так далее.
Дополнительные возможности, такие как платежные системы, интеграции с CRM или аналитика, обсуждаются отдельно. Все это включается в смету, чтобы клиент понимал, за что платит.
Можно ли подключить платежную систему?
Платежные системы — это важный пункт, но на старте клиент редко его поднимает. Мы чаще сами спрашиваем: нужны ли такие интеграции?
Платежная система — это только часть истории. На уровне проекта могут потребоваться складские системы, управление товарами, чаты, аналитика и многое другое. Все эти моменты обсуждаются заранее и включаются в смету.
Если вам предстоит запуск нового проекта, не стесняйтесь уточнять все нюансы. Менеджеры на все ответят — это их работа. От вашего участия зависит скорость разработки и попадание конечного результата в точку.
Сколько версий дизайна будет?
Это частый вопрос, особенно от клиентов, которые боятся, что им не понравится результат. Мы обычно рисуем одну концепцию, которую дорабатываем в рамках трех итераций правок.
Что делать, если не понравится дизайн?
Это боль любого дизайнера. Вы рисуете идеальную концепцию, а клиент говорит: «Нет, давайте все переделаем». В этом случае мы проводим дополнительные обсуждения, уточняем пожелания, правим макет. В рамках бюджета включены три итерации правок. Если и этого не хватило, дальнейшие доработки оплачиваются отдельно.
Хотя бывают случаи, когда доработать и обсудить невозможно: однажды нам поставили условие и попросили включить его в договор — сайт должен получить главную премию Awwwards. Но это редкость: правильно собранное ТЗ и хорошие референсы решают 90% вопросов на старте.
В общем, самый важный момент — всегда уточнять ожидания. Мы просим клиента показать, какие сайты ему нравятся, чтобы задать направление.
Можно ли сделать сайт похожим на пример из интернета?
Часто слышим:
«Хочу как у этих, только чуть лучше»
«Сделайте, чтобы было похоже»
Референсы помогают, но копировать чужие сайты нельзя: это и юридически неправильно, и технически сомнительно. Мы адаптируем понравившиеся элементы и подстраиваем их под ваш проект. То есть крадем творчески.
Главное — помнить, что «пример из интернета» — это ориентир, а не четкое ТЗ.
Сайт будет нормально выглядеть на смартфонах и планшетах?
Такой вопрос редко, но все же задают. В 2025 году никто не делает сайты без адаптации под мобильные устройства — это уже стандарт, как «Оливье» и «Селедка под шубой» на Новый год.
Мы прописываем это в смете и учитываем на всех этапах разработки. Если кто-то вдруг решит спросить: «А точно ли сайт будет хорошо смотреться на телефоне?», — скидываем макеты адаптивных версий или показываем готовые примеры.
А мы сможем сами редактировать контент?
Да, но возможность редактирования контента всегда оговаривается заранее. Если вы хотите менять тексты и изображения или добавлять новые товары, это нужно включить в ТЗ.
Чаще всего такие вещи реализуются через систему управления контентом (CMS). Однако стоит помнить: не весь контент может быть доступен для редактирования. Сложные элементы дизайна или функционал, завязанный на код, требуют вмешательства разработчиков.
Кто купит домен и хостинг?
Покупкой домена и хостинга всегда занимается клиент. Мы можем порекомендовать подходящих провайдеров и тарифы, но вся регистрация должна проходить на имя клиента имя.
Почему так? Потому что это собственность. Если разработчики покупают домен за клиента, в будущем это может стать проблемой, особенно при смене подрядчика.
Сайт будет работать быстро?
Скорость работы сайта — это один из базовых параметров, который мы закладываем в разработку. Часто клиенты просят прописать требования, такие как «быть в зеленой зоне PageSpeed Insights» или «скорость ответа сервера не более 200 мс».
Но, как говорится, есть нюанс:скорость зависит не только от разработчиков. Если вы зальете на сайт несжатые изображения или загромоздите его ненужными скриптами, он начнет тормозить. Оптимизация — это совместная работа клиента и команды.
Вы занимаетесь техподдержкой сайта после запуска?
Этот вопрос редко задают, хотя он один из самых важных. Разработка — это только начало. После запуска сайта возникают задачи: обновления, правки, техподдержка. Мы предлагаем услуги постпроектной поддержки.
А сколько стоит ваша техподдержка?
Техподдержка оценивается по часам работы. Мы смотрим на объем задач, который вы хотите решать после запуска сайта, и считаем стоимость за определенный период. Обновить данные в разделе или добавить новый функционал — это одна история, а вот масштабная переработка дизайна или подключение нового API требует больше времени и, соответственно, денег.
Вообще надо понимать, что после запуска сайта траты не заканчиваются. Это как покупка автомобиля или дома — всегда нужно что-то делать, что-то проверять. Один из клиентов очень четко сформулировал вопрос по техподдержке: «Сколько будет стоить владение сайтом?».
Что произойдет, если сайт перестанет работать?
Полный «крах» сайта — вещь редкая. Но если такое случается, в 90% случаев проблема в хостинге, а не в разработке. Хостинг может отключить сервер из-за неоплаченного счета или внутренней ошибки.
Мы советуем клиентам всегда держать под рукой контакты хостинг-провайдера, а еще прописываем базовые рекомендации на случай неполадок. Если ошибка все-таки связана с кодом, мы разбираемся и исправляем.
Будет ли сайт в топе Google и Яндекс?
Будет, если работать над контентом, SEO, конкурентными ценами, наполнением каталога. Мы делаем базовую SEO-оптимизацию, но за полноценным продвижением нужно обращаться к профильным специалистам.
Красивый сайт будет привлекать клиентов сам?
Если коротко: нет. Дизайн — это оболочка, которая работает вместе с качественным наполнением. Даже у крупных проектов как Amazon, дизайн — это далеко не главная причина успеха. Важнее: актуальные цены, быстрый поиск товаров, продуманный функционал. Новый сайт может стать отличным стартом, но для его успешной работы нужен комплексный подход.
Что такое HTML-верстка?
Объясняем просто:
После дизайна у вас есть красивые картинки — это только макет, который нельзя открыть в браузере или использовать.
HTML-верстка — это перевод дизайна в код, чтобы сайт можно было увидеть в браузере, с текстами, кнопками, но без функционала. То есть на этапе верстки кнопка будет выглядеть красиво, но нажимать на нее бесполезно — никакой реакции. Чтобы кнопка заработала, нужен следующий этап — программирование.
Я хочу заплатить и не вникать в ваши процессы. Так можно?
Вопреки ожиданиям, разработка сайта — это не заплатили, ушли на полгода, а потом вернулись за готовым проектом. Для создания качественного продукта клиенту нужно быть включенным на всех этапах. Так финальные тесты и приемка требуют ежедневного участия. Если клиент не отвечает на вопросы или не проверяет работу, проект может застопориться или затянуться.
Поэтому мы всегда уточняем: готовы ли вы выделить время, чтобы быть на связи? Если нет, лучше подождать, пока появятся ресурсы.
Зачем мне знать все эти термины, если специалисты вы?
На этапе техподдержки клиент первым сталкивается с возможными проблемами. И от того, насколько четко он их сформулирует, будет зависеть, как быстро решиться проблема. Вообще некорректно сформулированные запросы — суперчастая причина долгой работы поддержки.
Пример. Клиент пишет, что «товары не отображаются на странице». Мы заходим на сайт, видим, что товары есть. Однако в ходе поисков проблемы выясняется, что клиент имеет в виду отсутствие результатов поиска при выставлении фильтров. Это не просто ошибка загрузки страницы, а проблема с работой фильтров, которые не возвращают данные с сервера. Она может быть связана с с несколькими причинами:
Ошибка в запросе на сервер — фильтры на сайте не правильно формируют запросы, или сервер не возвращает правильные данные.
Проблемы с фронтенд-кодом — фильтры могут неправильно обрабатывать выбор пользователем, и поэтому товары не обновляются на странице.
Кэширование данных — иногда кэшированные результаты могут не обновляться, из-за чего старые товары остаются видимыми, а новые не появляются.
Короче говоря, из-за неточного запроса времени понадобилось намного больше, чем обычно. Поэтому сейчас мы думаем над созданием гайда по постановке задач, чтобы сэкономить нервы всем.
Почему ваш подход лучше, чем на конструкторах сайтов?
Конструкторы — это отличное решение для простых задач. Если у вас небольшой интернет-магазин с 50 товарами или сайт-визитка, можете обойтись без разработчиков.
Но если нужно сложное решение: интеграция с CRM, сложный каталог или нестандартный функционал — без индивидуальной разработки не обойтись.
Мы часто помогаем клиентам разобраться, какой подход будет лучшим для их задач, чтобы они не тратили лишние деньги.
А сайты из портфолио точно вы делали?
Часто клиенты уже видели наши проекты до встречи, но все равно хотят уточнить: «А вот это точно вы делали?» Мы показываем, объясняем, что из них аналогично запросу клиента. Тогда сомнения развеиваются.
К слову, покажем часть наших работ:
А вы защитите сайт от взлома и вирусов?
Этот вопрос поднимается реже, чем хотелось бы, но важно уточнить: базовая безопасность — это то, что мы всегда обеспечиваем. Защита от SQL-инъекций, предотвращение XSS-атак, настройка HTTPS — это стандарт. Но если речь идет о глубокой информационной безопасности, такой как защита от хакеров, это уже не в нашей зоне ответственности.
Мы рекомендуем обращаться к специалистам в области информационной безопасности, если вашему проекту требуется что-то большее, чем стандартные меры.
А данные на сайте будут в безопасности?
Безопасность данных — это совместная работа разработчиков и хостинг-провайдера. Мы прописываем все, что касается доступа, использования защищенных контуров, настройки SSH-ключей и ограничений в админке.
Если клиент хочет особых мер, это обсуждается на этапе подготовки технического задания. Мы стараемся сделать так, чтобы вы могли спать спокойно, зная, что сайт и данные под защитой.
Тексты сами придумываете или мне их писать?
Мы не пишем тексты. Если готовых материалов для наполнения сайта нет, то советуем сначала поработать с редакторами и собрать хотя бы базовую информацию. Без нее проект просто не сдвинется с места. Это особенно важно для корпоративных сайтов. Для интернет-магазинов все проще: товары у клиентов обычно уже есть, можно использовать их описания.
Какой сайт мне нужен: лендинг или многостраничный?
Большинство клиентов знают, что им нужно. Однако бывают случаи, когда кто-то хочет интернет-магазин, но не готов к инвестициям. Тогда мы предлагаем начать с чего-то простого — лендинга или магазина на Tilda. Вложить деньги в продвижение, наполнить каталог, протестировать рынок. Если проект пойдет, то всегда можно вернуться к разработке полноценного сайта.
Какие гарантии вы даете?
Мы даем год гарантии на работы, выполненные в рамках технического задания. Если функционал работает не так, как хочет клиент, но это противоречит утвержденному сценарию в ТЗ — это доработка, а не гарантийный случай.
Еще гарантия не покрывает ошибки из-за изменений в коде сторонними подрядчиками или внешних проблем:
Серверные ошибки.
Проблемы с сетью.
Ошибки в работе сторонних скриптов, плагинов, API или библиотек.
Проблемы, возникающие из-за обновления платформы (например, CMS) или окружения сервера.