Dreamy Pink Airport: A Reflection on Website Planning and Design

The First Scene of a Flying Plastic Bag in Front of the Gate

When I first started creating this site, the image I had in mind was quite simple. A plastic bag swaying in the wind. Light, common, sometimes even a bit amusing, but capable of soaring to unexpected heights with just the right breeze. I wanted this image to be the opening statement of my portfolio. And I chose an airport as the natural backdrop for this. An airport is a space where waiting and departing, verifying and passing, anticipation and caution all play simultaneously. It resembles the process of a studio meeting with a client, preparing for a project, and bringing it to completion.

This article reflects on the planning, design, and implementation of a personal studio portfolio website that started in this way. Rather than boasting about technology, I focused on honestly writing about why I made certain choices, what was cut, and what was retained, and shared the real challenges experienced during the process.

Before Departure: The Purpose of This Flight

Creating a portfolio always feels like walking a tightrope between making a home for myself and an information center for others. This time, I decided not to hide that tension. What I needed was not a perfectly preserved exhibit but a living route that demonstrates that I am still active.

Thus, I set clear objectives for the site. First, in 30 seconds or less, convey the 'sense of what you do well.' Second, provide specific insights into what makes collaboration easier. Third, never forget to signal readiness to start the next journey at any time. These three points were the benchmarks for this project.

The Stage Built with Airport Grammar: From Landing to Blog

The Airport Stage: A Pink Scene

With pink as the brand color, the hero section's plastic bag was also set in pink, as it stood out more prominently in the monochrome airport scenery and helped imprint the studio's tone instantly. It was intentional not to make the plastic bag overly realistic. I wanted to leave enough space for it to be read as an icon while still being recognizable as a bag.

The copy for the hero was also pressed to be as short and flat as possible. Since misinterpretation can often occur with only a few words, we left only the nuance, like 'our glide is not drift,' and removed all exaggerated decorations. This is because I believe the purpose of the first screen is not to impress or boast, but to synchronize breathing.

The Landing Page Arranged in the Check-In Order

The landing page was designed following the sequence of an airport. Baggage Drop → Seat Assignment → Flight Route → Recent Projects → Flight Log → Checklist/CTA. In other words, it's a path where a newcomer, like getting their boarding process done, completes 'getting ready to work' with the studio.

Baggage Drop

Displayed the significant baggage (requests, projects) left by previous clients, viewed through the lens of baggage tags. The tags have a destination, a point of departure, and a passenger name. Projects are similar. Where they start, where they go, and who they go with. That small piece of paper simultaneously contains the meaning and weight of a project. I liked that sense of reality. I wanted to subtly leave the impression that 'this studio handles baggage neatly.'

Seat Assignment

Here, I explained why we specifically mention 'first-class'. It's about a different kind of comfort. Not physical conditions like a wide seat and a quiet cabin, but the speed of detecting problems, the transparency in decision-making, and the reduction of communication fatigue as standards for first class. Conversely, I wrote quite realistically about the frustration commonly encountered in lower-grade seats—focus becoming blurred, instructions repeating, and momentum getting cut. I aimed to show what the studio can promise and what it should not. Instead of saying 'everything will be perfect,' I leaned towards 'with this method, it's much easier.'

Flight Route

Mapped out the studio's strengths and work rhythm as a flight route. Where speed is increased, where the checklist is checked, and where risks are detected early. Although altitude differs for each project and thus the route changes, the order of key procedures shown in a diagram remains unchanged. While creating this section, I worried that 'too many procedures might seem complex,' but often received feedback that a single line on the route brings reassurance instead of anxiety.

Recent Projects

Displayed the five latest works in the format of a flight board. To convey a natural sense of 'about to take off' or 'just arrived,' I highlighted the expressions of time. Instead of overly mimicking the grammar of a flight board in graphics, I adopted elements like rhythm and interval and honesty in listing. I wanted to quietly remind that the portfolio represents 'now' rather than 'once upon a time.'

Flight Log

Testimonials were kept short and specific. Rather than saying 'it was great,' we asked for 'what changed,' and that's what filled the statements. Long praise often diverges from reality. I believe a single line of recorded change becomes credible evidence.

Checklist & Boarding Ticket

We didn't overextend the number of questions for the FAQ. Instead, we placed the conclusion in the first sentence. At the very bottom of the page, there’s a airline ticket-style CTA. It's a simple form to fill out a name and contact, but it provides a small ritual of 'reserving my next flight.' I believe this ritual aids conversion.

Viewing Style Through the Window: Observing Works

The Works page was neatly divided into two sections. At the top, the Featured section prominently displays the work that best represents the studio's direction, while the Recent Projects below are balanced evenly.

The most effort here went into the airplane window-style cards. I wanted visitors to view projects as if they were 'looking into the cabin from outside the window, or vice versa.' When you hover with the mouse, the sky outside the window is revealed first, then the client's logo is placed on top. Changing the frame changes the viewing stance, moving from 'peering inside from outside' to 'looking out from inside.' I felt this shift in perspective greatly alters the atmosphere of the portfolio.

I arranged the filtering to be streamlined and neatly set. Each tag is connected with CMS, so adding a new tag to CMS will automatically reflect it in the filter. The system needs to work in place as the work accumulates. This time, I prepared that sustaining strength in advance.

The Page for 'Reading' Projects: Balance of Left and Right

The project detail page places a summary on the left and images/details on the right, ensuring that as you scroll down, text and images complement each other without tangling. The top summary briefly mentions title, client, work year, tags, and provides a background and goal in a concise way. For the main text, only the essential scenes of the process are included. I resisted the temptation to show everything multiple times because I learned from hands-on experience that placing little and honest information often proves to be more trustworthy.

At the bottom, related projects and previous/next links are placed. This allows both those wanting to continue in context and those wanting to quickly browse to do so comfortably.

Short Introductions, Long Atmosphere: Studio Page

The Studio page serves to provide a moment to catch one's breath when the same pattern starts to feel tiresome. Under the hero, a video of skies in flight was included without exaggerated effects. I thought the video should convey atmosphere rather than serve as an explanation. The studio's aspirations and history are conveyed in sentences that are concise and clear. Instead of exaggerating to embellish, I encapsulated how we work in a sentence or two. I believed that the longer the introduction, the more risky it becomes. I wanted this page to let users know 'what to expect' and quietly step back.

How Records Work: Blog and Article

The blog is set not as an announcement board but as a place for recording behind-the-scenes of works. The list page prominently displays one Featured Article and attaches All Articles below for exploration. Like Works, it also includes a tag filter linked with CMS, so additions/updates lead directly to exposure.

The article page first makes users recognize the tag–title–date at the top, then places a table of contents on the left and main text on the right under a large thumbnail. Clicking the table of contents moves smoothly to the corresponding position. In the main text, paragraph rhythm is maintained, and subheading sentences are carefully polished. At the bottom of the page, related articles and previous/next articles links are placed to prevent the rhythm of reading from breaking.

The Technical Manual Making Operation Possible: Interaction, Responsiveness, Framer, Copy

Interactions that Ease the Weight on the Fingertips

The interactions on this site are akin to staff quietly working in the background. I mulled over the boundary between information only revealed on hover and information always visible, and boldly removed 'motions not aiding user judgment.'

Time values for animations were taken as short and concise. Significant transitions were made shorter and crisper. Fade/slide along with scrolling was used minimally. In an environment with motion reduction preference (prefers-reduced-motion) on, a simpler version operates fundamentally. This is grounded in the belief that a site endures longer if it's comfortable for the viewer.

The Route Arranged with Framer, Continuity through Time with CMS

This construction was carried out using Framer due to the need for a seamless connection between design, implementation, and fine adjustment. Repetitive elements like buttons, cards, section headers were grouped into components, and states were organized with Variants, conserving maintenance strength.

The tag/filter system for Works and Blog was closely connected with CMS. Creating a tag in CMS generates a filter immediately, with exposure rules moving along. The principle of 'one input working multiple places' shines more as content increases. For small responses dependent on scroll position or viewport entry, Framer's basic functions sufficed, enhancing only impossible-to-implement spots with code. Trusting provided standards first and enhancing just where needed lightly—this was the technical philosophy summarized in a single line for this construction.

Even Tone of Speech is an Experience: The Temperature of Copy

I thought the copy should be short and precise like an announcement. Instead of decorative 'Welcome,' I immediately stated 'what can or cannot be done.' Also, the section titles on the landing were kept in a plain tone, resembling airport signs. To avoid being overly cold, a touch of lightness was inserted between sentences. Adjusting sentence spacing around the phrase 'Now Boarding,' left behind anticipation instead of lightness. It seems even tone is experiential. The site's rhythm became more comfortable by pruning exaggeration and empty words.

Closing the Logbook and Preparing for the Runway Again: Operation, Traces of Choice, Next Flight

Operation Completes with Records

The site truly begins after it goes live. I’m leaving updates as small logs. What, why, and how things were changed. Records easily disappear the busier it gets, but if they vanish, the same concerns tend to recur later. Small logs invite minor enhancements, and minor enhancements often turn into major stability one day, as I learned many times. Instead of updating Works in bulk, I plan to do so over intervals, continually offering slightly different landscapes even during repeated visits. Blogs will also preserve the temperature of recent work rather than promising perfect insight.

What Was Kept and Let Go: Traces of Choice

The hardest part of this project was constantly letting go of the desire to 'show more.' Stylish devices, flashy motions, lengthy explanations—such temptations constantly present themselves. Each time, I asked myself, 'Does this device truly assist visitor judgment?' If not, I let it go. Instead, I firmed up the framework of the journey and placed only accurate information in the exact spot. It became the site’s expression, appearing modest from afar yet orderly up close—that degree of balance was achieved this time.

Of course, dissatisfaction lingers. Mobile usability remains less than ideal compared to desktops, and a few specific sections often beckon for more bold spacing. However, I try not to be afraid of this imperfection. Airports are always under construction, and signages occasionally change. Finding new paths amidst those changes is, after all, part of the journey.

Simple Memo for the Next Flight

We’ll soon introduce a full multilingual transition. When language changes, sentence length shifts, and with it, the balance of layout adjusts. I am assessing how flexible the current structure is and will boldly rearrange where needed. Metadata of Works will also be strengthened to be more meaning-focused. I'll set it to fix on 'what problems were solved' rather than 'what was created,' enabling each project's core to be quickly grasped in a concise sentence.

Additionally, I aim to make accessibility checks a routine habit. Focus rings, contrast, keyboard navigation, motion reduction—these are items easily forgotten once configured, but need regular re-examination. The quality of experience often collapses from small habits and is rebuilt by those same small habits.

Preparing for Takeoff Again After Landing

Reflecting back, this site was a task of gripping and stretching the brief scene of a plastic bag fluttering across the airport floor and slowly rising into air. I began with a light and common object, but believed in the combination of chance and will it contained. Working under the name 'studio' also feels like standing somewhere in between those aspects.

This site doesn't end here. The numbers on the display board will change, the blog's table of contents will expand. New tags will emerge, and the combinations in filters will become richer. Someday, the plastic bag in the hero may embrace the light of a different season. Hopefully, each of those changes serves as proof that I am continuously working.

Thank you for reading. If you wish to join this journey, please leave your name in the small airline ticket form at the bottom of the page. From that moment, we’ll be looking at the same route.