Dicas e exemplos de websites de aplicativos móveis do Killer Design

A cena móvel cresceu exponencialmente nos últimos dois anos. A iOS App Store junto com os aplicativos Android no Google Play se tornaram os dois pontos de acesso para os entusiastas de smartphones. À medida que o número de usuários de smartphones aumenta, estamos vendo centenas de desenvolvedores de aplicativos móveis lançando novas ideias no mercado.

Apps mais populares são acompanhados por seu próprio site. Isso pode ser útil com marketing e obter o seu nome lá fora. Também é um URL on-line muito mais bonito que o das App Stores. Eu sinto que qualquer aplicativo móvel bem-sucedido requer quase uma presença na web.

Neste artigo eu quero passar por cima de alguns dos tendências de design mais comuns para websites de aplicativos para dispositivos móveis. Não há um livro de regras rigoroso que você deva seguir para criar esse layout. Em vez disso, existem algumas diretrizes e tendências exclusivas que os web designers descobriram que funcionam bem para conquistar uma audiência. Juntamente com o meu Guia de Desenvolvimento do iOS, você pode criar um fantástico aplicativo para dispositivos móveis e também construir seu website.

Confira estes conceitos abaixo e tente implementar alguns no layout do seu próprio site.

Capturas de tela do dispositivo

Uma peça básica para qualquer site de aplicativos móveis tem que ser capturas de tela do aplicativo. Os visitantes estão interessados apenas em seu aplicativo e qual é a maneira mais rápida de demonstrar seu objetivo do que com capturas de tela? Você pode ajustar as fotos do dispositivo em qualquer estilo de layout, por isso não é um fator limitante.

O Easy Chef é um aplicativo para iOS espanhol que usa muitas fotos de dispositivos. A parte superior do layout tem uma visualização de apresentação de slides de diferentes visualizações. Mas conforme você rola para baixo, você notará outros diagramas usando os displays do iPhone. Esses painéis incluem rótulos detalhados e visualizações de tela ampliada. Eu realmente escrevi sobre como projetar gráficos de produtos informativos em um post mais antigo.

Outra configuração interessante pode ser encontrada na página da galeria do Tweetbot. Este é um cliente Twitter muito popular para o iPhone e os desenvolvedores montaram uma exibição deslizante de screenshots. Se você está tentando economizar espaço em seu layout, isso pode ser uma solução mais fácil. Os visitantes não precisarão rolar a tela procurando uma visão específica. O jQuery é fácil de implementar e você pode montar rapidamente uma prévia da tela do iPhone. Pode ser difícil incluir detalhes extras, mas isso pode ser adicionado em outra seção.

Emblemas da App Store

Essa técnica também parece muito absurda depois que você terminar de criar o aplicativo. Os crachás são rapidamente reconhecidos como links de download para o mercado de aplicativos. Os usuários de Android e iOS têm a capacidade de visualizar aplicativos diretamente do navegador ou isso é redirecionado quando visualizado em um smartphone.

Eu gosto de usar o Instagram como um exemplo desde que o site foi atualizado para um novo layout. Eles têm emblemas que suportam o Android Marketplace (Google Play) e a iOS App Store. Ambos os emblemas são de design muito simples, mas são facilmente reconhecidos de imediato. Se você está procurando por designs mais complexos, recomendo uma busca rápida por dribbs. Designers talentosos frequentemente compartilham seus conceitos de crachá de loja de aplicativos para críticas construtivas.

Redes Sociais Móveis

Facebook e Twitter mudaram para o celular, mas isso não impediu que outras redes surgissem. Estamos vendo redes sociais usar aplicativos móveis para permitir uma nova plataforma de comunicação.

O Localmind é executado em um conceito semelhante ao Foursquare, no qual você registra uma conta e inicia a verificação em locais. Você pode deixar perguntas ou responder a perguntas de outras pessoas. Seu site é muito amigável e convidativo para os recém-chegados. Eu particularmente adoro a seção de banner superior projetada com um plano de fundo de mapa personalizado. Seu uso de gradientes e textura de fundo dão ao site uma vida própria.

Compartilhamento Mínimo de Fotos

Pose é outra rede móvel com ideais semelhantes para design minimalista. Você pode fazer o download do aplicativo para dispositivos móveis para iOS e Android. A sensação é semelhante a nós, mas é para os amantes da moda móvel. O aplicativo inteiro é focado em moda, cabelo, maquiagem e glamour.

Os usuários podem tirar fotos de suas roupas, roupas ou acessórios e compartilhá-los na rede. Uma coisa a notar sobre Pose é a rapidez com que você pode navegar no site. É fácil encontrar o blog da empresa, detalhes de contato, etc. Outros sites de aplicativos geralmente ignoram esses recursos corporativos, o que pode ser um assunto delicado..

Se você quiser chamar a atenção da mídia, é importante fazer com que seu site pareça um verdadeiro produto de rede social. Você não está apenas tentando vender seu aplicativo (por anúncios ou assinatura paga), mas também vender a própria rede. Aplicativos sociais podem definitivamente ser mais complicados do que projetar sites de aplicativos comuns. Mas eles também ganham muito mais downloads de usuários e é um novo campo para celular.

De origens humildes

Web designers nem sempre são capazes de reunir gráficos e ícones ultrajantes. Felizmente sites de aplicativos não são críticos para o quanto Adobe Photoshop proeza você tem. Eu realmente sinto que o minimalismo pode funcionar muito melhor para este estilo de layout.

Leef App é um recém-lançado cliente da Forrst para o iPhone. Seu site inclui uma captura de tela bonita do aplicativo, juntamente com um grande botão de download em negrito. Todo o texto da página é simplificado de maneira semelhante às fontes e esquemas de cores da Apple.

O que torna o site do Leef ótimo é a natureza sincera de cada elemento da página. É evidente e direto com nada escondido ou deixado de lado. Eu recomendo tentar este estilo como o seu primeiro site de aplicativos móveis, se qualquer coisa apenas para a prática. Você pode aprender muito minimizando as pequenas informações e concentrando-se no que chama a atenção.

Espaço em branco encantador

Também é simplesmente brilhante o site da Wood Camera App. Seu layout não contém nada além de um fundo branco e um conteúdo centralizado. Este conteúdo inclui algumas capturas de tela padrão, um selo de loja de aplicativos e alguns recursos principais adicionais.

Se você acha que o minimalismo e o espaço em branco são importantes para o seu layout, então fique com ele! A câmera de madeira não é um layout de site particularmente surpreendente, mas é super fácil de navegar. O site deles nem sequer tem links para qualquer conteúdo alternativo além da página oficial do desenvolvedor. Isso mantém o foco no aplicativo e no que ele oferece, o que é muito mais importante do que os gráficos chamativos. Embora isso não quer dizer que arte chamativa é uma má ideia - ela requer apenas uma implementação apropriada.

Ilustrações coloridas

Muito pelo contrário, a abordagem minimalista é um trabalho com ilustrações únicas, que eu adoro totalmente. Muitas vezes esse detalhe extra me venderá completamente o aplicativo. Um exemplo que posso relacionar é o Barista App para iPhone. O cabeçalho do site está repleto de cappuccinos e bebidas de café expresso.

Mas observe como não há outras imagens ao rolar a página. Esta seção superior inteira foi projetada especificamente para o aplicativo do iPhone, semelhante a um página de destino. Os vetores capturam seus olhos imediatamente e também sugerem o que o aplicativo é sobre.

Kitchenator é um aplicativo iOS similar que converte unidades de medida para cozinhar e assar. Seu layout de cabeçalho usa texturas ricas de madeira, uma toalha xadrez e mini colheres de água. Esta imagem sugere a finalidade deste aplicativo antes mesmo de você percorrer o conteúdo.

Esse estilo de design permeia todo o layout. A área de rodapé coincide com um fundo de madeira semelhante e com muitas das mesmas opções de fonte. Este é um exemplo de um layout de site muito simples, com alguns gráficos muito poderosos.

Websites de aplicativos: Premium Showcase

Que artigo estaria completo sem um pouco de colírio para os olhos? Juntamente com as técnicas acima, também reunimos esta bela galeria de sites de aplicativos móveis; observe os esquemas de logotipo e navegação, bem como os URLs de domínio. Ao estudar o que os profissionais fazem, você pode entender as tendências de design e usá-las em seus próprios projetos.

Bosquet App