Дизайн мобильного приложения и веб-версии для компании Fulled

Старый дизайн ПК

Поиск стиля

Клиент чётко обозначил — ищем что-то похожее на ivi или okko. Значит фиолетовые цвета и похожие акценты.

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

Вставки в рабочих столах

В экране с рабочими столами была проблема — их сложно отличить. 15 одинаковых плиток и среди них нужно найти тот, который нужен сейчас — такое себе удовольствие.

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

Самое простое, что пришло в голову — номера.

Fulled, экран приложения с рабочими столами, 1 версия
Номера лекций

Но потом пришла идея добавить иконки для каждого рабочего стола. Я думал это будет круто. Лекция по биологии — иконка молекулы, математика — иконка калькулятора. Задумано — сделано.

Fulled, экран приложения с рабочими столами, 2 версия
Иконки

Но вылезла пара вопросов. Кто будет загружать и подбирать иконки? Что, если лекций по математике будет 10? В них снова можно потеряться.

В итоге пришёл к начальному варианту с цифрами.

Fulled, экран приложения с рабочими столами, 3 версия
Первоначальный вариант

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

Страница настроек

Со страницей настроек пришлось повозится 🙂 Изначально она выглядела вот так.

Страница настроек старой версии дизайна ПК, fulled
Страница настроек

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

Если мы знаем заранее, в каком размере должен быть дорожный знак — зачем нам бегунки? Мы же можем ввести точные значения ширины и высоты.

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

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

Первые версии мне не нравились. Я нащупывал стиль.

В этих вариантах не было баланса. Лишь с последующими версиями начало приходить понимание как выстроить его.

Здесь рушится миф начинающих дизайнеров о том, что опытный дизайнер садится и за раз делает конфетку. Нет, не за раз.

Последующие версии

В предпоследней версии все элементы встали как надо, но что-то не давало мне покоя.

Страница настроек в новой версии дизайна ПК, fulled

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

Дизайн мобильного приложения  и веб-версии для компании Fulled 22

Меню

Изначально шапка была разработана с минимальным количеством элементов: ссылка на скачивание, профиль и иконка меню.

Меню было разработано всплывающим окном.

Дизайн мобильного приложения  и веб-версии для компании Fulled 23
Меню

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

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

Если это будет повторяться часто — пользователь устанет. Поэтому принял решение вытащить навигацию в шапку, а скачивание и профиль сократить до иконок.

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

Дизайн мобильного приложения  и веб-версии для компании Fulled 24

Скрытие и полноэкранность виджетов

У виджетов была пара особенностей — их можно было показывать/скрывать и раскрывать/скрывать на весь экран.

Это нужно было показать в интерфейсе. Первый вариант был такой. Кнопки были мелкими и неприметными.

Дизайн мобильного приложения  и веб-версии для компании Fulled 25

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

Дизайн мобильного приложения  и веб-версии для компании Fulled 26

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

Дизайн мобильного приложения  и веб-версии для компании Fulled 27

Хочешь такой же результат?
Имя
Контакт для связи
Подробнее о проекте

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

Вопрос-ответ

Работаете с NDA?

Да, работаю с договором NDA и не выкладываю такие проекты в портфолио и в соц.сетях. Если вы планируете подписывать со мной NDA, нужно быть готовым к повышению стоимости проекта.

Вы отвечаете за сроки?

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

Работаете по договору?

Да, я зарегистрирован как самозанятый. Оплата может быть переводом на карту или по счету. Формат работы с самозанятым практически не отличается от работы с ИП. Составляем договор, пишем техническое задание, в договоре указываю штрафы за срыв сроков.

Какие этапы разработки сайта?

  1. Знакомство с задачей, ЦА и целью сайта.
  2. Заключение договора
  3. Предоплата 50%
  4. Изучение конкурентов, сильных и слабых мест.
  5. Создание структуры сайта
  6. Написание текстов
  7. Создание прототипа
  8. Создание дизайна
  9. Вёрстка сайта
  10. Создание админ. панели сайта
  11. Постоплата 50%
  12. Предоставление доступов и исходных материалов

Сможем ли мы самостоятельно редактировать сайт?

Да, сможете. В процессе разработки сайту будет добавлена возможно редактирования текста, изображений, блоков.

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

Нужно ли платить за сайт ежемесячно?

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

Нужно будет приобрести хостинг и домен. Хостинг — место хранения сайта в интернете. Домен — красивое название сайта. В среднем стоимость домена — 250 рублей в год, хостинга — 1800 рублей в год.

Если вы заказали разработку сайта на Тильде, вместо хостинга нужно будет оплачивать аккаунт в Тильде. Стоимость ежемесячной платы от 500 до 1200 в зависимостей от требования проекта.

Работаете по предоплате?

Размер предоплаты — 30−50%.

Можем договориться об разделении разработки на этапы. Каждый этап делится на предоплату и постоплату.

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

Вы создаете сайты на конструкторе?

Я работаю с конструктором Тильда. Работаю в основном в zero-блоке, он позволяет создать уникальный дизайн для каждого блока. Для большинства лендингов и корпоративных сайтов сайт на конструкторе более экономный и быстрый вариант.

Какие способы оплаты?

Qiwi, Яндекс деньги, Paypal, перевод на карту банка, перевод на юр. лицо, безопасные сделки через сторонние сервисы.

Вы продвигаете сайт после создания?

Я не занимаюсь продвижением. После создания сайта передаю клиента на продвижение профессионалам в области.

За какой срок выполняется создание сайта?

Срок выполнения работ зависит от объема и сложности задачи. В среднем — 14 дней. Крупные порталы могут создаваться 6 месяцев, а одностраничный сайт может быть готов уже спустя 10 дней.