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

2. 2
B.
Adicione
um
link
1.
Clique
no
“Quick
Link”.
Com
o
2.
Selecione
a
página
1.
Na
janela
3.
Clique
OK.
Clique
no
botão
Ok.
botão
selecionado,
clique
na
opção
“Link
Properties”,
selecione
Page
1.
“Quick
Link”
(link
rápido)
do
painel
de
propriedades
do
widget
(componente).
2

3. 3
C.
Gere
o
protótipo
1.
Clique
no
botão
“Prototype”.
2.
Clique
em
gerar
protótipo.
Clique
Clique
no
botão
“Prototype”
na
barra
no
botão
“Generate”.
de
ferramentas
para
chamar
a
tela
de
gerar
protótipo
(Generate
Prototype).
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.
3

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”.
4

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

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
3.
Redimensione
o
widget.
Clique
e
imagem.
Arraste
um
widget
de
arraste
a
alça
de
seleção
da
imagem
imagem
do
painel
Widgets
e
o
solte
até
encostar
na
guia
em
X:230.
quando
o
contorno
da
esquerda
encostar
na
guia
em
X:90
e
o
contorno
do
topo
encostar
na
guia
em
Y:35.
6

7. 7
D.
Centralize
a
página
1.
Selecione
a
aba
de
formatação
da
página
(Page
2.
Centralize
a
página.
Selecione
o
botão
de
alinhamento
Formatting).
Selecione
a
aba
Page
Formatting
no
painel
centralizado
para
que
a
página
seja
centralizada
no
Page
Properties
(propriedade
da
página).
protótipo
gerado.
7

8. 8
E.
Mudar
a
cor
de
fundo
de
todas
as
páginas
1.
Abra
o
editor
de
estilos
da
página.
2.
Selecione
a
cor.
Na
janela
Page
3.
Clique
OK.
Clique
no
botão
OK
para
Clique
no
botão
do
campo
Page
Style
Style
Editor,
selecione
uma
cor
de
mudar
a
cor
de
fundo.
para
fazer
as
mudanças
de
fundo.
formatação
para
todas
as
páginas.
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.
8