Web design: como criar wireframes clicáveis

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 Blueprint-like no papel não é suficiente para os clientes a 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.)

Video: How To Create a Website Layout With Photoshop From Wireframe [Part 2]

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ê salvá-los 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 para ir para suas várias páginas. Voilà: 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 um passo adiante com a construção tanto um sistema de navegação a funcionar tão bem como quaisquer recursos dinâmicos que você pretende incluir, como menus drop-down ou espaços acordeão.

Video: Wireframing using pencil

Apresentar sua edição wireframe clicável aos clientes como uma maneira 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.