Веб-дизайн — основы

Как распознать хороший дизайн, что такое UX и UI

Давайте сразу определимся, что «вкусовщина» это миф. Дизайн в вебе либо 💩, либо 💎 — решает задачи бизнеса и пользователей, а также выделяется из тех, что были открыты в соседних вкладках. Чтобы было понятней, разделим сайт на сущности UX/UI и рассмотрим их с примерами.

UX (user experience) — опыт пользователя. Занимаются этим UX, UX/UI и CX дизайнеры:

UX дизайнер сфокусирован на изготовлении каркаса (wireframe), пути пользователя (user flow) и опыте пользователя (user experience).
UX/UI дизайнер — распространенная практика в России, когда дизайнер отвечает и за интерфейс и за опыт.
CX дизайнер заботится об общем впечатлении потребителя о бренде. Как бренд-менеджер в маркетинге, только в дизайне.

Актуальная информация не обновляется и вводит пользователей в заблуждение. <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.nintendo.ru%2F&postId=150811" rel="nofollow noreferrer noopener" target="_blank">https://www.nintendo.ru/</a>

Длинный и сложный текст никто не читает. <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fcdek.ru%2F&postId=150811" rel="nofollow noreferrer noopener" target="_blank">https://cdek.ru/</a>

Всплывающих окон и рекламы больше, чем контента. <a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fforbes.ru%2F&postId=150811" rel="nofollow noreferrer noopener" target="_blank">http://forbes.ru/</a>

Всё самое нужное на одной странице, разделы упрощены до невозможности. А превосходная метафора с двойным дном «Почта доставляет» просто обезоруживает. <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.pochta.ru%2F&postId=150811" rel="nofollow noreferrer noopener" target="_blank">https://www.pochta.ru/</a>

С помощью эмодзи пользователь быстрее понимает контекст и не успевает заскучать. <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.reg.ru%2F&postId=150811" rel="nofollow noreferrer noopener" target="_blank">https://www.reg.ru/</a>

Наверное, самая понятная форма в мире. Да и UI прекрасен, что уж там. <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.airbnb.ru%2F&postId=150811" rel="nofollow noreferrer noopener" target="_blank">https://www.airbnb.ru/</a>

Понятная структура большого массива информации. <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.reg.ru%2F&postId=150811" rel="nofollow noreferrer noopener" target="_blank">https://www.reg.ru/</a>

UI (user interface) — интерфейс пользователя. Над ним работают: UI, Product, Interaction и Web дизайнеры:

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

Всё свалено в кучу, а 25% экрана вообще не используются. <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.dhl.ru%2F&postId=150811" rel="nofollow noreferrer noopener" target="_blank">https://www.dhl.ru/</a>

Отсутствие сетки. <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.nintendo.ru%2F&postId=150811" rel="nofollow noreferrer noopener" target="_blank">https://www.nintendo.ru/</a>

Старый и унылый дизайн. <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.stanford.edu%2F&postId=150811" rel="nofollow noreferrer noopener" target="_blank">https://www.stanford.edu/</a>

Приятная видео-анимация, объясняющая вариант использования продукта. https://slack.com/

Идеальная сетка. <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.airbnb.ru%2F&postId=150811" rel="nofollow noreferrer noopener" target="_blank">https://www.airbnb.ru/</a>

Гифка с демонстрацией одной из фич. https://www.figma.com/

Фиксированное оглавление — удобно всегда. <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fframer.com%2F&postId=150811" rel="nofollow noreferrer noopener" target="_blank">https://framer.com/</a>

На всем сайте идеально выдержанная идентичность. Все иллюстрации имеют единый стиль, а элементы — цвет. <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.figma.com%2F&postId=150811" rel="nofollow noreferrer noopener" target="_blank">https://www.figma.com/</a>

Криповая, но стильная и запоминающаяся видео-заставка. Кстати, это любимый суши-бар нашей команды — рекомендуем. https://subzerosushi.ru/

Нельзя забывать, что во главе угла всегда стоит пользователь и его удобство. Если ему будет неудобно, непонятно, долго или странно, то он закроет страницу и забудет об этом через секунду. Нужно думать о пользователе и его удобстве, чтобы он радовался и умилялся при использовании вашего продукта, рассказывал о своем опыте друзьям, тем самым снижая ваш CAC (Customer Acquisition Cost — стоимость привлечения пользователя).

Это ли не счастье? 🙂

Если хотите получить быстрый и хороший результат, пишите на hello@elstudio.tech или заглядывайте к нам на сайт:

4 комментария

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

Ответить