Turn the archive into chapters.
The existing screens group travel context, collaboration, architectural studies, sketches, materials and final form. Each group has a distinct place in the narrative.
PROMISE TO PREVAIL
Preparing your experience
01 / Responsive web design · Figma study
An editorial interface that connects travel, architectural references and footwear development—across a wide canvas and a small screen.


Original Figma screens from the Lindsey Design firm archive. The presentation documents a travel and footwear project; it is an editorial experience, not a supply-chain software product.
The source material moves between places, architectural photographs, hand sketches, material references and a digital shoe. The interface needs to help a reader understand how these different forms of evidence connect.
The layouts establish a progression: introduce the journey, show its context, collect references, reveal the sketches, then present the resulting concept. Large visual moments alternate with compact explanatory labels.
Project title and travel context establish what the reader is looking at.
Architecture and cultural references form a visual collection.
Sketches and a material palette connect references to design choices.
A dark final section gives the footwear concept a distinct conclusion.
These wireframes were reconstructed for this case study from the existing Figma screens. They explain the finished composition; they are not original early-stage sketches.
The existing screens group travel context, collaboration, architectural studies, sketches, materials and final form. Each group has a distinct place in the narrative.
Large headings establish the chapter. Photographs, sketches and compact labels provide detail at a second level, so the reader can scan or look closer.
The mobile frame stacks the travel and collaboration content and rearranges the image grid. The final concept keeps its contrasting dark section.
The Figma archive contains the two high-fidelity compositions. It does not establish when wireframing happened or how many iterations were tested. The diagram above is a new explanatory artifact based on those compositions.
The desktop frame is 1551 pixels wide; its mobile counterpart is 393 pixels wide. These are two designed layouts in the original archive. The comparison below shows their actual content and proportions.
This case study examines the presentation itself. The underlying travel and footwear work has its own project page.
A large, high-contrast project title sits over an architectural image. Smaller identity and context labels keep the opening focused.
Side-by-side content becomes a vertical sequence on mobile. The image collection changes arrangement to fit the narrower canvas.
Section dividers, repeated labels and alternating backgrounds distinguish observation, ideation, material and final concept.
Scroll inside the frame to explore the original design.

The original screens show a strong editorial direction. A further usability pass should focus on the reading experience: