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)

Web Design Junior

Логічне продовження курсу Web Design Beginning. За три місяці перейдемо від створення базових лендингів до роботи над складними сайтами та e-commerce проєктами. Навчимося презентувати роботу клієнту й аргументувати власні дизайн-рішення
Дізнатись більше