Click here to load reader

WIP Mobile- Especificação Gráfica e Técnica

  • View
    797

  • Download
    0

Embed Size (px)

Text of WIP Mobile- Especificação Gráfica e Técnica

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012

Work In Perspective MobileEspecificao Grfica e Especificao Tcnica

Pgina 1 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012

ndice

ndice ............................................................................................................................................. 2 Introduo ..................................................................................................................................... 3 Especificao Grfica..................................................................................................................... 4 Estudo Grfico ........................................................................................................................... 5 Logtipo................................................................................................................................. 5 cones e Controlos ................................................................................................................. 6 Estudo Cromtico ...................................................................................................................... 8 Estudo Tipogrfico..................................................................................................................... 9 Estudo de Interfaces................................................................................................................ 10 Estudos de Grelhas .............................................................................................................. 10 Estudos de Cinzentos .......................................................................................................... 13 Estudos de Simulao.......................................................................................................... 16 Especificao Tcnica .................................................................................................................. 19 Mapa de Navegao ................................................................................................................ 19 Modelo/ Arquitetura do Sistema ............................................................................................ 20 Fluxogramas das funes principais........................................................................................ 22 Modelo de base de dados ....................................................................................................... 24 Concluso .................................................................................................................................... 27

Pgina 2 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012

IntroduoAtravs do manual de especificao grfica e especificao tcnica, pretende-se consolidar e especificar mais detalhadamente as solues delineadas para a implementao da aplicao. Mais concretamente, a elaborao da especificao grfica permite a criao e apresentao de toda a identidade grfica do projeto, como o logtipo, cones, sistema cromtico e tipogrfico, entre outros. J a nvel de especificao tcnica, esta pretende caracterizar a implementao tcnica das funcionalidades da aplicao.

Pgina 3 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012

Especificao GrficaPara a criao da identidade visual da marca, necessrio recorrer elaborao de vrios componentes chave, de forma a estes fazerem transparecer para o utilizador os valores e caractersticas que diferenciam a marca da concorrncia. Estas componentes-chave da especificao grfica sero detalhadamente explicadas neste documento, estando organizadas da seguinte forma: Estudo Grfico Estudo Cromtico Estudo Tipogrfico Estudo de Interfaces

Pgina 4 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012

Estudo GrficoLogtipo O projeto Work In Perspective um projeto que se encontra a ser desenvolvido simultaneamente para trs plataformas: televiso, internet e dispositivos mveis Android, sendo que cada uma destas plataformas est atribuda a um grupo. um projeto que exige uma grande cooperao entre os trs grupos responsveis, no s a nvel de desenvolvimentos tcnicos e grficos, como tambm a nvel especialmente de tomadas de deciso. Para facilitar estes mesmos processos, foi decidido que cada grupo iria elaborar individualmente alternativas grficas, para mais tardiamente serem todas analisadas e apenas uma escolhida para ser aplicada nas trs plataformas do WIP. Assim sendo, apresentamos aqui neste estudo as duas alternativas elaboradas por ns para o logtipo da aplicao:

Fig.1- Alternativa para o logtipo

Fig.2- Alternativa para o logtipo

Pgina 5 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 O logtipo representado na Figura 1 constitudo por trs elementos: uma representao simblica de uma fbrica, prdio e ao mesmo tempo uma mo do utilizador; uma lupa e ainda a assinatura da aplicao. Utilizamos esta juno de elementos pois achamos que no fundo representa bem as capacidades do WIP, que a procura de propostas de emprego atravs de um clique ou mais concretamente no nosso caso, num toque de dedo no ecr de um dispositivo Android. No logtipo representado na Figura 2 o conceito bastante semelhante ao referido anteriormente, mas um pouco mais desviado do conceito de fbrica, e mais inclinado para uma infraestrutura mais contempornea.

cones e Controlos Em toda a aplicao o utilizador ir encontrar diferentes cones e controlos representativos de aes que pode efetuar no Work In Perspective. Os cones so todos originrios e nativos dos dispositivos Android, facilitando assim o seu reconhecimento e utilizao apropriada, variando apenas a sua cor de acordo com a palete de cores escolhida.

Fig.3- cones da aplicao quando aplicados em fundo branco e fundo preto

Pgina 6 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012

Fig.4- cones da aplicao quando pressionados em fundo branco e fundo preto

Pgina 7 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012

Estudo CromticoA paleta de cores definida para o projeto aplicada para organizar, diferenciar, clarificar e destacar os elementos utilizados na aplicao. Mais concretamente, o esquema de cores o seguinte:

R: 45; G: 88; B: 115; C: 87,06%; M: 60,78%; Y: 37,25%; K: 17,65%;

R: 158; G: 191; B: 59; C: 47,92%; M: 7,06%; Y: 100,00%; K: 0,00%;

R: 196; G: 217; B: 115; C: 26,27%; M: 0,78%; Y: 70,59%; K: 0,00%;

R: 228; G: 237; B: 182; C: 11,37%; M: 0,00%; Y: 35,69%; K: 0,00%;

R: 228; G: 237; B: 182; C: 11,37%; M: 0,00%; Y: 35,69%; K: 0,00%;

A cor azul utilizada na nossa aplicao para transmitir ao utilizador alguma tranquilidade e subtileza. Esta uma cor tambm bastante ligada formalidade, e ao mesmo tempo transmite estabilidade e serenidade aplicao. Este esquema de verdes foi escolhido propositadamente para dar alguma profundidade aos menus e s pesquisas feitas na aplicao. tambm uma cor que est intimamente ligada s cores nativas do Android. J o laranja, uma cor bastante quente, vibrante, forte e modernista. Por estas razes, achamos que uma cor bastante adequada para ser utilizada nas informaes de notificao e alertas da aplicao.

Pgina 8 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012

Estudo TipogrficoA fonte escolhida para ser utilizada na aplicao foi a Open Sans. Esta fonte foi criada por Steve Mattesson, sendo ela open-source, humanista e no-serifada, estando disponvel no diretrio Google Fonts para utilizao livre. uma fonte com um estilo considerado muito amigvel para o utilizador, de fcil leitura e que est otimizada para impresses, internet e dispositivos mveis. conveniente referir que ser utilizada a Open Sans Regular em todos os textos da aplicao, sendo estes com tamanho de 12px. A nica exceo ser feita aos ttulos, onde ser utilizada a Open Sans Bold, com um tamanho definido de 14px.

Open Sans Regularabcdefghijklmnopqrstuvwxyz %*+?!1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ

Open Sans Boldabcdefghijklmnopqrstuvwxyz %*+?!1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ

Pgina 9 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012

Estudo de InterfacesEstudos de Grelhas A definio dos esquemas de grelha por vezes parece ser desprovida da importncia que exerce na definio do layout de uma aplicao. A essncia das grelhas sobretudo a organizao. Uma utilizao eficaz e interessante da aplicao exige um bom equilbrio de esttica e das funcionalidades, de forma a ser uma experincia informativa mas tambm visualmente interessante, mantendo sempre a ateno do utilizador. Por estes mesmos fatores, desenvolvemos os esquemas de grelhas dos ecrs nicos do Work In Perspective, utilizando uma resoluo de 800x480 pixis:

Fig.5- Representao da grelha do ecr de Login com as respetivas medidas

Pgina 10 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012

Fig.6- Representao da grelha do ecr da Landing Page com as respetivas medidas

Fig.7- Representao da grelha do ecr de Preferncias com as respetivas medidasPgina 11 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012

Fig.8- Representao da grelha do ecr de Detalhes da Oferta/Empresa com as respetivas medidas

Pgina 12 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 Estudos de Cinzentos Os estudos de cinzentos so o passo seguinte definio das grelhas. Uma vez que neste ponto ainda no existem os elementos definidos para colocar na grelha, utilizam-se formas em escalas de cinzentos de forma a preencher os espaos vazios, sendo mais tarde substitudos pelos elementos finais. Com a utilizao de diferentes nveis de cinzentos, d-se algum relevo e distino na colocao das forma