Designing The Face of Alturian

Design Approach

Crafting Alturian’s digital presence meant striking the right balance—bold yet refined, playful yet professional. The design embraces a deep navy and vibrant orange palette, creating a sense of trust, ambition, and energy.

Visual Language

• Clean, structured layouts for a modern and professional feel
• Hand-drawn scribble accents add a touch of playfulness and personality
• A mix of bold typography and subtle animations keeps the experience dynamic

• Navy blue → Stability, trust, and corporate presence
• Bright orange → Energy, innovation, and forward-thinking

The website uses Spectral, a serif typeface that brings a sense of sophistication and credibility, while still feeling modern and adaptable. Its sharp edges and refined details make it a perfect fit for Alturian—bridging the gap between corporate professionalism and youthful ambition.

Design Approach

Crafting Alturian’s website meant balancing bold professionalism with a touch of playfulness. The visual direction reflects the company’s ambition (navy blue) while injecting energy and innovation (vibrant orange).

Visual Language

• Clean, structured layouts → Ensuring a professional and polished look
• Scribble accents & dynamic elements → Adding a youthful, energetic feel
• Subtle animations & bold typography → Keeping the experience engaging yet refined

• Navy blue → Stability, trust, and corporate presence
• Bright orange → Energy, innovation, and forward-thinking

The website uses Spectral, a serif typeface that brings a sense of sophistication and credibility, while still feeling modern and adaptable. Its sharp edges and refined details make it a perfect fit for Alturian—bridging the gap between corporate professionalism and youthful ambition.

Implementation

Frontend

In the implementation phase, I decided to use a framework that I already familiar with, VueJs. Because the website I want to build is a company profile website, I use the NuxtJs library based of its SSR and SEO optimized features.

For the CSS, I used Shadcn UI the TailwindCSS-based library due to its quickness and simplicity. The use of Tailwindcss also makes it easier for me to implement responsive design.

Backend

For the backend system, I decided to use Strapi as a Content Management System combined with MySQL as a database. Strapi is one of the headless-CMS that works really well with Node JS app. Also Strapi has a clean and user-friendly interface that makes alot easier for user to operate.

In its work, Strapi will act as an API service. to do the integration, the frontend side just need to call the strapi API then mapping it.

SEO Optimization

To ensure the Alturian website performs well in search engines, I implemented several built-in features provided by the Next.js framework. These include:

• Dynamic Metadata using generateMetadata to provide unique and contextual title, description, and Open Graph tags for each page.
• Custom robots.txt via the robots middleware to instruct search engine bots which routes to crawl or ignore.
• Auto-generated sitemap.xml using next-sitemap, helping search engines discover and index all available pages efficiently.

Next Steps

Multi-Language Support

• Expanding content accessibility for a broader SEA audience
• Implementing language toggles with seamless locale detection

Dark Mode

• Enhancing user experience & accessibility with a toggleable dark theme
• Ensuring consistent branding & readability across both light and dark modes