Сообщение # 1 | 06:21:32 15 Фев 2019
Здравствуйте, уважаемые форумчане.

Цитата
С первого дня моего знакомства в веб-индустрией, а начал я именно с ucoz, меня зацепил дизайн.
Моя мечта была научиться создавать не красивый сайт, а удобный, что намного важнее первого, а в совокупности — бомба!

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

Что ж, статья о том, как сделать удобный и красивый интерфейс, хватит прелюдий, начнем!


Статья будет полезна лишь тем, кто впервые услышал данные аббревиатуры.

UX\UI: как создать удобный и красивый интерфейс?

1.  UX
С английского аббревиатуру «UX» можно расшифровать и перевести как User Expierence, Пользовательский Опыт.
Иными словами то, какой опыт ( впечатление ) получит пользователь от пользования вашим интерфейсом. 

2. UI
Опять же, аббревиатура, которая звучит как User Interface, а переводится так — пользовательский интерфейс.
Думаю, каждый догадался, что это то, как ваш сайт выглядит, какие цвета и оттенки использует, размеры шрифтов и удобность в чтении.

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

Но как пройти эти два эта?
Если у вас нет никак навыков, то сперва советую их приобрести.
Подтянуть UX вы можете самостоятельно. Для этого вам потребуется взять два веб-портала, и перенести протоип на бумагу \ в графический редактор (я говорю лишь о структурах). Далее это все проанализировать и сравнить. В анализе у вас будет возможность получить опыт, а при сравнении — улучшить.

Попробуем на практике.
Возьмем два самых популярных поисковика в СНГ: Google и Яндекс.
На первый взгляд они сильно отличаются, они совершенно разные, при этом выполняя одну и ту же задачу, не так ли?
Ключевой элемент у каждого поисковика — строка, в которую вводится запрос. Она расположена по центру, не нужно долго думать, чтобы понять, почему именно в этом месте. Для фокусировки.

Яндекс

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

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

Ниже поиска расположены не менее интересные информеры: Погода, Пробки, Телепрограмм и Афиша (остальные я отключи, возможно, добавлялись новые).
Итак, когда пользователь заходит на главную страницу, он может не только найти то, что хочет, но еще и ознакомится с актуальной информацией, которая поможет ему узнать последние события, по какой трассе ему лучше проехать, не забыть взять зонтик и узнать какой фильмы выходит.

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

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

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

Самое главное, что все цвета на сайте подобраны хорошо, есть элемент, который фокусирует на себе внимание, который выделен желтым. Цвета и размеры шрифта подобраны хорошо, не мешают чтению, доносят до пользователя нужную инфорацию, например, взять информер новостей. "Сейчас в СМИ" изначально немного темнее, чем в "%city%", что говорит нам о активности данного элемента, а общий размер и цвет говорят нам о том, какую информацию несет в себе блок.

Google

А вот тут ребят сами, подумайте, проанализируйте.

Подведя небольшой итог, можно сказать, что UX\UI — важные части любого дизайна, о которых нельзя забывать.
Не может существовать красивый, но не удобный сервис, как и наоборот.

Так как же создать удобный и красивый сервис?

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

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

Третий вариант — самостоятельно обучение.
Если вы готовы к этому этапу значит, вам это нужно и вы умеете искать, а как сюда забрели не знаю (:

А вот небольшие подсказки, которые сделают ваш интерфейс приятнее:

Заголовки

Заголовки всегда должны быть выделены размером по убыванию от H1 > H2 > H3 > ... > H6, от большего к малому, но зачастую количество заголовков ограничивается тремя пунктами, то есть H1 — заголовок страницы, и под-заголовки — H2, H3. А если вы не знаете как выбрать размер, то пользуйтесь правилом кратности, если взять, что размер шрифта 16px, что кратно 8, то H3 можно сделать размеров в 24 пикселя, H2 32, ну и H1 40 пикселей. Так же чаще всего заголовки делают толстыми (font-weight: 500+), или же Serif.

Текст

Главное правило, о котором вы должны знать, так это то, что длина блока с текстом не должна превышать 60% экрана ( десткоп ).
Самый хороший вариант, поставить для всего текста значение в css .element { max-width: 60rem } или .element { max-width: 60% }, первый случай 60 умножится на размер вашего шрифта, а во втором будет взято для области лишь 60% экрана устройства.

Немного позднее материал будет дополнен и обновлен.
На следующей неделе я расскажу о цветах и шрифтах.
Со всеми вопросами:
Телеграмм — iamvasiliev143
Почта — iamvasiliev143@gmail.com