No outro dia, a propósito de uma discussão (para quem já está em pânico recomendo a consulta do dicionário para a palavra discussão) sobre prototipagem de interfaces, surgiu a necessidade de identificar aplicações para wireframing:
A website wireframe (also “web wire frame”, “web wireframe”, “web wireframing”) is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface. Typically, wireframes are completed before any artwork is developed.
Como creio verdadeiramente no potencial e mais valias das webApp procurei uma aplicação neste paradigma, de carácter gratuito.
O resultado da rápida triagem dá pelo nome de Lumzy e está disponível no endereço http://lumzy.com/app/
Nota1: Este artigo foi reformulado após o precioso esclarecimento do nuno.
[...] This post was mentioned on Twitter by Ricardo Ferreira, planetgeek. planetgeek said: Paulo Silva: Mockups http://bit.ly/9VjmnW [...]
Desculpa a intromissão e a impertinência, mas a aplicação de que falas não é para mockup’s mas sim para wireframing, O “mockup” é realizado numa outra fase do UI Design normalmente depois do estudos dos Flow’s. O mockup já tem uma aparência muito mais final e em teoria pretende-se que seja 100% implementável pelos developers.
@nuno: qual intromissão qual quê ;). Agradeço solenemente o teu contributo e aproveito para abusar do teu conhecimento na matéria:
em traços gerais quais os passos iterativos no desenvolvimento de interfaces?
Muito Muito simplificado são 4.
Primeiro definir o target group/personas bem como o que a app vai fazer.
Segundo os flows e wireframes, Os flows não são mais que todos os use cases das personas, um flow é o conjunto de operações necessárias a execução de qualquer acção. A maior parte deve ser possivel representar os flow’s com diagramas que se pretendem o mais simples possíveis para aquilo que são os use case’s mais comuns da aplicação. um wireframe é uma representação simplificada e sem estilo da aplicação que serve para testar os flow’s e optimizar estes.
Terçeiro, mockups aqui parte-se para um nivel de detalhe muito superior, em que o design (segundo as novas defenições sobre design entra, tenho uma talk sobre isto), é importante ter uma elevada comprênção das tecnologias nesta fase de forma a melhor utilizar os form e interactional factors bem como os contextos especificos da aplicação.
Quarto é a fase de testing e review, acho que esta é bastante obvia.
Estes passos podem ser subdivididos em outros tantos mas na minha opnião representam as pricipais etapas no UI design. Como é obvio não são estanques e implicam muito “back and forward” entre elas.
cheers