Заказ закрыт
Редизайн портала грузоперевозок

Бюджет: 27 000 руб
Победители конкурса
1 место: победитель не выбран
Редизайн портала грузоперевозок "Автодиспетчер", www.avtodispetcher.ru/

Цель редизайна: фейслифт сайта, исправление ошибок выбора цветов, внедрение адаптивной верстки.

Текущая цветовая палитра сайта не устраивает:
* выбиралась изначально плохо (например, пара цветов #eef4f2 и #e5ecec сливается на TN матрице)
* дополнялась разработчиками (не дизайнером) по мере надобности "на глазок"

Пожелания:
* Предпочтение плоскому дизайну (flat design). 
* Сайт не презентационный, а ежедневный рабочий инструмент, поэтому предпочтительны спокойные деловые приглушенные цвета.
* Осознанный выбор цветов во всем habrahabr.ru/post/240693/ (статья не бесспорная, но показывает требуемый уровень проработки деталей)
* Хорошо читаемые широкораспространенные шрифты

Примеры страниц, которые нравятся:
* tinyurl.com/o2h3m3f чистенько, но простовато
* tinyurl.com/pmdgcl9 атмосферно, адаптивно, нравится подбор цветов
* userecho.com/ нравится подбор цветов (хотя есть общее ощущение что серовато), при простом контенте удачная компоновка оставляющая впечатление богатого бекграунда
* www.google.com/analytics/ боги
* и гугловские принципы моб.дизайна в целом: www.google.com/design/spe...

"Автодиспетчер" это нишевая доска объявлений, место встречи автомобильных грузоперевозчиков с их клиентами. У "Автодиспетчера" нет своего автопарка и он не осуществляет перевозки от своего лица. Основная роль "Автодиспетчер" это интернет-сервис. На сайте представлены в основном междугородние автоперевозки по РФ. Меньше международных. Много фур и коммерческих перевозок. Меньше работы для маленьких юрких "газелей", хотя и для них заказы иногда встречаются.
Тематика ограничивается автомобильными перевозками. Т.е. ж/д, водные и авиа перевозки к тематике не относятся.

Целевая аудитория:
* Перевозчики. Дальнобойщики, которые неделями колесят по стране, а в инет выходят со смартфона/ноутбука. Часто дальнобойщики поддерживают связь с домом, где жена мониторит подходящие грузы с домашнего компа.
* Диспетчера и логисты в коммерческих компаниях. Они ищут грузы и машины, заключают договора, загружают машины и отправляют грузы. Для них "Автодиспетчер" это ежедневный рабочий инструмент.
* Автолюбители. Вспомогательный сервис "расчет расстояний" часто используется автолюбителями для планирования маршрута.

Для участия в конкурсе предоставьте варианты двух страниц:
* поиск грузов (десктоп) tinyurl.com/oujyc8o
* расчет расстояний (планшет) tinyurl.com/n48etjl
Победитель конкурса рисует мобильную версию этих двух страниц и оформляет 15 внутренних страниц для планшета (в рамках бюджета призового фонда).

Макеты внутренних страниц (только для победителя конкурса, здесь перечислены для ознакомления):
* главная www.avtodispetcher.ru/
* авторынок: объявление tinyurl.com/only7dt
* авторынок: раздел tinyurl.com/qzkeoks
* транспорт: список tinyurl.com/qzwr7v9
* участники: список tinyurl.com/ohqv8qz
* личный кабинет: личные сообщения, список диалогов
* личный кабинет: личные сообщения, сообщения внутри диалога
* личный кабинет: мои рассылки
* личный кабинет: мой кошелек
* личный кабинет: мои телефоны
* ненадежные партнеры: список отзывов tinyurl.com/qfc7tfe
* расчет расстояний: результат расчета tinyurl.com/oy4wekn
* расчет расстояний: для вашего сайта tinyurl.com/qxvzy64
* форум: список тем tinyurl.com/k29k84n
* форум: страница одной темы с сообщениями tinyurl.com/nsz66pc

Логотип
* png tinyurl.com/pwfu7qf
* eps: tinyurl.com/nt2spbw

Схема трансформации макетов при изменении разрешения экрана (png): tinyurl.com/oj2gl4w

Разрешения экранов:
* телефоны: 320x480
* планшеты: 768x1024
* десктопы: 980x1280

Примечания к страницам:
* поиск грузов (десктоп) tinyurl.com/oujyc8o
* * первое объявление в списке может иметь (а может не иметь) цветовое выделение: tinyurl.com/o6crpk4
* * визуальные акценты в списке грузов по убыванию: маршрут, цена, тоннаж/объем/тип транспорта
* * примеры оформления списка у конкурентов (не очень удачные, но какие есть)
* * * tinyurl.com/oxdwwhx
* * * tinyurl.com/qdv8qfv
* * * tinyurl.com/nb5mgub
* * * tinyurl.com/o7l9gjm
* расчет расстояний (планшет) tinyurl.com/n48etjl
* * навигационное меню может быть скрыто/раскрыто. 
* * если меню раскрыто, то подсвечивается текущий пункт (показывет текущее положение пользователя на сайте)
* * в меню может быть много пунктов и все не поместятся в одну линию.
* * навигация должна быть достаточно просторна для управления прикосновениями

UPDATE 1: Наверняка вы работаете на профессиональном откалиброванном мониторе с хорошей цветопередачей. Пожалуйста, при выборе цветов помните, что многие наши пользователи имеют недорогие TN-матрицы на которых близкие оттенки легко сливаются.
Выплата вознаграждения через сервис Безопасная Сделка
Опубликован 05.02.2015 в 15:53 Последнее изменение: 15.02.2015 в 18:21

Конкурсные работы

  • Dmitry Kolosov  

    05.02.2015 | 15:59
    +
  • Ксения Кузьменко  

    05.02.2015 | 16:02
    +
  • Веб-студия SPBDIO  

    05.02.2015 | 16:17
    +
  • Максим Шевцов  

    05.02.2015 | 16:53 обновлено: 16.02 2015 | 14:34
    Здравствуйте. Жду комментариев по макету.
    • Добавлено 14.02.2015 в 14:20
      Редизайн портала грузоперевозок - фото 1
    • Добавлено 16.02.2015 в 14:24
      Редизайн портала грузоперевозок - фото 2
    • Добавлено 16.02.2015 в 14:34
      Редизайн портала грузоперевозок - фото 3
    • Илья iGuk   

      16.02.2015 | 10:35  

      Благодарю, Максим. Удачное решение с цветной полоской вдоль объявления. Группирует поля, оживляет и не добавляет шума. Нравится, как кодируется цветом ставка. Нравится выделение первого объявления. 
      А вот с серо-розово-коричневым фоном плохо. Вероятно, что с серым было бы еще хуже, но сейчас фон выглядит грязновато. И вторая проблема – если использовать эту страницу как шаблон, но как писать на таком фоне? Всегда использовать светлую подложку под текст?

      • Максим Шевцов   

        16.02.2015 | 14:34  

        Изменил цвет фона на белый. Немного перекомпоновал объявление для лучшего считывания в списке. Вопрос по структуре (не знаю пока всех нюансов сервиса) – как заказчик выбирает исполнителя? Исполнитель звонит по указанному в заявке телефону? А если сделать систему ставок? Это намного удобнее для заказчиков и исполнителей. Я бы еще добавил дату прибытия. Это информирует исполнителя о сроках доставки груза и дает возможность лучше спланировать путь, захватив где-то попутные грузы. По поводу поиска груза – почему бы не добавить возможность поиска не только по городу (как конечный пункт), но и по региону (если исполнитель направляется в этот регион, но ему не так важен город) и по километражу (например, я исполнитель, ищу заказ со своего города, мне не важно куда ехать, но не дальше 300 км, например)

  • Elena Silacheva  

    05.02.2015 | 16:57
    +
  • Антон Крупко  

    05.02.2015 | 17:34
    +
  • Кирилл Лапшин  

    05.02.2015 | 18:22
    +
  • Евгений Солнцев  

    05.02.2015 | 22:19 обновлено: 09.02 2015 | 16:19
    Принимайте, пожалуйста.
    1 версия при наведении на меню
    2 версия при поиске.
    Оставил цветовую гамму, лишь немного подкорректировав цвет. Водители люди консервативные, вряд ли любят резкие изменения, поэтому решил так.
    • Добавлено 07.02.2015 в 21:36
      Редизайн портала грузоперевозок - фото 4
    • Добавлено 07.02.2015 в 21:55
      Редизайн портала грузоперевозок - фото 5
    • Илья iGuk   

      09.02.2015 | 13:40  

      Евгений, спасибо за предоставленную работу. В таком виде не нравится – совсем серое и унылое впечатление. Цвета не могу сказать чтобы были приятны и приводили в восторг своим сочетанием. Так, логотип, почему-то остался прежнего цвета. Отступы кругом разные, бессистемные. Разные размеры шрифтов привносят свой вклад в хаос. Там где "не нашли нужный груз? ничего страшного" – не пойму, почему Вы выбрали для ссылки такой цвет, да и еще не выделили ссылку подчеркиванием. Хороший способ спрятать ссылку от посетителей :( Подвал с визуальным перекосом вправо. Почему-то лишился одной кнопки.

      В общем, не могу принять такую работу.

  • Елена Скворцова  

    05.02.2015 | 22:21
    +
  • Юрий Зинин  

    06.02.2015 | 00:29
    +
  • Сергей Иванов  

    06.02.2015 | 00:48 обновлено: 16.02 2015 | 00:03
    +
    • Добавлено 08.02.2015 в 06:46
      Редизайн портала грузоперевозок - фото 6
    • Добавлено 10.02.2015 в 02:28
      Редизайн портала грузоперевозок - фото 7
    • Добавлено 10.02.2015 в 02:28
      Редизайн портала грузоперевозок - фото 8
    • Добавлено 12.02.2015 в 16:08
      Редизайн портала грузоперевозок - фото 9
    • Добавлено 14.02.2015 в 16:03
      Редизайн портала грузоперевозок - фото 10
    • Добавлено 15.02.2015 в 23:20
      Редизайн портала грузоперевозок - фото 11
    • Добавлено 16.02.2015 в 00:03
      Редизайн портала грузоперевозок - фото 12
    • Сергей Иванов   

      08.02.2015 | 06:50  

      UPD. Я так понимаю, больших перестановок в логике работы не будет… В соответствии с этим путём представляю свой вариант.
      Таблица переработана в карточки с удобным расположением информации, на первом месте города и характеристики, на втором – остальная информация.
      Кнопки «Подробнее» для удобства ткнуть пальцем (и для соотв. аудитории).
      Слева две основные кнопки создания объявлений.
      Ниже форма авторизации и краткое пояснение плюсов регистрации.
      Форма поиска полностью переработана. При желании пользователь сможет свернуть её, чтобы она не мешала. Все псевдоссылки означают собой кнопки разворачивания списков или тому подобного.

      Спасибо, жду комментарии.

      • Илья iGuk   

        09.02.2015 | 13:31  

        Спасибо, Сергей. Этот вариант нравится намного больше, чем предыдущий. Тем не менее есть несколько проблем:
        1. Все пункты меню не помещаются (форум, участники + что-то на будущее?). Выделение пунктов меню иконками – это лишнее. Глаз читает 2 слова быстрее, чем интерпретирует иконку. Главную страницу можно вообще убрать – будет достаточно ссылки с логотипа.
        2. На месте где сейчас кнопки "добавить груз/транспорт" должен быть рекламный блок. Посмотрите на сайте www.avtodispetcher.ru/con... над личным кабинетом показывается блок директа.
        3. Вы анонсируете "фичи" личного кабинета под формой входа. Это, конечно, лучше чем просто форма входа, однако все еще уступает варианту показа неактивного личного кабинета. Смотрите, вот так сейчас выглядит личный кабинет для неавторизованного пользователя: dl.dropboxusercontent.com... А вот так после входа: dl.dropboxusercontent.com... В итоге получается однотипное отображение для всех категорий посетителей + анонсирование "фич" в личном кабинете.
        4. Оформление объявлений нравится. Оно стало намного приятнее и живее, чем в предыдущем варианте. Можно немного улучшить, отказавшись от очевидных заголовков "Откуда-Куда" (стрелочка наглядно показывает), "характеристики груза" и "тип транспортного средства" (последнее менее очевидно, но можно было дополнить список спереди словом "Подойдет: " и далее перечисление: в духе "подойдет: – тент; -боротовой; -будка;).

        Со списком объявлений может быть связан и такой прием дизайна, как выделение данных цветом/размером. Обратите внимание как грузопоиск (сайт из примеров) выделяет ставку. В его варианте удобно сканировать глазами список, выхватывая лишь важную информацию. Так, мысленно настроив себя на восприятие только зеленых данных, удобно оглядывать грузы только по ставкам. Было бы желательно привнести такое удобство и к нам. Для этого я привел в ТЗ ранжирование полей по важности – что самое важное, а что второстепенно.

        • Сергей Иванов   

          10.02.2015 | 02:27 обновлено 10.02.2015 | 02:30

          Про формулировки полей – боялся ошибиться с ЦА. 
          В остальном всё скорректировал. Баннеры, Личный кабинет. 
          Список объявлений в виде таблице также прилагаю. Постарался выверить золотую середину между мелкотой текста и высотой одной позиции. 
          Кстати, совсем забыл про баннер Директа внизу. Добавил на превью табличного представления.

          Не влезающие элементы главной навигации скрыл в [еще]-кнопке.
           
          + добавил выделение Ставок, быть может слишком топорно даже. И сделал чуть жирнее (в превью с таблицей) готовности те, когда груз готов _постоянно_.
          + общий вид при наведении на управляющие элементы.
           
          Жду комментарии, спасибо.

          • Илья iGuk   

            10.02.2015 | 17:13 обновлено 10.02.2015 | 17:23

            Спасибо, Сергей. 
             
            Вот этот вариант st.fl.ru/users/orderlogon... нравится больше – приятнее выглядят объявления. 
             
            Ваш текущий вариант подталкивает к еще одной идее – отказаться от кнопок "добавить груз/транспорт", т.к. они уже есть пунктами меню в личном кабинете. Ну или выделить их в личном кабинете (как-то избежав ложной ассоциации с подсветкой текущего пункта меню). 
            "Личный кабинет" желательно озаглавить более веско – текущее название блока почти сливается с пунктами меню личного кабинета. Если уйдут кнопки "добавить груз/транспорт", то заголовок вероятно будет вдвойне проситься на это место. Вход в личный кабинет можно не обособлять в отдельный блок (это и так у вас есть, подтверждаю что это нормально), а каким угодно способом подчеркивать единство с выше расположенным меню личного кабинета. 
            Элементы "входа в личный кабинет": "чужой компьютер" подчеркнут как javascript-активатор, хотя это просто label к чекбоксу. Желательно избегать ложных ассоциаций. "Забыли пароль" серым выглядит как недоступная ссылка (серый = метафора неактивности; желательно ссылки оформлять однотипно). Регистрацию не обязательно оформлять кнопкой (это на ваш выбор) – заинтересованные пользователи найдут и простую ссылку, если расположить ее в предсказуемом месте. 
             
            Шапку сайта вообще говоря прийдется делать повыше – верхний рекламный блок может достигать 90 пикселей по высоте (под медийный формат 600x90). 
             
            Насчет нижнего директа не беспокойтесь – он вставляется действительно тривиально. А вот вместо "загрузить еще" лучше отрисовать постраничный пейджинг. 
            Кнопки справа в подвале как-то диссонируют. Может быть получится их пригладить или скомпоновать подвал иначе? 
             
            Посмотрите, пожалуйста, работу Александра Горячева выше в конкурсе. У него хороший творческий подход к визуальной компоновке объявлений. Не призываю Вас слепо копировать чужие решения, но хочу обозначить, что в этом направлении еще можно улучшить ваш вариант. Так, например, номер объявления и дата публикации это минорные компоненты, которые в меньшей степени требуют внимания. Выделенное цветом первое объявление – смущает серый цвет страны/регионов на ярком фоне. Это место выглядит грязновато. 
             
            Напишите, пожалуйста, какая задумка связана с кнопкой (иконка как табличка?) под формой поиска? Вижу, что она идет из одной версии макета в другой, но не пойму ее роль. 

            На текущем сайте у большинства страниц есть h1-заголовок. Для страницы грузов это заголовок "свободные грузы". Это важная часть шаблона страницы. Пожалуйста, добавьте его. Его появление может оказать влияние и на оформление формы поиска.
             
            Отмечу сильные стороны вашего варианта: приятные цвета, скругления блоков, тени, hover эффекты, традиционная компоновка. Чуть позже еще гляну на TN-мониторе.

            • Илья iGuk   

              11.02.2015 | 13:10  

              Сергей, я посмотрел дизайн на мониторе с TN-матрицей – есть проблема: близкие оттенки сливаются. Эта проблема была и в старом дизайне (только на главной) – хотелось бы избавиться от неё в ходе редизайна и тем более не распространять её на весь сайт.

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

              • Сергей Иванов   

                12.02.2015 | 03:21  

                Спасибо, Илья. Учёл этот факт.
                Сделал общий вид контрастнее, перекомпоновал карточки объявлений. Помоему стало ещё читабельнее.
                Маленькие нововведения: окрашивание голубым цветом карточек текущего дня, в то время как карточки предыдущих дней становятся белыми.
                Дни отделяются соотв. заголовками дат.
                Активный красный цвет ссылок при наведении на синие текстовые ссылки.

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

                Планирую взяться за страницу «Расчет расстояний» в ближайшие часы. Спасибо.

                • Илья iGuk   

                  13.02.2015 | 15:29  

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

                  • Сергей Иванов   

                    14.02.2015 | 16:03  

                    Обновление.

                  • Сергей Иванов   

                    15.02.2015 | 23:20 обновлено 16.02.2015 | 00:09

                    Добавил Расчет расстояний для планшета. И вид меню. В меню основные разделы и вход в Личный кабинет.

                    Фильтр расчета расстояний предлагаю назвать Калькулятором.

                    На странице с фильтром представлены все те же блоки с переработкой:
                    - пример расчетов с двумя переключателями Из Москвы/В Москву;
                    - Вопросы и ответы для текста внизу.

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

                    • Илья iGuk   

                      16.02.2015 | 10:01  

                      Спасибо, Сергей. Личный кабинет внутри меню это свежая идея, я не думал ранее о таком. Логотип внутри меню точно не нужен – он и так виден при раскрытии меню.

                      • Сергей Иванов   

                        16.02.2015 | 22:25  

                        Спасибо, Илья.
                        В целом планшетная версия без «проблем»? Про логотип думал точно так же. Терзали сомнения. :)
                        Когда будет выбор исполнителя?

                      • Сергей Иванов   

                        16.02.2015 | 22:27  

                        Кстати, по поводу сторонних блоков (таких как «Не нашли своего направления») – позже можно будет продумать интересную подачу информации.

              • Сергей Иванов   

                12.02.2015 | 16:09  

                А вставить-то и забыл ))) Загрузил.

  • Дмитрий Зверев  

    06.02.2015 | 13:18 обновлено: 15.02 2015 | 13:02
    +
    • Добавлено 15.02.2015 в 12:58
      Редизайн портала грузоперевозок - фото 13
    • Добавлено 15.02.2015 в 13:02
      Редизайн портала грузоперевозок - фото 14
    • Илья iGuk   

      16.02.2015 | 10:38  

      Здравствуйте, Дмитрий. Полагаться, что поисковая форма и реклама + личный кабинет будут одной высоты нельзя. Вместо поисковой формы на других страницах в этом месте будет другой контент, который может быть и выше и ниже.

  • Vadim Sloikov  

    06.02.2015 | 13:32
    +
  • Денис Сарсер  

    06.02.2015 | 16:45
    +
  • Vitaly Shulyak  

    07.02.2015 | 12:44
    +
  • Иван Юрин  

    07.02.2015 | 16:55
    +
  • Фрилансер [Keiti_b]  

    09.02.2015 | 08:30
    +
  • Irina Zakharova  

    09.02.2015 | 13:23 обновлено: 12.02 2015 | 14:16
    Предлагаю свой вариант дизайна сайта. 
    Я поменяла местами ЛК и рекламный баннер. Так удобнее.
    Цветовая палитра как мне кажется наиболее подходит для этой тематики. 
    в меру серьезно, но не агрессивно. В хедере добавила картинку, она не берет
    на себя много внимания, но при этом связывает шапку. Если в меню будет больше пунктов чем сейчас, красную плашку можно сделать длиннее и ссылки прописать в 2 строки. Будет хорошо смотреться. 
    • Добавлено 12.02.2015 в 14:16
      Редизайн портала грузоперевозок - фото 15
    • Илья iGuk   

      10.02.2015 | 17:40  

      Ирина, спасибо за представленную работу.

      Есть что-то магическое в этих оттенках оранжевого и зеленого. Нравятся.

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

      Над личным кабинетом тоже предполагается рекламный блок (как сейчас на сайте www.avtodispetcher.ru/con... В личном кабинете желательно анонсировать его содержимое (как сейчас на сайте).

      Странице нужен заголовок. Текущее оформление "свободные грузы" намекает на связь с поисковой формой. Заголовок эти типовой элемент шаблона. Поисковая форма присутствует только на некоторых страницах. Заголовок должен быть универсальным.

      Оформление объявлений сейчас не нравится: темная плашка смещает визуальный акцент на неважные элементы (код, дата, ссылка). В ТЗ я описывал наиболее важные элементы объявления: маршрут, затем цена, затем тоннаж/объем/тип транспорта.

      Существенный недостаток вашего варианта – обилие визуальных шумов: рамочки, линии, ничего не значащие стрелочки в главном меню, лишние вертикальные черточки в нижнем меню. Дизайн не должен быть просто так. Он должен выделять важное, расставлять акценты. В идеале он должен быть прозрачным – внимание достается лишь контенту (то зачем люди приходят на сайт), хорошо сгруппированному и выразительно оформленному.

      • Irina Zakharova   

        10.02.2015 | 20:40  

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

        • Илья iGuk   

          11.02.2015 | 13:47  

          Спасибо, Ирина. Вы движетесь в правильном направлении.
          Возможно, что меню второго уровня удастся визуально облегчить, если убрать пунктирную рамочку – ведь текущий пункт и так обозначен цветом.
          В шапке может располагаться не только стиснутый блок контекста, но вместо него могут быть медийные баннеры 468x60, 600x90, 768x90. Они будут нормально выглядеть поверх фонового декора? Что будет при растягивании/сжатии страницы – не получится ли что контексту вообще не останется места кроме как налезать на фоновый декор?
          "Личный кабинет" и "Войти в кабинет" это заголовки блоков. А заголовок страницы (априори более весомый элемент) визуально меньше, и, похоже выполнен иным начертанием (теряет связь с другими заголовками).
          Оглядываясь на другие сайты-примеры вижу, что мало кто набирает тексты капсом. Наверное это не спроста. Если половина текстов набрана капсом, то визуально количество использованных начертаний удваивается, что привносит дополнительный вклад в шумы.
          И есть общая проблема (пока у всех работ в конкурсе) – близкие оттенки серого сливаются на недорогих TN-дисплеях.
          Оглядываясь на другие работы конкурсантов прихожу к выводу, что приятнее выглядят объявления не на сером фоне. Обилие серого все же угнетает :-/

          • Irina Zakharova   

            12.02.2015 | 14:19  

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

  • Денис Шуршилин  

    10.02.2015 | 12:11 обновлено: 16.02 2015 | 21:20
    Здравствуйте, Илья,

    Макет делал под минимальную ширину монитора заявленную в ТЗ – 980px.

    Макеты без рамки браузера
    dl.dropboxusercontent.com...
    dl.dropboxusercontent.com...

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

    Если концепция подходит – дайте знать – сделаю остальные страницы в рамках конкурса
    • Добавлено 16.02.2015 в 01:02
      Редизайн портала грузоперевозок - фото 16
    • Добавлено 16.02.2015 в 01:29
      Редизайн портала грузоперевозок - фото 17
    • Добавлено 16.02.2015 в 01:02
      Редизайн портала грузоперевозок - фото 18
    • Добавлено 16.02.2015 в 02:39
      Редизайн портала грузоперевозок - фото 19
    • Добавлено 16.02.2015 в 21:20
      Редизайн портала грузоперевозок - фото 20
    • Денис Шуршилин   

      16.02.2015 | 02:40  

      Добавил превью версии для планшета

      • Илья iGuk   

        16.02.2015 | 10:55  

        Спасибо, Денис. 
        Легкие градиенты придают лоск и в то же время дизайн не выходит за рамки "плоского", это нравится. Размещение рекламы во всю ширину – ок.
        Что будет если на какой-то странице не будет второго уровня меню? Как светлый первый уровень будет стыковаться с фоном контента?
        Странице обязательно нужен заголовок над поисковой формой.
        Серый фон хорош для группировки полей объявлений в единое целое. Но как как быть на других страницах, где не будет объявлений, а нужно будет, например, просто выводить текст?
        Выделение первого объявления нравится. У остальных объявлений вверхку используется совсем легкий оттенок – вероятно его не будет видно на TN-матрицах.
        Кажется, что-то не то с выравниванием "погрузка" и "город откуда" – они на близких но разных линиях. В целом компоновка объявления нравится, но надо куда-то добавить минорный элемент "номер объявления".

        • Денис Шуршилин   

          16.02.2015 | 20:59 обновлено 16.02.2015 | 21:01

          Вариант без меню второго уровня.
          Добавил номера объявления, даты публикаций, в строку далее можно внести еще какую-либо второстепеннуб информацию 
           
          Предложения по реализации текстовой страницы  
            
          dl.dropboxusercontent.com...  
          dl.dropboxusercontent.com...  
            
          Вариант с более ярким цветовым выделением блоков заказов  
          dl.dropboxusercontent.com...

        • Денис Шуршилин   

          16.02.2015 | 21:03  

          Странице обязательно нужен заголовок над поисковой формой\\\\ "Поиск свободных грузов" является заголовком страницы

          • Илья iGuk   

            16.02.2015 | 21:07  

            Заголовок страницы как универсальный элемент шаблона. Для текстовой страницы заголок "Минтранс хочет собрать…", для грузов "Свободные грузы" и т.п. Нужно однотипное оформление.

            • Денис Шуршилин   

              16.02.2015 | 21:17 обновлено 16.02.2015 | 21:18

              Если стремиться к идентичности заголовков текстовых страниц и таблиц, то как-то так 
              dl.dropboxusercontent.com...

              По остальным элементам есть какие-то замечания?

              • Илья iGuk   

                16.02.2015 | 21:25  

                Спасибо, основные решения понятны. Добавил ваши работы в список кандидатов.

  • Александр Першин  

    10.02.2015 | 14:22 обновлено: 12.02 2015 | 09:49
    Ответьте пожалуйста на вопрос. В рамках буджета конкурса победитель: доводит до ума две конкурсные страницы (одна десктоп и одна планшет) и делает мобильную их версию. После делает 15 внутренних страниц ТОЛЬКО для планшета? То есть для ПК и для мобильников он эти 15 страниц не делает? Почему спрашиваю – немного не привычный подход, от того слегка не умещается в сознании, и хочется уточнить. 

    И вот еще такой вопрос, как производится оплата? при выигрывании конкурса платится какая либо предоплата (если нет, то страшновато – объем приличный) или только после выполнения всех работ полная сумма? 
    • Добавлено 12.02.2015 в 09:49
      Редизайн портала грузоперевозок - фото 21
    • Добавлено 12.02.2015 в 09:49
      Редизайн портала грузоперевозок - фото 22
    • Добавлено 12.02.2015 в 09:49
      Редизайн портала грузоперевозок - фото 23
    • Илья iGuk   

      10.02.2015 | 14:51  

      Александр, да.

      Конкурс: 2 страницы – на них Вы показываете свое решение. Можете начать с одной страницы и после попадания в "кандидаты" представить вторую страницу. По этим двум страницам определяется финалист.

      Финалист рисует эти же 2 страницы для мобильной версии (по сути: шаблон мобильной страницы) и внутренние для планшета. Почему для планшета? Планшет сильнее ограничивает и поэтому требует более вдумчивой работы дизайнера. Десктопные страницы скорее всего нам будет легко самим достроить трансформировав шаблон (в дополнение к планшетному контенту появится левая колонка + опциально добавится пространство для контента). Поэтому не вижу смысла их рисовать – там будет на 95% то же самое что и в планшетной версии. 

      Мобильную версию 15 внутренних страниц планируем готовить самостоятельно. Если понадобятся к отрисовке доп.страницы – то уже в рамках отдельного бюджета.

      По оплате возможны варианты: оплата по частям (в любых разумных долях) или весь проект через безопасную сделку.

      • Александр Першин   

        10.02.2015 | 14:55  

        Спасибо, люблю оперативные фидбэки. Всё на своих местах. Будем пробовать

        • Александр Першин   

          12.02.2015 | 09:47 обновлено 12.02.2015 | 09:52

          Вот мое видение ПиСишной страницы. Я постарался свести к минимуму применение инфографики, чтобы была исключительно необходимая информация. Так как на мой взгляд иконки усложняют сайт (тем более, когда повторяются в каждом объявлении) и делают "карточку предложения" выше (пиксели по высоте), что в свою очередь является причиной либо малого количества объявлений на странице, либо к чрезмерно длинной странице. Вообще мне нравится в этом плане данный сайт фриланса – нормальный рабочий инструмент. В некоторой степени он был для меня примером в реализации некоторых удобных моментов. Например цена (Кегель и толщина Суммы и "неопределенного бюджета" а так же их соотношений) или приоритетность цены и маршрута. Цена выделена цветом. Маршрут размером и плашками. Плашки такого размера, что туда войдет длина любого города.  
          Вообще я старался предусмотреть ситуации, когда будет всё по максимуму: длинна населенных пунктов / количество типов ТС / меню (отдельно ниже).  
          Так же ввел элемент, когда маршрут построен в два конца. Например Хабаровск – Якутия – Хабаровск (третье объявление сверху) Там указана двойная стрелка между городами.  
          Кнопку перехода с объявления на полную карточку я не делал. Так как блок объявления – сам кнопка. При наведении он меняется в размере +2 пикселя с каждой стороны и в цвете. Вообще в цвете можно не выделять (ну например, если будет потребность в рекламном объявлении в верху и оно должно выделяться цветом всегда). Да и кнопку перехода можно сделать, если скажете. Если вообще мой вариант привлечет Ваше внимание ))) 

          Так, дальше. Шрифты.  
          Основная линейка для всего сайта – это Ариал. Мне кажется лучше нет (может конечно это что-то личное). За исключением меню. Для меню подобран кроссбраузерный сжатый шрифт PT Sans Narrow (регулярный и болдовый при наведении). Опять же выбор данного шрифта обусловлен двумя моментами: первое – уместить меню в планшет и в ПК и сохранить относительно крупный кегель и читаемость; второе – шрифт должен быть интернетадаптированным,для корректного отображения.  
          Версия для планшета на ней урезается не только яндекс директ и панель входа, но и два пункта меню первого уровня "Добавить груз", "Добавить транспорт", так как они дублируются в меню второго уровня в разделах "Груз" и "Транспорт" соответственно. Подменю в разделе "Груз" самое большое по ширине относительно других разделов, но как видно оно замечательно вмещается в формат экрана планшета. Так же в планшетной версии "обрезается" и подвал – уходит логотип, который призван выровнять подвал по ширине в ПиСишной версии сайта.  
          Вообще версию для планшета я не перепутал с тз. Это просто пример того, "как все замечательно входит и выходит". © 

          Ну и напоследок призыв о подписке к и-мэйл/смс-рассылках сделан специально в виде стикера и оттенен, чтобы визуально более акцентированно разбить конец зоны объявлений и начало яндекс-директа. Ну и как некий визуальный айстопер для привлечения внимания. 
           
          По идее всё написал, что хотел. Теперь можно пойти по спать – валюсь. Буду признателен за Ваш ответ

          • Илья iGuk   

            12.02.2015 | 19:17  

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

            Заголовок страницы "все грузы" расположен в необычном месте. Учитывая, что заголовок будет у каждой страницы, его логично размещать над формой, а не под. + визуально он сейчас не выглядит заголовком, имеет какую-то минорную роль. Название поисковой формы его перебивает.
            Иконки поиска/личного кабинета/найти могут быть лишними – глаз читает несколько слов быстрее, чем воспринимает иконку. Обилие прописных букв напрягает: зря кричат о себе надписи заголовков, пункты меню, города, текст в "не нашли подходящий груз".

            Компоновка грузов не нравится. Пожалуй, единственный плюс – что места хватит для любого города. Номера объявлений и дата публикации это однозначно минорные элементы, которые можно визуально "гасить". Отсутствие кнопки "подробнее" – это приемлемо, подтверждаю. Много дублирований подписей к полям "объем/масса", "вид", "загрузка" = дополнительный визуальный шум. Визуальный баланс объявления смещен влево – слева всё скученно, а справа есть свободное место (которое вероятно, будет тянуться при растягивании окна).

            Существенный недостаток – не нравится выбранный визуальный стиль. Множество рамочек, подложек, линий. Есть ощущение скученности, недостатка пространства. Пересмотрите, пожалуйста, примеры сайтов, которые мне понравились в ТЗ – грузопоиск, мойгруз, юзерэхо, гуглоаналитика. У них есть пространство и минимум визуальных шумов. Хорошие решения предложили некоторые конкурсанты: st.fl.ru/users/bifaliti/u... st.fl.ru/users/vladi91/up... – это пример желанного визуального стиля.

            Планшетная версия: посмотрите, пожалуйста, схему трансформации, которую я предлагаю: tinyurl.com/oj2gl4w главное меню схлопывается/расхлопывается. По аналогии вместо навигационного меню там может оказываться меню личного кабинета. Дело в том, что личный кабинет имеет сложную структуру и не может быть скрыт за одной иконкой. Когда человек вошел внутрь личного кабинета меню должно показывать его текущее положение в навигации.

          • Илья iGuk   

            12.02.2015 | 19:27  

            Дополнение. По планшетной версии удаление пунктов "добавить груз/транспорт" – ок, приемлемо.
            Насчет попытки вместить все пункты меню: и для первого и для второго уровня не стоит жертвовать читабельностью. Здесь в конкурсе предложили универсальное решение пункт "еще", под которым скрывается все что не поместилось. Для этого даже есть готовый адаптивный паттерн: codepen.io/bradfrost/full...

  • Владислав Греков  

    10.02.2015 | 17:43 обновлено: 16.02 2015 | 14:05
    • Добавлено 13.02.2015 в 16:29
      Редизайн портала грузоперевозок - фото 24
    • Добавлено 14.02.2015 в 13:27
      Редизайн портала грузоперевозок - фото 25
    • Добавлено 14.02.2015 в 13:27
      Редизайн портала грузоперевозок - фото 26
    • Добавлено 14.02.2015 в 13:27
      Редизайн портала грузоперевозок - фото 27
    • Добавлено 14.02.2015 в 13:27
      Редизайн портала грузоперевозок - фото 28
    • Добавлено 16.02.2015 в 14:05
      Редизайн портала грузоперевозок - фото 29
    • Добавлено 16.02.2015 в 14:05
      Редизайн портала грузоперевозок - фото 30
    • Илья iGuk   

      11.02.2015 | 13:17  

      Здравствуйте, Владислав. Спасибо за предоставленную работу. В целом выглядит приятно, но есть несколько недостатков. Подумайте, пожалуйста, как их устранить.

      1. В шапке сайта может быть баннер до 90 пикселей высотой (768x90 или 600x90). Как ведет себя шапка при этом? Просто тянется по высоте, центрируя логотип по вертикали?
      2. Странице обязательно нужен h1-заголовок. Не "поиск груза" логически связанный с формой, а независимый элемент, который будет повторяться на каждой странице. 
      3. Формат объявления нравится, выглядит приятно. Однако у груза может быть несколько подходящих типов машин: тент, бортовой, будка, рефрижератор и т.п. В вашем варианте не понятно как умещать этот список.
      4. Внизу страницы нужен постраничный пейджинг
      5. Есть проблемы с оттенками серого – на TN дисплеях они сливаются, в результате рушатся выстроенные визуальные блоки.

      • Владислав Греков   

        11.02.2015 | 14:02  

        Здравствуйте, Илья. Спасибо за комментарии – буду исправлять=) По-поводу шапки: Она будет тянуться по высоте, центрируя лого, так будет сбалансированей картинка.

        • Илья iGuk   

          11.02.2015 | 14:04  

          По шапке – ок

          • Владислав Греков   

            12.02.2015 | 11:24  

            Здравствуйте, Илья. Вот два варианта с разными фонами, h1 заголовок, постраничная навигация + переработаны формы заказов : на макете обозначены желтым и красным цветом (они разные).

            Спасибо

            • Илья iGuk   

              12.02.2015 | 18:14  

              Спасибо, Владислав. Последний 3-ий вариант очень удачно решает проблему серого фона и TN-матриц. Сегодня вечером еще проверю на старом мониторе, но заочно думаю, что будет нормально.
              Вторая сильная сторона этого варианта – компоновка объявления о грузе. В таком виде нравится (и желтый и красный). 
              В подвале тоже порядок, но надо добавить 3 кнопки счетчиков 88x31.
              Пожелание по цветам: умерить цвет главного меню и заголовка личного кабинета. Сейчас они выглядят чрезмерно яркими, на границе с определением "кислотные".
              В главном меню просьба также гармонизировать шрифты или их цвет – второй уровень выглядит совсем мелким рядом с крупными буквами первого уровня.
              Форма поиска не нравится – мелкие шрифты, элементы. Не понятно, почему она уже, чем грузы ниже. Также просьба в форме отображать те поля, которые сейчас есть на сайте – для "откуда/куда" простые текстовые поля без выбора стран, тип авто – множественный выбор (обязательно), расширенного поиска не будет, но можете опциально спрятать часть полей в расхлопывающийся блок "дополнительные параметры поиска".

              • Владислав Греков   

                12.02.2015 | 19:32  

                Спасибо, понял. Буду над этим работать

                • Илья iGuk   

                  13.02.2015 | 13:34  

                  Проверил 3 вариант на TN-мониторе – все видно хорошо.

                  • Владислав Греков   

                    13.02.2015 | 16:31  

                    Здравствуйте. Поработал над шрифтами и цветом шапки. Увеличил форму поиска + добавил в подвал кнопки счетчиков.

                    • Илья iGuk   

                      16.02.2015 | 10:58  

                      Спасибо, стало приятнее

                  • Владислав Греков   

                    14.02.2015 | 13:32  

                    Добрый день, Илья. Мои варианты с планшетной версией расчета расстояний: первый с горизонтальным подменю, второй с вертикальным + варианты с нажатым вызовом меню и нет.
                    Спасибо

                    • Илья iGuk   

                      16.02.2015 | 11:59  

                      Владислав, на фоне плохо читается текст :( Может быть подложку или светлый фон?

                      • Владислав Греков   

                        16.02.2015 | 14:09  

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

  • Игорь Подобин  

    11.02.2015 | 09:30
    +
  • Iuliana Maxim  

    15.02.2015 | 00:00
    +
  • Андрей Фёдоров  

    15.02.2015 | 12:47
    +
  • Даниил Гитерман  

    15.02.2015 | 18:44 обновлено: 16.02 2015 | 16:17
    • Добавлено 16.02.2015 в 12:16
      Редизайн портала грузоперевозок - фото 31
  • Дмитрий Пан  

    15.02.2015 | 20:12 обновлено: 16.02 2015 | 02:38
    Здравствуйте. Вот мой вариант.
    По задумке фильтр можно будет скрывать, нажав на глазик. Как выглядит это в свернутом состоянии – показано рис.2
    Так же предлагаю сделать меню фиксированным. Тоесть оно не будет прокручиваться вместе с остальным контентом.
    как это будет выглядит показано на Рис.3
    На Рис.4 просто вставил в монитор, чтоб прикинуть как будет смотреться....
    Некоторые иконки всегда можно будет поменять. Если хотите, могу сделать дизайн поярче, добавив другие цвета. 
    Также еще можно поиграть с блоками таблицы. Но концепция идеи впринципе понятна сейчас.
    ...там опечатался, но лень менять было уже ("метров квадратных" вместо кубических написал)
    • Добавлено 15.02.2015 в 20:12
      Редизайн портала грузоперевозок - фото 32
    • Добавлено 15.02.2015 в 20:12
      Редизайн портала грузоперевозок - фото 33
    • Добавлено 15.02.2015 в 20:12
      Редизайн портала грузоперевозок - фото 34
    • Добавлено 15.02.2015 в 20:12
      Редизайн портала грузоперевозок - фото 35
    • Добавлено 15.02.2015 в 23:11
      Редизайн портала грузоперевозок - фото 36
    • Александр Горячев   

      15.02.2015 | 20:54 обновлено 15.02.2015 | 21:01

      Ответ от заблокированного пользователя

      • Дмитрий Пан   

        15.02.2015 | 21:45 обновлено 15.02.2015 | 23:10

        Я вас понял) Но хотите верьте-хотите нет, а черпал я с гугл +. Цвета подбирал сам, к сожалению так сильно совпало... я не виноват что именно такое сочетание цветов подходит, не могу же я от него отказаться только из-за того, что вывыбрали такое же. Начерпал с ваших (тоесть конкурсантов) работ вариант оформления списка таблицы (сразу делал обычной таблицей)... 
        Вот и выходит, что совпадают у нас только сочетание 2-х цветов и изначальная идея оформления списка, и та переработана... а.. точно! – последние формы фильтра так же оформил.

        • Александр Горячев   

          15.02.2015 | 21:55  

          Ответ от заблокированного пользователя

          • Дмитрий Пан   

            15.02.2015 | 22:03  

            Ну... я в грязь не попадал) Написал как есть.

    • Дмитрий Пан   

      15.02.2015 | 23:13 обновлено 16.02.2015 | 01:52

      Дбавил еще вариант (рис. 5)

    • Илья iGuk   

      16.02.2015 | 10:24  

      Спасибо, Дмитрий.
      Как будет тянуться страница? На широкоформатных экранах растягивать объявление на 100% будет, вероятно, не красиво. Если ограничить максимальную ширину, то вправо будет сервый фон, а влево?
      По компоновке: рекламный блок должен быть НАД личным кабинетом, под личным кабинетом может быть еще один опциальный рекламный блок. В рекламном блоке может быть не только контекст, но и медийный баннер. Будет ли он хорошо выглядеть на таком "тяжелом" фоне?
      Цветовая палитра: тяжеловато выглядит левая колонка. Дело не в яркости цветов. Выберите хорошо сочетающиеся между собой цвета + так чтобы каждый из них был красивым – это будет хорошей базой. Первое объявление следует выделять более явно (выделение это платная услуга, объявление должно быть заметно). Фон объявлений подчеркивает границы объявления как блока. Это хорошо. Но как быть с другими страницами – прийдется писать черным по серому фону? Компоновка объявлений: в целом неплохо, но пиктограммы веса и объема какие-то бессмысленные. Группировка типа транспортного средства и номера объявления вместе порождают ложную ассоциацию с номерами объявлений в разделе "транспорт" (там тоже каждое объявление имеет номер, может сложиться неверное мнение, что этим грузам уже назначен конкретный перевозчик с определенным номером).
      Глазик для формы поиска это слишком лирично. Максимум – ссылка-активатор с подчеркиванием.

      • Дмитрий Пан   

        16.02.2015 | 20:04  

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

        • Илья iGuk   

          16.02.2015 | 20:46  

          Да, можно менять цвет логотипа как угодно.

          • Дмитрий Пан   

            16.02.2015 | 21:01  

            конкурс сегодня окончательно закачивается или будите продлевать?

            • Илья iGuk   

              16.02.2015 | 21:08  

              Дмитрий, думаю, что сегодня окончится.