Nossa equipe interdisciplinar pensa e desvenda os quebra-cabeças do digital para desenvolver projetos completos e valorizar sua marca.
Fazer o excepcional é o nosso ponto de partida. Não nosso objetivo final.


Um studio **100% digital** onde a **tecnologia** está no nosso **DNA**.

image_35_45a2c0718d.jpeg

image_34_826ba3a475 (1).png

Compromisso em transformar o futuro por meio da Educação.

FTD_0dd125f815 (1).svg

FTD Educação

A PICCADILLY oferece produtos e serviços que combinam qualidade, conforto e beleza. Os modelos são assinados por uma marca que encoraja as mulheres a se sentirem confortáveis com suas escolhas e sua essência para trilharem a sua própria caminhada.

PICCADILLY_3dbd5469a6.svg

Piccadilly

Renovar conceitos e construir uma identidade singular para uma Coleção: este é o Lifestyle da Vicenza.

VICENZA_6a747018c8.svg

Vicenza

Criada no final de 2019 com o propósito de contar belas histórias sobre o INUSITADO no mundo do vinho.

MARVIN_3e6c4f630a.svg

Marvin Importadora

Empresa de representação de calçados femininos com sede em Sapiranga/RS, com a missão de conectar lojistas de todo o Brasil, ao melhor portfólio de fabricantes da região sul do país.

MCVL_d630c75032.svg

MCVL Representações

A WTAG é uma agência de publicidade com foco em branding e performance que sabe que comportamento e tecnologia não estão apenas interligados, mas andam em constante mudança.

WTAG_6ec3a34c1a (1).svg

WT.AG

Um complexo em Novo Hamburgo com fornecedores de arquitetura e design de alto padrão.

GLASSMALL_d1ee2de417.svg

Glass Mall

A Konecto é uma empresa americana que atua no ramo de Internet das coisas (IOT).

konecto.svg

Konecto

Clientes que embarcaram em nossos **projetos**.

FTD_Landing_Page_Rebranding_Galeria_3_842f86b4df.png

FTD_Landing_Page_Rebranding_Galeria_4_c1b9ebb371.png

FTD_Landing_Page_Rebranding_Galeria_5_6584d9e10a.png

FTD_Landing_Page_Rebranding_Galeria_6_3b6bcba2b2.png

**UX Design**

O layout foi pensado para que a tela responda às interações que o usuário faz com o scroll, onde os objetos vão sendo revelados com animações a cada vez que a tela é rolada. Uma maneira mais dinâmica e fluida para o usuário navegar pela landing page.
Os botões foram suavizados e a disposição dos textos foi criada para permitir uma leitura ágil, facilitando a compreensão sobre a história e os destaques da FTD.


**Desenvolvimento**

No desenvolvimento, utilizamos JavaScript como linguagem base, Webpack para module bundler e biblioteca Gsap para controlar as animações na tela. O html e scss também tiveram papel fundamental na estruturação do corpo da página, que traz uma narrativa bem amarrada tanto da história da FTD, como soluções entregues, features com dados e contato.

E aí, curtiu? Confira [aqui](https://ftd.com.br) o resultado.

Para saber mais sobre os próximos projetos da Qodde, siga as redes sociais abaixo.


large_ftd_9b7507b645.png

medium_ftd_9b7507b645.png

small_ftd_9b7507b645.png

thumbnail_ftd_9b7507b645.png

ftd_9b7507b645.png

FTD_Landing_Page_Rebranding_Website_Mobile_Cover_7cd5193dfb.png

small_FTD_Landing_Page_Rebranding_Website_Mobile_Cover_7cd5193dfb.png

thumbnail_FTD_Landing_Page_Rebranding_Website_Mobile_Cover_7cd5193dfb.png

Há 120 anos, a FTD Educação se dedica a conectar histórias e construir futuros por meio do conhecimento. Hoje é reconhecida como a mais completa editora de livros didáticos do Brasil e a primeira a cobrir todas as áreas de ensino, com projetos inovadores para educar os estudantes e auxiliar os professores em sala de aula.

Neste ano, em que a FTD completa o marco de 120 anos de trajetória, um processo de rebranding começou a ser preparado. Isso inclui a nova landing page desenvolvida pela Qodde, trazendo mais personalidade, modernidade e criatividade para apresentar o novo momento da editora ao público.

A Qodde participou desde a concepção até a entrega final do produto para o cliente. Um projeto focado nos mínimos detalhes que proporciona ao usuário uma experiência imersiva no universo FTD.

A nova landing foi desenvolvida para lançar o rebranding da editora que agora conta com um layout moderno e mais interativo

Landing page para FTD Educação

FTD_Landing_Page_Rebranding_Galeria_1_3695d132d0.png

FTD_Landing_Page_Rebranding_Galeria_2_3af875ab11.png

large_Video_71ae6ecfbe.jpeg

medium_Video_71ae6ecfbe.jpeg

small_Video_71ae6ecfbe.jpeg

thumbnail_Video_71ae6ecfbe.jpeg

Video_71ae6ecfbe.jpeg

galeria_bottom_2_265b59fa67.png

galeria_bottom_1_b9fa5dc932.png

galeria_bottom_4_3290506efb.png

mcvl_3_cc93b7380e (1).png

**UX Design**

O design do site é clean, moderno e bem organizado. Seguimos a lógica da marca, que se destaca pelo seu layout minimalista, cores sóbrias e logotipo simples. A navegação é intuitiva e fácil de usar, o que torna a experiência do usuário muito agradável. Além disso, está em desenvolvimento um blog com conteúdo relevante e interessante para reforçar a Marvin Importadora como uma autoridade no seu segmento.


**Desenvolvimento**

No front-end a Qodde desenvolveu o site usando o Next.js, um framework JavaScript open source que facilita o desenvolvimento de aplicações web modernas. O site é responsivo, o que significa que se adapta automaticamente às diferentes telas dos dispositivos móveis. Para tornar a visitação mais fluida, o site carrega rapidamente, mesmo em conexões de internet lentas.
No back-end foi usado o Strapi como CMS, um gerenciador de conteúdos open source que permite a geração de sites e aplicações de forma rápida e fácil. Ele vem com um conjunto completo de ferramentas que permitem a criação, gerenciamento de conteúdo, usuários e configurações do site. O Strapi também é extremamente flexível, podendo ser estendido para atender às necessidades específicas de um site ou aplicação.
E aí, curtiu? Confira aqui (https://www.marvinimportadora.com.br/) o resultado completo do novo site da Marvin Importadora. Para saber mais sobre os próximos projetos da Qodde, siga nossas redes sociais.

large_mcvl_7_b570658ee4.png

medium_mcvl_7_b570658ee4.png

small_mcvl_7_b570658ee4.png

thumbnail_mcvl_7_b570658ee4.png

mcvl_7_b570658ee4.png

small_mcvl_3_cc93b7380e.png

thumbnail_mcvl_3_cc93b7380e.png

mcvl_3_cc93b7380e.png

Criada no final de 2019, A Marvin Importadora nasceu com o propósito de contar histórias sobre o mundo do vinho, buscando ressignificar meio século de vivências. A marca está em constante procura por novos desafios e sabores para possibilitar memórias e sensações marcantes. Isso porque acredita na importância dos momentos compartilhados que integram a jornada de cada apaixonado por vinho.

Com o crescimento da demanda por produtos do negócio, a empresa decidiu investir em um site que ofereça aos clientes uma melhor visualização dos produtos e das informações necessárias para a compra. A Qodde mergulhou nesse universo para desenvolver uma experiência completa, digna dos melhores vinhos.

O projeto surge para posicionar digitalmente a marca e melhorar sua comunicação com os clientes.


Novo site para Marvin Importadora

galeria_top_2_a634483a96.png

galeria_top_1_63cf770d5e.png

mcvl_galeria_de_conteudo_do_site_1_52a7de218a.png

mcvl_galeria_de_conteudo_do_site_3_1a78b440e5.png

mcvl_galeria_de_conteudo_do_site_2_c2d51a3fd8.png

mcvl_imagem_principal_do_site_mobile_4b8c53ee56.png

**Desenvolvimento**

A landing page foi desenvolvida utilizando as tecnologias mais inovadoras disponíveis, como Next.js com renderização server side. Isso garante um ótimo desempenho e uma experiência ainda melhor de uso. Além disso, o site está otimizado para os principais mecanismos de busca, o que facilita a sua divulgação.

**Multi Idiomas**

Quando se trata de criar um site para uma empresa que atua em vários países é importante considerar no desenvolvimento a função de multi idiomas. Isso permitirá que seus potenciais clientes sejam capazes de navegar no site em seu próprio idioma, o que pode aumentar significativamente as chances de converter o visitante em cliente.


Pensando nisso, a Qodde fez o desenvolvimento considerando os três principais idiomas: português, espanhol e inglês. Para alterar a língua basta acessar o menu e clicar no idioma desejado e, imediatamente, sem mesmo fazer um novo carregamento, a LP é traduzida.


E aí, curtiu? Confira aqui (https://mcvl.com.br/) o resultado da nova LP da MCVL. 

Para saber mais sobre os próximos projetos da Qodde, siga nossas redes sociais.


large_mcvl_6_25bcbf5051.png

medium_mcvl_6_25bcbf5051.png

small_mcvl_6_25bcbf5051.png

thumbnail_mcvl_6_25bcbf5051.png

mcvl_6_25bcbf5051.png

small_mcvl_imagem_principal_do_site_mobile_4b8c53ee56.png

thumbnail_mcvl_imagem_principal_do_site_mobile_4b8c53ee56.png

Há 25 anos a MCVL Representações é referência no mercado calçadista. A empresa é focada na representação de calçados femininos com sede em Sapiranga/RS, tendo a missão de conectar lojistas de todo o Brasil ao melhor portfólio de fabricantes da região sul do país.

O negócio decidiu investir em uma landing page buscando aumentar sua visibilidade na internet e atingir um público maior. A LP foi desenvolvida com o objetivo de apresentar a empresa e seus serviços, e também para realizar a captação de leads para o e-commerce B2C que foi criado paralelamente. A Qodde participou de cada etapa do desenvolvimento do novo ambiente digital da marca.

Para lançar o e-commerce B2C da marca, a Qodde abraçou o desafio de criar um novo projeto digital.


Nova experiência de LP para MCVL

mcvl_galeria_de_imagens_do_site_1_537d3c9563.png

mcvl_galeria_de_imagens_do_site_2_9356f08b25.png

piccadilly_3_96d35dbf63.jpeg

piccadilly_838638d87c.jpeg

piccadilly_5_a16c008c9f.jpeg

piccadilly_4_125ec6be2d (1).jpeg

**UX Design**

Com o intuito de deixar o visual do site mais leve e clean, substituiu-se a cor predominante preta, pelo rosa padrão do catálogo da marca.
Baseado em um KV existente, algumas seções sofreram alterações para se adequar ao novo material gráfico da empresa.


**Desenvolvimento**

Como o projeto foi desenvolvido por outra empresa, não se teve muita abertura para inovar na tecnologia. Desenvolveu-se com tecnologia existente para suprir a necessidade do cliente naquele momento. Acreditamos que é possível evoluir para uma arquitetura mais moderna e segura. Quando isso acontecer, voltamos aqui pra contar :)

large_piccadilly_6_3789fee251.jpeg

medium_piccadilly_6_3789fee251.jpeg

small_piccadilly_6_3789fee251.jpeg

thumbnail_piccadilly_6_3789fee251.jpeg

piccadilly_6_3789fee251.jpeg

small_piccadilly_4_125ec6be2d.jpeg

thumbnail_piccadilly_4_125ec6be2d.jpeg

piccadilly_4_125ec6be2d.jpeg

"Uma oportunidade de negócio tão sólida quanto a nossa história." Essa é a frase que abre o site de franquias da Piccadilly, que no decorrer das páginas conta a sua trajetória:
Em 1955, na cidade de Igrejinha, nasce a PICCADILLY produzindo inicialmente 12 pares por dia, mas já com muita paixão e dedicação.
Já em 1958, nasce uma marca, a PICCADILLY é registrada. Nome que foi inspirado no ponto turístico londrino Piccadilly Circus.

No ano de 2019, teve como ponto marcante em sua história, a consolidação do seu sucesso com o lançamento das franquias PICCADILLY.
Em 2022, o site de franquias passa por uma atualização. Além de atualizar seu conteúdo, a Qodde participa da elaboração de um redesign em algumas seções.

Uma oportunidade de negócio tão sólida quanto a nossa história.

Atualização do site de franquias

piccadilly_1_7b17e8e5de.jpeg

piccadilly_2_773e49372d.jpeg

lider (1).jpg

lider-2.jpg

banner-bottom.jpg

left.jpg

right.jpg

wt_ag_6_7bfcc90718.jpg

**UX Design**

Pensado em mobile first, o layout é moderno e clean, apresentando uma interface limpa e agradável. Seguindo os guides da marca, estão presentes os grafismos e as cores de uma forma harmônica, sem deixar o conteúdo maçante.

**Desenvolvimento**

A WT.AG tinha uma arquitetura mais antiga quando se tratava de tecnologia em seu site, construído em uma plataforma monolítica que acarretava em velocidade menor para desenvolvimento, logo e influenciava mais custos.
Então, a Qodde sugeriu separar o back-end do front-end, utilizando assim uma API Rest para o tráfego de informações. Isso traz mais segurança e dá mais agilidade no desenvolvimento. No front-end, foi utilizado NextJs com renderização das páginas via servidor (SSR). As animações ficaram por conta da biblioteca Framer Motion, que trabalhou junto ao ReactJs para dar interatividade às páginas.
Para o back-end foi construído um CMS (Content Managment System) exclusivo para o site, suprindo as necessidades da agência e facilitando o cadastro das informações.

**Transforma**

Uma novidade na WT.AG é o programa de estágio remunerado Transforma, voltado para compartilhar conhecimento com jovens que desejam aprender sobre e-commerce na prática. Além da formação in loco na sede da agência, os futuros profissionais podem vivenciar todos os desafios do dia a dia. Conheça mais sobre o Transforma na landing page criada pela Qodde: https://wt.ag/transforma

E aí, curtiu? Confira aqui https://wt.ag/ o resultado do novo site da WT.AG. Para saber mais sobre os próximos projetos da Qodde, siga as redes sociais abaixo.

large_banner.jpg

medium_banner.jpg

small_banner.jpg

thumbnail_banner.jpg

banner.jpg

small_wt_ag_6_7bfcc90718.jpg

thumbnail_wt_ag_6_7bfcc90718.jpg

Desde 2003, a WT.AG atua nas áreas de branding e performance, com mindset digital first. Uma equação que tem a criatividade orientada aos resultados, os dados aplicados à construção de marca, os influencers como assets de performance e o e-commerce como flagship de marca. Desde sua fundação, a agência foi construída baseada na experiência digital para trazer resultados capazes de transformar negócios.
Neste ano, em que completa 19 anos de história, um novo site foi planejado para comemorar a trajetória. A Qodde é responsável por criar o projeto, desde a concepção até a entrega final, focando em cada detalhe para o usuário ter uma experiência completa.
Como a WT.AG vive em constante movimento rumo à inovação, foi essencial desenvolver um novo site moderno e minimalista que conta a narrativa transformadora que tem em seu DNA.

Novidade marca a trajetória de 19 anos da agência

Novo site para a WT.AG

large_banner-video.jpg

medium_banner-video.jpg

small_banner-video.jpg

thumbnail_banner-video.jpg

banner-video.jpg

pnld_1_138135788f_2.jpg

pnld_2_d5c5d7b8f5.jpg

pnld-6-3486295c5e.jpg

pnld_5_22fb0aad3b.jpg

**UX Design**

Com a nova apresentação das telas, foi desenvolvido um novo layout, mais clean e leve, mas ao mesmo tempo lúdico (visto que a campanha já tem uma identidade com muitos grafismos), seguindo o KV enviado. Nós apenas damos a nossa cara e deixamos uma apresentação limpa, agradável e intuitiva.

**Desenvolvimento**

No desenvolvimento, utilizamos o Wordpress, requisito para a construção destas páginas e o Elementor foi a biblioteca responsável pela estrutura das páginas, com ele foi possível replicar o layout fiel ao que foi criado na etapa de UX Design.

large_pnld_a5ff9e2e5e-_1_.jpg

medium_pnld_a5ff9e2e5e-_1_.jpg

small_pnld_a5ff9e2e5e-_1_.jpg

thumbnail_pnld_a5ff9e2e5e-_1_.jpg

pnld_a5ff9e2e5e-_1_.jpg

small_pnld_5_22fb0aad3b.jpg

thumbnail_pnld_5_22fb0aad3b.jpg

No PNLD a escolha das obras didáticas ocorre por Objeto. Os objetos são fases para a definição dos materiais para cada ciclo escolar, sendo que cada objeto representa um tipo de material específico que as escolas da rede de ensino público escolhem para ser usado nos próximos 4 anos. O objeto 1 definiu a escolha para obras didáticas para o professor e aluno.
No Objeto 1, trabalhamos em uma nova proposta de apresentação das páginas, um trabalho bem importante para empresa, visto que está ligado a regulamentações e também é um lançamento e divulgação dos livros.


Uma nova apresentação das telas, um novo layout, mais clean e leve.

Atualização da Coleção PNLD Objeto 1

banner-1.webp

banner-2.webp

O cliente no centro de tudo. Cada vez mais, precisamos entender os usuários para criar as soluções certas e gerar grandes experiências.



web-designer-sketching-a-wireframe-layout-ideas-in-a-notebook-picjumbo-com 1.png

Estruturas bem planejadas, vitrines criativas e uma série de possibilidades para alavancar as vendas do seu negócio.

ecommerce.png

Sites inteligentes para todo tipo de tela, com layouts exclusivos e textos criativos que possibilitam uma experiência digital imersiva.

Pra nós, a tecnologia anda de mãos dadas com o design e a experiência.

Clientes que embarcaram em nossos projetos.

Somos UX First. Em cada projeto, até o mínimo detalhe é maximizado.

Um studio 100% digital onde a tecnologia está no nosso DNA.