Orbit570

Orbit570 — Agency Portfolio Website Redesign

Overview

Orbit570 is a web development and digital agency requiring a premium redesign of their own portfolio website to match the quality and visual ambition of world-class agency references. The project involved redesigning the website from the ground up in Elementor — inspired by GAPSY Studio and Wavespace Agency — with matched fonts and color palette, a custom animation addons plugin for advanced motion effects, and scroll-triggered animations to deliver a high-end, memorable agency web presence.

The Challenge

Redesigning an agency's own portfolio to the standard of top-tier international references is one of the most demanding design briefs — the result directly represents the agency's capabilities to every prospective client. Key challenges included:

• Studying and replicating the visual language, typography, and color direction of the GAPSY Studio reference site as closely as possible
• Learning and implementing a new animation addons plugin — with a large library of widgets, animation options, and configuration parameters — within the project timeline
• Building advanced scroll-triggered and page load animations including shrink effects, card stack interactions, and motion reveals
• Resolving glitching issues with the card stack widget during scroll interaction
• Delivering a hero section and portfolio presentation that matches the production quality of internationally recognized agency websites

Development Process

Setup & Preparation

A full site backup was taken before any design work began. The animation addons plugin's pro features were activated and configured. Extensive time was spent reading plugin documentation, exploring widget options, and experimenting with animation configurations — as the plugin offered a large range of widgets and motion parameters requiring hands-on learning before production use.

Font & Color Matching

The GAPSY Studio reference site's typography was studied and matched — fonts were downloaded and uploaded as custom fonts within Elementor's custom font system. The color palette from the reference was applied globally to align the visual identity as closely as possible with the target aesthetic.

Hero Section Design

A new homepage hero section was designed referencing GAPSY Studio's layout and visual direction — with advanced animations applied using the animation addons plugin. Page load animations including shrink and reveal effects were implemented to create a high-impact first impression on site entry.

Portfolio Card Stack

A card stack widget was implemented for the featured projects and portfolio section — creating a scroll-driven stacking card interaction for showcasing agency work. Initial glitching behavior during scroll was identified and investigated as part of the ongoing refinement process.

Key Features

• Premium Agency Reference Design — Visual direction matched to GAPSY Studio with Wavespace as secondary inspiration
• Custom Animation Addons — Advanced scroll-triggered and page load animations via premium Elementor animation plugin
• Custom Font Matching — Reference site fonts downloaded and uploaded as custom Elementor fonts
• Matched Color Palette — Global color system aligned with the GAPSY Studio reference
• Animated Hero Section — Page load shrink and reveal animations on the homepage hero
• Card Stack Portfolio — Scroll-driven card stack interaction for featured project showcase

Result

A premium, animation-driven agency portfolio redesign for Orbit570 — built in Elementor with a matched GAPSY Studio visual direction, custom fonts, advanced motion effects via the animation addons plugin, an animated hero section, and a card stack portfolio interaction, raising the agency's own website to the visual standard of internationally recognized creative agencies.