Noor Ellis — useful places on the web
Create an original minimal portfolio for Noor Ellis, a fictional independent web designer. The portfolio should feel practical, calm and specific. Its purpose is to show how a designer organizes content and creates a clear route through a small website. The homepage is a short introduction followed by two selected projects. The case studies carry the depth. Do not turn the homepage into a software landing page with feature cards, customer logos, pricing, testimonials or a repeated call-to-action section. A small amount of carefully chosen work should establish the practice more effectively than a large amount of generic material.
Reference and original interpretation
The reference https://danielhowells.com/ was discovered through https://desengs.com/minimum/ and visited directly in a browser. The observed page uses a narrow central column, a small identity heading, readable introductory prose and straightforward lists of work, projects and writing. It gives the work context through short descriptions instead of a decorative marketing system. Transfer the clarity of those descriptions and the modest professional tone. Do not copy the person's biography, companies, project titles, dates, clients or source assets. Noor uses an original blue-toned visual language and a wider two-part work presentation: metadata beside an original abstract project plate.
The design should not be a literal copy of the reference. Its layout is more visual and its content is fully original. The two self-directed cases are Open Shelf, a publishing website study, and Daylight Room, a shared-workspace study. Both explain content decisions rather than claiming commercial success. The reference research supports the decision to keep the portfolio compact. It does not supply evidence for invented animation timings, mobile behavior or professional outcomes. Document only what was actually inspected.
Audience and purpose
The likely visitor is a small organization, publisher or independent practice considering a website. They need to know whether the designer understands content, maintenance and the practical questions of the people who will use the site. The portfolio should make those concerns visible without becoming an engineering specification. Project descriptions explain what the website is for. Case studies show the decisions that shaped it. The about page describes a reasonable way to begin and provides a local enquiry draft that helps someone organize their thoughts.
The site has four complete documents: index.html, open-shelf.html, daylight-room.html and about.html. This is sufficient because the homepage itself is the work index and the about page includes the enquiry interaction. Do not split a short paragraph into another page merely to increase the count. Each route must be complete, readable and useful. Render the case text in static HTML so it does not depend on browser scripting. The only dynamic behavior is the local enquiry preparation. Use relative document and asset links so the downloaded site can be moved and opened independently.
Identity and navigation
Use the name Noor Ellis as plain text, not an elaborate logo. The header has the identity at the left and two links at the right: Work and About and enquiries. Work points to the selected-work section of the homepage. This anchor should remain useful when followed from a case page. The header can wrap on narrow screens but should not require a hamburger menu for two destinations. The footer repeats the identity with credits and a collection link. Keep it small and readable. Do not add social accounts that belong to real people or invent a public email address that could accidentally receive messages.
Every page needs a unique descriptive title, a meta description, a single h1 and a skip link. Links should have clear labels and a visible hover treatment. Keyboard focus should use a contrasting outline with enough offset to be visible. Do not make the entire interface dependent on hover. The project title and its visual both lead to the same complete case, and both should be usable with ordinary keyboard navigation. Avoid custom cursors, scroll hijacking, page-transition overlays and any animation that delays access to the work.
Color and typography
The main page background is a very pale blue-white near #f7f8fc. Primary ink is a deep blue near #22305d. Supporting text is a readable muted blue near #576385. The project artwork introduces two related but distinct palettes: green paper tones for the publisher and light blue architectural tones for the workspace. These colors belong to the projects and should not be treated as random accent options. The portfolio frame stays consistent across all four documents.
Use a locally hosted Geist variable font with font-display swap and a suitable sans-serif fallback. Include its license in the assets directory. The primary heading uses a normal-to-medium weight, a compact line height around 1.08 and negative tracking around minus five percent of the font size. Scale the heading between approximately forty-two and seventy-two pixels. Body text is sixteen to nineteen pixels, with twenty-one to twenty-four pixels for short introductory statements. Metadata can be thirteen or fourteen pixels, but no meaningful information should be rendered as tiny decorative text.
The visual language depends on open space and clear alignments. Use a maximum content width around twelve hundred and eighty pixels and side gutters around five viewport-width units on desktop. At mobile widths, use twenty-two-pixel gutters. Avoid nested cards, multiple rounded containers and heavy shadows. Most content should sit directly on the page. Borders are reserved for form fields and focus states. The portfolio should look like a designer selected the necessary elements and stopped, rather than adding a component for every sentence.
Homepage composition
The introduction is a two-column arrangement on a wide screen. The main heading says I design useful places on the web. To its right, a short statement explains that the work is for people with something thoughtful to share, followed by the role and a description of structure, type and a clear way through. The introduction should occupy a considered amount of space but not an entire viewport. The selected work should begin naturally below it.
The work section has a small heading and two entries. Each entry uses a narrow metadata column on the left and a wider original visual on the right. Metadata includes the linked project title, a one-sentence description and the year. This is a project list with artwork, not a grid of marketing cards. At mobile widths, place the metadata above the visual and keep the reading order intact. The two project entries should not become horizontally scrollable panels. End the homepage with a short sentence about care in small websites and a link to the practice page.
Open Shelf artwork and case
Open Shelf is an original fictional publisher. The visual plate contains its name and three simple book-spine compositions with original titles. The forms should suggest a small publishing catalog without pretending to be a screenshot of a fully implemented store. Use muted green, cream and olive fields. The book titles are part of the original project artwork. They should be large enough to read and should not resemble microscopic placeholder interface text. Give the visual a useful accessible description, and keep its decorative internal elements out of the focus order.
The case begins with a back link to the selected work, the project title, a clear description and a concise discipline/year line. The large project plate follows. Then present the four complete narrative sections included below. They explain the choice to foreground reading, the difference between a featured shelf and a stable catalog, the role of excerpts and the importance of testing missing covers, long titles and past events. These are real design decisions within a fictional study. Do not replace the text with a vague problem-solution-result template or invented conversion figures.
The narrative should remain readable at a moderate measure. Section headings are around twenty pixels and paragraphs around nineteen pixels with a generous line height. There is no need to repeat the same visual after every paragraph. The case ends with a clear link to Daylight Room. It should not require a visitor to return to the homepage to discover the next project. Preserve the same global header and footer so the case remains part of one coherent small portfolio.
Daylight Room artwork and case
Daylight Room is a fictional shared workspace. Its original abstract visual uses a light-blue field and three tall window-like forms with a restrained shadow edge. The composition suggests daylight and architectural rhythm without claiming to show a real interior. Its short line describes a good place for an ordinary working day. Do not add stock office photography or fabricated maps. The artwork's job is to support the design direction, while the narrative explains the actual information structure.
The case examines the decision to describe the place before presenting plans. It explains why location, facilities and access should precede a membership comparison, why ordinary labels are useful and what was learned from asking someone to describe a first visit. The final section names missing practical details such as entry, reservations and what to bring. Keep the original complete prose below. Identify the project as a self-directed fictional exercise near the end rather than repeating a disclaimer in every visible label. The case finishes with a link back to Open Shelf.
About page and practice
The about page opens with Good design makes room, followed by a short explanation that this includes the content, the reader and the people who will maintain the site. Beneath that, use two columns on desktop. The left column introduces Noor and explains the practice. The right column contains the enquiry form. On a phone, the practice comes first and the form follows. This gives someone context before asking them to prepare a note.
The practice text should be specific about small websites, content outlines, working layouts and maintainable decisions. It should explain that a useful brief describes what the website must do, what content exists and who will keep it current. Do not invent a list of prestigious clients or a decade of experience for a fictional identity. A single honest introduction is enough. The projects demonstrate the thinking directly. Keep the about prose compact and avoid turning it into a services catalog.
Enquiry draft behavior
The enquiry form asks for a name, the purpose of the website and optional areas of help. The help choices are Content structure, Visual design and Website build. Use native checkboxes inside a fieldset with a legend. More than one choice can be selected. If none is selected, the prepared note should say that the scope is to be discussed. Use proper labels for all fields and a comfortable textarea. Require a purpose of at least twenty trimmed characters and limit the maximum length. A sequence of spaces should not pass validation.
Submitting the form does not send an email. It creates a visible draft below the form using textContent, including the name, selected help areas, purpose and a statement that the draft has not been sent. A separate Save enquiry draft button prepares a plain-text download. This creates a concrete review step without an unnecessary confirmation dialog. The visitor can revise the form and prepare the draft again. Keep their values after validation errors. Clear any custom validity message when the purpose field changes.
The script should treat FormData values as strings only after checking their type. Do not stringify arbitrary file objects or insert form values into HTML. The prepared draft is the exact source for the download. Do not run a second formatting path that can disagree with the visible preview. Create a Blob with a plain-text MIME type, use a temporary object URL and revoke it after the download action. Announce that the draft or file has been prepared. Never display Message sent, Email delivered or Booking confirmed, because no such action exists.
Responsive behavior
At intermediate widths, reduce gaps and keep the metadata column useful. At six hundred and forty pixels and below, stack the introduction, stack each work entry and stack the about columns. The project visuals become slightly taller so their internal text remains readable. Do not simply scale down a desktop screenshot. The book-spine titles and window forms should adapt to the available space. Long project headings and descriptions must wrap naturally. Form fields should use the full available width and remain within the page gutters.
Check the homepage, both cases and the about form at three hundred and ninety pixels. There must be no horizontal document overflow, clipped focus outline or overlapping navigation. The enquiry preview uses pre-wrap and overflow-wrap so a long visitor-entered word cannot force the page wider. The checkbox labels remain readable and their targets remain comfortable. The footer may wrap but should not lose its links. Browser zoom and increased text size should preserve the content order.
Assets, source boundaries and portability
Keep this site's builder, CSS, browser script, prompt, research record and asset-generation source in its own directory. The builder writes only the Noor demo and its prompt. Include the local font and license, original visual cover, and a credits document explaining that the artwork and sample projects are original. The reference URL belongs in that credits document and the prompt. It should not become a prominent marketing section on the public homepage. Do not emit a favicon, source-map reference, authoring-provider label or development-machine path.
The site should function as static HTML with a small local script. It does not need a framework router, form service, analytics package, animation library or backend. Native browser behavior is suitable for the task. Preserve the complete narrative in the output so the downloadable site is still a portfolio, not only a visual shell. Keep the inquiry boundary next to the action where it helps the visitor understand what will happen. Avoid repeated technical caveats elsewhere in the experience.
Verification expectations
Open every route in a real browser. Follow both project links, both next-project links and the Work anchor from a case. Inspect the desktop composition and mobile reflow. Check one h1 per page, all relative links and local assets, script syntax and public branding constraints. Test a short purpose, a whitespace-only purpose and a valid enquiry. Confirm the preview includes every selected help area and that revising the form changes the prepared note. Prepare the text download and report only what was observed; a click does not prove a completed disk save.
The acceptance condition is a complete, quiet web-designer portfolio with original cases and a useful enquiry draft. It is not enough to have four URLs with the same generic text. The projects should demonstrate different content problems, and the layout should support those distinctions. Keep the homepage compact. Put the depth into the case narratives and the accuracy of the interaction. The final design should make the visitor feel that the same care shown in the portfolio would be applied to the website they need.
Original project narratives
Open Shelf
The first useful page
Open Shelf is a fictional independent publisher with a small backlist and a changing calendar of readings. I designed a website that gives the books room to be read before asking anyone to buy them. The starting material was a list of titles, descriptions and event notes. Rather than inventing a large commerce system, I focused on the relationship between a book, its author and the occasion that brings a reader to it.
A structure that can grow
The first wireframe placed every title in an equal grid. That was orderly, but it treated a new release and a ten-year-old essay collection as the same kind of announcement. I replaced it with a featured shelf and an ordinary catalog below. The featured area can change without changing the stable book pages. Each book keeps its own title, description and related events, so an old link remains useful when the homepage moves on.
Reading before browsing
A book page begins with an excerpt rather than a large promotional statement. The typography uses a comfortable measure and a clear distinction between the publisher’s description and the author’s text. The practical details are present, but they do not interrupt the first paragraph. This decision gave the visual design a reason for its restraint: the site is making room for someone else’s writing.
The handoff question
I tested the layout with long titles, missing cover images and an event that had already passed. Those states are easy to omit from a presentation and common in an actual publishing workflow. The final direction includes a text-only cover treatment and clear event dates. This is a self-directed design study with original sample material, not a commissioned publisher website or a live store. The useful deliverable is the content structure and the reasoning behind it.
Daylight Room
A place before a plan
Daylight Room is a fictional shared workspace built around ordinary working days. The imagined audience includes people who need a desk occasionally and people looking for a more regular routine. I wanted the website to answer practical questions without turning the space into a lifestyle promise. The first screen should communicate what the place offers, while the next page should explain how a visit actually works.
Information in the right order
The early design began with membership plans. That made the page feel efficient but asked for a financial comparison before the visitor understood the space. I changed the sequence to location, facilities, access and then plans. A reader can decide whether the room fits their needs before considering a particular arrangement. The navigation uses ordinary labels rather than invented names for each membership tier.
A modest visual system
The design uses a blue field, open white margins and a few clear rectangular forms that suggest the rhythm of windows and desks. The imagery in this case is an original abstract layout study, not a photograph of a real building. The visual system was tested in a narrow viewport from the beginning. Important access information stays in the reading flow instead of hiding behind hover states or a floor-plan illustration.
What the prototype taught me
The most valuable test was asking someone to explain how they would arrive for a first visit. Their answer exposed missing details that a visual review had not caught: where to enter, whether a reservation was needed and what to bring. The final content model gives those details a permanent place. This portfolio case is a fictional self-directed exercise. It demonstrates a clear way to organize a small service website without claiming that a real workspace has launched or accepted bookings.
Interaction code
(() => {
function field(data, key) {
const value = data.get(key);
return typeof value === 'string' ? value : '';
}
const form = document.getElementById('enquiry');
if (!form) return;
let draft = '';
form.elements.purpose.addEventListener('input', () =>
form.elements.purpose.setCustomValidity(''),
);
form.addEventListener('submit', (event) => {
event.preventDefault();
if (!form.reportValidity()) return;
const data = new FormData(form),
purpose = field(data, 'purpose').trim();
if (purpose.length < 20) {
form.elements.purpose.setCustomValidity(
'Please describe the purpose in at least 20 non-space characters.',
);
form.elements.purpose.reportValidity();
return;
}
draft =
'Website enquiry for Noor Ellis\n\nFrom: ' +
field(data, 'name').trim() +
'\nHelp requested: ' +
(data
.getAll('help')
.filter((value) => typeof value === 'string')
.join(', ') || 'To be discussed') +
'\n\n' +
purpose +
'\n\nThis draft has not been sent.\n';
const preview = document.getElementById('draft');
preview.textContent = draft;
preview.hidden = false;
document.getElementById('download').hidden = false;
document.getElementById('status').textContent =
'Enquiry draft ready to review below. Nothing was sent.';
});
document.getElementById('download').addEventListener('click', () => {
const url = URL.createObjectURL(
new Blob([draft], { type: 'text/plain;charset=utf-8' }),
);
const a = document.createElement('a');
a.href = url;
a.download = 'noor-enquiry.txt';
a.click();
setTimeout(() => URL.revokeObjectURL(url), 1500);
document.getElementById('status').textContent =
'Text file prepared for download.';
});
})();