What is an immersive 3D website?

An immersive website uses real time 3D graphics in the browser, usually through WebGL. The visitor does not just read a page. They move through a scene, touch objects, and change what they see.

That is powerful. It is also more work to design, build and keep fast. So the question is never “would it look impressive?” It is “does the medium do a job that nothing simpler can do?”

When is an immersive website worth it?

In our experience, the answer is yes when at least one of three things is true. Each of the projects below shows one of them clearly.

When the product cannot be photographed

House of Samuha hosts private supper clubs for corporate clients. Each one pairs a handpicked chef with an unusual place: a working farm, a granite quarry, a resort. Chefs are chosen for each event. Venues are found rather than booked.

That makes the product almost impossible to show. It cannot be sampled. It cannot be adequately photographed. It cannot be explained on a menu. A client has to picture an evening that has not happened yet.

A conventional site, however well shot, would have sold the company short. So we did not try to show the dinner. We built somewhere to imagine it.

The House of Samuha site is built around one object: an oval metal platter with the logo debossed into it. It stays at the centre of the screen from the first frame to the last. Behind it, a custom shader draws slow fog that never visibly repeats.

Scrolling carries the visitor into a spiral of video frames from real past events. Then come angled walls, one per chef, with a portrait mounted above each. The site ends on a slider of venues and one question: where would you want yours?

The platter matters for a practical reason. A site made of separate scenes can feel like four unrelated demos. One object that never leaves gives the whole experience a spine.

When the argument has to be felt

Zero University believes the conventional degree has stopped delivering what it promises. They did not want a website that explained this. They wanted one that placed visitors inside the argument and left them somewhere unexpected.

So Why Zero is told as six stages. You enter by drawing a zero across a sheet of ice until it cracks. Two hands reach for each other, one gold and covered in company logos, one human. Then the scene shatters and you fall through a red void.

As you fall, glass shards rise past you carrying unemployment figures and data on graduate outcomes. Statistics like these rarely survive being listed on a page. They survive being met one by one, on the way down.

Each stage is separated by a gate. You draw, hold or press to move on. That deliberate act is what stops six stages from becoming a passive scroll.

This is the case for immersion at its strongest. The client was not selling a feature. They were changing a belief. Interaction made the visitor a participant before they had read a single line.

When the medium proves the claim

Tesels is a 3D product configurator platform. Brands use it to run photorealistic, interactive configuration on their own websites. Its claim is that the output stays performant on entry level hardware, on the phone a customer is actually holding.

A configurator company can describe that claim. Or it can hand the visitor a configurator. On the Tesels homepage, we chose the second.

The hero holds a live mini configurator built around a watch. A visitor can change the configuration in a few clicks and open an exploded view, before reading any copy. The whole model ships at under 300 KB and loads in under a second on reasonable hardware.

That figure is the argument. Anyone comparing configurator vendors has likely sat through heavy, slow demos elsewhere. A photoreal object that simply responds within a second makes the case before any feature list. A demonstration beats a description, and it beats it early.

What should you check before you commit?

Immersion only works if the practical side holds up. These three questions matter as much as the creative idea.

Who is your audience, and what are they holding?

Why Zero’s audience spans every economic bracket in India. Many of them hold inexpensive, ageing phones. A site that only worked on flagship hardware would have contradicted the very thing it was built to say.

So we borrowed a four year old budget Tecno Pova with a Mali class GPU. It stayed on the desk for all five months of the build. The client arrived with roughly 1.5 GB of models and textures. The shipped site is under 10 MB, and it runs at 50 to 60 FPS on that phone.

The site also checks its own frame rate. If performance drops for a sustained period, it steps down a quality tier on its own. The visitor never chooses a setting and never sees it happen.

Is performance a constraint from day one?

That result was not found at the end. It came from setting the benchmark in the first week and letting it veto decisions for five months. Optimisation left until the end is why so many ambitious sites arrive slower than intended.

If a studio treats speed as a final polish, an immersive site will likely feel heavy. If speed shapes every decision, it can feel effortless.

Can your team still update the content?

An immersive site is no use if every change needs a developer. House of Samuha runs on Webflow, with custom code driving the Three.js layer. The company updates its own chefs, venues and events, while the experience around them stays exactly as built.

Oddity, a decor brand we worked with, is built the same way. Webflow was chosen so the client keeps day to day control of its own catalogue. For a company adding new artists all the time, that mattered more than any performance argument would.

A quick checklist: do you need an immersive website?

Answer each question honestly. If you cannot say yes to at least one of the first three, a conventional site is probably the better choice.

1. Is your product hard or impossible to show in a photograph?
2. Does your message need to be felt or experienced, not just read?
3. Would the website itself prove what you claim?
4. Do you know which devices your audience actually uses?
5. Will performance be set as a constraint at the start, not checked at the end?
6. Can the site sit on a CMS your team already uses to update content?
7. Is there one clear idea or object that can hold the experience together?

When should you not build an immersive website?

Immersion is a tool, not a status symbol. Here is when we would steer a client away from it.

• When a photograph already does the job. If a good image shows your product clearly, 3D adds weight without adding meaning.
• When the message works as text. If a clear paragraph makes the case, making people scroll through scenes to reach it gets in the way.
• When the 3D proves nothing. Every effect should serve the argument. If it would only decorate, leave it out.
• When performance cannot be built in from the start. A heavy site that stutters on your audience’s phones undermines the brand it is meant to lift.
• When nobody can update it. If the build would lock your team out of its own content, a simpler site you control is worth more.

In these cases, the same budget is usually better spent on a fast, clear conventional site. That is not a lesser outcome. It is the right one for the job.

How we approach the decision

We start with what the website has to do, not with the technology. Sometimes that leads to six interactive stages. Sometimes it leads to a single platter in fog. Sometimes it leads to a configurator in the hero that weighs almost nothing. And sometimes it leads to a conventional site. You can see the full range of what we do on our services page.

If you are weighing this decision for your own brand, we are happy to talk it through. Tell us what you are selling and who you are selling it to, and we will give you an honest view. You can reach us at our contact page.

Here is what Google announced, what it changes, and how founders can get their brand ready.

What is Google Pics?

Google announced Google Pics on 1 September 2026. It is an AI image and design tool inside Google Workspace, powered by Google’s Nano Banana image model. TechCrunch framed it as a tool where you “prompt instead of design”.

The basics:

• Who gets it. Workspace customers and Google AI Pro and Ultra subscribers.
• Where it lives. It starts in Docs and Slides, with Drive to follow.
• What it does. You can isolate and transform objects in an image, edit and translate text inside images, generate variations, and edit together with colleagues.
• What it does not have. Unlike Canva, it does not have a marketplace of templates made by creators.

That last point matters more than it looks. Templates come with someone else’s design decisions built in. A prompt-first tool starts from a blank request. The decisions have to come from somewhere, and if they do not come from your brand, they come from the model’s defaults.

What changes when anyone can prompt a design?

Two things change at once.

First, the number of people making visuals goes up. A sales lead can make a slide graphic. An operations manager can make an event poster. A founder can make a launch image at midnight. None of them need to open design software.

Second, the cost of making one more visual drops close to zero. So companies will make many more of them.

Put together, that means more visuals, made by more people, faster. Without shared rules, the result is drift. Each person prompts slightly differently, the model fills the gaps with its own taste, and within months the brand looks like a dozen brands.

What is a brand system for now?

A brand system used to be mainly a guide for designers. It explained how to use the logo, which colours to pick, which fonts to set, and what the brand should feel like.

Now it has a new reader: the AI tool, and the non-designer prompting it. A brand system is the source of the instructions they need. It answers the questions a prompt should include:

• What colours, exactly?
• What fonts, and where?
• What kind of imagery, and what kind never?
• How should the logo appear, and how much space should it have?
• What does the brand sound like in a headline?

Our take: this is the biggest shift in what brand guidelines are for since they moved from printed books to PDFs. They are no longer a reference people look at once. They are working rules, used every day, by more people than ever.

Why do consistency and taste matter more, not less?

Because AI tools make average work fast.

When every company has the same tool, the same model and similar prompts, much of what comes out will look alike. Clean, competent and forgettable. The easy path leads to the same place for everyone.

What sets a brand apart is everything the model cannot guess:

• A distinct identity. A mark, colours and type that are clearly yours, so even an AI-made poster is recognisable.
• Consistency. The same look across every slide, post and page, so people learn to recognise you.
• Taste. Someone deciding which of the twenty variations is right, and which ten should never be used.

A flexible system is what makes this possible. We cover how to build one in our guide to designing a flexible brand identity system. The strongest systems have a few fixed rules and plenty of freedom inside them, which is exactly the kind of structure a prompt can carry.

How should founders prepare brand assets for AI tools?

Start with the basics, and make them easy to find and hard to misuse.

1. Put everything in one shared place. Logo files, colour values, fonts and approved images, in a folder everyone can reach. If people cannot find the real logo, they will screenshot an old one.
2. Use exact colour values. Write down the precise codes, such as hex values, for every brand colour. “Our blue” means nothing to a model.
3. Write rules as short, plain sentences. “Headlines are set in our display face, in sentence case” is easy to paste into a prompt and easy to check against.
4. Show, do not just tell. Keep a set of approved example images. Many AI tools can work from examples, and so can people.
5. List what is off-brand. Clear “never” rules, such as no stock photo handshakes or no gradients on the logo, stop the most common mistakes.
6. Decide who approves. Fast production needs a clear check. Name who signs off anything public.
7. Protect the logo. Place the real logo file on AI-made images, rather than asking a tool to draw it. A generated copy of a mark can come out subtly wrong.

None of this needs a big budget. It needs someone to decide, write it down and keep it current.

Does a strong logo still matter in an AI world?

Yes. It may matter more. When visuals are cheap and plentiful, the logo is one of the few fixed points that tells people who made them.

That is why a logo has to be simple, distinct and dependable at every size. We explain the basics in why a logo is important. If your current identity is not up to the job, our guide on when you should rebrand can help you decide what to do.

What does this mean for your brand?

Tools like Google Pics will make your team faster. Whether that speed builds your brand or blurs it depends on the system behind it.

At BUNQ LABS, we are an award-winning studio in India that builds brand identities and immersive websites. More and more, part of that work is writing systems that hold up when many hands, and many tools, are making things. You can see what we do on our services page.

If you want a brand system your team, and its AI tools, can actually follow, get in touch.

This is a practical checklist, written by a studio in Bengaluru that designs brands and builds immersive websites. We have tried to make it useful even if you never hire us.

What kind of website do you actually need?

Most bad agency choices start here. There are roughly three kinds of website, and each needs a different kind of partner.

• A template site. A clean, standard site built on a theme or a site builder. Quick and affordable. Many small agencies and freelancers do this well.
• A custom marketing site. Designed from scratch around your brand, with its own layouts, motion and content. This needs a real design team and solid front-end developers.
• An immersive, award-level experience. Real-time 3D, scroll-driven storytelling, product configurators. This needs a studio that does design and serious engineering together. Very few do.

Be honest about which one you need. An immersive site for a product that only needs a clean page is money wasted. A template for a launch that needs to stop people in their tracks is a missed chance. We wrote more about this choice in does your brand need an immersive 3D website?.

What should you look for in a portfolio?

Not screenshots. Live websites.

1. Open their sites on your own phone. Not the newest flagship: an ordinary one. Does it load quickly? Does it scroll smoothly? Most of your visitors will see it this way.
2. Look for range, and for a point of view. Good studios have a recognisable standard of craft, but their sites do not all look the same. Each should look like the client, not like the agency.
3. Check the details. Type that is set with care, motion that has a purpose, pages that work at every screen size. Small things show how a team works.
4. Ask what happened after launch. Did the site do its job? A good agency can tell you.

Who will actually do the work?

Ask this directly. Some agencies sell with a senior team and deliver with a junior one, or pass the build to a third party.

Good questions:

• Who will design the site, and who will build it? Can I see their past work?
• Is the brand identity and the website done by the same team?
• Who will I speak to week to week?

The second question matters more than it seems. When brand and web are done by different teams, the website often ends up as a weaker copy of the brand. When they are one team, a single idea can carry from the logo to the last interaction. That is how we work at BUNQ LABS.

What do awards tell you about an agency?

Awards are a useful outside view of craft, because they are judged by working designers and developers. But read them carefully.

• Check it was their work. Award pages list credits. Make sure the agency did the part they claim.
• Know what it was for. A Site of the Month says more than a Site of the Day. An Awwwards Developer Award is judged on the build, which is the hardest thing to fake.
• Check it is recent. The team that won five years ago may not be the team you hire.

Only a handful of India-based studios have won the big international web awards. BUNQ LABS is, going by the FWA’s own profile data, the first India-based studio we know of to win an FWA of the Month, for Why Zero in July 2026. The same site won Orpetron Site of the Month that month, then Awwwards Site of the Month for September 2026, along with an Awwwards Developer Award. We explain what each award means in our guide to web design awards.

What questions should you ask before signing?

• What is included, and what is extra? (Content, photography, copywriting, 3D models, hosting.)
• How will the site be found on Google and by AI assistants? Will the words be real text, not just pictures?
• How will it perform on slower phones and connections?
• Who owns the code, the design files and the domain at the end?
• What happens after launch? Who fixes things, and how quickly?
• Can I speak to a past client?

What are the red flags?

• No live sites to show, only mockups and videos.
• A fixed price before they understand your goals. Good agencies ask a lot of questions first.
• Every portfolio site looks the same. You will get the same template too.
• Vague answers about who does the work.
• No mention of performance, search or accessibility. These are what make a beautiful site a useful one.

Is it better to hire in India or abroad?

Hire the best team for the work. India now has studios doing world-class work, judged by the same international juries as studios in London, Paris or New York. Working with a studio in India can also mean you get senior, award-level talent at a more practical budget, with a team that understands Indian audiences, phones and networks.

The same checklist applies either way. Test the live work, ask who does it, and read the awards closely.

Where does BUNQ LABS fit?

We are a multi-disciplinary design studio in Bengaluru, led by Sindhur Dutta, our Creative Director. We design brand identities and build immersive websites, real-time 3D and product configurators, for clients in India and worldwide. Our work for Zero University, Why Zero, won Site of the Month from Awwwards, the FWA and Orpetron, and an Awwwards Developer Award, and it runs smoothly on a four year old budget Android phone.

We are the right choice when you want a website that people remember and that still works for every visitor. If that is you, get in touch.

We learned this building Oddity. Oddity is a premium decor brand that works as a house for artists. The artists make the work. Oddity makes and sells it, names each artist, and pays them a royalty on every unit sold.

Its best-known product is Halo, a backlit photo frame that carries an artist’s poster. It comes in several sizes. The range now includes other objects for the desk and the home. The full case study is at /projects/odditty.

Why can’t a multi-artist brand have a fixed aesthetic?

Oddity did not arrive with a fixed style. It could not be given one either.

The whole idea is work from many artists with very different tastes. A brand built on one look would smother that work. It would also break the first time an artist arrived whose work did not fit.

So the brand had to flex as far as possible and still look like Oddity. It had to hold one artist’s poster and another’s. It had to hold a desk object, a backlit frame and whatever the company makes next. None of it could look like it belonged to a different company.

This is the problem for most marketplaces, collectives and curated brands. The product is other people’s work. The brand has to frame it, not compete with it.

How do you build a brand identity with almost no shape language?

The usual instinct in branding is to add. A shape, a device, a pattern, a graphic language. For Oddity, each of those would have been one more thing for the artwork to fight.

So the system uses almost no shapes. We did not invent a proprietary graphic device. We did not build a pattern library.

We did refine the existing logo rather than replace it. We designed a set of supporting symbols around it. That kept the value the brand had already built and gave the system somewhere to grow.

Holding back here was not a style choice. It was the only way the system could work.

What should identify a brand when shape cannot?

Colour. We chose colour to identify Oddity because it is the one brand asset that never fights the artwork. A gradient can sit behind any poster in the library without clashing with it.

The system has an extensive palette. It also has a large family of refined gradients, built for packaging, print and screens.

Why we rendered the gradients in Blender

We generated the gradients in Blender rather than drawing them in a vector tool. Rendered gradients have the depth and falloff of real light. Drawn ones have the flatness of an interpolated ramp.

It is a small decision with a large effect. A gradient built from light behaves like a material. A brand made almost entirely of colour needs its colour to have some physical presence.

How can a typeface carry a flexible brand?

If shape belongs to the artists, type has to work harder. We commissioned a custom typeface for Oddity. It is loud and confident. It is closest in feel to Impact, but distinctly its own.

We built a full hierarchy around it. The hierarchy sets how the heavy display weight sits beside everyday functional text.

Word treatments and stickers as artwork

At that weight, the type stops behaving like typography. It starts behaving like a graphic.

So alongside the typeface we made an extensive library of bold word treatments and stickers. A single word, set in the brand’s own face, becomes a complete piece of artwork. It works for packaging, marketing and social.

Most of Oddity’s marketing is one word, set well. That gives the brand a loud voice without adding a single shape that could clash with an artist’s poster.

The icon system

We also delivered a complete icon system. The icon set is documented in the brand book alongside the mark, the colour and the type, so it follows the same rules as everything else.

Why does a flexible brand need a longer brand book?

Everything for Oddity lives in a brand book of about 150 pages. It covers the mark and its supporting symbols, the colour and gradient system, the type hierarchy, the icon set, the graphic language, and how the brand applies across every surface the company uses.

That length was necessary, not indulgent. A brand designed to flex needs its rules written with unusual precision.

A rigid brand polices itself. There is one way to do things, and anything else looks wrong. A permissive brand has many right answers. Without clear edges, it drifts into incoherence within a quarter.

The more freedom a system allows, the more exactly you have to say where that freedom ends.

What principles can you apply to your own flexible brand?

These are the principles we would hand to any founder or brand lead running a marketplace, a collective, or a curated or multi-product brand.

1. Start from what the brand carries. Ask what the product actually is. If it is other people’s work, the brand’s job is to frame it.
2. Remove shape before you add it. Every proprietary device is something the work has to argue with. Keep only what earns its place, such as a refined mark and a few symbols.
3. Let colour do the identifying. Colour sits behind anything without clashing. Build a wide palette and a family of gradients, not one signature colour.
4. Give the colour physical presence. If colour is the brand, make it feel real. We rendered ours as light in Blender.
5. Make the type loud enough to be a graphic. A heavy custom face lets one word become a finished piece of artwork.
6. Write the rules down at length. Flexibility without documentation becomes inconsistency. Define the edges exactly.
7. Define the audience by taste. We defined Oddity’s audience as people aged 20 to 35 who work in or near art and design. It is broad, but coherent: people who want the strange object, not the safe one.

How should a flexible brand’s website work?

The website had two jobs that usually pull apart. It had to be a working store with a catalogue the client manages themselves. It also had to feel as strange and delightful as the brand.

Most projects pick one. This one could not. The clearest moment of that ambition is a scroll sequence that carries visitors out into the Oddity universe, with a large planet suspended in the exterior.

A store the client controls

We built on Webflow so Oddity could run its own site day to day without waiting on us for every content change. For a company that keeps adding new artists, that mattered more than any performance argument. Animation uses GSAP, Webflow’s own interactions and a substantial amount of custom code.

Commerce runs on Shopify as a headless backend, connected through Shopyflow. The client operates Shopify exactly as they otherwise would. Inventory, orders and fulfilment stay in the system their operations already run on. We built the front end that sits on top.

The Halo configurator and the backlight switch

Halo had to be understood before it could be sold. So we built a configurator with three controls. Visitors can change the frame size and watch the product update live. They can cycle through the artist library. And they can switch the backlight on and off.

That last control does most of the work. Halo’s defining quality is that it glows. No photograph shows the difference between a lit frame and an unlit one.

We could have written about the backlight, or photographed it glowing. Both would be true, and neither would work. Handing visitors the switch lets them discover it themselves. That took far less persuading and did far more of it.

Halo also got its own immersive landing page, with all the 3D made in Blender. The main site sells a brand and a catalogue. This page sells one object properly.

Why does a flexible brand system take more rounds than a fixed one?

Because more has to be decided, and decided precisely. For Oddity, the work ran from the brand system all the way to a live store, and the website went through two to three full versions.

That iteration count reflects the ambition, not a lack of direction. A brand without a fixed aesthetic, a store that had to be immersive, and a product nobody had seen before all had to be solved together. The versions were how that happened. You can see the finished system at /projects/odditty, and the full range of what we do at /services.

Building a brand that has to hold many voices?

If you run a marketplace, a collective or a curated brand and the system keeps fighting the work it carries, we would be glad to talk it through. Get in touch and tell us what you are building.

The owners had taken operations in house after many years under outside management. We built the brand from the ground up. That meant identity, typography, colour, voice, a collateral system across the property, sub-brands, and the design and development of the website. It took seven months from brand to live website.

What does a luxury hotel brand need to achieve?

It needs to match the standard of everything else the guest touches. The brief for The Cunningham was clear. The hotel was to sit at the highest tier of the Bangalore market, and read as a five to seven star property.

The investment behind it was real. The building work, the 130 rooms, the food programme and the in-room amenities were all specified at that level, down to the toiletry kit.

Our job was to make sure the brand lived at the same standard. A premium property let down by ordinary collateral is a familiar failure. The brief said plainly that it would not happen here.

How do you name a hotel and use its heritage?

Start with what is already there. The Cunningham takes its name from its road. The road takes its name from Francis Cunningham, an officer of the Madras Army.

He arrived in Bangalore in 1850 as secretary to Mark Cubbon on the Mysore Commission. He spent the rest of his career here, working on the surveying and mapping that shaped the early city. He stayed on after retiring in 1861.

He came for one assignment and never left. The hotel is built for travellers who arrive for a few days and want the city to be good to them. That origin was worth holding on to.

Should a hotel brand draw on colonial heritage or local culture?

We chose living local culture. A name can carry history. The visual identity, we felt, should come from what has lasted through everything the city has become.

That meant neither religious iconography nor the technology industry. It meant Bangalore’s gardens, its flower markets and its daily rituals. Lalbagh is a short drive from the hotel. Flower markets are everywhere in central Bangalore, dense with fresh stock. They are ordinary to a resident and remarkable to anyone else.

Taking the mark from the jasmine braid

The mark is drawn from the jasmine braid that South Indian women wear in their hair. Buds are threaded into alternating patterns and worn around the bun.

It is an everyday thing. It is also an intricate craft with its own rules. That is exactly what the hotel aims to be.

The mark abstracts rather than illustrates. It is a three quarter arc of braid, with the wordmark beneath. The two ends come close but never meet. A closed circle would have been a monogram. The gap keeps it a braid.

Getting there took 200 to 300 logo iterations. The single jasmine bud alone went through 10 to 20 variations, tested large and small, in lines and in arcs.

How do you turn a logo into a complete graphic language?

Draw one unit, not one logo. At The Cunningham, two buds facing in opposite directions form one unit. Units repeat against each other with no visible joins.

Repeat the unit along a straight line and you get a linear array, a continuous horizontal band. Give it an angular offset and the same unit curves into a radial array, an arc or a full circle. The logo itself is one specific radial array of that unit.

One module and two transformations give you an entire graphic language. The pattern on a bottle, a slipper and a candle holder is not three designs. It is one system expressed three ways. You can see the band and the arc across the collateral in the full case study.

Where should a luxury hotel put its logo?

Only on things that leave the hotel. We set one rule for every item in the system, based on where the item goes.

Business cards, tote bags and notepads leave the property. They do identification work out in the world, so they carry the logo.

Slippers, bottles, candles and linen stay inside. A guest inside already knows where they are. A logo there would be redundant at best and intrusive at worst. So these items carry only the pattern, the faintest trace of the identity.

Why the brand should get quieter inside

The result is a brand that grows quieter the deeper a guest goes into the hotel. This is the opposite of standard hospitality practice.

Every instinct in hotel branding pushes towards more presence: the logo on the slipper, the bottle, the napkin. Taking it off almost everything inside was the single decision that made the identity feel expensive. It cost nothing to make. A guest meets the brand all the time and is never once addressed by it.

How should a hotel pattern be placed on objects?

Always present, and always off centre. This is the most useful rule in the system.

In practice it pushes the band to an edge, a base or a margin. That is where a well-made object carries its maker’s trace. A centred mark reads as a label. Pushed to an edge, the same pattern reads as part of how the object was made.

Here is how it works on real items:

• A clear glass bottle runs the band just above its base.
• A key card carries it along one edge, and so does a business card.
• Slippers carry it across the upper.

The radial array is the one exception. Where it is used, it is centred, wrapping a candle holder as ornament rather than marking.

How do you create sub-brands for hotel restaurants?

Change one variable and lock everything else. The Cunningham has several restaurants and zones, each with its own character. A lively rooftop restaurant cannot share the main hotel’s tone without one of them feeling wrong.

So we did not build separate identities. Sub-brands change colour and nothing else. The rooftop shifts its base towards red, warmer and more energetic than the royal green.

The typeface, the mark, the pattern system and the proportions stay the same. The zone reads as its own place but remains part of the same house. The cost scales to as many zones as the property adds. And a hotel with several restaurants does not turn into several hotels.

How do you choose colours and type for a luxury hotel?

Choose them against the building. The palette is Cunningham Green, a deep royal green, and Cunningham Cream. Gold stands in for the cream where extra richness is wanted.

The green was chosen to contrast cleanly with the cream. It also complements the dark red brick of the facade. The brand sits with the architecture rather than fighting it, so the two agree in daylight.

The typeface is Austin Roman, used everywhere without substitution. The voice is formal and soft at once. It talks about culture and place, not amenities.

What makes a good luxury hotel website?

Room for the photography. Most hotel websites in Bangalore are not well made, so the bar was low and the opportunity was clear.

The Cunningham site is built on generous negative space. Photographs run full bleed. Headings are clear and confident without being oversized, so the type supports the images rather than competing with them.

Scrolling is handled with Lenis, which gives the site a weighted, controlled feel that suits the positioning. Navigation is an overlay panel that enters from the left. The interface stays clear until it is needed.

Principles you can apply to your own hotel brand

These are the rules we would carry to any property:

1. Start with what is true about the place. Look at the name, the street and the culture that people still live in.
2. Draw a unit, not a logo. Build one module that can repeat and transform, and let the pattern and the mark come from it.
3. Decide by destination. Put the logo on what leaves the hotel and only the pattern on what stays.
4. Keep the pattern present and off centre. Place it at an edge or a base, where a maker’s trace belongs.
5. Make sub-brands with one variable. Change colour, and lock the type, mark, pattern and proportions.
6. Pick colours against the building. Test the palette against the facade, not a moodboard.
7. Let the photographs lead online. Use negative space and full-bleed images, and keep the type in support.

Why does a rule-based brand system work better for hotels?

Because the hotel will keep making objects for years, mostly without its designers. A brand that depends on judgement drifts within a season.

The Cunningham’s brand comes down to one repeating unit and one rule about placement. Across every piece of collateral, the same logic holds on every surface, scale and material. That means it can be handed to a print supplier, a uniform manufacturer or an in-house team, and it will still come out right.

The outcome is a complete identity in which the logo appears on almost nothing. It is the difference between a hotel that tells you it is expensive and one that simply is. Read more about how we approach brand identity and digital work.

If you are planning a hotel launch or relaunch and want to talk through your own property, we would be glad to hear from you. Get in touch.

Below is how we did it, step by step. It is written for the people who commission ambitious sites and for the developers who build them.

Why does it matter if a WebGL site only runs on expensive phones?

WebGL is the technology that lets a browser draw real time 3D graphics. It can make a website feel like a film you move through. It can also make a website unusable on the phones many people actually own.

For Zero University, this was not a side issue. Their audience spans every income level in India. A great many of those visitors hold inexpensive, ageing phones.

The site argues for a different kind of education, one about access. A site that only worked on flagship hardware would have contradicted its own message. So “runs on every phone it was written for” became part of the brief, not a nice extra.

The client also arrived with a genuinely cinematic vision and roughly 1.5 GB of models and textures. The task was to keep the vision and lose almost all of the weight.

Why do WebGL sites stutter on budget phones?

A phone draws each frame of a 3D scene on its GPU, the graphics chip. FPS, or frames per second, is how many frames it manages each second. When that number drops, motion stutters.

Budget phones often use Mali class GPUs. These chips are designed around energy efficiency. In our testing, noise based shader work degraded on them in ways that were immediately visible. A shader is a small program that runs on the GPU and decides how each pixel looks.

So the effects that look richest on a powerful laptop are often the first to break on a cheap phone. Heavy files make it worse. Big textures take longer to download.

How do you choose a benchmark phone for a WebGL project?

Choose the least forgiving device your audience realistically uses. Then keep it on the desk for the whole build.

We borrowed a four year old budget Tecno Pova running a Mali class GPU. It sat on our desk for the full five months of the project. It is still there.

The important part is timing. We set the benchmark in the first week. From then on, the phone could veto decisions. A beautiful effect that ran badly on the Pova did not ship in that form.

Speed work is usually left until the end, when very little can still change. Testing from day one turns performance into a design decision rather than a clean up job.

How do you shrink 1.5 GB of 3D assets to under 10 MB?

There was no single trick. The saving came from treating every type of asset on its own terms: models, textures, type and sound.

Prepare every model in Blender first

Every asset passed through Blender before it reached the browser. Blender is a 3D modelling tool. We used it to decimate models, which means reducing the number of polygons, the small flat faces a 3D shape is built from.

We also baked the lighting. Baking means working out the light and shadow ahead of time and storing it in the texture. The phone then shows the result instead of calculating it live.

Compress textures properly, and test every size

A texture is the image wrapped around a 3D model. On Why Zero, the isometric city map arrived as a 24K texture weighing 500 MB.

We tried it at 16K, 8K and 4K. At 8K, visual detail and file size genuinely balanced. We routed it through a WebP intermediate, then converted it into the KTX container using ETC1S compression. KTX is a file format made for textures. ETC1S is a compression mode within it.

That single texture now ships at roughly 4.5 MB.

Turn type into a sprite atlas

Text in a 3D scene usually uses a method called MSDF, which draws letters from font data. We could not use it here, because every piece of type needed its own bespoke animation.

Instead, each type element was rendered as a sprite, a flat image, and packed into shared atlases. An atlas is one large image holding many small ones. The complete type set for the whole experience ships as a single 4K atlas, well under 1 MB.

Keep audio small too

Sound is easy to forget. The site uses eleven to twelve audio files, and together they come to 1 to 1.3 MB.

Why build your own texture compression tool?

Standard KTX compression runs through command line tools. You convert blind, write the file to a folder, open it, and judge it afterwards. A loop that slow tends to make people accept the first tolerable result.

So we spent a week building an internal dashboard before compressing anything. It shows the source on the left and the converted output on the right. Both views zoom together, so detail loss shows up instantly at any magnification.

Resolution, compression level and output format are all adjustable live. It covers JPEG, PNG, WebP and the full range of KTX formats.

At the time, that week felt like a detour. It turned out to be the most valuable week of the project. We have used the tool on everything we have made since.

How does a WebGL site adapt to a slow phone on its own?

The visitor should never have to pick a quality setting. The site should find its own limit.

On Why Zero, the site watches its frame rate continuously against a buffered threshold. A lasting drop, not a brief dip, steps the renderer down one quality tier. A quality tier is a preset level of visual detail.

Each step changes several things together:

• device pixel ratio, which is how many screen pixels the site draws per layout pixel
• particle counts
• texture resolution
• certain features, which are switched off entirely

On Mali class hardware, the multi tap blur is dropped altogether.

Switch render passes per scene

A render pass is one full drawing step the GPU performs to build a frame. The site uses five to seven of them. Each one is switched on or off per scene, so no scene pays for work it does not use.

Let the test phone shape each effect

The blur is a good example of how the benchmark phone worked. It started at nine taps, meaning nine samples per pixel. It was optimised to seven. It is then disabled on lower tiers. That is three decisions about one effect, and the benchmark phone prompted each of them.

Effects can stay ambitious under these limits. The Glass shader was the most demanding of the four custom shaders. It needed believable refraction on falling shards while staying cheap enough to draw in quantity on a low end mobile GPU. You can see it in context in the Why Zero case study.

What is a practical method for fast WebGL on budget phones?

Here is the method we followed, in order.

1. Pick a hard benchmark device in week one. Choose an old, cheap phone your audience really uses. Ours was a four year old Tecno Pova with a Mali class GPU.
2. Give it a veto. Agree with the client that anything which fails on that phone changes or goes.
3. Prepare assets before the browser sees them. Decimate models and bake lighting in Blender.
4. Test textures at several sizes. Try each large texture down through the sizes, as we did with 16K, 8K and 4K, and ship the smallest that still looks right.
5. Compress into a texture format. We used KTX with ETC1S compression via a WebP intermediate.
6. Pack type and small images into atlases. One atlas can replace many separate files.
7. Build quality tiers that switch themselves. Watch frame rate, ignore brief dips, and step down detail on sustained drops.
8. Turn off what each scene does not need. Switch render passes per scene.
9. Make the feedback loop fast. If a step is slow and blind, build a tool so you can see results instantly.

What does this mean if you are commissioning a WebGL site?

Ask when performance testing starts. If the answer is “near launch”, expect a slow site or a cut back one.

Ask which phone will be the benchmark. A named, cheap device is a far stronger promise than “it will be optimised”.

Ask how the team and your asset producers will work together. On Why Zero, optimisation could not be a handoff. Neither side knew in advance how far a model or texture could be pushed before it visibly broke. So the work ran as a constant exchange between production and compression, asset by asset, for the whole build.

The result held its ambition. The site has six narrative stages, four custom GLSL shaders and five to seven render passes, and it still fits in under 10 MB. The full story, with video of each stage, is in the Why Zero project. You can read more about how we take on this kind of build on our services page.

If you are planning an ambitious site and want it to work on the phones your audience actually carries, we would be glad to talk it through. Get in touch and tell us what you are making.

The three words get used as if they mean the same thing. They do not, and mixing them up leads founders to buy the wrong thing, or to expect a logo to do the work of a brand. This guide gives clear definitions, an easy way to remember them, and a view on what your business needs first.

What is a logo?

A logo is a single mark that identifies a business. It might be a wordmark (the name, set in a particular way), a symbol, or both locked together.

Its job is narrow: to be recognised quickly and to mark things as yours. It is the smallest unit of a brand. We cover what it can and cannot do in why is a logo important.

What is a brand identity?

A brand identity is everything you can see, hear and read that tells people it is you. It includes the logo, but also:

• the typefaces and how they are arranged
• the colour palette
• patterns, shapes and other graphic elements
• the style of photography, illustration or 3D
• how the brand writes and speaks
• the rules that hold it all together

A good identity is recognisable even when the logo is not there. The Cunningham, a hotel in Bangalore we branded, is a clear case. Inside the hotel, slippers, bottles and candles carry no logo at all. They carry only a band of pattern drawn from the same jasmine braid unit as the mark, placed off centre at an edge or a base. A guest still knows exactly where they are. That is the identity doing the work, not the logo. The full system is at /projects/tch.

What is branding?

Branding is the deliberate, ongoing effort to shape how people see your business. It starts with strategy: who you are for, what you promise, and how you are different. It includes the identity. But it also covers the product experience, customer service, pricing, the way staff talk, what you say publicly, and what you choose not to do.

The result of all that work is your brand: the picture of you that sits in other people’s heads. You do not fully control it. Branding is how you influence it.

An easy way to remember the difference

Think of a person.

• The logo is their signature. Short, distinctive, and it marks things as theirs.
• The brand identity is how they dress, speak and carry themselves. You would recognise them across a room without seeing their signature.
• The brand is their reputation. It is what people say about them when they are not there.
• Branding is everything they do, over years, that earns that reputation.

A great signature does not make someone trustworthy. A sharp wardrobe helps, but it does not make up for bad behaviour. The same is true of businesses.

How much effort does each one take?

We will not put prices on these, because scope varies too much. But the effort grows sharply at each step.

A logo is one main decision, explored carefully. Even so, a good one can take many rounds. The Cunningham mark went through 200 to 300 iterations before it was settled.

A brand identity is hundreds of decisions, each tested on real applications. The Cunningham’s system covered between 50 and 100 collateral items, plus sub-brands for its restaurants that change colour and nothing else. Oddity’s identity, built for a decor brand that sells work by many artists, is documented in a brand book of about 150 pages. That length was needed because a flexible system needs precise rules. You can read how it works in how to design a flexible brand identity system.

Branding never finishes. It is a way of running the business, revisited every time you launch a product, enter a market or hire a team.

What does a startup need first?

It depends on your stage. Here is a simple way to think about it.

Before launch, or while you test the idea

You need a small, consistent identity, not a lone logo and not a full brand programme. That means a clean wordmark, one or two typefaces, a short palette, and a one-page set of rules. Use it the same way everywhere. Consistency matters more than polish at this point.

When you have traction and are raising or hiring

Now the brand starts doing commercial work. Investors, recruits and larger customers judge you on it. This is usually the moment for a proper identity system, built on a clear strategy and written down in guidelines.

When you sell in many places, or have several products

You need branding in the full sense: a strategy, a brand structure for products or locations, and a system that other people can apply without you in the room. Tesels, a 3D configurator platform, is an example. It sells to brands at meetings and trade stands long before anyone reaches the website. So its business cards, letterheads, sales one-pagers, presentation template, stickers and event graphics were all built on the same rules as its interface: a neutral base, a single orange accent, and a dot grid background. The project is at /projects/tesels.

What should a brand identity system include?

Use this as a checklist when you brief a studio or compare proposals.

1. Logo suite. Primary logo, symbol, wordmark, a compact version for small spaces, and one-colour versions for light and dark backgrounds.
2. Logo rules. Clear space, minimum sizes, and examples of what not to do.
3. Colour palette. Primary and secondary colours with exact values for screen and print.
4. Typography. Typefaces, weights and a hierarchy for headings, body and small text.
5. Graphic elements. Patterns, shapes, gradients or textures that make the brand recognisable without the logo.
6. Iconography. A consistent icon set, if the brand uses icons.
7. Imagery direction. How photography, illustration or 3D should look.
8. Motion principles. How the brand moves on screen, if it will appear in video or on an interactive site.
9. Voice and tone. How the brand writes, with examples.
10. Templates and collateral. Stationery, presentations, social posts, signage and packaging as needed.
11. Brand guidelines. All of the above, written down in a document others can follow.
12. Source files. Editable, vector and web-ready files, organised so your team can find them.

The website is often where all of this comes together, so many studios design it as part of the identity work. You can see what we include on our services page.

Which mistakes come from mixing these up?

• Buying a logo and expecting a brand. A mark with nothing around it looks thin and gets used inconsistently.
• Asking for branding when you need an identity. Strategy workshops are valuable, but an early startup may simply need a clear, usable system.
• Asking for an identity with no strategy behind it. Without knowing who you are for, the design has nothing to aim at.
• Treating the guidelines as optional. Without rules, an identity drifts the moment someone else applies it.

If your current brand feels like it no longer fits, our guide on when to rebrand covers the signs and the traps.

If you are not sure whether you need a logo, an identity or something larger, get in touch and we will give you an honest view.

Here is what each company did, and what founders can take from it.

What did McLaren change?

McLaren announced its new identity on 22 September 2026. For the first time, one identity unites McLaren Racing, the Formula 1 team, and McLaren Automotive, the road car maker, as Motor Trader reported.

The headline change is a new all-caps wordmark. It is inspired by the sign above the service station run by Bruce McLaren’s parents in Remuera, Auckland. Bruce McLaren founded the company. The wordmark has an underline beneath the “C” and is set in a custom typeface, McLaren Sans.

Just as important is what stayed. Papaya orange, the Speedmark and the Speedy Kiwi were all retained. The colour palette was expanded with heritage colours.

Reaction was mostly positive, according to Carscoops, with some commentators questioning whether a change was needed at all.

What did Novo Nordisk change?

On 14 September 2026, Novo Nordisk’s everyday brand became simply “Novo”. The legal company name stays Novo Nordisk.

The Apis bull symbol, used since the 1920s, now faces right. Right is the direction we read in, so the bull now points forward. The new tagline is “Lasting Health Starts Now”.

The rebrand launched together with a culture programme called “The Novo Way”, under CEO Mike Doustdar, as BioSpace reported. Design commentators called it solid work. Analysts, as pharmaphorum noted, said a rebrand alone will not fix the business.

What is the difference between the two rebrands?

They answer different questions.

McLaren’s question was: how do we look like one company? It had two businesses with related but separate identities. The rebrand tidies that into one system, and roots it in a story that belongs to McLaren and nobody else.

Novo’s question was: how do we show we are changing? It is a company in a turnaround with a new CEO. The rebrand is a strategy statement. The bull turning to face forward is a simple, readable image of that intent.

Our take: both are legitimate reasons. The trouble starts when a company rebrands without being able to say which question it is answering.

What does McLaren teach about using heritage?

Heritage works best as specific archaeology. Archaeology here means digging up one real thing from your past and putting it to work, rather than gesturing vaguely at “tradition”.

McLaren did not just add a vintage feel. It went back to a single sign above a family service station in Auckland. That detail is real, it is specific, and no competitor can copy it. It gives the wordmark a reason to look the way it does.

Three habits are worth borrowing:

• Find one true detail. An old sign, a first product, a founder’s handwriting, a shop front. One real artefact beats a general retro style.
• Keep what people already love. McLaren kept papaya orange and its existing marks. Throwing out recognised assets costs years of familiarity.
• Modernise around the old, not instead of it. A custom typeface and an expanded palette make the heritage usable today.

The doubters have a point worth hearing. A rebrand for a well loved brand always carries the risk of fixing something that was not broken. McLaren reduced that risk by changing the system, not the soul.

What does Novo teach about rebranding during a turnaround?

A rebrand can be a useful flag in a turnaround. It gives staff, customers and investors a visible marker that says “something is different now”.

Novo paired the visual change with a culture programme. That matters. A new logo on its own tells people to expect change. A culture programme is the start of delivering it.

The analysts’ warning is the other half of the lesson. If the products, prices or results do not change, a new name and a forward-facing bull will start to look like a promise not kept. The rebrand raises expectations. Only the business can meet them.

What can a rebrand do, and what can it not do?

Based on these two cases, here is a plain split.

A rebrand can:

• make a new strategy visible inside and outside the company
• unite separate businesses or products under one system
• give staff a clear moment to rally around
• fix practical problems, such as a logo that fails on screens or a name that is too long for everyday use

A rebrand cannot:

• fix a product people do not want
• repair results on its own
• replace a strategy you have not yet decided
• make people forget a real problem they experienced

If you are not sure which side of that line your situation falls on, our guide on when you should rebrand walks through the signs.

How do you know if it is time to rebrand?

Start with the question each company answered. Can you finish one of these sentences honestly?

1. “We need to look like one company, because…”
2. “We need to show we are changing, because…”
3. “Our current identity is stopping us from…”

If you can, a rebrand may be worth it. If you cannot, the work you need is probably strategy, not design.

When you do go ahead, build an identity that can grow, rather than a single logo that gets redone in five years. Our guide to designing a flexible brand identity system explains how. And if you are wondering how much weight the logo itself carries, read why a logo is important.

At BUNQ LABS, we are a studio in India that builds brand identities and immersive websites. We always start by asking which question a rebrand is meant to answer, before anyone draws a thing. You can see how we work on our services page.

If you are wondering whether your brand needs a refresh, a full rebrand or neither, get in touch.

The original is written for developers and has code in it. This post is the short, plain language version, with the same images and videos.

What is the Zero site?

Zero is an immersive scroll driven WebGL site for Zero University. It challenges the traditional degree path.

It opens locked. There is no enter button, only a prompt to draw a zero. When your circle closes, frost spreads from the stroke and reveals the experience. Six scrolling stages follow, joined by five interactive gates, and it ends on a city you can explore yourself. You can see the whole project in the Why Zero case study.

How did the project start?

With a working prototype instead of a presentation. Atul Khola’s team at Zero University had a strong concept. We built the draw a zero interaction in 48 hours and pitched with that. The prototype won us the project.

AI helped us get that first version running quickly. Then we spent the time refining it until the frost felt right. That pattern held for the whole build. Writing a first version became the easy part. Judging it, and improving it, was the real work.

Why does one number drive the whole site?

The site does not use the browser’s normal scroll at all. Wheel and touch input move a single virtual scroll value, which eases towards its target. Everything else, from loading to animation to shader timing and text, reads from that one number.

Each stage is a self contained segment that knows how to build itself, update itself and clean up after itself. There are nine of them. That made the code far easier to maintain, and debugging simpler too: jumping to a later stage replays every earlier one, so the site is always set up as if you had scrolled there.

Where did most of the time go?

Preparing the 3D for the web. The source files were production Blender scenes with uncompressed geometry, 8K textures and baked animations, more than a gigabyte in all.

A few decisions did most of the work:

• Compressed geometry. Every model ships with DRACO compression.
• Self hosted decoders. A slowdown on a public CDN once made every compressed asset fail, even though the assets were ours. If your decoder lives on someone else’s server, so does your pipeline.
• GPU friendly textures. A PNG may be small on disk, but it is fully unpacked in GPU memory. KTX2 with ETC1S compression stays compressed on the GPU and uploads faster.
• A compression previewer. We built a tool into our internal dashboard that shows compressed and original textures side by side. That let us tune each texture on its own rather than with one global setting.
• Atlases. More than fifty separate images became around a dozen shared atlases, and most gradient backgrounds became a few lines of shader code.

Early builds were around 35 to 40 MB. The final build ships at under 10 MB, and the interactive map loads separately so it never holds up the opening.

What is the stutter nobody sees coming?

Uploading textures to the GPU. Even a compressed texture has to be handed to the graphics card on the main thread, and a big one can block a frame for 50 milliseconds. If that happens mid scroll, you feel it.

We handled it three ways. Images are decoded off the main thread. Uploads wait in a queue and only run when the browser has spare time. And the largest textures are split into 256 pixel tiles, uploaded one per frame. Before each new stage appears, the queue is emptied, so nothing is uploaded for the first time while you scroll.

How does it run on cheap phones?

The site measures its own frame times and adjusts. If frames get slow, it steps down a quality tier. If they stay fast, it steps back up, with a cooldown so it does not flicker between the two.

The tiers only change polish: pixel density, blur, the detail on the coins, text resolution. The story is identical on a flagship and on a budget phone. Much of the last month went into profiling on a budget Android, hunting frame spikes one at a time. The worst was a single 157 millisecond frame.

How were the big moments made?

Each key moment has its own shader, written for that one effect.

The frost unlock

The frost grows outward from your stroke in four directions, and a frost texture shapes its edge so it looks crystalline. When the stroke is complete, its centre becomes the point the melt spreads from.

Lighting the hands without lights

Real time lighting on the animated hands would have been too expensive, and it had to match the original artwork exactly. So the lighting is baked into textures, and the site crossfades between them as you scroll.

Burning money

Each bill dissolves with noise. Just ahead of the burn, a thin glowing ember rim appears, followed by the char.

Shredding certificates

Each certificate splits into strips. As the shred moves across the sheet, every strip comes away and falls and tumbles on its own.

The tunnel

The tunnel is the Zero logo’s outline, extruded, with a pulse of light travelling through it. The pulse follows the tunnel’s position in space, so it stays seamless even where sections repeat.

Text that pulls into focus

The story’s text starts blurred and sharpens as it is revealed, instead of simply appearing. When no text is on screen, the effect is skipped entirely.

One lesson here cost us real time. Many mobile graphics chips treat medium precision as a true 16 bit number, which caused bugs that never appeared on desktop. Test on real phones from the start, not at the end.

How do the gates feel right?

Most of the gates share one press and hold system. While you hold, the whole frame slowly shifts towards dark red. When the glass shatters, the colour snaps back in about 200 milliseconds, as if the shards were breaking the darkness away. A slower 400 millisecond return felt noticeably weaker.

The shatter sound is tied to the first frame the break is actually drawn, not to a timer. On a slow phone, a timer would play the sound before you could see anything happen.

Where does it end?

In a city you explore yourself. The clouds part, Zero’s tower sits at the centre, and then the site hands you control. You can pan, zoom and open each marker for a role, a scenario and its tools, with a button to join the beta.

What was the main lesson?

Asset preparation and GPU uploads deserve as much attention as the rendering itself. The compression previewer, the self hosted decoders, the upload queue and the quality manager are not the exciting parts. They are the difference between a gigabyte of source files and a site under 10 MB that runs smoothly on a budget phone.

Why Zero went on to win, among others, Site of the Month from Awwwards, the FWA and Orpetron, and an Awwwards Developer Award. See every award it won.

Who made it?

From the Codrops credits: concept and design direction by Atul Khola, Sanjay, Saba, Hamsa Rasheem, Akshai and team for Zero University. Development, the 3D web pipeline, shaders and optimisation by Sindhur Dutta, Shuprobho, Yashas and team for BUNQ LABS.

If you want a site built with this kind of care, get in touch.

Here is each award, with its date.

Which awards did bunqlabs.com win?

• FWA, Site of the Day, 24 August 2026
• CSS Winner, Site of the Day, 26 August 2026
• Orpetron, Site of the Day and Web Design Award, 1 September 2026
• CSS Design Awards, Website of the Day, 7 September 2026, with UI Design, UX Design and Innovation honours

The FWA’s was the first award for the site itself rather than for a client project. It came a month after the FWA named our work for Zero University its Site of the Month.

What came with the daily awards?

Two juries scored the site in more detail on the same day as their daily award.

Orpetron’s Web Design Award is judged on craft, alongside its Site of the Day. CSS Design Awards’ UI Design, UX Design and Innovation honours are the three areas the site was scored in, alongside its Website of the Day.

Who else featured it?

• Mesh3D Gallery featured it in August 2026.
• Muzli picked it in August 2026.
• Osmo added it to its showcase in September 2026.

What is the site trying to do?

A studio site usually explains what a studio does. We wanted ours to show it instead.

So bunqlabs.com is built in real time 3D. The work, the studio and the way to get in touch each live in their own space, and moving between them feels like moving through a place rather than turning pages. It is the same kind of immersive web experience we build for clients, made for ourselves.

And it is built to the same rule as everything else we make: it has to run well on ordinary phones, not only on the machine it was designed on. We wrote about that approach in how to make a WebGL website run smoothly on cheap, old phones.

What about the client work?

Our most awarded client project is Why Zero, for Zero University. It was Site of the Month at Awwwards, the FWA and Orpetron, and won an Awwwards Developer Award, among others. See every award Why Zero won.

If you would like a site like this for your brand, get in touch.

Here is what changed, where each option fits, and how we would decide.

What is new in Safari 27?

Apple released Safari 27 on 17 September 2026. The headline for 3D is that the HTML model element now works on iOS, iPadOS and macOS, letting sites embed 3D models natively. You can read the full list in WebKit’s Safari 27 post.

Safari 27 brings plenty more for web designers too, as 9to5Mac summarised:

• a customisable select menu, with new ways to style its icon and checkmark
• the CSS stretch keyword, for sizing an element to fill the space available
• color-mix() with more than two colours
• a :heading selector, which targets all headings at once
• scroll anchoring, which stops content jumping when things load above it
• anchor positioning that follows transformed elements
• 844 quality fixes

The model element is the one that changes how we think about 3D on the web.

What is the model element?

It is a tag you put in a page’s HTML, like the img tag for a picture or the video tag for a film. Instead of a picture, you point it at a 3D model file. The browser then draws the model for you.

Before this, showing a 3D model on a web page meant using WebGL, the technology that lets a browser draw real time 3D graphics, usually through a library such as Three.js. That works well, but it means loading extra code and writing the viewer yourself.

With the model element, the browser does that job. That means less code to load and less to maintain.

When is the model element enough?

When the job is simply: “let people look at this object properly”.

Good fits include:

• A product page. A shoe, a watch, a speaker. The visitor wants to see it from every side.
• A catalogue. Many products, each with a model, where building a custom viewer for each would not make sense.
• Documentation and education. A part, a tool or an object people need to understand in three dimensions.
• A quick upgrade. A site that currently shows a photo carousel and wants something more tangible, without a full 3D build.

Our take: if your 3D only needs to be looked at, the model element is a genuinely good option on Apple devices. Simpler is better when simpler does the job. We make the same argument in does your brand need an immersive 3D website: use the lightest tool that does what the page needs.

When do you still need WebGL or WebGPU?

When the 3D has to do more than sit still and be turned. WebGPU is the newer way for browsers to use the graphics chip, with more control than WebGL. It has been available in all major browsers since around January 2026.

Custom builds still win in five areas:

Art direction

A browser’s built-in viewer decides how your model is lit and framed, within limits. A custom scene lets you choose the lighting, camera, colour and mood, so the 3D looks like your brand rather than a generic viewer.

Shaders and effects

A shader is a small program that runs on the graphics chip and decides how each pixel looks. Glass, fog, liquid, glow and stylised looks all come from custom shaders. On Why Zero, which won FWA Site of the Month and an Awwwards Developer Award, four custom shaders carry the story, including glass shards falling through a red void. A built-in viewer cannot do that.

Storytelling

Scroll-driven scenes, camera moves, gates the visitor must cross, sound timed to motion. Telling a story in 3D needs code that controls what happens and when.

Configurators

A 3D product configurator lets a customer change colours, materials and parts and see the result live. That needs logic, interface and data connected to the model. On the Tesels homepage, the hero is a live mini configurator built around a watch. We explain what makes these work in 3D product configurator design that converts.

Performance control

With a custom build, you decide how detail drops on a slow phone, how textures are compressed, and what loads first. That control matters when your audience uses budget hardware. We cover our method in how to make a WebGL website run smoothly on cheap, old phones.

What about browsers that do not support the model element?

This is the practical catch. Safari 27 supports the model element on iOS, iPadOS and macOS. Do not assume it works anywhere else.

So any site using it needs a fallback. Depending on the page, that could be:

• a good photograph or set of photographs
• a short turntable video
• a lightweight WebGL viewer for other browsers

A sensible pattern is to use the model element where it is supported and fall back gracefully elsewhere. If you need a WebGL viewer as the fallback anyway, it is worth asking whether one custom viewer for everyone is simpler to maintain than two paths.

How should you decide?

Ask what the 3D has to do.

1. Only be looked at and rotated? Try the model element, with a fallback.
2. Look like your brand, not a default viewer? Custom build.
3. Tell a story or respond to scroll? Custom build.
4. Let customers change options? Custom configurator.
5. Run fast on budget phones across all browsers? Custom build with deliberate performance work, or the model element plus a careful fallback.

Many sites will end up with both. A catalogue might use the model element for hundreds of products, while the homepage runs a custom scene that sets the tone.

What does this mean for brands?

It is good news. Simple 3D is becoming cheaper and easier, which means more products will be shown properly instead of in flat photos. That raises the floor for everyone.

It also raises the bar for custom work. When basic 3D comes free with the browser, a custom scene has to earn its place through art direction, story or function. That is the work we do at BUNQ LABS, and you can see the range on our services page.

If you are not sure whether your product needs a model element, a custom WebGL build or neither, get in touch.

Here is what Vi announced, why the move makes sense, and how to make sure a 3D logo holds up everywhere it has to appear.

What did Vi change?

On 1 September 2026, Vi, the brand of Vodafone Idea, unveiled a new identity. The small mark that sat under the “i” became a dynamic 3D sphere, and it moved to the top of the letter, as afaqs reported.

The launch came with a teaser campaign fronted by Shah Rukh Khan, with the line “Vi badal raha hai… tayaar rahiye”, which means “Vi is changing… get ready”. The rollout is phased across digital, retail and communications from 1 September, according to TelecomLead.

CEO Abhijit Kishore said the change is “not simply a logo refresh”. He positions Vi as a tech company, not just a telecom operator.

Why would a telecom brand choose a 3D logo?

Because of where the brand now lives. A telecom company used to be seen on shop signs, billboards and SIM card packs. Today, most people meet it on a screen: in an app, on a website, in a video ad, in a notification.

A flat mark was designed for print. A 3D sphere is designed for screens, where it can turn, catch light, and move with the story being told.

The sphere also does strategic work. If you want people to see you as a technology company, a mark that looks like it belongs in software is a reasonable signal. Moving it to the top of the “i” makes it more visible, and gives it room to act on its own.

Our take: the logic is sound. A sphere is a simple shape. Simple shapes survive animation, lighting and scale changes better than complex ones. That is a good foundation for a mark that has to perform in motion.

How does a logo behave in real time 3D on the web?

Most 3D logos you see are pre-rendered video. Each frame was drawn in advance, and the result plays like a film. That is fine for ads.

On a website, a logo can go further. WebGL, the technology that lets a browser draw real time 3D graphics, can render a mark as a live object. It can respond to scroll, follow a cursor, or react to touch. That is how we build immersive websites at BUNQ LABS.

A live 3D mark raises questions a flat logo never has to answer:

• Material. Is the sphere glossy, matte, glass, metal? Each choice changes how it reads in different light.
• Lighting. Where does the light come from, and does it stay consistent from screen to screen?
• Motion rules. How fast does it turn? Does it ever stop? What does it do when the visitor is idle?
• Weight. A live 3D object has a file size and a cost on the phone’s graphics chip. It must load fast on the phones your audience actually uses. We explain how in how to make a WebGL website run smoothly on cheap, old phones.

Without written rules for these, a 3D logo drifts. Every agency and every team renders it slightly differently, and within a year there are ten spheres.

What is the test every screen-first logo must pass?

The favicon test. A favicon is the tiny icon shown in a browser tab, usually drawn at 16 by 16 pixels.

At that size there is no lighting, no depth and no motion. There are a few hundred pixels and often just one or two colours. The same is true of app notification icons, social media avatars in a crowded feed, and the logo in a payment app’s list of merchants.

So the test is simple:

1. Draw the mark at 16 pixels square.
2. Make it a single solid colour, with no gradients or shading.
3. Put it on both a light and a dark background.
4. Ask someone who knows the brand to name it.

If it reads, the core shape is strong. If it turns into a smudge, the 3D version is doing work the shape cannot do alone, and the logo needs a dedicated small version.

A sphere passes this test more easily than most marks: at its simplest, it is a dot. That is part of why the choice is smart. The risk is not the shape. The risk is relying on shading and reflections to make it feel special, then losing that feeling at small sizes.

How should a logo work as a system?

A modern logo is not one file. It is a family of states that share one idea. For a screen-first brand, we would plan at least four:

• Hero 3D. The full material, lighting and motion version, for film, websites and launches.
• Motion 2D. A lighter animated version for app loading screens, social posts and interface moments.
• Flat. The everyday version for documents, retail signage and partners’ materials.
• Tiny. A simplified mark built for 16 to 32 pixels, sometimes with thicker shapes or fewer details.

Each state needs rules: when to use it, what it must never do, and how it hands over to the next. Done well, a viewer sees one brand whether the mark is spinning on a homepage or sitting in a browser tab.

We go deeper on this in our guide to designing a flexible brand identity system. If you are wondering what a logo is actually for in the first place, start with why a logo is important.

What can founders take from Vi’s rebrand?

You do not need a national ad campaign to learn from this. Three lessons apply to any brand:

1. Design for where people meet you. If that is mostly screens, your mark should be built for motion and small sizes from day one, not adapted later.
2. Start flat, then add depth. A strong flat shape gives every other state something to stand on. 3D should add to the mark, not hold it up.
3. Write the rules down. Material, lighting, motion and small size versions all need guidance, or the mark will drift as more people use it.

A logo change is also a signal. Vi’s CEO framed this one as a statement about what kind of company Vi wants to be. If you are weighing a change of your own, our guide on when you should rebrand can help you decide.

If you want a mark that works in 3D, in motion and at 16 pixels, get in touch.

This guide explains what makes a site immersive, how it differs from a normal website and from a video, what the common worries are and how they are solved, and who it suits. The examples come from sites we built, including Why Zero and Tesels.

What makes a website immersive?

Three ingredients, usually used together.

• Real-time 3D. Objects and scenes are drawn live in the browser, so they can turn, change and react. This is what WebGL makes possible, often through a library such as Three.js.
• Scroll-driven storytelling. Scrolling becomes a way of moving through a story. Each scroll position maps to a moment in a scene, like a timeline you control.
• Interaction. The visitor does something, such as drawing, holding, dragging or choosing, and the experience changes because of it.

Sound, custom shaders and transitions between scenes often add to the effect. But the core idea is simple: the visitor takes part, rather than reading about something.

How is it different from a normal website?

A normal website arranges text and images on pages. It is built to be scanned. The visitor looks for what they need and leaves.

An immersive website is built to be experienced in order. The experience itself carries part of the message. That makes it more memorable, but also harder to design, harder to build and harder to keep fast. It is the right tool for some jobs and the wrong one for most.

Isn’t an immersive website just a video?

No. A video plays the same way for everyone. An immersive site responds.

On the Tesels homepage, the visitor can change the configuration of a watch and open an exploded view of it. On Why Zero, a visitor who joins the waitlist watches their own degree certificate fold into an origami animal, with their name on one face and their university on another. A video cannot do either of those things. It can only show someone else doing them.

What are some examples of immersive websites?

Why Zero: an argument you move through

Zero University believes the conventional degree has stopped delivering what it promises. Instead of a site that explained this, we built Why Zero, an experience told in six stages.

You enter by drawing a zero across a sheet of ice until it cracks. The loading happens behind the ice, so there is no progress bar. Two hands reach for each other, one gold and covered in company logos, one human. Then the scene shatters and you fall through a red void while glass shards carrying data on graduate outcomes rise past you. Currency burns as you scroll. You fly through a tunnel shaped like the Zero logo and arrive above a city where each employer’s building can be opened to show current openings.

Each stage is separated by a gate where you draw, hold or press to continue. That deliberate act is what stops six stages from becoming a passive scroll. The site won Site of the Month from Awwwards (September 2026) and from the FWA and Orpetron (July 2026), and an Awwwards Developer Award. The story is in Why Zero’s awards.

Tesels: a demo instead of a description

Tesels is a 3D product configurator platform. Its claim is that photoreal configurators can run well on the phone a customer is actually holding. So the Tesels homepage does not describe that. It opens with a live mini configurator built around a watch, in the hero, before any copy.

The whole model ships at under 300 KB and loads in under a second on reasonable hardware. Anyone comparing configurator vendors has likely sat through slow, heavy demos elsewhere. A photoreal object that simply responds is the argument.

Two quieter examples

Not every immersive site is dramatic. House of Samuha, which hosts private supper clubs in unusual places, holds one metal platter at the centre of the screen from the first frame to the last, with slow fog drawn by a custom shader behind it. Oddity is a working online store with a scroll sequence that carries visitors out into the brand’s universe, past a large planet.

Do immersive websites hurt performance?

They can, and many do. But it is a choice, not a law.

Why Zero’s audience spans every economic bracket in India, and many of them hold inexpensive, ageing phones. So we kept a four year old budget Tecno Pova on the desk for all five months of the build and made it the benchmark. The client’s source assets came to roughly 1.5 GB. The shipped site is under 10 MB and runs at 50 to 60 FPS on that phone. The largest single texture went from 500 MB to about 4.5 MB after compression.

The site also watches its own frame rate. If performance drops for a sustained period, it steps down a quality tier on its own, and render passes are switched on and off per scene so no scene pays for work it does not use. The visitor never sees any of this. We wrote more about the method in fast WebGL websites on budget phones.

The lesson is that performance has to be set as a constraint in the first week. Left to the end, it cannot be fixed.

Can Google and AI assistants read an immersive website?

Only if they are given something to read. Text drawn inside a 3D canvas is, to a search engine, just pixels. The same is true for AI assistants that summarise web pages, and for screen readers.

Good studios solve this by keeping real HTML alongside the 3D:

• headings, body copy and links present in the page itself, not only in the scene
• a proper title, description and structured data on every page
• separate, crawlable pages for important content such as services, work and contact
• fast first paint, so the page is useful before the 3D has finished loading

Done this way, the 3D becomes a layer on top of a readable site, rather than a replacement for one.

What about accessibility?

The same principle applies. Content should exist as real text. Gestures such as drawing or holding should have a keyboard or button alternative. Motion should respect a visitor’s reduced motion setting, and sound should never be the only way information is given. These are decisions to make in the design, not features to add at the end.

Who is an immersive website for?

It suits businesses where at least one of these is true:

• The product cannot be shown in a photograph, such as an experience, a service or something that has not happened yet.
• The message has to be felt, because you are changing a belief rather than listing features.
• The site itself proves the claim, as with a 3D or technology company whose website is its demo.

It usually does not suit sites whose main job is information or quick transactions, or teams that cannot plan for performance from the start. For a fuller checklist, read does your brand need an immersive 3D website.

What drives the cost of an immersive website?

We will not quote figures, because the range is wide. These are the things that move it:

1. Custom 3D production. Models, textures, lighting and animation made for the project.
2. Shader work. Effects like Why Zero’s frost, burn, shred and glass are written from scratch.
3. Number of scenes. Each scene is designed, built, tuned and optimised.
4. The lowest device you target. The cheaper the phone, the more optimisation work is needed.
5. CMS needs. If your team must edit content, the 3D layer has to sit on a platform such as Webflow.
6. Timeline. House of Samuha took three months from concept to launch. Why Zero took five.

BUNQ LABS is a design studio in India that designs brand identities and builds immersive websites, and we start every project with what the site has to do, not with the technology. Sometimes that leads to 3D. Sometimes it does not. You can see the range on our services page.

If you are wondering whether an immersive website is right for your business, get in touch and we will give you an honest view.

We learned this designing Tesels, a 3D product configurator platform. Tesels is delivered to brands as a productised service. That means one product, set up for each client, rather than a custom build every time. It runs photorealistic configuration directly on the client’s own website. A customer picks a variant, chooses a base configuration, adds accessories and watches the result render live.

Over three months we designed its product, design system, brand identity, collateral and website. This article covers what we think makes a configurator convert, and the decisions behind each point.

Does a 3D configurator need to run well on mobile?

Yes. This is the first thing a configurator gets wrong.

Plenty of configurators look excellent on a powerful workstation. Your customer is probably not using one. They are holding a phone.

Tesels makes a specific promise: photorealistic output that stays performant on entry level hardware. “Performant” simply means it runs smoothly, without stutter or long waits. A configurator that looks beautiful but takes ages to appear has already lost the visitor.

That promise created a real tension in the design. Visual quality wants a soft, aspirational, image-led identity. Technical performance wants a precise, engineered, systematic one. The brand had to hold both at full strength. Either one alone would misrepresent what the platform does.

How do you make an embedded configurator look like part of your own website?

You build it with almost no style of its own.

A configurator is never seen as a product by itself. It sits inside a client’s website. It has to look as though that client’s own team built it. An electric two-wheeler brand and an automotive manufacturer need entirely different interface languages. Neither will accept something that looks bolted on.

Re-theme the system, never fork it

We built the base design system on the shadcn/ui approach. shadcn/ui is a way of building interfaces from small, plain components. Each one does one job and carries no fixed look. They combine into complex interfaces, and they take on whatever visual language you give them.

So each new client receives a configurator that looks native to their brand. The underlying system does not fork. “Forking” means copying the code into a separate version that then drifts apart from the original. Re-theming means changing the visual layer only, such as colour, type and shape, on top of the same components.

This is what makes a configurator service productisable rather than bespoke. New engagements are absorbed through re-theming, not rebuilds.

Why restraint scales

The temptation is to make a product look like yours. But in someone else’s website, every distinctive flourish is a thing the client will ask to have removed. Building unopinionated components was not modesty. It was the only way the product could scale past its first engagement.

Should a 3D configurator guide visitors or let them explore?

Both, and the visitor should choose. The answer depends on who has arrived, and it is never one kind of person.

Substantial research went into understanding who actually arrives at a configurator. We sorted visitors into three intent segments: high, medium and low. Intent means how close someone is to buying.

Give each segment its own flow and KPIs

Each segment got its own flow, mapped separately. Each also got its own KPIs, or key performance indicators: the numbers you watch to judge whether something works. This meant we could measure behaviour against the right expectation for that visitor. We did not rely on a single overall conversion figure that blends everyone together.

The segments need opposite things:

• A high intent visitor has come to finalise a specification. They need the interface out of their way.
• A low intent visitor is exploring for the first time. They need orientation, and will leave without it.

Ask one question at the door

Rather than guessing which visitor has arrived, the product simply asks. Would you like to be guided, or do you already know what you are doing?

One question, answered in a second, routes each visitor into the path built for them. Intent segmentation came before interface design. The entry question exists because the research found it.

Where do 3D configurators lose customers?

At the commercial moments. These are the points where an interactive session turns into a commercial one.

In Tesels the core layout pairs a 3D viewport, the area where the product renders, with a configuration panel. The same design system governs both. It also governs five commercial interactions, each a modal, which is a panel that opens over the page:

1. Contacting a dealer
2. Finding a dealer
3. Reserving the configured product
4. Contacting support
5. Comparing variants

Each of these is precisely where a configurator usually loses people. A visitor has enjoyed exploring. Now they are being asked to commit, and any friction or change in tone breaks the spell.

So we designed the five as a coherent set, not as five individual screens. The same design system that governs the panel governs all of them. Moving from configuring to reserving should feel like the next step in the same experience.

What design principles help a configurator convert?

Here are the principles we would apply to any configurator, drawn from the Tesels work:

1. Design for the phone your customer is holding. Photoreal output only counts if it stays performant on entry level hardware.
2. Give the components very little style of their own. A configurator that has to look like everybody else should re-theme, never fork.
3. Segment by intent before you design the interface. High, medium and low intent visitors each need their own flow and their own KPIs.
4. Ask one question at the door. Let visitors choose to be guided or not, then route them.
5. Design the commercial moments as one set. Dealer, reservation, support and comparison steps are where people leave.
6. Let colour do semantic work. Keep the interface neutral until something can be acted on, then mark it.
7. Show the product working, early. A demonstration beats a description, and it beats it early.

How should colour work in a configurator interface?

Colour should tell people what they can do, not decorate the screen.

The Tesels palette is a neutral base with a single accent. Greys, blacks and whites carry the entire system at high contrast. Bright orange is the only chromatic colour in it.

The rule is strict. The interface sits neutral until something is interactive, selected or active. Then orange marks it. Everything stays grey until you can act on it.

This is semantic colour: colour that carries meaning. It is exactly the logic a configurator already runs on, where the visitor’s job is to find what they can change and change it. Because orange appears only where something is interactive, the accent never has to compete with itself for attention. The brand behaves the way the product behaves.

How small and fast can a 3D configurator be?

Small enough to sit in a homepage hero without penalty.

The Tesels homepage opens with a live mini configurator built around a watch model. A visitor can change configurations in a few clicks. They can open an exploded view of the assembly, which pulls the parts apart to show how they fit. All of this happens within the hero section, before they read a single line of copy.

The numbers:

• The entire model asset ships at under 300 KB, fully optimised.
• It loads in under a second on reasonable hardware.
• It runs smoothly on effectively any device.

We chose a watch rather than a vehicle on purpose. A watch demonstrates material, finish and assembly at a model size small enough to load instantly.

That figure is the argument. Anyone evaluating configurator vendors has almost certainly sat through a heavy, slow demo elsewhere. Arriving at a site where a photoreal object is simply present and responsive within a second proves the core claim before any feature list is read. The most persuasive thing a configurator company can do is hand someone a configurator.

How do you explain features nobody can see?

With purpose-built illustration and interaction, not paragraphs.

Much of what makes Tesels valuable is invisible. The clearest example is its machine learning lead scoring. Lead scoring ranks visitors by how likely they are to buy, so sales teams know who to follow up first.

A static points model gives fixed points for fixed actions. Tesels does not run one. It adapts to actual visitor behaviour. It stays accurate whether a client site receives 1,000 visitors or 100,000.

That is hard to grasp from a description. So the website explains it with a custom visual that a marketing lead can understand in a few seconds. The same treatment runs through the rest of the feature sections. You can see these explanations in the Tesels case study.

What does this mean if you are considering a configurator?

Judge any configurator on the moments that decide a sale. Does it load quickly on an ordinary phone? Does it look like your brand, or like someone else’s product inside your site? Does it know who has arrived, and does it carry them smoothly from exploring to contacting a dealer or reserving?

These are design questions as much as engineering ones. They need to be answered together, which is how we approach product design and WebGL work across our services.

If you are planning a configurator, or building one and want a second pair of eyes on it, we would be glad to talk it through. Get in touch and tell us what you are working on.

Below is what Apple announced, what it means for websites, and what we would check first.

What did Apple announce?

Apple unveiled the iPhone Duo on 9 September 2026 at its “Surprise and Shine” event. It is Apple’s first foldable iPhone, and it folds like a book. You can read the details in Apple’s announcement.

The key facts for anyone who builds or commissions websites:

• Two screens. A 7.6-inch inner display (1878 by 2670 pixels, 430 ppi) and a 5.4-inch outer display (1398 by 2034 pixels, 460 ppi).
• Same shape, different size. Apple says both displays share the same aspect ratio, so content scales proportionally when you fold or unfold.
• Split View on iPhone. It ships with iOS 27.1, which brings Split View, two apps side by side, to iPhone for the first time. Apple says apps adapt as you fold and unfold.
• Price and dates. From $1,999 for 256GB in the US. Pre-orders open on 16 October, and it goes on sale on 23 October 2026 in more than 70 countries.

It launched alongside the iPhone 18 Pro and 18 Pro Max, as TechCrunch reported. The Duo is the expensive, early adopter model, which may make its owners exactly the audience premium brands want.

How big is the iPhone Duo screen for a website?

A website does not see raw pixels. It sees CSS pixels, the layout units the browser uses. iPhones usually draw three screen pixels for every CSS pixel, a “3x” scale.

Dividing the panel resolutions by that usual 3x scale gives a rough estimate. Developers have reported roughly 466 by 678 CSS pixels folded, and 890 by 626 unfolded. These are estimates, not official figures.

The interesting number is the unfolded width. At close to 900 pixels wide and shorter than it is wide, the open Duo sits where many sites switch from a phone layout to a tablet or small laptop layout.

Why might the biggest iPhone screen act like the narrowest?

Split View. When a visitor puts Safari next to another app, your site gets only part of the screen.

Developers have reported that each Safari window in Split View is about 445 CSS pixels wide. That is narrower than the folded phone. So the iPhone with the largest screen Apple makes can show your site in a column thinner than a standard iPhone.

This is the heart of it. A site that decides its layout by guessing the device will guess wrong, whether it assumes “phone” on an 890 pixel wide screen or “big screen” on one split in half.

Can a website detect when the phone is folded?

Not directly, for now. There are web standards designed for this. The Viewport Segments API reports where a fold or hinge sits on the screen. The Device Posture API reports whether a device is folded.

At the time of writing, developers report that Safari supports neither. One developer’s write-up sums it up in its title: Apple shipped a foldable iPhone, and Safari still cannot tell you it folded.

Our take: do not wait for it. Even if those APIs arrive, a site that relies on knowing the posture is fragile. What a site can always read is the size of the space it has. Design for that.

How should you design for a foldable phone?

Design fluid, fold-agnostic layouts. Fold-agnostic means the layout does not care whether a fold exists. It only cares how much room it has.

In practice, that means a few habits:

• Respond to space, not devices. Use breakpoints based on where your content starts to look cramped, not on a list of phone models. A new phone then needs no new code.
• Use container queries where they help. A container query lets a component, such as a product card, change its layout based on the space its own box has, rather than the whole screen. This is ideal when the same card appears in a sidebar and in a full width grid.
• Plan for wide and short. The open Duo is wider than it is tall. Hero sections built for tall phone screens, with the key message near the bottom, can push that message out of view. Check that headlines and calls to action still sit in the first screen.
• Keep tap targets generous. A larger screen does not mean a mouse. Buttons still need to suit a thumb.

None of this is new. The Duo simply punishes the shortcuts that used to get away with it.

What happens to a 3D or WebGL scene when the phone folds?

This is where foldables bite hardest. WebGL is the technology that lets a browser draw real time 3D graphics. A WebGL scene draws into a canvas, a fixed rectangle of pixels, through a virtual camera with a set shape.

If the viewport changes and the scene does not respond, you get a stretched image, a cropped subject, or a canvas that no longer fills the screen. On a foldable, that change can happen mid-visit, in the middle of an animation, every time someone opens or closes the phone or drags a Split View divider.

A well built scene handles it calmly:

• Resize the canvas and camera on every viewport change. The camera’s aspect ratio must match the new shape, or everything distorts.
• Reframe, do not just scale. A product that sits centred in a tall frame may need the camera to move back, or the composition to shift, in a wide one. Decide what must always stay in view.
• Never reload or restart. The visitor’s place in the story, their scroll position and any choices they made should survive the change.
• Watch the pixel budget. Unfolding roughly doubles the number of pixels a scene has to draw. On a phone, more pixels means more work for the GPU, the graphics chip. A scene that watches its own frame rate and lowers detail when needed copes far better. We wrote about how we do this in how to make a WebGL website run smoothly on cheap, old phones.

At BUNQ LABS, we build immersive WebGL websites, including Why Zero, which won Site of the Month at Awwwards and the FWA. On every build, we treat a resize as a normal event to design for, not an edge case to patch.

How should you test your website for the iPhone Duo?

Test on real devices and real window sizes. Browser tools can mimic a screen size, but they rarely show how a fold or a split feels in the hand, or how a 3D scene behaves on a real phone’s GPU. A short test plan:

1. Load the site folded, then unfold it mid-scroll. Does the layout reflow cleanly?
2. Open the site in Split View and drag the divider. Does anything overflow or overlap?
3. Fold and unfold during any animation or 3D scene. Does it stretch, stall or restart?
4. Check that the main message and call to action are visible on the first screen in every shape.
5. Fill in a form, fold the phone, and check that nothing typed is lost.

If you do not have a Duo yet, test the same sizes in a desktop browser by resizing the window live, and make sure a resize mid-visit never breaks anything. That covers most of what the Duo will throw at you.

What should you do now?

Most sites need checks, not a redesign. If your site picks layouts by device type, or has a WebGL hero that assumes a fixed screen, fix that first.

If you are deciding whether 3D belongs on your site at all, our guide on whether your brand needs an immersive 3D website is a good place to start. You can see the kind of work we take on on our services page.

If you want your site checked against foldables and split screens before the Duo reaches your customers, get in touch.

If you are hiring a studio, awards are useful, but only if you know what each one actually says. This is a plain guide to the main ones, written by a studio that has won most of them.

Why do web design awards exist at all?

There is no exam for building a great website. Awards fill that gap. Each site is scored by a jury of people who build websites for a living, and the best ones get named.

That makes an award a kind of peer review. It is not proof that a studio will be right for you. But it is an outside view of their craft, which is more than a portfolio page can give you.

What does Awwwards judge?

Awwwards is the best known of the web awards. Its jury scores each submitted site on design, usability, creativity and content.

The honours you will see most often are:

• Honorable Mention: the site scored well with the jury.
• Site of the Day: the top-scoring site of that day.
• Developer Award: a separate honour judged by developers, on the build itself: code quality, performance and technical craft.
• Site of the Month and Site of the Year: chosen from the daily winners, and much rarer. Our Why Zero site was Awwwards Site of the Month for September 2026.

The Developer Award is the one we would point a client to first. A site can look beautiful and be badly built. This award is judged on exactly that difference.

What is the FWA, and why does FWA of the Month matter?

The FWA is one of the oldest web awards. It names a Site of the Day (FWA of the Day) most days, then picks its FWA of the Month from that month’s daily winners, and an FWA of the Year from those.

So a Site of the Month has already beaten a month of daily winners. It is a short list. Our Why Zero site, built for Zero University, was FWA of the Month for July 2026. Going by the FWA’s own profile data, we are the first India-based studio we know of to win one.

What do CSS Design Awards and Orpetron give?

CSS Design Awards (CSSDA) names a Website of the Day. Alongside it, a winning site is scored in three categories: UI Design, UX Design and Innovation. Those scores are useful, because they show where the jury thought the site was strongest.

Orpetron names Sites of the Day and gives a Web Design Award for craft alongside them. Each month it names three Sites of the Month, the three top-scoring daily winners.

Why Zero won Orpetron Site of the Month for July 2026, in the same month as its FWA of the Month. As of October 2026, that makes BUNQ LABS the only India-based studio we know of to hold both.

What about smaller awards and design juries?

Smaller platforms such as CSS Winner, Top Design Kings and Web Guru Awards also name Sites of the Day. They are real, but they carry less weight than the big three.

General design juries are different again. The Kyoorius Design Awards in India judge design across every discipline, not only the web. Why Zero won a Baby Blue Elephant there in 2026, in Design Craft for Digital Products. An award from a jury that judges posters, packaging and identities as well as websites is a different kind of signal. We wrote about it here.

How should you use awards when hiring a studio?

Awards are a starting point, not a verdict. Five checks make them useful:

1. Was it the studio’s own work? Look at the credits on the award page. Some winning sites are made by several studios, and the agency showing you the badge may have done one small part.
2. What was it for? A Developer Award says something different from an Honorable Mention. A Site of the Month says more than a Site of the Day.
3. How recent is it? The web moves quickly. An award from years ago tells you less about the team you would hire today.
4. Does the site still work? Open the winning site on an ordinary phone. If it stutters or breaks, the award was for a demo, not a product.
5. Is the kind of work right for you? An award for an experimental art project does not mean the studio can build your online shop.

What awards does BUNQ LABS hold?

Our main honours, all from 2026:

• Awwwards Site of the Month (September), for Why Zero.
• FWA of the Month (July) and FWA of the Day, for Why Zero, and an FWA of the Day for our own site, bunqlabs.com.
• Orpetron Site of the Month (July), for Why Zero, plus Sites of the Day and Web Design Awards for Why Zero and bunqlabs.com.
• Awwwards Site of the Day, Developer Award, Business & Services Honors and Honorable Mention, for Why Zero.
• CSS Design Awards Website of the Day, with UI, UX and Innovation honours, for both Why Zero and bunqlabs.com.
• Kyoorius Baby Blue Elephant, for Why Zero.

The full list, with dates and links, is on our awards post and our Recognition page.

Do awards mean a site is good for business?

Not by themselves. Juries reward craft, and craft is not the same as results. A site still has to load fast, be found on search, work for people with ordinary phones and slow connections, and lead visitors to act.

The best studios win awards and do all of that. On Why Zero, the same site that won the FWA’s monthly award was built to run smoothly on a cheap, four year old Android phone. We wrote about how in how to make a WebGL website run smoothly on cheap, old phones.

If you want a website that wins on craft and works for every visitor, get in touch.

Most of the time, the honest answer is somewhere in between. A refresh that keeps what people recognise will often do more good than starting again. This guide covers the signs, the traps, and how to change without losing the recognition you have already built.

What are the signs it is time to rebrand?

One of these on its own may not be enough. Two or three together usually are.

You have outgrown your positioning

You started by selling one thing to one kind of customer. Now you sell something broader, or more premium, or to a different buyer. If your brand still looks and sounds like the early version, it is underselling you. A clear test: if a new customer would guess the wrong price, size or type of company from your brand alone, it is out of date.

You are moving into a new market or audience

A brand built for a local market may not travel. A consumer brand moving into business sales may need to look more serious. A brand built for one age group may put another off. When the audience changes, the brand has to be checked against the new people, not the old ones.

Two companies are becoming one

Mergers and acquisitions almost always need brand work. You have to decide whether one brand absorbs the other, whether both survive in some structure, or whether something new replaces both. Leaving it unresolved confuses customers and staff alike.

There is a change of ownership or management

When a business changes hands, or takes back control from an outside operator, the old brand may belong to the old arrangement. The Cunningham, a hotel in central Bangalore, is a clear case. The owners took operations in house after many years under outside management and relaunched the property under its own name. That needed a full brand, built from the ground up. The story is in how to design a luxury hotel brand identity.

Your name is causing problems

People mispronounce it, misspell it, confuse it with a competitor, or cannot find you when they search. Or the name describes something you no longer do. These are real costs, and they grow with every year you wait.

Your identity has become inconsistent

Different teams use different logos, colours and fonts. The website, the sales deck and the packaging look like three companies. This is common after fast growth, and it often needs a system and guidelines more than a new look.

You look dated next to competitors

Put your homepage, your packaging or your app icon next to your three closest competitors. If yours looks like it belongs to an earlier decade, buyers may assume the product does too. Be careful here, though. Looking different is good. Looking old is the problem.

You have a legal problem

If someone holds an earlier trademark on your name or mark, you may have no choice. It is far cheaper to find this out before launch than after, so trademark checks should be part of any new brand work.

When should you not rebrand?

These are the reasons we hear most often, and the ones we push back on.

• The team is bored of the brand. You see your logo every day. Your customers see it far less. The point at which you are tired of it is often the point at which they have only just started to recognise it.
• A new leader wants to make a mark. A rebrand driven by one person’s taste rarely survives that person. If the business has not changed, the brand probably should not either.
• The real problem is the product. If customers leave because of price, quality or service, a new logo will not keep them. It may even look like a distraction.
• One bad quarter. Short-term dips have short-term causes. A brand is a long-term asset.
• A design trend. Following a trend makes you look like everyone else for a year, and dated soon after.
• There is no budget to roll it out. A new identity applied to half your touchpoints is worse than a consistent old one.

Do you need a full rebrand or a refresh?

This is the most useful question to settle early, because it decides almost everything else.

A refresh keeps your name and the core of your mark. It might redraw the logo so it works better at small sizes, tidy the typography, update the palette, and write proper guidelines. Customers notice that things look sharper. They do not feel they are dealing with a new company.

A full rebrand starts with the strategy: who you are for, what you stand for, and how you differ. Then it rebuilds the identity around that answer, and sometimes renames the business.

Oddity, a decor brand we worked with, shows a middle path. We built a whole new identity system around it: colour, gradients, a custom typeface, an icon set and a brand book of about 150 pages. But we refined the existing logo rather than replacing it, and designed supporting symbols around it. That kept the recognition the brand had already earned and still gave it somewhere to grow. The full system is at /projects/odditty.

How do you rebrand without losing recognition?

The risk in any rebrand is throwing away something customers valued without knowing it. These steps reduce that risk.

1. Audit what people actually recognise. Ask customers. It may be your colour, a shape in the mark, the name, or the way you write. It is often not what the team assumes.
2. Keep at least one anchor. Carry one recognised asset across, such as the colour, the symbol or the name. Some of the best-known brands only dropped their name from their logo once the symbol was recognised on its own.
3. Explain the change. Tell customers why, in plain words. A rebrand that comes with a reason feels like progress. One without a reason feels like a cover-up.
4. Launch it everywhere you can at once. Website, social profiles, email signatures and sales materials should switch together. Physical items like signage can follow on a planned schedule.
5. Protect your search traffic. Keep URLs where possible, set permanent redirects from old addresses, and update your business listings and profiles on launch day.
6. Listen, but do not panic. Some pushback is normal. There have also been famous cases of a large brand reversing a new logo within days after customers objected, which is a reminder to test before launch rather than after.

For a look at how two very large brands handled this, read what founders can learn from the McLaren and Novo rebrands.

What does a rebrand include?

A rebrand is not a new logo. A complete one usually covers:

• Strategy and positioning: who you are for, what you promise, and how you differ.
• Name: only if the name is part of the problem.
• Logo and mark system: primary logo, symbol, wordmark and versions for small sizes and one colour.
• Typography: typefaces and a hierarchy for headings and body text.
• Colour: a palette with exact values for screen and print.
• Graphic language: patterns, shapes, imagery and illustration style.
• Voice: how the brand writes and speaks.
• Guidelines: the rules, written down so others can apply them.
• Applications: stationery, packaging, signage, social templates.
• Website: usually the most visible place the new brand lives.

If you are unsure which of these you need, our guide to logo vs brand identity vs branding explains where each one starts and stops.

How long does a rebrand take, and what drives the timeline?

There is no fixed number. The main drivers are:

• Scope. A refresh is quicker than a new strategy and identity.
• Naming. A new name needs creative work, checks on trademarks and domains, and agreement, all of which take time.
• Decision makers. The more people who must approve, the longer each round takes.
• Touchpoints. A software company has fewer physical items than a hotel. The Cunningham’s system covered between 50 and 100 collateral items, and the mark alone went through 200 to 300 iterations. Brand to live website took seven months. Oddity, from brand system to live store, took eight.
• The website. If the rebrand includes a new site, its build often sets the launch date.

The process itself is usually the same shape: audit, strategy, naming if needed, identity design, the system and guidelines, application, and launch.

The short version

Rebrand when the business has changed and the brand is now holding it back. Refresh when the brand is right but tired or inconsistent. Leave it alone when the only thing that has changed is how you feel about it. At BUNQ LABS, an award-winning design studio in India, we often advise clients to change less than they expected. You can see how we approach this work on our services page.

If you are weighing a rebrand and want an honest view on whether you need one, get in touch.

So a logo is necessary, but it is not enough. This guide covers what a logo does, what it does not, what makes a good one, and the mistakes we see founders make most often at BUNQ LABS, where we design brand identities and build immersive websites.

What does a logo actually do for a business?

A logo does five jobs. None of them is glamorous, and all of them matter.

Recognition

People do not read logos. They spot them. On a shelf, in an app store, in a crowded inbox or on a street, a clear mark lets people find you in a fraction of a second. The simpler and more distinctive the shape, the faster that happens.

Trust

A clean, consistent logo signals that someone is looking after the business. It does not create trust on its own. But a messy, amateur or inconsistent one can lose trust before a customer has read a word.

Memory

A logo is a hook for memory. Each good or bad experience gets attached to it. Over years, that small shape comes to stand for everything a customer knows about you. This is why a logo seems to be worth more as time passes. It is not the drawing that gains value. It is what people have learned to associate with it.

Differentiation

In most markets, competitors look alike. A distinctive logo is one of the few things that makes you look like nobody else. That matters most where the products themselves are hard to tell apart.

Consistency and ownership

A logo marks things as yours: the invoice, the packaging, the app, the uniform. Used the same way everywhere, it ties scattered touchpoints into one business. It is also something you can protect as a trademark.

Is a logo the same as a brand?

No. A logo is one mark. A brand is what people think and feel about your business, built from every experience they have with it. The logo is the label on the jar, not what is in it.

The Cunningham, a hotel in Bangalore we branded, shows this clearly. Its logo, an arc drawn from a jasmine braid, appears on almost nothing inside the hotel. Items that leave the building, like business cards and tote bags, carry it. Items that stay inside, like slippers, bottles and candles, carry only a pattern made from the same unit. The brand is everywhere. The logo is almost nowhere. You can see the system at /projects/tch.

For the full difference between the terms, read logo vs brand identity vs branding.

What makes a good logo?

A good logo is not the one you like most in a presentation. It is the one that works in every place it will live. Check it against these:

• Simple. It can be recognised at a glance and sketched from memory.
• Distinctive. It does not look like your competitors, or like a stock icon.
• Works small. It holds up as a favicon, an app icon or a social avatar.
• Works large. It holds up on a sign, a billboard or the side of a building.
• Works in one colour. It survives being printed in black, embossed, engraved or reversed out of a photo.
• Works in motion. It can animate, or be built in 3D, without falling apart.
• Fits the story. It comes from something true about the business, not a trend.

Two of our own projects show these tests at work.

The Tesels mark is a single operation: a circle subtracted from a square. It will most often appear as a small credit inside other companies’ configurator interfaces, so it had to survive being tiny. It reproduces cleanly in one colour at any scale, and that mattered more than how it looks large. The project is at /projects/tesels.

The Cunningham mark went through 200 to 300 iterations before it was settled. The single jasmine bud alone went through 10 to 20 variations, tested large and small, in lines and in arcs. That is what it takes to make a detailed mark hold up at every size.

Do logos still matter in a digital, moving world?

More than ever, but they have to do more. A logo now has to work as a tiny icon in a browser tab, move in a video intro, and sometimes exist in three dimensions.

On Why Zero, the website we built for Zero University, the logo is never placed on the page as a flat graphic. In the fourth stage of the experience, the visitor flies through a tunnel, and that tunnel is the Zero mark extruded into 3D. The logo becomes a place you travel through. That only works because the mark is simple enough to survive being turned into geometry.

What can’t a logo do?

Founders often expect too much from a logo. Here is what it cannot do:

• It cannot fix a product problem. If customers leave because of price, quality or service, a new logo changes nothing.
• It cannot explain what you do. Very few great logos describe the product. Your name, your words and your website do that.
• It cannot create meaning on day one. A new logo is close to empty. Meaning builds through use and experience.
• It cannot carry a brand alone. Type, colour, voice, imagery and behaviour do most of the work. A logo with nothing around it looks thin.

What mistakes do founders make with their logo?

These come up again and again:

1. Too much detail. Fine lines, gradients and small text disappear at small sizes.
2. Following a trend. What looks current this year looks dated in a few.
3. Designing for one screen. A logo approved on a large monitor can fail as an app icon.
4. Putting it on everything. More logo does not mean more brand. Restraint often reads as confidence.
5. No rules. Without guidelines, teams stretch it, recolour it and crowd it.
6. Changing it too often. Every change resets some of the recognition you have built.
7. Deciding by committee or personal taste. Ask whether it works, not whether everyone likes it.
8. Skipping the trademark check. Find conflicts before launch, not after.
9. Not getting the files. You need vector files and versions for dark backgrounds, light backgrounds and small sizes.

How do you test a logo before you commit?

Run it through the real world before you sign off:

• Shrink it to favicon size and see if it still reads.
• Print it in black only, then reverse it to white on black.
• Place it on a busy photograph.
• Put it beside your three closest competitors.
• Mock it up on your biggest likely use, such as a sign or a stand.
• Animate it, even roughly, and see if the idea survives.

If it passes all of these, you have a logo that can do its job. If you are unsure whether you need a logo, a refresh or something larger, our guide on when to rebrand may help.

If you want a logo that is built to work everywhere it has to live, get in touch.

It was entered in Design Craft, under Digital Design, in Digital Products.

Why does this one feel different?

Most of Why Zero’s awards come from the web world: the FWA, Awwwards, CSS Design Awards and others. Those juries look at websites every day.

Kyoorius is different. It is an Indian design jury that judges work across disciplines. So this award comes from designers who are not only looking at websites, and who compare the craft against design in every form.

For a studio based in India, that matters. It is also the award whose name means most to an Indian client who has never heard of Awwwards.

How did the judging work?

Judging for 2026 ran from 25 to 28 August. Why Zero first made it through the jury’s first list, the round before the Elephants are decided. Then the jury gave it a Baby Blue Elephant.

What was the jury looking at?

The category was Design Craft, which is about how well the thing is made.

On Why Zero, the craft is mostly invisible. It is a site that takes more than a gigabyte of 3D source files and ships them in under 10 MB. It runs smoothly on a cheap, four year old Android phone. And it tells a whole story, from drawing a zero to exploring a city, in one continuous scroll. We wrote about how in our Codrops case study summary.

Who made Why Zero?

Zero University’s team wrote the concept and set the design direction. We built it: the development, the 3D web pipeline, the shaders and the performance work. See the Why Zero case study for the full project.

What else did Why Zero win?

The Elephant sits alongside Site of the Month from Awwwards, the FWA and Orpetron, and an Awwwards Developer Award, Site of the Day and Honorable Mention, among others. See every award Why Zero won.

Thank you to the Kyoorius jury, and to Zero University for a brief worth building.

This post lists every one of them, in plain words, with what each jury was looking at.

What is Why Zero?

Why Zero is an immersive, scroll driven website for Zero University. It argues that a traditional degree is no longer a reliable path to a good job.

You unlock the site by drawing a zero. From there one continuous scroll takes you through a shattering promise, burning money, shredded certificates, a tunnel shaped like the Zero logo, and finally a city you can explore.

Zero University’s team wrote the concept and set the design direction. We built it: the development, the 3D pipeline, the shaders and the performance work. The full story is in the Why Zero case study.

Which awards were for the month?

Three juries named Why Zero their Site of the Month:

• Awwwards, Site of the Month, September 2026
• FWA, Site of the Month, July 2026
• Orpetron, Site of the Month, July 2026

A Site of the Month is picked from that month’s daily winners. Getting one from two juries in the same month was the moment we knew the work had landed. Awwwards’ in September made it three.

What did Awwwards give it?

Awwwards gave Why Zero five honours:

• Honorable Mention, 29 July 2026
• Business & Services Honors, July 2026
• Site of the Day, 7 September 2026
• Developer Award, 7 September 2026
• Site of the Month, September 2026

The Site of the Month is chosen from the month’s Sites of the Day, so it is Awwwards’ jury picking Why Zero as one of the best sites of September. The Developer Award is the one we are proudest of. It is judged on the build, not the look. For a site that had to run smoothly on a cheap, four year old Android phone, that is the jury looking at exactly the thing we worked hardest on.

Which juries named it Site of the Day?

Seven juries gave Why Zero a daily award between July and September 2026:

• FWA, Site of the Day, 17 July 2026
• CSS Winner, Site of the Day, 18 July 2026
• Orpetron, Site of the Day, 21 July 2026
• Web Guru Awards, Site of the Day, 24 July 2026
• Top Design Kings, Site of the Day, 30 July 2026
• CSS Design Awards, Website of the Day, 11 August 2026
• Awwwards, Site of the Day, 7 September 2026

Each jury names it a little differently. CSS Design Awards says Website of the Day, for example. We use each jury’s own wording.

What came with the daily awards?

Some juries score a winning site in more detail on the same day.

• Orpetron gave it a Web Design Award on 21 July 2026, alongside its Site of the Day.
• CSS Design Awards gave it UI Design, UX Design and Innovation honours on 11 August 2026, alongside its Website of the Day.

Why does the Kyoorius award matter?

The Kyoorius Design Awards are an Indian design jury, not a web awards platform. Why Zero was entered in Design Craft, under Digital Design, in Digital Products, and won a Baby Blue Elephant in 2026.

It is the only award on this list judged by a general design jury rather than a web one. We wrote more about it in our post on the Kyoorius Baby Blue Elephant.

Who wrote about it?

Beyond the awards, Why Zero was featured by others:

• Codrops published our engineering case study on 17 July 2026. We summarised it here.
• Osmo added it to its showcase in July 2026.
• Mesh3D Gallery and Muzli featured it in July 2026.

What do the awards actually say about the work?

Awards are not the point of a project. But they are an outside opinion, and these ones agree on something useful.

The juries rewarded the story and the craft, and Awwwards’ developers rewarded the build. That build was shaped from week one by a budget phone on our desk. It is the same idea we wrote about in how to make a WebGL website run smoothly on cheap, old phones.

If you are planning something ambitious and want it to work for everyone, get in touch.