TARHOUNI.M PORTFOLIO
Go to content

UI/UX DESIGN - Portfolio | Tarhouni Mohamed

03 // UI/UX ARCHITECTURE · HMI & CUSTOM FRONT-END DEVELOPMENT

SYSTEM-LEVEL UX. PIXEL-PERFECT PRECISION.

IoT monitoring dashboards, business applications, and high-converting web platforms. We transform complex software logic into intuitive, seamless, and precisely engineered digital experiences.

LET'S DISCUSS YOUR PROJECT
04 Pillars of Expertise / UI/UX Architecture & Code

System ergonomics. Code execution.

From cognitive architecture to isolated front-end integration, every interface is engineered as a complete system: readable under pressure, modular in Adobe XD, and delivered in clean, frictionless code.

UX Architecture and cognitive ergonomics
Pillar — 01 Ref. UX-ARCH

UX Architecture & cognitive ergonomics

Modeling user journeys and complex business logic. Structuring information architecture, creating frictionless user flows, and wireframing designed to eliminate unnecessary cognitive load.

  • User Flows
  • Wireframing
  • UX Audit
B2B ImpactImmediate user adoption and a drastic reduction in navigation errors.
UI Design systems and Adobe XD prototyping
Pillar — 02 Ref. UI-SYS

UI Design systems & XD prototyping

Building modular component libraries in Adobe XD. Strict definition of color tokens, pixel-perfect grids, interactive states, and high-fidelity clickable prototypes ready for technical validation.

  • Adobe XD
  • UI Tokens
  • Active Prototype
B2B ImpactAbsolute visual consistency and accelerated future application development.
Dashboards, HMI and business interfaces
Pillar — 03 Ref. HMI-PRO

Dashboards, HMI & business interfaces

Designing Human-Machine Interfaces (HMI), IoT supervision cockpits, and SaaS platforms. Surgical prioritization of telemetry data, anti-fatigue contrasts, and real-time readable alert signaling.

  • Industrial HMI
  • SaaS & IoT
  • Data Viz
B2B ImpactInstant decision-making and maximum operator safety in the field.
Custom development and integration
Pillar — 04 Ref. DEV-WX5

Custom development & integration

Translating mockups into clean HTML5, CSS3, and JavaScript components in WebSite X5 Pro and Visual Studio. Encapsulated, prefixed, and optimized CSS architecture for fast rendering without conflicts.

  • HTML5 / CSS3
  • WebSite X5 Pro
  • Isolated Code
B2B ImpactPixel-perfect fidelity, maximum performance, and simplified maintenance.
03 CASE STUDIES / UI/UX SYSTEMS & CODE DEPLOYMENT

FLOW INTELLIGENCE. PIXEL PRECISION.

Three digital architectures where industrial engineering standards meet interface design: multi-screen ecosystems, adaptive design systems, and custom-coded supervision cockpits.

Multi-screen interface architecture and Adobe XD UX flows MULTI-SCREEN ECOSYSTEM
Case — 01Ref. UX-FLOW

Application ecosystem: UX architecture & multi-screen flows

Structuring a high-density information application environment: complete user journey mapping, visual prioritization of critical data, and modular breakdown in Adobe XD to guide the operator with zero cognitive overload.

  • XD User Flows
  • HD Wireframes
  • Info Architecture
B2B ImpactImmediate intuitive navigation and drastic reduction in execution time for complex tasks.
Responsive UI Design System for Desktop and Mobile ADAPTIVE UI SYSTEM
Case — 02Ref. UI-RESP

Design System: responsive continuity from desktop to mobile

Designing an adaptive interface system ensuring a seamless experience from widescreen monitors to mobile devices: fluid grids, controlled breakpoints, reusable atomic components, and calibrated typography for consistent readability.

  • Fluid Grids
  • Atomic UI Kit
  • Multi-Device
ImpactSeamless user experience across all screens and absolute retention of conversion rates.
Industrial HMI dashboard and HTML CSS JS code integration for WebSite X5 Pro INDUSTRIAL HMI & CODE
Case — 03Ref. HMI-WX5

Industrial cockpit: HMI supervision & CAD-Grade integration

Industrial telemetry interface demonstrator merging real-time sensor visualization, prioritized dark-mode alerts, and front-end integration in isolated HTML/CSS/JS components, directly deployable in a WebSite X5 Pro environment.

  • IoT Telemetry
  • Dark UI System
  • WX5 Isolated Code
ImpactSurgical readability of critical data and direct web integration without technical conflicts.
System workflow · From specification to production component

From ergonomic analysis. To interactive system.

A rigorous development cycle inspired by industrial methods: each milestone eliminates cognitive friction, structures components, and guarantees clean, robust, and standalone front-end code.

  1. 01 • AUDIT & FLOWS Milestone 01 - Flow audit and UX architecture
    Phase — 01 Ref. UX-AUD

    Flow audit & UX architecture

    In-depth analysis of user journeys, operational flow mapping, and prioritization of critical data. Defining interaction rules before any graphic formalization to eliminate cognitive friction.

    • User Flows
    • Info Architecture
    • Business Matrix
    Certified deliverableMaster journey blueprint and validated functional mapping.
  2. 02 • DESIGN SYSTEM Milestone 02 - Design System and interface tokens
    Phase — 02 Ref. SYS-TOK

    Design System & interface tokens

    Designing modular grids, color variables, and the atomic component library in Adobe XD. Every element is documented to ensure flawless multi-screen consistency.

    • Design Tokens
    • XD Atomic Kit
    • Modular Grid
    Certified deliverableComplete Design System and tested high-fidelity interactive prototype.
  3. 03 • DEV & ISOLATION Milestone 03 - Development and code isolation
    Phase — 03 Ref. DEV-ISO

    Development & code isolation

    Surgical translation of mockups into HTML5, semantic CSS3, and modular JavaScript. Full style encapsulation for native integration with zero conflict with the host structure.

    • Pure HTML5 / CSS3
    • WX5 Isolated Code
    • JS Micro-Scripts
    Certified deliverableValidated front-end components, cross-browser tested with zero dependencies.
  4. 04 • QA & DEPLOYMENT Milestone 04 - QA testing, SEO and final deployment
    Phase — 04 Ref. REC-DEP

    QA testing, SEO & final deployment

    Responsive adaptation testing across all resolutions, load time validation, and semantic SEO markup. Clean injection into the WebSite X5 Pro Code Object with technical documentation.

    • Cross-Device QA
    • Semantic SEO
    • WX5 Pro Injection
    Certified deliverableProduction-deployed code, maintenance documentation, and full handover.
Start a project with this method
Dual Culture · CAD Engineering & Front-End Architecture

System architecture. Interface precision.

Most digital projects fail in the friction between the physical product, the mockup, and the code. My hybrid profile unifies these three worlds into a single workflow with zero information loss.

PILLAR 01 • REAL CODE Pillar 01 - Zero uncodable mockups
Pillar — 01 Ref. DEV-REAL

Zero uncodable mockups

Every Adobe XD screen is designed from the ground up with the real constraints of the DOM, CSS Grid, and WebSite X5 Pro. Zero friction during development.

  • Native Adobe XD
  • DOM & CSS Grid
  • Zero Friction
Operational gainComplete elimination of costly back-and-forth between designer and developer.
PILLAR 02 • INDUSTRIAL HMI Pillar 02 - Interfaces connected to the real product
Pillar — 02 Ref. HMI-PROD

Interfaces connected to the real product

My CAD engineering background allows me to understand your machines, sensors, and data. Your HMI faithfully reflects the physical operation of your industrial equipment.

  • Hardware Culture
  • HMI Supervision
  • IoT Telemetry
Operational gainBusiness ergonomics immediately understood by your operators and engineers.
PILLAR 03 • UNIFIED FLOW Pillar 03 - One single lead, from flow to code
Pillar — 03 Ref. UNIF-FLOW

One single lead, from flow to code

UX architecture, Design System, HTML/CSS/JS integration, and SEO markup are orchestrated by a single point of contact. You eliminate translation losses between multiple providers.

  • Single Contact
  • Continuous Flow
  • 100% Consistency
Operational gainReduced time-to-production and absolute fidelity to the brief.
PILLAR 04 • CAD RIGOR Pillar 04 - CAD rigor applied to digital
Pillar — 04 Ref. CAD-TOKEN

CAD rigor applied to digital

Tolerances, bills of materials, and versioning: I apply engineering office standards to interface design. Every component is dimensioned, encapsulated, and reusable like a certified mechanical part.

  • Design Tokens
  • Encapsulated Code
  • B2B Scalability
Operational gainA robust, documented, and scalable digital system with zero technical debt.
SYS.READY // B2B Consultation & Pricing
SLA: Response < 48H // International
Direct Consultation / Scoping & B2B Pricing

Your product is precise. Your brand image should be too.

Brand identity, ISO datasheet redesign, industrial packaging, or 3D visuals: submit your goals or technical files. Receive a feasibility analysis, a locked production timeline, and a priced proposal within 24 to 48 hours.

Submit a Project Schedule a Direct Discussion
  • Strict Confidentiality

    Non-disclosure agreement (NDA) guaranteed from the very first file exchange.

  • Engineering Reactivity

    Feasibility study, detailed quote, and timeline delivered within 48h.

  • Full Ownership

    Complete transfer of native source files (.AI, .INDD, .STEP) upon delivery.

Back to content