<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>KHOMA Digital - Agência e consultoria especializada em design e comunicação digital</title>
    <meta name="description" content="KHOMA Digital - Agência e consultoria especializada em design e comunicação digital" />
    <meta name="keywords" content="design, design responsivo, comunicação digital, arquitetura de informação, user interface, user experience, web design, SEO, UX, UI, marketing digital, digital" />
    <meta name="author" content="Nelson A Kawakami | khoma.com.br" />
    <link rel="shortcut icon" href="imagens/favicon.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <link href="css/glyphicons.css" rel="stylesheet">
    <link href="css/glyphicons-social.css" rel="stylesheet">
    <link href="css/elastic_grid.min.css" rel="stylesheet">
    <link href="css/khoma.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
	
<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Versao Mobile -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menuprincipal">
        <span class="sr-only">Menu</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand link link--ilin" href="#"><span>KHOMA</span><span>DIGITAL</span></a>
    </div>
    <!-- Menu Principal -->
    <div class="collapse navbar-collapse" id="menuprincipal">
      <ul class="nav navbar-nav navbar-right">
        <li class="sobre"><a href="#quemsomos" class="botao khoma">Sobre</a></li>
        <li class="servicos"><a href="#oquefazemos" class="botao khoma">Serviços</a></li>
        <li class="portfolio"><a href="#nossostrabalhos" class="botao khoma">Portfolio</a></li>
        <li class="midia"><a href="#ondeaparecemos" class="botao khoma">Mídia</a></li>
        <li class="contato"><a href="#faleconosco" class="botao khoma">Contato</a></li>
        <li class="idioma"><a href="http://www.khoma.com.br/index_EN.php" class="botao khoma">English</a></li>
      </ul>
    </div>
  </div>
</nav>


<div class="container-fluid">

    <div class="row khoma-destaque">
    	<div class="col-xs-12">
        	<img src="imagens/khoma-panhead.png" class="center-block img-responsive" alt="Khoma Digital Panhead Illustration">
        </div>
    </div>
    
    <a name="quemsomos"></a> 
    
    <div class="row sobre-nos">
    	<h1 class="super" style="color:#95aa07;">Sobre a Khoma</h1>
        <h2>Um pouco do nosso DNA</h2>
        <div class="col-xs-12 col-sm-6 col-lg-4 col-lg-offset-2">
			<div class="foto"><img src="imagens/foto.png" class="img-responsive center-block" alt="Nelson Abacherli Kawakami photo"></div>
            <div class="nome text-center">
            	<h3 style="font-size:24px;padding:10px 0 5px;margin:0;color:#FFF;border-top:4px solid #95aa07;border-bottom:4px solid #95aa07;">Nelson A. Kawakami</h3>
                <h4 style="font-size:24px;padding:5px 0;margin:0;">
                	<a href="https://br.linkedin.com/in/diretornak" target="_blank" aria-label="Linkedin"><span class="social social-linked-in"></span></a>
                    <a href="https://www.facebook.com/diretornak" target="_blank" aria-label="Facebook"><span class="social social-facebook"></span></a>
                    <a href="https://twitter.com/diretornak" target="_blank" aria-label="Twitter"><span class="social social-twitter"></span></a>
                    <a href="https://my.playstation.com/nelson_khoma" target="_blank" aria-label="Playstation"><span class="social social-playstation"></span></a>
                    <a href="https://www.instagram.com/diretornak/" target="_blank" aria-label="Instagram"><span class="social social-instagram"></span></a>
                    <a href="mailto:nelson@khoma.com.br" target="_blank" aria-label="Email"><span class="social social-e-mail"></span></a>
                </h4>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-4" style="padding-top:30px;">
        	<p>A Khoma foi criada com uma missão clara e ambiciosa: construir uma internet melhor. Nossa especialização é desenvolver aplicações intuitivas, envolventes e com propósito, evitando modismos desnecessários e arquiteturas sem sentido. No centro de tudo o que fazemos está o usuário final — porque acreditamos que a tecnologia deve trabalhar para as pessoas, e não o contrário.</p>
			<p>O que nos diferencia? Cada projeto na Khoma é tratado como único, e não é só discurso — é assim que trabalhamos. Montamos equipes dedicadas e sob medida para cada desafio, selecionando cada membro com base em sua expertise e paixão. Essa abordagem meticulosa garante entregas inovadoras e de alta qualidade, superando expectativas. Na Khoma, não criamos apenas aplicações — criamos experiências que fazem a diferença.</p>
        </div>
    </div>
    
    <div class="row">
    
    	<h1 style="color:#888;background-color:#000;padding:20px 0 15px 0;text-align:center;margin-top:0;">Alguns clientes atendidos</h1>
    
    	<div class="col-xs-6 col-sm-4 col-md-3 text-center logocliente"><img src="imagens/hasbro.png" class="img-responsive center-block" alt="Hasbro logo"></div>
        <div class="col-xs-6 col-sm-4 col-md-3 text-center logocliente"><img src="imagens/nike.png" class="img-responsive center-block" alt="Nike logo"></div>
        <div class="col-xs-6 col-sm-4 col-md-3 text-center logocliente"><img src="imagens/vivo.png" class="img-responsive center-block" alt="Vivo logo"></div>
        <div class="col-xs-6 col-sm-4 col-md-3 text-center logocliente"><img src="imagens/harvard.png" class="img-responsive center-block" alt="Harvard logo"></div>
        <div class="col-xs-6 col-sm-4 col-md-3 text-center logocliente"><img src="imagens/marvel.png" class="img-responsive center-block" alt="Marvel logo"></div>
        <div class="col-xs-6 col-sm-4 col-md-3 text-center logocliente"><img src="imagens/natura.png" class="img-responsive center-block" alt="Natura logo"></div>
        <div class="col-xs-6 col-sm-4 col-md-3 text-center logocliente"><img src="imagens/ciadetalentos.png" class="img-responsive center-block" alt="Cia de Talentos logo"></div>
        <div class="col-xs-6 col-sm-4 col-md-3 text-center logocliente"><img src="imagens/dm.png" class="img-responsive center-block" alt="DM logo"></div>
    </div>
    
    <div class="row">
    	<div class="col-xs-12">
        	<img src="imagens/khoma-pirata.png" class="center-block img-responsive" style="margin-top:60px;" alt="Khoma Digital Pirate Illustration">
        </div>
    </div>
    
    <a name="oquefazemos"></a>
    
    <div class="row o-que-fazemos text-center">
    	<h1 style="color:#00ffef;" class="super">O que fazemos</h1>
        <h2 style="margin-bottom:50px;">Algumas de nossas especialidades</h2>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 oquefazemositem">
        	<div class="titulo">
            	<span class="glyphicons glyphicons-iphone pull-right"></span>
        		<h3 style="font-family: 'Open Sans Condensed', sans-serif;">Design Responsivo</h3>
            </div>
            <div class="detalhe">
            	<p>Nossos websites se adaptam a qualquer dispositivo, e funcionam perfeitamente em computadores, tablets e celulares.</p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 oquefazemositem">
        	<div class="titulo">
            	<span class="glyphicons glyphicons-flowchart pull-right"></span>
        		<h3 style="font-family: 'Open Sans Condensed', sans-serif;">Arquitetura de Info</h3>
            </div>
            <div class="detalhe">
            	<p>Aplicações complexas não precisam ser difíceis de navegar. Podemos ajudar a organizar seu conteúdo.</p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 oquefazemositem">
        	<div class="titulo">
            	<span class="glyphicons glyphicons-crown pull-right"></span>
        		<h3 style="font-family: 'Open Sans Condensed', sans-serif;">User Interface</h3>
            </div>
            <div class="detalhe">
            	<p>Facilidade, eficiência e padronização são as chaves para uma boa interação entre o usuário e sua aplicação.</p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 oquefazemositem">
        	<div class="titulo">
            	<span class="glyphicons glyphicons-eye-open pull-right"></span>
        		<h3 style="font-family: 'Open Sans Condensed', sans-serif;">SEO</h3>
            </div>
            <div class="detalhe">
            	<p>Ninguém gosta de ficar na segunda página do Google. Um bom trabalho de SEO pode ajudar a te colocar na primeira página!</p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 oquefazemositem">
        	<div class="titulo">
            	<span class="glyphicons glyphicons-crop pull-right"></span>
        		<h3 style="font-family: 'Open Sans Condensed', sans-serif;">Design Gráfico</h3>
            </div>
            <div class="detalhe">
            	<p>Tudo relacionado a mídias impressas. Revistas, cartões de visita, folders, papelaria e outros.</p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 oquefazemositem">
        	<div class="titulo">
            	<span class="glyphicons glyphicons-imac pull-right"></span>
        		<h3 style="font-family: 'Open Sans Condensed', sans-serif;">Web Design</h3>
            </div>
            <div class="detalhe">
            	<p>Projetos para internet. Websites, hotsites, email marketing, banners, DHTMLs, infográficos, etc.</p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 oquefazemositem">
        	<div class="titulo">
            	<span class="glyphicons glyphicons-pencil pull-right"></span>
        		<h3 style="font-family: 'Open Sans Condensed', sans-serif;">Ilustrações</h3>
            </div>
            <div class="detalhe">
            	<p>Se você deseja uma imagem única e exclusiva, nada melhor do que uma ilustração para te diferenciar.</p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 oquefazemositem">
        	<div class="titulo">
            	<span class="glyphicons glyphicons-stethoscope pull-right"></span>
        		<h3 style="font-family: 'Open Sans Condensed', sans-serif;">User Experience</h3>
            </div>
            <div class="detalhe">
            	<p>Praticidade e objetividade são fundamentais quando pensamos em experiência na internet.</p>
            </div>
        </div>
    </div>
    
    <div class="row">
    	<div class="col-xs-12">
        	<img src="imagens/khoma-koi.png" class="center-block img-responsive" style="margin-top:60px;" alt="Khoma Digital Koi Illustration">
        </div>
    </div>
    
    <a name="nossostrabalhos"></a>
    
    <div class="row nossos-trabalhos">
    	<h1 style="color:#ffdb01;" class="super">Portfolio</h1>
        <h2>Veja alguns dos nossos trabalhos</h2>
        
        <div id="portfolio-khoma"></div>
        
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<!--- uncompress-->
<!-- <script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript" src="js/jquery.hoverdir.js"></script>
<script type="text/javascript" src="js/elastic_grid.js"></script> -->

<!-- compress version-->
<script type="text/javascript" src="js/elastic_grid.min.js"></script>

<script type="text/javascript">
    $(function(){
        $("#portfolio-khoma").elastic_grid({
            'showAllText' : 'All',
            'filterEffect': 'popup', // moveup, scaleup, fallperspective, fly, flip, helix , popup
            'hoverDirection': true,
            'hoverDelay': 0,
            'hoverInverse': false,
            'expandingSpeed': 500,
            'expandingHeight': 500,
            'items' :
            [
                {
                    'title'         : 'Mutant',
                    'description'   : 'Em minha primeira atuação na empresa, defini design patterns e design systems para padronizar documentos e otimizar processos, implementando versionamento, backups e gestão de projetos. Criei as duas primeiras squads ágeis, dedicadas aos dois maiores clientes, responsáveis por mais de 70% do faturamento.</br></br>Na segunda passagem, após a aquisição pela Mutant, introduzi práticas como a integração de marcações de BI no prompt de design, padronização da arquitetura de identificação e métodos mais eficientes para criar interfaces, eliminando a necessidade de designs de baixo nível (DLDs). Isso reduziu o tempo de implementação em 33%. Também oficializei o uso de Text-to-Speech (TTS) para resolver incidentes emergenciais, reduzindo o SLA em 90% (de 6 horas para 30 minutos), aumentando a eficiência operacional.',
                    'thumbnail'     : ['imagens/portfolio/mutant.jpg'],
                    'large'         : ['imagens/portfolio/mutant.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['VUI','Design','Design Conversacional','Chatbot','IA','UX Writing']
                },
                {
                    'title'         : 'Sky',
                    'description'   : 'Neste projeto, liderei a otimização completa das jornadas do usuário, desde a identificação e aquisição de novos produtos até os fluxos de inadimplência. Ao longo de 1 ano, implementamos soluções que permitiram o autoatendimento para mais de 7 novas intenções, proporcionando uma experiência mais ágil e eficiente para os usuários.</br></br>Os resultados foram transformadores: elevamos o CSAT (Customer Satisfaction Score) em 40%, aumentamos a retenção do canal para mais de 51% e reduzimos custos operacionais em milhões, graças à diminuição da dependência do call center. Este projeto destaca minha capacidade de unir design centrado no usuário, automação inteligente e análise de dados para entregar impactos significativos e mensuráveis.',
                    'thumbnail'     : ['imagens/portfolio/sky.jpg'],
                    'large'         : ['imagens/portfolio/sky.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['VUI','Design','Design Conversacional','UX Writing']
                },
                {
                    'title'         : 'SumUp',
                    'description'   : 'Neste projeto, fui responsável pela implementação da URA (Unidade de Resposta Audível) da SumUp, atuando desde a definição da persona da interface até a construção detalhada da arquitetura de informação e das jornadas do usuário. Realizei estudos iniciais de MPLs (intenções dos usuários), analisei as APIs disponíveis e estruturei cada fluxo com requisitos, diálogos detalhados e possíveis resultados, tanto positivos quanto negativos.</br></br>Uma das principais inovações foi a criação de um menu híbrido, que permitia aos usuários escolher opções diretamente na URA ou expressar suas necessidades por voz, com interpretação das intenções por meio de inteligência artificial. Essa abordagem combinou usabilidade e flexibilidade, elevando a eficiência e a satisfação do usuário.',
                    'thumbnail'     : ['imagens/portfolio/sumup.jpg'],
                    'large'         : ['imagens/portfolio/sumup.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['VUI','Design','Design Conversacional','IA','UX Writing']
                },
                {
                    'title'         : 'Banco Pan',
                    'description'   : 'Neste projeto, participei da implementação da URA (Unidade de Resposta Audível) do Banco Pan, projetando suas jornadas financeiras. Anos depois, retomei o projeto para redesenhar e melhorar fluxos existentes, revisando a arquitetura de informação e incluindo novos serviços críticos para os clientes, como contestação, aquisição e consulta, que antes não eram atendidos.</br></br>Além disso, regularizei a interface do canal, garantindo o cumprimento de todas as exigências do BACEN (Banco Central), o que evitou riscos jurídicos futuros e assegurou conformidade regulatória. Essas melhorias trouxeram maior eficiência e satisfação ao usuário, alinhando o canal às necessidades dos clientes e às normas do setor.',
                    'thumbnail'     : ['imagens/portfolio/bancopan.jpg'],
                    'large'         : ['imagens/portfolio/bancopan.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['VUI','Design','Design Conversacional','UX Writing']
                },
                {
                    'title'         : 'Claro',
                    'description'   : 'Durante 3 meses, liderei a identificação, mapeamento e atualização de mais de 25 mil menções a marcas e produtos nas 3 interfaces conversacionais da empresa, como parte do processo de rebranding após a fusão da Claro com a NET. Além disso, gerenciei o projeto de unificação dessas interfaces, integrando os clientes em uma base única de identificação.</br></br>Como resultado, eliminamos todas as distinções entre marcas e produtos, consolidando uma experiência unificada e consistente para os usuários. Esse projeto reforçou minha capacidade de gerenciar iniciativas complexas de transformação digital, alinhando tecnologia, design e estratégia de negócios.',
                    'thumbnail'     : ['imagens/portfolio/claro.jpg'],
                    'large'         : ['imagens/portfolio/claro.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['VUI','Design','Design Conversacional','Branding','UX Writing']
                },
                {
                    'title'         : 'Cogna',
                    'description'   : 'Neste projeto, fui responsável por desenhar e aprimorar jornadas do usuário nas URAs, chatbots e videoatendimentos da empresa. Ao longo de quase 1 ano, corrigimos fluxos críticos que causavam as principais dores dos alunos da rede, melhorando significativamente a experiência do usuário.</br></br>Implementamos uma identificação mais precisa no sistema, incluindo confirmação de cursos e ofertas de negociação, como descontos para adiantamento de matrículas e mensalidades. Essas melhorias não apenas resolveram problemas recorrentes, mas também aumentaram a satisfação e o engajamento dos alunos, reforçando a eficácia dos canais de atendimento.',
                    'thumbnail'     : ['imagens/portfolio/cogna.jpg'],
                    'large'         : ['imagens/portfolio/cogna.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['VUI','Design','Design Conversacional','Chatbot','UX Writing']
                },
                {
                    'title'         : 'Banco Safra',
                    'description'   : 'Neste projeto, fui responsável pela implementação da URA (Unidade de Resposta Audível) do Banco Safra. Realizei estudos detalhados da interface existente, analisei as APIs disponibilizadas pela equipe de TI e avaliei a volumetria dos atendentes humanos para identificar gargalos técnicos e as principais dores dos usuários.</br></br>Com base nesses insights, criei uma nova interface com uma identificação mais inteligente e fluxos otimizados, que melhoraram significativamente a eficiência e a experiência do usuário. Essa solução trouxe maior agilidade ao atendimento e reduziu os pontos de fricção, alinhando-se às necessidades tanto dos clientes quanto do negócio.',
                    'thumbnail'     : ['imagens/portfolio/safra.jpg'],
                    'large'         : ['imagens/portfolio/safra.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['VUI','Design','Design Conversacional','UX Writing']
                },
                {
                    'title'         : 'Sicredi',
                    'description'   : 'Neste projeto, liderei a implementação da URA (Unidade de Resposta Audível) da empresa, atuando desde a definição da persona até a entrega final. Elaborei a proposta de design de alto nível (HLD), defini todas as jornadas do usuário e suas possibilidades, criando Sample Dialogs de alta fidelidade para garantir interações naturais e eficientes.</br></br>Também gerenciei a qualidade dos áudios gravados em estúdio e desenvolvi o documento técnico de especificação da interface, que serviu como guia para as equipes de desenvolvimento. Essa abordagem estruturada garantiu a entrega de uma solução robusta e alinhada às necessidades do usuário e do negócio.',
                    'thumbnail'     : ['imagens/portfolio/sicredi.jpg'],
                    'large'         : ['imagens/portfolio/sicredi.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['VUI','Design','Design Conversacional','UX Writing']
                },
                {
                    'title'         : 'Alelo',
                    'description'   : 'Neste projeto, liderei a implementação da URA (Unidade de Resposta Audível) da empresa, atuando desde o assessment e definição da persona até a entrega final. Elaborei a proposta de design de alto nível (HLD), defini todas as jornadas do usuário e suas possibilidades, criando Sample Dialogs de alta fidelidade para garantir interações naturais e eficientes.</br></br>Também gerenciei a qualidade dos áudios gravados em estúdio e desenvolvi o documento técnico de especificação da interface, que serviu como guia para as equipes de desenvolvimento. Essa abordagem estruturada garantiu a entrega de uma solução robusta e alinhada às necessidades do usuário e do negócio.',
                    'thumbnail'     : ['imagens/portfolio/alelo.jpg'],
                    'large'         : ['imagens/portfolio/alelo.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['VUI','Design','Design Conversacional','UX Writing']
                },
                {
                    'title'         : 'Darkness Fell',
                    'description'   : 'Criei o website, branding e interface do usuário (UI) para um novo MUD (Multi-User Dungeon), inspirado em um clássico do gênero. Desenvolvi uma experiência imersiva e intuitiva, alinhando a identidade visual ao conceito do jogo, e implementei a interface utilizando Ember.js, Bootstrap e SASS, garantindo um design responsivo e de alta performance.</br></br>Além disso, coordenei prazos, recursos e a comunicação entre as equipes, assegurando a entrega do projeto dentro do escopo e com qualidade. Essa combinação de habilidades técnicas e estratégicas resultou em uma plataforma visualmente atraente e funcional, preparada para oferecer uma experiência única aos jogadores.',
                    'thumbnail'     : ['imagens/portfolio/darknessfell.jpg','imagens/portfolio/darknessfell/1.jpg','imagens/portfolio/darknessfell/2.jpg','imagens/portfolio/darknessfell/3.jpg','imagens/portfolio/darknessfell/4.jpg'],
                    'large'         : ['imagens/portfolio/darknessfell.jpg','imagens/portfolio/darknessfell/1.jpg','imagens/portfolio/darknessfell/2.jpg','imagens/portfolio/darknessfell/3.jpg','imagens/portfolio/darknessfell/4.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Branding','Design','Design Responsivo']
                },
                {
                    'title'         : 'Australia now 2016',
                    'description'   : 'Participei da comunicação online e offline do maior festival de cultura australiana do mundo, criando todo o material gráfico e digital do evento. No aspecto offline, desenvolvi peças impressas como banners, programas, anúncios de revista, cartões postais, além de itens de produção como camisetas, crachás e backdrops.</br></br>Para o ambiente online, criei o website, email marketing e posts para redes sociais, garantindo uma identidade visual consistente e impactante em todos os canais. Essa atuação abrangente, combinando design gráfico e digital, resultou em uma comunicação coesa e eficaz, fortalecendo a presença do festival e engajando o público em todas as plataformas.',
                    'thumbnail'     : ['imagens/portfolio/australianow.jpg','imagens/portfolio/australianow/prog_capa.jpg','imagens/portfolio/australianow/prog_atracao1.jpg','imagens/portfolio/australianow/prog_atracao2.jpg','imagens/portfolio/australianow/envelope_com_corte.jpg','imagens/portfolio/australianow/looplab_eflyer.jpg','imagens/portfolio/australianow/virada1.jpg','imagens/portfolio/australianow/virada2.jpg','imagens/portfolio/australianow/facebook_sample.jpg','imagens/portfolio/australianow/postcards.jpg','imagens/portfolio/australianow/credencial.jpg','imagens/portfolio/australianow/camiseta.jpg'],
                    'large'         : ['imagens/portfolio/australianow.jpg','imagens/portfolio/australianow/prog_capa.jpg','imagens/portfolio/australianow/prog_atracao1.jpg','imagens/portfolio/australianow/prog_atracao2.jpg','imagens/portfolio/australianow/envelope_com_corte.jpg','imagens/portfolio/australianow/looplab_eflyer.jpg','imagens/portfolio/australianow/virada1.jpg','imagens/portfolio/australianow/virada2.jpg','imagens/portfolio/australianow/facebook_sample.jpg','imagens/portfolio/australianow/postcards.jpg','imagens/portfolio/australianow/credencial.jpg','imagens/portfolio/australianow/camiseta.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Design Responsivo','Arquitetura','Branding','Design','Social Media','Consultoria']
                },
                {
                    'title'         : 'Natura',
                    'description'   : 'Este projeto envolveu um trabalho detalhado de arquitetura de informação e a criação das telas de um sistema desenvolvido para a Natura, utilizado na avaliação de funcionários. Desenvolvi interfaces intuitivas e funcionais, garantindo uma experiência de usuário fluida e eficiente.</br></br>O sistema foi implementado com Bootstrap, assegurando um design totalmente responsivo e adaptável a diferentes dispositivos. Essa combinação de arquitetura de informação bem estruturada e design responsivo resultou em uma solução robusta e alinhada às necessidades da Natura, facilitando o processo de avaliação e melhorando a usabilidade do sistema.',
                    'thumbnail'     : ['imagens/portfolio/natura.jpg','imagens/portfolio/natura/00.jpg','imagens/portfolio/natura/01.jpg','imagens/portfolio/natura/02.jpg','imagens/portfolio/natura/03.jpg','imagens/portfolio/natura/04.jpg','imagens/portfolio/natura/05.jpg','imagens/portfolio/natura/06.jpg'],
                    'large'         : ['imagens/portfolio/natura.jpg','imagens/portfolio/natura/00.jpg','imagens/portfolio/natura/01.jpg','imagens/portfolio/natura/02.jpg','imagens/portfolio/natura/03.jpg','imagens/portfolio/natura/04.jpg','imagens/portfolio/natura/05.jpg','imagens/portfolio/natura/06.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Design Responsivo','Arquitetura','Design']
                },
                {
                    'title'         : 'Marvel',
                    'description'   : 'Desenvolvemos o encarte oficial para a divulgação da linha de bonecos e acessórios do Wolverine, que foi distribuído dentro das caixinhas de DVDs e Blu-Rays do filme Wolverine: Imortal.</br></br>O projeto envolveu a criação de um material gráfico atraente e alinhado à identidade visual da franquia, garantindo impacto e engajamento junto ao público. Essa iniciativa reforçou a presença da marca e ampliou a visibilidade dos produtos, conectando diretamente os fãs ao universo do filme.',
                    'thumbnail'     : ['imagens/portfolio/marvel.jpg','imagens/portfolio/marvel/ORIGINAL.jpg'],
                    'large'         : ['imagens/portfolio/marvel.jpg','imagens/portfolio/marvel/ORIGINAL.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Design']
                },
                   {
                     'title'         : 'RPI',
                     'description'   : 'Desenvolvi um sistema web para um dos maiores grupos varejistas de materiais para construção do Brasil, atuando desde o design e arquitetura de informação até a implementação do front-end. O projeto, mais complexo do que aparentava, exigiu uma abordagem detalhada para garantir uma experiência de usuário intuitiva e eficiente.</br></br>Utilizando tecnologias modernas e boas práticas de desenvolvimento, criei uma solução robusta e responsiva, alinhada às necessidades do cliente e capaz de suportar as demandas do varejo. Essa iniciativa reforçou a eficiência operacional do grupo e melhorou a experiência dos usuários finais.',
                     'thumbnail'     : ['imagens/portfolio/rpi.jpg','imagens/portfolio/rpi/1.jpg','imagens/portfolio/rpi/2.jpg','imagens/portfolio/rpi/3.jpg','imagens/portfolio/rpi/4.jpg','imagens/portfolio/rpi/5.jpg'],
                     'large'         : ['imagens/portfolio/rpi.jpg','imagens/portfolio/rpi/1.jpg','imagens/portfolio/rpi/2.jpg','imagens/portfolio/rpi/3.jpg','imagens/portfolio/rpi/4.jpg','imagens/portfolio/rpi/5.jpg'],
                     'button_list'   :
                     [
                     ],
                     'tags'          : ['Design','Design Responsivo','Consultoria','Arquitetura']
                 },
                {
                    'title'         : 'MakerFest',
                    'description'   : 'Desenvolvi a comunicação online e offline para um evento de cultura maker, criando a identidade visual e todas as peças gráficas necessárias. No ambiente online, produzi artes para posts no Facebook e Instagram, enquanto no offline criei placas informativas, cartelas de dinheirinho, backdrops, banners e dezenas de outras comunicações essenciais para o sucesso do evento.</br></br>Essa abordagem abrangente garantiu uma identidade visual coesa e impactante em todos os canais, fortalecendo a presença do evento e engajando o público de forma eficaz. O resultado foi uma experiência visualmente atraente e alinhada ao espírito inovador da cultura maker.',
                    'thumbnail'     : ['imagens/portfolio/makerfest.jpg','imagens/portfolio/makerfest/1.jpg','imagens/portfolio/makerfest/2.jpg','imagens/portfolio/makerfest/3.jpg','imagens/portfolio/makerfest/4.jpg','imagens/portfolio/makerfest/5.jpg','imagens/portfolio/makerfest/6.jpg','imagens/portfolio/makerfest/7.jpg','imagens/portfolio/makerfest/8.jpg'],
                    'large'         : ['imagens/portfolio/makerfest.jpg','imagens/portfolio/makerfest/1.jpg','imagens/portfolio/makerfest/2.jpg','imagens/portfolio/makerfest/3.jpg','imagens/portfolio/makerfest/4.jpg','imagens/portfolio/makerfest/5.jpg','imagens/portfolio/makerfest/6.jpg','imagens/portfolio/makerfest/7.jpg','imagens/portfolio/makerfest/8.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Branding','Design','Social Media']
                },
                {
                    'title'         : 'StencilHead',
                    'description'   : 'Desenvolvi a identidade visual e o website para um coletivo de criação que utiliza técnicas tradicionais para modernizar ambientes e cidades. O site foi construído com o Bootstrap 4, incorporando seções fullscreen para proporcionar maior imersão e valorizar as ilustrações únicas do coletivo.</br></br>Essa abordagem combinou design moderno e funcionalidade, criando uma experiência visualmente impactante e alinhada à proposta inovadora do projeto. O resultado foi uma plataforma que não apenas reflete a identidade do coletivo, mas também engaja e inspira o público.',
                    'thumbnail'     : ['imagens/portfolio/stencilhead.jpg','imagens/portfolio/stencilhead/1.jpg','imagens/portfolio/stencilhead/2.jpg','imagens/portfolio/stencilhead/3.jpg'],
                    'large'         : ['imagens/portfolio/stencilhead.jpg','imagens/portfolio/stencilhead/1.jpg','imagens/portfolio/stencilhead/2.jpg','imagens/portfolio/stencilhead/3.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Veja online', 'url' : 'www.khoma.com.br/stencilhead/', 'new_window' : true }
                    ],
                    'tags'          : ['Branding','Design','Design Responsivo']
                },
				{
                    'title'         : 'The Syndicate',
                    'description'   : 'Criei uma apresentação visual para divulgar a trupe australiana de cultura vaudeville underground, capturando a essência única e vibrante do grupo. O design refletiu o estilo irreverente e artístico da trupe, combinando elementos visuais impactantes e uma narrativa envolvente.</br></br>Essa apresentação não apenas destacou a identidade do grupo, mas também serviu como uma ferramenta eficaz de comunicação, atraindo o público e ampliando a visibilidade da trupe em diferentes plataformas.',
                    'thumbnail'     : ['imagens/portfolio/syndicate.jpg','imagens/portfolio/syndicate/1.jpg','imagens/portfolio/syndicate/2.jpg','imagens/portfolio/syndicate/3.jpg','imagens/portfolio/syndicate/4.jpg','imagens/portfolio/syndicate/5.jpg','imagens/portfolio/syndicate/6.jpg','imagens/portfolio/syndicate/7.jpg'],
                    'large'         : ['imagens/portfolio/syndicate.jpg','imagens/portfolio/syndicate/1.jpg','imagens/portfolio/syndicate/2.jpg','imagens/portfolio/syndicate/3.jpg','imagens/portfolio/syndicate/4.jpg','imagens/portfolio/syndicate/5.jpg','imagens/portfolio/syndicate/6.jpg','imagens/portfolio/syndicate/7.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Branding','Design']
                },
                {
                    'title'         : 'SiPlanControl-M',
                    'description'   : 'Desenvolvi um guia de estilos para orientar a reformulação dos sistemas da empresa, que migraram para uma plataforma web. O guia incluiu diretrizes detalhadas para design, componentes e padrões visuais, além de telas de exemplo que demonstram a aplicação dos templates responsivos.</br></br>Também criei guias fluídos para auxiliar na reconstrução das telas existentes, garantindo consistência e usabilidade em toda a plataforma. Essa iniciativa proporcionou uma base sólida para a modernização dos sistemas, alinhando-os às melhores práticas de design e desenvolvimento web.',
                    'thumbnail'     : ['imagens/portfolio/spcm.jpg'],
                    'large'         : ['imagens/portfolio/spcm.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Veja modelo online', 'url' : 'http://khoma.com.br/SPCM/', 'new_window' : true }
                    ],
                    'tags'          : ['Design Responsivo','Arquitetura','Branding','Design']
                },
				{
                    'title'         : 'Popdek',
                    'description'   : 'Desenvolvi um website single page utilizando o framework Bootstrap e efeitos de parallax, garantindo um design moderno e totalmente responsivo. Além disso, criei o design das telas do sistema que a empresa utilizará para gerenciar projetos e atender clientes via plataforma web.</br></br>Essa combinação de um site visualmente impactante e uma interface funcional para o sistema interno reforçou a presença digital da empresa e melhorou a eficiência operacional, proporcionando uma experiência consistente e intuitiva tanto para os usuários finais quanto para a equipe interna.',
                    'thumbnail'     : ['imagens/portfolio/popdek.jpg','imagens/portfolio/popdek/website.jpg','imagens/portfolio/popdek/sistema_1.jpg','imagens/portfolio/popdek/sistema_2.jpg','imagens/portfolio/popdek/sistema_3.jpg','imagens/portfolio/popdek/sistema_4.jpg'],
                    'large'         : ['imagens/portfolio/popdek.jpg','imagens/portfolio/popdek/website.jpg','imagens/portfolio/popdek/sistema_1.jpg','imagens/portfolio/popdek/sistema_2.jpg','imagens/portfolio/popdek/sistema_3.jpg','imagens/portfolio/popdek/sistema_4.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Veja modelo online', 'url' : 'http://khoma.com.br/popdek/home_atendente_1.html', 'new_window' : true }
                    ],
                    'tags'          : ['Design Responsivo','Arquitetura','Design']
                },

				{
                    'title'         : 'Healthy Traders',
                    'description'   : 'Neste projeto, desenvolvemos o logo, a identidade visual e uma série de rótulos e adesivos para as embalagens da marca Healthy Traders. A identidade criada reflete os valores de saúde e naturalidade da marca, com um design clean e moderno que se destaca no mercado.</br></br>Os rótulos e adesivos foram projetados para comunicar de forma clara e atraente os diferenciais dos produtos, reforçando a conexão com o público e fortalecendo a presença da marca no segmento de alimentos saudáveis.',
                    'thumbnail'     : ['imagens/portfolio/healthytraders.jpg','imagens/portfolio/healthytraders/healthytraders.jpg','imagens/portfolio/healthytraders/healthytraders_1.jpg','imagens/portfolio/healthytraders/healthytraders_2.jpg','imagens/portfolio/healthytraders/healthytraders_3.jpg'],
                    'large'         : ['imagens/portfolio/healthytraders.jpg','imagens/portfolio/healthytraders/healthytraders.jpg','imagens/portfolio/healthytraders/healthytraders_1.jpg','imagens/portfolio/healthytraders/healthytraders_2.jpg','imagens/portfolio/healthytraders/healthytraders_3.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Branding']
                },
				{
                    'title'         : 'Harvard',
                    'description'   : 'Neste projeto, adaptamos o website da PPCR à plataforma Joomla, já utilizada pela equipe de administração, mas com um redesign completo que incorporou o novo logo e identidade visual da marca. Otimizamos o site para mecanismos de busca (SEO) e simplificamos a arquitetura de informação, tornando a navegação mais intuitiva e eficiente.</br></br>Essa abordagem manteve a familiaridade da equipe com a plataforma, ao mesmo tempo em que modernizou a experiência do usuário e reforçou a presença online da PPCR, alinhando o site às necessidades do público e do negócio.',
                    'thumbnail'     : ['imagens/portfolio/harvard.jpg','imagens/portfolio/harvard/home.jpg'],
                    'large'         : ['imagens/portfolio/harvard.jpg','imagens/portfolio/harvard/home.jpg'],
                    'button_list'   :
                    [
						{ 'title':'Veja online', 'url' : 'http://www.ppcr.org/ppcr/', 'new_window' : true }
                    ],
                    'tags'          : ['Arquitetura','Design']
                },
				{
                    'title'         : 'Cia de Talentos',
                    'description'   : 'Neste projeto, planejamos e executamos a entrada da empresa nas mídias sociais, criando perfis corporativos e um blog, além de otimizar todos os conteúdos para mecanismos de busca (SEO). Estruturamos cronogramas de postagens, fluxos de atendimento e gestão de conteúdo, e contribuímos na criação de um manual de políticas de uso para os colaboradores.</br></br>Também desenvolvemos a arquitetura de informação e os layouts do novo site, gerenciando o projeto em parceria com a agência responsável pelo desenvolvimento. Treinamos as equipes internas — incluindo assessoria de imprensa, células de projeto, marketing e RH — para garantir a gestão eficiente e alinhada aos objetivos da empresa. Essa iniciativa consolidou a presença digital da organização e otimizou seus processos de comunicação e engajamento.',
                    'thumbnail'     : ['imagens/portfolio/ciadetalentos.jpg','imagens/portfolio/ciadetalentos/00.jpg','imagens/portfolio/ciadetalentos/01.jpg','imagens/portfolio/ciadetalentos/02.jpg','imagens/portfolio/ciadetalentos/03.jpg','imagens/portfolio/ciadetalentos/04.jpg','imagens/portfolio/ciadetalentos/05.jpg'],
                    'large'         : ['imagens/portfolio/ciadetalentos.jpg','imagens/portfolio/ciadetalentos/00.jpg','imagens/portfolio/ciadetalentos/01.jpg','imagens/portfolio/ciadetalentos/02.jpg','imagens/portfolio/ciadetalentos/03.jpg','imagens/portfolio/ciadetalentos/04.jpg','imagens/portfolio/ciadetalentos/05.jpg'],
                    'button_list'   :
                    [
						{ 'title':'Veja online', 'url' : 'http://www.ciadetalentos.com.br/', 'new_window' : true }
                    ],
                    'tags'          : ['Arquitetura','Consultoria','Social Media','Design']
                },
                {
                    'title'         : 'Cuidar-se',
                    'description'   : 'Neste projeto, realizamos um trabalho detalhado de arquitetura de informação e design para o sistema web, além de criar todas as telas do aplicativo, disponível para Android e iOS.</br></br>A abordagem focou em uma experiência de usuário intuitiva e consistente, garantindo que tanto a plataforma web quanto o app móvel fossem funcionais, atraentes e alinhados às necessidades do público. O resultado foi uma solução integrada e de alta qualidade, que oferece uma navegação fluida e eficiente em diferentes dispositivos.',
                    'thumbnail'     : ['imagens/portfolio/cuidarse.jpg','imagens/portfolio/cuidarse/1.jpg','imagens/portfolio/cuidarse/2.jpg','imagens/portfolio/cuidarse/3.jpg','imagens/portfolio/cuidarse/4.jpg'],
                    'large'         : ['imagens/portfolio/cuidarse.jpg','imagens/portfolio/cuidarse/1.jpg','imagens/portfolio/cuidarse/2.jpg','imagens/portfolio/cuidarse/3.jpg','imagens/portfolio/cuidarse/4.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Design Responsivo','Design','Consultoria','Arquitetura']
                },
                {
                    'title'         : 'ESS',
                    'description'   : 'Novo website da ESS, utilizando o recém-lançado Bootstrap 4, com foco em modernizar e simplificar a experiência do usuário. Reformulei a identidade visual, e optei por uma abordagem mais clean, com cores suaves e uma tipografia contemporânea que reforça a clareza e a legibilidade. A arquitetura da informação foi simplificada para garantir uma navegação intuitiva, priorizando a usabilidade e a acessibilidade.</br></br>Além do design e UX, participei ativamente da gestão do projeto, assegurando que prazos e objetivos fossem cumpridos com eficiência.',
                    'thumbnail'     : ['imagens/portfolio/ess.jpg','imagens/portfolio/ess2/1.jpg','imagens/portfolio/ess2/2.jpg'],
                    'large'         : ['imagens/portfolio/ess2.jpg','imagens/portfolio/ess2/1.jpg','imagens/portfolio/ess2/2.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Veja online', 'url' : 'http://www.essbrasil.com.br/', 'new_window' : true }
                    ],
                    'tags'          : ['Branding','Design','Design Responsivo']
                },
                 {
                     'title'         : 'Reupi',
                     'description'   : 'Fui responsável pela criação do sistema web para o Reupi, uma plataforma que conecta pessoas em busca de ajuda com usuários dispostos a oferecer suporte. Minha abordagem focou em desenvolver uma identidade visual acolhedora e inclusiva, utilizando cores harmoniosas e elementos gráficos que transmitissem confiança e empatia. A arquitetura do sistema foi pensada para garantir uma experiência intuitiva, priorizando a clareza e a facilidade de uso.</br></br>Além do design, minha contribuição estendeu-se à gestão do projeto, assegurando que cada etapa fosse executada de forma alinhada aos objetivos do cliente e às necessidades dos usuários finais. O resultado foi uma plataforma visualmente atraente e funcional, que reflete a essência colaborativa do Reupi, proporcionando uma experiência fluida e significativa para todos os envolvidos.',
                     'thumbnail'     : ['imagens/portfolio/reupi.jpg','imagens/portfolio/reupi/1.jpg','imagens/portfolio/reupi/2.jpg','imagens/portfolio/reupi/3.jpg','imagens/portfolio/reupi/4.jpg'],
                     'large'         : ['imagens/portfolio/reupi.jpg','imagens/portfolio/reupi/1.jpg','imagens/portfolio/reupi/2.jpg','imagens/portfolio/reupi/3.jpg','imagens/portfolio/reupi/4.jpg'],
                     'button_list'   :
                     [
                     ],
                     'tags'          : ['Branding','Design','Design Responsivo','Arquitetura']
                 },
				{
                    'title'         : 'Santa Maria',
                    'description'   : 'Neste projeto, desenvolvi duas apresentações e templates personalizados para a exibição de relatórios gerenciais, garantindo clareza e profissionalismo na comunicação com clientes e parceiros. Além disso, criei o novo website da empresa, com design responsivo, assegurando uma experiência fluida e adaptável a diferentes dispositivos.</br></br>Também produzimos dois vídeos institucionais, destinados à exibição nos ônibus da empresa, reforçando sua identidade visual e mensagem. Por fim, desenvolvemos um hotsite dedicado à venda de veículos de sua frota, com uma interface simples e eficaz, facilitando a transação e a experiência do usuário.',
                    'thumbnail'     : ['imagens/portfolio/santamaria.jpg','imagens/portfolio/santamaria/00.jpg','imagens/portfolio/santamaria/01.jpg','imagens/portfolio/santamaria/02.jpg','imagens/portfolio/santamaria/03.jpg','imagens/portfolio/santamaria/04.jpg','imagens/portfolio/santamaria/05.jpg'],
                    'large'         : ['imagens/portfolio/santamaria.jpg','imagens/portfolio/santamaria/00.jpg','imagens/portfolio/santamaria/01.jpg','imagens/portfolio/santamaria/02.jpg','imagens/portfolio/santamaria/03.jpg','imagens/portfolio/santamaria/04.jpg','imagens/portfolio/santamaria/05.jpg'],
                    'button_list'   :
                    [
						{ 'title':'Veja online', 'url' : 'http://www.fretamentosantamaria.com.br/', 'new_window' : true }
                    ],
                    'tags'          : ['Design Responsivo','Design','Arquitetura','Consultoria','Video']
                },
				{
                    'title'         : 'Relatório Mobile',
                    'description'   : 'Em 2013 lançamos esse infográfico mostrando a importância que os aparelhos mobile tem na atualidade, com dados da DCI, Nielsen, ABI Research, Estadão e Folha de São Paulo. O infográfico está licenciado sob Creative Commons (CC BY-NC-ND 3.0) podendo ser copiado, compartilhado e distribuído livremente desde que utilizado no formato original, sem quaisquer alterações e para uso não-comercial.',
                    'thumbnail'     : ['imagens/portfolio/mobile.jpg','imagens/portfolio/relatorios/mobile_2013.jpg'],
                    'large'         : ['imagens/portfolio/mobile.jpg','imagens/portfolio/relatorios/mobile_2013.jpg'],
                    'button_list'   :
                    [
						{ 'title':'Veja o relatório!', 'url' : 'imagens/portfolio/relatorios/Mobile_2013.jpg', 'new_window' : true }
                    ],
                    'tags'          : ['Relatório']
                },
				{
                    'title'         : 'Inconsciente',
                    'description'   : 'Filme produzido em parceria com o Centro de Audiovisual de São Bernardo do Campo que conta a estória de Alice, uma garota que está trabalhando até tarde no escritório quando se depara com uma série de eventos que transformarão sua vida.',
                    'thumbnail'     : ['imagens/portfolio/inconsciente.jpg'],
                    'large'         : ['imagens/portfolio/inconsciente.jpg'],
                    'button_list'   :
                    [
						{ 'title':'Assista online', 'url' : 'https://www.youtube.com/watch?list=PLBIre-4O_CrXB5MqfgeUwaJrcNLuzqa-M&v=hMaJ7Ls0yME', 'new_window' : true }
                    ],
                    'tags'          : ['Video','Consultoria']
                },
				{
                    'title'         : 'C2KR',
                    'description'   : 'Neste projeto com a C2KR, fomos responsáveis por analisar a matriz criativa da empresa para orientar um projeto de re-branding, realinhando sua identidade visual ao novo posicionamento. O site, que já tinha mais de dois anos, foi completamente reformulado para refletir essa mudança, com atualização das tecnologias utilizadas em seu desenvolvimento. O resultado é um site moderno e responsivo, que traduz a renovação da marca por meio de uma identidade visual atualizada e uma experiência de usuário otimizada para diferentes dispositivos. Minha atuação abrangeu desde a análise estratégica até a execução criativa, garantindo que o novo site representasse de forma coesa a essência revitalizada da C2KR.',
                    'thumbnail'     : ['imagens/portfolio/c2kr.jpg','imagens/portfolio/c2kr/00.jpg','imagens/portfolio/c2kr/01.jpg','imagens/portfolio/c2kr/02.jpg','imagens/portfolio/c2kr/03.jpg'],
                    'large'         : ['imagens/portfolio/c2kr.jpg','imagens/portfolio/c2kr/00.jpg','imagens/portfolio/c2kr/01.jpg','imagens/portfolio/c2kr/02.jpg','imagens/portfolio/c2kr/03.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Design Responsivo','Consultoria','Branding','Design','Arquitetura']
                },
				{
                    'title'         : 'Eternium - Keyd Team',
                    'description'   : 'Neste website nós utilizamos as melhores tecnologias em design responsivo (incluindo HTML5 nos videos), de modo que todas as seções do site se adaptassem a qualquer dispositivo móvel ou desktop. Além disso integramos um forum, onde membros da equipe Keyd Team Eternium podem interagir entre si em um ambiente privado, ou com visitantes em espaços públicos.',
                    'thumbnail'     : ['imagens/portfolio/eternium.jpg','imagens/portfolio/eternium/00.png','imagens/portfolio/eternium/01.jpg','imagens/portfolio/eternium/02.jpg','imagens/portfolio/eternium/03.jpg','imagens/portfolio/eternium/04.jpg'],
                    'large'         : ['imagens/portfolio/eternium.jpg','imagens/portfolio/eternium/00.png','imagens/portfolio/eternium/01.jpg','imagens/portfolio/eternium/02.jpg','imagens/portfolio/eternium/03.jpg','imagens/portfolio/eternium/04.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Design Responsivo','Branding','Design']
                },
				{
                    'title'         : 'Brandão Imóveis',
                    'description'   : 'Para este projeto nós criamos um site bastante intuitivo e orientado ao usuário. A empresa já estava presente no Facebook mas precisava de um site onde seus clientes pudessem ver os imóveis e filtrar aqueles que realmente se encaixassem dentro de suas expectativas. Para isso nós tivemos que fazer um trabalho preliminar de arquitetura da informação e revisamos toda a usabilidade. O resultado foi um site prático e funcional.',
                    'thumbnail'     : ['imagens/portfolio/brandaoimoveis.jpg','imagens/portfolio/brandao/00.jpg','imagens/portfolio/brandao/01.jpg','imagens/portfolio/brandao/02.jpg'],
                    'large'         : ['imagens/portfolio/brandaoimoveis.jpg','imagens/portfolio/brandao/00.jpg','imagens/portfolio/brandao/01.jpg','imagens/portfolio/brandao/02.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Design','Arquitetura']
                },
				{
                    'title'         : 'Sabor com Amor',
                    'description'   : 'Para este projeto nós criamos o logo e a identidade visual da empresa, além de criarmos e desenvolvermos o website e o e-commerce.</br></br>O painel administrativo permite controle de estoque, escolha de destaques, alteração de preços promocionais e a criação de cupons de desconto que podem ser distribuidos via email marketing ou redes sociais. A página de cadastro ficou bem simples e possibilitou a manutenção de um histórico de compras individual para cada cliente. Somos também responsáveis pela produção, captação, edição e publicação dos vídeos da empresa.',
                    'thumbnail'     : ['imagens/portfolio/saborcomamor.jpg','imagens/portfolio/saborcomamor/logo.png','imagens/portfolio/saborcomamor/01.jpg','imagens/portfolio/saborcomamor/02.jpg','imagens/portfolio/saborcomamor/03.jpg','imagens/portfolio/saborcomamor/04.jpg','imagens/portfolio/saborcomamor/05.jpg'],
                    'large'         : ['imagens/portfolio/saborcomamor.jpg','imagens/portfolio/saborcomamor/logo.png','imagens/portfolio/saborcomamor/01.jpg','imagens/portfolio/saborcomamor/02.jpg','imagens/portfolio/saborcomamor/03.jpg','imagens/portfolio/saborcomamor/04.jpg','imagens/portfolio/saborcomamor/05.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Video','Consultoria','Design','Design Responsivo','Arquitetura','Branding']
                },
				{
                    'title'         : 'DMRH',
                    'description'   : 'Neste projeto nós ajudamos na estruturação de um departamento de comunicação, estudando processos internos, diagnosticando pontos de desenvolvimento, criando fluxos e cronogramas de ação, além de treinar equipes internas tanto para a gestão quanto execução do dia a dia de trabalho. </br></br>Também fomos responsáveis pela criação e desenvolvimento da intranet do grupo, trazendo um conceito mais dinâmico e colaborativo à comunicação interna, facilitando o envolvimento de todas as equipes. Além disso gerenciamos o projeto do novo site institucional, coordenando duas agências e reunindo equipes internas para alinhamento de expectativas.',
                    'thumbnail'     : ['imagens/portfolio/dmrh.jpg'],
                    'large'         : ['imagens/portfolio/dmrh.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Social Media','Consultoria','Arquitetura']
                },
				{
                    'title'         : 'Revista Unick',
                    'description'   : 'Para este projeto o cliente já tinha um logo e uma identidade visual, mas precisava de uma presença digital. Nós utilizamos as mais modernas tecnologias para criar um site com design responsivo, pensando não só no visitante que acessaria o site pelo computador, mas também naqueles que acessam pelo celular ou tablet. Através de grids fluídos conseguimos fazer com que o mesmo código funcionasse tanto em telas grandes quanto nas menores.',
                    'thumbnail'     : ['imagens/portfolio/revistaunick.jpg','imagens/portfolio/unick/00.jpg','imagens/portfolio/unick/01.jpg','imagens/portfolio/unick/02.jpg','imagens/portfolio/unick/03.jpg'],
                    'large'         : ['imagens/portfolio/revistaunick.jpg','imagens/portfolio/unick/00.jpg','imagens/portfolio/unick/01.jpg','imagens/portfolio/unick/02.jpg','imagens/portfolio/unick/03.jpg'],
                    'button_list'   :
                    [
						{ 'title':'Veja online', 'url' : 'https://revistaunick.com.br/', 'new_window' : true }
                    ],
                    'tags'          : ['Design','Design Responsivo']
                },
				{
                    'title'         : 'Relatório Fale com Estranhos',
                    'description'   : 'Este relatório foi o resultado de uma pesquisa realizada via mídias sociais com mais de 550 participantes das redes Twitter, Facebook e Linkedin. A proposta foi entendermos o padrão de consumo dos jovens da geração Y e confirmarmos ou não o que foi publicado em outros artigos e livros como o “Gen BuY: How Tweens, Teens, and Twenty-Somethings Are Revolutionizing Retail” escrito por Kit e O’Donnell e o censo oficial dos Estados Unidos.</br></br>Os resultados são bem significativos e devem ajudar empresas a refletirem sobre suas estratégias de negócio, sejam elas B2C ou B2B, lidando ou não com o público jovem. Você pode estar se perguntando: “Se eu não vendo para o público jovem, como esse relatório pode me ajudar?”. Bem… esses jovens serão em breve a maior força econômica que o mundo já viu. Você não vai querer ficar para trás!',
                    'thumbnail'     : ['imagens/portfolio/falecomestranhos.jpg'],
                    'large'         : ['imagens/portfolio/falecomestranhos.jpg'],
                    'button_list'   :
                    [
						{ 'title':'Baixe o PDF GRÁTIS', 'url' : 'imagens/portfolio/relatorios/Fale_com_estranhos.pdf', 'new_window' : true }
                    ],
                    'tags'          : ['Relatório']
                },
				{
                    'title'         : 'VisualTrend',
                    'description'   : 'Neste projeto, nosso primeiro desafio internacional, o cliente já tinha sua identidade visual mas buscava um reposicionamento de marca. Nós fizemos diversos estudos de mapeamento local e brand equity para chegarmos ao resultado final.</br></br>A empresa já havia planejado como ação de lançamento do novo logo o envio de folders com uma coleção de cartões postais ilustrados com fotos da própria VisualTrend. Junto com os cartões postais os clientes preferenciais da empresa recebiam também um dos novos cartões de visita, mostrando a nova marca.',
                    'thumbnail'     : ['imagens/portfolio/visualtrend.jpg','imagens/portfolio/visualtrend/01.jpg','imagens/portfolio/visualtrend/02.jpg'],
                    'large'         : ['imagens/portfolio/visualtrend.jpg','imagens/portfolio/visualtrend/01.jpg','imagens/portfolio/visualtrend/02.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Design','Branding']
                },
				{
                    'title'         : 'AK Investimentos',
                    'description'   : 'Para este cliente nós tivemos a missão de criar uma marca que fosse forte, memorável e transmitisse tanto segurança quanto modernidade. A empresa é afiliada da XP Investimentos, e portanto tivemos algumas restrições legais durante o processo, mas isso não nos impediu de criar uma identidade única.</br></br>Durante o processo de design do website nós enxugamos muito do conteúdo inicial e chegamos a uma arquitetura que além de simples ficou bastante agradável de se navegar. Além disso criamos também cartões de visita e modelos de papelaria.',
                    'thumbnail'     : ['imagens/portfolio/ak.jpg','imagens/portfolio/ak/01.jpg','imagens/portfolio/ak/02.jpg','imagens/portfolio/ak/03.jpg','imagens/portfolio/ak/04.jpg'],
                    'large'         : ['imagens/portfolio/ak.jpg','imagens/portfolio/ak/01.jpg','imagens/portfolio/ak/02.jpg','imagens/portfolio/ak/03.jpg','imagens/portfolio/ak/04.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Design','Branding','Arquitetura']
                },
				{
                    'title'         : 'Força Geek',
                    'description'   : 'Neste projeto nós criamos o logo e identidade visual para um grupo online de fanáticos por tecnologia e games. Claro que também foi muito divertido brincar com diferentes idéias usando o conceito de 16-bits. Infelizmente não podemos publicar aqui todos os estudos =P',
                    'thumbnail'     : ['imagens/portfolio/forcageek.jpg'],
                    'large'         : ['imagens/portfolio/forcageek.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Branding']
                },
                {
                    'title'         : 'ESS Brasil',
                    'description'   : 'Neste projeto nós atualizamos o site da empresa usando as melhores tecnologias de design responsivo. Além disso criamos um portfolio digital para apresentações comerciais e uma pasta com bolso para guardar lâminas com cases de sucesso da empresa.',
                    'thumbnail'     : ['imagens/portfolio/ess.jpg','imagens/portfolio/ess/00.jpg','imagens/portfolio/ess/01.jpg','imagens/portfolio/ess/02.jpg','imagens/portfolio/ess/03.jpg'],
                    'large'         : ['imagens/portfolio/ess.jpg','imagens/portfolio/ess/00.jpg','imagens/portfolio/ess/01.jpg','imagens/portfolio/ess/02.jpg','imagens/portfolio/ess/03.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Veja online', 'url' : 'http://www.essbrasil.com.br/', 'new_window' : true }
                    ],
                    'tags'          : ['Design Responsivo','Design']
                },
				{
                    'title'         : 'Instituto Scala',
                    'description'   : 'Recriamos o website do Instituto Scala focando na arquitetura de informação e experiência do usuário. Um requisito do projeto foi que utilizássemos o CMS Joomla.',
                    'thumbnail'     : ['imagens/portfolio/institutoscala.jpg','imagens/portfolio/institutoscala/scala.jpg'],
                    'large'         : ['imagens/portfolio/institutoscala.jpg','imagens/portfolio/institutoscala/scala.jpg'],
                    'button_list'   :
                    [
                    ],
                    'tags'          : ['Design']
                }
            ]
        });
    });
</script>
        
    </div>
    
    <div class="row">
    	<div class="col-xs-12">
        	<img src="imagens/khoma-shy.png" class="center-block img-responsive" style="margin-top:60px;" alt="Khoma Digital Shy Girl Illustration">
        </div>
    </div>
    
    <a name="ondeaparecemos"></a>
    
    <div class="row onde-aparecemos">
    	<h1 style="color:#e8285e;" class="super">Onde aparecemos</h1>
        <h2>Entrevistas para revistas e sites</h2>
        
        <div class="col-xs-12 col-md-6">
        	<h3>Revista Locaweb</h3>
            <img src="imagens/locaweb.jpg" class="img-responsive" style="margin-bottom:20px;" alt="Locaweb Magazine Picture">
            <p>Nessa entrevista dada à revista Locaweb falamos sobre a importância do design responsivo nos dias de hoje. Damos conselhos sobre melhores práticas e os processos mais eficazes, discutimos as diferenças entre sites responsivos e mobile, e damos alguns números e estatísticas globais de consumo de internet.</p>
            <h3 style="color:#ffdb01;font-size:28px;">Matéria começa na página 43</h3>
             <a href="imagens/locaweb.pdf" target="_blank" class="btn btn-lg btn-default btn-block">Leia na íntegra</a>
        </div>
        
        <div class="col-xs-12 col-md-6">
        
          <div class="row">
        
            <div class="col-xs-12 col-sm-6">
                <h3>Revista Élégant</h3>
                <p>Hoje falamos sobre como as redes sociais podem ajudar em sua carreira. Junto com Eduardo Prange, da Seekr, damos dicas de como se portar nesses ambientes digitais, falamos sobre 
                melhores práticas, o que funciona e o que pode dar muito errado. Ótima leitura para quem usa ou gostaria de usar a internet para se promover e conseguir excelentes oportunidades de 
                emprego, além de alavancar sua carreira.</p>
                 <a href="http://issuu.com/grupobetoferreira/docs/elegant_11_monique/84" target="_blank" class="btn btn-lg btn-default btn-block">Leia na íntegra</a>
            </div>
            
            <div class="col-xs-12 col-sm-6">
                <h3>Seekr Blog</h3>
                <p>Fui convidado para escrever o primeiro post colaborativo para o blog da Seekr. Vocês podem ler tudo na íntegra através do link abaixo.</p>
    
                <p>Fundada em 2010, a Seekr foi criada com a idéia de que as empresas precisam estar atentas às mídias sociais. Assim, construiram soluções destinadas a ajudar 
                empresas e profissionais de Mídias Sociais a fazerem exatamente isso.</p>
                 <a href="https://seekr.com.br/2012/08/um-pouco-de-etiqueta-na-internet" target="_blank" class="btn btn-lg btn-default btn-block">Leia na íntegra</a>
            </div>
            
          </div>
          
          <div class="row">
            
            <div class="col-xs-12 col-sm-6">
                <h3>Click Carreira</h3>
                <p>Quando há um novo projeto no trabalho ou na faculdade, é importante causar boa impressão na hora de mostrá-lo aos colegas, chefes e professores. Por isso, o ClickCarreira resolveu 
                ajudar! Nelson Kawakami é responsável pela Comunicação e Mídias Sociais da Cia de Talentos e conta que, hoje em dia, existem diversas ferramentas muito legais para criação de 
                apresentações eficientes e dinâmicas. Porém, aconselha: “Mais importante do que a ferramenta, é pensar sempre nas pessoas que vão assistir”.</p>
                
                <p>Fonte: ClickCarreira</p>
                 <a href="http://clickcarreira.com.br/querocrescer/2012/2/16/3318/aprenda-a-vender-seu-peixe-nas-apresentacoes.html" target="_blank" class="btn btn-lg btn-default btn-block">Leia na íntegra</a>
            </div>
            
            <div class="col-xs-12 col-sm-6">
                <h3>Click Carreira #2</h3>
                    <p>- Seja objetivo! Não coloque na apresentação tudo o que você pretende falar.</p>
                    <p>- Grandes imagens! Lembre-se: não temos olhos de lince. Além de chamarem a atenção, elas passam a mensagem de forma rápida e eficiente!</p>
                    <p>- Carnaval tem hora! Animações são bem-vindas, mas não peque pelo excesso!</p>
                    <p>- Leitura fácil! Todos precisam conseguir ler o que está escrito nos slides.</p>
                    <p>- Contraste! No fundo branco, escreva em preto. Para fundos coloridos, use caixas de texto opacas ou com transparência de até 50%.</p>
                    <p>- Converse! Essa é a regra. Ler a apresentação para o grupo pega muito mal, ela é apenas um recurso visual.</p>
                 <a href="http://clickcarreira.com.br/querocrescer/2012/2/16/3322/6-dicas-rapidas-para-montar-uma-apresentacao.html" target="_blank" class="btn btn-lg btn-default btn-block">Leia na íntegra</a>
            </div>
       	  </div>
        </div>
        
    </div>
    
    <div class="row">
    	<div class="col-xs-12">
        	<img src="imagens/khoma-viking.png" class="center-block img-responsive" style="margin-top:60px;" alt="Khoma Digital Viking Illustration">
        </div>
    </div>
    
    <a name="faleconosco"></a>
    
    <div class="row fale-conosco">
    	<h1 style="color:#999;" class="super">Contato</h1>
        <h2 style="margin-bottom:30px;">Fale com a gente</h2>
        
        <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-2">
			<p>Use o formulário a seguir, ou qualquer uma das opções abaixo:</p>
            
            <div class="row" style="margin-bottom:50px;">
            	<div class="col-xs-3 itemcontato">
                	<a href="mailto:hello@khoma.com.br" title="E-Mail" aria-label="Email"><span class="glyphicons glyphicons-envelope"></span></a>
                    <a href="mailto:hello@khoma.com.br" class="titcontato">E-Mail</a>
                </div>
                <div class="col-xs-3 itemcontato">
                	<a href="tel:5511994426729" title="Phone" aria-label="Phone"><span class="glyphicons glyphicons-phone-alt"></span></a>
                    <a href="tel:5511994426729" class="titcontato">Telefone</a>
                </div>
                <div class="col-xs-3 itemcontato">
                	<a href="https://www.facebook.com/khomadigital/" target="_blank" title="Facebook" aria-label="Facebook"><span class="social social-facebook"></span></a>
                    <a href="https://www.facebook.com/khomadigital/" target="_blank" class="titcontato">Facebook</a>
                </div>
                <div class="col-xs-3 itemcontato">
                	<a href="skype:nakgdm?call" title="Skype"><span class="social social-skype" aria-label="Skype"></span></a>
                    <a href="skype:nakgdm?call" class="titcontato">Skype</a>
                </div>
            </div>
            
        </div>
        
        <div class="col-xs-12 col-sm-6 col-md-4">
            <form class="form-horizontal" role="form" method="post" action="index.php">
              <div class="form-group">
                <label for="email" class="col-sm-3 control-label">Email</label>
                <div class="col-sm-9">
                  <input type="email" class="form-control" id="email" name="email" placeholder="voce@algumacoisa.com">
                  <p class='text-danger'></p>                </div>
              </div>
              <div class="form-group">
                <label for="nome" class="col-sm-3 control-label">Nome</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="nome" name="nome" placeholder="Seu nome">
                  <p class='text-danger'></p>                </div>
              </div>
              <div class="form-group">
              	<label for="mensagem" class="col-sm-3 control-label"></label>
                <div class="col-sm-offset-3 col-sm-9">
                  <textarea class="form-control" rows="5" name="mensagem" placeholder="Deixe sua mensagem"></textarea>
                  <p class='text-danger'></p>                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                  <button id="submit" name="submit" type="submit" value="send" class="btn btn-lg btn-default btn-block" aria-label="Enviar mensagem">Enviar</button>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-9 col-sm-offset-3">
                                    </div>
              </div>
            </form>    
            
    
            
        </div>
    </div>
    
    <div class="row">
		<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d29255.363906625775!2d-46.690388!3d-23.571299!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce570b4915b955%3A0xef66eb52592bed72!2sAv.+Brg.+Faria+Lima%2C+1571+-+Jardins%2C+S%C3%A3o+Paulo+-+SP%2C+05423-010%2C+Brasil!5e0!3m2!1spt-PT!2sus!4v1454479264158" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
    
    <div class="row rodape">
    	<a href="#"><h1 style="color:#000;margin:10px 0;">KhomaDigital</h1></a>
    </div>
    
    
    

</div>




<script src="js/bootstrap.min.js"></script>
<script>
var animationDelay = 2500;
 
animateHeadline($('.cd-headline'));
 
function animateHeadline($headlines) {
	$headlines.each(function(){
		var headline = $(this);
		//trigger animation
		setTimeout(function(){ hideWord( headline.find('.is-visible') ) }, animationDelay);
		//other checks here ...
	});
}
function hideWord($word) {
	var nextWord = takeNext($word);
	switchWord($word, nextWord);
	setTimeout(function(){ hideWord(nextWord) }, animationDelay);
}
 
function takeNext($word) {
	return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
}
 
function switchWord($oldWord, $newWord) {
	$oldWord.removeClass('is-visible').addClass('is-hidden');
	$newWord.removeClass('is-hidden').addClass('is-visible');
}
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>
</body>
</html>