Небольшое руководство по дизайну для не дизайнеров
Наш канал в

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

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

Посмотрим на некоторые изменения, внесенные в эти приложения.

Изменения в дизайне приложения Things
Изменения в дизайне приложения Things

Если взглянуть на картинку выше, то мы увидим, как градиенты и 3D-эффекты постепенно упрощались с меньшим количеством цветов и простых иконок.

Эволюция дизайна Facebook
Эволюция дизайна Facebook

Аналогично с приложением Facebook. Они удалили эти причудливые градиенты и начали использовать простые иконки.

Эволюция дизайна Evernote
Эволюция дизайна Evernote

Давайте посмотрим на некоторые веб-дизайны.

Изображение lapa.ninja
Изображение lapa.ninja
Изображение lapa.ninja
Изображение lapa.ninja

Dribbble shot

Итак, какие выводы следуют из этих дизайнов?

  • Простота и всего несколько цветов
  • Расстояние между компонентами
  • Использование закругленных углов
  • Простые иконки
  • Выравнивание

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

  • Форма входа в систему

Начнем со стилей браузера по умолчанию

Форма входа, стили браузера по умолчанию
Стили браузера по умолчанию

Теперь давайте поместим их в стек и добавим отступ между ними.

Форма входа с отступом

Теперь изменим цвет фона, чтобы форма немного выделялась.

Форма входа с подложкой

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

Форма входа тень и рамка

Добавим внутренние поля в поля ввода и немного изменим границу, и добавим закругленные углы.

Небольшое руководство по дизайну для не дизайнеров

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

Форма входа с акцентной кнопкой

Мы можем видеть, как эти простые изменения сделали дизайн красивым.

Небольшое руководство по дизайну для не дизайнеров
От стандартного стиля браузера к красивому компоненту

Ресурсы и вдохновение:

Я думаю, что это очень важно.

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

Об авторе

Вы можете узнать об авторе больше, посетив его страницы на следующих сайтах:

Автор в Twitter
Автор на GitHub
Автор на CodePen

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

5 UX способов начать разработку дизайна правильно

Проблема в том, что если вы работаете с не-дизайнерами, красивые экраны – то, что нужно. Вы сможете предоставить “вау-эффект” клиенту, а как этот вау-эффект будет реализовываться, уже значения не имеет. А мы все-таки предпочитаем создавать нечто в духе “Все довольны”.

OOUX: Основа дизайна взаимодействий

Свой подход “Объектно-ориентированного UX” (Object-Oriented UX – OOUX) я представил в прошлом году на A List Apart. Подход подразумевает дизайн объектов перед проработкой действий.

Полное руководство по процессу продукт-дизайна

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