(Studio)
How we makea site
The same six steps for every one of the 56 sites. Each step leaves something you can check: the reference it follows, the facts it uses, the frames it was tested on, the score it got.
The six steps as one line, drawn as you read. The score at the end is FIAMMA’s, our first, for a neon workshop in Turin.
-
01
Study
We start from a library of what award-winning sites actually do: 151 Awwwards Sites of the Day and 18 best-selling templates, with 75 effects timed frame by frame. Many paths run through it. We follow the few that fit your subject, and the sites they lead to become the starting points.
You seeThe backbone and the motion source, named on every project page.
-
02
Direction
Two or three of those starting points become directions. Each one ties a backbone, a source of motion and one idea from your subject to the parts it will shape: the type, the grid, the motion, the colours and the picture engine.
You seeDirection cards to choose from, or mix.
-
03
Research
Everything chosen is pulled into one brief, and the brief goes out for facts: Wikipedia and Wikimedia Commons, open archives, font libraries like Google Fonts and 1001 Fonts, and whatever you send us. Each fact keeps its source; the words on the site use only what was found or what you told us.
You seeA research file with the sources.
-
04
Build
The brief places every part on the page. Vite and plain JavaScript, GSAP for motion, Lenis for scrolling, WebGL or canvas only where the subject needs it. Pictures are drawn in code from the subject or come from archives with their licences, and there is a version for people who turn motion off.
You seeThe site, on a link you can open anywhere.
-
05
Test
A real browser scrolls every page at 1440×900, 1680×950 and on a 390 px phone, and records every page change frame by frame. Anything clipped, out of place, too big or over other text is marked, fixed and tested again.
You seeThe phone screens and the opening frames, on each project page.
-
06
Review
An independent critic scores each round out of 10 against the award-winning reference sites. Its bar is 8, with no category below 7; a site that falls short gets another round, up to four. Then it joins the work, and the next site starts again from the library.
You seeThe score, on the project page. Ours run from 6.8 to 8.3.
So far
- Sites
- 56
- Rounds of review
- 79
- Different backbones
- 54
- Sites in Romanian
- 10
Questions
Yours isn't here? Write to [email protected] and we answer it, then add it to this list.
What do you need from me?
A few lines: what the site is for, who it is for, and anything you already have, like a logo, photos or text. We do the research.
Do you work in Romanian?
Yes. Eight of our sites are in Romanian and two are in Romanian and English.
Can you redesign the site I have?
Yes. 12 of our sites are redesigns, some in more than one direction: Raven Lenders got five to choose from.
How many rounds does it take?
Forty of our sites were finished in one round. Sixteen took two to four.
Can I see the sites working?
Yes. Every project page links to the live site, and shows its review score, the low ones too.
What does it cost?
We price each site from its brief. Write to us with what the site is about and we reply with a direction and a quote.