Design Brief

By: District

Online Magazine Web Design Requirements Document

Project Name: DISTRICT (Online Magazine of Ideas, Culture, and Philosophy)

Project Scope

This project involves the creation of a minimal, elegant website for an online magazine titled DISTRICT - מחוז. The focus is on long-form editorial content, strong typography, and an immersive, readable experience. The website will be built using Decap CMS, Eleventy, and hosted on Netlify. The design should emphasize clear content hierarchy, generous spacing, and bold, expressive elements for landing pages while maintaining a calm, legible reading experience.

The core of the site will consist of:

The designer is encouraged to bring creative input to the look and feel, particularly in how typography, imagery, and grid are used. Inspiration comes from sites like Materia, Inque, Cero, Byline, Techniques Journal, Noema, and Hazman Hazeh.

About District

Online Magazine of Ideas, Culture, and Philosophy

Born to de-obsess specialization and encourage explorative thought in any one’s “district of interest”.

A platform for articles in English and Hebrew: reflective essays, critical takes, experimental formats, or non-neutral cultural commentary. Articles will be intellectual without being institutional: thoughtful, informed, opinionated, and curious, but deliberately post-academic. The writing is serious in intention, but accessible in form.

It’s a digital space for both writers and readers who explore with the seriousness of formal education but write better without it.

Visually, District should feel colorful but not loud, expressive but readable. The design should lean into values of curiosity and clarity.

Deliverables

The designer will be responsible for delivering the following assets:

Branding & Visual Identity

Page Templates

Typography

Visual Components

We’re looking for a look that reflects the brand’s values—don’t hold back on creativity in this part, as long as it supports clarity and consistency.

Functional Guidelines

Technical Considerations

The site will be built using:

The designer’s output must be compatible with 11ty’s templating system, which will either use Nunjucks or Liquid templating (TBD).

Templates will be populated with content from Markdown files and should include placeholder variables in double curly braces curly braces {}, as shown in the example below:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>{{ title }}</title>

<meta name="description" content="{{ description }}">

</head>

<body>

<article>

<header>

<h1>{{ title }}</h1>

<p>

<strong>By {{ author }}</strong><br>

</p>

<p>

<strong>Issue:</strong>

{{ issue }}

</p>

</header>

<section>

{{ content | safe }}

</section>

</article>

</body>

</html>

The designer should avoid embedding text directly into images and instead provide layout and style references that can be translated into semantic HTML with CSS. The styling should be implemented via CSS layered atop standardized semantic HTML elements, ensuring clean separation between structure and presentation. This will make the final product easier to implement and maintain across the templating system. Possible to use frameworks like Tailwind CSS.

Any designs, assets, or style systems can be shared via Figma or static HTML mockups. Code or partial implementations can be made available via GitHub upon request.

These specs will be determined finally in discussion with the chosen designer.

Inspiration References

Strong Landing Page Image References

Timeline

The project will be divided into phases:

  1. Exploration Phase – Designer will present 2–3 general mockups with different approaches to typography, layout, and homepage feel. This will help define tone and direction.

  2. Approval Phase – After review and feedback, we will choose one direction for full design development, and provide detailed further revisions.

  3. Implementation Phase – I will handle the technical implementation (Eleventy + Decap CMS), but the designer is expected to stay involved throughout to ensure the design is executed faithfully and to provide support or adjustments where needed.

Notes

Creative interpretation is encouraged. This brief is meant to define boundaries and core requirements, not limit your expression. Let’s make something beautiful, thoughtful, and clear.

Mockups