1
1
Meu primeiro protótipo no Axure 7.01
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 “Next Page” (Nova 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]. Abr 2014. 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 caixa de diálogo “Link Properties”, selecione Page 1.
3. Clique em Preview. Clique no botão “Preview”
3
3
C. Publique o protótipo no serviço de hospedagem na nuvem, Axure Share
1. Clique no ícone “AxShare”. Clique no ícone “AxShare” na barra de ferramentas.
2. Crie uma conta. Com a aba “Create Account” selecionada, entre com seu e-‐mail e senha e depois marque para concordar com os termos de utilização.
3. Clique em publicar. Clique no botão “Publish” para obter o link (URL) para compartilhar.
4
4
D. Gere os arquivos HTML localmente
1. Clique no ícone “Publish”. Clique no ícone “Publish” na barra de ferramentas.
2. Crie em “Generate HTML Files” (Gerar arquivos HTML). Selecione “Generate HTML Files.
3. Clique em “Generate” (Gerar). Clique no botão “Generate”. Nota: Para visualizar os arquivos locais no Chrome é necessário uma Extensão.
Referência: AXURE. CORE TRAINING #1: Getting Started. Disponível em <http://www.axure.com/learn/core/getting-‐started>. Acesso em Abr 2014.
5
5
Trabalhando com Páginas
Crie um novo arquivo
A. Organize as 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, clique bom o botão direito 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 “Last Page” (Última Página). Renomeie a “Page 3” para “Page 2”.
6
6
B. Mostrar a grade (Grid) e criar guias (Guides)
1. Abra a Última Página. Duplo clique na “Last Page” (Ú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 > Show Grid (Mostrar 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.
7
7
C. Adicionando uma página guia única
1. Arraste a 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.
8
8
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.
9
9
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
Visualize o protótipo, clique em “Preview”. 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 (Last Page). Referência: AXURE. CORE TRAINING #2: Working with Pages. Disponível em < http://www.axure.com/learn/core/pages >. Acesso em Abr 2014.