Shell Digital Hub: Interactive Web & Blog Design Concept
Shell Digital Hub is a modern, responsive web & blog design with interactive UI, seamless navigation, and a brand-aligned aesthetic for an engaging experience.
App name / Client
Shell
My Role
Research / UX / Visuals
Industry
Energy & Technology (Oil & Gas, IT Services)
Platform
Figma/SharePoint
Shell Digital Hub: Web, Blog & Newsletter Mockup Design
Project Overview
Shell Digital Hub is a visually modern, interactive, and user-friendly web design concept that includes both light and dark mode options to enhance user experience. This project features a corporate website landing page along with a dedicated blog mockup sample, ensuring a seamless blend of aesthetics and functionality. The design prioritizes brand consistency, readability, and an engaging user interface, making it an ideal platform for corporate communication and content engagement.
Overview
Shell Digital Hub is a modern, interactive, and brand-aligned digital experience featuring:
✅ A Landing Page (Light & Dark Mode Options)
✅ A Blog Mockup Landing Page
✅ A Newsletter Mockup Design
This project ensures consistency with Shell’s branding while delivering a user-friendly and visually compelling design. The dual-theme functionality (Light & Dark Mode) enhances readability and accessibility for diverse user preferences.
Project Goals & Challenges
Goals:
✔️ Design a modern, responsive landing page with light & dark mode options.
✔️ Create a structured and engaging blog layout for content discovery.
✔️ Develop a newsletter mockup aligned with Shell’s branding and color consistency.
✔️ Maintain corporate aesthetics while enhancing the visual appeal.
Challenges:
🔹 Ensuring color harmony across light and dark themes.
🔹 Making the newsletter visually engaging while maintaining simplicity.
🔹 Designing intuitive navigation to improve user engagement.
Design Approach
For this project, I focused on delivering high-fidelity visual mockups that align with Shell’s branding and modern UI trends. The design includes:
✅ Landing Page (Light & Dark Mode) – A sleek, adaptable layout providing an engaging user experience.
✅ Blog Mockup Landing Page – A structured design that enhances readability and content visibility.
✅ Newsletter Mockup – A professional and visually appealing layout designed for Shell’s corporate communications.
Color Scheme & Aesthetic Choices
The color concept aligns with Shell’s branding while ensuring a modern, engaging user experience.
Light Mode Colors:
🎨 Background: `D9D9D9` (Soft neutral tone for readability)
🎨 Text & Elements: `DD1D21` (Highlight), `DCEFF` (Accents), `676767` (Supporting elements)
Dark Mode Colors:
🌙 Primary: `0A1930` (Deep navy for a professional and modern look)
🌙 Accent: `8CBFCC` (Soft cyan for contrast and engagement)
🌙 Text & Highlights: `8CBFCC` (Ensuring readability in dark mode)
Common Brand Colors:
🔴 Red (`DD1D21`) – Consistent brand identity
🔵 Accent Colors (`DCEFF`, `676767`) – Enhancing readability and visual balance
Key Features & Design Decisions:
🌟 Dual Theme (Light & Dark Mode) – Allows users to switch for a comfortable browsing experience.
🌟 Engaging Blog Layout – Structured to highlight content visibility.
🌟 Modern Newsletter Mockup – Designed for clarity, engagement, and brand alignment.
🌟 Consistent Branding – Maintains Shell’s professional and corporate aesthetics.
Tools & Technologies Used
🎨 Design Tools: Figma, Adobe XD, Photoshop
📂 File Formats Delivered: High-resolution mockups for Web, Blog & Newsletter
Final Outcome
The Shell Digital Hub design concept successfully enhances digital engagement with its modern layout, theme adaptability, and structured content presentation. The addition of the Newsletter Mockup ensures visual consistency across all digital touchpoints.
Conclusion & Reflection
This project showcases my expertise in UI/UX design, theme adaptability, and corporate branding. By incorporating light & dark mode options, a structured blog layout, and an engaging newsletter design, I have ensured a seamless and visually optimized experience for Shell’s digital ecosystem.