When two creatives collaborate, the design course of turns into a shared stage — every bringing their very own strengths, views, and instincts. This mission united designer/artwork director Artem Shcherban and 3D/movement designer Andrew Moskvin to assist New York–based mostly scenographer and costume designer Christian Fleming fully reimagine how his work is introduced.
What started as a portfolio refresh developed right into a cohesive visible system: a rigorously minimal print catalog, a single-page web site idea, and a cinematic 3D visualization. Collectively, Artem and Andrew formed an expertise that distilled Christian’s theatrical sensibility into clear, atmospheric design throughout each bodily and digital codecs.
From right here, Artem picks up the story, strolling us by how he approached the portfolio’s construction, the visible guidelines it could dwell by, and the pondering that formed each its print and on-screen presence.
Beginning the Design Dialog
Christian Fleming is a outstanding designer and director based mostly in New York Metropolis who works with theaters world wide creating visible areas for performances. He approached me with a problem: to replace and rethink his portfolio, to make it simple to ship out to theater administrators and curators. Particularly the print format.
Christian had a reasonably clear understanding of what he wished to point out and the way it ought to look: inflexible Scandinavian minimalism, excessive readability of composition, a minimal of parts and a presentation that may be comprehensible to completely anybody – no matter age, occupation or context.
It was necessary to create a system that may:
- be up to date recurrently (roughly each 3 weeks),
- adapt to new initiatives,
- and on the identical time stay visually and semantically steady.
There additionally wanted to be an “About Christian” part within the construction, however this too needed to match inside a strict framework of visible language.
Designing a Versatile Visible System
I began by rigorously analyzing how Christian works. His main language is visible. He thinks in pictures, mild, texture and composition. So it was necessary to retain a way of air and rhythm, however construct a transparent modular construction that he might confidently work with on his personal.
We got here up with a easy adaptive system:
- it simply adapts to pictures of various codecs,
- scalable for every thing from PDFs to shows,
- and can be utilized each digitally and offline.
Within the first levels, we tried a number of buildings. Nevertheless, Christian nonetheless felt that there was one thing lacking within the format – the visuals and logic have been in battle. We mentioned which designs he wished to point out brazenly and which he didn’t. Some works had world evaluations and necessary weight, however couldn’t be proven in all particulars.
The answer was to divide them into two significant blocks:
“Chosen Tasks”, with full submission, and “Archival Tasks”, with a give attention to awards, evaluations, and context. This method preserved each construction and tone. The format turned balanced – and Christian instantly responded to this.
After gathering the construction and understanding how it could work, we started creating the design itself and populating it with content material. It was necessary from the begin to prepare Kristan so as to add content material on his personal, as there was plenty of mission and so they change very often.
One of many key pluses of our work is versatility. Not solely might the ultimate file be emailed, nevertheless it may be used as a print publication. This gave Christian the chance to present bodily copies at conferences, premieres {and professional} occasions the place tactility and a focus to element are necessary.
Christian preferred the primary outcome, each in the best way the system was laid out and the best way I approached the duty. Then I advised: let’s replace the web site as effectively.
Translating the Portfolio to a Single-Web page Web site
This part proved to be essentially the most attention-grabbing, and essentially the most difficult.
Though the web site seems easy, it took virtually 3 months to construct. From the very starting, Christian and I attempted to know why he wanted to replace the positioning and the way it ought to work along with the already established portfolio system.
The primary problem was to point out the visible aspect of his initiatives. Not simply textual content or logos, however the ambiance, the sunshine, the costumes, the sensation of the scene.
One of many restrictions that Christian set was the requirement to make the positioning as concise as potential, with out numerous pages, or higher to restrict it to at least one, and with out pointless transitions. It needed to be easy, clear and intuitive, however nonetheless user-friendly and fairly informative. This was an actual problem, given the quantity of content material that wanted to be posted.
Designing with Stage Logic
One of many key constraints that began the work on the positioning was Christian’s want: no a number of pages. Every thing needed to be compact, coherent, clear and but wealthy. This posed a particular problem. It was essential to accommodate a reasonably large quantity of data with out overloading the notion.
I proposed an answer constructed on a theatrical metaphor: as in a stage blackout, the display screen darkens and a brand new house seems. Every mission turns into its personal scene, with the person as a spectator — by no means leaving their seat, by no means clicking by menus. Navigation flows in easy, seamless transitions, preserving consideration centered and the emotional rhythm intact.
Christian preferred the concept, however instantly confronted a brand new problem: tips on how to match every thing necessary on one display screen:
- a brief textual content about him,
- social media hyperlinks and a resume,
- the job title and outline,
- and, if obligatory, evaluations.
On the identical time, the principle visible content material – images and movies – needed to stay within the focus and never overlap with the interface.
Fixing the Composition Puzzle
We explored a number of layouts — from centered titles and multi-level disclosures to diagonal buildings and thumbnail navigation. Some regarded promising, however they lacked the sense of theatrical rhythm we wished. The layouts felt crowded, with an excessive amount of design and never sufficient air.
The breakthrough got here once we shifted focus from pure visuals to structural logic. We diminished every mission view to 4 key parts: minimal details about Christian, the manufacturing title with the director’s title, a evaluate (when obtainable), and a button to pick the mission. Giving every component its personal house created a format that was each clear and versatile, with out overloading the display screen.
Refining By Iteration
As with the e-book, the positioning went by a number of iterations:
- Within the first prototype, the central format shortly proved unworkable – lengthy play titles and director names didn’t match on the display screen, particularly within the cellular model. We have been dropping scalability and never utilizing all of the obtainable house.
- Within the second model, we moved the knowledge blocks upwards – this gave us a logical hierarchy and allowed us to not burden the middle of the display screen. The visible focus remained on the images, and the textual content didn’t intervene with the notion of the scenography.
- Within the third spherical, the concept of “titles” appeared – a transparent typographic construction, the place titles are highlighted solely by boldness, with out altering the lettering. This was in line with the general minimalist aesthetic, and Christian particularly talked about that he didn’t need to use a couple of font or fashion except obligatory.
We additionally determined to stylistically separate the evaluations from the principle description. We italicized them and put them just under. This made it clear what belonged to the creator and what was a response to the creator’s work.
Bringing Theatrical Circulate to Navigation
The final open difficulty was navigation between initiatives. I proposed two situations:
- Navigating with arrows, as if the viewer have been leafing by the play scene by scene.
- A clickable menu with a listing of works for individuals who need to go instantly.
Christian was involved in regards to the query: wouldn’t the person lose their bearings in the event that they didn’t see the listing on a regular basis? We mentioned this and got here to the conclusion that the majority guests don’t come to the positioning to “search for the correct job”. They arrive to really feel the ambiance and “expertise” its theater. So the essential situation is a constant searching expertise, like shifting by a play. The menu is out there, however not in the best way – it mustn’t break the impact of involvement.
What We Realized About Theatrical Design
We didn’t construct only a web site. We constructed an expertise. It’s not a digital storefront, however an area that displays the best way Christian works. He’s an artist who thinks within the rhythm of the stage, and it was important to not break that rhythm.
The result’s a spot the place the viewer isn’t distracted; they inhabit it. Navigation, construction, and interface quietly assist this expertise. A lot of that comes from Christian’s clear and considerate suggestions, which formed the method at each step. This mission is a reminder that even work which seems easy is outlined by numerous small selections, every influencing not solely the way it features but in addition the temper it creates from the very starting.
Extending the Design from Display screen to Print
As soon as the positioning was full, a brand new query emerged: how ought to this work be introduced in essentially the most significant method?
The digital format was solely a part of the reply. We additionally envisioned a printed version — one thing that might be mailed or handed over in individual as a bodily object. Within the theater world, the place visible presence and tactility carry as a lot weight as the concept itself, this felt important.
We developed a set of layouts, however bringing the catalog to life as meant proved sluggish. Christian’s schedule along with his theater work left little time to finalize the print manufacturing. We would have liked an alternate that might convey not solely the design but in addition the ambiance and weight of the completed e-book.
Turning the Ebook right into a Cinematic Object
At this stage, 3D and movement designer Andrew Moskvin joined the mission. We shared the transient with him — not simply to current the catalog, however to embed it inside the theatrical aesthetic, preserving the play of sunshine, texture, air, and temper that outlined the web site.
Andrew was instantly enthusiastic. After a fast name, he dove into the method. I assembled all of the pages of the print model we had, and collectively we mentioned storyboards, views, ambiance, potential scenes, and supplies that might deepen the expertise. The objective was greater than merely displaying the format — we wished cinematic photographs the place each fold of material and each spot of sunshine served a single dramaturgy.
The outcome exceeded expectations. Andrew didn’t simply recreate the printed model; he introduced it to life. His work was refined and exact, with a deep respect for context. He captured not solely the temper but in addition the intent behind every unfold, giving the e-book weight, materiality, and presence — the type we imagined holding in our palms and leafing by in individual.
Andrew will share his improvement course of beneath.
Breaking Down the 3D Course of
The Idea
On the very begin, I wished my work to mix fluently within the concepts that have been already made. Christian Fleming is a scenographer and costume designer, so the visible system wanted to replicate his world. Because the mission was deeply rooted within the theatrical aesthetic, my 3D work needed to naturally mix into that ambiance. Artem’s route performed a key function in shaping the distinctive look envisioned by Christian Fleming — wealthy with stage-like presence, daring compositions, and intentional use of house. My job was to make sure that the 3D parts not solely supported this world, but in addition felt like an natural extension of it — capturing the identical temper, lighting nuances, and visible rhythm that outline a theatrical setting.
The Instruments
For the complete 3D pipeline, I labored in:
- Cinema 4D for modeling and scene setup
- Redshift for rendering
- After Results for compositing
- Photoshop for colour correcting static pictures
Modeling the Ebook
The e-book was modeled solely from scratch. Me and Artem mentioned the shape and proportions, and after a number of iterations, we finalized the design route. I centered on the small particulars that convey realism: the curvature of the hardcover backbone, beveled edges, the separation between the quilt and pages, and the layered construction of the paper block. I additionally modeled the fabric texture wrapping the backbone, giving the e-book a tactile, fabric-like look. The geometry was constructed to carry up in close-up photographs and match the theatrical lighting.
Lighting with a Theatrical Eye
Lighting was one of the vital necessary components of this course of. I wished the scenes to really feel theatrical — as if the objects have been positioned on a stage beneath rigorously managed spotlights. Utilizing a mix of space lights and spotlights in Redshift, I formed the lighting to create delicate gradients and shadows on the surfaces. The setup was designed to emphasise the geometry with out flattening it, all the time preserving depth and route. A refined backlight spotlight performed a key function in defining the perimeters and enhancing the general type.
I believe I spent extra time on lighting than on modeling, since lighting has all the time been extra experimental for me — even in product scenes.
One small however impactful trick I all the time use is organising a separate HDRI map only for reflections. I disable its contribution to diffuse lighting by setting the diffuse worth to 0, whereas preserving reflections at 1. This permits the reflections to pop extra with out affecting the general lighting of the scene. It’s a easy setup, nevertheless it provides you far more management over how supplies reply — particularly in stylized or extremely art-directed environments.
Constructing the Supplies
Once I was creating the supplies, I observed that Artem had used a checkerboard texture for the quilt. So I assumed — why not take that concept additional and implement it instantly into the fabric? I added a refined bump utilizing a checker texture on the edges and entrance a part of the e-book.
I additionally experimented fairly a bit with displacement. Initially, I had the concept to make the title metallic, nevertheless it felt too predictable. So as an alternative, I went with a white title that includes embossed particulars, whereas preserving the checker bump texture beneath.
This really ties again to the modeling course of — for the displacement to work correctly, the geometry needed to be evenly dense and prepared for subdivision.
I created a masks in Photoshop and utilized a procedural Gaussian blur utilizing a Sensible Object. With out the blur, the displacement regarded harsh and unrefined — even a slight blur made a noticeable distinction.
The primary problem with utilizing white, as all the time, was avoiding blown-out highlights. I needed to rigorously steadiness the lighting and tweak the fabric settings to make the title clear and visual with out overexposing it.
One of many extra uncommon challenges on this mission was animating the web page slide and making the pages differ. I didn’t need the pages to really feel too repetitive, however I additionally didn’t need to create dozens of particular person supplies for every web page. To discover a steadiness, I created two totally different supplies for 2 pages and made them random within the cloner. It was a little bit of a workaround — largely attributable to limitations contained in the Shader swap node — nevertheless it labored effectively sufficient to create the phantasm of selection with out considerably growing the complexity of the setup.
There’s a extremely helpful node in Redshift known as Colour Consumer Information — particularly when working with the MoGraph system to set off object index values. One of many strangest (and possibly least intuitive) issues I did on this setup was utilizing a Change Vary node to remap these index values correctly in keeping with the variety of textures I had. With that in place, I constructed a system that used an index to combine between all of the textures inside a Shader Change node. This allowed me to get true variation throughout the pages with out manually assigning supplies to every one.
You may’ve observed that the pages look a bit too vivid for a real-world situation — and that was really a deliberate selection. I typically use a trick that helps me art-direct materials brightness independently of the scene’s lighting. The important thing node right here is Colour Right Node.
Inside it, there’s a parameter known as Degree. Should you set it increased than 1, it will increase the general brightness of the feel output — with out affecting shadows or highlights too aggressively. This additionally works in reverse: in case your texture has areas which are too vivid (like pure white), reducing the Degree worth beneath 1 will tone it down without having to switch the supply texture.
It’s a easy trick, however extremely helpful whenever you need fantastic management over how supplies react in stylized or theatrical lighting setups.
The crimson fabric materials I used all through the scene is one other attention-grabbing a part of the mission. I wished it to have a robust tactile really feel — one thing that appears thick, textured, and bodily current. To realize that, I relied closely on geometry. I used a Redshift Object Tag with Subdivision (beneath the Geometry tab) enabled so as to add extra element the place it was wanted. This helped the fabric catch mild correctly and maintain up in close-up photographs.
For the translucent look, I initially experimented with Subsurface Scattering, nevertheless it didn’t give me the management I wished. So as an alternative, I used an Opacity setup pushed by a Ramp and Change Vary nodes. That gave me simply sufficient falloff and variation to pretend the look of sunshine passing by thinner areas of the material — and in the long run, it labored surprisingly effectively.
Animating the Pages
This was by far essentially the most experimental a part of the mission for me. The quantity of improvisation — and the whole insecurity in what the subsequent body can be — made the method each enjoyable and versatile.
What you’re about to see may look a bit chaotic, so let me shortly stroll you thru how it began.
The simulation began with a topic — in our case, a web page. It needed to have the correct type, and by that I imply the correct typology. Particularly, it wanted to consist solely of horizontal segments; in any other case, it could bend erratically beneath the forces current within the scene. (And sure, I did strive variations with even polygons — it obtained messy.)
I arrange all of the pages in a Cloner so I might simply alter any parameters I wanted, and added a little bit of randomness utilizing a Random Effector.
Within the video, you may see a aircraft on the aspect that connects to the pages — that was really the primary thought I had when excited about tips on how to run the simulation. The aircraft has a Join tag that hyperlinks all of the pages to it, so when it rotates, all of them observe alongside.
I received’t go into all of the pressure settings — most of them have been experimental, and animations like this all the time require a little bit of artistic adjustment.
The primary pressure was wind. The pages did need to slide simply from the aircraft with the Join tag, however I wanted to present them an additional push from beneath — that’s the place wind got here in helpful.
I additionally used a Subject Drive to maneuver the pages mid-air, from the middle outward to the opposite aspect.
In all probability a very powerful half was how I triggered the “Combine Animation.” I used a Vertex Map tag on the Cloner to color a map utilizing a Subject, which then drove the Combine Animation parameter within the Material tag. This setup made the pages activate one after the other, making a pure, finger-like sliding movement as seen in Video.
Postprocessing
I didn’t go too heavy on post-processing, however there’s one plugin I’ve to say — Deep Glow. It provides wonderful outcomes. By tweaking the edge, you can also make it react solely to the brightest areas, which creates an excellent clear, glowing impact.
The Remaining Theatrical Ecosystem
In the long run, Christian was delighted with the result. Collectively we had constructed greater than a portfolio — we had created a cohesive theatrical ecosystem. It moved fluidly from digital efficiency to printed object, from dwell stage to interface, and from emotion to expertise.
The expertise is pared again to its essence: no superfluous results, no pointless clicks, nothing to drag focus. What stays is what issues most — the work itself, framed in a method that stays quietly behind the scenes but comes totally alive within the viewer’s palms and on their display screen.
