React
Eleventy
Docusaurus
Greensock (GSAP)
Sass
BlenderOverview
Stackblitz approached This Dot Labs to help rebrand their public facing sites with updated design standards, and sync the design systems of multiple subdomains’ sites across disparate codebases.
Services Provided
This Dot Labs developed a design system rooted in previous branding, but updated to express the speed and uniqueness of this release.
It incorporates impactful 3D graphics, bold colors and statements, consistent themes throughout disparate subdomains, and sets the framework for future messaging and layouts.
Tech-stack
- React
- Eleventy
- Docusaurus
- Greensock (GSAP)
- Sass
- Blender
- Figma
- Illustrator
- Photoshop
- React for an interactive front end.
- Eleventy for the blog site.
- Docusaurus for the documentation site.
- Greensock for animations.
- SCSS for versatile styling.
- Blender for 3D images and animations.
- Figma for prototyping and collaboration.
- Photoshop for gluing it all together.
- Illustrator for vector images and optimization.
Wiring Parts of the Whole
Overall, this project was a practice in braiding together many aspects of StackBlitz’s software collection, and distilling a largely undefined, novel technology’s use cases into digestible but impactful literature, web experiences, and consistent, on-brand graphics.
Responding to User Feedback
In order to provide the most useful and dynamic interface, This Dot Labs team worked with StackBlitz’ to understand the whole of the product offering, not just the newly released technology alone, and user feedback.
This allowed us to tailor more targeted messaging and designs for different demographics, ie. developers using the platform everyday, vs. an Enterprise manager choosing a technology to trust.
Creating a Unique Visual Experience
Combining Blender 3D graphics, SVG masks, and the GSAP animation library, we created a unique visual experience for Enterprise customers, describing product functionality with few words, and retina-ready images optimized with low file sizes.
