Design do App

Existem algumas considerações que você deve ponderar antes de começar a projetar o seu web app.

Considerações sobre Design

Suporte a dispositivos e emulação de design

Conhecer os tipos de dispositivos em que a sua aplicação deve funcionar é de extrema importância. Conhecer o público da sua aplicação e as suas capacidades nos diz com quais características podemos contar, a quais interfaces de usuário devemos ficar atentos para ir em frente. Muitos frameworks de JavaScript, Dojo Mobile por exemplo, fornecem temas de vários dispositivos para fácil aplicação. Mesmo que você decida não usar um framework pronto de JavaScript, você pode estudar a visualização do tema do dispositivo e usar apenas a parte que deseja.

Apoio de orientação

Apoio de orientação é uma grande consideração quando você cria um web app capaz de rodas em dispositivos móveis. Uma consideração óbvia é que desktop apps usam orientação horizontal por padrão, enquanto a maioria dos dispositivos móveis usa o modo retrato (vertical) como orientação padrão. Uma aplicação web ideal deve ser além de bonita, funcional em ambas as orientações. Tanto JavaScript quanto CSS media queries possibilitam que os desenvolvedores consigam detectar e reagir às mudanças de orientação quando elas acontecem.

Gestos x Toques Simples

Considere os caminhos de interação de navegação que você deseja para a sua aplicação. A navegação será feita através de toques em botões ou com gestos? A resposta para esta pergunta decide se o seu aplicativo deve dar espaço para controles estáticos ou deve sutilmente comunicar ao usuário os gestos disponíveis. Bibliotecas de JavaScript como jGestures existem para ajudar na detecção de gestos.

Princípios básicos de design de aplicativos

Independentemente do tipo específico de dispositivo que você pretende criar, existem alguns princípios básicos que devem ser obedecidos enquanto você cria aplicativos web.

• Evitar larguras baseadas em pixels  quando você criar para múltiplos dispositivos e/ou múltiplas orientações
• Use gráficos vetoriais para que as suas dimensões sejam ajustadas de forma elegante entre dispositivos
• Não tente adivinhar funcionalidades em qualquer aparelho, a detecção de funcionalidades ainda é importante
• Quanto mais flexível for o design do seu app, mais portátil ele vai ser quando considerarmos suporte ao dispositivo.

O design do nosso app será bem típico, considerando dois paineis. O primeiro painel irá mostrar uma caixa de busca para a entrada da localização do usuário, assim como uma lista de pesquisas de locais anteriores. O segundo painel irá simplesmente mostrar uma lista de tweets do Twitter. Cada painel irá utilizar um título padrão.

- app
    -  app.css
    -  app.manifest
    -  app.js
    -  images/
        -  icon-16.png
        -  icon-48.png
        -  icon-128.png
    -  index.html