A portfolio web site is at all times a private story. In essence, it’s an extension of your persona, whether or not it’s creativity, a artistic enterprise, or one thing else. The primary process 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 purposeful half that will likely be:
- Straightforward to replace
- Straightforward to handle
- Scalable
- Have sure patterns and a system that may be repeated on different pages
From Posters to Net
Alexandra approached me with a fairly ambiguous process. 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. Nevertheless, web sites are a bit completely different — we have to concentrate on the content material, take away all pointless parts, and on the similar time, add visible imagery that will likely be precisely related to this specific individual.
Background and First Ideas
The primary ideas had been very uncooked and underdeveloped. On the preliminary stage, I targeted on discovering the emotional and visible connection with out concentrating on different points. We went via about seven choices, every with its personal distinctive options—some parts we saved in thoughts, whereas others we discarded with out hesitation.
Strategy to the Core Thought
Once I work with impartial artists, musicians, or tattoo artists, I be sure that to completely examine their work. I goal to grasp 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 proper course. 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 pictures. I can’t present all of them, however I’ll share a couple of.
The first supplies used within the manufacturing of costumes and decorations are latex, steel, and plastic. The knight served as the principle character, bringing all these parts collectively logically.
Modeling & Design
The most important problem I face in each challenge is that this: to mannequin, render, and, alongside the best way, determine how we’ll combine it—whether or not via video, Spline, WebGL, or another methodology.
It’s essential to not overload the scene, so I at all times remember that the mannequin shouldn’t be hyper-realistic or have an extreme variety of polygons. In any other case, all the things will collapse.
Along with the mannequin not being heavy, it ought to be accessible 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.
Digicam Binding
We initially understood that creating depth would require extra than simply primary rotation or motion of the mannequin alongside one axis. To attain depth, typically it’s sufficient to easily present it. Along with Alexandra, we determined to make use of the digicam to show the mannequin alongside every axis, including depth to the principle web page.
Controlling the digicam is a problem that may be approached in a number of methods:
- Immediately management the digicam because the person scrolls.
- Create a digicam rig within the authentic render.
- Hyperlink After Results and synchronize all the things accordingly.
We selected the second choice, which we examined in opposition to the content material. It’s necessary to grasp that that is an iterative course of, and we might have to take a step again every time.
Different Pages
Initially, we assumed there could 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 could be the core, with all the opposite pages that includes scattered items of the knight.
Nevertheless, after some discussions, we determined to restrict ourselves to some pages. Subsequently, we transferred a part of the knight, significantly the top, individually to the Companies web page.
Cellular Model
For the cellular model, we wanted to have fewer frames per scene or reformat the whole interactive. The second choice appeared too uncommon to me, creating such a distinction. Ultimately, we selected the primary choice and easily lowered the variety of frames and adjusted the facet ratio. The scene mirrors the motion from the desktop model, simply with fewer frames.
We saved all the things 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 potential.
The Energy of Collaboration
This challenge started as an enormous experiment. Most of our communication was via messaging apps. I used to be so engrossed that I feel I labored on this challenge 24/7 as a result of I used to be decided to realize nice outcomes. Generally, fascinating concepts would come to me at random instances, 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 a tremendous challenge, because of 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 tasks 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
