Редизайн страницы каталога и продукта для финансового сервис
Бюджет:
30 000 руб
Сервис Бробанк [admin366]
[16.03.2023 | 11:28] [внесены изменения: 21.03.2023 | 19:03]
Зарегистрирован на сайте меньше месяца
Безопасных сделок: 0
Отзывы фрилансеров:
+ 0
- 0
Всем привет. Ищем дизайнера для редизайна сервиса Бробанк.ру – . Текущая задача – только предложить свои видение. Мы выберем кандидата и продолжим дальнейшую работу уже по редизайну всех шаблонов.
О Бробанке: Сайт успешно выполняет свои функции, текущему дизайну болеет 5 лет. За это время по мере развития и добавления новых функций, накопилось много "мусора" и лишних, дублирующихся стилей. Для облегчения и ускорения загрузки появилась задача обновить верстку и привести дизайн к единому виду на всем проекте.
Приветствуются предложения по улучшению удобства для пользователей. Но кардинальных изменений не нужно, проект стабильно и успешно работает. Визуально текущий дизайн в целом устраивает, выполнен в современном стиле, как и большинство похожих проектов. Нужно придерживаться этого минималистичного легкого стиля, графики должно быть не больше чем сейчас. Очень важно для нас – быстрая загрузка на всех устройствах пользователей.
По конкурсу: Наиболее важные для сервиса страницы:
- страница каталога, пример
- страница продукта, пример
Предложите свои варианты как можно сделать лучше и современнее эти шаблоны. Структуру страниц менять не нужно, только визуал. Либо если меняете, объясните в чем польза нового варианта.
Статистика по разрешению экранов наших посетителей – (в прикреплении). 90% заходят с мобильных устройств. Наиболее частая ширина экрана – 360px, поэтому нужно предложить свои варианты именно в этом разрешении. Работаем в Фигме.
Лидеры рынка (конкуренты):
- Банки.ру
- Сравни.ру
- Банкирос.ру
- Выберу.ру
Что нравится по дизайну:
-
-
-
- поисковая выдача Яндекса на десктопе (легкие тени, отсутствие обводки)
Пара слов от верстальщика:
- Унифицируйте элементы: создайте единый документ, в который поместите все-все типовые элементы. Заголовки, списки, параграфы, ссылки, кнопки, поля форм, контролы, миниатюры изображений и прочее. И везде в проекте используйте только эти элементы и только в той форме, в которой они здесь запечатлены.
- Тестируйте элементы разным контентом.
- Продумайте позиционирование и отступы – никаких подгонок, например межстрочником.
- Долой Pixel Perfect – не выверять все до пикселя только в конкретных разрешениях, всегда нужно помнить в реальности их больше. Как правило в верстке используются условные единицы.
- Никаких подгонок цвета путем наложения эффектов или изменения прозрачности.
- Вся графика должна быть подготовлена в отдельной папке.
Верстка будет осуществляться под следующие разрешения экранов, нужно проверять дизайн исходя из этого
450px т.е. все мобилки от 320 до 449
@media (min-width: 450px) { / CSS для экранов размером: 450px – 749px / }
@media (min-width: 750px) { / CSS для: 750px – 999px / }
@media (min-width: 1000px) { / CSS для: 1000px – 1200px / }
@media (min-width: 1200px) { / CSS для экранов больше 1200px / }
О Бробанке: Сайт успешно выполняет свои функции, текущему дизайну болеет 5 лет. За это время по мере развития и добавления новых функций, накопилось много "мусора" и лишних, дублирующихся стилей. Для облегчения и ускорения загрузки появилась задача обновить верстку и привести дизайн к единому виду на всем проекте.
Приветствуются предложения по улучшению удобства для пользователей. Но кардинальных изменений не нужно, проект стабильно и успешно работает. Визуально текущий дизайн в целом устраивает, выполнен в современном стиле, как и большинство похожих проектов. Нужно придерживаться этого минималистичного легкого стиля, графики должно быть не больше чем сейчас. Очень важно для нас – быстрая загрузка на всех устройствах пользователей.
По конкурсу: Наиболее важные для сервиса страницы:
- страница каталога, пример
- страница продукта, пример
Предложите свои варианты как можно сделать лучше и современнее эти шаблоны. Структуру страниц менять не нужно, только визуал. Либо если меняете, объясните в чем польза нового варианта.
Статистика по разрешению экранов наших посетителей – (в прикреплении). 90% заходят с мобильных устройств. Наиболее частая ширина экрана – 360px, поэтому нужно предложить свои варианты именно в этом разрешении. Работаем в Фигме.
Лидеры рынка (конкуренты):
- Банки.ру
- Сравни.ру
- Банкирос.ру
- Выберу.ру
Что нравится по дизайну:
-
-
-
- поисковая выдача Яндекса на десктопе (легкие тени, отсутствие обводки)
Пара слов от верстальщика:
- Унифицируйте элементы: создайте единый документ, в который поместите все-все типовые элементы. Заголовки, списки, параграфы, ссылки, кнопки, поля форм, контролы, миниатюры изображений и прочее. И везде в проекте используйте только эти элементы и только в той форме, в которой они здесь запечатлены.
- Тестируйте элементы разным контентом.
- Продумайте позиционирование и отступы – никаких подгонок, например межстрочником.
- Долой Pixel Perfect – не выверять все до пикселя только в конкретных разрешениях, всегда нужно помнить в реальности их больше. Как правило в верстке используются условные единицы.
- Никаких подгонок цвета путем наложения эффектов или изменения прозрачности.
- Вся графика должна быть подготовлена в отдельной папке.
Верстка будет осуществляться под следующие разрешения экранов, нужно проверять дизайн исходя из этого
450px т.е. все мобилки от 320 до 449
@media (min-width: 450px) { / CSS для экранов размером: 450px – 749px / }
@media (min-width: 750px) { / CSS для: 750px – 999px / }
@media (min-width: 1000px) { / CSS для: 1000px – 1200px / }
@media (min-width: 1200px) { / CSS для экранов больше 1200px / }
Разделы:
Конкурс
Настоящий конкурс не является публичным конкурсом в соответствии с гражданским законодательством Российской Федерации. Участие в данном мероприятии не гарантирует определение победителя, а также выплату вознаграждения. Площадка FL не является организатором конкурса. Нажимая кнопку «Принять участие в конкурсе», вы подтверждаете, что согласны участвовать на описанных условиях.
Участники
|
Статистика по конкурсу
|
|
Полина Погосян [polinamesnyanko] [16.03.2023 | 12:20] [внесены изменения: 16.03 2023 | 12:21]
Сервис Бробанк [admin366] [16.03.2023 | 12:22]
верно
Данил Ф. [danilfah] [16.03.2023 | 12:45] [внесены изменения: 26.03 2023 | 23:17]
Данил Ф. [danilfah] [26.03.2023 | 23:00] [изменен 26.03.2023 | 23:20]
Вспомнил поздно, что успел. Сделал светлый с тенями и плоский вариант.
Предлагаю фильтры сделать нижний сайдбар как у vc.ru добавить (у финансовых сервисов не увидел).
При нажатии на кнопку подробнее, можно сделать разворот карточки с остальной инфой или поп-ап
Ольга Соколова [vitavet] [16.03.2023 | 13:42]
Добрый день, участвую.
Денис Косинцев [denchikosintsev] [16.03.2023 | 14:04] [внесены изменения: 26.03 2023 | 23:58]
Прикрепляю свой вариант работы. Предложил свое видение. Если понравится – готов к сотрудничеству.
Егор Нерсесян [egor-nersesian] [16.03.2023 | 20:29]
Irina Skaliy [iren_vl] [17.03.2023 | 14:08] [внесены изменения: 25.03 2023 | 11:03]
Пара комментариев по макетам:
- На первом экране на выбор два цветовых решения информации рядом с изображением карточки.
- В шапке поиск и сравнение предлагаю убрать в бургер-меню. Но есть товары добавлены к сравнению, то появится иконка слева от бургер-меню.
- В карточке товара мое предложение – убрать всю дополнительную информацию в меню блок "о карте" и далее скролл в право, чтобы когда открываешь с мобильного устройства не листаешь в низ бесконечно все эти разделы.
Сервис Бробанк [admin366] [26.03.2023 | 13:44]
Добрый день. Спасибо за ваши идеи и участие:)
Кирилл Ободовский [kobodovskiy] [24.03.2023 | 21:48]
Высылаю работу на конкурс, пока только страница каталога: десктоп 1440px, мобильная версия 360px
Страницу продукта вышлю чуть позже.
Буду благодарен за фидбэк по работе.
Сервис Бробанк [admin366] [26.03.2023 | 13:48]
Добрый день. Спасибо за работу. В превью продукта забыли про кнопку "Подробнее" и возможность раскрыть карточку. На ПК карточка ну очень тесная.
Михаил Луковской [mrlook] [26.03.2023 | 13:12] [внесены изменения: 26.03 2023 | 22:10]
Добрый день.
До конца конкурса выложу остальные страницы. Только Мобайл.
Жду ваших комментариев. Спасибо.
Kir S [PL-company] [26.03.2023 | 19:39]
Олег Качан [olegkachan] [26.03.2023 | 20:34]
Возможно ли продлить конкурс на несколько дней?
Marina Volkova [volckovamarika] [17.03.2023 | 11:20]
Антон Русаков [rudakovwork14] [21.03.2023 | 19:21]
Дарья Д. [dragomirdarya24] [21.03.2023 | 22:22]
Сергей Яковлев [Nosteam] [21.03.2023 | 22:38]
Виталий Бахман [tiketavi] [22.03.2023 | 00:48]
Ксения Ефремова [kseniaea] [22.03.2023 | 13:00] [внесены изменения: 23.03 2023 | 20:20]
Хочу предоставить свое видение редизайна сайта.
В моей визуализации имеется два основных цвета, идущих из логотипа компании (#FBDE44, #000000). Шрифт из семейства sans-serif обеспечивает максимальную читаемость (Raleway). Мною было подобрано 2 начертания: Regular, Medium.
Сайт получился очень легкий и воздушный, без потери информации. Для объема я добавила псевдо 3D элементы, по факту никак не изменяющие скорость загрузки. Графика минималистична, она не будет путать юзера, а, наоборот, проведет пользователя по вашему сайту.
Первые два изображения-каталог, последующие-страница продукта.
Буду рада сотрудничеству! Готова работать с вами до конца.
Сервис Бробанк [admin366] [24.03.2023 | 08:04]
Добрый день. Благодарю за участие:)
Павел Беляков [Ozomatl] [22.03.2023 | 14:55]
Стелла Сээманн [sritulasidg] [22.03.2023 | 15:37] [внесены изменения: 26.03 2023 | 18:44]
Елена М. [mezena96] [22.03.2023 | 21:47]
Green Luis [Corp27] [24.03.2023 | 00:20] [внесены изменения: 25.03 2023 | 01:02]
Сервис Бробанк [admin366] [24.03.2023 | 08:07] [изменен 24.03.2023 | 08:07]
Здравствуйте. Задача как раз таки была предоставить дизайн для мобильных устройств (в разрешении 360). С ПК у нас около 10% пользователей, не приоритетная версия:). Понравился блок "Как оформить кредитную карту онлайн". Благодарю за участие.
Green Luis [Corp27] [24.03.2023 | 11:22]
Изначально проще делать из десктопа мобильную версию, чем наоборот, сегодня постараюсь предоставить мобильную в 360
Green Luis [Corp27] [25.03.2023 | 01:03]
Добавил мобильную версию в 360
Сервис Бробанк [admin366] [26.03.2023 | 13:51]
Привет. Ок, спасибо за работу. Будем думать.
Ксения Блинова [moosilin-lighty] [24.03.2023 | 19:34]
Прикрепляю свой вариант дизайна мобильной версии. Опиралась на информативность и удобство сайта без перегрузки элементами. Буду ждать обратной связи.
Сервис Бробанк [admin366] [26.03.2023 | 13:53]
Здравствуйте. Благодарю за участие. В превью продукта понравилось как уменьшили размер изображения и расположили элементы.
Вадим Гетман [layga] [24.03.2023 | 21:19]
Артем Зозуля [HelixDesig] [25.03.2023 | 01:09]
Ссылка на просмотр
К сожалению, карточку продукта до завершения конкурса сделать не успею.
Оставшиеся блоки этой страницы, постараюсь доделать до понедельника, конечно, если в этом будет необходимость.
Сервис Бробанк [admin366] [26.03.2023 | 13:56]
Привет. Ок спасибо, неплохо. Не понимаю что за синий элемент с 3-мя точками.
Артем Зозуля [HelixDesig] [26.03.2023 | 14:13] [изменен 26.03.2023 | 14:15]
Это предварительно решение, вместо ссылки "развернуть" внизу карточки. При клике выезжает модалка, в которой можно быстро ознакомится с дополнительной информацией по карте.
Volha Melnikava [olka38] [25.03.2023 | 18:07]
Сервис Бробанк [admin366] [26.03.2023 | 13:58]
Здравствуйте. Спасибо вам. Бросается в глаза – теснота и пестрота. Нужно больше воздуха между элементами.
Evgeniy Renin [blueugen] [25.03.2023 | 19:38] [внесены изменения: 25.03 2023 | 19:49]
Сервис Бробанк [admin366] [26.03.2023 | 14:00]
Добрый. Спасибо за участие. Для ссылок лучше выбрать один цвет, желтый такой себе вариант:)
Evgeniy Renin [blueugen] [26.03.2023 | 14:25] [изменен 26.03.2023 | 16:01]
Ну тут своя логика.
Синие – на новую страницу переводят ака гиперссылка.
Темно жёлтый – подстраница. Но это как вариант показать кликабельность. Можно заменить на подчеркивание-кнопку-синий-ост авить всё как есть.
Кстати, тени вам обязательны? Не думали просто легкую серую обводку? Если что добавил вариант с обводкой легкой.
Алексей Пугачёв [alexpgchv] [26.03.2023 | 19:56] [внесены изменения: 26.03 2023 | 19:57]
Теги: резюме дизайнера, лучшие дизайны сайтов, сделать дизайн сайта, создать дизайн сайта, нужен веб дизайнер, требуется веб дизайнер, ищу дизайнера сайтов