UI/UX design
Brand design
Web development
![Mediasignal homepage sketch in iPad](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjoonassandell-mediasignal-hero.0fb3e7b1.png&w=3840&q=85)
![Box of projects](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjoonassandell-sandbox-hero.a0f5b35d.png&w=3840&q=80)
Various web service and application concepts
![Omoroi homepage in phone](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjoonassandell-more-work-hero.b4d2936a.png&w=3840&q=75)
![Hankkija homepage in phone](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjoonassandell-more-work-hero-2.0d74cdcb.png&w=3840&q=75)
Web services
Web applications
');background-repeat:no-repeat;height:16px;left:.5rem;offset-path:path("M1 0V28C1 30.7614 3.23858 33 6 33H37");position:absolute;top:0;width:18px}.Button--enter .Button-bg{background-color:var(--tone-50);border:2px solid var(--border-950);z-index:1}.Button--enter .Button-bg,.Button--enter .Button-bg-hover{border-radius:4px 4px 4px 16px;inset:-2px;position:absolute}.Button--enter .Button-bg-hover{background:var(--bg-950);z-index:0}.Footer{--focus-visible-bg:var(--bg-50);--focus-visible-fg:var(--text-950);--link:var(--text-50);background:var(--Footer-bg,var(--Template-bg,var(--bg-50)));color:var(--text-50)}.Footer-inner{border-top:var(--border-width) solid var(--Footer-border,var(--border-950))}.Footer-main{display:flex;flex-direction:column;gap:3rem;mix-blend-mode:difference;padding-bottom:2.5rem;padding-top:2.5rem}.Footer-nameCol{order:-1}.Footer-bottom{align-items:center;display:flex;justify-content:space-between}:root{--Header-height:3.75rem;--Hero-bg:var(--bg-50);--Hero-height:100vw;--Hero-min-height:33rem;--Hero-max-height:75vh;--Hero-inner-min-height:var(--vh);--Hero-figure-bg-hsl:var(--black-hsl);--Hero-figure-bg-alpha-pre:0.06;--Hero-figure-bg-alpha:0.15;--Icon-size-m:1.5rem;--Icon-size-s:1.125rem}.Header{--focus-visible-bg:var(--bg-50);--focus-visible-fg:var(--text-950);--link:var(--text-50)}.Header-main{align-items:flex-end;display:flex;height:var(--Header-height);inset:0 0 auto 0;min-width:var(--root-min-width);mix-blend-mode:difference;pointer-events:none;position:fixed;z-index:var(--z-index-900)}:root:not(.is-transition) .Header-button,:root:not(.is-transition) .Header-logo,:root:not(.is-transition) .Header-nav{pointer-events:all}.Header-wrap{align-items:center;display:flex}.Header-button-text-item,.Header-logo{height:2rem;line-height:2rem}.Header-logo{--link-hover-opacity:1;display:flex;flex-direction:column;margin:0 auto 0 0;overflow:hidden;position:relative;z-index:1}.Header-separator{display:none}.Header-separator-line{background:var(--border-50);display:block;height:var(--border-width-l);position:absolute;width:100%}.Header-button{align-items:center;color:var(--text-50);display:flex;gap:.75rem;margin:0;z-index:1}.Header-button:focus-visible .Button--arrow{outline:var(--border-width) solid var(--border-50);outline-offset:3px}.Header-button-textMobile{display:block;line-height:2rem;overflow:hidden;position:relative}.Header-button-text{position:relative}.Header-button-text-item{display:block;overflow:hidden}.Header-nav{display:none}.Header-nav-item{overflow:hidden;position:relative}.Header-nav-item:not(:first-child){margin-left:.75rem}.Header-mask{background:var(--bg-950);clip-path:circle(0 at 0 0);color:var(--text-50);display:none;flex-direction:column;gap:2.5rem;inset:0;min-width:var(--root-min-width);position:fixed;z-index:var(--z-index-800)}.Header-mask:before{background:linear-gradient(var(--bg-950) 50%,transparent);content:"";height:calc(var(--Header-height) + 2.5rem);inset:0 0 auto 0;pointer-events:none;position:fixed;z-index:1}.Heading{color:var(--heading)}.Heading--display{font-size:clamp(1.25rem,1.25rem + 20vw,62.4375rem);line-height:1;font-weight:var(--font-weight-100);letter-spacing:-.065em;margin-left:-.5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Hero{--Stamp-center-x:0px;--Stamp-center-y:0px;background-color:var(--Hero-bg);height:clamp(var(--Hero-min-height),var(--Hero-height),var(--Hero-max-height));position:relative}.Hero.-transition\:pre{background-color:var(--tone-50);box-shadow:inset 0 var(--border-width-negative) 0 var(--border-950)}.Hero.-transition\:pre:first-child{z-index:10}.Hero.-transition\:pre:nth-child(2){z-index:9}.Hero.-transition\:pre:nth-child(3){z-index:8}.Hero.-transition\:pre:nth-child(4){z-index:7}.Hero.-transition\:pre:nth-child(5){z-index:6}.Hero-inner{min-height:var(--Hero-inner-min-height);pointer-events:none}.Hero-inner>*{inset:0;position:absolute}.Hero-heading{overflow:hidden;z-index:2}.Hero-heading-inner{align-items:center;bottom:3rem;display:flex;height:25%;margin-bottom:0;pointer-events:all;position:absolute;transform:translateY(-150%);white-space:nowrap}.Hero.-transition\:pre .Hero-heading-inner{transform:translate(0)}.Hero-figure{position:relative}.Hero-link{inset:auto 0 1.75rem 0;padding-right:var(--wrap-space-right)}.Hero-content,.Hero-link{pointer-events:all;z-index:4}.Hero-content{align-self:center;position:relative}.Hero-figure-bg{background:hsl(var(--Hero-figure-bg-hsl)/var(--Hero-figure-bg-alpha-pre));height:100%;width:100%;z-index:1}.Hero-figure-bg--animate{background:linear-gradient(to bottom,hsl(var(--Hero-figure-bg-hsl)/var(--Hero-figure-bg-alpha)),hsl(var(--Hero-figure-bg-hsl)/0));position:relative;transform:scaleY(4)}.Hero.-transition\:pre .Hero-figure-bg--animate{background:hsl(var(--Hero-figure-bg-hsl)/var(--Hero-figure-bg-alpha-pre));transform:scaleY(1)}.Hero-stamp{pointer-events:all}.Hero-stamp .Stamp-inner{inset:0 0 0 -10vw}.Icon{display:inline-flex;fill:currentColor;height:var(--Icon-size,var(--Icon-size-m));width:var(--Icon-size,var(--Icon-size-m))}.Link{align-items:center;display:inline-flex;gap:.5rem;max-width:100%;overflow:hidden;pointer-events:all;position:relative;transition:opacity var(--trans-primary-fastest);word-break:break-word}.Link:hover{opacity:var(--link-hover-opacity)}.Link-text{display:block;pointer-events:none;position:relative;will-change:transform}.Link-icon{align-items:center;display:flex;margin-top:-.125rem}.Link.-underline .Link-text:first-child{text-decoration:underline;text-decoration-thickness:var(--border-width);text-underline-offset:.25rem}.Link.-vertical{padding-left:.25rem;transform:rotate(-180deg);writing-mode:vertical-rl}.LinkRoll{display:inline-flex;overflow:hidden;position:relative;transition:opacity var(--trans-primary-fastest)}.LinkRoll:hover{opacity:var(--link-hover-opacity)}.LinkRoll-text{display:inline;pointer-events:none;position:relative}.LinkRoll-char{display:inline-block;position:relative}.LinkRoll.has-underline .LinkRoll-char:after{border-bottom:var(--border-width) solid;content:"";inset:auto -1px .125rem 0;opacity:0;position:absolute;transition:opacity var(--trans-primary)}.LinkRoll.-underline .LinkRoll-char:after{opacity:1}.SomeIcons{gap:1rem}.SomeIcons,.SomeIcons-link,.SomeIcons-link .Link-text{display:flex}.Splash{background-color:var(--bg-950);color:var(--text-50);inset:0;position:fixed;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:var(--z-index-900)}.Splash-main{display:grid;inset:0;place-content:center;place-items:center;position:absolute;text-align:center}.Splash-row{overflow:hidden}.Splash-text{animation:Splash-text 1s var(--ease)}.Splash-loader{animation:Splash-loader 1s var(--slow-network-delay) steps(4) infinite;aspect-ratio:10;background:radial-gradient(circle closest-side,var(--bg-50) 90%,transparent) 0/33.3333333333% 100% space;clip-path:inset(0 100% 0 0);margin-top:-.75rem;transition:opacity var(--trans-primary-fastest);width:40px}@keyframes Splash-text{0%{opacity:0;transform:translateY(100%) skewX(-50deg) translateZ(0)}to{opacity:1;transform:translateY(0) skewX(0deg) translateZ(0)}}@keyframes Splash-loader{to{clip-path:inset(0 -33.333% 0 0)}}.Stamp{display:grid;inset:0;place-items:center;position:absolute;z-index:0}.Stamp-inner{position:relative}.Stamp-inner,.Stamp-svg{height:clamp(12rem,31vw,22rem);width:clamp(12rem,31vw,22rem)}.Stamp-stamp{cursor:pointer;display:block}.Stamp-stamp svg path{fill:var(--Stamp-color,var(--text-950))}.Stamp-stamp svg path:first-child,.Stamp-stamp svg path:nth-last-child(4){fill:none}.Stamp-stamp svg circle:nth-last-child(3){fill:var(--Stamp-iris,var(--bg-50))}.Template{--Template-overlay:var(--black);--Template-overlay-initial:var(--black-transparent);background-color:var(--Template-bg,var(--bg-50));min-height:var(--vh);overflow:hidden;width:100%}.Template-main{background-color:var(--Template-bg,var(--bg-50));color:var(--Template-color,var(--text-950))}.Text{letter-spacing:normal;transform-origin:top left}.Text.-size\:s{font-size:.875rem;line-height:1.4285714286}.Text.-size\:xl{font-size:clamp(1rem,1rem + 1vw,1.375rem);line-height:1.375}.Text>:last-child{margin-bottom:0}.Text li:not(:last-child){margin-bottom:.25rem}.TextReveal,.TextReveal-text,.TextReveal-text-inner{display:block;width:-moz-fit-content;width:fit-content}.TextReveal-text{overflow:hidden}}.Template--home{--Template-bg:var(--tone-50)}.Template--home .Template-about{position:relative;z-index:calc(var(--z-index-900) - 1)}.Template--home .Template-about-mobile{display:grid;height:clamp(var(--Hero-min-height),var(--Hero-height),var(--Hero-max-height));margin-left:-.25rem;padding-bottom:25vw;place-content:center;pointer-events:none;position:absolute;width:auto}.Template--home .Template-about-mobile>.Link{pointer-events:all}.Template--home .Template-about-desktop{display:none}.Template--home .Template-about-desktop>.Heading{font-size:1rem;line-height:1.5;pointer-events:all}.Template--home .Template-heros{position:relative;z-index:1}.Template--home .Footer{position:relative;z-index:0}.Template--home .Footer-inner{border-top:0}:root{--biocode-bg-50:#00081f;--biocode-bg-100:#000a29;--biocode-bg-200:#001141;--biocode-border:rgba(71,82,133,.25);--biocode-primary:#3a59f9;--biocode-primary-text:#37f;--biocode-heading:var(--text-50);--biocode-text-800:#858fad;--biocode-text-900:#a3abc2;--biocode-text-950:var(--text-50);--mediasignal-bg-50:#c8d9e0;--mediasignal-bg-100:#a7c2ce;--mediasignal-primary:#00aae7;--mediasignal-text-800:#506973;--more-work-bg-50:#cccfc8;--more-work-bg-100:#bfc3ba;--more-work-text-800:#4d5147;--more-work-primary:blue;--oras-primary:#eb1414;--sandbox-bg-50:#e1bca7;--sandbox-bg-100:#dbae94;--sandbox-bg-200:#d49f81;--sandbox-text-800:#573928;--sandbox-primary:var(--sandbox-bg-50)}.Hero--biocode{--Hero-bg:initial;--Stamp-iris:var(--biocode-primary)}.Hero--biocode .Hero-heading{z-index:3}.Hero--biocode .Hero-pre{z-index:1}.Hero--biocode .Hero-figure-globe{inset:8% 0 auto -27%;position:absolute;width:clamp(20rem,70vw,36rem)}.Hero--biocode .Hero-figure-globe--pre{transform:scale(.99)}.Hero--biocode.-transition\:pre .Hero-bg{height:100vh}.Hero--biocode .Hero-globe{z-index:4}.Hero--biocode .Hero-icon{z-index:5}.Hero--biocode .Hero-figure-icon{border:var(--border-width) solid transparent;border-radius:50%;inset:auto auto 27% 40%;padding:1rem;position:absolute;transition:border-color var(--trans-primary);width:clamp(6rem,17vw,36rem)}.Hero--biocode .Hero-bg{background:radial-gradient(70% 22rem at 70% 0,var(--biocode-bg-200),var(--biocode-bg-50));z-index:2}.Hero--mediasignal{--Hero-bg:var(--mediasignal-bg-50);--Stamp-overlay:var(--mediasignal-bg-50);--Stamp-iris:var(--mediasignal-primary)}.Hero--mediasignal .Hero-figure-figure{--width:90vw;inset:2rem 0 0 -3.5rem;position:absolute;width:clamp(24rem,var(--width),52rem);z-index:3}.Hero--mediasignal .Hero-stamp.Stamp .Stamp-inner{inset:0 0 0 6vw}.Hero--moreWork{--Hero-bg:var(--more-work-bg-50);--Stamp-overlay:var(--more-work-bg-50);--Stamp-iris:var(--more-work-primary)}.Hero--moreWork .Hero-figure-figure{--width:45vw;inset:-1rem -35vw 0 auto;position:absolute;width:clamp(11rem,var(--width),22rem);z-index:3}.Hero--moreWork .Hero-figure-figure--bottom{inset:auto -1.5rem 6rem auto}.Hero--moreWork .Hero-stamp .Stamp-inner{inset:0 0 0 -3.5vw}.Hero--oras{--Stamp-iris:var(--oras-primary)}.Hero--oras .Hero-figure{height:clamp(14rem,55vw,28rem)}.Hero--oras .Hero-figure-figure{--width:55vw;inset:4rem 0 0 -3rem;position:absolute;width:clamp(17rem,var(--width),32rem);z-index:3}.Hero--oras .Hero-content{align-self:end}.Hero--oras .Hero-drop{height:auto;mix-blend-mode:darken;width:100%;z-index:1}.Hero--oras .Hero-drop--3{inset:auto 0 25% 30vw;max-width:10%}.Hero--sandbox{--Hero-bg:var(--sandbox-bg-50);--Stamp-iris:var(--sandbox-primary);--Stamp-overlay:var(--sandbox-bg-50)}.Hero--sandbox .Hero-figure{height:clamp(14rem,45vw,27rem)}.Hero--sandbox .Hero-figure-figure{--width:55vw;inset:6rem 0 0 -5rem;position:absolute;width:clamp(15rem,var(--width),32rem);z-index:3}.Hero--sandbox .Hero-content{align-self:end}.Hero--sandbox .Hero-stamp .Stamp-inner{inset:0 0 0 -20vw}@media (min-width:30em){.Hero--biocode .Hero-figure-globe{inset:6% 0 auto -20%}.Hero--biocode .Hero-figure-icon{inset:auto auto 23% 50%}}@media (min-width:37.5em){.hidden\@s{display:none}.grid-col\:4\@s{--grid-span:4}.grid-col\:6\@s{--grid-span:6}.grid-col.-start\:7\@s{grid-column-start:7}:root{--Hero-max-height:48rem}.Hero-stamp .Stamp-inner{inset:0}.Template--home .Template-about-mobile{display:none}.Template--home .Template-about-desktop{display:block;height:clamp(var(--Hero-min-height),var(--Hero-height),var(--Hero-max-height));max-width:20ch;padding-top:25vw;pointer-events:none;position:absolute;z-index:98}.Hero--biocode .Hero-figure-globe{top:4%}.Hero--oras .Hero-figure-figure{--width:50vw;inset:6rem 0 0 -3.5rem}.Hero--sandbox .Hero-figure-figure{--width:100%;left:-25%}}@media (min-width:48em){:root{--wrap-space-left:2.5rem;--wrap-space-right:2.5rem;--Header-height:4.5rem}.hidden\@m{display:none}.mb\@m{margin-bottom:1rem}.grid-col\:4\@m{--grid-span:4}.grid-col\:8\@m{--grid-span:8}.Button--arrow{height:2.5rem;width:3rem}.Footer-main{padding-bottom:3rem;padding-top:4rem}.Footer-nameCol{order:unset;text-align:right}.Header-button-text-item,.Header-logo{font-size:clamp(1.125rem,1.125rem + 1vw,1.5rem)}.Header-logo{margin:0}.Header-separator{align-items:center;display:flex;flex-direction:column;height:2rem;justify-content:center;margin:0 .75rem;overflow:hidden;position:relative;width:1.25rem;z-index:1}.Header-button{gap:1rem}.Header-button-textMobile{display:none}.Header-nav{display:flex;margin-left:auto}.Heading--display{margin-left:-1.5rem}.Hero-stamp .Stamp-inner{inset:5vw 0 0 0}.Template--home .Template-about-desktop{max-width:28ch}.Hero--mediasignal .Hero-figure-figure{--width:80vw}.Hero--mediasignal .Hero-stamp.Stamp .Stamp-inner{inset:3vw 0 0 10vw}.Hero--oras .Hero-drop--3{max-width:5rem}.Hero--sandbox .Hero-figure-figure{--width:80%}}@media (min-width:56.25em){.Header-nav{font-size:clamp(1rem,1rem + 1vw,1.1875rem);line-height:1.375}.Header-nav-item:not(:first-child){margin-left:1.5rem}.Template--home .Template-about-desktop{max-width:35ch}.Template--home .Template-about-desktop>.Heading{font-size:clamp(1rem,1rem + 1vw,1.1875rem);line-height:1.375}}@media (min-width:64em){:root{--wrap-space-left:4rem;--wrap-space-right:3rem;--Header-height:5.5rem;--Hero-height:var(--vh);--Hero-min-height:42rem}.grid.-gap\:l{--grid-gap:var(--grid-gap-l)}.grid-col\:4\@l{--grid-span:4}.grid-col.-start\:4\@l{grid-column-start:4}.grid-col\:5\@l{--grid-span:5}.grid-col\:6\@l{--grid-span:6}.grid-col.-start\:6\@l{grid-column-start:6}.grid-col.-start\:7\@l{grid-column-start:7}.Button--arrow{height:3rem;width:4rem}.Hero-heading-inner{bottom:-2.0625rem}.Hero-link{display:none}.Template--home .Template-about-desktop{padding-top:15rem}.Hero--biocode .Hero-figure-icon{inset:auto auto 20% 40%}.Hero--mediasignal .Hero-figure-figure{--width:64vw;inset:3rem 0 0 -5rem}.Hero--mediasignal .Hero-stamp.Stamp .Stamp-inner{inset:3vw 0 0 20vw}.Hero--oras .Hero-figure-figure{--width:45vw;left:-5rem}.Hero--oras .Hero-drop--3{bottom:10%}.Hero--oras .Hero-stamp .Stamp-inner{inset:2vw 0 0 -12vw}.Hero--sandbox .Hero-figure-figure{--width:140%;left:-70%}.Hero--sandbox .Hero-stamp .Stamp-inner{inset:0 0 0 -25vw}}@media (min-width:71.25em){.grid-col\:2\@xl{--grid-span:2}.grid-col.-start\:6\@xl{grid-column-start:6}.Hero-heading-inner{bottom:-1.4375rem}.Hero--biocode .Hero-figure-globe{inset:-2% -30% auto 0;width:auto}.Hero--biocode .Hero-figure-icon{inset:auto auto 20% 60%}}@media (min-width:80em){:root{--Hero-min-height:44rem}.Hero--sandbox .Hero-figure-figure{--width:115%;left:-57.5%}}@media (min-width:95.5em){.Button--enter{margin-top:1.5rem;transform:scale(1.1);transform-origin:bottom left}}@media (min-width:105em){.Button--enter .Button-arrow{margin-bottom:-.15rem;margin-left:-.15rem}.Button--enter{transform:scale(1.2)}.Header-separator-line{--border-width-l:3px}}@media (min-width:120em){.Button--enter{transform:scale(1.5)}}@media (min-width:160em){.Button--enter .Button-arrow{margin-bottom:-.2rem;margin-left:-.3rem}}@media (max-width:71.24em){.Hero--biocode .Hero-content{align-self:start;place-items:end;text-align:right}}@media (max-width:63.99em){.visible\@l{display:none}.pl\:0\@until\:l{padding-left:0}.Hero-inner>.wrap:not(.Hero-link){padding-right:0}.Stamp-stamp svg path:first-child,.Stamp-stamp svg path:nth-last-child(4){stroke-width:3px}}@media (max-width:47.99em){.Header-button-text,.visible\@m{display:none}}@media (max-width:37.49em){.visible\@s{display:none}.Button--enter .Button-bg-hover{height:100%;width:100%}.Button--enter{transform:scale(.75)}.Hero--oras .Hero-stamp .Stamp-inner{inset:-3vw 0 0 -10vw}}@media (max-width:22.49em){.Heading--display{font-size:5.75rem;line-height:1}}
UI/UX design
Brand design
Web development
Various web service and application concepts
Web services
Web applications