Как оно должно выглядеть и чувствоваться. Часть I.

Как оно должно выглядеть и чувствоваться. Часть I.


Эстетика, сочетание цветов, плавность, скорость. В моём понимании это наиболее важные аспекты для интерфейса. Интерфейсом должно быть приятно и удобно пользоваться. Думаю, что ты сталкивался с ситуацией, когда есть удобный сайт с дизайном из 2000-х, которым ты много лет пользуешься. Я обычно в такой ситуации ухожу к более красивому конкуренту. По одежке встречают людей, интерфейс встречают по дизайну.

Привлечение внимания и собственный почерк также очень важные части. Pinterest мне запомнился сеткой, Twitter и Dribbble цветовой гаммой. Shortstories я выделил (надеюсь на это) бэкграундом. Чем бы твой проект привлек внимание?

Как я подбирал бэкграунд

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

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

Для подбора я использовал https://uigradients.com. Плюсом этого сайта является наличие большого количество готовых градиентов.

Моя первая попытка (linear-gradient(110deg, #f93d66, #6d47d9))

Первый вариант был чересчур ярким для сайта, где основная функция это чтение. А что ты думаешь? Пробовал еще множество различных вариантов (например, https://uigradients.com/#LoveCouple, https://uigradients.com/#RedOcean, https://uigradients.com/#CheerUpEmoKid).

В итоге я остановился на следующем варианте:

Финальный вариант (linear-gradient(20deg, #4568dc, #b06ab3)). Как тебе?

Почему этот? Не напрягает глаза, хорошо сочетается с белым цветом, на нём отчетливо видно черный цвет.

Но запомнится ли кому-нибудь просто голый градиент на фоне? Тебе бы запомнился? Может быть, а может и нет. Скорее нет. Поэтому я решил добавить топографический рисунок.

Топографическая карта, которую я наложил на градиент

Данный рисунок создал эффект похожий на тот, который оставляет бензин на воде.

С наложенной топографической картой фон выглядел следующим образом:

Теперь лучше, да?

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

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

Мораль:

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