# Ell Mercer — independent art direction

Create an original minimal portfolio for Ell Mercer, a fictional independent art director working across identity and editorial design. This site should look like a considered selection, not a template filled with every possible section. There are two substantial projects, a studio introduction and a useful contact-note interaction. The homepage must remain quiet enough that the work is the obvious center of attention. Use space, proportion, typography and a small amount of color to create distinction. Do not add a software-style hero illustration, three services cards, a testimonial carousel, a pricing grid, a customer logo strip or fabricated business metrics.

## What was learned from the reference

The reference https://familyoffice.is/ was visited directly. Its homepage uses a black field, compact textual material and navigation anchored near the bottom. The visual impression is restrained and direct, with substantial negative space and little conventional marketing decoration. Transfer that willingness to make a small number of strong decisions. Do not copy the studio's identity, team, positioning, events, writing, project names or assets. Ell takes a different direction: warm paper, a small lowercase wordmark, a staggered sequence of original typographic work and navigation at the top. The reference is evidence for restraint, not a source of content or a requirement to reproduce its black page.

## The intended experience

A visitor should be able to answer three questions quickly. What kind of work does this person do? What does the work feel like? How does this person approach a project? The first answer comes from a compact introduction. The second comes from two large original project plates. The third comes from the case narratives and the studio page. Contact is a clear secondary path. It should not interrupt the experience with a popup, a persistent floating button or a forced form before someone can read the work. The design should feel personal and professional rather than pretending to be a large agency.

## Documents and navigation

Create five complete documents: index.html, common-ground.html, soft-season.html, studio.html and contact.html. The homepage is the work index. The two project pages are full case studies with original written narratives and multiple visual compositions. The studio page contains a concise practice description and three expandable process notes. The contact page creates a reviewable local note and lets the visitor download it. Every route must be independently readable and have its own document title, meta description and single primary heading. Use actual relative links so the downloaded site can be opened as ordinary files. Do not implement project pages as hidden sections that require JavaScript to appear.

The header has three horizontal zones on a wide display. A small ell. wordmark sits at the left. Work, Studio and Contact links occupy the center. A small discipline description sits at the right. The discipline line is expendable at narrower widths; the navigation is not. Current navigation should be indicated with an underline rather than a colored pill. The footer contains the name, credits and a collection link. Do not put the entire navigation into an elaborate mobile overlay for three links. On a phone, the header remains a short two-column row with a readable name and simple navigation.

## Overall visual language

Use a warm off-white background near #f9f8f3 and dark ink near #25251f. The project art provides the principal color: ochre near #bd9e55 for Common Ground and pale pink near #e4b8b3 for Soft Season. These are intentional project identities, not interchangeable theme swatches. Supporting text can use a warm gray near #66665c, but it must remain readable. Use locally hosted Geist for interface copy and ordinary Georgia for the editorial typography inside the original plates. This contrast is purposeful: the portfolio is a quiet frame and the project art has its own voice.

The main content has a maximum width around fifteen hundred pixels and generous side gutters around seven viewport-width units on desktop. Reduce those gutters to twenty-two pixels on a phone. Headings are medium-large and lightly weighted, with tight but readable tracking. The homepage heading should be around thirty-five to sixty-two pixels depending on width, not an enormous word occupying an entire screen. Body copy is sixteen to nineteen pixels. Project metadata is thirteen to fifteen pixels. Avoid decorative all-caps labels everywhere. The title, image and caption already communicate a hierarchy without inventing an extra editorial taxonomy.

## Homepage structure

The introduction is a horizontal arrangement on a wide screen. The heading says Identity, image, and the space between. A short sentence on the right introduces Ell as an independent art director working with words, form and restraint. This is a compact introduction, not a full-screen hero. Below it, place the two project entries in an unequal two-column sequence. Common Ground is wider and begins first. Soft Season is narrower and begins lower, creating a deliberate reading rhythm. This is not a uniform contact sheet, masonry wall or card grid. There are only two projects and each has enough space to establish its own presence.

Each project entry contains a large original typographic plate and a plain caption beneath it. The caption gives the title, discipline and year. The image link and title both lead to the complete case. No text label should be pasted over a photograph as an unrelated interface badge. The text within these plates is the artwork itself: the fictional identity and editorial cover being presented. After the sequence, include one brief closing sentence about the selected self-directed work and a link to the studio. Stop there. The homepage should not acquire extra sections merely to become longer.

## Common Ground visual direction

Common Ground is an original identity study for a fictional neighborhood reading room. Its main plate is an ochre field with dark greenish ink. A modest title sits near the top. The main phrase A place between places is set in a large, ordinary serif with deliberate line breaks. Small discipline text sits near the bottom. The composition is closer to a printed poster than a dashboard screenshot. The case page also contains a second typographic application reading Come in. Stay a while. This variation demonstrates how the identity can speak at another scale without adding a different logo or decorative system.

The case narrative must explain the imagined context, the decision to begin with practical printed materials, the use of a flexible sentence structure and the removal of an unnecessary doorway-symbol system. Keep the original complete prose below. It is not acceptable to replace the narrative with a one-line brief and a fabricated percentage improvement. The study is about decisions and applications. It does not claim that a real reading room commissioned the work or that attendance increased by a measured amount. A single accurate sentence near the end identifies it as a self-directed fictional study.

## Soft Season visual direction

Soft Season is an original editorial study for a fictional journal about ordinary rituals. Its plate uses pale pink and dark red-brown ink. The principal phrase Nothing in a hurry introduces the pace of the project. The second application uses An ordinary day, looked at again. Its spacing should feel different from the ochre identity while remaining part of the same portfolio frame. Do not recolor the Common Ground plate and call it a new project. Change the relationship of the text, the editorial tone and the explanation of the system.

The narrative explains a slower editorial rhythm, the cover as a threshold, room for different voices and the decision not to decorate transitions. It should describe paper spreads, captions, long essays and shorter observations in concrete terms. The artwork is original typographic composition. It does not require borrowed photography or a fake magazine mockup. If a future version adds photography, it must be original or properly licensed and fit the editorial idea; it should not be added merely because a portfolio convention demands an image.

## Project page composition

Begin each project page with a back link to Work. Follow with the project title, a short introduction and three compact metadata groups: scope, year and role. Metadata must be useful and readable, not tiny decoration. The large principal plate follows the introduction and may use a wider aspect ratio on desktop. On mobile it returns to a taller proportion so the type can remain legible. The project narrative is a centered reading region with labels on the left and paragraphs on the right at desktop widths. When that arrangement becomes tight, the label moves above the paragraph.

Use four narrative sections per case. Each should contain a real paragraph with enough specificity to explain a decision. There is no need to alternate image and text eight times. After the narrative, show the second original typographic application. Finish with a simple next-project link. Every next-project destination must exist. Avoid a full-screen contact callout at the end of each case, since the header already provides contact and the next project is the natural continuation. Preserve the same header and footer so the visitor always knows where they are.

## Studio page

The studio page uses a different composition from the project pages. On desktop, a clear short statement occupies the left column while the biographical material occupies the right. The statement is A small practice. A considered point of view. The first paragraph introduces Ell and describes finding a visual language that is clear, specific and worth keeping. The remaining paragraphs explain the relationship between identity and editorial design, the importance of beginning with material and the preference for decisions that arise from context rather than a style imposed from outside.

Below the introduction, provide three native details elements for Listen and define, Make and compare, and Refine and hand over. These should expand with ordinary browser behavior. Keep the first open by default to show that useful content is available. Do not replace them with a custom accordion that loses keyboard behavior. The expanded text explains actual work: gathering needs, comparing applications and documenting a usable system. Include one short About this portfolio paragraph identifying the fictional practice, followed by a contact link. The fictional boundary should not overwhelm the page or appear as repeated warnings.

## Contact-note interaction

The contact page has a large but restrained heading on the left and a form on the right at desktop widths. Stack them on a phone. Explain that the note stays on the visitor's device until they decide what to do with it. The form asks for a name, kind of project, an idea and optional timing. Use native labels and controls. The project select offers Identity, Editorial, Art direction and Something else. Require a meaningful idea of at least twenty trimmed characters and constrain the maximum length. Do not accept a textarea containing only spaces just because its raw length is sufficient.

Submitting the form creates a visible review section below the form. Display the prepared note with textContent in a preformatted but wrapping text block. Do not render the visitor's content as HTML. The note includes the name, project kind, timing, idea and a statement that it has not been sent. It remains editable by revising the form and preparing it again. A separate Save text file button creates a plain-text Blob and prepares a download. This separation gives the person something concrete to review before saving. There is no email transmission, booking, payment, account creation or network write.

The form should recover from validation errors. If the idea is too short after trimming, set a useful custom validity message and clear that message when the field changes. Keep the user's text after an error. Announce the note state and download preparation through a status region. Do not say Message sent or Booking confirmed. Revoke object URLs after use. Preserve native focus visibility and keyboard submission. A completed interaction means the review text matches the entered values and the download button uses that exact prepared note.

## Responsive and accessibility requirements

At nine hundred pixels, simplify the header and reduce gaps. At six hundred and forty pixels, turn the project sequence into a single column, remove the large stagger offset and use a moderate vertical gap between projects. The reading order must be Common Ground followed by Soft Season in both layouts. Do not use CSS order to create a mismatch between visual and keyboard reading. The studio and contact columns become ordinary stacked sections. Project metadata can wrap, but labels and values must remain associated through a description list.

Use one h1 per page and logically ordered h2 elements. All artwork should have a meaningful accessible name that describes the original cover composition. Decorative shapes or words should not create dozens of redundant announcements. Provide a skip link that becomes visible on focus. Links and controls require a clear focus outline. Buttons need enough padding for touch use. Avoid fixed overlays that hide content when the mobile browser chrome changes height. The only optional motion is a small brightness change on project hover and a short background-color transition on buttons. These belong inside a reduced-motion-aware rule and must never be required to discover information.

## Source, assets and maintenance

Keep the builder, CSS, browser JavaScript, prompt and research notes in the Ell-specific source directory. The builder writes only this site's public directory and prompt. Include the local Geist file and its license. The CSS artwork is original and should be credited as such. The public credits can identify the reference URL and clarify that no source identity or artwork was copied. Do not emit a favicon or authoring-provider branding. Do not remove the font license while cleaning public metadata. The site should render its complete project text without JavaScript; only the contact-note preparation requires the script.

Use a small amount of code and native browser behavior. There is no reason to add a state library, routing framework, animation engine, date library or form service. Keep the prepared note in the page's own closure. The form values are the source of truth until preparation, and the prepared text is the source of truth for the download. Avoid parallel implementations that can disagree. The portfolio's visual simplicity should be matched by implementation clarity, without sacrificing validation or accessibility.

## Verification and acceptance

Read all five pages at a wide desktop width and a narrow mobile width. Check that no document overflows horizontally, no headline clips and no project caption becomes illegible. Open both case links from the homepage. Follow the next-project links in both directions. Open and close the studio details with a keyboard. On the contact page, try an invalid short idea, then a valid note, then revise the note and prepare it again. Confirm that the visible review contains the updated values and that a text-file download is prepared only when requested.

Check all local asset and document references, browser script syntax, heading counts and provider-branding constraints. A source scan does not replace a visual check. A download click does not prove that the file was saved to disk, so report the observed result accurately. The final output should be a complete minimal portfolio with genuine project material, not a homepage with blank subordinate pages. Preserve the quiet homepage even when expanding the case narratives. The work should be substantial because the decisions and content are substantial, not because the page has accumulated more decorative sections.


## Original complete case narratives

### Common Ground

#### Starting with the room

The brief was to make a reading room feel open before someone reached the door. The imagined space sits between a library, a workshop and a place to spend an unhurried hour. I began with the material a visitor would actually encounter: a window notice, a folded events sheet and the label on a borrowed book. The identity had to be legible at the scale of an ordinary afternoon, not only as an impressive presentation slide.

#### A flexible sentence

Common Ground became a sentence that could hold different kinds of activity. The large words stay simple while the smaller text does the specific work: naming a reading, explaining a workshop or telling someone when the room is open. I chose an ochre field because it belongs comfortably to paper and daylight. The identity uses one typographic voice and a small set of alignments rather than a collection of decorative marks.

#### The printed system

The poster has two jobs. At a distance it gives the room a recognizable presence; at arm’s length it offers a clear next action. The event sheet uses the same proportion but changes the reading order. Its practical information is grouped by date, with room for a short description and access details. The system was tested in black ink as well as color so that a volunteer could produce a useful notice without special printing.

#### What I left out

An early version used a set of abstract doorway symbols. They made the presentation more varied but did not help a visitor understand the program. Removing them gave the language more responsibility and the page more space. This is an original self-directed study. The project images are typographic compositions created for this portfolio, and the reading room is fictional. There are no invented audience-growth figures or client testimonials.

### Soft Season

#### A slower editorial rhythm

Soft Season began as a question about pace. Could a journal move slowly without becoming precious or difficult to read? I imagined an issue built around small repeatable rituals: repairing a sleeve, making a table, walking the same route in different weather. The art direction needed to create pauses while still giving readers a clear route through the material. The first prototype was a sequence of paper spreads rather than a cover image.

#### The cover as a threshold

The cover uses a short statement and a generous field of pale pink. It does not attempt to summarize every article. The title is placed in relation to the edge rather than centered as an emblem. Inside, the type becomes quieter and the margins establish a consistent place for captions. The visual system is intentionally limited so that a photograph, a drawing or a long piece of writing can each receive the space it needs.

#### Making room for different voices

A recurring essay format sits beside shorter observations. Long pieces use a steady column and clear section breaks. Short pieces can occupy only a small part of a spread. The blank area is not a missing asset; it changes the pace between one voice and the next. I wrote sample text and made original typographic plates to test those relationships before introducing any borrowed photography.

#### The useful constraint

The most productive constraint was refusing to decorate the transitions. A page turn is already a transition. A change in scale can already signal a new subject. The final direction uses those ordinary editorial tools rather than effects layered on top. The journal is fictional and the portfolio presents a self-directed exercise, not a published issue. The study demonstrates a way of organizing attention, with enough specificity that another designer could continue the system.

## Browser interaction

```javascript
(() => {
  function field(data, key) {
    const value = data.get(key);
    return typeof value === 'string' ? value : '';
  }
  const form = document.getElementById('contact-form');
  if (!form) return;
  let text = '';
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    if (!form.reportValidity()) return;
    const data = new FormData(form);
    const idea = field(data, 'idea').trim();
    if (idea.length < 20) {
      form.elements.idea.setCustomValidity(
        'Please write at least 20 meaningful characters.',
      );
      form.elements.idea.reportValidity();
      return;
    }
    text =
      'Collaboration note for Ell Mercer\n\nFrom: ' +
      field(data, 'name').trim() +
      '\nProject: ' +
      field(data, 'kind') +
      '\nTiming: ' +
      field(data, 'timing').trim() +
      '\n\n' +
      idea +
      '\n\nPrepared locally. This note has not been sent.\n';
    document.getElementById('note-text').textContent = text;
    document.getElementById('note').hidden = false;
    document.getElementById('status').textContent =
      'The note is ready to review. Nothing has been sent.';
    document
      .getElementById('note')
      .scrollIntoView({ behavior: 'instant', block: 'nearest' });
  });
  form.elements.idea.addEventListener('input', () =>
    form.elements.idea.setCustomValidity(''),
  );
  document.getElementById('save-note').addEventListener('click', () => {
    if (!text) return;
    const url = URL.createObjectURL(
      new Blob([text], { type: 'text/plain;charset=utf-8' }),
    );
    const a = document.createElement('a');
    a.href = url;
    a.download = 'ell-collaboration-note.txt';
    a.click();
    setTimeout(() => URL.revokeObjectURL(url), 1500);
    document.getElementById('status').textContent =
      'Text file prepared for download. Nothing has been sent.';
  });
})();

```