Веб-дизайн — удалённая работа в Москве

Дизайн сайта. Сайт компании. Платформа: Laravel (сайт собирается не на сторонней платформе, а пишется). Количество страниц: 12. Содержание: _ - Наш сайт - Что нужно сделать? - Референсы - Формат работ - Пожелания и плюсы ===== — Наш сайт: У нас есть сайт для управления шлагбаумами многоквартирного дома. Сейчас дизайн в нём сделан на коленке и мы ищем того, кто оформил бы существующий сайт. Через этот сайт главный по дому может добавлять жильцов, пропуска, может просматривать камеры видеонаблюдения, смотреть статистику по проездам, управлять шлагбаумами и многое другое. Скрины существующего сайта прикреплю в первом файле. ===== — Что нужно сделать? В этой секции подробно перечисляю страницы сайта и отдельные элементы, которые нужно задизайнить. Для всех страниц есть скрины в первом файле. 1. Страница логина: Форма входа. Композицию страницы хотелось бы оставить похожей (форма входа по середине), но фон сделать украшенным. 2. Dashboard: Главная страница. На неё пользователь попадает после авторизации. Основной элемент страницы это сводка о проездах за сегодня (на скрине хорошо видно содержимое элемента). Состоит из четырёх элементов, являющихся ссылками на другие страницы сайта и календаря, для просмотра той же статистики за другие дни. - Допущено всего: тут указано число проездов за сегодня (ссылка на статистику) - По пропуску: те же проезды через шлагбаумы, но только те из них, что по пропуску (ссылка на статистику) - Отказано: отказы в открытии шлагбаума (ссылка на статистику) - Жильцов всего: число жильцов (ссылка на список жильцов) Для этой страницы, хотелось бы сделать неформальный дизайн — фоновые изображения, элементы страницы не обязательно расположены по сетке, а блоки информации не обязательно стандартной расцветки и форм. На странице есть и стандартные элементы. Плашки “добавить жильца” и “добавить пропуск” (они встречаются и на других страницах). Плашка с разряженными ключами (она есть ещё на странице ключей). Эта плашка показывается только если есть разряженные ключи (о ключах расскажу ниже на странице ключей) 3. Страница камер: Здесь главный по дому видит все свои камеры. Не в реальном времени, на плашках камер фотографии, но фотографии периодически обновляются, а сами плашки являются ссылкой на просмотр камеры в реальном времени (откроется отдельная вкладка на другом сайте с трансляцией с камеры). 4. Страница с таблицей и фильтром общая: Самый большой пункт. На сайте есть много индексных страниц с таблицами, в которых перечислены все элементы какой нибудь группы: - проезды через шлагбаум (время, фотографии проезда с камер, информация о жильце или о пропуске в каждой строке списка), - аналитика проездов (агрегирует проезды по жильцам - каждая строка это жилец с приложенной аналитикой), - пропуска (гостям или кому-нибудь можно выдать пропуск с ограниченным сроком действия), - объекты (если главный по дому управляет шлагбаумами в нескольких домах), - список жильцов, - список групп жильцов (главный по дому объединяет жильцов в группы для того чтобы делать рассылки по группам и другие действия сразу с несколькими жильцами), - список созданных сценариев автоматизации (как пользуются автоматизацией подробнее опишу ниже), - список действий на сайте (история изменений, созданий, удалений сущностей - у одного объекта может быть несколько главных по дому и на этой странице они видят списком свои и чужие действия на сайте) Сейчас все эти страницы реализованы однотипно: список в виде таблицы с пагинацией. И наверное нет повода менять эту часть дизайна — постраничные таблицы позволяют удобно взаимодействовать с бесконечными списками объектов, а информация в них хоть и расположена однотипно и занимает много места, но вся на виду и легко доступна. Если Вы знаете как оставить эти списки читаемыми и не реализовывать их как таблицы, такой дизайн нам интересен. В скриншотах покажу какая информация выводится в элементе списка в каждой таблице. Ещё для некоторых таблиц существуют фильтры, чтобы отбирать/искать нужные записи. Так например у жильцов можно провести поиск по имени и телефону, а в записях о проезде можно выбрать время или жильца. Сейчас этот фильтр реализован максимально неудобно и нуждается в переделке. Фильтр должен бить реализован так, чтобы он мог быть и скрытым и открытым. Мы не придумали хорошего решения: может его реализовать как вертикальную колонку с прокруткой справа от таблицы, но можно ли им будет пользоваться при широких таблицах? Как будто его придется рисовать поверх таблицы и в открытом виде он будет мешать ей пользоваться. Или сами таблицы нужно реализовывать так, чтобы они не были слишком широкими, но как тогда отобразить сразу десять-пятнадцать результатов на странице? Возможность за один взгляд без прокрутки страницы увидеть десяток результатов крайне ценна. Инпуты нужные для фильтров оставлю в виде скринов. 5. Форма создания/редактирования общая: Также как и с таблицами, на сайте есть много однотипных форм создания/редактирования. Их скриншоты оставлю в файле. Там же можно увидеть все необходимые инпуты и кнопки для форм. 6. Форма создания/редактирования для жильца: У сущности жильца довольно много информации. Пока она организована в виде нескольких форм на одной странице (см. скрин). При нажатии на “ссылки” создать Телефоны, Ключи или Гос. номера раскрывается форма на той же странице. В разделе Права доступа есть особенная форма появляющаяся при выборе пункта Настроить график доступа. Раздел история изменений может раскрываться и показывает до десяти последних изменений. Тут описал не тз, а то, что реализовано. 7. Страница автоматизации: Автоматизация это раздел в котором главные по дому могут добавлять сценарии автоматизации - при срабатывании выбранных условий автоматически происходят выбранные события. Например при проезде через шлагбаум больше трёх раз добавить жильца в группу “часто проезжающие”. 8. Страница шлагбаумов: На этой странице перечислены все шлагбаумы, доступные главному по дому. Их наверно тоже можно было бы организовать списком, но каждая из них является формой и для простоты выделена в отдельную плашку. Все шлагбаумы можно переименовывать, некоторые можно блокировать в открытом положении. 9. Страница ключей: Ключи это брелки-пульты для открытия шлагбаума (но возможны и другие реализации ключей). У каждого из них есть номер. В начале они добавляются систему, а потом привязываются к жильцу. Если ключ добавлен в систему, но не привязан к жильцу, то ключом нельзя воспользоваться так как система не знает от какого жильца приходит запрос на открытие шлагбаума. Эта страница отличается от простой индексной страницы тем, что на ней есть плашка с режимом обучения — режим автоматического добавления ключей в систему - если включен режим обучения на шлагбауме и на него приходит сигнал ключа, то ключ автоматически добавляется в систему. Отличается тем, что ключи бывают просто добавлены в систему, а бывают закреплёнными за жильцами и для удобства поиска сделал две разные таблицы (хотя наверно это не лучшее решение и можно было бы сделать два таба и переключатся между ними). Ещё есть плашка с информацией, о том что такое ключи, как ими пользоваться. Есть целая инструкция, но на сайт она пока не добавлена. Может можно было сделать иконку “информация” и по нажатию на неё открывалось окно с разъяснением по функционалу страницы. Может такие иконки можно было бы добавить потом на каждую страницу. 10. Страница профиля Профиль главного по дому. Сейчас тут три формы, но профиль может расширяться. Сейчас в профиле не указан логин, нужно указать. Сам хедер страницы (с кнопками профиль и выйти) тоже может быть переделан или даже перенесён. А кнопки “меню” не будет (сейчас она скрывает боковое меню). 11. Импорт списка жильцов Страницы и формы для импорта жильцов в систему из excel файла. - Страницы 404 и 500: Ещё две страницы которые хотелось бы сделать нарядными (как страницы логина и Dashboard). На странице 404 текст “страница не найдена”. На странице 500 тайтл-текст “Ошибка на стороне сервера”, текст “Мы уже знаем об ошибке и работаем над её исправлением” и ссылка на главную страницу. Примера этих страниц нет на сайте. - Модальное окно: Окно всплывающее поверх экрана, например для подтверждения удаления пропуска. (есть пример в файле) - Добавить жильца/пропуск/рассылку/сценарий автоматизации Плашка с добавлением сущности. Сейчас она реализована так что если у главного по дому только один дом (которым он управляет), то эта кнопка отображается без подпунктов. Если у главного по дому несколько объектов, то в плашке ссылками отображены подпункты. Это сделано для того, чтобы сократить количество кликов - можно сразу кликнуть на объект для которого создаётся сущность. - Быстрый просмотр статистики: На странице статистики есть режим Быстрого просмотра. Страница переключает страницу так, что логи отображаются с большими фотографиями. - Страница экспорта статистики: Показывается после запроса на экспорт логов. - Страница списка групп жильцов: Порядок элементов на этой странице можно менять перетаскивая курсором. Это определяет порядок сортировки групп жильцов. - Страница информации: Контакты для связи, информация по шлагбаумам. ===== — Референсы: У нас уже есть два полностью рабочих сайта со своим дизайном, мобильное приложение и логотип. Хотелось бы чтобы сайт рифмовался с существующими проектами, но не повторял их, тк дизайн там слабый, резкий, логотип промышленный. Скрины закрытого сайта приложу во втором файле. Второй сайт открытый: https://intelpark.ru. Открытый сайт это продающая брошура — её рубленный контрастный стиль не должен быть повторён. Закрытый сайт тоже не самый изящный. Пробовал сам набросать более лёгкий и изящный дизайн (прикрепляю в третьем файле). Но там есть несовпадения по цвету и не решены многие проблемы. Например, куда девать ссылки на телеграм и сторы — их цветные иконки плохо сочетаются с фоном (тем более если он будет рыже-красный). Если сделать для них чёрную подложку, то она плохо вяжется с остальными элементами сайта. Белые буквы не очень хорошо читаются на жёлтом фоне, но если сделать фон рыже-красным, то он уже и не такой лёгкий. Кроме того получившийся дизайн достаточно проходной и безликий, что конечно не плохо для рутинного интерфейса, но хочется добавить продуманного относительно уникального оформления, которое при этом не перетягивало бы на себя внимание. На сайте есть много однотипных элементов, например кнопки “создать”, “изменить”, “удалить”. Хотелось бы чтобы у интерфейса был неброский цветовой код и роль кнопки или любого другого стандартного элемента можно было понять по его цвету/подсветке/внешнему цвету. ===== — Формат работ: Если понадобятся разъяснения по тому как сайтом пользуются и другим вопросам, отвечу в любое время с десяти утра до семи вечера в будни. Могу как переписываться, так и созвониться. Возможен ли следующий формат работ? На первой итерации Вы показываете свои референсы и наброски, предлагаете три-пять вариантов (до того как начнётся проработка), я высказываюсь по каждому из вариантов, что мне в них нравится/не нравится или просто выбираю один из них. На следующих итерациях вы дорабатываете один вариант периодически показывая процессники. Здорово будет обсудить ваше видение сайта, если Вы думаете, что его можно сделать более эргономичным (пользователи инертны и будут дезориентированы если функционал переедет с одной страницы на другую, но если предложения по перепланировке будут дельные, можно будет их принять). Например элементы главной страницы - их может быть и больше, если Вам кажется что это было бы уместным добавить на эту страницу ещё что-то, сделать из неё меню — это возможно. Если Вам кажется что какие-то названия разделов не очевидно обозначают содержимое их можно менять. Вообще многое можно поменять. Кнопки в таблице реализованы как текстовые ссылки, можно их и по другому реализовать, как иконки например. Если Вы знаете как сделать мобильное приложение, в котором будет весь тот же функционал в удобоваримом виде (данные таблиц, фильтры и тд), я смогу согласовать расходы на дизайн мобильной версии со своим начальством. Для элементов интерфейса типа кнопок и инпутов понадобится отрисовать :hover :active и :focus состояния. ===== — Пожелания и плюсы: Если Вы умеете делать анимации и картинки, мы бы могли заказать у Вас анимированные лоудеры и разнообразить наполнение сайта фоновыми картинками. Если не умеете, не беда. На нашем сайте возможно появление новых разделов. Если мы сможем заказывать будущие доработки сайта у Вас, это будет здорово.