Faculty Research
Booklet Generator
Interactive Multifold Brochure
Layout
Theme
Faculty Research
Brochure Generator
The complete guide to designing, customising, and printing professional academic research booklets — from first click to final PDF
The Faculty Research Brochure Generator is a free, browser-based design tool that lets anyone — designer or not — create a polished, print-ready academic research booklet in minutes, directly inside a web browser with no installation, no account, and no cost.
Academic departments and research institutes need high-quality printed materials to communicate their work — to prospective students, industry partners, funding bodies, and the public. Traditionally, creating such materials requires either expensive design software (Adobe InDesign, Illustrator) or generic templates that look identical to every other institution's output.
This tool solves both problems. It provides a purpose-built, interactive environment where you can choose a layout, select a visual theme, edit every word of content, upload photographs, and produce a print-ready multi-panel brochure — all inside a single HTML file that runs instantly in any modern web browser.
The output is a professional multifold brochure: a single sheet of paper folded into multiple panels, printed on both sides, that unfolds to reveal a complete academic publication. The tool supports two fold formats — 10-panel and 12-panel — and 30 completely distinct visual themes, from classic academic to neon cyberpunk.
Everything runs locally in your browser. Photos you upload, text you type, and designs you create never leave your computer. There is no backend, no database, and no account system.
Upload any photograph and it fills the entire cover panel as a professional background. A dark gradient overlay ensures text remains legible over any image.
One click switches between 30 radically different design philosophies — from minimalist Swiss to glitch art to art deco. Every element updates instantly.
Every text element — titles, body copy, statistics, contact details — is directly editable by clicking. No separate form or dialog needed.
Choose between a 10-page layout (20×9 inches) for standard events, or a 12-page layout (24×9 inches) for more comprehensive publications.
The print engine automatically sets the exact page dimensions, hides all UI elements, and outputs two strips (front and back) with zero margins and full colour accuracy.
Three image placeholder boxes on inner panels accept direct file uploads. Uploaded images fill their placeholder with proper object-fit cover cropping.
Dashed blue lines between panels show exactly where each fold will fall. These are visible on screen but hidden automatically during printing.
All text uses Times New Roman at 11pt — the standard for academic publications. Themes adjust weight, case, and colour without breaking typographic integrity.
The tool offers two fold formats. Both use the same 4×9 inch panel size — they differ only in the total number of panels, giving you more content space in Option 2.
Option 1 — 10-Page Multifold (20×9 inches)
| Full Sheet Dimensions | 20 inches × 9 inches |
| Total Panels | 10 panels (5 front + 5 back) |
| Each Panel Size | 4 inches wide × 9 inches tall |
| Content Pages | 8 (Panel 1 = Cover, Panel 10 = Back Cover) |
| Front Strip | Cover + Research Overview + Lab Facilities + Research Clusters + Major Equipment |
| Back Strip | Funding & Grants + Research Centres + Postgraduate + Industry & Innovation + Back Cover |
| Best For | Departmental open days, conference handouts, student recruitment fairs |
Option 2 — 12-Page Multifold (24×9 inches)
| Full Sheet Dimensions | 24 inches × 9 inches |
| Total Panels | 12 panels (6 front + 6 back) |
| Each Panel Size | 4 inches wide × 9 inches tall |
| Content Pages | 10 (Panel 1 = Cover, Panel 12 = Back Cover) |
| Extra Front Panel | Digital Research Infrastructure (HPC, Cloud, Data Management) |
| Extra Back Panel | International Collaboration (Exchange programmes, mobility grants) |
| Best For | Annual research reports, grant applications, institutional presentations |
When you switch between Option 1 and Option 2, any cover photo you have uploaded is automatically restored on the new cover panel. Text edits made to panels that exist in both layouts are not transferred (the panels are rebuilt), so edit text after choosing your layout.
Each theme is a complete design system that changes background colours, typography hierarchy, accent colours, decorative elements, panel textures, and back cover styling — all simultaneously with a single click. Below is the full reference for all 30 themes.
| # | Theme Name | Design Philosophy | Palette | Best For |
|---|---|---|---|---|
| 1 | Classic Academic | Clean professional lines, small-caps headings, gold accent | Navy + Gold | All-purpose academic use |
| 2 | Constructivist | Stark red/black/white, bold uppercase, severe geometry | Red + Black | Science & engineering |
| 3 | Modern Magazine | Elegant italic headings, vast white space, minimalist | Black + White | Prestige publications |
| 4 | Neon Cyberpunk | Dark bg, scanline texture, glowing cyan/purple text | Dark + Cyan | Computer science, AI, tech |
| 5 | Vintage Blueprint | Monochrome blue, grid overlays, technical drawing aesthetic | Blueprint Blue | Engineering, architecture |
| 6 | Brutalism | Raw borders, heavy black, unstyled typography | Black + White | Bold statements |
| 7 | Duotone | Orange/purple clash, gradient blending, strong contrast | Orange + Purple | Creative research units |
| 8 | Geometric Abstract | Diamond & hexagon shapes, gold/purple gradient accents | Purple + Gold | Design & arts faculties |
| 9 | Minimalist Swiss | Precision alignment, red accent, vast negative space | White + Red | Medical, clean science |
| 10 | Organic / Sustainable | Earth tones, forest green, soft botanical feel | Forest + Cream | Environmental research |
| 11 | Risograph | Dot texture, two-colour print aesthetic, retro indie | Coral + Teal | Social sciences, arts |
| 12 | Neo-Classic | Double rule borders, warm ivory, gold small-caps | Brown + Gold | Humanities, law, history |
| 13 | Glitch Art | Animated scanline glitch, chromatic aberration on headings | Black + Green | Digital media, cybersecurity |
| 14 | Art Deco | Double-rule headings, gold on near-black, 1920s luxury | Black + Gold | Business schools, law |
| 15 | Nordic Frost | Ice blue, clean lines, Scandinavian restraint | Navy + Ice Blue | Science, healthcare |
| 16 | Oxidized Copper | Dark green-teal, geometric texture, patina aesthetic | Dark Teal + Copper | Chemistry, materials |
| 17 | Exposed Concrete | Brutalist grey texture, heavy black borders, industrial | Concrete + Black | Civil engineering, urban studies |
| 18 | Infrared | Deep burnt orange on near-black, glowing ember accents | Black + Orange | Physics, energy research |
| 19 | Pastel Watercolor | Soft pink-blue gradients, radial blushes, feminine editorial | Pastel + Purple | Health sciences, psychology |
| 20 | Coal & Ember | Near-black panels, ember-orange headings, industrial heat | Charcoal + Ember | Chemical engineering |
| 21 | Japanese Washi | Off-white washi texture, crimson accents, vertical grid | Cream + Crimson | Asian studies, fine arts |
| 22 | UV Ultraviolet | Deep purple, glowing violet text-shadows, rave-era aesthetic | Black + Violet | Quantum physics, astrophysics |
| 23 | Memphis Pop Art | Primary colour blocks, halftone dots, bold outlines | Hot Pink + Yellow | Design schools, communication |
| 24 | Monochrome Photo | Greyscale palette, italic headings, photography editorial | Black + White | Journalism, media studies |
| 25 | Rainforest | Deep jungle green, bioluminescent accents, canopy atmosphere | Jungle + Green | Ecology, biology, botany |
| 26 | Sand & Terracotta | Warm sandy tones, clay red accents, Middle-Eastern editorial | Terracotta + Sand | Archaeology, geography |
| 27 | Midnight Teal | Deep ocean teal, luminous cyan headings, nocturnal marine | Deep Teal + Cyan | Marine biology, oceanography |
| 28 | Solar Flare | Warm cream, amber-gold accents, solar energy palette | Warm Cream + Gold | Renewable energy, solar research |
| 29 | Pewter & Parchment | Grey-parchment balance, double rule, archival feel | Parchment + Grey | History, archaeology, library |
| 30 | Digital Gradient Mesh | Animated gradient accent bar, pink-blue mesh panels | Mesh + Purple | Data science, bioinformatics |
Open the brochure-generator.html file directly in Google Chrome, Mozilla Firefox, Microsoft Edge, or Safari. No web server is required — double-clicking the file is sufficient. JavaScript must be enabled (it is by default in all browsers).
In the sidebar under the Layout section, click Option 1 for a 10-page booklet (20×9 in) or Option 2 for a 12-page booklet (24×9 in). The canvas updates immediately. The active option is highlighted in gold.
Click any of the 30 colour swatches in the Theme grid at the bottom of the sidebar. Hover over a swatch to see a tooltip with the theme name. All panels — cover, inner, and back cover — update simultaneously. You can change themes at any time without losing text edits.
On the front cover panel, click the "Upload Cover Photo" floating button at the bottom of the panel. Select any image file (JPG, PNG, WebP). The image fills the entire cover as a full-bleed background. A gradient overlay is automatically applied so text remains readable. If you switch themes or layouts after uploading, the photo is preserved.
Click on any piece of text in any panel to edit it in-place. All text elements use the contenteditable HTML attribute, so you can type, delete, and paste just like in a word processor. Elements with greyed-out placeholder text show what goes there — click and type to replace. You can edit university names, statistics, facility names, contact details, addresses, and everything else.
Three image placeholder boxes appear on the inner content panels — one on the Laboratory Facilities panel, one on the Major Research Equipment panel, and one on the Research Centres of Excellence panel. Click anywhere inside a placeholder to open a file picker and upload a photo. The image fills the box with cover-crop sizing.
The final panel of the back strip is the back cover. It contains your institution's name, faculty title, tagline, research office contact, campus address, online resources, postgraduate contact, copyright notice, and URL. All of these are directly editable by clicking.
Click the ⬡ Print / Save as PDF button at the top of the sidebar. Your browser's print dialog opens. In the dialog, select "Save as PDF" as the destination. Ensure margins are set to None. The page size will be set automatically (20×9 or 24×9 in). Click Save. The output contains two pages — the front strip and the back strip.
In Chrome's print dialog: set Margins to None, ensure Background graphics is checked under More Settings, and verify the paper size shows the correct dimensions. In Safari, choose Print Backgrounds. Without background graphics enabled, theme colours will not print.
The cover page is the most visually complex element of the tool. It is a full-bleed magazine-style panel with multiple overlapping layers and precisely structured typographic zones.
Cover Layer Architecture
| Layer 0 — Background | Dark navy default gradient (#0c1830 → #1a2a50), replaced by your uploaded photo |
| Layer 1 — Gradient Overlay | Multi-stop vertical gradient: 90% dark at top, transparent in middle, 96% dark at bottom. Ensures text legibility over any photo. |
| Layer 2 — Text Content | All editorial elements: masthead, eyebrow tag, title, subtitle, footer strip |
| Layer 99 — Upload Button | Floating glassmorphism button, always on top, hidden after photo upload |
Editable Cover Elements
| University Name | Top-left, uppercase small caps, 6.5pt. Your institution's full name. |
| Faculty Line | Top-left below university, italic, 6.8pt. Department or faculty name. |
| Volume Number | Top-right, e.g. "Vol. 12". Publication volume or edition. |
| Year | Top-right below volume, e.g. "2024–25". |
| Eyebrow Tag | Above title, uppercase, accent colour. E.g. "Research Booklet", "Annual Report". |
| Main Title (H1) | 19.5pt bold, white with text-shadow. The publication's primary title. |
| Subtitle / Deck | 9.5pt italic, semi-transparent. A short descriptive line below the title. |
| Teasers Line | Bottom-left. A short list of inside contents, e.g. "Labs · Clusters · Grants". |
| Year Badge | Bottom-right. A bordered badge with the year, styled in the theme's accent colour. |
Cover Accent Rule
Between the title and subtitle, a short accent rule (36px wide bar + 5px dot) appears in the theme's primary accent colour. This is a non-editable design element that changes automatically with the theme. It provides visual weight and separates the title from the deck copy.
Each inner panel uses a consistent vertical layout system with an accent bar at the top, editable content in the middle, and a page number at the bottom. The accent bar colour and style change per theme.
Front Strip Panels
Panel 2 — Research Overview
An introductory content page. Contains a short paragraph about the faculty's research capabilities, followed by three large statistics (number + label), a divider, a "Core Mission" subheading, and a mission statement paragraph. Statistics are fully editable — change the numbers and labels to match your institution.
Default stats: 47 Active Research Labs · 320+ Faculty Researchers · $82M Annual Grant Funding
Panel 3 — Laboratory Facilities
Contains an image placeholder (height 1.12 inches) for a lab photograph, followed by a description paragraph and a bulleted list of key facilities. The image placeholder accepts file uploads — click to browse.
Default facilities: Electron Microscopy Suite · HPC Cluster · Cleanroom Fabrication · Molecular Biology Unit
Panel 4 — Research Clusters
A content-heavy panel with three research cluster descriptions separated by horizontal dividers. Each cluster has a bold italic subheading and a short paragraph. All text is editable. Replace with your faculty's actual research groups or departments.
Default clusters: Biomedical Sciences · Sustainable Engineering · Data & AI Research
Panel 5 — Major Research Equipment
Contains a short image placeholder (height 0.86 inches), a description paragraph, and a labelled bulleted list of instruments. The "Instrumentation Highlights" label is in uppercase small text above the list.
Default items: NMR Spectrometer · X-Ray Diffractometer · Mass Spectrometry Platform · Flow Cytometry · AFM
Panel 6 (Option 2 only) — Digital Research Infrastructure
Exclusive to the 12-page layout. Covers HPC & cloud computing resources and research data management. Contains two subheadings with paragraphs each. Edit to describe your institution's digital infrastructure.
Back Strip Panels
Back Panel 1 — Funding & Grants
Two large statistics (active grants, industry partners), framing paragraphs about funding sources and the Research Services Office. Fully editable.
Back Panel 2 — Research Centres of Excellence
An image placeholder for a building or centre photograph, followed by a description and two named centres with short descriptions. Edit to list your own centres.
Back Panel 3 — Postgraduate Research
Two statistics (PhD students, postdoctoral fellows), and a bulleted list of available scholarships. Ideal for student recruitment messaging.
Back Panel 4 — Industry & Innovation
Two statistics (spin-out companies, patents filed), and a paragraph about industry partnership opportunities. Edit for your technology transfer office details.
Back Panel 5 (Option 2 only) — International Collaboration
A bulleted list of exchange and mobility programmes, and a paragraph about international researcher support.
The large number statistics (47, 320+, $82M etc.) are the most impactful visual elements on content panels. After editing all your body text, update these numbers to your institution's actual figures for maximum credibility. They are styled at 21pt bold and draw the eye immediately.
The back cover is a professionally structured dark editorial panel — the final impression your brochure leaves. It has a layered dark background, a theme-coloured top band, a contact grid, and a branded footer.
Back Cover Architecture
| Background | Theme-specific dark gradient with subtle horizontal line texture and diagonal polygon decoration |
| Top Accent Band | 6px gradient bar fading from theme accent colour to transparent |
| Header Section | Left vertical accent stroke + university eyebrow text + faculty name title + italic tagline |
| Horizontal Divider | Gradient line fading from theme accent to transparent |
| Contact Grid | 2×2 grid of contact blocks (Research Office, Campus Address, Online, Postgraduate) |
| Footer Strip | Semi-transparent dark band with copyright left, year badge right |
Editable Back Cover Elements
| Eyebrow / University | Small caps header above the main title |
| Faculty Title | 14pt bold white — the main back cover heading |
| Tagline | Italic description under the title |
| Research Office Contact | Email address and phone number |
| Campus Address | Building, campus, city, country |
| Online Resources | Website URL and social media handle |
| Postgraduate Contact | Postgrad portal URL and admissions email |
| Copyright Line | © year and rights statement |
| Website URL | Italic accent-coloured link in footer |
| Year Badge | Bordered badge in theme accent colour |
The print system is one of the most technically precise aspects of this tool. It uses JavaScript to dynamically inject a @page CSS rule with the exact sheet dimensions, and CSS @media print rules to strip all UI chrome.
What Happens When You Click Print
JavaScript writes @page { size: 20in 9in; margin: 0 !important; } (or 24in for Option 2) into the document's <style> tag, overriding any browser default page size.
The sidebar, strip labels, fold lines, and separator line are all set to display:none via @media print. The Upload Cover Photo button is also hidden.
The transform:scale(0.375) applied to strips for screen preview is removed. Strips render at their true 4in × 9in × N panel dimensions. Box shadows are removed.
-webkit-print-color-adjust: exact !important and print-color-adjust: exact !important are applied globally, forcing all background colours, gradients, and images to print regardless of browser economy settings.
The front strip has page-break-after: always so it prints on page 1, and the back strip prints on page 2. This gives you two separate pages — one for each side of the physical sheet.
Recommended Print Settings (Chrome)
| Destination | Save as PDF |
| Pages | All |
| Paper size | Custom (auto-set: 20×9 in or 24×9 in) |
| Margins | None |
| Scale | Default (100%) |
| Background graphics | ✅ Enabled (critical) |
| Headers and footers | ❌ Disabled |
The PDF output has two pages. Page 1 is the front strip (panels left to right as they face you when unfolded from the front). Page 2 is the back strip. When sending to a professional printer, specify duplex printing with flip on long edge. The printer will print both sides on one physical sheet.
| Technology | Single-file HTML5, CSS3, Vanilla JavaScript (ES6+) |
| Dependencies | None. Zero external libraries, frameworks, or CDN links. |
| File Size | ~65 KB (single HTML file, self-contained) |
| Browser Support | Chrome 90+, Firefox 88+, Edge 90+, Safari 14+ |
| Typography | Times New Roman, serif — locked at 11pt base size |
| Panel Dimensions | 4 inches × 9 inches per panel |
| Option 1 Sheet | 20 inches × 9 inches (5 panels × 2 strips) |
| Option 2 Sheet | 24 inches × 9 inches (6 panels × 2 strips) |
| Screen Scale | 37.5% (panels display at 1.5in × 3.375in on screen) |
| Colour System | 30 themes via CSS custom properties (--cr, --bc-bg, --bc-text) |
| Image Handling | FileReader API, base64 DataURL, stored in memory (not uploaded to server) |
| Text Editing | HTML contenteditable attribute — native browser editing |
| Print Engine | CSS @page, @media print, window.print() |
| Fold Lines | Absolute-positioned dashed borders, hidden at print |
| SEO | Full Open Graph, Twitter Card, JSON-LD WebApp + FAQ + HowTo schema |
| Privacy | No cookies, no localStorage, no analytics, no data transmission |
| Licence | Free to use |
The Faculty Research Brochure Generator was designed specifically for people who need professional printed materials for academic contexts, but may not have the time, budget, or skill to use professional design software.
Create branded faculty booklets for open days, clearing, and prospectus supplements.
Produce polished one-pager summaries of institute capabilities for funding applications.
Design outreach materials for public engagement events without a designer.
Create printed handouts for departmental events, external visits, and board meetings.
Produce capability statements for industry partner meetings and technology showcases.
Generate localised booklets for overseas recruitment fairs and partner university visits.
Create postgraduate recruitment booklets with scholarship info and supervisor profiles.
Showcase spin-outs, patents, and IP commercialisation to industry and investor audiences.
Use as a base template for custom academic brochure tools. The single-file architecture makes it easy to fork and extend.
Comparison: This Tool vs. Alternatives
| Feature | This Tool | Canva | Adobe InDesign | Word/PowerPoint |
|---|---|---|---|---|
| Cost | Free | Freemium | Paid (£55/mo) | Free / Paid |
| Login required | No | Yes | Yes | No |
| Academic-specific layout | Yes | No | No | No |
| Multifold print output | Yes | Partial | Yes | No |
| Zero-margin PDF | Automatic | Manual setup | Yes | Limited |
| 30+ design themes | Yes | Yes (generic) | No | No |
| No installation needed | Yes | Yes | No | No (desktop app) |
| Data privacy (local only) | Yes | No (cloud) | Yes | Yes |
| Learning curve | None | Low | High | Low |
Can I save my work and come back to it later?
Currently the tool does not have a save/load system. Text edits and uploaded images exist only in the browser session. To preserve your work, print to PDF immediately after editing. You can then re-open the HTML file and re-edit as needed for a revised version. A future version may add local storage support.
Why does my PDF look different from the screen preview?
The screen preview scales all panels to 37.5% of their real size so they fit on your monitor. The PDF output is at 100% — the true 4×9 inch panel size. This means text will appear larger in the PDF than on screen, which is correct. If the PDF looks too small, your printer driver may be scaling it down — ensure you print at 100% scale with no page fitting.
Can I change the font?
The font family (Times New Roman) is locked by design. Academic print publications have strict typographic standards and Times New Roman is the most widely recognised academic serif font. Themes can change font weight, letter-spacing, case, and colour. If you need a different font, you can edit the CSS directly — search for 'Times New Roman' in the source and replace with your preferred font.
Can I add my own logo to the cover?
The current version does not have a separate logo upload slot. You can incorporate your logo by including it in the cover photo — place the photo with the logo positioned in the lower portion of the image, which will appear in the transparent middle zone of the cover gradient overlay. Alternatively, a developer can add an <img> element with a file input inside the .ccl (cover content layer) div.
The fold lines are showing in my PDF. How do I hide them?
Fold lines are hidden automatically during printing via the CSS rule .fl { display:none !important } in the @media print block. If they are appearing, ensure your browser is using the correct print stylesheet. In Chrome, check that "Background graphics" is enabled but "Headers and footers" is disabled. If the problem persists, try a different browser.
Can I add more panels or pages?
The tool supports two fixed formats (10 and 12 panels). Adding more panels requires editing the JavaScript makePanels() function and updating the @page size accordingly (each additional panel adds 4 inches to the width). This is achievable for developers comfortable with the codebase.
Does this work on mobile or tablet?
The tool is designed for desktop use. It will load on mobile browsers, but the sidebar UI and canvas layout are not optimised for small screens. Editing contenteditable elements on mobile is possible but cumbersome. Print functionality requires a desktop browser with full print dialog support.
Can I change the default placeholder text?
Yes. The placeholder text is set via the data-ph attribute on editable elements, and displayed via CSS ::before pseudo-element when the element is empty. The actual default content is set in the innerHTML of each panel in the makePanels() JavaScript function. Edit those strings to change what appears by default when the tool loads.
Is the tool accessible (WCAG compliant)?
The interactive UI (sidebar, buttons, theme swatches) uses semantic HTML and keyboard-focusable elements. The brochure panels themselves are designed for print output, not screen reading, and do not have full ARIA landmark structure. The tool scores well on basic accessibility checks for the UI but is not a full WCAG 2.1 AA implementation.
![ꜱᴀʏ: 'ꜱᴜʀᴇʟʏ ᴍʏ ᴘʀᴀʏᴇʀ, ᴀʟʟ ᴍʏ ᴀᴄᴛꜱ ᴏꜰ ᴡᴏʀꜱʜɪᴘ, ᴀɴᴅ ᴍʏ ʟɪᴠɪɴɢ ᴀɴᴅ ᴍʏ ᴅʏɪɴɢ ᴀʀᴇ ꜰᴏʀ ᴀʟʟᴀʜ ᴀʟᴏɴᴇ, ᴛʜᴇ ʟᴏʀᴅ ᴏꜰ ᴛʜᴇ ᴡʜᴏʟᴇ ᴜɴɪᴠᴇʀꜱᴇ.' 💗 [6:162 ] 𝙴𝚒𝚍 𝙼𝚞𝚋𝚊𝚛𝚊𝚔 💌](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0m7kYGxO1H7FiA7SWkQIJSQCtCwuey8uhAAmYKf1UvIV90U-TnXsG7qJuykEs7mtt4q6G3DbZbY14hs9PQkxbANzLVqRVqJ32x_3TcFwBnN7kl_tyxlhA_9O2NduhdIFZn791xRcc-hCjpV3szPPV1_O5MZVtI0TFnFpCZLbYAlgLj5PpwNV1o1cyQ/w100/FB_IMG_1659767607264.jpg)
0 মন্তব্যসমূহ