Design directions

Start page of mika-engineering.com, Round 3 is the newest: each direction says something different, not just looks different. Placeholder numbers and projects. Open each on desktop and on your phone.

Round 9 · 34's hero, the process as a chat on one frame, stacking cards, two doors, "Your turn."

40 · Chat besideChat cards stack on the left, the same frame reacts on the right: request, proposal approved by the customer, watching it get built, the editor, live.

41 · Chat overA big frame with a floating messenger over its corner, like looking at the customer's screen; step cards stack beside it.

42 · Phone & deskThe customer chats on their phone in front of the big screen where their site gets built; they tap "Approve"; the editor shows on the phone too.

Round 8 · Main page: "You describe it → I build it" in 30's look · how it goes · two doors

34 · Describe → buildThe straight merge. 29's wipe, 27's assembly into a browser frame, four stacking step cards, two tall doors that widen.

35 · One frameOne camera: the assembled site stays on screen and lives through request, proposal, live preview and launch, then splits into the two doors.

36 · ShortLeast scroll, about four screens. The hero plays on load, a four-step timeline, two cards with a glimpse on hover.

You: … / Me: …

37 · DialogueTwo voices through the whole page: your requests on one side, my build on the other; the process as a short exchange; the doors are your last answer.

38 · DaylightStarts dark, a lamp clicks on and the page turns to daylight for "I build it." A line draws through the steps; two real doors open a crack.

39 · Big typeBoldest. The site builds inside the letters of "I build it."; huge step numbers; two giant words as doors.

Round 7 · Main page candidates (on 18's engine, each teasing 26) + editor demo subpage

27 · AssembleBold light, lots of scroll. A huge "Whatever you have in mind." on a blank page, and a whole company site assembles around it. Then three tools build from wireframe to working, plus 18's breakpoint window.

28 · CalmQuiet and premium, little scroll. A real booking calendar right in the hero ("This is real. Try it."), then a calm shelf of four small working tools.

29 · TakeoverBold, dark, cinematic, the most scroll. "You describe it." wipes to "I build it.", then full-screen chapters where each request becomes a working tool.

30 · ShowroomPlayful premium. Scroll walks you sideways through a showroom of working tools on pedestals; the exit door leads to the full showroom (26).

sketch → built

31 · From sketchPrecise, in the spirit of 3. "Bring a sketch. Leave with exactly that." A napkin sketch straightens into the real site; three sketches ink into working tools.

32 · YoursFriendly bold, little scroll. "I run a [workshop ▾]": pick your business and the colour, live preview and three working tools change to fit it.

33 · Editor demo (subpage)Try the editor clients get, on a sample workshop page: edit text, drag blocks, phone view, publish, undo, with an optional 30-second tour. Nothing is saved.

Round 6 · Interactive stories — for companies: "whatever you have in mind, I build exactly that"

21 · QuietCalm and light, little scroll. Wipe between design and code, inspect any element like a design handoff, projects that open out of their cards, a lovely contact form.

22 · Build liveBold, lots of scroll. A website gets built as you scroll: sketch → code typing itself → rendering → styling → interactions → ship. Scrubs backwards too.

23 · ConfiguratorBold, little scroll. Pick industry, mood, layout and a feature; a live preview morphs into exactly that, with a working calendar, map, slider, timeline or product configurator.

24 · Product storyQuiet and premium, medium scroll. A 3D laptop and phone turn through clickable live mini-sites; grab and spin them; the screen splits into its layers.

25 · CinematicQuiet but dramatic, lots of scroll. A night film: the camera flies through floating UI pieces that assemble into a website; look around with the mouse, click a piece to focus.

26 · Request → resultBold, little scroll. Type or pick "I need …" and it builds itself and works: booking calendar, configurator, map, price calculator, upload, live dashboard and more.

Round 5 · Show what it can do — open these on a desktop and play

18 · Scroll storyThe hero comes apart into its design file and reassembles as you scroll. Word-by-word headline, a breakpoint window that stretches a site from phone to desktop (drag its edges too), stacking process cards, sideways work reel, a dark-to-light wipe.

19 · Hover & cursorAn x-ray lens follows your cursor and shows the design file or the code under the finished site. Letters dodge, buttons pull, cards tilt, words get struck through.

20 · PlaygroundRestyle the whole page live with design tokens, x-ray it like a design file, drag the hero around a 12-column grid, throw the "no WordPress" tags around.

Round 4 · Bold, and the page proves it

Exactly as drawn.

16 · Bold3's scale on 10's warm dark. Six live demos: resize, hover, toggle — fluid type, free grid, exact states, nothing jumps, breakpoints, palette tokens.

17 · Bold lightHuge type on warm paper, vermilion redlines. Design file → live site, six live demos, and the page itself uses every effect.

Round 3 · Different content, not just different looks

Your studio. My build.

10 · Studio partnerThe build partner a design studio plugs in: their name stays on the work, extra capacity, one direct contact. Calm warm dark, copper accent.

design → site

11 · Proof firstOpens with a design file next to the finished site, then three builds as "asked / built / client now does". Light product look, indigo accent.

12 · OwnershipThe case a designer forwards to a client: five-year cost comparison, what you own at the end, and when WordPress is the better choice. Annual-report style.

13 · The editorCustom site plus an editor the client can use without breaking the design. The editor itself is the hero image. Soft, app-like, teal.

Let me be straight.

14 · Straight talkFirst person: what I do and don't, when I answer and when I build, and an "is this a fit?" check. Warm cream, terracotta.

15 · The processOne project from "you send the file" to "your client is live" as a timeline, with checklists and FAQ. Navy and warm yellow.

Round 1 · Calm

1 · BlueprintTechnical grid, one strong blue, code-like annotations. Precise, calm, engineered.

2 · EditorialBig serif type, lots of white space, magazine layout. Speaks to people who care about typography.

3 · Spec sheetDark, bold sans, numbers up front like a product data sheet. Loudest, most "dev tool".

Round 2 · Loud

4 · Neo-brutalThick black borders, hard offset shadows, yellow, cyan and pink. Loud, friendly, impossible to miss.

5 · TerminalThe whole page is a shell session: commands, diff against WordPress, git log of projects.

6 · Swiss posterGiant type, red and black, strict grid, a red disc. Like a 1960s design poster.

7 · Desktop 95The site as a retro operating system: windows, title bars, taskbar, a "Start a new project?" dialog.

MONTHLY 0.00 €

8 · ReceiptOne long printed receipt: WordPress licence 0.00, plugin renewals 0.00, stamped "paid once".

9 · MaximalNeon gradients, running marquees, spinning badge, tilted cards. Maximum energy.