Olá,

Câmara Municipal de São Paulo

Uma atuação diferente para um cliente muito mais do que importante

Tirando qualquer questão política de lado, quem não ficaria orgulhoso em falar que fez parte da equipe que criou o novo site da Câmara Municipal de São Paulo, um dos orgãos públicos mais importantes da cidade onde você mora (se o ano que você estiver acessando esse portifólio for 2024). Pois bem, e mais do que fazer parte da equipe que criou esse novo site, eu atuei de uma forma diferente do que geralmente eu atuo, afinal eu trabalhei como front-end nesse projeto deixando a parte de UX/UI para outro integrante da equipe.

E foi uma experiência muito recompensadora pois eu desenferrujei o meu conhecimento em programação front-end, aprimorei meus conhecimentos em HTML 5, CSS (me apaixonei em trabalhar com o pré-processador SCSS que nunca mais quero trabalhar com CSS puro) e um pouco de wordpress e git. Além disso, como meu trabalho com UI é sempre latente, eu ajudei o responsável por essa parte em questões de melhorias visuais, sugestões de handoff para nós desenvolvedores e, para facilitar e acelerar os desenhos das interfaces, eu já partia para programação direto, sem todos os desenhos no Figma propriamente dito, afinal com meus conhecimentos de UI eu conseguia dar continuidade a programação aplicando todos os padrões visuais e de experiência do usuário que foram projetados por esse resposável.

No geral, foi um projeto muito gostoso de ser feito e que da muito orgulho tanto de poder provar minhas capacidades de design e de desenvolvedor juntas, como de ter um nome tão importante listado aqui em meus cases.

• O que eu fiz: Front-End do site

Agência DotEnd

Quando você é seu próprio cliente, a liberdade de criação não tem limites

A agência DotEnd nada mais é do que um projeto pessoal junto com um grande amigo, programador Full Stack, Vinicius Tom onde resolvemos profissionalizar nossa relação com nossos clientes para, ao invés de nos relacionarmos como Jonas ou como Vinicius iriamos atuar como um nome profissonal, que no caso é a DotEnd. E, claro, que com esse nome pretendemos divulgar no mercado para, cada vez mais, conseguirmos clientes que necessitem de soluções relacionadas a softwares, sites, sistemas e que precisem do pacote completo desde o duplo diamante do design até a entrega final funcional.

Para construir o conceito da DotEnd, eu fui estudar referências do mercado de agências e até de sites de outros ramos de atuação. E a construção visual foi completa, desde a criação do logo e seu conceito de ponto final, infinito, ciclico, enfim até todo o conceito visual do site. E como é um projeto pessoal, ou seja, eu sou meu próprio cliente, eu me permiti abusar um pouco na concepcão do layout e testar alguns formatos visuais novos, algumas micro interações, animações entre outras coisas que me fizeram fugir um pouco até da minha identidade visual que uso geralmente em outros projetos.

Está sendo um projeto muito gostoso e gratificante de fazer, pois é um projeto onde eu consigo, além de tudo isso que falei da liberdade de criação, posso abusar de treinar minhas habilidades de UI e até no Figma. Ele está sendo desenvolvido do lado de codificação e, assim que estiver pronto, eu disponibilizo o link final no botão "Ver case". No momento esse botão vai estar com o conteúdo prototipado para termos uma noção de como vai ficar o resultado final.

• O que eu fiz: 100% do UI do site, prototipagem, branding e peças de divulgação

Magosil Serralheria Industrial

Uma empresa que faz projetos incríveis e gigantescos merecia um site a altura

Um dos meus projetos mais recentes onde o desafio foi tentar traduzir em um site toda a grandiosidade dos trabalhos que esse cliente realiza. O cliente queria reformular o site dele para poder melhorar sua posição tanto no mercado como também na própria internet para conseguir atingir cada vez mais clientes. E como ele executa projetos de serralheria gigantescos e para empresas maiores ainda, a premissa inicial para o desenvolvimento visual foi tentar encontrar alguma forma de poder fazer essa vitrine dos seus projetos que conseguisse encher os olhos de quem entrasse em seu site.

Para isso o layout de todo site foi pensado para ter um apelo visual, com imagens grandes e destacadas e, com característica natural dos trabalhos do cliente aparentarem algo mais bonito e harmônico, todo esse planejamento de apelo visual se encaixou perfeitamente no conceito que eu queria levar para o cliente.

Além de tudo isso percebe-se que esse projeto tem a minha identidade, ou seja, a forma que eu estou criando, estruturando e desenhando meus projetos são unicos de cada cliente, porém você começa a identificar semelhanças estruturais em meus projetos (como organização de iformações, conceitos mais fluidos, entre outros conceitos).

O projeto está em vias de ser publicado pois passa por um refinamento e alimentação de conteúdo pelo próprio cliente, porém no botão "ver case" já conseguimos sentir um cheiro de como está ficando no ar esse projeto.

• O que eu fiz: 100% do UI do site

Perfecta Estética Avançada

Um projeto delicado que me proporcionou uma nova experiência trabalhando com fotos.

Esse projeto é um caso um pouco curioso, a cliente solicitou que eu criasse o visual do novo site que ela iria colocar no ar para concorrer com outras empresas de estética que tinham no mercado. A cliente já tinha uma marca já estabelecida e gostaria de expandir a percepção dos clientes dela para com a marca dela. Foi um trabalho bastante focado em UI e, para tentar pegar a essencia do que ela queria, o desafio foi estudar alguns concorrentes dela no mercado de estética, navegar pelos seus sites, entender como eles abordam todos os assuntos e, aliado a indentidade visual que a cliente já tinha, construir um novo site com todo esse conceito estudado que tivesse de acordo com a identidade visual da própria empresa.

Para construir esse projeto eu me inspirei em comerciais de produtos de estética, em publicidades com esse mesmo tema e tentei dar uma abordagem bem forte para o uso de imagens impactantes e visualmente atrantes de modelos de várias etinias, colorações de pele, cabelos. Tentei aplicar um layout fluido e bastante visual para causar esse impacto que a cliente queria colocar em sua marca.

Além de tudo isso percebe-se que esse projeto tem a minha identidade, ou seja, a forma que eu estou criando, estruturando e desenhando meus projetos são unicos de cada cliente, porém você começa a identificar semelhanças estruturais em meus projetos (como organização de iformações, conceitos mais fluidos, entre outros conceitos).

Infelizmente a cliente não seguiu pra frente com essa minha proposta, mas coloco ela aqui neste protifólio pois como foi uma experiência que me desafiou bastante, eu gostaria de compartilhar um pouco aqui também.

• O que eu fiz: 100% do UI do site baseado na concorrência

MyBro

O segundo projeto do pessoal da Casa do Corretor que mostra a confiança dos clientes no meu trabalho

Com o bom relacionamento que eu construi com o projeto da Casa do Corretor, quando hoveram os problemas internos da Casa do Corretor o pessoal que havia me contratado para o projeto inicial me acionou novamente para fazer parte desse novo projeto chamado My Bro. Esse projeto nada mais é do que uma evolução do conceito da Casa do Corretor, onde o foco seria a venda de planos de saúde, porém de uma forma mais dinâmica e, também mais moderna de abordagem e, também de visual, marca, entre outros fatores.

E minha nova missão junto a esse pessoal foi passar todo o conceito do site da Casa do Corretor para essa nova marca. Foi uma tarefa bem desafiadora, pois praticamente coloquei a nova identidade visual da My Bro no site que havia proposto para a Casa do Corretor. E isso com um prazo um pouco apertado para que eles pudessem atingir o objetivo de posicionar essa nova marca da forma mais rápida possível no mercado.

Foi um projeto bem legal e que me desafiou muito a propor soluções de como trocar totalmente uma marca da forma mais rápida possível.

• O que eu fiz: 100% do UI do site baseado no ultimo projeto com estes clientes

Casa do Corretor

Um projeto focado em modernizar uma marca de corretores de planos de saúde

O cliente tinha uma empresa de venda e corretagem de planos de saúde e o modelo anterior do site não atendia as necessidades tanto de atrair novos clientes como deixava confusa toda a experiência de venda dos planos. Para isso fiz o estudo junto ao cliente das suas necessidades de melhorias para resolver esses problemas. A partir desse direcionamento comecei a desenhar todo o novo conceito do novo site para o cliente, focando em algo mais humanizado, mais fácil de entender as vantagens de contratar um plano de saúde, além de facilitar a interação dos usuários no formulário de contratação de seguros que reformulei totalmente o visual de forma mais amigável e mais intuitiva de se manipular. Claro que, além disso, construi todo o desenho de toda parte de conteúdo do site também, para poder gerar insumos para os potenciais clientes poderem conhecer mais da Casa do Corretor e verem, através de suas história, sua linha do tempo, seus produtos, seus clientes, toda a confiabilidade que essa empresa poderia passar.

Infelizmente por dissolução do time que comandava a Casa do Corretor, esse projeto não está no ar mais. A Casa do corretor virou uma outra empresa e o pessoal que solicitou esse projeto pra mim virou a My Bro, que é mais um dos meus cases aqui neste portifólio. De qualquer forma segue abaixo o conteúdo de UI que desenvolvi para a antiga Casa do Corretor

• O que eu fiz: 100% do UI do site e estudo de necessidades do cliente

Factor Marketplace

Um case internacional que me desafiou a pensar fora dos costumes e padrões brasileiros.

Um dos projetos mais legais e diferentes que eu já participei, ele me desafiou de diversas formas pois ele era para um cliente dos Estados Unidos e, portanto, precisaria mudar tanto a forma de comunicação, que estava acostumado, como a forma de pensar em um produto para pessoas com uma cultura e costumes diferentes dos brasileiros. Além desses fatores, era um projeto de um sistema de controle e gerenciamento voltado para transportadoras norte americanas com todas as ferramentas necessárias para controle de cargas, fretes, veículos, contas, entre outros serviços.

Para entregar esse produto, a primeira coisa que precisei fazer, foi entender melhor como os steakholders consumiam esse tipo de produto, pois tem difernças bem perceptíveis quando criamos uma experiência de navegação para usuários brasileiros e para usuários norte americanos (coisa que não fazia idéia que existia pois para mim uma experiência de usuário em um sistema seria padrão independente do país que fosse consumir). Basicamente os usuários norte americanos desse projeto preferem o máximo de informações possíveis numa tela sem precisar de cliques e mais cliques para se chegar aonde eles precisam, mesmo que isso prejudique um pouco a experiência e o conforto visual. Para eles a agilidade de ultização sempre vem em primeiro plano (navegação intuitiva ou uma experiência visual mais coesa e confotável fica em segundo plano).

Diante deste cenário estudado criei todos os layouts necessários para o projeto sempre respeitando essa premissa e tentando sempre criar a melhor experiência possível também no mobile. Foram feitos style guides, componentes, icones e templates para ajudar numa construição mais produtiva e com uma consitência visual padronizada entre todas interfaces.

No final ainda participei da construição do front-end dos layouts que desenvolvi trabalhando com a Angular para criar algumas das interfaces que havia projetado no Figma e, consequentemente, aprimorando um pouco meus skills em programação front-end.

• O que eu fiz: 100% do UI do sistema e uma parte da programação front-end

Nuarq - Arquitetura

Mais um case de arquitetura que mostra um pouco das minhas soluções voltadas para e-commerces!

Mais um projeto relacionado a arquitetura aqui neste portifólio porém, neste caso, o objetivo do projeto é construir um "e-comerce" de serviços de arquitetura (completamente diferente de ser somente uma vitrine de um escritório de arquitetura).

Esse e-comerce funcionaria como um sistema mediador entre o profissional de arquitetura, construção e engenharia civil e seus potenciais clientes. Basicamente tanto o cliente como o profissional faziam seus cadastros e, no caso do cliente, poderia procurar o serviço que mais atendesse à sua necessidade e, no caso do profissional, forneceria seus serviços para que os clientes pudessem realizar o contato. De forma geral seria um sistema como o Workana ou o Get Ninjas, porém com esse foco em serviços arquitetonicos.

Meu papel nesse projeto foi desenhar toda experiência do usuário desde o primeiro acesso dele no site vitrine, passando pelo cadastro, até chegar no sistema propriamente dito onde o mesmo poderia buscar profissionais, realizar agendamentos de serviços, comprar serviços, entre outras funcionalidades relacionadas a esse fluxo de compra. No Figma do projeto tem o desenho de todas as interfaces que foram necessárias para este projeto.

• O que eu fiz: 100% do UI do site vitrine e do e-comerce

Guide Investimentos

A virada de Chave da minha vida de UI de Photoshop para UX/UI de Figma!

E, realmente, trabalhar na Guide Investimentos foi uma virada de chave na minha vida profissional pois foi onde eu parei de atuar somente como um Web Designer e fui reconhecido como um profissional especializado em UX e UI design, sempre pensando na experiência dos usuários da Guide na porta de entrada dos mesmos na corretora (que no caso é o site institucional e landings pages da empresa).

Além disso, esse período trabalhando na Guide ainda foi essencial para amplificar o meu gosto no meu "lado UI da força" onde eu tive o meu primeiro contato com o Figma e me apaixonei tanto pelo APP que, em menos de 6 meses, não conseguia mais entender como eu desenvolvia layouts no Photoshop antes e passei a ser um grande entusiasta da ferramenta onde, sempre que eu posso, vou me atualizando, aprimorando minhas habilidades, passando meu conhecimento e, claro, tentando "evangelizar" as pessoas para consumirem ela.

Falando dos meus projetos na Guide, eu fiz muita coisa de marketing, como peças de performance, posts de redes sociais, e-mails marketings, gravação e edição de vídeos, além de animações pontuais. Já do lado de UX/UI fiz muitos layouts para divulgação de produtos, sistemas, aplicativos e ações promocionais sempre se baseando em dados de analitics, mapas de calor, entrevistas com usuários para sempre fornecer as informações na ordem e da forma mais acessível e impactante possível.

E também trabalhei na construição de sistemas internos aplicando etapas do duplo diamante de UX para chegar nas melhores soluções de delivery possiveis que atendiam as necessidades de nossos steakholders.

• O que eu fiz no meu período na Guide: Diversas soluções de UX UI para o site institucional, área aberta da Guide, sistemas internos e marketing

Nosso Voto

Um case de estudo da minha especialização em UX que fala muito da minha experiência nessa área.

O projeto Nosso Voto foi o resultado da minha necessidade de aprimorar o lado que eu achava que não tinha conhecimento suficiente no mundo do Design. Esse lado deficiente era justamente a experiência dos usuários, o UX da questão, pois, como vários dos meus cases aqui desse portifólio demonstram, eu acredito que tenho muito mais afinidade e gosto em construir layouts, interfaces, o UI dos projetos e, por isso resolvi me especializar nessa minha deficiência e fiz a especialização em User Experience da TERA.

E não poderia ser a escolha mais acertada da minha vida profissional que, além de suprir minha deficiência nesta área, me abriu portas incríveis para eu entrar de cabeça no mundo do UX UI design e me apaixonar por todos os processos desde o primeiro ponto de um Discovery e até o adeus de um projeto na entrega do Delivery. Ganhei um emprego, inspirações diárias, muito conhecimento na prática e vários amigos que levo pra vida. E tudo isso começou com esse projeto.

Falando do projeto em sí, ele foi um projeto para construção de uma solução para conseguirmos engajar os eleitores brasileiros a irem para as urnas e votarem de forma mais consciente. Para entender qual o direcional de toda essa problemática passamos por um discovery robusto onde utilizamos frameworks como matriz CSD, mapas de concorrentes, mapas de stakeholders, entrevistas quantitativas e qualitativas, mapas de afinidades, personas, entre outros recursos para gerar os insumos necessários para a etapa do delivery. E neste delivery fizemos benchmarks, jornadas do usuário, prototipos em baixa fidelidade para, enfim, chegarmos na entrega do protótipo em alta fidelidade com navegação e micro interações completas (demonstrando uma versão final do produto), além de um plano de retorno financeiro e planejamento futuro do produto.

Foi uma experiência maravilhosa e, como disse no subtítulo fala demais da experiência que adquiri com UX e moldou toda minha carreira de UX até hoje.

• O que eu fiz com meu grupo de estudo: Discovery e delivery do produto (passando por todas as etapas do duplo diamante)

Estúdio Nunes - Arquitetura

Um dos meus cases mais antigos que continua moderno até hoje.

Um dos primeiros sites que eu fiz já seguindo um pouco das características visuais que determinaram o meu estilo visual de construção de layouts hoje em dia (com uma valorização da área nobre do site para divulgações e a tendência em criar sites vitrine como sites one-page).

Foi um projeto desafiador do lado de design, pois precisei entender e estudar um pouco do mundo da arquitetura e também um pouco do mundo dos eventos para poder tentar converter tudo isso em um layout conciso e que faça sentido com a proposta mais arquitetônica e visual que o site carrega. Por isso que o site tem um tom mais sobrio e sério e, com a utilização de pequenos elementos e detalhes presente no logo do cliente, consegui assegurar a indentidade visual do mesmo além de passar esse tom mais sério e robusto que esse site de arquitetura pedia.

Na parte da programação também considero um grande desafio, pois os recursos de navegação, de filtragem de portifólio, toda adaptação responsiva e as micro animações eu fui aprendendo e refinando ao longo da construção do mesmo. E todo esse conhecimento moldou toda a forma que eu desenho meus novos projetos como programo (quando tenho a oportunidade).

• O que eu fiz: 100% do site: UI no Adobe Photoshop e toda a programação front-end

Portifólio Jéssica Torkos

Sim, o portifólio da minha esposa é um case aqui no meu portifólio e eu explico o porque!

Coloquei o portifólio da minha esposa como um dos meus melhores cases não para fazer uma divulgação gratuita dos trabalhos maravilhosos que ela faz (mas quem se interessar fica a dica, ótima profissional de redação/copywritter/ux writter.. Hahahah) mas sim porque é um otimo exemplo para demonstrar um pouco do meu conhecimento na criação de protótipos avançados no Figma.

Eu construi o portifólio dela completamente no Figma passando pelo design, pelo layout e pela prototipagem. Na prototipagem tentei ser o mais detalhista possível e simulei todas as microinterações que o Figma nos dava a possibilidade (hovers de botões, de cards, animações, links externos, links âncoras com animações, transições de paginas, entre outros) gerando um resultado final muito parecido com um site real. E, por isso, a minha esposa usa o próprio protótipo para suas divulgações profissionais.

• O que eu fiz: UI e prototipagem no Figma

Banco BV

Meu trabalho CLT atual onde eu aprendo todo dia sobre como construir um Design System

Coloco o Banco BV como um case meu apesar de ser meu atual emprego para poder explicar um pouco da importância do que eu faço dentro no banco e como o meu trabalho me ajuda a desenvolver profissionalmente no que eu escolhi para minha vida profissional e como eu posso falar que me achei nas minhas escolhas profissionais.

Apesar de eu ter entrado em um contexto de um produto específico, desenvolvendo um sistema de internet banking para os clientes empresariais do BV, eu atuo, desde Fevereiro de 2023, no time de Design System aqui do banco. E essa pode ser entendida como a atuação que eu sempre sonhei na minha vida profissional tendo esses skills tanto de UX, como UI ou até de desenvolvedor Front End, afinal, trabalhar na construção do Design System de uma empresa desde o seu nível mais molecular até a criação de componentes, templates e interfaces faz praticamente uma fusão entre todas as minhas skills em um único lugar, afinal eu penso tanto em UX, UI e programação praticamente ao mesmo tempo para poder entregar os melhores componentes da forma mais fácil de se usar e da forma mais espelhada possível com o que os desenvolvedores forem construir.

Além disso, atuar nesse time e tendo esse escopo de trabalho me fez desenvolver, e muito, minhas habilidades com o Figma e outras ferramentas, e até metodologias, que eu não usava tantos em outras atuações que eu já passei. Foi e está sendo um aprendizado constante pra mim e eu me orgulho muito de fazer parte desse time e ter esse escopo de trabalho.

Por questões de contrato de trabalho e também éticas, eu não posso compartilhar nada do projeto visualmente falando, portanto eu só deixarei o site do BV logo abaixo para poderem ter uma noção de como é a identidade visual do BV e como estamos trabalhando com o Design System do mesmo.

• O que eu fiz: Design System do banco

Cooking for Pets

Como transformar uma planilha de excel em um sistema de controle de pedidos de marmitas para seu pet?

Esse projeto foi muito gostoso de fazer. Primeiro porque o tema que é relacionado a pets sempre me encanta, afinal, para quem me conhece sabe que eu sou apaixonado por pets, principalmente por cachorros, inclusive tenho um vira lata pretão que é o amor da minha vida, o Jack (pra quem quiser conhecer ele é só clicar aqui). Segundo porque o produto do cliente é algo diferente e muito legal focado no mundo pet (uma empresa que cria marmitas personalizadas para o seu pet tanto por escolha dos tutores como por orientação de nutricionistas). E terceiro por causa do grande desafio que foi o projeto de transformar todo o controle de pedidos do cliente, que era feito em uma planilha de excel, para um sistema que englobasse todas as variéveis possíveis relacionadas aos pedidos e que pudesse ser algo simples, fácil e rápido de usar.

Para isso foram feitas conversas com o cliente para entender todas as nuances das informações da planilha de controles que eles usavam. Depois foram feitas conversas com o time de tecnologia que iria atuar para tirar isso do papel para entender se tivesse qualquer limitação tecnológica no meio do caminho. A partir dai comecei o desenho de UI de todo projeto baseado nesses insumos levantados e em toda a minha experiência em construção de sistemas que eu já tenho devido a alguns outros projetos que, inclusive constam nesse portifólio.

• O que eu fiz: UI e prototipagem no Figma

Sky Jump - Paraquedismo

Outro projeto de paraquedismo que, nas entrelinhas, estão quase me convencendo a pular de paraquedas

Como case da Airpress, esse projeto também é voltado a paraquedismo, porém esse é um site voltado à venda de divulgação de saltos de paraquedas, então a abordagem de construção, tando de conceito como visual, foi voltada a na entrega de algo que pudesse chamar mais pessoas interessadas em pular de paraquedas. A premissa do site era mostrar todos os tipos de salto que a empresa possuia, sua infraestrutura, segurança, depoimentos, enfim tudo que fosse possível fazer para deixar o cliente que navegasse pelo site se sentindo confortável e até com menos medo de pular de paraquedas.

Para isso vi o site anterior da empresa, vi o que dava certo, o que não dava, pesquisei alguns concorrentes, entendi a necessidade geral do cliente, coletei as informações que seriam necessárias para as vendas e, a partir dessa coleta de tantas informações, pude entender o projeto da forma ideal para que fosse construida toda a interface gráfica do mesmo, sempre mirando no objetivo de ser uma vitrine de vendas do cliente.

Além de tudo isso percebe-se que esse projeto tem a minha identidade, ou seja, a forma que eu estou criando, estruturando e desenhando meus projetos são unicos de cada cliente, porém você começa a identificar semelhanças estruturais em meus projetos (como organização de iformações, conceitos mais fluidos, entre outros conceitos).

Infelizmente por reestruturação interna da empresa o projeto foi cancelado pelo cliente e ele ficou somente na área de conceito.

• O que eu fiz: UI e prototipagem no Figma

Airpress - Paraquedismo

Um projeto mais simples mas com um tema completamente diferente do que eu estou acostumado

Eu tenho uma vontade grande de pular de paraquedas mas eu tenho o mesmo tamanho de medo de fazer isso. E não é que esse veio esse projeto de um blog de paraquedismo ou para tirar um pouco do medo ou para ficar com mais medo, ainda não sei ao certo.

De qualquer forma esse foi um projeto muito legal por causa de um tema que eu já curtia, mas foi um projeto mais simples onde o objetivo era reformular visualmente o blog desse cliente, afinal era um blog de noticias de paraquedismo e precisava de uma reformulação visual para poder atrair mais leitores e deixar um ambiente mais agradável para a leitura das matérias junto a um foco legal em publicidade ou divulgações diversas.

Para essse projeto o cliente forneceu um protótipo em baixa fidelidade para seguirmos com o UI, e nesse protótipo já vinha detalhado todas as interfaces que precisei desenhar, facilitando o entendimento e, até, a agilidade na construção dos desenhos gerando, como resultado final, um blog simples prático e direto de acordo com a necessidade do cliente.

Além de tudo isso percebe-se que esse projeto tem a minha identidade, ou seja, a forma que eu estou criando, estruturando e desenhando meus projetos são unicos de cada cliente, porém você começa a identificar semelhanças estruturais em meus projetos (como organização de iformações, conceitos mais fluidos, entre outros conceitos).

• O que eu fiz: UI e prototipagem no Figma

SJPR

Um outro case internacional que me encantou por conhecer um pouco dos padrões e costumes ingleses

Esse projeto é um projeto que tenho muito orgulho de estar trabalhando (ainda está em desenvolvimento), pois é um projeto onde estou construindo toda a experiência de interface de um sistema completo e robusto de contabilidade para os residentes do Reino Unido. O cliente é o dono de um dos mais prestigiados escritórios de contabilidade de lá, com mais de 4000 clientes só na Inglaterra, além de atuar em Portugal e em Dubai, e está investindo na criação de um sistema próprio de gerenciamento completo desses serviços de contabilidade, tanto do lado do cliente, como do lado do escritório de contabilidade, para poder fugir das amarras de sistemas de terceiros e ter uma maior autonomia e, até, economia em médio ou longo prazo.

Minha função neste projeto está sendo desenhar toda a UI do sistema pensando na melhor e mais simplificada usabilidade para quem for trabalhar com esse sistema no dia a dia. E essa construção está sendo sempre baseada em outros sistemas de terceiros nas questões de features, produtos, etc. Além disso o desenho da UI está sendo feito tanto na web no formato desktop como em formato de um APP onde os dois mundos estão ao máximo espelhados para que tanto os usuários de um smartphone possa ter a experiência mais parecida possível de um usuário que está usando um dispositivo desktop. Para que essas visões se tornem realide, estou trabalhando com outro designer onde nos dividimos na criação dessas UI e eu estou cuindando mais das interfaces desktop e o meu parceiro das interfaces APP, porém sempre trocando conhecimentos e um ajudando o outro nesse processo.

Além de tudo isso estamos criando toda uma estrutura de handoff para tentar passar, da forma mais simples e descomplicada possível, as interfaces e as regras de negócios para que os programadores, que são indianos, possam entender e fazer a mágica deles para que o sistema possa funcionar.

O sistema ainda está em fase de desenho e prototipação e, portanto não temos ainda algo muito concreto fora dos desenhos das interfaces.

• O que eu fiz: UI e prototipagem no Figma

Mazzei Contabilidade

Quando uma cliente gosta do seu trabalho, ela volta a fazer um trabalho com você novamente

Esse projeto é um projeto que eu tenho muito carinho, pois o Grupo Mazzei é um cliente antigo já (por volta de 2016 eu construi o site deste cliente para dar uma modernizada no que eles tinham anteriormente e o cliente sempre gostou muito do serviço que, agora 8 anos depois, veio falar comigo para podermos modernizar o site e, também, a marca desse escritório de contabilidade. E esse desafio foi muito legal pois a minha missão foi modernizar um site, uma marca, que eu mesmo já tinha criado e, portanto, pude entender como minha percepção visual, minha experiência com interfaces, minha experiência maior como UX UI evoluiu e se modernizou e como o mercado visual também mudou bastante suas características.

Para a modernização da marca, procurei entender um pouco alguns concorrentes, algumas referências de como as marcas são construídas. Fiz pesquisas na mesma área e em outras áreas que fizessem sentido. Além disso fiz alguns rascunhos para poder ter algo concreto do que eu estava formulando na minha cabeça e, depois de algumas aprovações do cliente, a marca foi aprovada e atualizada.

Além da marca eu fiz algumas diversificações da mesma, como cartões de visita virtuais, assinaturas de e-mail, papel timbrado, brandbook e algumas outras peças simples que foram surgindo no meio do caminho.

Na questão do site eu tentei dar um ar mais elegante que a marca pedia, abusando de fotos mais aspiracionais, fontes mais finas e elegantes e a utilização de tons de azul um pouco mais escuro do que tinhamos na marca e site antigos.

Além de tudo isso percebe-se que esse projeto tem a minha identidade, ou seja, a forma que eu estou criando, estruturando e desenhando meus projetos são unicos de cada cliente, porém você começa a identificar semelhanças estruturais em meus projetos (como organização de iformações, conceitos mais fluidos, entre outros conceitos).

• O que eu fiz: UI e prototipagem no Figma, branding e design gráfico

Jonas Jr - Protótipo de portifólio em flash

2009 (somente conceito)

Antes de ter algum portifólio criado 100% por mim (sem utilizar sites como Behance ou Deviant Art na época), eu planejei apostar em um site no nosso saudoso Flash, afinal estava no auge dos sites em flash, com suas animações e layouts mais mirabolantes e, como eu gostava muito de mexer com isso, resolvi começar o meu primeiro portifólio no Flash. Montei o layout e logo em seguida comecei a "tentar" fazer ele funcionar com todas as animações que ele tinha direito. Infelizmente já não tenho mais o modelo animado do mesmo e, portanto disponibilizo aqui somente o meu layout para mostrar um pouco da minha mentalidade da época na construição de layouts e como isso foi mudando ao longo da minha carreira profissional.

• Design de UI: Flash

Jonas Jr - Portifólio Digital

De 2009 à 2011

Este foi o meu primeiro portifólio e eu tenho um grande carinho por ele até hoje. Era basicamente uma landing-page super simples que eu fiz para ter um lugar onde eu pudesse direcionar as pessoas interessadas no meu trabalho e no meu currículo. E, desde essa época eu usava meu portifólio para praticar meu "lado programador da força", ou seja, eu usava ele pra treinar meus conhecimentos em front-end por mais simples que fossem nessa época. De forma resumida mostrava meu lado ilustrador, meu lado web designer e meu lado front-end de forma simples e direta. Confiram como ele era clicando no botão abaixo.

• Design de UI: Photoshop
• Codigo: HTML e CSS

JR Design

De 2012 à 2015

Este portifólio é a minha "obra prima", acredito que é, de todas as minhas aventuras na construção de um portifólio 100% autoral (desde o design até a programação), o meu maior orgulho. E são diversos os fatores que me fazem ter orgulho desse portifólio. Foi o primeiro portifólio completo que eu coloquei no ar, com todos os melhores trabalhos que eu fazia na época no marketing, em web design, como ilustrador. Tem um layout muito bonito e bem resolvido que conseguiria chamar atenção até hoje mais de 10 anos depois da sua publicação. A parte da programação foi grande desafio pra mim e conseguiu mostrar o tamanho da minha evolução nesse tema desde o começo da minha carreira profissional. Em suma foi a minha maior e melhor demonstração da minha evolução como um profissional de Design e também como um profissional de programação Front-End. Cliquem no botão abaixo e me falem o que vocês acharam.

• Design de UI: Photoshop
• Codigo: HTML, CSS, Java Script e Jquery

Jonas Jr Design

De 2015 à 2022

Já este portifólio eu confesso que seria algo transitório para uma outra reformulação completa que eu iria publicar mas que, pela minha demora em tomar vergonha na cara e publicar essa reformulação, acabou ficando praticamente 7 anos no ar como meu "portifólio oficial" (me desculpem, mudanças de rotas na minha carreira profissional me levaram a esse longo tempo). Ele basicamente tem a mesma função do meu primeiro portifólio publicado em 2009 que é ter um lugar onde eu pudesse direcionar as pessoas interessadas no meu trabalho e no meu currículo, porém com a minha evolução, tanto de design como de Front-End, esse portifólio também demostra nessas duas vertentes a minha evolução em design e em programação e, também, marca a maior mudança da minha marca que eu sigo como a minha oficial até hoje (que é o meu logo representando o meu visual: um cara careca de óculos e barba). O que acharam?

• Design de UI: Photoshop
• Codigo: HTML, CSS, Java Script e Jquery