Все просто снова трудно (2018)

Всепростосноватрудно2018

Это выступление было сделано в октябре 12, 2017 в Mirror Conf в Браге, Португалия, и снова 9 февраля

на конференции Awwwards в Берлине.


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

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


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

А разве вы не знали? Первыми открывшимися вакансиями были веб-сайты. За три года многое может измениться, поэтому я решил освежить в памяти последние разработки в области создания веб-сайтов… и о боже…

Все запуталось, не так ли?

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

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


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

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

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

Трудно понять, насколько сильно изменилась студия за последние годы. Тогда не было социальных сетей в том виде, в каком мы их знаем сегодня – ни Facebook, ни Instagram, ни снимков; большинство сайтов, которые вы посещаете сегодня, тогда еще не существовало, и большинство сайтов, которые мы посещали, сейчас не существуют. Айфонов не было. Вы заходите в Интернет, чтобы узнать маршрут и распечатать карту, как неандерталец. Мы вместе бились о камни, пытаясь создать графический дизайн.

Теперь все по-другому, но я все еще сижу за своим столом.

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

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

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


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

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

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

 

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

{ плыть налево;  } 
Привет Мама

Примерно пять лет спустя веб-сайты переместились на использование чисел с плавающей запятой в CSS, потому что таблицы не были семантическими. Справедливо! С тех пор я потратил около 1997 часов, читающих о том, как очистить поплавки. Я все еще не уверен, что понимаю это; Я печатаю

ясно: оба и помолитесь модели коробки.

 {display: flex;  } 

Я был спасен Flexbox через пять лет догадок. Это мой ребенок. Я прошел обучение в качестве дизайнера печати, и с помощью flexbox я могу набирать 3 или 4 строки CSS и иметь два блока текста, выстроенных в линию на базовой линии. Аллилуйя. Мне нужно было подождать всего десять лет, чтобы получить это.

 {дисплей: сетка;  } 

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

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

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

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

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

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

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

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

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


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

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

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

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

простой адаптивный макет
веб-шрифты и красиво настроенные текст

эффективные, масштабируемые изображения

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

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

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

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


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

просто введите npm в свой веб-пакет через grunt с помощью vue babel или bower, чтобы отреагировать asdfjkl; lkdhgxdlciuhw

Все это вместе является популярным способом работы в . Но чужие цепочки инструментов снаружи абсолютно непостижимы. Даже начало работы обидчиво. В прошлом месяце мне пришлось установить диспетчер пакетов, чтобы установить диспетчер пакетов. Именно тогда я закрыл свой ноутбук и медленно отступил от него. Мы очень далеко от CSS Zen Garden, с которого я начинал.

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

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

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

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

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

Если знания о сети быстро ухудшаются, стоит выработать твердую личную философию в отношении изменений и обучения.

Кремниевая долина пыталась чтобы предоставить некоторые из них. Все о скорости. Самая известная из них исходит от Facebook с их мантрой «Двигайся быстро и ломай вещи». Эту фразу уже достаточно часто бросали в тупик, но интересно то, что очень немногие готовы придерживаться ее противоположности: «Не торопитесь и исправляйте вещи».

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