# 86: Galeria de fotos - CSS-Tricks

Anonim

Fiquei animado para começar na área da Galeria no site. É uma das áreas que eram particularmente ruins na v9. Não recebe muito tráfego, mas talvez possamos reverter isso. Eu gosto muito e tenho uma quantidade enorme de conteúdo para postar com o tempo.

Começamos trabalhando no Photoshop para que possamos manter nossa mente criativa e fazer alguma exploração visual sem a bagagem de pensar analiticamente com código.

Passamos pelo gráfico do cabeçalho. Parece um pouco engraçado fazer isso, pois já está implementado no site e de uma maneira melhor, mas isso nos ajudará a manter nosso ambiente de design o mais real possível.

Construímos uma barra de navegação para a galeria. Em vez de uma grande nuvem de tags desagradável na parte inferior do layout, como tínhamos antes (e até mesmo isso foi uma melhoria para a categoria confusa e layout de tag do início da v9 dias), fazemos algo diferente. Vamos fazer um menu suspenso no qual você pode clicar para revelar as tags pelas quais você pode navegar, e até mesmo isso é construído em um layout de estilo breadcrumb na barra de navegação. Portanto, ele serve como uma tarefa tripla: título da página, navegação estrutural e navegação suspensa exploratória.

Este design, para mim, é algo que provavelmente não teria feito se não fizesse essas viagens exploratórias de volta ao Photoshop.