Десять главных правил внешнего интерфейса для разработчиков

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

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

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

Делайте что-нибудь в графической программе

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

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

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

Соответствуйте дизайну, не пытайтесь превзойти его

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

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

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

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

Типографика решает все

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

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

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

Кроме того, убедитесь, что вы используете правильные шрифты в правильном месте. Если дизайнер использует Georgia только для заголовков и Open Sans для тела, то вам не следует использовать Georgia для тела и Open Sans для заголовков. Типографика может легко создать или разрушить эстетику. Потратьте достаточно времени, чтобы убедиться, что вы соответствуете типографике вашего дизайнера. Это будет хорошо проведенное время.

Интерфейсный дизайн не терпит туннельного зрения

Вы, вероятно, будете делать небольшие части общего дизайна.

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

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

Отношения и иерархия

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

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

Будьте разборчивы в отношении пробелов и выравнивания

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

Это действительно офигительно простой способ для тех, кто не разбирается в эстетике, быстро добиться значительного улучшения. Убедитесь, что ваши элементы выровнены с точностью до пикселя, а расстояние вокруг каждого края каждого элемента максимально однородно. Там, где вы не можете этого сделать (например, в местах, где вам нужно дополнительное пространство для обозначения иерархии), сделайте их кратными интервалам, которые вы используете в другом месте, например, в два раза больше, чем по умолчанию, чтобы создать некоторое разделение, в три раза, чтобы создать больше , и так далее.

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

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

Если вы не знаете, что делаете, делайте меньше

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

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

Пусть работа дизайнера займет центральное место, а ваша работа отойдет на второй план.

Время делает из нас всех дураков

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

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

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

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

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

Пиксели имеют значение

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

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

Существует ряд [инструментов], которые помогут вам сравнить исходный дизайн с конечным результатом, или вы можете просто сделать скриншоты и вставить их в файл дизайна, чтобы максимально точно сравнить каждый элемент. Просто наложите скриншот на дизайн и сделайте его полупрозрачным, чтобы вы могли видеть различия. Тогда вы знаете, сколько настроек вам нужно сделать, чтобы добиться нужного результата.

Получать отзывы

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

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

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

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

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

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

Заключение

Подводя итог, вот краткий список советов по дизайну для фронтенд-разработчиков:

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

Не каждый front-end разработчик будет фантастическим дизайнером, но каждый front-end разработчик должен быть компетентен , по крайней мере, в плане дизайна.

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

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

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