Meu site, passo-a-passo-#8 — Criando um protótipo com o Axure RP
Com um protótipo em mãos, fica bem mais fácil de visualizar, corrigir, ou confirmar a sua ideia.
Em casa, após voltar de um projeto externo, vou poder prosseguir com a criação da minha página pessoal. Voltarei a cuidar de onde parei, a parte de prototipação.
Hoje, há várias ferramentas para prototipação de sites; é bom que você conheça um pouco de cada uma delas, para saber qual se adequa melhor às sua necessidade. Existe um fluxograma detalhado neste post na Medium, explicando o resultado esperado dos sistemas de desenhos de sites mais importantes do mercado.
Eu escolhi o Axure RP, já que gostei muito da forma de trabalho dela e pelo controle de simulações que ela me permite criar. É uma ferramenta poderosa, mas precisa de um tempo para aprender a usar.
Quando eu comecei a criar o protótipo, me foquei em 3 pontos:
- O site deveria ser responsivo. Quero pensar no site, sendo utilizando no maior número possível de dispositivos.
- Deveria representar o meu gosto pessoal por desenvolvimento e por artes visuais.
- Teria que ser simples, mas com uma proposta diferente de outros portfólios.
O próprio Axure ajuda na criação de sites responsivos. Ao criar um projeto, eu venho até as propriedades da página e habilito a opção abaixo:
Após configurar o layout responsivo, eu começo com um layout mínimo, de 300px de largura. Penso em várias idéias, até eu chegar neste desenho:
Basicamente, a página inicial consiste num título grande, com fonte Fjalla One (link para a fonte) para os títulos, e Ubuntu, para os textos comuns. Os caracteres em verde serão ‘comentários’ de diversas linguagens de programação como se o meu nome estivesse em um comentário. Cada vez que a página for carregada, o tipo de comentário será carregado. (apóstrofo, //, #, etc.).
A navegação da página começará com estes 4 links principais. A home irá se movimentar, quando eu pressionar a direção respectiva (para cima, a home irá para cima, por exemplo). Haverá uma animação, quando eu passar o mouse em cima da seta, ela deverá se mover na direção que estiver apontando.
E, estes triângulos pequenos que estão no fundo, eles farão parte do background da home. Serão imagens SVG, que girarão e mudarão de cor e posição, aleatoriamente.
Agora, eu penso em como a tela se comportará quando a resolução da tela for maior. Eu seleciono a opção (nas propriedades, explicada no 1º print) para poder criar uma nova sub-página, agora, com uma resolução maior. O Axure manterá todos os objetos que criei na tela inicial, permitindo que eu apenas reorganize os elementos.
A partir daqui, eu vou criar um novo elemento, um parágrafo, indicando informações sobre o licenciamento da página. Eu só resolvi colocar este texto em resolução maior, para não acumular o conteúdo da home quando visualizada em dispositivos mobile.
A quantidade de ‘triângulos’, presente na animação SVG, também será diferenciada, para cada resolução.
Novamente, eu crio uma nova sub-página, agora, com a resolução máquina da ágina. Eu adiciono novas imagens e ajusto o tamanho e posição dos elementos.
Como uma dica, de quem já trabalhou com Axure, tenha o costume de trabalhar com Grupos. Quando a página começar a crescer, vai ficar muito mais fácil manipular grupos de elementos, ao invés de trabalhar com cada elemento, individualmente. Veja neste print abaixo, como criar grupos:
Enfim, toda vez que eu queira visualizar como trabalho, eu pressiono F5, para abrir a página de testes, onde posso ver a página em diferentes resoluções.
Vocês podem conferir abaixo o protótipo da home, com diversas resoluções. Como já deu para ter uma ideia muito próxima de um site de verdade, vou começar a codificar dentro deste desenho.
No próximo texto, os primeiros passos para codificação da home.
