Maják App: Mobile and Desktop Website Design

new web design - mobile app websites
Design a modern, attractive and trustworthy website for the Maják mobile app, www.majak.app, which:
• clearly explains what Maják is and when it helps
• appears calm, professional and human
• uses meaningful animations for better orientation
• is fully prepared for technical implementation

The Maják app is an SOS emergency app for all generations.
The result is not a video or a visual concept, but a design basis for development. An integral part of the design must be an attractive animation of the display or mobile phone iPhone 17.
Target audience
• general public
• parents, seniors, young adults
• municipalities, schools, partners
The design must work:
• on the desktop (presentations, institutions, partners)
• without compromise on mobile
Scope of the design
The graphic designer will design the main landing page of the Maják application with sections:
• Home (what is Maják + CTA to download)
• About App
• How it works
• Who is it for
• About us
• Fundraising, found raising
• Download the application (App Store / Google Play)
• Videos, instructions
Desktop-first (MANDATORY)
• primary design: desktop (1440 px)
• subsequently:
on tablet
on mobile (375 px)
Mobile is not a reduced desktop, but a thoughtful adaptation.
Mandatory output forma
Figma (main and binding output)
• complete design in Figma
• structured file:
o Design system
o Desktop
o Tablet
o Mobile
• usage:
o components
o styles (colors, text)
• clickable prototype
• ready-to-export assets
Animations (MANDATORY COMPONENT)
Lottie (JSON)
Animations delivered in Lottie (JSON) format, suitable for web and mobile.
Usage:
• home section
• subtle signaling of "help / safety"
• status or explanatory animations
Add to each animation:
• name
• purpose
• where it is used
• trigger (scroll / load / interaction)
• loop / length
Figma Smart Animate
• transitions between sections
• microinteractions (hover, click, focus)
. Style & visual direction
• modern, clean, non-aggressive
• no scares, no crisis aesthetics
• high readability (contrast, hierarchy)
• emotions: calm, orientation, trust
• animations support understanding, never delay
Technical compatibility
The design must be:
• fully responsive
• easily convertible to:
o HTML / CSS
o React / Vue
• no video backgrounds
• optimized for performance (especially mobile)
What is considered a finished output
• Figma file ready for handoff to developers
• Lottie JSON animation + previews
• short description of animation logic
• no unimplementable effects
• Key sentence to understand the project
• A beacon is a tool to help in situations where seconds matter.
Design should calm, orient and build trust.

!!!Before you answer, check out the construction website www.majak.app, or download the Majak application from the app store or google play. The predominant color is blue and its shades!!!