TreeNodes.
Discuss a project
Projects

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

View 1 of 3

Archived MIDI Case Studies interface with product categories, a case-study list and an image detail panel Archived MIDI Case Studies interface with product categories, a case-study list and an image detail panel
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
TreeNodes.
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
TreeNodes.
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.

Swipe or use the arrows to explore the project. Enlarge an image for a closer look.

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.

LET’S TALK

What would you like to build or improve?

Tell us 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 a project Explore our services

A closer look

Swipe or scroll inside the view to explore the full visual.