С чего начать дизайн пользовательского интерфейса

Никогда не начинайте с инструмента. Изучите основы макета, теории цвета, UX (пользовательский опыт) и HCI (взаимодействие человека с компьютером). Когда вы поймете, как манипулировать данными, чтобы управлять опытом, вы сможете создавать потрясающие интерфейсы.

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

ОБНОВЛЕНИЕ > Сейчас я также экспериментирую со Sketch . Это более интуитивно понятно и намного дешевле, чем Illustrator. Не такой зрелый, но к этому идет.

ОБНОВЛЕНИЕ К ОБНОВЛЕНИЮ > Я полностью согласен со Sketch. Для чистого дизайна интерфейса это лучшее, что есть сейчас. У него есть свои ограничения, но я думаю, что с платформой плагинов JSTalk он быстро наверстает упущенное. В версии 3.2 это уже значительно улучшило мой рабочий процесс. Поскольку Illy был моим основным инструментом Adobe, я также отказался от Pshop в пользу более простого Pixelmator. Sketch + Pixelmator был мощным дуэтом.

Добро пожаловать в GD.SE!

Честно говоря, я не думаю, что вам действительно нужно быть гуру Photoshop, чтобы разрабатывать свои пользовательские интерфейсы. Особенно, если вы занимаетесь веб-разработкой, и в конечном итоге вам все равно придется кодировать все, навыки, которые вам понадобятся для создания макетов и вайрфреймов, не займут много времени. Photoshop довольно интуитивно понятен, но это, конечно, не означает, что у него не будет определенной кривой обучения. Дело в том, что если вы занимаетесь дизайном для Интернета, вам, вероятно, следует делать это в браузере и просто использовать Photoshop для некоторой графики и пробовать что-то в макете.

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

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

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

Что касается ресурсов, посвященных пользовательскому интерфейсу, я считаю, что этот курс по UX — хорошее начало. Он подробно описывает большинство аспектов дизайна пользовательского интерфейса, хотя вы всегда можете узнать больше. Важно следовать проверенным правилам , Эрик Кеннеди придумал несколько неплохих основ ( вторая часть здесь ), и над созданием много работы . Практикуйтесь в применении правил, которые вы изучаете, чтобы закрепить их в своем уме и увидеть, что работает, а что нет. Также очень полезно, когда другие используют ваш интерфейс после каждой большой итерации, получая обратную связь до того, как продукт будет «закончен».

Также важно быть в курсе событий и помнить об UX. UIGifs отправляет электронное письмо раз в неделю с некоторыми прекрасными дизайнами пользовательского интерфейса, я настоятельно рекомендую подписаться. Muzli также публикует ежемесячный список, который длиннее, но не на 100% связан с пользовательским интерфейсом. UserFlowPaterns — отличный сайт, на котором можно увидеть восхитительные примеры передового опыта, реализованные в приложениях в сжатой форме. UserInterface.io также публикует отличные гифки. Есть много других, но это мои любимые на данный момент.

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

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

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

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

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

Где я могу научиться и улучшить свои навыки Photoshop и как я могу начать работу над концепцией?

Как сказал @plainclothes, никогда не сосредотачивайтесь на инструментах.

Овладение Photoshop не сделает вас веб-дизайнером. Так же, как умение пользоваться духовкой не сделает вас поваром.

Photoshop, Illustrator, Sketch и т. д. Эти инструменты помогают создавать прототипы высокой точности .

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

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

Зацикленность на «пиксельном идеальном» расположении, цветах или шрифтах на этом этапе только отвлечет вас от фазы размышлений.

Это не дизайн.

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

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

Что подводит меня к ответу на другой ваш вопрос:

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

Что, если я скажу вам, что есть быстрый и простой способ выкинуть все эти отсылки из головы?

Это называется срисовка.

Давай попробуем что-нибудь вместе, а?

Возьмите ручку и лист бумаги сейчас.

На самом деле, ручки для неженок. Идите вперед и выберите маркер. Толстый.

Теперь нарисуйте очень быстрый набросок макета веб-сайта, который вы хотели изучить.

Затем сравните его с другим макетом, о котором вы думали.

Вот так:

Это низкоточные прототипы .

На этапе изучения идей этого достаточно.

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

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

Другими словами, наброски маркером приближают вас к фактическому «дизайну» и убирают детали, с которыми в противном случае вы бы возились. На данный момент.

Надеюсь, что я помог вам.

Текст выше — это выдержка из поста, который я опубликовал здесь .

Что касается придумывания дизайн-концепции/макета:

Начните с того, чтобы решить, какие ощущения вы хотите получить от своего макета:

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

Затем решите, где будут расположены ваши основные элементы.

• Ваше меню будет вертикальным или горизонтальным? Будет ли он вверху страницы или внизу?
• Какое место вы хотите зарезервировать для своего заголовка? Где и какого размера он будет? Что будет внутри шапки: баннер, логотип, ваше меню? Будет ли заголовок иметь четкие границы или он будет проходить за контентом?
• Будет ли подвал? Насколько он велик и важен?
• так далее...

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

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

Вы задаете два отдельных, а не связанных друг с другом вопроса.

Где я могу научиться и улучшить свои навыки фотошопа?

Я бы начал с Google и книг. Существует так много информации об использовании PhotoShop в Интернете и в виде книг.

Как начать работу над концепцией?

Это, по сути, больше относится к творческому мышлению. Есть, конечно, много книг и веб-сайтов, которые могут помочь в этом. Но это обширная тема сама по себе.

Что может помочь, так это то, что вы просто берете карандаш и получаете блокнот. Если вам нужно поработать над идеей, сделайте набросок, набросок, набросок и еще раз набросайте.

Дизайн пользовательского интерфейса — увлекательная область, и здесь есть чему поучиться. Прежде всего, добро пожаловать! Не пугайтесь, если с самого начала что-то не получается на 100% идеально, это постоянно развивающаяся область, и я думаю, что любой UI-дизайнер скажет вам, что прошло как минимум 2 года, прежде чем они начали производить работу, которой действительно гордились. Для меня это было даже дольше.

Я разобью его на 5 различных областей:

1. Собираемся с мыслями
2. Строительство с контекстом
3. Начиная
4. Создание пользовательского интерфейса
5. Реализация пользовательского интерфейса

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

1. Соберитесь с мыслями

Это довольно просто. Вы упомянули: «Я знаю, что такое хороший дизайн и хороший пользовательский интерфейс». Большой! Начните делать мысленные заметки о том, что вам нравится в ваших любимых пользовательских интерфейсах и веб-сайтах с лучшим дизайном. Что делает их такими эффективными? Какие детали они используют (многоразовые компоненты)? Что они делают, что просто имеет смысл?

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

Не просто идентифицируйте хороший дизайн, спросите себя, ПОЧЕМУ это хороший дизайн, и начните думать о том, как бы вы сделали, чтобы подобные решения и идеи работали в вашем собственном дизайне. Я искренне верю, что просто оценивая много разных дизайнерских работ, задавая себе много вопросов и думая о дизайне, вы достигаете примерно 50% пути. Остальное просто исполнение.

2. Построение с учетом контекста

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

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

Отличным примером этого на практике является ghost . Они хотели упростить ведение блога и сделать мощный пользовательский интерфейс. Вот пример их внутреннего редактора. Некоторые предположения, которые они могли бы сделать: большая часть времени будет потрачена на написание/редактирование постов в блоге. Акцент делается на содержании. Рабочее место без помех. Добавление внешних ресурсов (таких как изображения) — обычная задача. Большинство будет знакомо с базовым Markdown (но, эй, давайте покажем предварительный просмотр для тех, кто не знаком).

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

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

3. Начало работы

Это первый раз, когда вы должны спросить: как это должно выглядеть?

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

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

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

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

4. Создание пользовательского интерфейса

У вас есть пользователи и основы. Надеюсь, у вас есть готовые каркасы и идеи стилей. Теперь самое простое: собрать все воедино.

Я использую Photoshop, Sketch, Illustrator и дизайн в браузере, все зависит от проекта. Инструмент не важен, так как уже с десяток раз пригонял домой.

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

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

Вот пример хорошо выполненного высокоточного макета.

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

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

5. Реализация пользовательского интерфейса

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

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

Несколько моментов по реализации:

1. Научитесь использовать скомпилированный язык CSS, такой как Sass, SCSS или LESS. Определенно стоит потраченного времени.
2. Создавайте каждый повторно используемый компонент как повторно используемый компонент в своем CSS. Внесите как можно больше переменных и повторно используемых элементов.
3. Создайте руководство по стилю для своих разработчиков, в котором будут показаны все повторно используемые компоненты. Супер полезно, когда страницу нужно быстро построить, и у них есть части, которые им нужны, чтобы собрать что-то вместе.

Совет Photoshop: используйте функцию копирования CSS , чтобы помочь с реализацией! Очень полезный инструмент для начинающих, но, пожалуйста, никогда не используйте этот код как окончательный. Посмотрите на это как на средство обучения (помогает преодолеть разрыв между макетом и реализацией).

TL;DR

1. Начните собирать мысли о том, что такое хороший пользовательский интерфейс и хороший дизайн. Делайте заметки, сохраняйте закладки и т. д. Этот «каталог мыслей» — это то, что движет многими решениями, которые принимает дизайнер.
2. По-настоящему вникайте в то, что вы разрабатываете, и кто ваши пользователи. Начните обсуждение, запишите цели и предположения и убедитесь, что все согласны друг с другом.
3. Начните работать над низкокачественными макетами и вайрфреймами, а также над ранними попытками создания руководств по стилю и набросков повторно используемых компонентов. Многие дизайнеры скажут, что эти предметы имеют определенный порядок, но, честно говоря, любой порядок работает.
4. Создавайте высокоточные макеты. Используйте Photoshop, Illustrator, Sketch, создавайте в браузере, как вам удобнее. Вы можете использовать все инструменты или только один.
5. Реализуйте это. Поскольку каждый продукт/проект уникален, сказать особо нечего. Я бы посоветовал всегда писать свой собственный CSS, когда это возможно — это отличное обучение.
6. Получайте удовольствие и вдохновляйтесь. Не зацикливайтесь на инструментах или передовых практиках. Со временем вы поймете, что вам нравится, сейчас самый важный шаг — создавать, строить и постоянно стремиться к улучшению.

Удачи там!