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

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

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

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

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

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

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

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

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

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

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

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

Dribbble shot

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Об авторе

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

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

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Как CAPTCHA влияет на показатель отказов, широкомасштабное исследование
Подробнее

Как CAPTCHA влияет на показатель отказов, широкомасштабное исследование

Наше широкомасштабное тестирование юзабилити показало, что 16% сайтов электронной коммерции используют CAPTCHA в какой-то момент оформления заказа или показывают ее пользователям при выполнении задач, связанных с учетной записью.
Подробнее

UX исследование, нужен ли иконкам текст?

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

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share