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

В курсе front-end разработка, который я проходил на Udemy, был отличный раздел о дизайне UI/UX, и он дает вам некоторые инструменты, которые вы можете применить при разработке собственного сайта или пользовательского интерфейса. Он охватывает такие темы, как типографика, теория цвета и то, как управлять вниманием пользователей при использовании вашего интерфейса.

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

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

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

Первое, что я хотел упростить, — это использование цветов. Цвет — очень мощный способ привлечь внимание пользователей, но если вы переусердствуете и используете слишком много цветов, ваш дизайн может в конечном итоге перегрузить пользователя. Я смотрел это видео на Youtube от The Futur Academy, где они подробно рассказывают о том, как эффективно использовать цветовую палитру в дизайне.

Один отличный совет, который я почерпнул из этого видео, заключался в том, что если у вас есть цветовая палитра, это не означает, что вам нужно использовать все цвета. Вы должны выбрать основные, второстепенные, а также акцентные цвета, а затем использовать эти цвета на основе соотношения. Например, ваш основной цвет будет использоваться на 60% вашей страницы, дополнительный цвет — на 30%, а акцентные цвета будут составлять только последние 10% вашего дизайна.

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

Я решил использовать более тонкую цветовую палитру и использовать принцип 60–30–10.

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

Я решил пойти на что-то более простое и использовал стикеры memoji, которые у меня были на моем iPhone в настоящее время.

Для будущей версии я думаю, что у меня будет профессиональная фотосессия, чтобы я мог лучше фотографировать себя при хорошем освещении.

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

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

В моем портфолио еще много работы, но для меня оно уже выглядит намного лучше, чем мои первые попытки. Я добился гораздо более продуманного вида, упростив макет, а также упростив цвета.

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