SUTATO

The project’s turning point came through feedback: preserve the familiar strengths of card-based discovery, establish a clearer editorial hierarchy and let reading continue without repeated interruptions.

The revision brief called for a clearer discovery sequence: a strong lead, recent stories, trending content and curated deeper reading. It also asked for the next article to begin within the same reading flow.

Those decisions were first developed at low fidelity. The wireframes concentrated on hierarchy, navigation, reusable card families and mobile adaptation. Keeping that phase structural gave the feedback a direct place in the work: each request could be traced to a change in the page or its behaviour.

The reference publications served different purposes. GamingBible informed discovery logic; Game Informer informed editorial importance and magazine pacing. SUTATO’s later visual expression was developed from its supplied brand material.

The visual direction, Signal Cut, takes its cut geometry from the rhythm of SUTATO’s supplied wordmark. Yellow marks selected moments, while image scale, condensed headlines and asymmetric composition establish the pace of the page.

The device is used at editorial openings, changes of section and reading boundaries. Limiting its repetition helps those moments remain distinct. The reading area is calmer, with a stable text column and space for longer passages.

Typography also involved a practical handoff decision. The supplied DDT family was unavailable in the Figma editing environment, so editable headings use Barlow Condensed and reading text uses Barlow. The supplied wordmark remains intact. This keeps the typography editable while retaining the compressed headline rhythm of the direction.

A publication needs more than a repeated card grid. The final home includes several editorial formats: a visual Stories rail, a compact Brief, a Two Sides debate, a weekly Radar and an image-led Editor’s Cut.

Each format changes how a story is encountered. Some support a quick scan; others invite a longer pause. The listing page carries that hierarchy into a category view, combining lead content, analysis and a chronological feed.

On mobile, the composition is reconsidered around a dominant image and a concise supporting sequence. Image scale and editorial priority carry across the breakpoints without requiring every desktop arrangement to stack unchanged.

The article design removes repeated related-story interruptions from the body. After one article ends, the next begins with its own masthead and image within the same scroll. The transition remains identifiable, so the continuous experience still has editorial boundaries.

The prototype makes that behaviour inspectable. It also includes category filters, navigation, story viewers and a hero carousel. Automatic progression is limited: the hero advances once, then stops; manual controls remain available.

The standalone review artifact adds a working reading stream and records keyboard focus handling for its overlays and reduced-motion support. These behaviours make the design easier to evaluate as an experience, including how someone opens, closes and returns from an interactive element.

The work includes mobile and desktop Figma prototypes, a separate design-rationale page and a self-contained HTML review artifact. The delivery documents record visual and interaction checks, with evidence at several screen sizes.

The project demonstrates how feedback, editorial structure, brand expression and behaviour can stay connected through a design revision. The article content and imagery in the prototype are demonstration material; the deliverable is the publication experience itself.