Найти тему

Дизайн сайта и подготовка к разработке

Оглавление

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

Дизайн в Figma

Делаем дизайн для больших проектов, с публичной частью, личными кабинетами и админ. панелью. Макеты всех страниц в 3-5 разрешениях, собираем на autolayout и компонентах с использованием переменных в Figma.
Систематизируем и автоматизируем, что возможно. Стремимся к порядку во всём.

Макеты всех страниц в 5 разрешениях в Figma для сервиса онлайн-терапии.
Макеты всех страниц в 5 разрешениях в Figma для сервиса онлайн-терапии.

Типовая структура проекта в Figma

  • Дизайн страниц (по ролям)
  • Дизайн email уведомлений
  • ACL политики (права доступа)
  • Типографика
  • Правила адаптивности
  • Цвета (палитры)
  • UI-kit
Пример структуры проекта в Figma
Пример структуры проекта в Figma

Дизайн-концепция

Делаем макеты основных страниц для демонстрации. Учтём требования, тренды в UI UX и решения, проверенные на практике.

Пример стартовой страницы личного кабинета сотрудника в корпоративном портале.
Пример стартовой страницы личного кабинета сотрудника в корпоративном портале.

Дизайн внутренних страниц

Делаем дизайн личного кабинета пользователя (клиент, партнёр, сотрудник, модератор, админ и т.д.). Учтитываем возможные сценарии пользователя, чтобы не было вопросов на разработке.

Пример дизайна стартовой страницы в личном кабинете, для сервиса онлайн-терапии
Пример дизайна стартовой страницы в личном кабинете, для сервиса онлайн-терапии

UI-kit и компоненты

В каждом проекте разрабатываем подробный UI-kit, чтобы у разработки не было вопросов, как должен вести себя интерфейс в разных ситуациях.

Пример UI-kit для сервиса онлайн-терапии
Пример UI-kit для сервиса онлайн-терапии

Цветовые палитры

Делаем контекстные палитры с учётом межтональной контрастности для всех UI элементов проекта на основе логотипа или фирменного стиля.

Пример цветовых палитр с расчётом точек контраста.
Пример цветовых палитр с расчётом точек контраста.

Типографика в проекте

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

Используем бесплатные шрифты от Google с поддержкой CDN.
Используем бесплатные шрифты от Google с поддержкой CDN.

Дизайн дашбордов

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

Примеры стартовых страниц личного кабинета из разных проектов.
Примеры стартовых страниц личного кабинета из разных проектов.

Дизайн навигации

Проектируем путь пользователя и оптимальную навигацию в приложении. Оптимизируем путь до целевого действия пользователя и стараемся сделать интуитивную навигацию.

Примеры навигационных элементов в UI
Примеры навигационных элементов в UI

Дизайн профиля пользователя

Сделаем дизайн просмотра и редактирования профиля пользователя для разных ролей: клиентов, партнёров и сотрудников, с учётом их прав доступа.

UI-элементы для профиля пользователя
UI-элементы для профиля пользователя

Дизайн элементов статистики

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

Примеры визуализации данных в UI
Примеры визуализации данных в UI

Дизайн уведомлений

Также делаем дизайн системных уведомлений, ошибок, подсказок и email писем пользователям. Составляем тексты уведомлений с учётом Tone of Voice компании.

Примеры коммуникации с пользователем через e-mail уведомления
Примеры коммуникации с пользователем через e-mail уведомления

Дизайн табличных данных

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

Представление сложных данных в удобном виде в веб-приложениях
Представление сложных данных в удобном виде в веб-приложениях

Дизайн мобильной версии

Делаем макеты для 3-5 размерах экранов, без потери функционала с понятной навигацией, в общей дизайн-концепции.

Примеры макетов из проекта сервиса автопутешествий по России
Примеры макетов из проекта сервиса автопутешествий по России

Порядок в дизайне

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

Пример использования переменных в Figma для систематизации дизайн-проекта
Пример использования переменных в Figma для систематизации дизайн-проекта

Делаем тестовое задание

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

Дизайн-концепция для оператора фиксальных данных
Дизайн-концепция для оператора фиксальных данных

Системный подход к дизайну

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

Пример интерфейса образовательной платформы
Пример интерфейса образовательной платформы

Нужен дизайн интерфейса?

Опишите задачу в свободной форме, в течение часа мы отправим стоимость дизайна. Пишите, мы открыты интересным проектам.

mail@cron.design

telegram: @сrondesign

Разработка интерфейса пользователя и UI UX дизайн сайтов