When two creatives collaborate, the design course of turns into a shared stage — every bringing their very own strengths, views, and instincts. This venture united designer/artwork director Artem Shcherban and 3D/movement designer Andrew Moskvin to assist New York–primarily based scenographer and costume designer Christian Fleming utterly reimagine how his work is offered.
What started as a portfolio refresh advanced 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 might reside by, and the pondering that formed each its print and on-screen presence.
Beginning the Design Dialog
Christian Fleming is a distinguished designer and director primarily based in New York Metropolis who works with theaters all over the world creating visible areas for performances. He approached me with a problem: to replace and rethink his portfolio, to make it straightforward to ship out to theater administrators and curators. Particularly the print format.
Christian had a fairly clear understanding of what he wished to indicate and the way it ought to look: inflexible Scandinavian minimalism, excessive readability of composition, a minimal of components and a presentation that may be comprehensible to utterly anybody – no matter age, occupation or context.
It was necessary to create a system that may:
- be up to date often (roughly each 3 weeks),
- adapt to new tasks,
- and on the similar time stay visually and semantically secure.
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 fastidiously analyzing how Christian works. His main language is visible. He thinks in photos, gentle, texture and composition. So it was necessary to retain a way of air and rhythm, however construct a transparent modular construction that he may confidently work with on his personal.
We got here up with a easy adaptive system:
- it simply adapts to photographs of various codecs,
- scalable for all the pieces from PDFs to shows,
- and can be utilized each digitally and offline.
Within the first levels, we tried a number of constructions. Nonetheless, Christian nonetheless felt that there was one thing lacking within the structure – the visuals and logic have been in battle. We mentioned which designs he wished to indicate overtly and which he didn’t. Some works had international critiques 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, critiques, and context. This strategy preserved each construction and tone. The structure turned balanced – and Christian instantly responded to this.
After gathering the construction and understanding how it might 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 loads of venture and so they change very often.
One of many key pluses of our work is versatility. Not solely may 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 spotlight to element are necessary.
Christian favored the primary end result, each in the way in which the system was laid out and the way in which I approached the duty. Then I steered: let’s replace the web site as properly.
Translating the Portfolio to a Single-Web page Web site
This section proved to be essentially the most attention-grabbing, and essentially the most difficult.
Though the web site seems easy, it took nearly 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 indicate the visible facet of his tasks. 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 a lot of pages, or higher to restrict it to 1, 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 area seems. Every venture turns into its personal scene, with the consumer as a spectator — by no means leaving their seat, by no means clicking by menus. Navigation flows in easy, seamless transitions, conserving consideration centered and the emotional rhythm intact.
Christian favored the thought, however instantly confronted a brand new problem: find out how to match all the pieces necessary on one display screen:
- a brief textual content about him,
- social media hyperlinks and a resume,
- the job title and outline,
- and, if needed, critiques.
On the similar time, the principle visible content material – photographs 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 constructions and thumbnail navigation. Some appeared 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 after we shifted focus from pure visuals to structural logic. We decreased every venture view to 4 key components: minimal details about Christian, the manufacturing title with the director’s identify, a evaluation (when out there), and a button to pick out the venture. Giving every ingredient its personal area created a structure that was each clear and versatile, with out overloading the display screen.
Refining By means of Iteration
As with the e-book, the positioning went by a number of iterations:
- Within the first prototype, the central structure rapidly proved unworkable – lengthy play titles and director names didn’t match on the display screen, particularly within the cellular model. We have been shedding scalability and never utilizing all of the out there area.
- Within the second model, we moved the data 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 photographs, and the textual content didn’t intrude with the notion of the scenography.
- Within the third spherical, the thought of “titles” appeared – a transparent typographic construction, the place titles are highlighted solely by boldness, with out altering the lettering. This was in step with the general minimalist aesthetic, and Christian particularly talked about that he didn’t need to use multiple font or model except needed.
We additionally determined to stylistically separate the critiques from the principle description. We italicized them and put them slightly below. This made it clear what belonged to the creator and what was a response to the creator’s work.
Bringing Theatrical Movement to Navigation
The final open problem was navigation between tasks. 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 straight.
Christian was involved in regards to the query: wouldn’t the consumer 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 best job”. They arrive to really feel the ambiance and “expertise” its theater. So the fundamental situation is a constant shopping expertise, like transferring by a play. The menu is obtainable, however not in the way in which – it shouldn’t break the impact of involvement.
What We Discovered 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 way in which 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 venture is a reminder that even work which seems easy is outlined by numerous small selections, every influencing not solely the way it features but additionally the temper it creates from the very starting.
Extending the Design from Display to Print
As soon as the positioning was full, a brand new query emerged: how ought to this work be offered in essentially the most significant approach?
The digital format was solely a part of the reply. We additionally envisioned a printed version — one thing that may very well 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 thought itself, this felt important.
We developed a set of layouts, however bringing the catalog to life as supposed proved sluggish. Christian’s schedule along with his theater work left little time to finalize the print manufacturing. We would have liked another that would convey not solely the design but additionally the ambiance and weight of the completed e-book.
Turning the Guide right into a Cinematic Object
At this stage, 3D and movement designer Andrew Moskvin joined the venture. We shared the temporary with him — not simply to current the catalog, however to embed it throughout 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 would deepen the expertise. The objective was greater than merely displaying the structure — we wished cinematic photographs the place each fold of cloth and each spot of sunshine served a single dramaturgy.
The end result exceeded expectations. Andrew didn’t simply recreate the printed model; he introduced it to life. His work was delicate and exact, with a deep respect for context. He captured not solely the temper but additionally the intent behind every unfold, giving the e-book weight, materiality, and presence — the sort we imagined holding in our arms and leafing by in individual.
Andrew will share his improvement course of under.
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 mirror his world. Because the venture 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 area. My activity was to make sure that the 3D components not solely supported this world, but additionally felt like an natural extension of it — capturing the identical temper, lighting nuances, and visible rhythm that outline a theatrical setting.
The Instruments
For all the 3D pipeline, I labored in:
- Cinema 4D for modeling and scene setup
- Redshift for rendering
- After Results for compositing
- Photoshop for coloration correcting static photos
Modeling the Guide
The e-book was modeled totally 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 material 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 crucial necessary components of this course of. I wished the scenes to really feel theatrical — as if the objects have been positioned on a stage below fastidiously managed spotlights. Utilizing a mix of space lights and spotlights in Redshift, I formed the lighting to create gentle 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 delicate backlight spotlight performed a key function in defining the perimeters and enhancing the general kind.
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 conserving reflections at 1. This enables the reflections to pop extra with out affecting the general lighting of the scene. It’s a easy setup, nevertheless it offers you far more management over how supplies reply — particularly in stylized or extremely art-directed environments.
Constructing the Supplies
After I was creating the supplies, I observed that Artem had used a checkerboard texture for the quilt. So I believed — why not take that concept additional and implement it straight into the fabric? I added a delicate bump utilizing a checker texture on the perimeters and entrance a part of the e-book.
I additionally experimented fairly a bit with displacement. Initially, I had the thought 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 conserving 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 appeared 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 fastidiously 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 venture 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 inside the cloner. It was a little bit of a workaround — largely as a result of limitations contained in the Shader change node — nevertheless it labored properly sufficient to create the phantasm of selection with out considerably growing the complexity of the setup.
There’s a very helpful node in Redshift known as Shade 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 based on 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 Swap 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 usually use a trick that helps me art-direct materials brightness independently of the scene’s lighting. The important thing node right here is Shade Appropriate Node.
Inside it, there’s a parameter known as Stage. If you happen to 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 can be too vivid (like pure white), decreasing the Stage worth under 1 will tone it down with no need to switch the supply texture.
It’s a easy trick, however extremely helpful if you need effective management over how supplies react in stylized or theatrical lighting setups.
The purple fabric materials I used all through the scene is one other attention-grabbing a part of the venture. I wished it to have a powerful 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 (below the Geometry tab) enabled so as to add extra element the place it was wanted. This helped the material catch gentle 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 properly.
Animating the Pages
This was by far essentially the most experimental a part of the venture for me. The quantity of improvisation — and the entire insecurity in what the subsequent body could be — made the method each enjoyable and versatile.
What you’re about to see may look a bit chaotic, so let me rapidly stroll you thru how it began.
The simulation began with a topic — in our case, a web page. It needed to have the right kind, and by that I imply the best typology. Particularly, it wanted to consist solely of horizontal segments; in any other case, it might bend erratically below the forces current within the scene. (And sure, I did strive variations with even polygons — it received messy.)
I arrange all of the pages in a Cloner so I may simply regulate 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 facet that connects to the pages — that was really the primary thought I had when enthusiastic about find out 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 comply with alongside.
I gained’t go into all of the drive settings — most of them have been experimental, and animations like this all the time require a little bit of artistic adjustment.
The primary drive 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 useful.
I additionally used a Area Pressure to maneuver the pages mid-air, from the middle outward to the opposite facet.
Most likely crucial half was how I triggered the “Combine Animation.” I used a Vertex Map tag on the Cloner to color a map utilizing a Area, which then drove the Combine Animation parameter within the Fabric 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 offers superb outcomes. By tweaking the edge, you may make it react solely to the brightest areas, which creates a brilliant clear, glowing impact.
The Ultimate Theatrical Ecosystem
Ultimately, 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 reside stage to interface, and from emotion to expertise.
The expertise is pared again to its essence: no superfluous results, no pointless clicks, nothing to tug focus. What stays is what issues most — the work itself, framed in a approach that stays quietly behind the scenes but comes totally alive within the viewer’s arms and on their display screen.
