Что такое идеальный пиксель
Обновлено: 04.07.2024
Пиксельное совершенство — это когда готовая закодированная страница и файл дизайна находятся рядом друг с другом, и вы не можете их различить. Процитирую Брэндона Джонса:
<блочная цитата>. так точно, так чисто, так подробно, что случайный зритель не заметит разницы.
TL;DR для достижения идеального пикселя
- Просматривайте файлы дизайна, обращая внимание на мельчайшие детали.
- Установите отношения с дизайнером.
- Используйте руководство по стилю.
- Используйте подключаемый модуль Pixel Perfect для Chrome.
Начните с просмотра файлов проекта
С самого начала процесса разработки мы должны иметь в виду конечный продукт с идеальной точностью до пикселя. Первый шаг — убедиться, что у вас есть все файлы дизайна, необходимые для всех ваших результатов. Часто они предоставляются втроем: мобильный телефон, планшет и настольный компьютер. Не идеально для изменчивой вселенной, но часто является стандартом. Если в предоставленных файлах есть пробелы, запросите их, отметив недостающие области.
В идеале эти файлы предоставляются в необработанном формате. Будь то psd, ai или эскиз, вы сможете открывать файлы и проверять отдельные элементы. Доступ к этим элементам позволит вам измерять размеры, получать информацию о шрифтах и извлекать другие метаданные, недоступные в плоском файле.
Некоторые области необработанных файлов:
• Обратите внимание на семейства шрифтов, а также на их варианты. Например, «Roboto — полужирный» немного отличается от «Roboto Condensed — полужирный». Вы можете решить эту проблему, загрузив только Roboto и используя правило css для репликации сжатого интервала, однако это не будет точно таким же, как загрузка шрифта, который использовался в композиции.
• Если дизайнер использовал сетку, он мог включить направляющие. Включите направляющие (часто в разделе «Просмотр»), чтобы увидеть, можете ли вы получить визуальную помощь по своей сетке.
• Цвета в шестнадцатеричном формате можно извлекать с помощью встроенных инструментов.
• Найдите значения полей и отступов, которые можно применить к шаблонам страниц/панелей.
Если есть какие-либо несоответствия, рекомендуется обсудить их с дизайнером. Если вы сделаете это на раннем этапе, это сократит количество переделок и сэкономит вам время ближе к запуску сайта.
Разработка пользовательского интерфейса Pixel Perfect стала намного проще благодаря использованию таких руководств по стилю, как KSS или Pattern Lab. Когда вы создаете руководство по стилю, вы абстрагируете части страницы. Создание компонентов таким образом позволяет вам мыслить в терминах, дополняющих идеальные до пикселя результаты. Вы будете хорошо осведомлены об элементах, для которых требуются определенные переопределения правил CSS, которые отличают их от остальных стилей сайта.
Выполните тестирование с подключаемым модулем Pixel Perfect для Chrome
Этот подключаемый модуль позволяет накладывать изображения на текущую веб-страницу. Это идеально подходит для проверки вашей работы. Вы можете загрузить несколько изображений на одну страницу, настроить непрозрачность и масштаб. Это может быть использовано для вашего спокойствия, но также позволяет вам делать снимки экрана в случаях, когда есть неопределенность в отношении результатов. Я использую это каждый день.
Ресурсы по дизайну Pixel Perfect
Некоторые ссылки, которые я считаю полезными для достижения идеального дизайна пикселей, включают:
Соединение точек
Подводя итог, лучше всего начинать этот процесс как можно раньше. Хороший фундамент значительно сократит объем выполняемой вами работы. Совершенство пикселей может быть разочаровывающим, с помощью этих инструментов вы можете уменьшить количество возможных переходов туда и обратно.
У вас есть собственный онлайн-бизнес? Тогда вы, возможно, уже слышали о термине "Pixel Perfect Design", но вам может быть непонятно, что он на самом деле означает и насколько он важен для успеха вашего бизнеса.
В этой статье мы постараемся помочь вам лучше понять истинное значение идеального дизайна пикселей и его важность для вашего бизнеса.
Взгляд разработчиков на Pixel Perfect Design:
Прежде чем рассказать вам больше о идеальном дизайне, я хотел бы сначала рассказать о том, как разработчик воспринимает этот дизайн. Я бы на своем примере рассказал о его восприятии. Будучи разработчиком, я работал над статической страницей сайта одного из клиентов нашей ИТ-компании. Моя главная задача заключалась в том, чтобы сделать существующую статическую страницу сайта достаточно близкой к макету, созданному нашим UX-дизайнером, что я называю пиксельной идеальной разработкой.
Я чувствовал раздражение, когда работал над созданием веб-сайта, близкого к макету, потому что это была сложная работа. Но я также получил возможность узнать некоторые новые вещи.Исходя из своего опыта, я могу с уверенностью сказать, что совершенная до пикселя разработка — это необходимый навык для каждого фронтенд-разработчика.
Почему Picture Perfect имеет решающее значение?
Из названия становится очевидным, что задача разработчиков — сделать веб-сайт «идеальным». Разработчики могут не заботиться о правильном пространстве между заголовком и компонентом. Но с точки зрения дизайнеров, это чрезвычайно важно. Они намеренно создают наилучшее пространство между двумя точками, чтобы пользователи могли использовать идеальный веб-сайт и легко перемещаться по нему.
Поэтому работа дизайнеров заключается в создании Pixel Perfect Design, и они используют для этого различные инструменты, такие как InDesign, Sketch, Illustrator или Photoshop. После того, как они создали макет с точностью до пикселя, задача внешних разработчиков состоит в том, чтобы преобразовать макет в код.
Пришло время поделиться с вами реальным значением идеального дизайна пикселей.
Значение Pixel Perfect Design
Проще говоря, пиксельный дизайн – это дизайн, который обеспечивает максимально четкое, чистое и продуманное изображение благодаря полному использованию каждого пикселя в дизайне.
Идеальный до пикселя дизайн не содержит аберраций, нежелательного размытия, искажений и других дефектов дизайна. Такие недостатки могут возникать в дизайне веб-сайта или интерфейса приложения из-за того, что при разработке использовались различные типы артефактов сглаживания и сжатия.
Для более глубокого понимания идеального дизайна с точностью до пикселя мы считаем необходимым рассказать вам больше об артефактах сглаживания и сжатия.
Сглаживание
Это метод, который используется в компьютерной графике для устранения эффекта сглаживания. Когда на растеризованном изображении появляются зубчатые края или неровности, это называется эффектом сглаживания. Растровое изображение – это изображение, визуализируемое с использованием пикселей.
Зазубренные края возникают из-за искажения изображения, когда преобразование сканирования выполняется с выборкой с низкой частотой. Такая выборка известна как недостаточная выборка. Псевдонимы возникают, когда объекты реального мира, содержащие гладкие и непрерывные кривые, растрируются с использованием пикселей.
Артефакт сжатия
Артефакт сжатия – это видимое искажение медиаданных, вызванное применением сжатия с потерями. При сжатии данных с потерями часть данных носителя отбрасывается, поэтому их становится достаточно мало для хранения в пределах предназначенного дискового пространства или для передачи в пределах доступной полосы пропускания.
Как заметить неровные края на изображении?
В качестве примера вы можете посмотреть на кнопку, которую веб-дизайнер нарисовал в Photoshop. Когда вы смотрите на изогнутый край кнопки, он выглядит без каких-либо дефектов. Но когда вы увеличиваете или уменьшаете размер кнопки, цвет на ее краю становится грязным, а край выглядит менее резким и зазубренным. Это искажение цвета и снижение резкости происходит из-за большого количества сглаживания и интерполяции между пикселями.
Как эффект псевдонимов может повредить вашему бизнесу?
Если дизайн веб-сайта или интерфейс приложения вашего интернет-магазина выглядят менее четкими и менее чистыми из-за неровных краев, это повлияет на визуальное восприятие пользователей. Поэтому им не понравится посещать ваш сайт или загружать ваше приложение. Вместо этого они выберут другой веб-сайт или приложение, которое обеспечит им более приятный, лучший и безупречный визуальный опыт. Следовательно, вы потеряете клиентов, продажи и прибыль, а ваша потеря станет прибылью ваших конкурентов.
По указанной выше причине вам следует уделять первоочередное внимание созданию идеального до пикселя дизайна веб-сайта или интерфейса приложения для вашего веб-бизнеса.
Создание Pixel Perfect Design – это сложная задача
Создание идеального до пикселя дизайна веб-сайта — сложная задача как для дизайнеров, так и для разработчиков. Это связано с тем, что изображения и элементы дизайна на веб-сайте должны выглядеть одинаково в разных браузерах. Поскольку разные браузеры интерпретируют один и тот же код по-разному, а размеры области просмотра остаются непоследовательными, создать идеальный дизайн с точностью до пикселя далеко не просто. Разные пользователи, использующие различные типы настольных компьютеров и мобильных устройств с разным размером экрана для доступа к веб-сайту, только усложняют задачу.
Для идеального до пикселя дизайна, одинакового в разных браузерах, разработчикам нужно приложить больше усилий. Таким образом, соответствующему агентству веб-дизайна и разработки потребуется больше времени и бюджета для удовлетворения требований клиента. Лучшим подходом для разработчиков было бы сделать пиксель дизайна веб-сайта идеальным для конкретного браузера по выбору клиента, а затем снова поработать над дизайном, чтобы сделать его совместимым с остальными браузерами и свести к минимуму различия.
Полезные приемы для Pixel Perfect Design
Вот несколько приемов, которые дизайнеры могут использовать для создания идеального до пикселя дизайна:
1. Подгонка пикселей
Этот метод помогает дизайнерам получить микроскопический контроль над Photoshop и позволяет им эффективно использовать векторную графику. Это позволяет дизайнерам оптимизировать векторы, которые они вставили из Illustrator в Photoshop, без потери качества. Затем они могут использовать векторную графику для цифрового дизайна. Это помогает им избежать любых дефектов сглаживания, которые могут возникнуть в дизайне из-за переноса графики из Illustrator в Photoshop.
Эксперты Pixel Perfect, как правило, используют отдельный процесс, который включает создание контура в слое формы во время вставки векторной графики. Это делает графику ближе к реальным физическим пикселям.
2. Глубина пикселей
Вот несколько приемов, с помощью которых дизайнеры могут добавить глубины своим проектам. Эти методы позволяют им эффективно использовать контраст, а также смешивать темные и светлые пиксели.
3. Пиксельные подсказки
С помощью этой техники дизайнеры могут идеально выравнивать пиксели. Он в основном используется для удаления нежелательного сглаживания.
4. Пиксель-арт
Это самый старый и традиционный способ создания идеального до пикселя дизайна. Происхождение этой техники можно отнести к видеоиграм, поэтому она старше Интернета. Он включает в себя ручную работу с самого начала и не использует никаких ярлыков или векторов. По этой причине это самый сложный способ создать идеальный пиксельный дизайн.
5. Смещение и разбиение пикселя
Этот метод позволяет дизайнерам манипулировать элементами дизайна с точностью до пикселя, не нарушая их во время обработки пикселей. Этот метод полезен для тех дизайнеров, которые испытывают трудности при вставке векторов из Illustrator в Photoshop. Используя этот метод, они могут сохранить качество веб-сайта, не нарушая пикселей и не размывая его.
Инструменты для Pixel Perfect Design
Adobe XD, Sketch, InDesign, Photoshop и Illustrator — это некоторые из различных инструментов, используемых дизайнерами для создания идеального макета дизайна до того, как внешние разработчики создадут для него код. Чтобы научиться правильно и правильно использовать эти инструменты, вам необходимо ознакомиться с соответствующими руководствами и учебными пособиями, созданными ведущими специалистами по пиксельному идеальному дизайну.
Мы надеемся, что к настоящему моменту вы получили четкое представление о том, что такое идеальный дизайн пикселей и насколько он важен для успеха вашего бизнеса.
Между тем, если вы заинтересованы в создании идеального до пикселя дизайна веб-сайта или интерфейса приложения для своего веб-бизнеса, вы можете воспользоваться опытом профессионалов в области пиксельного совершенства из Matrid Technologies, ведущей компании по разработке веб-сайтов и приложений, базирующейся в Индия.
Об авторе: Вивек Кумар
Вивек Кумар – основатель и генеральный директор компании Matrid Technologies. Вивек увлекся Интернетом в конце 90-х и шел в ногу с его развитием и технологиями. Этот широкий и глубокий опыт помог ему успешно руководить несколькими командами в Matrid Technologies. В истинном смысле Вивек — человек общительный. Когда он не работает, он любит проводить время с сыном, семьей и кататься на велосипеде по городу.
Узнайте, как создавать четкие линии и изображения в своих проектах UI/UX, а также в веб-дизайне, экранном и другом цифровом дизайне.
Никогда больше не мучайтесь со сглаженными значками и нечеткой графикой — создавайте контуры, которые автоматически выравниваются по пиксельной сетке по мере их рисования, или выравнивайте графику по пиксельной сетке одним щелчком мыши. Вот как.
Настроить привязку к пикселям
Сначала выберите «Вид» > «Просмотр пикселей». Теперь при увеличении до 600 % или выше вы увидите пиксельную сетку.
Примечание. Предварительный просмотр пикселей позволяет предварительно просмотреть, как будет выглядеть изображение после растрирования. Это особенно полезно, когда вы хотите управлять размещением, размером и внешним видом краев объектов в растровой графике.
Если на монтажной области ничего не выбрано, нажмите кнопку "Привязать к пикселю" в разделе "Параметры привязки" на панели "Свойства".
Каждый раз рисуйте изображение с точностью до пикселя
Теперь, когда вы рисуете, контуры и векторные фигуры с прямыми краями автоматически выравниваются по пиксельной сетке. Представьте, сколько времени вы сэкономите, если будете рисовать четкие и четкие линии с самого начала.
Рисунок остается выровненным по пикселям даже при перемещении
Ваши пути и фигуры выравниваются по пиксельной сетке по мере их перемещения, поэтому вам не нужно беспокоиться об изменении их внешнего вида. Вы также можете исправить сглаженное изображение, просто переместив его.
Совет. Если остались сглаженные края, выберите инструмент "Частичное выделение" и переместите затронутую опорную точку или сегмент пути к ближайшей пиксельной сетке.
Бесстрашно масштабируйте произведение искусства
Опорные точки, сегменты пути и фигуры автоматически выравниваются по пиксельной сетке по мере масштабирования изображения.
Сделайте любую иллюстрацию идеальной до пикселя одним щелчком
Чтобы получить сглаженные значки или изображения с нечеткими краями, просто щелкните правой кнопкой мыши и выберите "Сделать пиксели идеальными".
Примечание. Прямые края рисунка будут выглядеть четче, но кривые и диагональные линии не улучшатся.
Вот оно! Теперь вы можете сделать все свои веб-графики и значки четкими на любом экране.
Если вы не знакомы с этим термином, "пиксельное совершенство" означает, что ваша реализация HTML/CSS должна быть максимально приближена к исходному макету. Измерения и интервалы должны быть точными, вплоть до пикселя.
Я часто слышу это беспокойство; даже имея многолетний опыт, многие интерфейсные разработчики изо всех сил пытаются идеально воспроизвести дизайн.
Когда дизайнеры передают нам готовый макет, они доверяют нам верное воплощение их идеи. Их работа направляется через нашу реализацию, и они держат пальцы скрещенными, чтобы мы не слишком искажали ее в процессе. *
Как именно мы создаем то, чем будут гордиться наши дизайнеры? Реально ли вообще воспроизвести дизайн до пикселя? Почему это так сложно?
В этой статье мы ответим на эти вопросы и научимся некоторым приемам, которые помогут нам немного приблизиться к совершенству пикселей ✨
Давайте сразу оговоримся: строго говоря, с точки зрения закона, я не думаю, что совершенство пикселей на самом деле возможно.
Написанные нами HTML и CSS должны работать на огромном множестве различных устройств. Существует так много переменных, которые влияют на то, как будет отображаться реализация.
Для развлечения я сделал скриншоты одного и того же листинга Amazon * на двух разных устройствах.
Используйте кнопки ниже, чтобы переключаться между ними, чтобы увидеть различия:
Chrome, Windows
Сафари, MacOS
Если смотреть рядом, эти два снимка экрана кажутся чертовски похожими, но при переключении между ними становится ясно, что они не идентичны. Они содержат очень разные пиксели.
Когда я работал в DigitalOcean, мне удалось посетить один из их центров обработки данных. Это было дико и сюрреалистично; огромные комнаты вмещали сотни рядов, в каждом стояли десятки стоек, в каждом стояли десятки компьютеров. Все машины были одинаковыми.
Иногда я завидую бэкэнд-разработчикам. Не поймите меня неправильно, на бэкенде много сложных проблем, но они хотя бы контролируют устройства, на которых работает их код! Его не обязательно запускать на всех мыслимых устройствах, от 5-дюймового телефона до 72-дюймового телевизора и умного холодильника.
В приведенной выше демонстрации я изменил только две переменные: операционную систему и браузер. Подумайте, сколько других факторов влияет на то, что будет окрашено:
Это просто не приходит мне в голову; Бьюсь об заклад, у вас есть парочка, которую я пропустил!
Поэтому ясно, что мы никогда не сможем обеспечить 100% согласованность, когда речь идет о значениях RGB для отдельных пикселей на экране. Это невозможный стандарт. Но это также и не главное.
Никто не требует, чтобы все выглядело одинаково под увеличительным стеклом. * В основном дизайнеры хотят, чтобы реализация выглядела почти идентично невооруженным глазом, а очевидные несоосности и зазоры были сжаты. Они хотят, чтобы это было близко к пикселю, а не идеально.
Давайте поговорим о том, как мы можем это сделать.
Когда вы получаете свежий макет, только что вышедший из печати, он обычно доставляется вам в каком-либо инструменте проектирования, таком как Figma или Zeplin.
Эти инструменты великолепны, потому что в отличие от статического изображения они представляют собой живое представление дизайна. Вы можете выбрать отдельные элементы и подобрать цвета и размеры.
К сожалению, эта информация не всегда заслуживает доверия! То, что Zeplin сообщает вам, что между заголовком и абзацем есть промежуток в 64 пикселя, не означает, что это правильно.
Такие инструменты, как Sketch, по сути являются инструментами дизайна. они наследуют набор практик и идиосинкразий из мира дизайна, и они не всегда четко отображаются в Интернете. Они будут рядом, конечно, но не обязательно достаточно близко.
Если вам интересно, почему цифры в инструментах дизайна могут быть неточными, это отступление для вас. Если вам все равно, не стесняйтесь пропустить это!
Это связано с лидерством. В этом контексте «ведущий» рифмуется со «постельным бельем»; термин происходит от металлических полос из свинца.
На протяжении большей части 1900-х годов печать производилась с помощью набора горячим металлом. Идея состоит в том, что у вас будут формы для отдельных букв, а машины будут формировать из них слова и абзацы, которые вы хотите. Впрыскивались горячие металлические чернила, а затем все это вдавливалось в бумагу для получения отпечатка.
В этом мире вы также использовали бы свинцовые полосы, чтобы увеличить расстояние между каждой линией. Эти провода были разной толщины, что позволяло использовать их на разных расстояниях:
Дело в том, что независимо от того, насколько толстым был ваш грифель, первая строка всегда печаталась на одном и том же месте. Итак, с точки зрения ментальных моделей интервал всегда считался «ниже линии».
Это немного отличается от того, как высота строки работает в CSS. Когда вы увеличиваете высоту строки, вы добавляете вертикальные отступы вокруг каждой строки, разделенные между верхней и нижней частью.
Современные инструменты дизайна унаследовали традиции верстки старого мира, поэтому мы столкнулись с несоответствием. Инструменты дизайна начали учитывать это, но ваш пробег может отличаться.
Если вам интересна эта тема, Маттиас Отт подробно расскажет о лидерстве в своем блоге.
Вместо того, чтобы доверять измерениям, которые вы получаете с помощью инструментов проектирования, вы должны сделать свои собственные измерения! Мой любимый способ сделать это — использовать встроенный в MacOS инструмент для создания снимков экрана:
Вы можете включить эту функцию с помощью сочетания клавиш cmd-shift-4 . Нажмите и перетащите, чтобы нарисовать прямоугольник, и используйте числа в правом нижнем углу, чтобы измерить расстояние. Если вы отпустите кнопку мыши, будет сделан снимок экрана, или вы можете нажать клавишу Escape, чтобы отменить его, чтобы не загромождать рабочий стол кучей изображений.
Другие операционные системы не имеют таких встроенных функций, но я нашел несколько альтернатив: Greenshot (Windows) и ScreenRuler/KRuler (Linux).
Обязательно измерьте макет и свою реализацию! Настраивайте по мере необходимости, пока числа не станут одинаковыми. И измеряйте расстояние до реальных букв, а не до какой-то воображаемой рамки вокруг них!
Поработайте над выявлением различий. Расположите окна так, чтобы макет и ваша реализация находились рядом, и ищите тонкие различия. Отнеситесь к этому как к одной из тех игр, в которых нужно найти отличия.
Есть также такие инструменты, как PixelSnap. PixelSnap — это инструмент, который позволяет быстро и легко измерять практически все, что происходит на экране, с помощью множества продвинутых инструментов. Это платное программное обеспечение, но вы можете убедить своего работодателя приобрести несколько лицензий для команды!
Организации все чаще используют дизайн-системы. Дизайн-система – это набор токенов, констант и компонентов, образующих единую систему, которая будет использоваться дизайнерами и инженерами.
В идеальном мире вам никогда не придется ничего измерять, поскольку интервалы будут токенизированы. Дизайнер может сказать, что "этот зазор представляет собой пространство уровня 4", что будет соответствовать некоторому количеству пикселей в вашей теме.
На практике это не устраняет некоторых несоответствий между инструментами дизайна и Интернетом. Я работал со многими дизайн-системами и до сих пор вношу небольшие изменения.
Системы дизайна предлагают отличную основу для построения, но, на мой взгляд, они не решают проблему полностью.
Взгляните на следующие два круга. Что бы вы назвали правильно центрированным?
Второй вариант выглядит лучше, не так ли? И тем не менее, технически правильным ответом является первый.
В CSS все представляет собой коробки. Число "1" образует вокруг себя рамку, и эта рамка находится точно по центру.
Тот, что справа, был сдвинут так, чтобы его ножка совпадала с вертикальной осью:
Это называется оптическим выравниванием. Он выровнен на основе человеческого восприятия, а не на основе абсолютного математического расстояния между прямоугольниками.
По общему признанию, это очень маленькая деталь, и она становится непрактичной, если цифры основаны на данных. Но это хороший пример того, как математическое центрирование не всегда кажется правильным. Иногда нам нужно внести небольшую корректировку, чтобы наши глаза поверили, что все выровнено правильно.
Мне часто приходится вносить небольшие изменения, подобные этому. Давайте посмотрим на другой пример. Переключитесь между двумя вариантами и посмотрите, какой из них вам больше нравится:
Это абзац под заголовком. В этом абзаце много слов, и вы можете себе представить, что в нем есть очень важные вещи!
Если мы воспользуемся инспектором элементов, мы увидим, что в поле содержимого есть несколько пикселей мертвого пространства перед левым краем типографики:
К счастью, кернинг, из-за которого возникает этот разрыв, похоже, одинаков во всех браузерных движках рендеринга, поэтому мы можем безопасно сдвигать объекты на несколько пикселей для универсального улучшения выравнивания.
Чтобы было ясно, я знаю, что это очень тонко. Вы можете добиться действительно четких рисунков, не занимаясь оптическим выравниванием. Мы находимся на территории «последних 5%». Но это имеет значение, и для критически важных страниц (домашняя страница, целевые страницы с высоким трафиком) стоит потратить несколько минут на эти настройки!
Возможно, вы заметили закономерность в этой статье: множество мелких правок, чтобы все выглядело правильно.
Постоянная перестановка вещей может показаться хаотичной. Чтобы добавить немного ограничений и убедиться, что используется последовательная стратегия, мне нравится создавать для себя небольшой компонент React. Вот как это выглядит:
Вот как это используется:
Даже если вы не знакомы с React, надеюсь, этот фрагмент даст вам представление о том, что он делает. наш компонент ShiftBy позволяет нам сдвигать что-либо на несколько пикселей по любой из осей.
Мне это нравится, потому что очень ясно, какова цель; мы вносим мелкие коррективы, чтобы все выглядело хорошо. Мы не разбрасываем фрагменты CSS по множеству уже существующих элементов, казалось бы, случайным образом.
transform: translate – это наименее инвазивный известный мне способ что-то изменить. В отличие от использования полей, он не будет тянуть за собой братьев и сестер.
Вы будете удивлены, как часто этот компонент пригодится. Например, я немного переключаюсь на пользовательские маркеры в своих ненумерованных списках:
Выравнивание их по центру или по базовой линии кажется не совсем правильным, поэтому я корректирую их на несколько пикселей, пока они не станут хорошо смотреться на моих глазах.
CSS — обманчиво сложный язык. Начать работу относительно легко, настраивая стили типографики и перемещая элементы. Но реальные проекты никогда не бывают такими простыми, и все быстро усложняется.
В этой статье мы увидели, как маленькие корректировки могут иметь большое значение, но мы совсем не говорили о том, как привести вещи в форму, достаточную для того, чтобы эти небольшие корректировки работали!
Я знаю массу JS-разработчиков, которые не очень хорошо разбираются в CSS. Они понимают синтаксис и без проблем применяют стили, но не могут преодолеть разрыв до мастерства; им неудобно выполнять крупномасштабную работу по компоновке или придумывать масштабируемую архитектуру.
Я работаю над курсом CSS для разработчиков JavaScript. Это мультимодальный курс, использующий ту же технологию, которую я использую в этом блоге для создания динамических и интерактивных виджетов, и я вывожу его на совершенно новый уровень.
Если вы хотите чувствовать себя более комфортно с CSS, я думаю, это действительно поможет! Узнайте больше о курсе.
В этой статье мы много говорили о технической стороне дела. Но есть и другой аспект.
Я уже писал ранее, что налаживание хороших рабочих отношений с дизайнером абсолютно необходимо для отличной работы. Если вы не читали его, вы должны проверить его; Я думаю, что это одна из самых влиятельных записей в блоге, которые я когда-либо публиковал.
Правда в том, что иногда наш опыт интерфейсных инженеров очень ценен. Например, у дизайнера может быть отличная идея красивого элемента, и он хочет, чтобы он был идеальным по пикселям… но его дизайн не был бы таким доступным, как собственный элемент управления формы. Иногда значения платформы по умолчанию более надежны, чем настраиваемые элементы пользовательского интерфейса, и наша работа состоит в том, чтобы отстаивать их. Для этого нужны хорошие рабочие отношения!
Когда дизайнеры просят сдвинуть некоторые пиксели, не называйте их "гнидами". Я бы не хотел, чтобы кто-то другой навешивал этот ярлык на мою работу! Дизайнеры часто жалуются на то, что обременяют нас своими просьбами, хотя на самом деле зачастую мы сами виноваты в том, что упустили мяч!
Если вы когда-нибудь пытались разработать что-то с нуля, вы, вероятно, разочаровались; вы можете выбрать те же красивые цвета и сочные шрифты, что и продукт AirBnb, но в итоге получить что-то непрофессиональное и непрофессиональное.
На одной из моих первых работ мы купили красиво выглядящий шаблон, но после реализации нескольких пользовательских функций он выглядел хламом. Мы не сильно изменились; почему это выглядело намного хуже??
Правда в том, что дизайн, как правило, довольно хрупкий, когда речь идет о интервалах и согласованности. Если вы сдвинете несколько вещей с места, все рухнет, как карточный домик.
Вот почему это важно. Дело не только в том, чтобы успокоить дизайнера в вашей команде. Если бы вы брали интервью у пользователей, я сомневаюсь, что кто-то смог бы сформулировать что-то из этого. Никто не хвалит постоянный интервал вокруг элементов! И все же это оказывает влияние.
Большинство людей не видят вещи с таким уровнем детализации. Они просматривают страницу целиком и делают выводы, основываясь на ощущениях. Либо это кажется хорошим и профессиональным, либо плохим и неряшливым.
Брат моего партнера является "типичным" пользователем Интернета; он изучает музыку и не интересуется дизайном или разработкой. Однажды я попросил его оставить отзыв о чем-то, над чем я работал, и он сказал, что это выглядело настоящим * . Большинство успешных онлайн-бизнесов хорошо спроектированы и продуманно реализованы; если у вас нет, он не будет выглядеть как законный. Хорошая реализация помогает завоевать доверие.
Однократное смещение на несколько пикселей не испортит сайт, но сложится. Это территория смерти на тысячу бумажных порезов; в совокупности все это имеет огромное значение.
Различия платформ делают невозможным достижение «настоящего» пиксельного совершенства, но на практике это не имеет большого значения. Мы не можем гарантировать универсальную согласованность, но мы можем обеспечить внутреннюю согласованность каждого интерфейса и его соответствие духу дизайна. Это самое главное.
Информационный бюллетень, посвященный веб-разработке, который вызывает радость
Моей целью в этом блоге является создание полезного контента для веб-разработчиков, и мой информационный бюллетень ничем не отличается! Я дам вам знать, когда опубликую новый контент, и даже время от времени буду публиковать эксклюзивный контент только для информационных бюллетеней.
Читайте также: