Figma to Wordpress
Cele Vans
Cele Vans
Website Design
from Scratch
Website Design
from Scratch
Creating a modern, professional presence for a global energy solutions provider. A comprehensive web design created entirely in Figma and replicated in WordPress. Rom high-fidelity to mockups.
Creating a modern, professional presence for a global energy solutions provider. A comprehensive web design created entirely in Figma and replicated in WordPress. Rom high-fidelity to mockups.
8+
Key Pages
50+
Components
4 Days
Timeline
100%
Responsive
Overview
Overview
Cele Vans, a global leader in energy solutions and petroleum products, needed a complete website design to establish a modern digital presence. The challenge was to create as professional, trustworthy online platform that communicates their expertise in global energy sourcing, distribution, and integrated solutions while appealing to institutional clients and energy industry professional.
Cele Vans, a global leader in energy solutions and petroleum products, needed a complete website design to establish a modern digital presence. The challenge was to create as professional, trustworthy online platform that communicates their expertise in global energy sourcing, distribution, and integrated solutions while appealing to institutional clients and energy industry professional.
Design Challenge
Design Challenge
Cele Vans required a website that could showcase their complex global operations, diverse service offerings, and dcades of industry expertise. The design needed to balance technical credibility with modern aesthetics, making information about energy energy solutions accessible without oversimplifying the company's sophisticated service.
Cele Vans required a website that could showcase their complex global operations, diverse service offerings, and dcades of industry expertise. The design needed to balance technical credibility with modern aesthetics, making information about energy energy solutions accessible without oversimplifying the company's sophisticated service.
Design Objectives
Design Objectives
Create a modern, professional website that communicates Cele Vans' expertise, establishes credibility with institutional clients, and provides clear pathways to explore their diverse service offerings
Target Audience
Target Audience
Institutional energy buyers, business partners, industry professionals, and B2B clients seeking reliable petroleum products and integrated energy solutions from a trusted global provider.
Design Goals
Design Goals
Develop a cohesive visual identity, establish clear information hierarchy, create a responsive design system and deliver high fidelity mockups ready for development handoffs
Design Process
Design Process
A systematic approach from research through high-fidelity
A systematic approach from research through high-fidelity
Research & Discovery
Research &
Discovery
Industry analysis, competitive research, and stakeholder interviews to understand Cele Vans' positioning, target audience, and unique value propositions.
Industry analysis, competitive research, and stakeholder interviews to understand Cele Vans' positioning, target audience, and unique value propositions.
01
Organized content structure around service offerings, regional operations, trust-building elements. Defined clear User Pathways for different audience segments.
Organized content structure around service offerings, regional operations, trust-building elements. Defined clear User Pathways for different audience segments.
Information Architecture
Information Architecture
Information
Architecture
02
Visual design System
Visual design
System
Created comprehensive design system in Figma including color palette, typography, components, and patterns. Established reusable elements for consistency and efficiency
Created comprehensive design system in Figma including color palette, typography, components, and patterns. Established reusable elements for consistency and efficiency
03
Designed all pages with details layouts, realistic imagery, and complete component implementation. Refined visuals based on feedback for production-ready deliverables.
Designed all pages with details layouts, realistic imagery, and complete component implementation. Refined visuals based on feedback for production-ready deliverables.
High-Fidelity Mockups
High-Fidelity Mockups
High-Fidelity
Mockups
04
Research & Strategy
Research & Strategy
Understending the energy sector, competitive landscape,
and user needs to inform design approach
Understending the energy sector, competitive landscape,
and user needs to inform design approach
Strategic Approach
Strategic
Approach
Research revealed that energy sector websites often lack modern design, defaulting to outdated templates. Cele Vans needed to stand out by combining industry credibility with contemporary design aesthetics. The design needed to communicate three key pillars: reliable supply, safe operations, and customer-centric solutions
Research revealed that energy sector websites often lack modern design, defaulting to outdated templates. Cele Vans needed to stand out by combining industry credibility with contemporary design aesthetics. The design needed to communicate three key pillars: reliable supply, safe operations, and customer-centric solutions
Visual Design System
Visual Design System
A cohesive visual system that establishes Cele Vans as a modern,
trustworthy energy solutions provider
A cohesive visual system that establishes Cele Vans as a modern,
trustworthy energy solutions provider
Color Palette
Color Palette
The redesign introduces a professional, modern color system with Navy as the Primary actions, and primary anchor, Orange for Primary actions like buttons, and light blue as the secondary color . This palettes conveys trust, security, and innovation, reliable nature of energy operations
The redesign introduces a professional, modern color system with Navy as the Primary actions, and primary anchor, Orange for Primary actions like buttons, and light blue as the secondary color . This palettes conveys trust, security, and innovation, reliable nature of energy operations
#E8905F
#F5F3ED
#6BA3C5
#6BA3C5
#E8905F
#F5F3ED
#0D2B4E
#0D2B4E
#0D2B4E
Typograaphy
Typograaphy
Clean sans-serif for readability, with bold weights for Hierarchy
Roboto Slab
(64-20)
Heading
Bold
Sub-Heading
Semi-Bold
Lato
(20-14)
Label
Semi-bold / Medium
Body
Regular / Medium
Roboto Slab
(64-20)
Heading
Bold
Sub-Heading
Semi-Bold
Lato
(20-14)
Label
Semi-bold / Medium
Body
Regular / Medium
Roboto Slab
(64-20)
Heading
Bold
Sub-
Heading
Semi-Bold
Lato
20(-14)
Label
Semi-bold / Medium
Body
Regular / Medium
Key Designed Elements
Key Designed Elements
Thoughtful design choices that enhance user experience and
communicate brand values.
Thoughtful design choices that enhance user experience and
communicate brand values.
Hero with
Imagery
Dynamic background featuring energy infrastructure and oil operations. Overlay messaging clearly communicates brand's value propositioning with supporting CTAs
Dynamic background featuring energy infrastructure and oil operations. Overlay messaging clearly communicates brand's value propositioning with supporting CTAs
Three Core
Values
Reliable Supply, Safe & Efficient Handling, and Tailored Customer Solutions presented as three visual pillars icons, descriptions and supporting copy for each value
Reliable Supply, Safe & Efficient Handling, and Tailored Customer Solutions presented as three visual pillars icons, descriptions and supporting copy for each value
Work Process
Visualization
Three-step process breakdown showing how Cele Vans sources, handles, and delivers energy solutions. Numbered steps with detailed descriptions and supporting visuals
Three-step process breakdown showing how Cele Vans sources, handles, and delivers energy solutions. Numbered steps with detailed descriptions and supporting visuals
Global Map
Sections
Regional cards with map graphics showing Cele Vans' operations in different parts of the world. Each region highlights local expertise and service specializations.
Regional cards with map graphics showing Cele Vans' operations in different parts of the world. Each region highlights local expertise and service specializations.
Trust & Credibility
signals
Prominent display of industry certifications, decades of experience, manufacturer partnerships, safety standards. Builds confidence with audiences
Prominent display of industry certifications, decades of experience, manufacturer partnerships, safety standards. Builds confidence with audiences
Responsive
Design
All pages designed with mobile-first approach. Touch-friendly interfaces, readable typography, streamlined navigation and optimized imagery for all screens.
All pages designed with mobile-first approach. Touch-friendly interfaces, readable typography, streamlined navigation and optimized imagery for all screens.
Design Challenge Solved
The biggest challenge was visualizing Cele Vans' complex global operations in a way that felt modern and accessible.
Solution: Used a combination of regional card layouts, process diagrams, and interactive visual elements to break down complexity to breakdown complexity while maintaining sophistication.
The biggest challenge was visualizing Cele Vans' complex global operations in a way that felt modern and accessible.
Solution: Used a combination of regional card layouts, process diagrams, and A visual elements to break down complexity to breakdown complexity while maintaining sophistication.
Available for opportunities
Let’s Work Together To Transform Ideas Into Stunning Designs
Let’s make your brand truly brilliant! Together, we can create a powerful identity that stands out, resonates with your audience and drives lasting impact. Your vision deserves to shine!
Available for opportunities
Let’s Work Together To Transform Ideas Into Stunning Designs
Let’s make your brand truly brilliant! Together, we can create a powerful identity that stands out, resonates with your audience and drives lasting impact. Your vision deserves to shine!
Available for opportunities
Let’s Work Together To Transform Ideas Into Stunning Designs
Let’s make your brand truly brilliant! Together, we can create a powerful identity that stands out, resonates with your audience and drives lasting impact. Your vision deserves to shine!
Available for opportunities
Let’s Work Together To Transform Ideas Into Stunning Designs
Let’s make your brand truly brilliant! Together, we can create a powerful identity that stands out, resonates with your audience and drives lasting impact. Your vision deserves to shine!