Page 1

Sabrina Pereira


Sabrina Pereira


Sabrina Pereira

Primeira Edição


©2014 Sabrina Pereira ©Todos os direitos desta edição são reservados à editora virtual

Edição e Revisão: Sabrina Pereira Projeto Gráfico (capa): Sabrina Pereira Projeto Gráfico (miolo): Sabrina Pereira Impresso no Brasil | Printed in Brazil

Pereira, Sabrina. Design Editorial Móvel.Minas Gerais: Editora Virtual, 2014(1ª edição). 40 p.: 10cm x 15cm.

ISBN 111-01-11011-00-1

CDD 110

Inclui bibliografia e índice

www.editoravirtual.com.br


Sumário

Introdução 7

Adaptável à mobilidade 11 Web sites 27 Aplicativos 49 Conclusão 57 Bibliografia 59


Design Editorial Móvel 7

O tema escolhido para este livro não se deu à toa. Muito provavelmente você já sabe o porquê, mas colocamos aqui, dados e pesquisas que comprovam o alto uso de dispositivos móveis pela sociedade atual e o mercado de trabalho que aumenta consequentemente para essa área, tendo em vista a criação e desenvolvimento de sistemas, aplicativos e web sites. É a partir daí que achamos extremamente importante orientar designers para se inserirem neste mercado. Segunda a pesquisa feita pela F/Nazca Saatchi & Saatchi em parceria com o Instituto Datafolha, 84 milhões de brasileiros (com 12 anos ou mais) acessam a internet; sendo que, desses 84 milhões, mais de 43 milhões de brasileiros acessam a internet através dos dispositivos móveis. O estudo revela ainda que um em cada quatro brasileiros pretende adquirir um smartphone no primeiro semestre de 2014. E o que move essa multidão? Hoje, um em cada cinco brasileiros costuma comentar, divulgar ou compartilhar experiências pela internet no exato

9 Introdução


Design Editorial Móvel 8

momento em que elas acontecem. Além das férias, festas e shows, os comentadores da vida real redescobriram na televisão terreno fértil para reverberar qualquer assunto: 51% dos internautas que postaram no momento em que estavam vivenciando, comentavam justamente sobre algo que viam na TV. Em 2008, o relatório “Future of the Internet”, do Pew Internet & American Life Project, avançava que em 2020 os dispositivos móveis seriam a principal forma de acesso à Internet. Nessa altura, o iPhone era ainda uma novidade e o iPad seria lançado apenas dois anos mais tarde, pelo que dificilmente se poderia vislumbrar nestes dispositivos um mercado com potencial. Temos diversas categorias de dispositivos que podemos considerar de computação móvel. O primeiro grupo é dos laptops (ou notebooks), que são computadores portáteis, com capacidade computacional equivalente a um desktop. Diminuindo de capacidade computacional, temos os PDAs (Personal Digital

9 Introdução


Design Editorial Móvel 9

Assistant). Eles possuem telas pequenas, mas seu poder de processamento é bem alto, se comparado com um telefone celular, mas baixo, se comparado aos notebooks. Têm suporte a aplicativos desenvolvidos com linguagens de programação de alto nível, recursos multimídia, acesso à rede e outros recursos. O terceiro grupo é o de telefones celulares. Antigamente, diríamos que os celulares têm telas minúsculas e quase nenhum recurso. Hoje, contudo, existem aparelhos com memória expansível, acesso à rede Bluetooth, suporte a Java etc. Alguns celulares mais avançados também são chamados de smartphones. Além dos recursos de telefones, eles incorporam diversos recursos dos PDAs. São telefones que possuem sistema operacional, transformando-os em computadores portáteis, o que nos leva até os tablets, “computadores mais que portáteis”, que funcionam como um desktop ou notebook, porém com alguns recursos a menos.

9 Introdução


Design Editorial Móvel 10

As peculiaridades que envolvem a adaptação dos web sites para dispositivos móveis e o desenvolvimento de aplicativos serão tratados aqui, levando em consideração às telas dos dispositivos em questão (smartphones e tablets) que são menores em relação aos computadores de mesa ou até mesmo os notebooks.

Figura 1.1

9 Introdução


Design Editorial Móvel 11

Adaptável à mobilidade


Design Editorial Móvel 12

Leitura em Pequenas Telas Antes mesmo do surgimento da Web, vários estudos foram realizados com o intuito de verificar os efeitos e impactos na capacidade de compreensão e legibilidade do conteúdo e no tempo de leitura destes em telas de dimensões reduzidas. A compreensão de um texto é, geralmente, medida a partir da facilidade ou dificuldade que o seu significado é entendido. Por outro lado, a legibilidade se refere aos elementos (luminosidade e contraste do monitor, tamanho da fonte, por exemplo) que podem interferir na capacidade de leitura. Fatores como tamanho da tela e da margem e tipografia podem influenciar essas propriedades. • Tamanho da tela: avalia o impacto que as dimensões (comprimento e altura) da tela podem causar. Observou-se, após alguns estudos, que o comprimento da tela não possui forte influência na compreensão do conteúdo, enquanto sua altura sim. Telas com grandes dimensões

9 Adaptável à mobilidade


Design Editorial Móvel 13

proporcionam uma maior visualização do ambiente e uma maior visualização do ambiente e uma maior disposição de conteúdo ao mesmo tempo. • Comprimento da margem: elas são utilizadas para limitar a atenção enquanto um usuário lê o texto. Diversos estudos foram realizados e os resultados encontrados são antagônicos. Enquanto alguns afirmam que margens largas facilitam a leitura, pois proporcionam um maior contraste do texto com o ambiente, outros mostram que não existe diferença no tempo de leitura de textos utilizando-se ou não as margens. Observou-se que, embora a não utilização das margens não cause uma diferença significante no tempo de leitura, ela requer um esforço cognitivo maior. • Tipografia: duas características devem ser estudadas: o tipo da fonte e seu tamanho. Indicase a utilização de fontes padrões (suportadas pela maioria dos computadores) como a Arial e Verdana que foram desenvolvidas especificamente para aumentar a legibilidade.

9 Adaptável à mobilidade


Design Editorial Móvel 14

a legibilidade. Em geral, a leitura de textos com caracteres de tamanho reduzido é mais rápida que com grandes. Isso porque caracteres maiores requerem a visualização de uma área maior para obter a informação. Quando se utiliza um PDA pra leitura de informações, devese observar bem o tamanho dos caracteres, pois estes podem afetar a compreensão e a legibilidade do conteúdo. Em 1983, Duchnicky e Kolers, a partir de variações das medidas da altura da tela e do comprimento das linhas, estudaram o impacto dessas dimensões no tempo de leitura dos textos exibidos. Observou-se que o tempo, utilizandose a tela com suas dimensões máximas, era 25% mais rápido se comparados ao mesmo texto visualizado numa janela com 1/3 da largura e mantendo-se a altura máxima. Pôde-se notar que a variação da altura não causava impactos relevantes na leitura. Apenas no caso de telas muito pequenas – uma ou duas linhas (displays

9 Adaptável à mobilidade


Design Editorial Móvel 15

de telefone celular, por exemplo) – havia um fraco desempenho. Concluiu-se, então, que a melhor altura possuía quatro linhas de texto. O estudo verificou que não havia grandes melhoras na compreensão caso a altura da tela fosse de vinte linhas e que o tempo de leitura era apenas 9% mais lento nas pequenas telas. Todos esses estudos realizados foram baseados apenas na leitura de textos corridos, ou seja, sem a utilização de qualquer linguagem de marcação, hyperlinks ou elementos como imagens, por exemplo. Observa-se que as dimensões da tela não proporcionava alterações representativas no tempo de leitura e na compreensão dos textos. Navegação em web sites A Web é formada por documentos que possuem marcações HTML como, por exemplo, hyperlinks, imagens, animações e tabelas. Os seus usuários não a acessam apenas para a leitura de textos. Têm o objetivo de alcançar metas (a realização de

9 Adaptável à mobilidade


Design Editorial Móvel 16

uma compra, por exemplo), utilizar serviços e extrair informações e conhecimento de fontes não textuais (gráficos, por exemplo). Dessa forma, vários impactos podem ser observados, quando se utilizam os dispositivos móveis para a leitura e navegação de web sites. Uma preocupação inicial é que, atualmente, a grande maioria dos documentos existentes na Web foi elaborada para a visualização a partir de dispositivos com telas de grandes dimensões. Assim, a visualização desses, em dimensões reduzidas, gera a deformação de suas características, proporcionando uma redução na eficiência da interação, compreensão do conteúdo e no tempo de execução de tarefas. Para acessar web sites via dispositivos móveis é necessária a utilização de um navegador. Entre os mais utilizados, atualmente, estão o Pocket Internet Explorer utilizados nos Pockets PCs e o AvantGo utilizado nos PDAs da Palm. Um estudo realizado por Dillon, Richardson e McKnight verificou que como os web sites geralmente possuem

9 Adaptável à mobilidade


Design Editorial Móvel 17

mais informações e recursos que apenas textos, a sua navegação é facilitada quando se utiliza as funções disponibilizadas nos browsers. Observou-se que os usuários utilizam mais os recursos do navegador para a leitura em telas de dimensões reduzidas que em telas normais. Espera-se, então, que usuários de PDAs utilizem com mais freqüência as barras de rolagem e os botões de avanço e retorno (forwards e backwards, respectivamente) dos documentos visitados. Os usuários, quando acessam a Web, não apenas visualizam informações, mas interagem com a interface para alcançar seus objetivos. Dessa forma, alguns estudos foram desenvolvidos para avaliar o acesso aos objetos e áreas de interação. Em 1994, Han e Kwahr definiram que o tempo de busca por itens de um menu em uma tela de uma linha (celulares possuem três ou quatro linhas) era três vezes maior que em dispositivos com telas padrão. É importante que as principais fontes de interação

9 Adaptável à mobilidade


Design Editorial Móvel 18

(menus, botões, formulários, por exemplo) estejam localizados de forma a facilitar a comunicação com o usuário, melhorando o tempo de utilização e de alcance das metas. Jakob Nielsen, na revisão das usabilidade para Web, em 1994 destaca que as barras de rolagens são grandes erros de usabilidade. Em seus estudos, observou-se também que apenas 10% dos usuários utilizam toda a extensão da barra para alcançar as informações e os links que inicialmente não estão dispostas na tela. Atualmente, devido a maior experiência e oportunidade de acesso à Internet, os usuários utilizam naturalmente as barras de rolagem quando necessário. Assim, pode-se dizer que a operacionalização desse elemento de navegação em telas de dimensões reduzidas não proporcionará grandes impactos e os usuários irão concluir suas metas de maneira correta. Ao mesmo tempo, observa-se que, quando um web site é acessado via um navegador para smartphone ou mesmo tablets, há uma maior

9 Adaptável à mobilidade


Design Editorial Móvel 19

necessidade e freqüência da utilização das barras de rolagem se comparados ao mesmo documento acessado via um browser de um computador pessoal. Pode-se afirmar, então, que há um maior esforço e tempo gasto para alcançar as metas desejadas utilizando-se um Dispositivo móbile. Web sites para dispositivos móveis Atualmente, ao se projetar um website é comum levar em consideração o desenvolvimento de uma versão para acesso móvel. Como se já não bastassem as várias resoluções de tela de dispositivos desktop, existem ainda os diferentes tamanhos (e características) de variados dispositivos móveis, o que torna impraticável construir websites específicos para cada plataforma e aparelho, seja pelos inúmeros modelos no mercado, seja pelo alto custo desta política de desenvolvimento. Nesse contexto, tem-se a necessidade de buscar uma solução que compreenda e se

9 Adaptável à mobilidade


Design Editorial Móvel 20

adapte ao comportamento do usuário e ao ambiente que ele está usando para acessar as informações, levando em conta resolução de tela, a plataforma e, até mesmo, a orientação da tela. O design responsivo procura suprir essa necessidade: utilizando um misto de grids, imagens, marcações CSS e, possivelmente, scripts, possibilita ao website a habilidade de “responder” às preferências do usuário (Knight, 2011). Porém, o design responsivo vai além de apenas mostrar o website inteiro na tela, redimensionando a página e as imagens; ele propõe maneiras de apresentar o mesmo conteúdo em diferentes plataformas. Segundo Doyle (2011), um design responsivo deve: adaptar o layout a diferentes tamanhos de tela; redimensionar imagens conforme a resolução da tela; fornecer imagens otimizadas para banda estreita, para dispositivos móveis; simplificar elementos da página para versões móveis; ocultar elementos menos importantes. Segundo Marcotte (2011), um design responsivo só pode ser criado utilizando-se três elementos básicos:

9 Adaptável à mobilidade


Design Editorial Móvel 21

layout flexíveis, baseados em grades; imagens e outras mídias (como áudio e vídeo) visualmente flexíveis; e media queries. Layouts flexíveis consistem em páginas projetadas para se auto ajustarem a qualquer resolução de tela ou tamanho da janela do navegador, mantendo a distribuição proporcional ao tamanho originalmente projetado. Para isso, são em telas menores; fornecer botões e links com grande área clicável para dispositivos móveis; vii) detectar (e utilizar, se necessário) funcionalidades específicas dos dispositivos móveis, como geolocalização e orientação da tela. utilizadas grades – ou grids – que ajudam a definir a posição e os valores corretos matematicamente. Geralmente, um layout é desenhado utilizando-se medidas absolutas em pixels; num segundo momento, este é convertido para medidas relativas – em valores percentuais – mantendo as proporções originais. Imagens flexíveis se ajustam proporcionalmente ao espaço aonde estão inseridas s - os containers. Como o design responsivo está

9 Adaptável à mobilidade


Design Editorial Móvel 22

sendo desenvolvido visando seu funcionamento em browsers modernos, com suporte a HTML5 e CSS3, é importante ressaltar que outros tipos de mídia – como vídeo e áudio (visualmente representado por uma barra de progresso) – também devem seguir o mesmo comportamento das imagens. Consultas de mídia, conhecidas pelo nome em inglês “media queries” são uma evolução do atributo media type (tipos de mídia), concebido como parte da especificação CSS2, e amplamente utilizados para definir folhas de estilo específicas para tela ou impressora – com cores e tamanho da fonte específicos para cada saída, por exemplo. Os valores aceitos variam conforme os tipos de mídia especificados (podem ser valores “all”, “screen”, “print”, “speech”, “projection” etc.). Como a definição do tipo de saída de um documento não é mais suficiente – o valor “tela” se tornou amplo demais –, o CSS3 traz as consultas de mídia, permitindo consultar não só a mídia, mas também as características

9 Adaptável à mobilidade


Design Editorial Móvel 23

físicas do dispositivo e do browser que exibe o conteúdo (Marcotte, 2011). Esta é a principal característica que permite o funcionamento do desing responsivo; apenas com as media queries, especificadas nos documentos do CSS3, é possível descrever características especiais para determinadas configurações. Somente um layout fluido com imagens proporcionalmente dimensionadas não será eficiente sem o uso de media queries, pois é este mecanismo que permite reorganizar o conteúdo conforme o espaço disponível para tal. Sendo assim, as características que podem ser consultadas variam desde a largura e altura do navegador e do browser, a orientação do dispositivo (se a interface está na vertical ou na horizontal); até o aspect-ratio da tela, a densidade de pixels e a quantidade de cores suportadas pelo dispositivo.

9 Adaptável à mobilidade


Design Editorial Móvel 24

Desenvolvimento de aplicativos O desenvolvimento de aplicativos móveis já é muito mais que realidade no nosso cotidiano, dentre as plataformas móveis que se destacam hoje temos o Android do todo poderoso Google e o iOS da Apple. O iOS é o sistema operacional da Apple. É usado para iPhone, iPod Touch e iPad. iOS (iPhone / iPad / iPod Touch) Para desenvolver pra iOS usa-se a IDE XCode, que é uma excelente IDE, completa. Já vem com um simulador de iPhone/iPad, ferramenta para Debug e com o Interface Builder, onde facilita bastante a criação de Views para seu aplicativo. Existe uma vasta documentação no portal do desenvolvedor da Apple, que inclui vídeos, exemplos, tutoriais Passo a Passo, documentação de todas as classes e tudo sobre os frameworks embutidos no próprio XCode, porém tudo em inglês. Sobre a linguagem, saiba orientação a objetos na ponta da língua. Existem tutoriais ensinando no portal do desenvolvedor da Apple,

9 Adaptável à mobilidade


Design Editorial Móvel 25

ajudam bastante. Uma dica de dou é aprender os fundamentos da linguagem e como trabalhar as Views antes de entrar de cabeça no desenvolvimento, isso vai facilitar muito sua vida. Existem também ótimos fóruns que ajudam no desenvolvimento, dentre eles: iPhone Dev Forums , iPhone Dev SDK e iPhoneMod Brasil. E existem vários livros, a grande maioria em inglês, ou seja, material não vai faltar. A má notícia é que para desenvolver para iPhone é necessário ter um computador Intel rodando MacOS X, precisa conhecer Objective-C, que é uma linguagem difícil de aprender e, além disso, para ser um desenvolvedor autorizado e poder enviar aplicativos para a App Store, a licença custa U$ 99 por ano, ou seja, não é nada barato desenvolver para iPhone. Entretanto, se você não tem tempo de aprender e precisa de um aplicativo rápido, tem alguns serviços e frameworks que ajudam a ter seu aplicativo na App Store com muito mais facilidade sem a necessidade de aprender Objetive-C.

9 Adaptável à mobilidade


Design Editorial Móvel 26

Dentre eles eu destaco: • AppMakr: neste é possível publicar o app direto do site, com algumas funcionalidades como RSS, Podcast, entre outras, e gratuito. • Titanium Mobile: um framework bem completo que permite fazer aplicações para iPhone e para Android utilizando linguagens para internet como CSS, Javascript, HTML e até PHP. • NimbleKit: também possibilita fazer aplicações utilizando CSS, Javascript, PHP e jQuery, além de possui funcionalidades como GPS, Radio OnLine entre outras. • iWebKit: cumpre, com excelência, a função de rodar o site no iPhone. Android Desenvolver para Android é uma tarefa um pouco mais fácil, você pode utilizar a IDE Eclipse, que muitos já estão familiarizados, só necessita instalar a SDK e um plugin no próprio Eclipse. Pode-se desenvolver utilizando MacOS, Windows ou Linux, a linguagem de desenvolvimento é Java.

9 Adaptável à mobilidade


Design Editorial M贸vel 27

Web Sites


Design Editorial Móvel 29

Tanto os web sites quanto os aplicativos são projetos para os dispositivos móveis, pensando nas condições de uso que estes trazem consigo por terem telas menores e por serem utilizados, muitas vezes em ambientes e situações diversas; por exemplo, caminhando na rua, nas escolas, nos shoppings, nas academias e outros lugares. Já falamos sobre como ocorre a transferência dos pc’s para móbiles. Nesse capítulo, trataremos a respeito da organização ou diagramação feitas nos web sites para os chamados móbiles. E o menu, ponto de partida quando sentamos em algum restaurante, será nosso ponto de partida nessa análise. O site do mercado livre (www.mercadolivre. com.br), companhia de tecnologia em comércio eletrônico na América Latina, possui um menu grande, devido às várias categorias de produtos disponíveis para o usuário pesquisar, além das opções referentes ao cadastro dos usuários, sejam estes vendedores ou compradores. Para os pc’s, o meu utilizado é o da figura 3.1 mostrada

9 Web Sites


Design Editorial Móvel 30

nas páginas 32 e 33. Com tantas opções de menu, a versão do site para os dispositivos móveis se encaixam no sistema vertical que possuímos nestes dispositivos. Esse sistema é o que vai nos reger para diagramar conteúdos para o universo móbile. Um menu que era, em sua maior parte horizontal, se torna agora totalmente vertical, com as opções de categorias de produtos uma embaixo da outra e; o outro menu, referente aos usuários, disponível em um botão, abrindo também na vertical. Este botão é bastante utilizado pelos web sites e também pelos aplicativos, para que a diagramação destes no móbile seja possível e ofereça praticidade para os usuários. O ícone que identifica esse botão é de conhecimento universal e fácil de identificação:

Na próxima página, é possível, então vermos como fica a versão do site do mercado livre para os smartphones (imagem 2.2).

9 Web Sites


Design Editorial M贸vel 31

Web Sites


Design Editorial M贸vel 32

Figura 3.1

Web Sites


Design Editorial M贸vel 33

Figura 3.2

Web Sites


Design Editorial Móvel 34

O menu é o esqueleto do web site. Ele sustenta todo o restante: a navegação, os posicionamentos da logo, ferramenta de busca, abertura de conteúdo e o conteúdo do rodapé.A logo e, quando possui, a ferramenta de busca, podem manter seu posicionamento na grade quando o web site é acesso via móbile, mas, para que a diagramação seja o mais vertical possível (até para que não haja barra de rolagem horizontal - o que tira a praticidade e só funciona como mais um obstáculo na navegação pelo usuário), a logo tem a possibilidade de se colocar acima da ferramenta de pesquisa ou do menu (caso não tenha a ferramenta de busca). Vemos este último no exemplo anterior (figuras 2.1 e 2.2). No caso do site de buscas da Google, ocorre a permanência da logo e da ferramenta de busca no mesmo local. Veja nas páginas a seguir as figuras 2.3 e 2.4.

9 Web Sites


Design Editorial M贸vel 35

Web Sites


Design Editorial M贸vel 38

Figura 3.3

Web Sites


Design Editorial M贸vel 39

Figura 3.4

Web Sites


Design Editorial Móvel 40

Como a logo já se posiciona acima da ferramenta de busca, o google para dispositivos móveis mantem essa configuração, redimensionando apenas os elementos com a utilização do design resposivo (ler sobre design responsivo - página 20). O conteúdo do site também é reorganizado para que se mantenha a verticalidade característica dos móbiles. Continuando com o exemplo do mercado livre, imagens e texto sobre o produto pesquisado pelo usuário são redimensionados e diagramados de forma que não ultrapasse a largura máxima dos dispositivos e cada informação se mantenha visível e legível. Veja nas próximas páginas, nas figuras 2.5 e 2.6, como o conteúdo é aberto nos pc’s e como é aberto nos smartphones.

9 Web Sites


Design Editorial M贸vel 41

Web Sites


Design Editorial M贸vel 42

Figura 3.5

Web Sites


Design Editorial M贸vel 43

Figura 3.6

Web Sites


Design Editorial Móvel 44

As imagens do produtos no site para pc’s são colocadas na horizontal acima da imagem que está sendo mostrada. Já na versão para smartphone o usuário pode trocar de imagem através arrastando na tela touch screen para o lado. A lista de imagens (em que mostra-se uma prévia de todas) é substituída por essa navegação através do touch screen. As informação sobre o produto passam a se localizar na parte inferior à sua imagem. Para a barra de rolagem vertical não se estender muito, as informação mais longas são acessadas através de botões com nomes que as sintetizam. Por exemplo: a descrição do produto é acessada, clicando-se no botão “descrição” (veja na figura 2.7).

9 Web Sites


Design Editorial M贸vel 45

Figura 3.7

Web Sites


Design Editorial Móvel 46

A diagramação modular dos sites se mantêm nas versões para dispositivos móveis, porém com o redimensionamento e o reposicionamento de alguns elementos, tornando o site o mais vertical possível. Veja a figura 2.8 que mostra o site da Google no ipad (tablet da Apple). Nesse caso, não precisou de muitas alterações devido à tela do tablet não ser tão menor quanto a dos smartphones. Sendo assim, algumas opções do Google são colocadas na horizontal, porém com algumas mudanças de posicionamento nessa horizontal, para que a legibilidade e a boa navegabilidade seja garantida. Já nos smartphones (figura 2.9), para essas informações ,é utilizado o botão de menu com o ícone já espeificado neste livro, na página 33. Através deste botão, o usuário acessa as informações que são colocadas na horizontal no caso das versões para pc’s e tablets e, aproveita-se para inserir outras opções disponibilizadas pelo google.

9 Web Sites


Design Editorial M贸vel 47

Figura 3.8 - vers茫o tablet

Web Sites


Design Editorial M贸vel 48

Figura 3.9

Web Sites


Design Editorial M贸vel 49

Aplicativos


Design Editorial Móvel 50

Para o desenvolvimento de aplicativos, é possível realizar mais alterações do que nos web sites para móbile, Isso porque, os aplicativos são especificamente para estes dispositvos e podem ter aspectos mais característicos destes. Ou seja, as formas circulares que são mais utilizadas no móbiles, a maior utilização de ícones para facilitar a acessibilidade e a composição dos elementos na página, e a verticalização dos elementos são mais explorados nos aplicativos. A diferença, é que o aplicativo ficará à disposição do usuário no menu do próprio celular através de ícone da empresa. Sendo assim, não será preciso que o usuário vá até o browser e se dirija ao site em questão. Veja na figura 3.1 o menu do smartphone com ícones para aplicativos e, na figura 3.2 a lista de aplicativos para serem baixados através do sistema que já vem instalado no smartphone.

9 Aplicativos


Design Editorial M贸vel 51

Figura 4.1

Aplicativos


Design Editorial M贸vel 52

Figura 4.2

Aplicativos


Design Editorial Móvel 53

O Instagram, rede social de fotografia, bastante utilizada nos dias hoje, já faz parte do cotidiano da maioria das pessoas que utilizam smartphones e tablets, Mas, principalmente smatphones. De qualquer lugar que o usuário esteja, logicamente com internet da operadora ou wi-fi, é possível tirar a foto e postar no instagram com edição de filtros e legendas. A rede permite que o usuários curtam fotos um dos outros e permite que nos sintamos fotógrafos. Para o projeto do aplicativo do Instagram, seus desenvolvedores tiveram o cuidado com o grid modular do instagram, que foi mantido, porém redimensionado. Além disso, os componentes são colocados de forma a garantir a legibilidade e a praticidade para o usuário em movimento, Ícones são expolorados - facilitando a acessibilidade - tanto no menu para o usuário navegar pelo seu próprio perfil, quanto no menu em que este navega pelos recursos do instagram. Veja nas figuras 3.3 e 3.4 a diferença da rede social vista pelos pelo pc’s e pelo smartphone.

9 Aplicativos


Design Editorial M贸vel 55

Aplicativos


Design Editorial M贸vel 56

Figura 4.4

Aplicativos


Design Editorial M贸vel 54

Figura 4.3

Aplicativos


Design Editorial Móvel 57

A adaptação de conteúdo que antes eram acessados via desktop (computador de mesa) ou notebooks, para dispositivos móveis, é realizada pensando nas usabilidade. Os dispositivos são usados em qualquer lugar. Há usuários que utilizam mais em ambientes fora de casa do que dentro de casa. Não é só o tamanho da tela que é alterado. A forma e as condições de utilização também são bastante modificados. Antes, o usuário acessava os web sites apenas num ambiente fechado, na maioria das vezes com luz artifical e sentado. Ao se inserirem no universo móbile, os acessos passam a acontecer em ambientes abertos e fechados, modificando a iluminação; com os usuários muitas vezes em movimento. As resoluções menores da tela faz com sejam exploradas grids mais verticais, mesmo que ainda modulares. A legibilidade, usabilidade e acessibilidade são garantidos, à medida em que estes artifícios são explorados da melhor maneira.

9 Conclusão


Design Editorial Móvel 58

Falamos também sobre as formas de desenvolvimento dos web sites adaptados para móbiles e aplicativos, pois, para os designers entrarem neste mercado que cresce a cada dia mais, é melhor que se entenda como se dá esse desenvolvimento, mesmo que não for ser realizado pelo profissional de design. Na maioria das vezes, o que vemos são profissionais que integram as áreas de desenvolvimento (programação) com o design gráfico, se tornando completos para realizar projetos como os que foram mostrados neste livro. Atualmente, mesmo aquelas pessoas que não se interessam muito pela tecnologia, acaba se inserindo neste universo móbile de que tanto falamos. Por isso, é necessário que, caso seja do nosso interesse como designers, irmos em busca de conhecimento e prática no desenvolvimento de web sites e aplicativos para móbiles para que sejamos inseridos não só como usuários, mas como projetistas dentro deste universo.

9 Conclusão


Design Editorial Móvel 59

Bibliografia Saatchi & Saatchi, F/Nazca. Panorama do Brasil na Internet. 2013. Disponível em <http://www.fnazca. com.br/wp-content/uploads/2013/12/fradar-13_ publica-site-novo.pdf>. Acessado em: 20 mar 2014. CARNEIRO, Mariana et al. Venda de smartphones e tablets crescem mais que 100% em 2013. São Paulo: 2014. Disponível em <http://www1.folha. uol.com.br/mercado/2014/01/1391973-vendas-desmartphones-e-tablets-cresceram-mais-que100-em-2013.shtml>. Acessado em: 21 mar 2014. RYAN, Erin. How mobile Devices for businesses increase productivity. 2013. Disponível em <http:// socialeyezer.com/mobile-devices-for-businessesinfographic/>. Acessado em: 21 mar 2014.

9 Bibliografia


Sabrina Pereira

Design Editorial Móvel discute sobre a ascenção dos dispositivos móveis no dia-a-dia das pessoas e sobre como o design editorial atua nos web sites adaptados para smartphones e tablets, além dos aplicativos desenvolvidos especialmente para o univeso móbile. Com objetividade, Sabrina Pereira coloca em três capítulos as principais características e peculiaridades do desenvolvimento de web sites e aplicativos para dispositivos móveis. A ideia é levar ao leitor, não só informações sobre como se dá esse desenvolvimento, mas, principalmente, como o design editorial atua dos projetos de conteúdo para smartphones e tablets.

Design Editorial Móvel  

Projeto Editorial | Sabrina Pereira