IOTEN SYSTEM - Design, Development & Creative Identity
SERVICES
Design, Strategy, Website Development, Logo
TECHNOLOGY
next.js, Figma, Contentful, GSAP
Overview
The website IOTEN.IO is my personal platform presenting services related to digital product design and web development.
The project was conceived as a combination of:
- portfolio website
- service presentation platform
- experimental design and frontend playground.
The website presents services related to UX/UI design and modern web development, as well as the methodology used in building digital products — from strategy and concept to development and optimization.
The entire project was created independently, including brand identity, UX/UI design, development, and deployment.
The Concept Behind the Name
The name IOTEN and the domain ioten.io are built around a symbolic numerical concept.
The structure comes from:
- IO = 10
- TEN = 10
Which forms the sequence:
10 10 10
or 101010.
In binary notation, 101010 equals 42 in the decimal system.
The number 42 is widely known in tech culture as “the answer to everything,” originating from The Hitchhiker’s Guide to the Galaxy.
This concept subtly connects technology, coding culture, and brand identity.
Website Concept
The website was designed to present the process of building digital products, not just the final result.
The structure explains the stages of collaboration on digital projects:
- strategy and idea validation
- UX research and wireframing
- visual design
- development and implementation
- optimization and long-term support.
This approach communicates that building a website is not only about code, but about designing a complete digital experience.
UX/UI Design
The interface was designed in Figma with a focus on clarity, modern aesthetics, and technological character.
Key design principles include:
- minimalist layouts
- strong typography and spacing
- clear content hierarchy
- subtle motion and interactions.
The design aims to position the website as both a portfolio and a demonstration of frontend capabilities.
Hero Animation – SVG & GSAP
One of the most distinctive elements of the website is the animated hero section.
The animation was created in two stages:
- Design in Figma – creation of visual elements and illustrations.
- Implementation using SVG and GSAP – animating the elements directly in the frontend.
This technique allows the graphics to move dynamically and respond to interactions such as scrolling.
Benefits of this approach include:
- smooth animations
- lightweight assets
- full control of animation timing and behavior.
Development & Technology
The website was built using a modern web stack designed for performance and scalability.
Technology stack
- Next.js – React framework for fast web applications
- Contentful – headless CMS for content management
- GSAP – advanced animation library
- Figma – UI design and prototyping.
This architecture ensures:
- fast performance
- flexible content management
- scalability for future features.
Brand Identity
The project also included the creation of a complete visual identity for the IOTEN brand.
Deliverables included:
- logo design
- typography system
- color palette
- visual style for illustrations and animations.
This ensures that the website and brand communication remain consistent and recognizable.
Results
The final result is a fully custom portfolio and service platform that combines branding, design, and modern frontend development.
Key outcomes include:
- complete brand identity creation
- custom UX/UI design
- advanced animated hero built with SVG and GSAP
- scalable architecture using Next.js and Contentful.
The project reflects the philosophy behind IOTEN — where design and code are treated as equal components of building digital products.