UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Небольшое руководство по дизайну для не дизайнеров
Редакція
Редакція

Опубліковано • Оновлено

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

#ux

Когда мы думаем о дизайне интерфейса, мы думаем о причудливых цветах, стилях и макетах, и, кажется, что это очень сложно сделать. Но давайте посмотрим на дизайны, кажущиеся нам привлекательными и созданные крупными компаниями, и изменения, внесённые в них по мере их развития. Мы узнаем, что простые дизайны великолепно работают. В этой статье я расскажу вам об изменениях в ряде самых популярных приложений, и о том, как эти изменения могут научить нас создавать улучшенные пользовательские интерфейсы. Посмотрим на некоторые изменения, внесенные в эти приложения. Изменения в дизайне приложения Things Изменения в дизайне приложения Things Если взглянуть на картинку выше, то мы увидим, как градиенты и 3D-эффекты постепенно упрощались с меньшим количеством цветов и простых иконок. Эволюция дизайна Facebook Эволюция дизайна Facebook Аналогично с приложением Facebook. Они удалили эти причудливые градиенты и начали использовать простые иконки. Эволюция дизайна Evernote Эволюция дизайна Evernote Давайте посмотрим на некоторые веб-дизайны. Изображение lapa.ninja Изображение lapa.ninja Изображение lapa.ninja Изображение lapa.ninja Dribbble shot

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

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

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

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

Начнем со стилей браузера по умолчанию Форма входа, стили браузера по умолчанию Стили браузера по умолчанию Теперь давайте поместим их в стек и добавим отступ между ними. Форма входа с отступом Теперь изменим цвет фона, чтобы форма немного выделялась. Форма входа с подложкой Но полученный результат не выглядит великолепно. Давайте подкорректируем его и добавим закругленные углы, рамку и тень. Форма входа тень и рамка Добавим внутренние поля в поля ввода и немного изменим границу, и добавим закругленные углы. Теперь форма выглядит красиво и приятно, но кнопка смотрится не очень. Итак, давайте добавим кнопке заливку выделяющимся цветом и поместим ее справа. Форма входа с акцентной кнопкой Мы можем видеть, как эти простые изменения сделали дизайн красивым. [caption id="attachment_43107" align="aligncenter" width="1000"] От стандартного стиля браузера к красивому компоненту[/caption]

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

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

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

Об авторе

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


Перевод статьи Nitesh Kumar Niranjan

Топ коментарі (0)