Snapline

Snapline is a complete website for a studio that designs and builds websites. Its idea comes from the canvas the studio works on: client sites float on the first screen as frames, desktop and phone side by side, one always selected with handles and a size readout, and snaplines flash where their edges line up. The work is not a set of screenshots: every client site is drawn in code, so it stays sharp at any size and reflows like the real thing. Drag the handle in the breakpoint section and a client site resizes from 1440 to 390 pixels, snapping to the widths it was designed for.

It has 12 page types: home, work with platform and sector filters, a case study for each project (with a desktop, laptop, tablet and phone switch, before and after, and the client's comment), services drawn as layers panels, pricing with packages, care plans and a live estimator, studio with the team, a journal and an article page, a project brief form that receives the estimate, privacy, terms and a 404. Prices, timelines and platforms are on the first screen, as buyers of websites expect.

Every page is designed in light and in dark, with a toggle in the header, and the layout adapts to desktop, tablet and phone. The studio, its clients and its figures are invented, and the photographs are for demonstration only, so replace them with your own before you publish.