triyan

Software,
thoughtfully
built.

Software development focused on clear interfaces, useful features, and the people who use them.

Step inside my workLet’s talk

Move your pointer to explore. Drag to rotate the sculpture. When focused, use the arrow keys to rotate and Home to reset the view.

Sculptural blue, turquoise and bronze streamlines spiraling around a vertical core
THERE’S MORE BELOWBASED IN INDONESIA · WORKING EVERYWHERE
01 / SELECTED WORK

Ideas you can
actually explore.

A closer look at what happens when
design and development stay together.

Northstar AI

SaaS / AI
DESIGN SYSTEM → LIVING WEBSITE
northstar.magika.studio
Northstar AI website: customer feedback intelligence, with a working product interface
Explore
website
BUILT WITH WORDPRESSRESPONSIVE, FROM THE INSIDE OUT

Making complex feedback
feel remarkably clear.

Independent concept project · Design & development · 2026

Forma Studio

Architecture
EDITORIAL SYSTEM → EDITABLE WORDPRESS
forma.magika.studio
Forma Studio desktop homepage with an image-led architecture portfolio
Explore
website
BUILT WITH WORDPRESS26 ROUTES · RESPONSIVE & EDITABLE

Giving thoughtful spaces
room to speak.

Independent concept project · Design & development · 2026

Nourish

Healthcare
SERVICE CMS → EDITABLE WORDPRESS
nourish.magika.studio
Nourish healthcare website with service listings and booking
Explore
website
BUILT WITH WORDPRESS28 ROUTES · RESPONSIVE & EDITABLE

Making healthcare services
simple to find and book.

Independent concept project · Design & development · 2026

Oak & Loom

eCommerce
WOOCOMMERCE STOREFRONT → EDITABLE WORDPRESS
oakandloom.magika.studio
Oak & Loom furniture storefront with WooCommerce catalog
Explore
website
BUILT WITH WORDPRESS50 ROUTES · RESPONSIVE & EDITABLE

Furniture that feels like home
from the first click.

Independent concept project · Design & development · 2026

HarborStay

Hospitality
VILLA CATALOG → EDITABLE WORDPRESS
harborstay.magika.studio
HarborStay villa booking website with property catalog
Explore
website
BUILT WITH WORDPRESS28 ROUTES · RESPONSIVE & EDITABLE

A place to stay
that already feels like yours.

Independent concept project · Design & development · 2026

PrimeNest

Real Estate
LISTING PLATFORM → EDITABLE WORDPRESS
primenest.magika.studio
PrimeNest property listing platform with search and filters
Explore
website
BUILT WITH WORDPRESS34 ROUTES · RESPONSIVE & EDITABLE

Finding the right property
should feel effortless.

Independent concept project · Design & development · 2026

ScaleCraft

Agency / Professional Services
AGENCY SITE → EDITABLE WORDPRESS
scalecraft.magika.studio
ScaleCraft agency website with services and case studies
Explore
website
BUILT WITH WORDPRESS30 ROUTES · RESPONSIVE & EDITABLE

Strategy, brand, and product
under one roof.

Independent concept project · Design & development · 2026

SkillForge

LMS / Education
LEARNING PLATFORM → EDITABLE WORDPRESS
skillforge.magika.studio
SkillForge learning platform with course catalog and progress tracking
Explore
website
BUILT WITH WORDPRESS36 ROUTES · RESPONSIVE & EDITABLE

Learning paths that meet
people where they are.

Independent concept project · Design & development · 2026

Lexworth

Legal / Professional
PROFESSIONAL SITE → EDITABLE WORDPRESS
lexworth.magika.studio
Lexworth legal professional services website with practice areas
Explore
website
BUILT WITH WORDPRESS26 ROUTES · RESPONSIVE & EDITABLE

Legal expertise
presented with clarity.

Independent concept project · Design & development · 2026

VitalTrack

Fitness / Membership
STUDIO SITE → EDITABLE WORDPRESS
vitaltrack.magika.studio
VitalTrack fitness studio website with class schedule and memberships
Explore
website
BUILT WITH WORDPRESS32 ROUTES · RESPONSIVE & EDITABLE

Fitness that fits
into real life.

Independent concept project · Design & development · 2026

02 / HOW I WORKTHINK DEEPLY. MAKE CAREFULLY.

From a spark
to something
real.

Good websites start with good questions.
Here’s how I connect the dots.

THE MAKING OF A WEBSITE01 / 04
START WITH THE RIGHT QUESTIONS

Understand the people.
Then the pixels.

Who is this for? What should they feel, find, and do? I turn the answers into a clear brief and a considered structure.

YOU GETA clear brief & website structure
03 / A LITTLE CREATIVE COMPUTINGEXPERIMENT NO. 001

A little logic.
A little wonder.

The web can be useful and a little unexpected.
Go on. Play with the possibilities.

SIGNAL PLAYGROUNDSINE WAVE / 1,200 POINTS
MOVE YOUR CURSOR THROUGH THE FIELDSMALL EXPERIMENTS. BIG POSSIBILITIES.
04 / THE PERSON BEHIND THE PIXELS

A human behind
the hardware.

Triyan

Designer by instinct.
Builder by curiosity.

I’m Triyan Arif Wibowo, an independent designer based in Indonesia. My work connects UI/UX, brand thinking, and Software development.

I care about how a website feels as much as how it works: the hierarchy, the small interactions, and the ease of making it your own.

UI/UX designBrand thinkingWordPressCreative development

One person connecting the brief,
the design, and the build.

05 / OPEN A CONVERSATIONYOUR NEXT IDEA STARTS HERE.

Got a good
“what if?”

LET’S MAKE IT REAL

Tell me what you’re imagining.
Let’s figure out what it could become.

Back to the beginning
PROJECT FILE / 001
SaaS / AI

Northstar AI

Customer feedback, made clear.

A self-initiated portfolio project exploring how an AI feedback platform could communicate its value. Northstar is a fictional product; the WordPress website is fully built and available to explore.

MY ROLE

Design & WordPress development

THE BUILD

37 content pages and entries
18 template families

From brief to browser

  1. Clarify the story. Organize a complex SaaS offer around audience needs, product evidence, and useful journeys.
  2. Design the system. Connect typography, reusable layouts, responsive interfaces, and a consistent visual language.
  3. Build it in WordPress. Bring the design into native editable content, reusable templates, and working navigation.
  4. Refine the experience. Check responsive layouts, search, menus, and the concept interactions.

Product data and customer stories are concept content. The form is a simulation and does not submit enquiries.

Explore the live website
PROJECT FILE / 002
Architecture

Forma Studio

Thoughtful spaces, clearly presented.

A self-initiated architecture portfolio concept shaped as a complete editorial website. Forma Studio is fictional; the custom WordPress build, structured content, and public website are available to explore.

MY ROLE

Design & WordPress development

THE BUILD

26 verified public routes
12 template families

From brief to browser

  1. Frame the practice. Connect projects, services, studio thinking, and journal stories around a clear editorial structure.
  2. Let imagery lead. Use restrained typography and generous spacing so architecture photography stays central.
  3. Build structured content. Translate projects, services, roles, pages, and journal entries into editable WordPress content.
  4. Verify the whole site. Check canonical routes, responsive layouts, media, navigation, gallery behavior, and HTTPS.

The practice, projects, people, and editorial content are fictional portfolio material.

Explore the live website
PROJECT FILE / 003
Healthcare

Nourish

Healthcare services, clearly organised.

A self-initiated healthcare portfolio concept built as a complete service website. Nourish is fictional; the custom WordPress build, structured service content, and public website are available to explore.

MY ROLE

Design & WordPress development

THE BUILD

32 verified public routes
14 template families

From brief to browser

  1. Organise the services. Structure departments, practitioners, and service pages around patient needs and clear pathways.
  2. Design for trust. Use clean layouts, accessible typography, and calm imagery that supports healthcare decisions.
  3. Build structured content. Translate services, practitioners, locations, and bookings into editable WordPress content.
  4. Verify the experience. Check service discovery, booking flow, responsive layouts, and HTTPS across every route.

Services, practitioners, and patient stories are fictional portfolio material. The booking form is a simulation and does not submit appointments.

Explore the live website
PROJECT FILE / 004
eCommerce

Oak & Loom

Thoughtful furniture, thoughtfully presented.

A self-initiated eCommerce portfolio concept built as a complete furniture storefront. Oak & Loom is fictional; the custom WordPress and WooCommerce build, product catalog, and public website are available to explore.

MY ROLE

Design & WordPress development

THE BUILD

50 verified public routes
16 template families

From brief to browser

  1. Shape the catalog. Organise products, collections, and categories around a natural shopping journey.
  2. Design the storefront. Connect typography, product imagery, and a warm material palette into a cohesive brand.
  3. Build with WooCommerce. Create editable products, variants, cart, and checkout using native WordPress commerce.
  4. Verify every path. Sweep 50 routes, check responsive layouts, cart behaviour, checkout flow, and HTTPS.

Products, collections, and customer stories are fictional portfolio material. The checkout is a simulation and does not process payments.

Explore the live website
PROJECT FILE / 005
Hospitality

HarborStay

Boutique hospitality, online.

A self-initiated hospitality portfolio concept built as a complete villa booking website. HarborStay is fictional; the custom WordPress build, villa catalog, and public website are available to explore.

MY ROLE

Design & WordPress development

THE BUILD

28 verified public routes
12 template families

From brief to browser

  1. Design the arrival. Use generous imagery and calm typography that evoke the feeling of the property.
  2. Structure the villas. Create villa pages with galleries, amenities, availability, and a clear booking path.
  3. Build in WordPress. Translate villas, amenities, and booking requests into editable content and templates.
  4. Verify the journey. Check villa browsing, gallery interactions, booking request flow, responsive layouts, and HTTPS.

Villas, amenities, and guest reviews are fictional portfolio material. The booking request form is a simulation and does not confirm reservations.

Explore the live website
PROJECT FILE / 006
Real Estate

PrimeNest

Property search, made clear.

A self-initiated real estate portfolio concept built as a complete property listing platform. PrimeNest is fictional; the custom WordPress build, listing CMS, and public website are available to explore.

MY ROLE

Design & WordPress development

THE BUILD

34 verified public routes
15 template families

From brief to browser

  1. Design the search. Build filtering, sorting, and detail views that make property discovery intuitive.
  2. Structure the listings. Create a reusable property CMS with galleries, maps, features, and agent cards.
  3. Build in WordPress. Implement custom post types, taxonomies, search, and enquiry forms as editable content.
  4. Verify the platform. Check search behaviour, filter combinations, listing detail, responsive layouts, and HTTPS.

Properties, agents, and market data are fictional portfolio material. The enquiry form is a simulation and does not send messages.

Explore the live website
PROJECT FILE / 007
Agency / Professional Services

ScaleCraft

A full-service agency, clearly communicated.

A self-initiated agency portfolio concept built as a complete professional services website. ScaleCraft is fictional; the custom WordPress build, service catalog, and public website are available to explore.

MY ROLE

Design & WordPress development

THE BUILD

30 verified public routes
13 template families

From brief to browser

  1. Define the offer. Structure services, capabilities, and case studies around clear client journeys.
  2. Design the agency presence. Use confident typography, structured layouts, and a professional palette.
  3. Build in WordPress. Create services, case studies, team profiles, and lead forms as editable content.
  4. Verify the site. Check service navigation, case study browsing, lead flow, responsive layouts, and HTTPS.

The agency, team, case studies, and client outcomes are fictional portfolio material. The contact form is a simulation and does not send enquiries.

Explore the live website
PROJECT FILE / 008
LMS / Education

SkillForge

Online learning, thoughtfully structured.

A self-initiated education portfolio concept built as a complete learning platform. SkillForge is fictional; the custom WordPress build, course catalog, and public website are available to explore.

MY ROLE

Design & WordPress development

THE BUILD

36 verified public routes
17 template families

From brief to browser

  1. Structure the learning. Organise courses, lessons, paths, and memberships around learner progression.
  2. Design the platform. Use clear hierarchy, progress indicators, and accessible interactions for learners.
  3. Build in WordPress. Create courses, lessons, learning paths, memberships, and progress tracking as editable content.
  4. Verify the experience. Check course discovery, lesson navigation, progress tracking, responsive layouts, and HTTPS.

Courses, instructors, learning paths, and student progress are fictional portfolio material. The enrolment form is a simulation and does not create accounts.

Explore the live website
PROJECT FILE / 009
Legal / Professional

Lexworth

Professional services, clearly framed.

A self-initiated legal portfolio concept built as a complete professional services website. Lexworth is fictional; the custom WordPress build, practice area content, and public website are available to explore.

MY ROLE

Design & WordPress development

THE BUILD

26 verified public routes
11 template families

From brief to browser

  1. Frame the practice. Organise practice areas, attorney profiles, and insights around client needs.
  2. Design for trust. Use restrained typography, clear structure, and a professional palette suitable for legal services.
  3. Build in WordPress. Create practice areas, attorney profiles, insights, and intake forms as editable content.
  4. Verify the site. Check practice navigation, insight browsing, intake flow, responsive layouts, and HTTPS.

The firm, practice areas, attorneys, and insights are fictional portfolio material. The intake form is a simulation and does not create attorney-client relationships.

Explore the live website
PROJECT FILE / 010
Fitness / Membership

VitalTrack

Studio fitness, clearly scheduled.

A self-initiated fitness portfolio concept built as a complete studio membership website. VitalTrack is fictional; the custom WordPress build, class schedule, and public website are available to explore.

MY ROLE

Design & WordPress development

THE BUILD

32 verified public routes
14 template families

From brief to browser

  1. Design the studio experience. Use energetic typography, bold imagery, and clear scheduling to convey momentum.
  2. Structure the programmes. Create class categories, instructor profiles, schedules, and membership tiers.
  3. Build in WordPress. Translate programmes, schedules, instructors, and membership sign-up into editable content.
  4. Verify the platform. Check class browsing, schedule filtering, booking flow, responsive layouts, and HTTPS.

Programs, instructors, schedules, and membership plans are fictional portfolio material. The booking form is a simulation and does not reserve spots.

Explore the live website