NOEN
Let's talk
Web designMotion, identity and experiences that work on every screen size. Web developmentFast websites, integrations and workflows that fit together. HostingFrom HTTPS and file serving to CDN, recovery and scalable setups. AI & automationKnowledge assistants, document flow and conversations with clear control.
Back to home

01 / WEB DESIGN

A first impression.
That lasts.

A good website does more than look good. It helps people understand, explore and take the next step. Modern browsers give us new ways to create that experience.

See it in use: the references and the theme switch on this website.

MotionIdentityExperience

Shaped by possibilities

Choose an example

Example 01 / 03

From a card. To a whole experience.

View Transitions can give transitions between views where the content feels like one continuous part of the interface.

Practical example

Picture an architect portfolio. You click a project, and the image follows you into the presentation instead of disappearing and popping up again. You keep your orientation, and the website gets a clear character.

How it can be used

For a web shop, the same idea can be used when a product opens from the overview. A material, a colour and an image keep a visual connection between the choices. What matters is that the motion explains what is happening.

What we aim for

An experience that feels calm and well made, with a clear path from interest to action.

View TransitionsWeb AnimationsReduced motion

Example 02 / 03

One design. Every screen.

Responsive design is about more than scaling down. Navigation, images and text adapt to how people actually use a phone, a tablet and a large screen.

Practical example

A restaurant site shows the menu and booking first on mobile, where most visitors come from, while the desktop has room for a gallery and the story.

How it can be used

The same content in three expressions: thumb-friendly on a phone, calm on a tablet and roomy on a desktop.

What we aim for

A website that feels made for the device in your hand, not shrunk from something else.

Container queriesFluid typographyTouch targets

Example 03 / 03

Depth that helps, not distracts.

Modern browsers can show 3D, light and depth without plugins. Used with restraint, it gives a character that makes people remember the website.

Practical example

A product page lets the visitor turn and see a product from every side, with a still image as a fallback.

How it can be used

An architecture studio shows a building in three dimensions, while text and contact details are always available without effects.

What we aim for

An expression that stands out and still works for everyone, including weaker devices.

WebGLCSS 3DFallback

Experience the technology

Motion you can feel.

See the rhythm of the interface.

TimeProgress
cubic-bezier(.22, 1, .36, 1)

Three real easing curves. Pick a rhythm, play the animation or explore the curve yourself.

What does this mean for your project?

We add a plain transition when the feature is not supported. The reduced motion setting must always be respected.

Source: MDN: View Transition API

More solutions

02Web developmentFast websites, integrations and workflows that fit together.Explore 03HostingFrom HTTPS and file serving to CDN, recovery and scalable setups.Explore 04AI & automationKnowledge assistants, document flow and conversations with clear control.Explore

Have a task
we should look at?

Let's find a good solution

Let's talk

Tell us what you want to build.

The form is the quickest way. You get a reply from a person, and we start with a short conversation about the goal, not with a price list.

Email

hi@••••.no

Phone

+47 •• •• •• ••

Shown only after a tap and a short security check, so the address does not end up on spam lists.

What is it about?

We only use your details to reply to you.

Let's talk

Tell us what you want to build. You get a reply from a person.