Sorell para Framer
Portfólio editorial escuro
Temas WordPress, feitos do zero.
Sou Viviane. Faço temas WordPress do zero, do Figma ao PHP. O Sorell é o mais recente: doze demos, blocos nativos do Gutenberg e 95 de desempenho no PageSpeed.
Sobre
Sobre mim
Estudei Análise e Desenvolvimento de Sistemas e passei um ano no suporte de sistemas. No caminho comecei a desenhar interfaces. No WordPress eu consigo fazer as duas coisas: desenho o tema no Figma e depois escrevo em PHP.
- Formação
- Análise e Desenvolvimento de SistemasUniversidade Estácio de Sá · 2023–2025
- Experiência
- Estágio em Suporte de SistemasInforplace Informática · 2024–2025
- Curso
- Bootcamp Web Full StackÍmã Tech · 2023
Projeto em destaque
Sorell.
Um tema WordPress de portfólio para criativos, estúdios, fotógrafos, artistas e arquitetos. Doze demos sobre a mesma base, desenhado e programado do zero, sem page builder.
Design
Desenhado primeiro no Figma: grid, escala tipográfica e componentes, depois as doze homes de demo.
12 demos
Editorial Studio, Agency, Film Director, Illustrator e mais oito, cada uma com layout de home, tipografia e cores próprios.
Gutenberg
Blocos nativos e patterns de página inteira. As páginas são editadas no editor do WordPress, sem page builder.
Customizer
Cores e textos do cabeçalho e rodapé são definidos no Customizer. Cada demo foi testada no celular, tablet e desktop.
Detalhes do projeto
- Função
- Design de interface e desenvolvimento WordPress
- Feito com
- WordPress, PHP, blocos e patterns do Gutenberg, Customizer, CSS, JavaScript
- Inclui
- 12 homes de demo, patterns de blocos e um guia de documentação em HTML
- PageSpeed
- 95 desempenho, 100 acessibilidade, 100 práticas recomendadas, 92 SEO (demo 1 no celular, out. 2026)
- Ano
- 2026
Processo
Como eu crio um tema.
Foi assim que construí o Sorell, passo a passo.
- 01
Desenho no Figma
Grid, escala tipográfica, cores e componentes, com a versão de celular desenhada ao lado da de desktop.
- 02
Decido o que é editável
Antes de escrever os templates, listo o que o dono do site vai precisar mudar: textos, cores, menus e seções das páginas.
- 03
Escrevo os templates
Templates em PHP seguindo a hierarquia de templates do WordPress, com partes compartilhadas para cabeçalho, rodapé e cards.
- 04
Crio blocos e patterns
As seções viram blocos do Gutenberg e patterns de página inteira, então as páginas são montadas no editor e não no código.
- 05
Testo e documento
Testo cada demo no celular, tablet e desktop, e escrevo a documentação com um print de cada tela do painel.
Por que o design importa
O design vem primeiro.
Aprendi UI/UX por conta própria, estudando referências e redesenhando interfaces. Cada demo do Sorell foi desenhada no Figma antes de eu escrever qualquer PHP, e meus templates do Framer recebem o mesmo cuidado com breakpoints e estilos. Estes são frames desses arquivos.
Sorell no Figma, cinco das demos
Editorial Studio, Agency, Cinematic Artist, Architecture Studio e Creative Developer, cada uma desenhada como home completa antes de eu programar.
Sorell no Figma, mais seis demos
Art Director, Personal Resume, Film Director, Graphic Designer, Object Designer e Product Designer, no mesmo arquivo e no mesmo grid.
Form 01 no Framer
A home do meu template Form 01 montada nos breakpoints Desktop, Tablet e Phone.
Sorell para Framer, breakpoints
O template escuro do Sorell em Desktop, Tablet e Phone, com Projects e Journal configurados como coleções do CMS.
Sorell para Framer, estilos
Os estilos de texto, do Display com 92px ao Body com 17px, mais o estilo de link e as cores nomeadas que sustentam o template inteiro.
Além do WordPress
Templates no Framer Marketplace.
Também crio templates de site para o Framer com o nome Code Prismo. Três deles estão à venda no Framer Marketplace.
3 templates publicados · 2026
Todos os templates da Code Prismo ↗
Contato