Websites
Client projectNolan W Art
A commission site for hand-drawn sports portraits, personal pieces and pet drawings.
A bold, poster-style site for custom drawings: a collage of the artwork up front, a filterable portfolio with a lightbox, the kinds of commission on offer, how the process works, and a request form.
Client project — designed and built by TrueFrame Studio
- Type
- Client project
- Category
- Websites
- Platform
- Responsive website
- Built with
- HTML · CSS · JavaScript
- Disciplines
- Website Development, UI/UX Design
Screen 01 — Home
The collage hero: a framed drawing with two smaller pieces pinned over it.
01Live site
See it live.
On the live site
- 01
Filter the work by football, basketball or portraits.
- 02
Open any drawing to see it larger.
- 03
Scroll to Request a Drawing to see the commission form.
Key features
- 01
Filterable portfolio
The commissions, filtered by football, basketball, portraits and other.
- 02
Commission request
Name, email, type of drawing, deadline, reference link and the idea, sent as a ready-to-send email.
- 03
Lightbox viewer
Any piece opens larger with its title; Escape or a click outside closes it.
02Screens
Inside the product.
Responsive
Recomposed for every screen.
Navigation, hierarchy and controls are rebuilt for tablet and phone, not scaled down from the desktop layout.
Tablet768 px
Phone390 px
03Under the hood
How it was made.
- BungeeDisplay · 400
- Permanent MarkerLabels, titles
- ManropeText · 400–800
- Paper#F4F1E9
- Orange#FF7900
- Burnt#D85F00
- Ink#0B0B0B
Nolan W Art makes custom hand-drawn artwork from people's photos: sports portraits, player posters, personal portraits, pet drawings and one-off ideas. The site opens with “Your moment. Drawn by hand.” beside a collage of finished pieces.
01Brief and goalsWhat the site is built to do
From there it walks a visitor through the work, what can be made and how a commission works, and ends on a request form. Sending it opens the visitor's own email with the request already written to Nolan, and a phone number for calls and texts sits alongside.
Goals
- 01
Show the artwork first, and the range of styles and subjects.
- 02
Explain what can be commissioned and how the process works, in plain steps.
- 03
Make a commission request quick to send, with everything Nolan needs to quote it.
02Design decisionsTypography · Colour · Layout · Interaction
- Typography
Poster type and a marker hand
Bungee, a blocky display face, sets the headlines in capitals, with the second line of the hero in orange. Permanent Marker writes the small labels and the artwork titles, and Manrope carries the reading text.
WhyThe marker face echoes the drawings themselves, and the heavy display type gives the page the punch of a game-day poster.
- Colour
The artwork's own palette
Orange, near-black and a warm paper white: the colours of the logo and of many of the drawings. A full orange band holds the request form, and a black band holds what can be made.
WhyWhen the interface shares the artwork's colours, the site and the work read as one brand.
- Layout
A collage, not a slider
The hero sets one framed drawing with two smaller pieces tilted over it and a rotated ORIGINAL COMMISSION WORK tag. The portfolio below mixes tall and wide tiles in one grid.
WhySeveral finished pieces in the first screen show the range at a glance, the way work pinned to a studio wall would.
- Interaction
A form that writes the email
The request form asks for a name, email, type of drawing, deadline, a reference photo link and the idea. Sending it opens the visitor's email app with a formatted request to Nolan, ready to send.
WhyRequests arrive in Nolan's inbox in the same format every time, with no form service or server to run.
03Build and technologiesHTML · CSS · JavaScript
HTML
One page: the collage hero, a ticker, the work, what can be made, how it works, a photo strip and the commission form.
CSS
Custom styles: the collage hero, a scrolling ticker, a mixed tall-and-wide portfolio grid, a fine grain overlay and reduced-motion support.
JavaScript
script.js handles the mobile menu, scroll reveals, portfolio filters, the lightbox and the email built from the request form.
Google Fonts
Bungee for display, Permanent Marker for labels and titles, Manrope for text.
Netlify
Static hosting. No framework, no build step and no backend.
Services delivered
04ProcessDiscover · Plan · Design & Develop · Launch & Support
01Discover
Start from the drawings: the range of styles and subjects, and what someone needs to know before asking for one.
02Plan
One page in order: the work, what can be drawn, how a commission works, then the request form.
03Design & Develop
Design a poster-style system around the orange and black of the logo and the artwork, then build the collage hero, filters, lightbox and form.
04Launch & Support
Publish as static files on Netlify, with the form writing requests straight to Nolan's email.
The site. Nolan W Art is a client project, designed and built by TrueFrame Studio and live at nolanwart.com (opens in a new tab).