Source: [MIDI](https://treenodes.com/case-studies/midi/)

This Markdown version is generated from the public page. Visit the source for interactive examples and full-size visuals.

[Projects](https://treenodes.com/case-studies/)

TREENODES · Interactive case studies

# MIDI

An interactive Case Studies section for a product development website, connecting category browsing with project details and imagery.

**Browse all projects**

## TreeNodes’ contribution

Frontend implementation of the Case Studies section using HTML, CSS and jQuery.

MIDI project views

![Archived MIDI Case Studies interface with product categories, a case-study list and an image detail panel](https://treenodes.com/social/project-midi.png?v=d018d2248798)

**Project overview**

 Original archived Case Studies interface in the TreeNodes project frame. TreeNodes’ contribution was this website section; the pictured products are historical client content.

![Edited archive MIDI Case Studies interface with a table-top product list, large project image and thumbnail navigation](https://treenodes.com/assets/projects/archive/midi-tabletop-case-studies.webp?v=48fe2498f1b1)

**Case-study categories**

 Edited archive interface: category navigation connects a case-study list with a detailed image viewer. Contrast and spacing were refined. TreeNodes delivered this website section; pictured products are client content.

![Edited archive MIDI handheld-product case study showing category navigation, project name and three image thumbnails](https://treenodes.com/assets/projects/archive/midi-handheld-case-study.webp?v=ac1f1d7975b8)

**Case-study image detail**

 Edited archive interface: selecting a product category updates the case study and its image details. The presentation was refined for clarity; this demonstrates website work, and the pictured products belong to the client.

THE PROJECT

## Purpose and scope

MIDI needed an interactive way to present case studies within its product development website. TreeNodes built the Case Studies section, providing category navigation, a case-study list and a connected detail view. The contribution covered this section of the website.

**Sector**

Interactive case studies

**Technology**

HTML · CSS · jQuery

### Case-study navigation

The interface organised case studies into categories, allowing visitors to browse the available work and select a project to explore. The selected category, project list and detail area were presented together.

### Frontend implementation

We implemented the section with HTML, CSS and jQuery, connecting the navigation with the displayed project information and imagery. The work focused on the interactive website presentation of MIDI’s case studies.

RELATED SERVICES

## Explore the services behind this work.

-   [Frontend & backend development](https://treenodes.com/services/software-development/)

## Have a system to build or support?

Tell TreeNodes about the business process, the software you need or the system already in use. We can discuss analysis, architecture, implementation and ongoing technical support.

[Discuss your project](https://treenodes.com/contact/) [Explore our services](https://treenodes.com/services/)