A portfolio web site 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 principle activity is to convey an individual’s imaginative and prescient, capturing the general emotion and feeling.
It’s also necessary that that is mixed with a useful half that will likely be:
- Simple to replace
- Simple 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 quite ambiguous activity. 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 components. Nevertheless, web sites are a bit totally different — we have to concentrate on the content material, take away all pointless components, and on the similar time, add visible imagery that will likely be precisely related to this explicit particular person.
Background and First Ideas
The primary ideas have been very uncooked and underdeveloped. On the preliminary stage, I targeted on discovering the emotional and visible connection with out concentrating on different features. We went by about seven choices, every with its personal distinctive options—some components we saved in thoughts, whereas others we discarded with out hesitation.
Method to the Core Concept
Once I work with impartial artists, musicians, or tattoo artists, I make sure that to completely research their work. I goal to know the core message and the power that emanates from the creator.
This typically helps me discover the thread that simply must be pulled in the fitting path. That’s precisely what occurred right here. Certainly one of Alexandra’s in style 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 number of.
The first supplies used within the manufacturing of costumes and decorations are latex, metallic, and plastic. The knight served as the primary character, bringing all these components 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 video, Spline, WebGL, or another technique.
It’s essential to not overload the scene, so I all the time remember the fact that the mannequin shouldn’t be hyper-realistic or have an extreme variety of polygons. In any other case, every little thing will crumble.
Along with the mannequin not being heavy, it needs 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.
Digicam Binding
We initially understood that creating depth would require extra than simply fundamental 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 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:
- Immediately management the digital camera because the person scrolls.
- Create a digital camera rig within the authentic render.
- Hyperlink After Results and synchronize every little thing accordingly.
We selected the second choice, which we examined towards the content material. It’s necessary to know that that is an iterative course of, and we could have to take a step again every time.
Different Pages
Initially, we assumed there can be extra pages, every containing part of the knight, corresponding to a hand on the About web page, a head on the Service web page, and so forth. The principle web page can 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. Due to this fact, we transferred a part of the knight, notably the pinnacle, individually to the Providers web page.
Cell Model
For the cellular model, we wanted to have fewer frames per scene or reformat all the interactive. The second choice appeared too uncommon to me, creating such a distinction. In the long run, we selected the primary choice and easily diminished the variety of frames and adjusted the side ratio. The scene mirrors the motion from the desktop model, simply with fewer frames.
We saved every little 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 doable.
The Energy of Collaboration
This undertaking started as an enormous experiment. Most of our communication was by 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 attain nice outcomes. Generally, attention-grabbing concepts would come to me at random instances, and I’d instantly share them with Alexandra for her ideas. We’d then mix our options and uncover one thing completely new. In the long run, it turned out to be an incredible undertaking, 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 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