Делайте больше

2 марта, 4:06

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

Клиенты обращаются к специалистам, чтобы они помогли в решении задачи. Скажем, пришёл клиент к вам за логотипом, примерно описал, что хочет, даже может дал наброски. Одному дизайнеру это будет радость и успех — полдела сделал заказчик, а другому — уныние и тяжелый проект, потому что в какой-то момент заказчик попросит поиграть со шрифтами. Вот как это произойдёт. Сначала вы делаете ему вариант логотипа по эскизу, потом он просит подвинуть первую букву левее. Вы двигаете и отправляете. Ему не нравится, он просит теперь подвинуть другую букву правее, и удлинить ей ногу. И надо ещё добавить вензель. И подчеркнуть. Вы делаете как он просит и отправляете вариант. Вам с каждым вариантом всё меньше нравится результат, хочется поскорее отделаться от тошного заказа. А клиенту — как повезёт. Возможно он думает, что вы на верном пути, ведь делаете всё как он просит. Возможно сомневается. Но где-то в глубине души он хочет хороший логотип, просто не знает как его добиться — он ведь не дизайнер, у него нет опыта рисования логотипа и инструментов под рукой. А исполнитель, как назло, попался неинициативный, всё из него клещами тянуть приходится. Клиент полностью контролирует процесс дизайна, пытается вашими руками слепить что-то, в чём плохо разбирается. Это плохой рабочий процесс.

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

Чтобы наладить процесс и не принимать бесконечные списки правок — делайте больше, чем вас попросили.

Хорошая инфографика залипательна

11 января 2018, 14:57

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

Здесь схематично показан путь газа от добычи до потребителя. Вся картинка себя исчерпывает, если просто прочитать текст и бегло посмотреть на иллюстрацию. Углубляться можно только разглядывая детали зданий, но это не даст ничего полезного. В том как иллюстратор изобразил завод нет ничего интересного и инфографичного. Хуже того, начиная углубляться появляется ещё куча вопросов, на которые не найти ответа:
Подземные хранилища это прям полость в земле или специальное подземное сооружение?
Что показывают стрелки манометров? У них одинаковая шкала или нет?
Как газ попадает с буровой вышки на сушу?
Толщина металла везде ~39мм? Скорее всего нет. Тогда почему указана только в одном месте?

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

Хорошая инфографика, наоборот, при детальном рассмотрении даёт всё больше информации, смыслов, связей и позволяет выдвигать гипотезы.

Shell Centre car park in the snow, January 1963

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

Другие примеры, куда можно залипнуть в поисках связей и закономерностей:

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

«Зебра» в таблицах

9 января 2018, 20:22

Есть такой приём — выделить «зеброй» строки в таблице. То есть, подкрасить чётные и нечётные разным цветом. Может показаться, что такой вид таблицы наведёт порядок и поможет глазу скользить по строкам. Не наведёт и не поможет. Подсвечивая строки цветом мы добавляем информацию, которая не несёт смысла. То есть, увеличиваем нагрузку на внимание читателя без пользы для него. Подсветка создаёт шум, и вместо того, чтобы помогать, наоборот мешает — сливает все строки в единую серую массу. И делает акцент, там, где его не предполагалось (на каждой второй строке — а почему?). Также, подсветка строк через одну размывает разницу между строками и разделяет их на две визуальные группы. В большинстве случаев это не нужно.

Возьмём таблицу:

Она слишком широкая для таких данных, у неё лишние полоски между строками, которые добавляют шума, но опустим эти моменты, ради разбора примера с «зеброй»

Человек, который знает о «зебре» сделает так:

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

Но я не призываю отказываться от «зебры» — предлагаю делать её менее заметной и добиваться правильного эффекта с помощью минимальных дизайнерских средств. Эти средства — отступы. Мощнейшие инструменты.

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

Такая «зебра» хоть и лучше, но всё равно она довольно механическая. То есть, таблица ничего не знает о своих данных и разбивается на группы по не принадлежащему ей признаку. Чтобы это исправить можно объединить строки в группы, например, по дате.

Этот пост про таблицу, но на самом деле он про другое. Есть плохие вещи, которые признаны «общепринятыми», просто потому что часто встречаются — таких вещей миллиард и они повсюду. С другой стороны есть категоричные мнения, которые говорят не пользоваться плохими вещами и приёмами. Но надо посмотреть на проблему по-другому. «Зебра» появилась не просто так — она пыталась упростить считывание таблиц. И так получилось, что расхожим стало плохое решение (так вообще часто случается). Мы отвергаем это решение просто потому, что оно нам кажется неправильным, но не уделяем внимания самой проблеме. Лучше было бы направить внимание на корень проблемы и попытаться найти новое хорошее решение.

Знак платной парковки

19 октября 2017, 22:59

Знаки должны быть такими:

Как они это сделали?

3 августа 2017, 13:32

Легко определить качество любой вещи, будь это предмет, событие или гипотеза. Хорошие качественные вещи всегда вызывают вопрос: как они это сделали? Шоу, которое захватывает и которое хочется посоветовать посетить вызывает реакцию: как они это сделали? Дрессировщик, у которого собаки стоят за маленькими партами, а потом по команде садятся за них как на уроке, вызывает вопрос: как он, чёрт возьми, это сделал? Хороший дизайн чего угодно, от автомобиля до открытки, вызывает вопрос: как они это сделали? Как у них вышло получить такую гармонию линий и форм? Как получилось двумя цветами на плоскости показать столько смыслов?

Возьмём для примера стену с вентилируемым фасадом. Бывают убогие фасады, которые делают из любого здания безликую пластиковую коробку:

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

Другой пример, тоже вентилируемый фасад:

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

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

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

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

Как культура влияет на остальных? Очень просто — люди видят, что их окружает, и думают: «так можно». Видят вокруг уродливые логотипы и заказывают себе уродливый. Видят вокруг унылые пластиковые коробки вместо зданий и заказывают себе такую. Или открывают фирму, которая из любого здания сделает унылую пластиковую коробку, потому что другие люди не прочь превратить своё здание в унылую пластиковую коробку. Ну потому что «так можно». Оно ведь, повсюду, значит, можно. В итоге, количество унылых коробок в городах увеличивается, культура меняется в худшую сторону, а у людей всё крепче оседает уверенность, что «так можно». Хотя ещё в Древней Греции люди знали, что так нельзя.

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

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

Фотографии с сайтов: archiproducts.com, альппро.рф

Откуда берётся лень

12 июля 2017, 17:39

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

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

Ключевой момент здесь — мозгу не интересно. Когда мозгу не интересно, то он и не будет стараться что-то сделать руками. Он так экономит энергию тела. И ключевое решение — создать интерес. 5 минут до дедлайна — это интерес, но довольно опасный. Можно поставить искусственный дедлайн, но это скорее всего не сработает, потому что сложно самого себя обмануть. Ну один раз можно, а потом уже не получится. Поэтому создавайте себе интерес в том, что вы делаете. Делайте больше, чем требуется в данный момент.

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

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

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

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

Если вам лень — значит вам не интересно. Любым способом сделайте так, чтобы было интересно.

Горячие клавиши

16 марта 2017, 16:41

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

Бывают даже пасхалки с горячими клавишами. Например если в фотошопе (CS6) зажать пробел и нажимать F, то будет меняться цвет фона (то, что за пределами редактируемой области). А если зажать пробел и C, то включится антилупа — инструмент, который помогает передвигаться по большому документу. Это довольно полезные штуки. Но бывают и странные. Например есть комбинация ⌘+B, которая вызывает панель цветового баланса. Удивительно, но эту панель можно вызвать, если одновременно нажать ⌘+-+0 (команд, дефис, ноль).

Ненависть наступает, когда начинаешь привыкать к горячим клавишам в одной программе, а потом приходится работать в другой, а там всё по-другому. Вот казалось бы, у Адоби есть Фотошоп, Иллюстратор и Индизайн. Можно было бы сделать чтобы большинство горячих клавиш совпадало — переключение между программами было бы почти незаметным. Но производители компьютерных программ не ищут легких путей. Поэтому в Иллюстраторе и Индизайне можно сохранить редактируемый текст, нажав Esc. Но если нажать Esc при редактировании текста в Фотошопе, то всё пропадёт. Это сильно мешает, когда целый день работаешь в Индизайне, а потом переключаешься в Фотошоп. Первые разы всегда по привычке нажимаешь Esc и теряешь изменения в тексте, а иногда и весь текст. Другой пример. Инструмент рисования фигур в фотошопе — это клавиша U. При помощи Shift+U пролистываются все фигуры, которые можно рисовать. В иллюстраторе на разные фигуры своя клавиша: для круга L, для прямоугольника M. Shift+M не листает по фигурам, а включает ВНЕЗАПНО! Shape Builder. В Индизайне похоже на иллюстратор. Но Shift+M ничего не делает. В Фотошопе параметры сохраняются по ⌘+Enter. В Индизайне это сочетание вызывает панель быстрого присвоения стиля. Казалось бы, программы выпускаются под общим именем, но выглядят как совсем разные продукты и ничего друг о друге не знают.

Теперь буду ругать Скетч. Ребята фактически сделали урезанный фотошоп, заточенный под рисование приложений и сайтов. Но жутко накосячили с горячими клавишами. Аудитория — те, кому не нравится фотошоп, но приходится пользоваться для дизайна. Не было никакой причины не скопировать горячие клавиши с Фотошопа. Куча людей перешли бы на Скетч, если бы привычные инструменты были бы под рукой. Переход был бы плавным, не требующим формирования новых привычек. А насильное формирование новых привычек вызывает стресс, потому что в этом процессе постоянно допускаются ошибки. Мне требуется не меньше двух дней, чтобы перестроиться на новую программу со своими горячими клавишами. И я заранее знаю, что эти два дня будут адом.

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

Визуальные раздражители

15 марта 2017, 17:12

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

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

Наведите, чтобы проверить, что вы тоже лягушка

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

Примеры хорошего применения с учетом рефлекса:
— иконка программы в Мак ОС начинает выпрыгивать из дока, если в ней что-то случилось;
— редактор codepen.io в несохранённом проекте трясёт кнопкой Save;
— бета Яндекс.Браузера проигрывает анимацию на вкладке, в которой что-то произошло;
— «поворотники» в автомобиле мигают, чтобы их было заметно среди остальных огней;
— стоп-сигналы в некоторых автомобилях мигают, если срабатывает антиблокировочная система при торможении.

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

Визуальный раздражитель — мощный инструмент привлечения внимания. Используйте его чаще. Там, где уместно и помогает пользователю. Всегда держите в уме, что красная рамка выделяет хуже, чем лёгкое пошатывание или мигание.

Дискретность в тач-интерфейсах

14 марта 2017, 16:17

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

А теперь посмотрите на этот концепт тач-интерфейса для автомобиля:

Мало того, что им невозможно пользоваться, пока не выучишь все жесты и их вариации, так ещё есть проблема несовпадения контролирующего элемента и параметра. В случае с громкостью и температурой всё хорошо — значения меняются плавно, по мере движения руки. А вот со сменой источника звука и переключением треков большая беда. Пальцы на тач-интерфейсе приходится вести плавно, а значения меняются ступенями. Интерфейс не приводит никакой обратной связи, поэтому переключение на 5-й или на 6-й трек одинаково вероятно. «Железными» кнопкам обычной магнитолы можно переключать песни не глядя. С таким тач-интерфейсом придётся всё время контролировать процесс переключения, а ошибка может случиться из-за ямки на дороге. Вместо того, чтобы повысить безопасность на дороге, такой интерфейс будет больше отвлекать водителя на себя.

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

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

Дефис в сложных словах

24 января 2017, 15:35

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

«30 минутный» читается как «тридцать минутный» — это же бред и два несогласованных слова. Должно быть «30-минутный», то есть «тридцатиминутный».

Самая частая ошибка со словом «интернет». Всюду «интернет магазин», «интернет торговля», «интернет приёмная» и так далее, хотя правильно написать через дефис. Стоит только вчитаться, чтобы понять, что части этих словосочетаний — два несогласованных существительных. Ещё хуже, когда падеж не именительный: «разработка интернет магазина». Чей интернет? Интернет магазина? Разработка интернет? Или часто пишут «веб сайт». Мало того, что нормально будет написать просто «сайт», так ещё и пишут раздельно. Правильно: «веб-сайт», «интернет-магазин».

Если один из корней на другом языке, то просто обязательно надо ставить дефис. DOM-структура, fish-технология, mural-граффити, IT-индустрия. То же самое, если присутствует цифра: 5-минутный, 6-дневный, 7-полосный. Но цифры в таких случаях лучше всего писать словами: пятиминутный, семиполосный.

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

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

Подробное правило на Зерулсе

Ctrl +  Ранее