Design Direction
Creative principles for the new Vismarin website — layout, storytelling, motion, and responsive behaviour.
Mobile-first (mandatory)
All pages are designed and built mobile-first: small screens are the primary target. Navigation, typography, layout, and motion are optimised for phones first, then enhanced for tablet and desktop. Touch targets are at least 44px. Real-device testing is required before launch.
Experience goals
- The first viewport communicates brand and one clear story — never a crowded dashboard.
- The site feels world-class and trustworthy for plantation and infrastructure clients.
- Motion adds presence and hierarchy — not noise.
- Mobile is redesigned for small screens — not a scaled-down desktop.
- Visual language stays consistent across all seven pages.
Visual principles
| Principle | Application |
|---|---|
| Brand first | Logo and wordmark as a strong signal in the header and key moments |
| One job per section | One headline, short support, one visual idea |
| Real imagery | Prefer authentic project and agribusiness context |
| Refined type | Distinctive premium pairing — not generic system defaults |
| Atmosphere | Depth through light, photography, and subtle surface — not flat colour alone |
| Restraint | No sticker overlays, hero clutter, or decorative chrome |
Page priorities
Home
Dominant visual plane. Brand, headline, short support, CTA — then proof and paths deeper.
About
Narrative flow: ethos → history → vision, with strong typography.
Services
Scannable capability blocks — engineering credibility without a PDF feel.
Team
Founder statement as anchor; leadership with space and hierarchy.
Projects
Visual-led case tiles grounded in real site photography.
Careers & Contact
Clear openings and apply path; contact kept simple and confident.
Motion philosophy
- Scroll-triggered section reveals
- Smooth page and section transitions
- Refined hover states
- Typography and content reveals
- Selective parallax and light atmosphere
- Constant motion that fights reading
- Gimmick particle effects
- Heavy 3D that harms mobile performance
- Animation that delays primary content
At least two to three intentional motion patterns, reused site-wide.
Design approval
- Home — desktop and mobile key frames
- About, Services, Team, Projects, Careers, Contact
- Shared header, footer, and button system
- Motion notes annotated
- Written Design Approval before development