5 подсказок для дизайнеров для слаженной работы с разработчиками

06.05.2020
Posted in blog-article
06.05.2020 admin

5 подсказок для дизайнеров для слаженной работы с разработчиками

Рассказываем о животрепещущих вопросах, с которыми сами сталкиваемся 😄

Дизайн — интересная вещь. Он подчинен взглядам многих, и часто весьма субъективен. Иногда вам может казаться, что все вокруг — критики, и так оно и есть. Но это нормально! Критика действительно поможет вам расти как дизайнеру, особенно в мире UI/UX.

Я прошел через эту стадию, и не один раз. Изучение дизайна было для меня долгим путем, и я получил свою долю критики. Едва ли я знал, что в конечном счете я стану своим собственным злейшим врагом, когда дело дошло до front-end разработки. Вскоре я узнал, что в UI/UX — это гораздо больше, чем стараться сделать так, чтобы что-то хорошо выглядело или хорошо функционировало. Это не просто радость от пользования; дизайн также должен приносить радость от разработки, иначе проект отстает от графика, все путаются и теряются в переводе, и в конечном счете много времени может быть потрачено впустую.

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

1.Составьте план

5 подсказок для дизайнеров для слаженной работы с разработчиками, изображение №2

2. Определитесь с сеткой

5 подсказок для дизайнеров для слаженной работы с разработчиками, изображение №3

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

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

Так каково же решение? Начните с сетки. Я обычно занимаюсь дизайном с 12-столбцовой сеткой. Это позволяет легко определять расстояние между элементами (желоб) и размер каждого элемента, в то же время допуская определенную вольность в количестве элементов в строке.

5 подсказок для дизайнеров для слаженной работы с разработчиками, изображение №4

Это помогает разработчику понять общую структуру продукта. Это происходит потому, что разработчик создает приложение почти так же, как вы создаете дизайн, то есть все подстраиваются друг под друга, экономя время. Сетки также значительно упрощают адаптивный дизайн (desktop -> mobile), поскольку каждый элемент может включать набор правил относительно того, сколько столбцов он должен занимать при каждом размере экрана,и как содержимое должно изменяться, чтобы соответствовать макету.

3. Начните с вайрфрейма

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

5 подсказок для дизайнеров для слаженной работы с разработчиками, изображение №5

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

4. Гайды по стилю

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

5 подсказок для дизайнеров для слаженной работы с разработчиками, изображение №6
5 подсказок для дизайнеров для слаженной работы с разработчиками, изображение №7

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

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

5. Подумайте о компонентах

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

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

5 подсказок для дизайнеров для слаженной работы с разработчиками, изображение №8

Лично я считаю, что полезно разбивать вещи настолько мелко, насколько это возможно, и повторно использовать их для обеспечения последовательности. Например, на этом посте с картинками я бы сделал “верхнюю панель”, содержащую имя пользователя и Аватар, как его собственный компонент. Затем я бы сделал изображение-заполнитель и, наконец,” нижнюю панель», включая кнопку like и кнопку more options с подписью под ними в качестве другого компонента. Объединение всех трех этих групп вместе создаст мой компонент «picture post». Затем я могу повторно использовать каждый из этих маленьких кусочков в любом месте, где они мне понадобятся.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Contact

Давайте работать вместе!

Пишите нам и найдем точки соприкосновения, может станем партнерами, а может поможем вам зайти в нашу чудесную нишу

Вы разработчик?

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

Новичок?

Поможем быстро войти в нишу, не тратя годы на понимание

Давно в нише?

Рады будем пообщаться как на темы whitehat, так и blackhat тематики ^_^ + всегда есть что обсудить по поводу рекламных сетей

ПИШИ В TELEGRAM!

Contact