Guia de Estilo
Utilizei a logo da organização como base somada à própria bandeira não-binária, a qual representa a comunidade, com o intuito de definir as cores e as fontes do site. Desse modo, a identidade do movimento social continua consistente.
Problemas enfrentados
As pessoas que fazem parte da não-binariedade passam por diversos problemas que derivam do binarismo de gênero, um pensamento errôneo de que existe apenas dois gêneros, feminino e masculino, além disso já ser naturalizado pela sociedade. Dessa forma, é possível citar algumas questões difíceis, por exemplo:
- Exclusão social
- Escassez de visibilidade e de representatividade
- Ausência de direitos acessados e protegidos
Com isso, o Coletive Não-Binárie da Paraíba deseja avançar nas causas não-binárias estatualmente, como mapear não-bináries paraibanes, conscientizar a população acerca das dificuldades enfrentadas pela comunidade e promover a conquista e a proteção de direitos.
A divulgação do coletive para a população é um fator fundamental para ajudar o movimento não-binário, porém a diretoria da organização passa por um desafio de conseguir obter recursos financeiros para produzir materiais de comunicação ao público, como banners, panfletos e cartazes, os quais também são mais trabalhosos de serem disseminados pelos lugares presencialmente.
Público-Alvo
- Comunidade não-binária
- Residentes da Paraíba
Solução
Necessitei construir um website em forma de landing page, seguindo o conceito de Mobile-First, que centralizasse tudo sobre o Coletive Não-Binárie da Paraíba em um único espaço virtual com a finalidade de facilitar o compartilhamento e a absorção de informações sobre o movimento social, como seus objetivos e atividades, e que contenha um botão principal de redirecionamento para o formulário de mapeamento da comunidade.
Cores
Principais
- #713CA6Roxa escura
- #6A4EA6Roxa clara
- #F2E530Amarela escura
- #ECE35AAmarela clara
- #F2C029Laranja
Neutras
- #040008Preta
- #242325Cinza
- #FFFFFDBranca
- #FFFEF6Branca amarelada
Tipografia
Geometos Rounded
Títulos / Frases especiaisNunito
Parágrafos / Links / Instruções
Desktop
H1
36px / 60pxBoldH2
32px / AutoBoldH3
28px / AutoBoldP / A
24px / 40pxRegular / BoldCaption / A
20px / AutoRegular / BoldSpan
18px / AutoRegular
Mobile
H1
32px / 45pxBoldH2
28px / AutoBoldH3
24px / AutoBoldP / A
20px / 35pxRegular / BoldCaption / A
16px / AutoRegular / BoldSpan
16px / AutoRegular
Prototipação de Tela
Tecnologias Utilizadas
Como o site consiste em uma Landing Page simples e informativa de apenas uma página com algumas animações e funcionalidades essenciais, bastou somente utilizar a tríade básica das linguagens HTML5, CSS3 e Javascript.
Funcionalidades
Menu de navegação abrível e fechável para mobile
Detecção e adaptação de tema de cores preferencial da pessoa usuária
Opções de escolher tema de cores entre escuro e claro
Botão, que aparace no final da página, de voltar ao topo
Scroll horizontal, nos carrosséis de imagem, arrastável através do mouse
Tela de carregamento inicial
Demonstração de Uso
Impacto
- Intuitividade em apresentar informações
- Instigação em chamar o público-alvo para ser mapeado
- Otimização de comunicação e de mobilização
- Credibilidade e profissionalismo
- Alcance maior de conscientização
- Agilidade para atualização de informações
