Можно получить конструктивную критику по первому дизайну?

Question

[secondseptember]

Хотел бы получить конструктивную критику по своему первому (!) в жизни дизайну.
https://youtu.be/11dOhtHZKRc

А так же получить ответы на несколько вопросов:
1. Станицы "Услуги", "Контакты" выглядят слишком пусто на фоне остальных. Как эту проблему можно решить конкретно в моём случае? (чам разбавить фон?)
2. Глупый, конечно, вопрос. Допустим, мы имеем текст, написанный с заглавной буквы, справа от него полоску шириной 1 пиксель. Центрировать эту полоску правильно относительно заглавной буквы или нижнего регистра?
3. В меню кнопка "Записаться". Она выделяется на общем фоне, т.к. такие кнопки должны привлекать (так ведь?), но в целом, она смотрится не так хорошо, как смотрелась бы с обводкой вместо заливки. Какое решение из двух в данной ситуации правильное?

Comments

[Rustam Bainazarov]

Непонятное разделение информации в текстовых блоках, много пустых мест/отступов или же скученность; слабая типографика; цвета подавляют и гнетут (лично мне нужно больше белого). Странная кнопка «Записаться онлайн»: маленькая, выровнена нетипично.

Желание уместить всё на одном-единственном экране похвально, но реализовано слабо. Странная реализация блока с контентом а-ля карточки, которые живут своей жизнью. Не очень заметное меню, которое так и тянет положить внутрь такой карточки, которая и должна быть зоной контента.

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

Думаю, всё нормально для первого раза, удачи в профессиональном росте!

[auoa16]

При выделении кнопки "Записаться онлайн" текст немного уходит вверх, из-за чего отступы перестают быть равномерными

[sim3x]

Я не вижу растера, где он?
Я не вижу исходника, где он?
Зачем в вопросе линк на ютуб?

[Rustam Bainazarov]

sim3x, там видеопрезентация прототипа с анимациями и переходами.

[sim3x]

Рустам Байназаров, ну хорошо хоть не ворд документ с картинками в виде ексель ячеек

Что опять же не отвечает на вопрос - зачем оно нужно

[Rustam Bainazarov]

sim3x, ну, для того и нужно. Посмотреть дизайн в динамике. Обычная практика в дизайне тех же приложений. Все дизайнеры Uber и Stripe, например, обязаны знать After Effects, чтобы создавать такие видео, где показаны все UX-взаимодействия, которые они напридумывают.

Статика не всегда подходит для этого. Более того, это ТЗ для разработчиков, как надо делать переходы, анимации и т. п. Чтобы не со слов, мол, это выезжает отсюда, а это выскакивает вот так-то. Просто показываешь, как это должно выглядеть.

[sim3x]

Рустам Байназаров, выделите сарказм, пожалуйста, тегами

[Rustam Bainazarov]

sim3x, вы снова хотите спорить о том, что конкретно вы считаете ненужным.

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

Я тоже, например, не буду делать такое для проекта с бюджетом 2 тысячи долл. Или для проекта, где нет сложных интеракций. Там такое в 99.999% случаев излишне.

Человек учится делать что-то, что даст ему очков в будущем, — это хорошо.

[secondseptember]

Рустам Байназаров, Спасибо за критинку!
Что имеется в виду под "Непонятное разделение информации в текстовых блоках"?
Может быть, вы могли бы дать мне пару очевидных для вас решений для улучшения макета?

[Rustam Bainazarov]

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

Первый совет — начните с копирования простых и надёжных приёмов подачи информации. Почитайте доп. вот эту книгу:


Там много хороших практик описывается, которые можно применить. Отличная теория композиции и сетки. Но не стоит забывать, что там описаны вещи недвижимые, а web в текущем виде требует адаптивность. Изучайте примеры крупных компаний, их сайтов, приложений — и копируйте. Понимание придёт.

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

Почитайте, что такое дизайн-система и что такое компонентный подход — это упростит, сформирует и нормализует вашу работу, а так же упростит ваше общение с разработчиками.

~ ~ ~ ~ ~

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

[secondseptember]

Рустам Байназаров, большое спасибо!

[sim3x]

Рустам Байназаров, те там еще и сарказма не было...

Надобность в такого рода вещах надуманна
Если UX спец требует выкрутасов - он обязан уметь их реализовать
Если он не умеет такое, то он рисует рядом сидящему разработчику интерфейсов все так как он умеет
И они вместе пилят фичу до конца

Если пара сработанная, то им не требуется много времени и они могут общаться словами без рисунков

Пилить видео - максимум для презентации, когда код допилить не успевают или фича со 100% вероятностью будет слита
Но такое отдается не UI/IX

[sim3x]

Автор, так где исходник, хоть псд

[Rustam Bainazarov]

sim3x, это работает для небольших групп, стартапов и т. д. Просто в крупных компаниях так не устроено: дизайн делают отдельные подразделения. 99% того, что они делают, не доходит до реализации даже в одной строчке кода. Только после кучи согласований и одобрений свыше (аминь) начинают писать код.

Так, работающий в Google знакомый дизайнер за 4 года ни разу не пообщался с разработчиками напрямую, а видел реализации своих трудов в коде по факту.

Если человек будет уметь делать такие вещи — это, повторюсь, только плюс. Это хороший навык.

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

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

[sim3x]

Рустам Байназаров, такой навык будет востребован после того как человек будет уметь рисовать реализуемые вещи в простых редакторах
Без видео и динамики

На счет гугла - во всех компаниях бывают проблемы с взаимодействием

[Rustam Bainazarov]

sim3x, научится-научится человек работать малыми средствами. Обычно как раз делают статику, а потом уже в After Effects добавляют это всё. То есть, макет статический есть практически всегда.

(Не знаю, как в данном случае у автора.)

[secondseptember]

Рустам Байназаров, sim3x, https://yadi.sk/d/6rDZH2zI-h_Qeg

[Rustam Bainazarov]

secondseptember, а, кстати, в итоге не пользовался ни разу нормально Adobe XD. Там делали взаимодействия и анимации? Я просто не знаб, какой у него функционал касательно этого.

Пользуюсь для дизайна — Figma, Framer X (взаимодействия) и изредка Sketch. Для растра — Photoshop. Для векторной графики — Inkscape, Illustrator и Boxy SVG (для web хорошая штука, но функционал урезан).

[Rustam Bainazarov]

secondseptember, LOL, я вспомнил ваш вопрос дикий :))

[secondseptember]

Рустам Байназаров, анимацию делал в protopie, тк по анимации в xd мало материала, а протопай интуитивно прост

[Rustam Bainazarov]

secondseptember, да, тоже хороший инструмент, наслышан, но не пользовался.

[secondseptember]

Рустам Байназаров, а что касается того, уместна ли анимация вообще: я получил неплохой экспириенс в виде освоения (пусть даже на минимальном уровне) новой программы, да и времени это занимает не так много

[Rustam Bainazarov]

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

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

Так что всё хорошо, изучайте, всё правильно.

Answer 1

[lukoie]

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

2. Заглавной буквы. Потому что нижний край будет тоже иметь символы выходящие ниже базового уровня. Буквы например у букв "р", "у", "ф", и т.д.
3. Кнопку эту желательно повторять на страницах. Почитайте в гугле про CTA (call to action, призыв к действию). "Правильного" решения не бывает. Тут нужны A/B тестирование. Как по мни, заливка здесь более уместна, т.к. больше кидается в глаза. Погуглите чек-листы продающих стайтов, там указывают что и как должно быть в шапке продающего сайта, исходя из практики и замеров.
Ну вот как например - посмотрев видео я так и не понял какой это вообще ГОРОД
А, ну и там где-то посредине видео была страница, где у заголовков было выравнивание по правому краю. Лучше не делайте так. Выравнивание везде должно быть "привычным" для русскоязычной аудитории, по левому краю. И в исключительных случаях для выделения определенных кусков допустимо центрировать.

Answer 2

[Рональд Макдональд]

О, мой просмотр был первым.
"Биоревитализация", Карл!
Всё такое розовато-кремовое, много полуодетых шкур и обилие слишком энциклопедических фраз.
Кстати, у вас написано: "9800 довольных клиентов" и при этом: "Сотни довольных каждый день". То есть, получается, что данная контора работает от силы месяца два.

Ну а так норм, только вот этот кремовый фон прямо превращает меня в ТП.

Comments

[secondseptember]

Разве вся эта нежность, которая выливается из монитора - плохо, учитывая ца?

Answer 3

[Александр]

Я Второй )))
1. Курсор не нравиться, но идея хорошая. Не кружок, а хватающая рука подошла бы больше.
2. Там где "9857 довольных клиентов" с центральным текстовым блоком что то сделать ...не нравиться, может из за того что с правой стороны отступ есть, а с левой стороны нет. Если туда 20 строк захотят вогнать будет не красиво.
3. "Контакты" переделать. Размер с остальными страницами не тот. В рамочку что ли загнать...а вокруг чертики бегают )))
Повторятся не будем ....

Comments

[secondseptember]

Такой курсор в режиме превью протопая всегда.