Zé Zorzan · v1 :: Behance

Classic inter orange portfolio product designer sans serif swiss Web Design Blog Brazil

Meu nome é Zé Zorzan, sou Product Designer e esta foi a primeira versão de um projeto que uniria pela primeira vez meu blog e meu portfólio.

Dizem que somos os nossos clientes mais difíceis, e essa máxima foi verdade aqui. O projeto não chegou a ir ao ar, por dois motivos. Primeiro, o timing: na época, eu estava muito focado no meu trabalho tradicional e não conseguia me dedicar tanto aos posts ou aos projetos que pretendia publicar. Segundo, quando finalmente tive mais tempo, já não me sentia mais conectado com a direção inicial.

De qualquer forma, foi um projeto divertido que rendeu bastante aprendizado e assets bem bacanas.

[EN]

My name is Zé Zorzan, I'm a Product Designer and this was the first version of a project that would unite my blog and my portfolio for the first time.

People say we are our most challenging customers, and this was true here. The project didn't go live, for two reasons. First, the timing: at the time, I was very focused on my job and couldn't devote so much to the posts or projects I intended to publish. Second, when I finally had more time, I no longer felt connected to the initial direction.

In any case, it was a fun project that yielded a lot of learning and cool assets.

O problema

O principal desafio foi criar um site que funcionasse como um único feed com todo o meu conteúdo. Três editorias formariam o conteúdo: posts do blog, projetos do portfólio e a seção Melhor Ângulo, com guias especiais sobre fotografia em homenagem ao meu primeiro blog.

[EN]

The main challenge was to create a website that worked as a single feed with all my content. Three editorials would make up this: blog posts, portfolio projects, and the Melhor Ângulo section, with special photography guides in honor of my first blog.

A direção visual

A paleta de cores reduzida e a tipografia clássica sem serifa foram escolhidos para dar ênfase às fotos nas miniaturas dos posts do blog. Já as categorias do blog teriam ilustrações divertidas e coloridas, cortesia da talentosa Mariana Salimena.

O cartão de visitas indicaria meu contato profissional e também o contato específico para a seção Melhor Ângulo, que incluiria entrevistas especiais. Versatilidade foi a palavra de ordem.

[EN]

The reduced color palette and classic sans serif typography were chosen to emphasize the photos in the blog post thumbnails. The blog categories would have fun and colorful illustrations, courtesy of the talented Mariana Salimena.

The business card indicates my professional contact and also the specific contact for the Melhor Ângulo section, which would include special interviews. Versatility was the keyword.

A solução

O principal foco do design do site foi a página inicial, que serviu de galeria para o conteúdo. Os posts aparecem em miniaturas, empilhados. À primeira vista, nenhuma diferença. Mas, passando o cursor pelos posts, o estado hover indica a cor da seção, o título do post e sua categoria.

Enquanto os posts do blog ganharam fundo branco, no portfólio o fundo é preto e a página tem um layout mais dinâmico, trazendo um ar mais profissional e de importância. A seção Melhor Ângulo, diferente das outras, é muito colorida! O fundo é laranja vibrante, fazendo referência à identidade do antigo blog.

[EN]

The main focus of the design was the homepage, which served as a gallery for the content. Posts appear in thumbnails, stacked. At first glance, no difference. But, passing the cursor over the posts, the hover state indicates the section color, the post title and its category.

While the blog posts had a white background, in the portfolio the background is black and the page has a more dynamic layout, bringing a more professional and important look. The Melhor Ângulo section, unlike the others, is very colorful! The background is vibrant orange, referencing the identity of the old blog.