![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 7.152 4.992 C 5.279 6.06 3.112 6.67 0.802 6.67 C 0.536 6.67 0.271 6.662 0.009 6.646 M 7.152 4.992 C 7.635 5.915 8.067 6.87 8.444 7.852 M 7.152 4.992 C 6.328 3.418 5.356 1.934 4.253 0.559 M 7.152 4.992 C 8.737 4.087 10.111 2.854 11.181 1.385 M 8.444 7.852 C 9.64 7.484 10.91 7.285 12.226 7.285 C 12.824 7.285 13.412 7.326 13.988 7.405 M 8.444 7.852 C 9.118 9.61 9.617 11.455 9.917 13.365 M 8.444 7.852 C 5.958 8.618 3.794 10.118 2.206 12.101 M 4.253 0.559 C 5.097 0.199 6.025 0 7 0 C 8.567 0 10.015 0.515 11.181 1.385 M 4.253 0.559 C 1.855 1.583 0.145 3.907 0.009 6.646 M 11.181 1.385 C 12.892 2.662 14 4.701 14 7 C 14 7.136 13.996 7.271 13.988 7.405 M 13.988 7.405 C 13.837 10.056 12.21 12.312 9.917 13.365 M 9.917 13.365 C 9.029 13.773 8.041 14 7 14 C 5.145 14 3.458 13.278 2.206 12.101 M 2.206 12.101 C 0.848 10.824 0 9.011 0 7 C 0 6.881 0.003 6.763 0.009 6.646" fill="transparent" height="14.000000262580732px" id="ySVI012y9" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="rgb(71, 71, 71)" transform="translate(3.176 3.176)" width="14.000000262080107px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 15.843 3.056 L 11.436 5.904 C 10.191 6.709 9.568 7.112 8.899 7.268 C 8.307 7.407 7.693 7.407 7.101 7.268 C 6.432 7.112 5.809 6.709 4.564 5.904 L 0.157 3.056 M 15.843 3.056 C 16 3.837 16 4.88 16 6.5 C 16 8.775 16 9.913 15.564 10.782 C 15.181 11.546 14.569 12.168 13.816 12.557 C 12.96 13 11.84 13 9.6 13 L 6.4 13 C 4.16 13 3.04 13 2.184 12.557 C 1.431 12.168 0.819 11.546 0.436 10.782 C 0 9.913 0 8.775 0 6.5 C 0 4.88 0 3.837 0.157 3.056 M 15.843 3.056 C 15.779 2.741 15.69 2.468 15.564 2.218 C 15.181 1.454 14.569 0.832 13.816 0.443 C 12.96 0 11.84 0 9.6 0 L 6.4 0 C 4.16 0 3.04 0 2.184 0.443 C 1.431 0.832 0.819 1.454 0.436 2.218 C 0.31 2.468 0.221 2.741 0.157 3.056" fill="transparent" height="13px" id="OAE5Xj7jz" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="rgb(71, 71, 71)" transform="translate(2.053 3.804)" width="16px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 10.889 10.889 L 10.889 8.167 C 10.889 7.093 10.018 6.222 8.944 6.222 C 7.871 6.222 7 7.093 7 8.167 M 7 8.167 L 7 10.889 M 7 8.167 L 7 5.833 M 3.889 5.833 L 3.889 10.889 M 3.889 3.111 L 3.889 3.119 M 6.222 14 L 7.778 14 C 9.956 14 11.045 14 11.877 13.576 C 12.608 13.203 13.203 12.608 13.576 11.877 C 14 11.045 14 9.956 14 7.778 L 14 6.222 C 14 4.044 14 2.955 13.576 2.123 C 13.203 1.392 12.608 0.797 11.877 0.424 C 11.045 0 9.956 0 7.778 0 L 6.222 0 C 4.044 0 2.955 0 2.123 0.424 C 1.392 0.797 0.797 1.392 0.424 2.123 C 0 2.955 0 4.044 0 6.222 L 0 7.778 C 0 9.956 0 11.045 0.424 11.877 C 0.797 12.608 1.392 13.203 2.123 13.576 C 2.955 14 4.044 14 6.222 14 Z" fill="transparent" height="14px" id="P0HlDIHLa" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="rgb(71, 71, 71)" transform="translate(3 3)" width="14px"/></svg>)
(001)
contexto geral
O Colégio Loyola nos trouxe um desafio claro: o site existente não refletia mais a escola que ele representa. Com mais de 80 anos de história, o Loyola havia evoluído muito, novos espaços, ambientes modernos e diferenciais que simplesmente não apareciam online.
A escola precisava de um website que comunicasse tudo isso com clareza e consistência: da Educação Infantil ao Ensino Médio, passando pelos ambientes de aprendizagem, pela cultura, pelo esporte e pelos valores que guiam a instituição há décadas. Do UX ao desenvolvimento, entregamos um site completo, do zero.
(002)
processo
O processo que aplico
em cada projeto
Cada entrega segue um processo estruturado, do entendimento profundo do contexto até a entrega final. Não existe atalho para resultado de alto nível.
01
Imersão e descoberta
01
02
Arquitetura e wireframe
02
03
Direção visual e desenvolvimento
03
(003)
wireframes
(004)
resultados
Com o planejamento validado, chegou a hora de aplicar. Cada tela foi desenvolvida com atenção à identidade visual, hierarquia de informação e consistência entre todas as páginas.
Da home às páginas internas, do blog aos ambientes da escola cada seção foi desenvolvida com o mesmo nível de cuidado e coerência visual. O que foi planejado no wireframe ganhou forma, cor e vida sem perder nada pelo caminho.
(005)
aplicações
Mais do que telas entregues, o Loyola recebeu um sistema completo e estruturado para escalar, com segurança.
Todo o projeto foi desenvolvido com consistência em cada camada. Componentes organizados, tokens aplicados e documentação detalhada formam uma base técnica robusta preparada para escalar sem retrabalho e sem perder a identidade do que foi entregue.
(007)
Outros projetos
