Как я делаю сайты: Делаю красивые сайты

Содержание

Всё простое опять стало сложным / Хабр

Это выступление состоялась 12 октября 2017 года на конференции Mirror Conf в Браге (Португалия) и ещё раз 9 февраля 2018 года на Awwwards Conference в Берлине.

Этим летом после лекции на веб-конференции у меня состоялась увлекательная беседа с молодой студенткой, которая изучает цифровой дизайн. Было интересно сравнить наши карьерные пути. У меня пятнадцать лет опыта дизайна для веб-клиентов, у неё — один год, но каким-то образом мы оказались в одинаковой ситуации: мы наслаждались работой, но были совершенно дезориентированы и обескуражены быстро растущей сложностью всего вокруг. Что за ерунда произошла? (Конечно, это риторический вопрос).

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

Моё отсутствие стало основным источником замешательства. Три года назад я прекратил делать веб-сайты для клиентов и сосредоточился на своей компании Abstract. Работа закончилась в начале прошлого года — и после небольшого перерыва я вновь открыл прежнюю студию дизайна.

Можете догадаться, чтобы произошло дальше. Сразу со старта мне поступило несколько заказов на веб-сайты. За три года многое может измениться, так что я решил ознакомиться с последними новинками веб-разработки и… ох ты чёрт…

Что здесь вообще творится?

Сразу обескураживала сложность. Я даже не был уверен, хочу ли браться за разработку веб-сайтов, посмотрев текущие методы работы. В конце концов, всё-таки взял заказы. Чутьё подсказало, что многие их новых сложных процессов, инструментов и методов разработки совершенно необязательны. Это второй важный тезис моего выступления: хочу скромно защитить простой дизайн и простую реализацию в качестве лучшего варианта для веба и пользователей.

Но я забегаю вперед. Во-первых, должен рассказать немного больше о том, кто я и чем занимаюсь.

Я управляю небольшой веб-студией, а если без пафоса — то крошечной, с заглавной буквы «К». Студия занимается всем: книги, журналы, брендинг и конечно веб-сайты. В этом году юбилей: мы отмечаем 15 лет в бизнесе, и лично я отмечаю 20 лет карьеры веб-разработчика. Как на любом большом юбилее, начинаешь сентиментально вспоминать, как всё начиналось.

Студия открылась в 2002 году в виде человека (это я) с ноутбуком и стопкой бумаги за столом в углу квартиры.

Спустя пятнадцать лет студия по-прежнему остаётся человеком с ноутбуком и стопкой бумаги за письменным столом в углу квартиры.

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

Сейчас всё иначе, но я по-прежнему за своим столом.

Сначала меня поразило отсутствие видимого прогресса в моей студии, но потом дошло: что, если я умышленно его остановил? Зачем менять то, что работает? Я могу подойти к разным проектам с разных сторон — и рад тому, что во многих случаях отлично получается! Время и практика действительно решают.

За исключением веб-сайтов. Они выделяются среди всей работы, потому что после 20-ти лет я не чувствую, что стал лучше в их создании. Мои знания и навыки немного развиваются, затем всё меняется — и половина накопленных знаний становится мёртвым грузом. Это вряд ли возможно с любой другой работой, которую я делаю.

Даже интересно, то ли у меня двадцатилетний опыт создания сайтов, то ли в реальности пятилетний опыт, повторённый четыре раза. Если вы какое-то время работаете в IT, пожалуйста, скажите, если это вам знакомо.

Позвольте показать пример таких пятилетних циклов.

Как я уже сказал, первый сайт я разработал 20 лет назад. Я точно помню это, потому что подростком делал божественную работу: записывал тексты альбома OK Computer Radiohead. Это был 1997 год, я изучал HTML, и меня смущала только одна проблема в дизайне:

Двадцать лет спустя мы всё ещё работаем над этим очень простым вопросом.

<table>
  <tr>
    <td>Hi</td>
    <td>Mom</td>
  </tr>
</table>

Тогда в 1997 году мы применяли таблицы и прозрачные картинки для распорки… Это было похоже на создание веб-сайта в электронной таблице из ада. По какой-то причине мне это нравилось. Возможно, меня очаровала возможность собрать что-то в своей комнате, нажать кнопку — и перенести это «туда».

{ float: left; }

Примерно через пять лет сайты начали использовать флоаты в CSS, потому что таблицы не относятся к семантике. Справедливо! С тех пор я потратил около 200 часов на чтение книг, в мастерстве осваивая флоаты. Я всё ещё не уверен, что понимаю их: набираю clear: both и молюсь богу блочную модель.

{ display: flex; }

После пяти лет работы наугад меня спас родимый Flexbox. Я учился на дизайнера полиграфии, и вот наконец c Flexbox могу написать три-четыре строчки CSS — и два блока выстроятся по базовому уровню. Аллилуйя. Пришлось подождать всего десять лет, чтобы это появилось.

{ display: grid; }

А теперь после игр с Flexbox появился CSS Grid: мощная новая фича, которая обещает сделать адаптивный веб-дизайн ещё более запутанным. Конечно, я шучу, потому что сетка — большое улучшение в управлении макетами. Но немного жутковато изучать её, потому что каждый раз, когда я вижу диаграмму, объясняющую, как работает CSS Grid…

На память приходят табличные макеты, которые я делал в 1997 году. Где-то в голове звучит голос, что мы вошли в цикл — и он повторяется. Мы завершили один оборот, а теперь будем вечно идти по кругу. Через пять лет появится другой подход к компоновке. Вероятно, он будет напоминать флоаты — и непонимание правила clear снова мне аукнется, второй раз в карьере.

Подобные циклы можно увидеть и в других областях веб-дизайна. Ничто не стоит на месте. Ничего удивительного, что люди с 15-летним опытом озадачены так же, как с опытом 1 год. Последние технологии часто понимают только те, кто удачно попал в середину текущей волны. Если вы ещё не достигли гребня, то у вас недостаточно опыта и вы ничего не знаете. Если вы обогнали волну, то знаете слишком много лишнего, что неприменимо к этому конкретному способу работать. Я не говорю, что молодые глупы или что неопытные неумелы — конечно нет. Но помните: если вы достаточно долго в индустрии, то испытаете все три ситуации.

Один из аргументов состоит в том, что постоянное изменение методологии — полезно и правильно. Согласен. Постоянное развитие помогает исправить недостатки. Было бы ужасно, если бы ничего не менялось. Но я согласен и с другим аргументом: терпение у людей не вечное. Сколько кругов может пробежать человек? Я сейчас на пятом круге — и могу сказать, что очень утомительно заниматься переупакованными идеями прошлого, не чувствуя никакого предубеждения к ним.

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

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

С одной стороны, начинающим упрощается задача: не нужно изучать то, что больше не актуально. С другой стороны, опыт создаёт две трудности. Во-первых, выявить и стереть из памяти ненужные навыки (это тоже требует усилий). Во-вторых, оставаться открытым, терпеливым и готовым принять новшества, даже если они похожи на новое решение для задач, решённых давным-давно.

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

Новые методы изобретены, чтобы управлять уровнем сложности, который полностью чужд мне и моей работе. Было легко отказаться от большинства этих нововведений, когда я понял, что есть альтернативные способы управления сложностью. Вместо смены инструментария или рабочего процесса я меняю дизайн. Это как проект дома: его легко построить и не нужно расставлять башенные краны как для небоскребов.

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

Моя философия веб-дизайна: не суетиться. Моя работа — помочь клиентам определить и выразить одну или две уникальные истинные идеи о проекте или компании, а затем отшлифовать их лёгкими штрихами с помощью запоминающегося дизайна. Если возникнет сложность, мы рассматриваем её, определяем шаблоны и меняем план всей конструкции. Необязательно искать лучшие инструменты или более модные процессы. В прошлом я говорил о «сути веба». Это варианты дизайна, совместимые с тем, что легко, удобно и надёжно делают HTML и CSS.

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

Чтобы проверить, в какой мере сложность присуща моим скромным потребностям, я записал технические требования к своему веб-дизайну. Это не самый длинный список:

простой, отзывчивый макет
веб-шрифты и красиво расположенный текст
качественные, масштабируемые изображения

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

Например, чуть выше я показал четыре разных метода поставить два элемента рядом друг с другом. Каждый последующий практически заменяет предыдущий, так что надеюсь, что мы достигнем стабильного состояния с Flexbox и CSS Grid. Но кто знает, что появится ещё через пять лет?

Веб-шрифты? Я полагал, достаточно записать пару строчек с правилом @font-face, но издательство A Book Apart только что опубликовало 90-страничную электронную книгу о том, как загружать эти шрифты. Это совершенно удивительно: я думал, что внедрить веб-шрифты относительно легко, но похоже нет!

Даже работа с изображениями стала сложной. Векторные изображения выдаются в формате SVG, но если копнуть вглубь, то у вас глаза на лоб полезут, потому что SVG по сути — это отдельная веб-страница, которая внедряется в основную веб-страницу. И с растровыми картинками необходимость выдать картинку оптимального размера для каждого устройства настолько сложна, что появились платные сервисы для этих целей. Публиковать изображения теперь так же сложно, как видео.

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

Весь этот комплект — популярный способ работы в 2018 году. Но такие комплекты инструментов абсолютно непостижимы извне. Трудно даже начать работу. Месяц назад мне пришлось установить диспетчер пакетов, чтобы установить диспетчер пакетов. После этого я закрыл ноутбук и медленно отошёл от него. Да, мы далеко от Садов Дзена CSS, откуда я начинал.

Если поговорите с разработчиками ПО уровня сеньора, то вероятно услышите жалобы на спагетти-код. Это когда код запутан, плохо структурирован, труден для понимания и страдает зависимостями. Когда я услышал термин в первый раз, то успокоился, потому что хотя и не могу распознать спагетти-код как дизайнер, но мне до чёртиков знакомы рабочие процессы спагетти и инструменты-спагетти. Такое чувство, что мы сейчас в вебе.

Это разбивает моё сердце, потому что раньше так легко было посмотреть и понять код любого сайта. С этим так много связано в первые мои годы в вебе. Я мог посмотреть исходники, но с каждым годом они становятся всё менее и менее полезными как способ изучить работу других людей. Разметка раздулась в размерах и стала неудобочитаемой, потому что компьютеры генерируют её не глядя на контекст. Стили стали слишком многословными и избыточными до безобразия. Функциональность прячется в сжатом JavaScript.

Ситуация раздражает меня, потому что мысли обращаются к той молодой дизайнерке, которую я упомянул в начале статьи. Ведь сколько у меня было возможностей воспроизвести то, что я видел, имея разборчивые примеры? И насколько вредно обфусцировать эту информацию, пряча от её глаз? Раньше веб-сайты говорили сами за себя; теперь кто-то должен помочь разобраться.

Неудобочитаемость проистекает от сложности в отсутствие ясности. Я считаю, что удобочитаемость источника — одно из важнейших качеств веба. Это главное, что держит дверь открытой для независимого, неопосредованного вклада в Сеть. Если вы можете написать разметку, вам не нужен Medium, Twitter или Instagram (хотя их славно иметь). И лучший способ помочь кому-то написать разметку — научить его читать разметку.

Интересно, что о ситуации думают молодые дизайнеры, как они получают знания в этой сложной области. Как они могут учиться, если код нечитабельный? Может быть, более опытные профессионалы таким образом завышают планку доступа? Двадцать лет назад я решил сделать собственный сайт, потому что увидел пример HTML-кода и мог его прочитать. Многие из моих коллег-дизайнеров начинали так же. Мы освоили навыки создания сайтов, но остановились на этом. Мы застряли на разметке и никогда не перешли в полномасштабное программирование, потому что хотели идти только до тех пор, пока всё остаётся читабельным.

Если знания о вебе быстро разрушаются, то есть смысл выработать для себя строгие принципы по отношению к изменениям и обучению.

Кремниевая долина пыталась предложить некоторые. У них всё основано на скорости. Самый известный принцип идёт от Facebook с их мантрой «Двигайся быстро и всё ломай [хакай]». Эту мантру уже неоднократно спустили в унитаз, но что интересно, мало кто предложил обратную: «Иди медленно и всё чини».

Позвольте показать вам видео о скорости.

Это моё любимое открытие в интернете за последние несколько месяцев. Я достаточно много раз смотрел его, чтобы поразмышлять. Понимаете ли, в чём дело… кролик проигрывает не потому что устаёт. Он проигрывает, потому что запутывается, не понимает, в каком направлении идти. Заметили, как он остановился и начал беспомощно озираться на толпу вокруг, а все громко кричат о вещах, которые кролик не понимает? Вот это я в твиттере.

Как человек с десятилетиями опыта в интернете я ненавижу сравнивать себя с черепахой, но блин, если подходит, значит подходит. Давайте возьмём пример с той черепахи: станем старательными, прямыми и целеустремленными. Вебу нужен запас неторопливости и вдумчивости, поскольку его охват и сила продолжают расти. То, от чего мы зависим, должно быть правильно построено и грамотно сформировано. Нам нужно создать пространство для важного брата сложности — тонкости, нюанса. Пространство без нюанса скатывается к глупости. И как американец, я могу вам сказать: нет никаких пределов на размер ущерба, который может нанести этот опасный коктейль из быстроты и глупости.

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

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

Создаем сайты на Тильде с 2016 года

Дизайн

В основе дизайна лежат готовые блоки и шаблоны, которые я довожу до ума. Я также учитываю примеры сайтов, которые нравятся вам. При необходимости использую Zero Block.

Функциональность

Я прекрасно ориентируюсь в 550+ готовых блоках. При необходимости я играючи выполню интеграцию с внешними сервисами, например, подключу чат, CRM или онлайн-оплату.

Быстрый старт

Возможности Tilda и мой опыт работы с ней позволяют запускать сайты за 5−10 рабочих дней не жертвуя качеством.

Адаптивность

Страницы, созданные на Tilda, будут хорошо смотреться на всех устройствах. Я не забываю тестировать сайт и оптимизировать отдельные элементы.

SEO-оптимизация

В рамках услуг по SEO я делаю качественную внутреннюю оптимизацию сайта и работаю с внешними и поведенческими факторами.

Тех. поддержка

Отдел поддержки своевременно отвечает на мои запросы по доработке отдельных блоков и добавлению нового функционала.

Полное описание возможностей

Отзывы о моей работе
с конструктором Tilda Publishing

Мне было очень комфортно работать с Михаилом. Он отличный project manager с крутой командой — копирайтер, дизайнер, иллюстратор. У меня был проект «под ключ». Получилось не быстро, но мегакачественно. Был подробный бриф на копирайтинг, где я исписала листов 10 про компанию и ценности. Очень хотела, чтобы в текстах чувствовалась душа и все ценности моего бизнеса. И получилось на 100%. Подача контента и структура понятная и логичная. Уникальные иллюстрации — я рада, что нет ничего из фотостоков. С Михаилом вместе генерировали «метафоры», а иллюстратор всё круто визуализировала. Для разработки визуала помогли референсы. Так получился сайт мечты. Я от него кайфую! Сам Михаил очень вовлеченный и отзывчивый.
Спасибо тебе, Миша, и твоим ребятам за огненный сайт!

Ксения Окунцева

Основатель Cellar Door

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

Виктор Андреас

Основатель Elyon Digital

Команда Михаила не просто следовала нашему ТЗ, но и подсказывала дизайнерские решения для вовлечения аудитории и увеличения конверсии к покупке билета на сайте. Макет сайта мы получили быстро, как и сам сайт после. Так как лендинг предназначался для конференции, с нашей стороны было много просьб на протяжении месяца до даты проведения мероприятия: добавить/убрать спикеров и менторов, изменить цену билета, добавить полное расписание и другие. И на это мы получали поддержку высокого уровня: Михаил всегда был на связи и вносил правки в течение одного дня. На конференции мы получили много откликов о нашем крутом сайте от участников. Наша команда искренне благодарна Михаилу и его команде за профессиональный подход, отзывчивость и внимание к деталям.

Дарья Ткаченко

Организатор Marketplace Conf

Миша, огромное спасибо за профессиональную и очень качественную работу! У меня огромный опыт взаимодействия с подрядчиками, но я никогда не ощущала подрядчика частью своей команды, которая стопроцентно погружена в проект и понимает свои цели и задачи порой даже лучше заказчика. Огромное спасибо не только за разработку, но и за проджект-менеджерскую часть и за то, что «невозможно» никогда не звучало на протяжении всего проекта. Совершенно точно это не последняя наша совместная работа!

Даша Лялина

Основатель Scent Hunter

Рад сотрудничеству с Мишей. Он нас достаточно грамотно провел по проекту, быстро собрал основную часть сайта, а дальше уже допиливали отдельные блоки и страницы. Отдельно отмечу, что Миша достаточно легко шел на встречу, даже в вопросах не регламентированных в договоре, что сэкономило нам не мало сил и времени. Спасибо за работу!

Магомед Яндиев

Директор по исследованиям Iconsoft

Студия мобильной разработки 65apps благодарит Мишу Когана за прекрасно реализованный проект по переносу нашего корпоративного сайта на сервис Тильда. Несмотря на сложность работы и высокие требования, он справился на «отлично»! Мы будем очень рады дальнейшему сотрудничеству, уже готовим новый скоуп задач по апгрейду сайта!

Дмитрий Желнин

Генеральный директор 65apps

Взаимодействие с Михаилом на всех этапах очень комфортное. Особенно ценно, что все процессы прозрачные, а значит, и результаты прогнозируемые. Здорово иметь уверенность в партнере и качестве его работ.

Кристина Копытина

Операционный директор продакшена ktonado.digital

В июне 2017 года было принято решение о возобновлении работы корпоративного сайта.

Был составлен шорт-лист из пяти потенциальных подрядчиков, которые оценивались по 7 критериям: физическая локация, скорость реакции на запросы, глубина проявленного интереса к проекту, качество собственного сайта, качество выполненных проектов, уровень коммуникации и стоимость. Наивысшую бальную оценку получил Михаил и на нем был сделан выбор.

По итогам работы хочу сказать, что результат, представленный Михаилом Коганом, полностью соответствует моим ожиданиям и я могу рекомендовать его как ответственного, внимательного и аккуратного исполнителя проектов сайтов на платформе Tilda.

Станислав Бухаров

Директор по маркетингу «Стар-Натурдарм»

Настоящим письмом выражаю сою искреннюю благодарность Михаилу Когану за отличную работу, которую он проделал при создании сайта для компании «Просто Космос». В работе с Михаилом мы увидели профессионализм, знания технологий, системный подход, соблюдение сроков, способность увидеть и понять наши потребности и предложить лучшее решение.

Для нас сайт является одним из важнейших методов продвижения, а поэтому было очень важно, чтобы он соответствовал нашему фирменному стили, был очень понятным для клиента, а также, чтобы его было легко найти через поисковые системы. Большое вам спасибо! Будем рады дальнейшему сотрудничеству.

Екатерина Прохорова

Директор по маркетингу и продажам «Просто Космос»

Михаил Коган — это, безусловно, лучшее знакомство моего 2016 года. На сегодняшний день я не могу представить свой проект без главного технического специалиста, это просто центр нашего Центра в мировой паутине.

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

Также хочу отметить, что с Мишей работать намного проще и лучше, чем с агентствами no name: он инициативен (что очень важно!), всегда быстро отвечает, всегда «в теме».

Мария Чуприна

Директор «Центра Специальных Информационных Исследований»

Очень долго пытались найти профессионала для создания нашего сайта, мы сами не знали каким хотим видеть сайт и очень благодарны Михаилу за то, что он подобрал для нас лучший вариант, буквально создав всю идею за нас! Все сделано было быстро и качественно, мы и не ожидали что сайт может быть на столько уютным 🙂 Очень довольны результатом! Спасибо!

Дмитрий Пелевин

Управляющий салонов красоты Либерта и Vikki

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

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

Анна Булочникова

Руководитель проекта «Знаю.Люблю»

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

Ольга Басс

PR-директор в Psychea

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

Егор Милюков

Руководитель проекта «Школа родословной»

В ходе сотрудничества, Михаил зарекомендовал себя как добросовестный и ответственный человек. На разработку сайта отводилось 10 дней, Михаил справился за 6. Выше всех похвал, результат превзошел ожидания — настоящий специалист! Планируем и дальше работать с Михаилом, рекомендовать его друзьям!

Вагиф Багиров

Мастер спорта, Чемпион России по русскому бильярду

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

Филипп Носов

Спортивный тренер

Мы начали создавать сами сайт на Тильде, находясь во Франции, но быстро поняли, что без помощи профессионала нам не обойтись. Путём различных поисков мы наконец-то связались с Михаилом и он оперативно отреагировал на наши пожелания и даже предложил идеи для улучшения нашего сайта. Теперь довольны все, и мы и наши клиенты, сайт получился радостный и простой в управлении, благодаря Михаилу. Даже после завершения проекта, очень отзывчив и до сих пор помогает нам с разными вопросами! Очень рекомендуем, быстрая и качественная работа! Большое спасибо!

Natalia André

Сооснователь My Amuse Box

Михаил, спасибо за отличную работу, креативность, лояльность и терпение 🙂 Надеюсь, у нас впереди еще много интересной работы. Желаю тебе и твоей команде крутых проектов и клиентов.

Наталья Маслова

Основатель рекламного агентства VIM Division

Часто задаваемые вопросы

Если Tilda — это конструктор, то почему я не могу сделать себе сайт самостоятельно?

Если вы обратились ко мне, значит вы экономите свое время и считаете деньги. Разработка сайта (на чем бы она не велась) требует опыта и специальных знаний — технических, маркетинговых, в области дизайна и юзабилити.

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

Хорошо. А какой тарифный план Tilda Publishing мне выбрать?

В большинстве случаев подходит Tilda Personal. Но если вы планируете сделать несколько сайтов или вы хотите экспортировать код на свой хостинг, я бы рекомендовал вам тарифный план Tilda Bussiness.

Берете ли вы предоплату за свою работу?

Да, я работаю по предоплате 50%. Оставшиеся 50% я беру после сдачи проекта. Без предоплаты я не работаю, если вы не Сбербанк.

Я не хочу сам поддерживать сайт. Оказываете ли вы услуги по развитию и доработке сайта, сделанного на Tilda Publishing.

Да, разумеется. После сдачи проекта я как правило оказываю услуги поддержки. Если у вас возникают нерегулярные доработки, то я их оцениваю в часах (стоимость моего часа — 1500 руб), согласую с вами бюджет и сроки и приступаю к работе.

Можете ли вы помочь с продвижением? Я слышал, что мало сделать хороший сайт, важно, чтобы на него как-то попали потенциальные клиенты.

В настоящий момент я не оказываю услуги по продвижению. Я принял решение полностью сконцентрироваться на создании сайтов. Но я могу рекомендовать одного из своих партнеров. Кстати, в рамках разработки сайта я делаю первичную SEO-оптимизацию, что положительным образом сказывается на продвижении.

Как убрать подпись made on tilda?

Все очень просто. Чтобы убрать подпись Made on Tilda вам всего лишь нужно оплатить на год вперед тарифный план Personal или Bussiness (в разделе «Тарифы и оплата»). После этого у вас в Настройках станет доступна опция «Не выводить PLATFORM LABEL».

Есть ли у Tilda недостатки?

Tilda — практически идеальный конструктор 🙂 К недостаткам я бы отнес невозможность загрузить в Tilda файл, например, PDF или видео.

Также Tilda — не лучший выбор, для создания большого (на 5000+ тысяч товаров) интернет-магазина.

Опыт

15-летний опыт работы
в управлении интернет-проектами. 6-летний опыт работы на конструкторе Tilda Publishing.

Проекты

Более 100 успешно реализованных проектов
в коммерческой, государственной и негосударственной сферах.

Клиенты

Правительство Москвы, 1:С, Jaguar/Land Rover, Hyndai, Polaris, Эхо Москвы, Российский союз писателей и многие другие.

Награды

Сайты, разработкой которых я руководил, отмечены призами в конкурсах Золотой Сайт, Рейтинг Рунета, Tagline.

Создайте веб-сайт с помощью Notion за считанные секунды, кодирование не требуется

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

Но в Notion все, что нужно для публикации страницы в Интернете, — это один клик. Вы можете:

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

Как опубликовать

С помощью Notion вы можете создать веб-сайт всего за несколько кликов. Все, что вам нужно сделать, это нажать Поделиться на любой странице и включить Поделиться в Интернете . Его увидят все, у кого есть ссылка. А когда вы будете вносить правки, ваша страница будет меняться для посетителей в режиме реального времени. Это так просто!

Готовые шаблоны и вдохновение, которые расширят возможности вашего веб-сайта

Если вы не хотите начинать с нуля, вот несколько шаблонов, которые вы можете использовать в качестве плацдарма для ускорения работы ваших страниц. Мы также включили идеи нескольких компаний, использующих Notion для создания своих веб-сайтов.

Шаблоны

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

Одна страница со всеми открытыми возможностями и информацией о вашей компании.

Скопируйте шаблон доски объявлений в свою рабочую область.

Справочный центр — сократите очередь электронной почты в службу поддержки клиентов. Найдите наиболее часто задаваемые вопросы, заглянув в папку «Входящие» службы поддержки и опубликовав материалы с ответами на эти вопросы. Это облегчает вашим клиентам поиск ответов, которые они ищут.

Notion позволяет легко организовывать этот контент в виде подстраниц и редактировать его по мере необходимости.

Предоставьте своим клиентам возможность самостоятельно получать информацию с помощью общедоступного справочного центра, который вы можете легко обновлять в любое время.

Помогите себе в шаблоне справочного центра.

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

Текст, изображения, внешние ссылки, столбцы и многое другое объединяются в вашем сообщении в блоге Notion.

Используйте шаблон сообщения в блоге, чтобы рассказать свою историю.

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

Общедоступная дорожная карта дает клиентам четкое представление о том, что вы создаете и когда это будет запущено.

Дублируйте шаблон дорожной карты в свою рабочую область.

Вдохновение

Готовы настроить страницу Notion, но еще не уверены, как вы хотите, чтобы она выглядела? Эти компании создали несколько исключительных веб-сайтов полностью в Notion, которые могут помочь вам проявить творческий подход.

Справочник сотрудника Blendle — нидерландская новостная онлайн-платформа опубликовала свою живую вики в открытом доступе. Используйте руководство для сотрудников Blendle, чтобы получить некоторые идеи о том, как создать вики для вашей компании. В нем четко изложено, как вы можете ставить цели для нового сотрудника, рекомендуемая литература компании и ценности компании.

В справочнике сотрудников Blendle есть все, что нужно новым товарищам по команде для начала работы.

Доска объявлений Toucan для знакомства с нами — расширение для браузера, помогающее выучить новый язык. Компания Toucan создала доску объявлений, в центре внимания которой находятся их ценности и команда. Существует даже база данных с указанием текущих сотрудников, так что вы можете познакомиться с некоторыми потенциальными товарищами по команде.

Доска объявлений Toucan позволяет сотрудникам немного рассказать о себе соискателям.

Оживите страницы Notion с помощью этих визуальных элементов

Введите / на любой странице, чтобы открыть целое меню элементов, которые вы можете включить на эти страницы. Чтобы получить к ним доступ, введите / и название того, что вы хотите сделать, например, / изображение или / typeform .

Заголовки и разрывы строк — упростите просмотр контента и навигацию с помощью h2 , h3 и h4 заголовков. Разделяйте длинные стены текста разрывами строк, вводя три дефиса подряд.
Столбцы — страница с чистым газетным макетом с изображением на одной стороне и текстом на другой. С помощью значка ⋮⋮ вы можете перетаскивать любые страницы, текст, изображения и т. д. в любое место на страницах Notion. Если вы хотите создать столбцы, перетащите что-нибудь влево или вправо от существующего содержимого. Синие вертикальные линии помогут вам ориентироваться.
Оглавление — это дает читателям возможность перейти к любому разделу вашего сайта, который им нужен. Введите /toc , чтобы создать оглавление, в котором ваши заголовки будут разбиты на разделы.
Изображение/видео/аудио — создайте мультимедийный опыт. Вы можете вставлять видео с YouTube, загружать файлы подкастов или перетаскивать изображения прямо на свою страницу Notion. Используя полосы по бокам изображений или видео, вы даже можете настроить их размер.
Встраивайте все, от видео до файлов подкастов, прямо на страницах Notion.
Typeform embed — соберите отзывы или создайте контактный портал, вставив Typeform на свою страницу Notion.
Встраивайте Typeform, чтобы получать отзывы от сотрудников, проводить опросы клиентов и многое другое.
Выноски и цитаты — привлеките внимание к определенному разделу или предложению с помощью выносок или цитат, как во многих популярных блогах.
Выноски и кавычки придают текстуру вашим страницам Notion и позволяют выделять определенные текстовые блоки.
Переключение списков — для таких материалов, как часто задаваемые вопросы, вы можете упростить навигацию по сайту, помогая посетителям сайта видеть только наиболее важную для них информацию. Поместите информацию верхнего уровня в предварительный просмотр переключателя и вложите в него дополнительную информацию.
Поддерживайте чистоту и порядок на страницах Notion, размещая информацию внутри переключателей.
Colors — настройте свой дизайн или подчеркните контент с помощью разных цветов текста или фона. Выделите любой текст и выберите ••• , затем выберите Color , чтобы выбрать цвет текста или фона.

Дополнительные параметры общедоступной страницы

Разрешить редактирование — любой пользователь Notion, вошедший в систему, может редактировать ваши страницы, чтобы вы могли совместно работать над их макетом или содержимым. Любой, кто не вошел в учетную запись Notion, увидит версию только для чтения. Например, если вы делитесь справочным центром своей компании, вы, вероятно, захотите отключить эту функцию. Однако, если вы делитесь черновиком сайта с клиентом, вы можете собрать все его отзывы здесь, прежде чем делиться ими с массами.

Беспрепятственно сотрудничайте на страницах Notion, отмечая товарищей по команде в комментариях.

Разрешить дублирование в качестве шаблона — допустим, вы создали отличный шаблон целевой страницы и думаете, что этот формат принесет пользу другим компаниям. Сделайте свою страницу дублируемой в качестве шаблона, который они могут сохранить в своем собственном рабочем пространстве Notion. Найдите эту опцию в меню Share .

Индексация в поисковых системах — привлечь трафик и сделать вашу страницу видимой в Google и других поисковых системах.

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

Resources for publishing pages

Intro to workspaces
Writing & editing basics
Comments, page comments & mentions
Sharing & permissions
Public pages & web publishing

Шаблоны, которые помогут вам создавать красивые веб-страницы

10 шагов по созданию качественного веб-сайта · Йенс Оливер Мейерт

10 шагов по созданию высококачественного веб-сайта

Публикация от 10 мая 2007 г. (↻ 25 октября 2022 г.), зарегистрированная в разделе «Веб-разработка» и «Искусство и дизайн» . (Новые сообщения: лента, Твиттер.)

Этот и многие другие посты также доступны в виде красивой электронной книги: О веб-разработке . Кстати говоря, вот краткий трактат об управлении качеством веб-сайтов: Маленькая книга контроля качества веб-сайтов (обновлено).

Качественный сайт с неба не падает, и его невозможно создать в несколько быстрых кликов. При настройке веб-сайта нужны цели, содержание, структура, дизайн, программирование и обслуживание. Что нужно, так это экспертиза. В этой статье описаны — не пытаясь быть полным — 10 наиболее важных шагов к созданию хорошего веб-сайта. Контрольный список для совместного использования.

Это перевод моей статьи «Веб-сайт 10 Schritte zur hochwertigen», любезно предоставленный Грегом и Эстер Скоуэн. Благодарю вас!

Содержание

Обязательство
Планирование
Информационная архитектура
Дизайн
Программирование
Обеспечение качества
Связи с общественностью
Контроль успеха
Техническое обслуживание
Обеспечение качества

1. Обязательство

Если вы искренне не хотите создавать сайт и не собираетесь его поддерживать: Даже не начинайте.

Высококачественный веб-сайт требует больших усилий и усилий. Хороший контент требует много обязательств и усилий. Ваши пользователи и посетители требуют приверженности и усилий. Веб-сайт можно сравнить с домашним животным — подумайте, действительно ли вы хотите его , прежде чем он у вас появится. (Но вы правы, плохо обращаться с домашними животными гораздо хуже.)

2. Планирование

Вы решили, что вам нужен веб-сайт, и этот веб-сайт должен соответствовать приемлемым стандартам. Что вам нужно сделать сейчас план :

Какова цель вашего сайта?
Какова целевая аудитория вашего сайта?
Какой контент вы хотите предоставить?
Какие показатели вы будете использовать для определения своего успеха? (Определите ключевые показатели эффективности.)

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

3. Информационная архитектура

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

4. Дизайн

Ура, Дизайн . Важно:

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

— Натан Шедрофф: развивающийся глоссарий дизайна опыта (2005).

Примите во внимание следующие дополнительные моменты, прежде чем приступить к процессу проектирования:

Полезно ознакомиться с некоторыми принципами , будь то конкретные принципы Тафте или Тоньяццини или общие принципы, такие как золотое сечение или ваби-саби.
Очень важно помнить о доступности даже на этапе проектирования. На этом этапе легко справиться с дальтонизмом, светочувствительной эпилепсией или недостаточным контрастом.
Протестируйте свои черновики (не ждите окончательной версии). Проведите тесты с пятью пользователями, с более чем пятью, потому что этого недостаточно, с 90 332 n 90 333 пользователями, если это дешево, или без них, потому что вы доверяете экспертам. Применяйте основные правила юзабилити.

Будьте изобретательны, но не без ограничений.

5. Программирование

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

Выберите подходящий тип документа для ваших документов. Если вы сомневаетесь, черпайте вдохновение у Джеффри Зельдмана или Эрика Мейера. Если это вам не поможет — просто выберите любой допустимый тип документа. [Сегодня просто используйте .]
Используйте элементы HTML в соответствии с их значением .
Напишите структурированный код и примите рекомендации по кодированию. Это особенно важно, если над проектом работает несколько человек.
Подтвердить. Все. Считайте табу на публикацию документов и таблиц стилей, которые недействительны.
Что бы вы ни делали, всегда помните о доступности. Эвристика доступности может быть полезна, хотя она не охватывает всего.

6. Обеспечение качества

После того, как вы разработали подробный, высококачественный информационный веб-сайт на основе вышеупомянутых пунктов, вы все равно должны обязательно и обязательно выполнить обеспечение качества (QA). От этого должен зависеть запуск вашего сайта. Возможно, вы сможете запустить свой веб-сайт сразу после проведения контроля качества, но это, вероятно, сработает только в том случае, если вы с самого начала сосредоточились на качестве.

Контролируйте и оптимизируйте следующее:

Техническая достоверность и соответствие всех ресурсов.
Доступность, в идеале с помощью реальных пользователей, но также могут быть полезны автоматические тесты.
Ссылки. Линкрот не модный.
Время загрузки.
Почти все. Ваш веб-сайт должен олицетворять отличное качество и удобство для пользователей. Убедитесь, что это так.

7. Связи с общественностью

Продвигайте свой веб-сайт без чувства вины. Ваш HTML уже должен быть пригоден для поисковых систем (семантика и доступность). С этого момента используйте умеренную стратегию ссылок и выполняйте обычные Связи с общественностью (PR). Я знаю, это легко сказать, но это нужно сделать. Кроме того, не расстраивайтесь, если ваш веб-сайт не будет иметь большого успеха с самого начала, а трафик взорвется в течение короткого времени — план на долгосрочную перспективу .

8. Контроль успеха

Убедитесь, что «ключевые показатели эффективности» (KPI), которые вы определили в начале, измерены. Если ваша статистика не дает вам этих цифр, убедитесь, что они есть. Есть несколько полезных статистических инструментов: несколько хороших бесплатных (Google Analytics), хороших и недорогих (Mint), а также хороших и дорогих (WebSideStory). Используйте метрики для оценки развития и успеха вашего сайта.

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

9. Обслуживание

Обслуживание вашего веб-сайта. Обновите свой веб-сайт. Позаботьтесь о своем веб-сайте. Регулярно добавляйте новый контент. Кроме того, просмотрите старый контент. Вам нужно вычитывать новый и старый контент. Никогда не переставайте сомневаться в своем сайте. В конце концов, это еще раз о…

10. Обеспечение качества

Верно, обеспечение качества — это процесс . Проверяйте, проверяйте и тестируйте свои документы, содержимое и дизайн… снова и снова. Наслаждайтесь своим хорошим сайтом!

Напишите об этом в Твиттере

Обо мне

Меня зовут Йенс, я ведущий разработчик — в настоящее время менеджер по работе с разработчиками в LivePerson — и автор. Я работал техническим руководителем в Google, я близок к W3C и WHATWG, а также пишу и рецензирую книги для O’Reilly.