A brand studio’s site where the work goes first and the plan is never hidden.
Website · Brand studio: social media, ad films, web, brand identity
Visit the live site ↗


PF-02 · Facts
- Client
- Piktram
- Sector
- Brand studio: social media, ad films, web, brand identity
- Language
- Turkish
- Pages
- 105 in the sitemap (27 Oct 2026)
- Built with
- React, prerendered to static HTML; self-hosted Outfit type
- Publishing
- From the studio’s panel, one button per release
- Live site
- piktram.com ↗
Piktram is a brand studio that runs social media, ad films, websites and brand identity for its clients. Its site has to show the work, explain each service as a plan, and stay current without a developer at every change.
Projects and guides are written in the studio’s own panel; one button rebuilds the site and ships it, and a build that fails never touches the live site.
In numbers · each with its source
- 105pages in the sitemaphome, services, projects, sectors, guidessitemap.xml, read 27 Oct 2026
- 17project pageseach with its own case pagesitemap.xml, read 27 Oct 2026
- 16sector pagesservices told in each sector’s termssitemap.xml, read 27 Oct 2026
- 49guides on the blogwritten and published from the panelsitemap.xml, read 27 Oct 2026
The site, running
The home page, as it runs today. Recorded on the live site.
The projects are on the home page before anything is explained.
/01 The work first
Recent work sits high on the home page as large picture cards, each tagged with its service. The projects page filters the same cards by service, and every card opens its own page.
Seventeen project pages are in the sitemap today, written and published from the studio’s own site panel.


Every service is told as a plan: scope, calendar and budget up front.
/02 Services as plans
Four services, social media, ad films, web design and brand identity, each have their own page with the process and the price. Web design has three deeper pages: search, speed, and answer engines.
A job’s journey is drawn as steps on the home page, from the first call to delivery, with the tools used at each step.



Sixteen sector pages and forty-nine guides, for the reader who searches first.
/03 Sectors and guides
Each sector page tells the same services in that sector’s terms, from coffee to clinics, and links the projects that fit it.
The blog groups its guides by service. A new guide is written in the panel and goes live with the next publish.


The page is there before the script runs.
/04 Built to be read
Every page except the labs is drawn to HTML at build time, so the headline is in the first bytes a browser or a crawler reads; React takes over in the browser. The type is served from the site itself, with no third-party font request.
The build also writes a sitemap, structured data, an llms.txt and an AGENTS.md at the root, so search engines and answer engines read the studio the way it describes itself.


The same pages in one column, the first screen kept for the headline and the work.
/05 On the phone
On a phone the home page keeps its headline, the two doors and the work cards in the first screen. Service and project pages stack into a single column.
The blog keeps its service filter on the phone as a row of chips above the first guide.




Page types
One screen of each kind of page, from the live site.
- Home

- What we do

- Recent work

- Sector page

- Questions

- About

- Contact

- Panel

What shipped
- 01A home page that leads with the work, then the plan, the services and a job’s journey
- 02Four service pages and three deeper web pages: search, speed, answer engines
- 03Seventeen project pages, filtered by service
- 04Sixteen sector pages
- 05A blog with forty-nine guides, grouped by service
- 06Projects and guides written in the studio’s panel, published with one button
- 07Pages drawn to HTML at build time, with a sitemap, structured data, llms.txt and AGENTS.md

Credits
Built by the Paftane team.
Visit the live sitepiktram.com ↗

