1. O documento fornece instruções passo-a-passo para criar um protótipo no programa Axure, incluindo como adicionar botões, links, publicar o protótipo online e gerar arquivos HTML. 2. Também ensina como organizar páginas no mapa do site, mostrar grade e guias, adicionar uma página de guia única e centralizar o conteúdo. 3. O objetivo é criar um primeiro protótipo funcional no Axure para testar os recursos básicos do programa.

1. 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:
daniela.carvalho@esamc.br.
Abr
2014.
Blog:
http://colecaoaprender.blogspot.com.br

2. 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
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
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
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
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
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
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
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.