A portfolio website is all the time a private story. In essence, it’s an extension of your persona, whether or not it’s creativity, a inventive enterprise, or one thing else. The primary job is to convey an individual’s imaginative and prescient, capturing the general emotion and feeling.
Additionally it is necessary that that is mixed with a practical half that can be:
- Straightforward to replace
- Straightforward to handle
- Scalable
- Have sure patterns and a system that may be repeated on different pages
From Posters to Internet
Alexandra approached me with a somewhat ambiguous job. She was impressed by posters within the spirit of neo-futurism, with a contact of darkness. Most individuals perceive that such experiments contain an abundance of ornamental parts. Nonetheless, web sites are a bit completely different — we have to concentrate on the content material, take away all pointless parts, and on the identical time, add visible imagery that can be precisely related to this specific particular person.
Background and First Ideas
The primary ideas had been very uncooked and underdeveloped. On the preliminary stage, I centered on discovering the emotional and visible connection with out concentrating on different facets. We went by way of about seven choices, every with its personal distinctive options—some parts we saved in thoughts, whereas others we discarded with out hesitation.
Method to the Core Thought
After I work with unbiased artists, musicians, or tattoo artists, I be sure to totally examine their work. I purpose to know the core message and the power that emanates from the creator.
This usually helps me discover the thread that simply must be pulled in the correct path. That’s precisely what occurred right here. Certainly one of Alexandra’s widespread but considerably scary works is the creation of a masks for the film Hellraiser. The masks was meticulously handcrafted. Alexandra shared some behind-the-scenes photographs. I can’t present all of them, however I’ll share just a few.
The first supplies used within the manufacturing of costumes and decorations are latex, steel, and plastic. The knight served as the primary character, bringing all these parts collectively logically.
Modeling & Design
The largest problem I face in each undertaking is that this: to mannequin, render, and, alongside the best way, determine how we’ll combine it—whether or not by way of video, Spline, WebGL, or another methodology.
It’s essential to not overload the scene, so I all the time remember that the mannequin shouldn’t be hyper-realistic or have an extreme variety of polygons. In any other case, every thing will disintegrate.
Along with the mannequin not being heavy, it ought to be obtainable in all codecs and resolutions, and it ought to seamlessly mix with the general picture of the web site.
We examined every potential body with the content material and solely then ready the motion that we had mentioned and envisioned.
Digital camera Binding
We initially understood that creating depth would require extra than simply fundamental rotation or motion of the mannequin alongside one axis. To realize depth, typically it’s sufficient to easily present it. Along with Alexandra, we determined to make use of the digital camera to show the mannequin alongside every axis, including depth to the primary web page.
Controlling the digital camera is a problem that may be approached in a number of methods:
- Straight management the digital camera because the consumer scrolls.
- Create a digital camera rig within the unique render.
- Hyperlink After Results and synchronize every thing accordingly.
We selected the second choice, which we examined in opposition to the content material. It’s necessary to know that that is an iterative course of, and we could must take a step again every time.
Different Pages
Initially, we assumed there can be extra pages, every containing part of the knight, resembling a hand on the About web page, a head on the Service web page, and so forth. The primary web page can be the core, with all the opposite pages that includes scattered items of the knight.
Nonetheless, after some discussions, we determined to restrict ourselves to a couple pages. Subsequently, we transferred a part of the knight, significantly the pinnacle, individually to the Providers web page.
Cellular Model
For the cell model, we would have liked to have fewer frames per scene or reformat your complete interactive. The second choice appeared too uncommon to me, creating such a distinction. Ultimately, we selected the primary choice and easily diminished the variety of frames and adjusted the facet ratio. The scene mirrors the motion from the desktop model, simply with fewer frames.
We saved every thing because it was on the looped model of the companies web page, with out altering any of the actions. The standard of the render and its optimization made this attainable.
The Energy of Collaboration
This undertaking started as an enormous experiment. Most of our communication was by way of messaging apps. I used to be so engrossed that I feel I labored on this undertaking 24/7 as a result of I used to be decided to realize nice outcomes. Generally, attention-grabbing concepts would come to me at random occasions, and I might instantly share them with Alexandra for her ideas. We might then mix our options and uncover one thing completely new. Ultimately, it turned out to be an incredible undertaking, due to our shut collaboration and shared need to create one thing unforgettable and memorable.
Now, Alexandra continues her work in movie, and I hope to see new initiatives quickly that I’ll gladly add to her web site!
Applied sciences and Software program
- Frontend: Webflow, Lenis Scroll
- Backend: Webflow, Amazon S3
- Instruments: Figma, Cinema4D & Redshift
