Studio and agency website templates. Build your studio’s website and send it alongside your proposal to new clients.
Bring your projects, services and studio into one visual direction. Choose a design that helps a prospective client understand the work and how a collaboration begins.
Sample designs · replace the fictional content with your own.
AI ChatWorkflow example
Studio identity
You
Present my studio using these projects, services and people, then add a brief enquiry.
AI · example response
Give me your offer, main examples and how visitors should contact you. I can place them in the template’s sections and move or add sections if your content needs a different order.
Arrange your website content
Collect the material
Use your service descriptions, project images and contact details.
Place it in the template
Ask AI to replace sample sections and keep the design elements you like.
Reorder or add a page
Move important information earlier or create a detail page when it needs more room.
Next: read the website as a visitor and see whether the offer and contact are easy to find.
Illustrative conversation, not a live AI session.
01 / Studio identity
What should a client understand about your practice?
They should see what your studio creates, examples of your work and who they will work with. Choose a few relevant projects and describe the services they represent. Put a clear contact route beside them so someone can send you a brief after seeing the work.
The visual voice
Typography, imagery and space should help visitors read your work.
The practice
Show genuine services, roles and decisions instead of filling a sample identity.
02 / Studio directions
Which design connects work, services and studio context?
Compare how each preview presents projects, services and the studio. Choose the amount of imagery and detail that fits your work, then ask AI to add your brand and content. The sample studios provide a layout to adapt, not a requirement to describe your business the same way.
VYNE
Bold typography, cobalt portrait, projects, services and principles. Check its visual effects for your audience.
Current download inspected on 2 October 2026. Confirm the selected files on the product page.
index.html
RECREATE.md
assets/current-product.png
assets/hero-form.png
assets/serein-brand.png
Some resources may load from external URLs. Review the selected project before publishing.
Sample designs · replace the fictional content with your own.
See the source files and technical details
Forma Studio: work, approach and services in one source
11-forma-studio/ index.html · main section order
Exact order in the current HTML. These are original English headings, not a proposed redesign.
01 #home — Forma
02 #inside — (visual section)
03 #explorations — Ideas take shape through type, colour, materials and a little room to play.
04 #work — SelectedWork.
05 #approach — A visual idea becomes useful when the small decisions work together.
06 #studio — An imagined studio for identities with character and websites with purpose.
07 #services — Services
08 #motion — (visual section)
09 #notes — How an idea takes shape
10 #scope — Scope
11 #faq — A fewanswers.
12 #journal — Studio notes
13 #contact — Give your nextidea a form.
Forma Studio
Original supplied English source; fictional sample content. Open the whole page to inspect the sequence and controls.Open full preview ↗
AI ChatWorkflow example
Work backs services
You
Match each studio service to one of my real projects and describe what we delivered.
AI · example response
Send the brief, your role and the finished images. I can turn the notes into a short project description and place it beside the work. I will use results only if you supply them.
Add a real project
Project and brief
Name the client or project and explain the problem you were asked to solve.
Your contribution
Explain what you delivered and add the images or screens showing that work.
Result
Show the completed work. Add a business result if you can support it; otherwise describe what was delivered.
Next: read the project description beside your own images.
Illustrative conversation, not a live AI session.
03 / Work backs services
Which real projects demonstrate each service?
Pick a project that demonstrates each service: an identity for branding, a website for web design or a campaign for advertising. Add your role and the finished work. A client can then move from the service description to an example of what your studio delivers.
Checked locally on this device; nothing is submitted.
Visitor question
Source location
What the actual source shows
What your website needs
What does this service produce?
Forma #services → Web design / Identity / Art direction
Source descriptions connect pages/hierarchy, identity elements and image direction.
Replace with one real service’s inputs, deliverables and exclusions.
Which work proves the role?
Forma #work → Terra / Index / Vesper
Identity/packaging, editorial and art-direction concept studies are distinct. They are not client commissions.
Attach a permitted project, actual contribution and the deliverable that supports this service.
How is the direction reviewed?
Forma #approach → MAKE FEEDBACK SPECIFIC
The sample pairs “easier to scan?” with a proposed line-break comparison.
State who reviews, which variants they receive and what decision is needed.
AI ChatWorkflow example
People & process
You
We are one founder and two collaborators. Replace the sample team with our actual roles.
AI · example response
Send names, roles and how a project runs in your studio. I can adapt the team and process sections to your real setup, including a solo founder or collaborators.
Introduce your actual team
Add people
Use names, photos and descriptions you can publish.
Explain roles
Say who designs, who manages the work and where collaborators join.
Show collaboration
Explain how the client starts and gives feedback.
Next: check that the people and process match the studio a client will actually work with.
Illustrative conversation, not a live AI session.
04 / People & process
Who will the client work with?
Show the people actually working on the project and what they do. A solo studio can introduce its founder and explain when collaborators join. Ask AI to adjust the team and process sections to your real setup, including how the client gives feedback.
01
People
Add the founder, team or collaborators who actually deliver the work.
02
Roles
Say who designs, who manages the project and how the client supplies feedback.
AI ChatWorkflow example
Project start
You
Make this form send the client’s brief, timing and reply address to my studio.
AI · example response
Choose email, a form-receiving service or a booking link. I can connect that destination and help check a test submission. A message shown in the browser is not proof it arrived.
Connect enquiries to your inbox
Choose the destination
Use your email address, a form-receiving service or your booking link.
Ask AI to connect it
Give it the destination and ask for the button or form to be connected. Private credentials stay in the authorised tool setup, not the public HTML.
Send a test
Confirm the message arrives or the booking appears in your service, not only as a success message on the page.
Next: check the test message or booking inside your receiving service.
Illustrative conversation, not a live AI session.
05 / Project start
What should a prospective client send?
A short brief: what they need, the brand or product, the expected timing and a reply address. Put these fields in a connected form, or tell them to send the same information by email. Test that you receive it before using the website for client enquiries.
Choose the destination
Use your email address, a form-receiving service or your booking link.
Ask AI to connect it
Give it the destination and ask for the button or form to be connected. Private credentials stay in the authorised tool setup, not the public HTML.
Send a test
Confirm the message arrives or the booking appears in your service, not only as a success message on the page.
AI ChatWorkflow example
Adapt the direction
You
Apply my studio’s logo, colours, fonts and project images across this design.
AI · example response
Send the logo, colour values, font names and images. I can apply them to the template and keep the section structure, then show you how the changes look together.
Apply your brand
Add brand materials
Provide your logo, fonts, colours and project images.
Apply the identity
Ask AI to update the website throughout while keeping the sections you like.
Preview desktop and phone
Check the logo size, text contrast and images together.
Next: refine any colour, spacing or image that does not fit your brand.
Illustrative conversation, not a live AI session.
06 / Adapt the direction
Can I adjust the design to my studio’s identity?
Yes. Give AI your logo, colours, fonts and project imagery. Ask it to apply your identity throughout the website while preserving the structure you like. You can also change image proportions, spacing and animations; review the result on desktop and phone.
See the prepared template example
›_ AI editing exampleFormwell
You
Change the accent colours while preserving the page’s layout.
AI · example response
The prepared Formwell example changes the colour treatment. Your VYNE or other studio version needs its own content, motion and layout review.
Prepared conversation and project versions. No live AI connection.
See the source files and technical details
VYNE: source motion preference and pause control
09-vyne/ script: preference declaration/applyMotion and separate change listener
Actual desktop check selected Still using thumbnail 2, paused motion, opened the studio detail and used Tab/Escape; focus stayed in the dialog and returned to its opener. The source also reads prefers-reduced-motion. That OS preference was not emulated in this browser test; mobile touch and all animation states still need review.
const mediaQuery=matchMedia('(prefers-reduced-motion: reduce)');let paused=mediaQuery.matches;let cubeFrame=0;const motionButton=$('.motion-button'),cube=$('.cube'),scene=$('.services-scene');
function applyMotion(){document.body.classList.toggle('motion-paused',paused);motionButton.setAttribute('aria-pressed',String(paused));motionButton.setAttribute('aria-label',paused?'Resume page motion':'Pause page motion');$('.motion-label').textContent=paused?'Motion off':'Motion on';if(!paused&&!document.hidden)updateCube()}
// Separate source listener:
mediaQuery.addEventListener('change',e=>{paused=e.matches;applyMotion()});
VYNE
Original supplied English source; fictional sample content. Open the whole page to inspect the sequence and controls.Open full preview ↗
Actual manual Still selection, desktop Chrome 1118×958.Actual studio dialog. Tab remained inside; Escape returned focus to Meet the idea.
07 / Choose the practice fit
What should I check before choosing?
Choose a design that gives your projects and services enough space. Check the files and licence, then prepare your brand materials and contact route. The template is your studio website; client project management can stay in the tools you already use.
OneDollarStock is implementing a project to prepare the platform for entry into the German market under the “Go Global” acceleration track of the “Unicorn Hub Startup Booster” programme, project no. FENG.02.28-IP.02-0013/23. The project is co-financed by the European Funds for Smart Economy 2021–2027 under the priority “Innovation-friendly environment”, Measure FENG.2.28 Startup Booster Poland.
Learn more about the project →
