x
 
Анатолий Пивоваров
31 июля 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Насколько я справился с редизайном сайта Блаблакара?

behance.net/gallery/72979763/Redesign-concept-BlaBlaCar


Анатолий!

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

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

Я ничего не знаю об устрой­стве Бла­б­ла­кара, поэтому не могу дать кон­крет­ных сове­тов по улуч­ше­нию интер­фейса. Но если ори­ен­ти­ро­ваться про­сто на общие пра­вила вёрстки, то я бы дви­гался в каком‑то таком направлении:

Похожий трюк с разделением блоков с помощью текста я использовал в совете о карточках туров

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

Похожий трюк с разделением блоков с помощью текста я использовал в совете о карточках туров

Ещё я поз­во­лил себе пере­ра­бо­тать шапку, потому что мне очень уж хоте­лось как‑нибудь свя­зать поля ввода с колон­ками в выдаче. По пути поте­ря­лись суще­ствен­ные штуки типа ввода даты поездки — им, конечно, надо будет найти место.

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

Поделиться
Отправить

Комментарии

Саша Лебедько
31 июля 2019

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

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

Максим Невесенко
2 августа 2019

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

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

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

Сергей Якунин
7 августа 2019

В редизайне автор смешал форму для запроса с результатами. Видимо, форма с полями ввода резала глаз. Поле для ввода даты похоже на кнопку «искать», а самой кнопки «искать» нету.

Почему текст комментариев сделали серым цветом? Почему спрятали информацию о поездке за эффектом наведения мыши и добавили подчёркивание точками?

Советую смелее экспериментировать в Индизайне и ХТМЛ.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

3 У меня афиша. Не знаю, как улучшить. Беспокоит пустое пространство слева Как форма текста влияет на порядок чтения? 2




Недавно всплыло

Как совместить информационный стиль и текст для поисковиков? 7 Хочу научиться сторителлингу 12 2 Сайты для слабовидящих 2