Portfolio — Umberto Junior

“Portanto, quer vocês comam, bebam ou façam qualquer outra coisa, façam tudo para a glória de Deus.” 1 Coríntios 10:31

Muito Prazer

É com grande satisfação que apresento meu site portfólio, uma curadoria dos meus principais trabalhos como Designer Gráfico profissional há 16 anos, Web Designer há 11 anos e Desenvolvedor Front-End desde 2021. Autodidata em inglês, tecnologias web HTML, CSS e Javascript, sou um observador e curioso por assuntos relacionados a mente humana como Programação Neurolinguística e Comunicação Não Verbal.

Toda essa curiosidade me levou a cursar a faculdade de Design Gráfico em 2009, pois o desejo de aprender as técnicas da linguagem visual seriam fundamentais para me proporcionar a liberdade de criação dentro dos padrões que eu tanto buscava. Esse conhecimento teórico e prático abriu portas em agências de marketing digital como iZap, Criasol e Digital Pixel.

Transformar teoria e criatividade usando softwares de edição como Photoshop, InDesign, Illustrator ajudam a tornar realidade o mundo de fantasia das formas geométricas e cores, sem deixar de lado o princípio básico do Design: toda criação serve a um propósito, um desígnio.

Trabalhos

Separei uma pequena parte das principais obras que realizei ao longo de 14 anos como profissional de Design, atuando sempre com muita responsabilidade e compromisso na tradução de conceitos visuais em artes gráficas.

Design Gráfico

Desenvolvimento de identidades visuais é um trabalho robusto que engloba várias disciplinas e estudos sobre as dificuldades de comunicação de uma marca. O designer precisa obter as respostas necessárias de seus clientes, e para isso, fazer as perguntas certas é extremamente importante para o sucesso do projeto.

Identidade Visual Hyve Artifact

Uma marca de atitude criada por Rafael Resende, ex-aluno da Faculdade de Design Gráfico e atual C.E.O da confecção, a Hyve Artifact Company tem seu segmento de roupas voltado ao público masculino jovem e adulto, antenados na cultura urbana, música e esportes radicais.

Atuação

Projeto em parceria com meu grande amigo de faculdade Jonathan Cruz. Elaboração da identidade visual e criação do conceito da marca. Regras para aplicação e uso em peças de comunicação.

Umberto Junior: projeto editorial e diagramação, incluindo a escolha tipográfica do manual de marca, sistema de grid, criação em Photoshop dos mockups de aplicação em papelaria e produção de texto.

Jonathan Cruz: criador intelectual da logo e ilustrador do mascote Killer Bee. Escolheu a fonte College para a marca.

Ferramentas: Photoshop, Indesign e Illustrator

Abrir PDF

Identidade Visual Jovens Adventistas

A proposta da marca para o grupo de jovens da Igreja Adventista do Sétimo Dia do bairro Botafogo foi elaborar um símbolo que transmitisse a essência contida nas palavras de Jesus Cristo para o jovem cristão que são união, santidade e força.

Todo o processo de criação foi inspirado pelo Espírito de Deus dentro do livro de Daniel, um jovem que decidiu firmemente no coração não se contaminar com os manjares do rei Nabucodonossor.

Atuação

Criação e conceito da marca, projeto editorial e diagramação da proposta, produção de texto, escolha tipográfica e imagens ilustrativas.

Ferramentas: Photoshop, Indesign e Illustrator

Abrir PDF

Photoshop

Meu primeiro contato foi em 2007 com o Adobe Photoshop CS e o desejo era recriar as manipulações dos anúncios de revistas que me impressionavam. André Sugai do blog Tutoriais Photoshop trazia os melhores posts da época em português, despertando ainda mais a curiosidade por essa ferramenta.

Foto composição Cristo Redentor entre nuvens e coberto pela bandeira do Brasil

Displacement Map - Cristo Redentor

O conceito é representar o Cristo Redentor entre nuvens, envolto na bandeira do Brasil para abraçar os Jogos Olímpicos Rio 2016.

O filtro Displacement Map analisou luz, sombra e contornos do Cristo para aplicar ao arquivo que recebe a distorção, no caso, a bandeira brasileira.

O resultado é uma mistura perfeita das duas imagens, demonstrando o poder dos filtros no Photoshop.

Foto composição garrafa Heineken com splash de água em fundo escuro

Blend Modes - Heineken

Inspirado em um tutorial sobre Blend Modes, apresentando uma garrafa de cerveja Heineken ao centro para transmitir poder e força, tornando-se o elemento mais importante do cenário.

As gotas d'água são imagens fotografada em fundo escuro, assim o Blend Mode no modo Screen retira o que é escuro, deixando apenas o que é claro na imagem, pois seria quase impossível selecionar essa complexidade de detalhes.

Web Design

Função empenhada pelo designer que possui conhecimentos dos fundamentos da linguagem visual, habilidades na elaboração de briefings, criação da parte visual do site e conhecimentos das tecnologias HTML, CSS e Javascript.

See the Pen Responsive HFG Ulm Journal with CSS Grid by Umberto Junior (@umbertojunior) on CodePen.

Responsive HFG Ulm Journal with CSS Grid

A ideia foi recriar com CSS Grid a capa da edição #1 do Jornal da Escola de Ulm de Design, fundada pelos ex-professores da Bauhaus Max Bill e Tomás Maldonado.

Esse trabalho me rendeu visibilidade na newsletter de Rachel Andrew, web designer, escritora técnica do Google para web.dev e Chrome for Developers.

Menções nos sites Free Frontend figurando entre os 70 melhores layouts de revistas em CSS, no Dev Sanp como um dos 65 melhores layouts em CSS e na página Web Art Developers

Atuação

Tradução de uma página impressa para versões web responsivas em mobile, tablet e desktop.

Ferramentas: HTML, CSS Grid

Ver no Codepen

See the Pen Responsive Header Design by Umberto Junior (@umbertojunior) on CodePen.

Responsive Header Design

Implementação de um header em HTML e CSS em parceria com o designer Mubin ul haq Vhora. Mublin elaborou todo conceito e design no Sketch, Photoshop e Adobe XD.

A minha parte foi prototipar em código web para visualizar o comportamento do design. O protótipo possui mais de 4120 visualizações e 79 curtidas no Codepen.

Atuação

Código web, responsividade para dispositivos mobile, tablet e desktop.

Ferramentas: HTML, CSS Flexbox, Responsividade com Media Queries

Ver no Codepen

Desenvolvimento Front-End

Uma evolução natural de carreira entre Web Design e Desenvolvimento Front-End. Aprender uma linguagem de programação como Javascript e conceitos básicos de Algoritmos e Estrutura de Dados me deram ainda mais liberdade para criar designs de sites.

Modernist Architecture

Meu primeiro trabalho Front-End desde o conceito, design e programação. O site é sobre arquitetura modernista, com foco na origem do estilo arquitetônico, suas raízes e legado nos dias atuais.

O design segue a estrutura modernista baseada em grids e módulos, limpeza visual e ausência de ornamentos desnecessários que distraem a atenção.

Atuação

Conceito, layout e escolha das imagens. Responsividade para adaptar-se a dispositivos móveis, tablet e desktop.

Ferramentas: HTML, CSS com Flexbox, Grid, Mask. Programação em Javascript.

Abrir site em nova aba

Contato

Muito obrigado por chegar até aqui, agradeço demais por visitar meu portfólio e disponibilizar tempo lendo o conteúdo. Mas isso não precisa ser um adeus, podemos continuar conversando! Entre em contato via Whatsapp, essa pode ser a chance de iniciarmos uma parceria de sucesso e conquistas.

Conversar via WhatsApp