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

 

 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.