Morave Studio - Дизайн-студия

Студия дизайна, ориентированная на людей

Прокрутите, чтобы открыть наш мир

Создаем конкурентоспособный цифровой опыт

Внутри Morave Studio

Morave Studio — это дизайн-студия, создающая бренды, веб-сайты и цифровые продукты, которые превращают смелые идеи в дизайн, который имеет значение.

Посмотреть проекты

Кто мы

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

Наше обещание простое: направлять вас уверенной, заботливой рукой и превращать ваши идеи, большие или малые, в бренды, веб-сайты и опыт, который действительно имеет значение.

Узнать больше

Что мы делаем

01

Стратегия и дизайн продукта

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

02

Дизайн приложений и веб-сайтов

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

03

Стратегия бренда и дизайн идентичности

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

Слова наших клиентов

"Команда Morave Studio проявила себя превосходно и сыграла ключевую роль в нашем путешествии по UI/UX. Они бросают вызов нашим мыслям в лучшую сторону и помогли нам достичь выдающихся результатов. Я не могу рекомендовать их достаточно высоко."

Имя Клиента Должность, Компания

"Работа с Morave Studio была по-настоящему выдающимся опытом. Их команда сочетает в себе редкую комбинацию креативности, технического мастерства и духа сотрудничества. Morave встретил нас именно там, где мы были, — они внимательно слушали, понимали стратегические цели и переводили это направление в четкий, убедительный визуальный дизайн."

Имя Клиента Должность, Компания

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

Имя Клиента Должность, Компания

Часто задаваемые вопросы

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

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

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

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

Каждый проект начинается с сессии открытия для согласования ваших целей. Оттуда мы проходим через две ключевые фазы: UX Discovery & Design, где мы фокусируемся на исследованиях, пользовательских потоках и каркасах для создания интуитивного опыта, и UI Discovery & Design, где мы воплощаем ваш бренд в жизнь через отполированные, визуально привлекательные интерфейсы.

Сроки зависят от объема, но большинство проектов по брендингу занимают примерно 6-8 недель, а веб-сайты или приложения обычно занимают 8-12 недель от старта до передачи в разработку. Мы всегда предоставляем временную шкалу заранее, чтобы обеспечить ясность и структуру.

Свяжитесь с нами

Расскажите нам о своем проекте. Давайте сотрудничать.

+7 (900) 123-45-67 Написать нам
/* Reset & Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #000; --secondary-color: #fff; --text-color: #1a1a1a; --text-light: #666; --bg-light: #fafafa; --border-color: #e0e0e0; --transition: all 0.3s ease; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-color); line-height: 1.6; overflow-x: hidden; background-color: var(--secondary-color); } .container { max-width: 1400px; margin: 0 auto; padding: 0 40px; } /* Navigation */ .navbar { position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); z-index: 1000; padding: 20px 0; border-bottom: 1px solid var(--border-color); } .nav-wrapper { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 20px; font-weight: 600; color: var(--primary-color); text-decoration: none; letter-spacing: -0.5px; } .nav-menu { display: flex; gap: 40px; align-items: center; } .nav-link { color: var(--text-color); text-decoration: none; font-size: 15px; font-weight: 400; transition: var(--transition); position: relative; } .nav-link:hover { color: var(--primary-color); } .nav-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px; background: var(--primary-color); transition: var(--transition); } .nav-link:hover::after { width: 100%; } .nav-link.active { color: var(--primary-color); } .nav-link.active::after { width: 100%; } .menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; } .menu-toggle span { width: 25px; height: 2px; background: var(--primary-color); transition: var(--transition); } /* Hero Section */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; padding: 120px 40px 80px; text-align: center; } .hero-content { max-width: 1000px; z-index: 2; } .hero-title { font-size: clamp(48px, 8vw, 120px); font-weight: 300; line-height: 1.1; margin-bottom: 30px; letter-spacing: -2px; } .title-line { display: block; opacity: 0; animation: fadeInUp 0.8s ease forwards; } .title-line:nth-child(2) { animation-delay: 0.2s; } .hero-subtitle { font-size: 18px; color: var(--text-light); margin-bottom: 50px; font-weight: 400; opacity: 0; animation: fadeIn 1s ease 0.4s forwards; } .btn-showreel { background: var(--primary-color); color: var(--secondary-color); border: none; padding: 15px 40px; font-size: 16px; font-weight: 500; cursor: pointer; transition: var(--transition); opacity: 0; animation: fadeIn 1s ease 0.6s forwards; } .btn-showreel:hover { background: #333; transform: translateY(-2px); } .hero-time { position: absolute; bottom: 40px; right: 40px; font-size: 14px; color: var(--text-light); font-variant-numeric: tabular-nums; } .scroll-indicator { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); } .scroll-line { width: 1px; height: 40px; background: var(--text-light); animation: scrollLine 2s ease infinite; } @keyframes fadeIn { to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollLine { 0%, 100% { opacity: 0.3; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.5); } } /* About Intro */ .about-intro { padding: 120px 0; background: var(--bg-light); } .about-intro-content { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .about-intro-content h2 { font-size: clamp(32px, 5vw, 56px); font-weight: 300; line-height: 1.2; letter-spacing: -1px; } .about-intro-text h3 { font-size: 24px; font-weight: 500; margin-bottom: 20px; } .about-intro-text p { font-size: 18px; line-height: 1.8; color: var(--text-light); margin-bottom: 30px; } /* Section Styles */ .section-title { font-size: clamp(32px, 5vw, 56px); font-weight: 300; line-height: 1.2; letter-spacing: -1px; margin-bottom: 20px; } .section-description { font-size: 18px; color: var(--text-light); line-height: 1.8; margin-bottom: 40px; max-width: 600px; } .section-header { margin-bottom: 80px; } /* Buttons & Links */ .btn-link { display: inline-block; color: var(--primary-color); text-decoration: none; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--primary-color); padding-bottom: 5px; transition: var(--transition); } .btn-link:hover { opacity: 0.7; } /* Featured Work */ .featured-work { padding: 120px 0; } .work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; } .work-item { opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease forwards; } .work-item:nth-child(1) { animation-delay: 0.1s; } .work-item:nth-child(2) { animation-delay: 0.2s; } .work-item:nth-child(3) { animation-delay: 0.3s; } .work-item:nth-child(4) { animation-delay: 0.4s; } .work-image { aspect-ratio: 16/10; margin-bottom: 30px; overflow: hidden; background: var(--bg-light); } .work-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%); display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 18px; } .work-number { font-size: 14px; font-weight: 500; color: var(--text-light); margin-bottom: 15px; letter-spacing: 1px; } .work-title { font-size: 32px; font-weight: 400; margin-bottom: 15px; letter-spacing: -0.5px; } .work-description { font-size: 18px; color: var(--text-light); margin-bottom: 20px; line-height: 1.6; } .work-tags { display: flex; gap: 15px; flex-wrap: wrap; } .tag { font-size: 14px; padding: 5px 15px; background: var(--bg-light); border-radius: 20px; color: var(--text-color); } /* Who We Are */ .who-we-are { padding: 120px 0; background: var(--bg-light); } .who-we-are-content { max-width: 900px; margin: 0 auto; } .who-we-are-content .section-title { margin-bottom: 50px; } .who-we-are-text p { font-size: 20px; line-height: 1.8; color: var(--text-light); margin-bottom: 30px; } .who-we-are-text .btn-link { margin-top: 20px; } /* Services */ .services { padding: 120px 0; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; } .service-item { opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease forwards; } .service-item:nth-child(1) { animation-delay: 0.1s; } .service-item:nth-child(2) { animation-delay: 0.2s; } .service-item:nth-child(3) { animation-delay: 0.3s; } .service-number { font-size: 48px; font-weight: 300; color: var(--text-light); margin-bottom: 20px; line-height: 1; } .service-title { font-size: 24px; font-weight: 500; margin-bottom: 20px; letter-spacing: -0.5px; } .service-description { font-size: 16px; line-height: 1.8; color: var(--text-light); } /* Testimonials */ .testimonials { padding: 120px 0; background: var(--bg-light); } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; } .testimonial-item { opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease forwards; } .testimonial-item:nth-child(1) { animation-delay: 0.1s; } .testimonial-item:nth-child(2) { animation-delay: 0.2s; } .testimonial-item:nth-child(3) { animation-delay: 0.3s; } .testimonial-text { font-size: 18px; line-height: 1.8; color: var(--text-color); margin-bottom: 30px; font-style: italic; } .testimonial-author { display: flex; flex-direction: column; gap: 5px; } .testimonial-author strong { font-size: 16px; font-weight: 600; } .testimonial-author span { font-size: 14px; color: var(--text-light); } /* FAQ */ .faq { padding: 120px 0; } .faq-list { max-width: 900px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--border-color); padding: 30px 0; } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; text-align: left; font-size: 20px; font-weight: 500; cursor: pointer; padding: 0; color: var(--text-color); transition: var(--transition); } .faq-question:hover { color: var(--primary-color); } .faq-icon { font-size: 24px; font-weight: 300; transition: var(--transition); color: var(--text-light); } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-item.active .faq-answer { max-height: 500px; } .faq-answer p { padding-top: 20px; font-size: 16px; line-height: 1.8; color: var(--text-light); } /* Contact */ .contact { padding: 120px 0; background: var(--bg-light); } .contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; } .contact-description { font-size: 18px; color: var(--text-light); margin-bottom: 40px; line-height: 1.8; } .contact-details { display: flex; flex-direction: column; gap: 20px; } .contact-item { font-size: 20px; color: var(--text-color); text-decoration: none; transition: var(--transition); display: inline-block; } .contact-item:hover { color: var(--primary-color); } /* Newsletter */ .newsletter { background: var(--secondary-color); padding: 40px; border-radius: 8px; } .newsletter-title { font-size: 24px; font-weight: 500; margin-bottom: 15px; } .newsletter-description { font-size: 16px; color: var(--text-light); margin-bottom: 30px; line-height: 1.6; } .newsletter-form { display: flex; flex-direction: column; gap: 20px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .newsletter-form input { padding: 15px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 16px; font-family: inherit; transition: var(--transition); } .newsletter-form input:focus { outline: none; border-color: var(--primary-color); } .btn-submit { background: var(--primary-color); color: var(--secondary-color); border: none; padding: 15px 40px; font-size: 16px; font-weight: 500; cursor: pointer; transition: var(--transition); border-radius: 4px; } .btn-submit:hover { background: #333; } /* Footer */ .footer { padding: 80px 0 40px; border-top: 1px solid var(--border-color); } .footer-content { display: flex; flex-direction: column; gap: 60px; } .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .footer-section h4 { font-size: 16px; font-weight: 600; margin-bottom: 20px; letter-spacing: 0.5px; } .footer-section ul { list-style: none; display: flex; flex-direction: column; gap: 15px; } .footer-section a { color: var(--text-light); text-decoration: none; font-size: 15px; transition: var(--transition); } .footer-section a:hover { color: var(--primary-color); } .social-links { flex-direction: row !important; gap: 20px !important; } .footer-bottom { padding-top: 40px; border-top: 1px solid var(--border-color); text-align: center; } .footer-bottom p { color: var(--text-light); font-size: 14px; } /* Modal */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 2000; align-items: center; justify-content: center; } .modal.active { display: flex; } .modal-content { position: relative; max-width: 90vw; max-height: 90vh; background: var(--secondary-color); padding: 40px; border-radius: 8px; } .modal-close { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 32px; color: var(--text-color); cursor: pointer; line-height: 1; padding: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .modal-video { width: 100%; min-height: 400px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; color: var(--text-light); } /* Responsive */ @media (max-width: 1024px) { .container { padding: 0 30px; } .about-intro-content, .contact-wrapper { grid-template-columns: 1fr; gap: 60px; } .work-grid, .services-grid, .testimonials-grid { grid-template-columns: 1fr; gap: 40px; } .form-row { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nav-menu { position: fixed; top: 70px; left: 0; right: 0; background: var(--secondary-color); flex-direction: column; padding: 40px; gap: 30px; border-bottom: 1px solid var(--border-color); transform: translateY(-100%); opacity: 0; transition: var(--transition); z-index: 999; } .nav-menu.active { transform: translateY(0); opacity: 1; } .menu-toggle { display: flex; } .hero { padding: 100px 20px 60px; } .section-header, .work-grid, .services-grid, .testimonials-grid { margin-bottom: 60px; } .about-intro, .featured-work, .who-we-are, .services, .testimonials, .faq, .contact { padding: 80px 0; } .container { padding: 0 20px; } .footer-nav { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hero-title { font-size: 36px; } .section-title { font-size: 28px; } .work-title { font-size: 24px; } .newsletter { padding: 30px 20px; } }
// Mobile Menu Toggle const menuToggle = document.querySelector('.menu-toggle'); const navMenu = document.querySelector('.nav-menu'); const navLinks = document.querySelectorAll('.nav-link'); if (menuToggle) { menuToggle.addEventListener('click', () => { navMenu.classList.toggle('active'); menuToggle.classList.toggle('active'); }); } // Close menu when clicking on a link navLinks.forEach(link => { link.addEventListener('click', () => { navMenu.classList.remove('active'); menuToggle.classList.remove('active'); }); }); // Current Time Display function updateTime() { const timeElement = document.getElementById('currentTime'); if (timeElement) { const now = new Date(); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; const offset = -now.getTimezoneOffset() / 60; const sign = offset >= 0 ? '+' : '-'; timeElement.textContent = `${hours}:${minutes}:${seconds} (GMT${sign}${Math.abs(offset)})`; } } // Update time every second updateTime(); setInterval(updateTime, 1000); // Smooth Scroll for Navigation Links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { const offsetTop = target.offsetTop - 80; window.scrollTo({ top: offsetTop, behavior: 'smooth' }); } }); }); // Showreel Modal const showreelBtn = document.querySelector('.btn-showreel'); const showreelModal = document.getElementById('showreelModal'); const modalClose = document.querySelector('.modal-close'); if (showreelBtn && showreelModal) { showreelBtn.addEventListener('click', () => { showreelModal.classList.add('active'); document.body.style.overflow = 'hidden'; }); } if (modalClose && showreelModal) { modalClose.addEventListener('click', () => { showreelModal.classList.remove('active'); document.body.style.overflow = ''; }); showreelModal.addEventListener('click', (e) => { if (e.target === showreelModal) { showreelModal.classList.remove('active'); document.body.style.overflow = ''; } }); } // FAQ Accordion const faqItems = document.querySelectorAll('.faq-item'); faqItems.forEach(item => { const question = item.querySelector('.faq-question'); if (question) { question.addEventListener('click', () => { const isActive = item.classList.contains('active'); // Close all FAQ items faqItems.forEach(faqItem => { faqItem.classList.remove('active'); }); // Open clicked item if it wasn't active if (!isActive) { item.classList.add('active'); } }); } }); // Newsletter Form Submission const newsletterForm = document.getElementById('newsletterForm'); if (newsletterForm) { newsletterForm.addEventListener('submit', (e) => { e.preventDefault(); const formData = new FormData(newsletterForm); const data = Object.fromEntries(formData); // Here you would typically send the data to your server console.log('Newsletter subscription:', data); // Show success message (you can customize this) alert('Спасибо за подписку! Мы свяжемся с вами в ближайшее время.'); // Reset form newsletterForm.reset(); }); } // Intersection Observer for Scroll Animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -100px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe elements for animation document.addEventListener('DOMContentLoaded', () => { const animatedElements = document.querySelectorAll('.work-item, .service-item, .testimonial-item'); animatedElements.forEach(el => { observer.observe(el); }); }); // Navbar Background on Scroll let lastScroll = 0; const navbar = document.querySelector('.navbar'); window.addEventListener('scroll', () => { const currentScroll = window.pageYOffset; if (currentScroll > 100) { navbar.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)'; } else { navbar.style.boxShadow = 'none'; } lastScroll = currentScroll; }); // Work Items Hover Effect const workItems = document.querySelectorAll('.work-item'); workItems.forEach(item => { const image = item.querySelector('.work-image'); if (image) { item.addEventListener('mouseenter', () => { image.style.transform = 'scale(1.05)'; image.style.transition = 'transform 0.3s ease'; }); item.addEventListener('mouseleave', () => { image.style.transform = 'scale(1)'; }); } }); // Escape key to close modal document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && showreelModal && showreelModal.classList.contains('active')) { showreelModal.classList.remove('active'); document.body.style.overflow = ''; } }); // Parallax effect for hero section window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const hero = document.querySelector('.hero'); if (hero && scrolled < window.innerHeight) { hero.style.transform = `translateY(${scrolled * 0.5}px)`; } }); // Lazy loading for images (if you add images later) if ('IntersectionObserver' in window) { const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; if (img.dataset.src) { img.src = img.dataset.src; img.removeAttribute('data-src'); imageObserver.unobserve(img); } } }); }); document.querySelectorAll('img[data-src]').forEach(img => { imageObserver.observe(img); }); } // Add active state to current nav link based on scroll position const sections = document.querySelectorAll('section[id]'); window.addEventListener('scroll', () => { const scrollY = window.pageYOffset; sections.forEach(section => { const sectionHeight = section.offsetHeight; const sectionTop = section.offsetTop - 100; const sectionId = section.getAttribute('id'); const navLink = document.querySelector(`.nav-link[href="#${sectionId}"]`); if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { navLinks.forEach(link => link.classList.remove('active')); if (navLink) { navLink.classList.add('active'); } } }); }); // Performance: Debounce scroll events function debounce(func, wait = 10) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Apply debounce to scroll handlers const handleScroll = debounce(() => { // Scroll handlers here }, 10);

Html code will be here

Made on
Tilda