Критика: как улучшить внешний вид карточек в моем веб-приложении

Я создаю веб-приложение, и у меня есть несколько вопросов о его внешнем виде, сначала вот «скриншот» (просто тест с Pixelmator) :

Скриншот

Элемент в центре — это карточка, стрелки справа и слева позволяют пользователю просматривать карточки.

  • Как вы думаете, карточка похожа на открытку ? Как я могу улучшить «ощущение карты», сохраняя при этом максимально простой внешний вид?

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

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

ОБНОВЛЕНИЕ (вот новая версия, я последовал совету Дженны и теперь карточки отображаются стопкой, а также добавил эффект высокой печати к словам на карточках):

введите описание изображения здесь

Ответы (1)

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

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

Другой шрифт, я бы сказал, имеет смысл. Хорошо немного отделить контент от меню. Также я согласен с тем, что отличие облегчает человеку запоминание. По этой же причине я сделал слово «горный» немного больше, и хотя оно не совсем черное (#000000), оно близко к нему. Контраст тоже помогает.

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

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

введите описание изображения здесь

Обновлять

Наложение выглядит великолепно, особенно с постоянством источника света и красивыми тенями. Вот еще один пример с добавлением монохроматического шума (как было предложено Аароном), который подчеркивает текстуру бумаги. Я добавил небольшое размытие движения к шуму, так как бумага кажется немного грубой, если вы посмотрите очень внимательно, и шум выявляет небольшие несоответствия плотности бумаги.

В общем, ваш выглядит очень хорошо, и это просто еще одно предложение для рассмотрения :)

добавленный шум

Близкое сравнение между бумагой до и после;

крупным планом

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

Некоторый шум может помочь в дополнение к тому, что предлагается здесь.
Здравствуйте Дженна! Большое спасибо за ваш ответ ! Я последовала всем вашим советам, и у меня также появилась новая идея: дарить карты стопкой! Я обновил свой пост, чтобы показать вам, что я сделал! Еще раз спасибо ! Мне очень помогло! Кстати, извините, я не смог проголосовать за ваш ответ, потому что у меня слишком низкий балл на этом сайте обмена стеками... :(
@AaronBenjamin хорошее предложение, я включу версию - она ​​определенно выявит контент. Тревор Энн Дениз, рад помочь! Выглядит красиво :) - Доминик, я знаю, это было так великолепно, пока это длилось!
@AaronBenjamin @ Jenna Я проверю шум, спасибо !!!! :)
Критика: как улучшить внешний вид карточек в моем веб-приложении
СпросиСетьПолитика конфиденциальности1y, 0v