Web Design: Como criar clicáveis Wireframes
No início do processo de construção de um site, os clientes precisam entender como o site é organizado. Wireframes (desenhos em preto e branco detalhadas de cada página da web principal) mostram o que se passa na página, como a navegação e interação trabalho, e o layout da página geral. Para sites grandes ou complexos, apenas olhando para wireframes blueprints-like no papel não é suficiente para os clientes para visualizar a interação e organização de um site. Então, depois de trabalhar para fora o mapa do site e começar wireframing, reservar algum tempo para montar um wireframe quick-trabalhando protótipo do site em HTML em que muitos dos itens clicáveis estão funcionando. Dessa forma, os clientes podem fisicamente clique as versões de esboço de navegação e botões para ver onde eles vão. (Nota: Para sites pequenos que não têm muita interação complexa ou muitas seções, andando clientes através de um PDF de seus wireframes é suficiente.)
A maioria dos designers e arquitetos da informação usam programas de ilustração, como o Adobe Illustrator e Adobe InDesign Microsoft Visio ou para criar wireframes. Todos os três destes programas podem exportar wireframes como GIFs e JPEGs. Então você pode usar uma ferramenta de HTML como o Adobe Dreamweaver para importar esses GIFs e JPGs e links de sobreposição em cima das áreas clicáveis.
Tente exportar wireframes como arquivos GIF. Porque wireframes são (deveria ser) em tons de cinza e texto, você obter uma melhor qualidade e compressão quando você guardá-las como GIFs.
No Dreamweaver, coloque todo o wireframe GIF na página, assim como você inserir uma imagem. Você pode então desenhar hotspots (Regiões clicáveis que você define) no topo de sua navegação e ligá-los a ir para suas várias páginas. Voil # 224-: um protótipo wireframe clicável rápida que está pronto para compartilhar com seus clientes.
Se você estiver acessível em HTML, você pode levar seu protótipo de um passo adiante com a construção tanto um sistema de navegação de trabalho, bem como quaisquer características dinâmicas pretende incluir, como menus drop-down ou espaços acordeão.
Apresentar sua edição wireframe clicável para os clientes como uma forma de ajudá-los a visualizar como o site é organizado e como os usuários navegar através de tarefas-chave, tais como encomendar um produto. Você também pode apresentar os wireframes clicáveis para os usuários finais para ver se o site faz sentido a partir de sua perspectiva. Nesta fase, é importante trabalhar para fora todas as torções no site e obter a aprovação do cliente antes de avançar com design visual e codificação HTML.
