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  

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.