Общая информация
● Название проекта: Редизайн сайта itcoder.ca
● Тип проекта: Личный сайт разработчика (портфолио, блог, контактная информация).
● Текущий сайт: https://itcoder.ca (на момент запроса — минималистичный React-проект с базовым дизайном).
● Цель редизайна: Обновить визуальный стиль сайта, сделать его современным, профессиональным и удобным для пользователей, подчеркнуть тематику программирования в различных сферах.
● Формат предоставления дизайна: Все макеты должны быть предоставлены в Figma (слои, компоненты, стили должны быть организованы и подписаны для передачи разработчику).
2. Описание текущего состояния
● Технологии: Сайт построен на ReactJS с использованием Material-UI для компонентов
● Структура:
○ Шапка (Header): Логотип, навигация (вкладки: Home, Projects, About), кнопки Login/Logout.
○ Основной контент: Страницы Home, Projects, About, Login
○ Футер (Footer): Базовая информация (контакты, копирайт).
○ Проблемы:
■ Дизайн выглядит устаревшим и слишком простым.
■ Логотип плохо интегрирован
■ Отсутствие акцентов и визуальной иерархии.
■ Навигация (вкладки) не выделяется, UX требует улучшений.
3. Цели и задачи редизайна
● Основная цель: Создать современный, профессиональный и удобный дизайн, который подчеркивает мою специализацию как разработчика (фокус на IT и кодинг). в формате Lending
● Задачи:
1. Обновить цветовую палитру, чтобы она соответствовала технологической тематике.
2. Улучшить интеграцию логотипа (убрать или адаптировать фон, добавить акценты).
3. Переработать шапку, навигацию и футер для лучшего UX.
4. Требования к дизайну
4.1. Цветовая палитра
Используйте следующую цветовую схему (основана на предыдущих обсуждениях):
● Основной цвет (фон шапки, футера, акценты): Темно-синий #1E3A8A.
● Акцентный цвет (кнопки, ссылки, индикатор вкладок): Оранжевый #F97316.
● Фон контента: Белый #FFFFFF.
● Текст:
○ На темном фоне: Белый #FFFFFF.
○ На светлом фоне: Темно-синий #1E3A8A.
● Дополнительно: Это то что бы мне хотелось, но возможно у Вас как у дизайнера будут другие предложения
4.2. Логотип
○ У меня нет жестких требований к логотипу, но хотелось бы чтобы он соответствовал текущему дизайну
○ Соответствовал тематике сайта
5. Требования к макетам в Figma
Хотелось бы чтобы в дизайне Figma были применена компонентная база Material UI так как планируется разработка сайта именно на этой компонентной базе