Website Redesign
Background
After transitioning from my career with software to construction. I want to rebrand myself and ventures to all have a distinct theme. I am wanting to reuse and create new similar assets from my software portfolio to create my online presence.
The primary function for the website is for my construction team and clients. I work with wonderful artist and architects who do not have a platform to showcase the projects we complete along with conceptual work. I want the website to be a unique user experience to show we are more than just hammering nails and moving dirt.
Random project pictures: https://imgur.com/a/ywyxG0B
Skills Required
Proficient in babylon.js with effects, animations, post-processing, meshes, camera & viewpoints, load optimization. The overlay can be developed at a later time or with another developer if necessary. The primary task is the 3D experience.
Scenes
I created a rough example of the fantasy scene that can be found at: stormheart.net
The website is seperated into three sections for each of the three category. All of the scenes follow the same layout with a glove and heart as the primary object. The enviorment will use a cel-shading renderer effect.
Construction (work glove)
Glove: White, gray, black modern work glove.
Heart: Gray rough concrete.
Background: Small gray rock wall.
Animation: concrete powder dripping
The construction scene will follow the theme with the glove and heart as a center piece. Instead of the fantasy theme it will use the style listed above, all 2D & 3D assets required will be provided.
This page will also require a CAD viewer for the projects page. The cad viewer will not be apart of the scene with the glove. It will look similar to sketchup where I can upload the files for clients to view easily. No animations or functions just the ability to scroll around the object.
Studio (fantasy glove)
Blog for game design and other entries that do not have to do with the other game. Game server network and other game hostings for stormheart.net
Glove: Leather, metal, brown fantasy glove.
Heart: Fleshy realistic color.
Background: No background objects.
Animations: Heart pulsing and beating, hand is slowly clenching, static & electric effects.
Low opacity cloud effects in the background with thunder effects lighting up the sky.
Game (combat glove)
The game development page is for a 2D platformer shooter that is under development. This scene will show characters from the game interacting with the scene while still keeping the glove and heart theme.
The game is a passion project for me and I want to have a dedicated area to write development blogs and changelogs. This scene will eventually become the launch page once the game is finished.
Glove: Brown, green, black plastic, military glove.
Heart: Wires, number pad, explosive device shapes as a heart.
Background: Curved 2D plane for sprite game animations.
Animations: Changes into random combat hand signals and finger gun.
The background will have characters from the game simulating some gameplay on the plane showing the characters shooting at eachother.
After the finger bang a drop down for how to control appears and the characters can walk around and shoot on the screen badguys spawn from behind the glove or parachute in. The plane the video game characaters are on rotates the camera for the glove and walk around in a 3D circle scrolling down will reveal the blog and team for the projecta
Transitions
To make the three scenes flow transitions to make it feel as if the whole page is continuous. The website hyperverve.com uses this effect when pressing either the about or contact button. Transitions will require more assets and can be added at a later time.
Waiting for assets to load.
Simplistic white screen loading bar thin line. Then transition to white cloud effects to give time for the mesh to render.
The cloud effects will show a sillohette until the mesh is loaded only seen when thunder lights it up.
Studio to Construction
The realistic heart solidifies into white rock, using an effect to show the transform bottom to top. Once the hand is rock, the glove squeezes the heart in it’s palm and crushes it into fragments. The camera pans down following the crushed stone to the construction glove below. The crushed rock lands in the rock retainment wall formation to create the background. A liquid effect of dark concrete pours from above filling up the new concrete heart.
Construction to Studio
The landscape rocks levitate and merge into the concrete heart then lightning hits the heart flashing the screen so it can switch to the fantasy scene.
Construction & Fantasy to Game
One of the characters rappels down and plants an explosive on the heart and it count’s down 3-2-1-! quickly then it explodes to a white screen to transition into the new scene.
Military to Construction
Cartoony skid steer pushes all the characters and game enviorment out of the frame and they fall off. The camera follows the same transition of the rocks falling from the Studio to Construction transition.
Military to Fantasy
A smoke grenade drops down and it goes back to the white clouds and repeat the intro scene.
Page Layout Overlay
All three of the scenes will have the same overlay with a pull out tab or drop-down content page from each of the 4 sides. The overlay can be developed separately and applied onto the canvas. The overlay example can be found here.
The overlay needs to be a white clean and modern layout.
Website Requirements
- Ability to add more projects or blog posts through ajax.
- Navigation at top right drop down to select different categories.
- Mobile accessability, swipe in direction to pull up tabs or close.
- Optimized loading times, compressed.
Construction (work glove)
Construction services, project portfolio, sketchup file viewer, architecture, designs.
Left:
- Gives a general summary about what we do.
- Team page with photos of members and roles.
- Availability and hours.
Right:
- Client Portal, chat logs, set up projects, share images and cad files, view CAD.
Top:
- Services and pricing for what we offer.
- Dirt work (grading), investment property renovation, additions (pergolas, structures), concrete (demolition, hardscape, and recycling), rock work retainment walls.
Bottom:
- Projects, completed projects
Studio (fantasy glove)
Misclaneous game servers, game wiki.
Left:
- Gives a general summary about what we do.
- Team page with photos of members and roles.
Right:
- Connection information, server statistics, launch games.
Top:
- Servers & content updates
Bottom:
- Wikipedia & Documentation
Game (combat glove)
Game information, updates, changelog, documentation.
Left:
- Gives a general summary about the game is.
- Team page with photos of members and roles.
Right:
- Play or launch game in browser.
Top:
- Blog
Bottom:
- Mechanic Documentation
Contact
For more questions feel free to get a hold of me below.
Josh Wilson
josh@stormheart.net
discord: dandelion#8578
last updated - 23/6/2020 05:43 MDT