1
1
Meu primeiro protótipo no Axure1
Etapa inicial
Crie um novo arquivo
A. Crie um botão azul
1. Clique e arraste o botão forma (Button Shape) do painel Widgets (componentes) para a página no painel Wireframe.
2. Edite o texto para “Próxima página”. Com o botão selecionado, digite “Próxima página” para editar o texto do widget.
3. Mude a cor para azul. Selecione a cor azul usando o botão de preenchimento, na barra de ferramentas.
1 Traduzido pela Profa. Daniela Carvalho Monteiro Ferreira, para a disciplina de Web Design, nos cursos de Publicidade e Relações Públicas E-‐mail: [email protected]. Out 2013. Blog: http://colecaoaprender.blogspot.com.br
2
2
B. Adicione um link
1. Clique no “Quick Link”. Com o botão selecionado, clique na opção “Quick Link” (link rápido) do painel de propriedades do widget (componente).
2. Selecione a página 1. Na janela “Link Properties”, selecione Page 1.
3. Clique OK. Clique no botão Ok.
3
3
C. Gere o protótipo
1. Clique no botão “Prototype”. Clique no botão “Prototype” na barra de ferramentas para chamar a tela de gerar protótipo (Generate Prototype).
2. Clique em gerar protótipo. Clique no botão “Generate”.
3. Crie uma pasta. Quando aparecer a janela de alerta, clique no botão Yes (Sim). O protótipo será aberto no navegador padrão. Clique no botão para acessar a Nova Página (Page 1).
Referências: AXURE. Axure RP Training. Disponível em <http://www.axure.com/learn>. Acesso em Out 2013. AXURE. My First Prototype. Disponível em <http://d3g1p8ush40lh4.cloudfront.net/Tutorials/AxureCoreTraining.pdf>. Acesso em Out 2013.
4
4
Construindo um framework (arcabouço / estrutura)
Crie um novo arquivo
A. Organização das páginas no mapa do site (painel Sitemap)
1. Arraste a Page 3 para cima. Clique e arraste a Page 3 um pouco acima e à direita da Page 2.
2. Clique com o botão direito para deletar a Page 2. Selecione a Page 2 no painel Sitemap e selecione Delete no menu contextual.
3. Adicione uma nova página (New Page). Selecione a Page 3 e clique com o botão direito. Selecione Add > Child Page no menu contextual.
4. Renomeie as páginas. Clique uma vez com o botão esquerdo para renomear a nova página. Coloque o nome de “Última Página. Renomeie a “Page 3” para “Page 2”.
5
5
B. Mostrar a grade (Grid) e criar guias (Guides)
1. Abra a Última Página. Duplo clique na “Última Página”, no painel SiteMap. Isto abrirá uma nova aba no painel Wireframe.
2. Ative a grade. Clique com o botão direito no Wireframe e selecione Grid and Guides > Hide Grid (Ocultar grade).
3. Crie guias. Clique, novamente, com o botão direito no Wireframe e selecione Grid and Guides > Create Guides.
4. Selecione Preset. Selecione a opção “960 Grid: 12 Column option”. 5. Clique Ok. Clique no botão Ok para criar as guias.
6
6
C. Adicionando uma página guia única
1. Arraste a página guia da régua. Clique e arraste do topo da régua para dentro do Wireframe, para criar a página guia em Y:35. Pressionando a tecla Ctrl (tecla Cmd nos Macs) enquanto a ação de arrastar cria uma guia global (Global Guide).
2. Arraste e solte um widget de imagem. Arraste um widget de imagem do painel Widgets e o solte quando o contorno da esquerda encostar na guia em X:90 e o contorno do topo encostar na guia em Y:35.
3. Redimensione o widget. Clique e arraste a alça de seleção da imagem até encostar na guia em X:230.
7
7
D. Centralize a página
1. Selecione a aba de formatação da página (Page Formatting). Selecione a aba Page Formatting no painel Page Properties (propriedade da página).
2. Centralize a página. Selecione o botão de alinhamento centralizado para que a página seja centralizada no protótipo gerado.
8
8
E. Mudar a cor de fundo de todas as páginas
1. Abra o editor de estilos da página. Clique no botão do campo Page Style para fazer as mudanças de formatação para todas as páginas.
2. Selecione a cor. Na janela Page Style Editor, selecione uma cor de fundo.
3. Clique OK. Clique no botão OK para mudar a cor de fundo.
Gere o protótipo
Gere o protótipo. As mudanças realizadas no painel Sitemap são refletidas no mapa do site (sitemap) do protótipo. Note que a cor de fundo de todas as páginas foi alterada porque foi mudado o estilo padrão no editor de estilos (Page Style Editor). O widget (componente) da imagem está na Última Página. Referência: AXURE. Axure RP Training. Disponível em <http://www.axure.com/learn>. Acesso em Out 2013. AXURE. My First Prototype. Disponível em <http://d3g1p8ush40lh4.cloudfront.net/Tutorials/AxureCoreTraining.pdf>. Acesso em Out 2013.