Projeto: Portflio U.

I

OBJETIVO

Elaborar um portfolio consistente com foco em se promover como artista especializado em criao de
interfaces (U.I Artist, ou seja, User Interface Artist), de acordo com as recomendaes dadas por Cenildon Murari,
profissional do ramo que ajudou a encabear vrios projetos do gnero.
Para isso, so necessrios estudos aprofundados de grficos para interface, principalmente no que se diz
respeito abstrao desses elementos. Realizando uma anlise semitica e ergomtrica no que se diz respeito a
transmitir uma mensagem de forma abstrata e sucinta, porm, valendo-se de apelos visuais, tal como palhetas de
cor, efeitos especiais e ou animaes simples, porm que tornem o jogo mais orgnico ou vivo.
Dentro desses estudos, devem ser considerados os seguintes elementos:

cone de jogo: que deve ser livre de rudos, passando somente uma ideia dos elementos do jogo,
porm deve possuir feitos de iluminao e cores com maior saturao.

Tipografia: para jogos que possui grande carga de informao textual, deve-se ser considerada uma
tipografia prpria para a interface, mas de tal modo a no deslocar a ateno do texto principal
(como nos jogos de RPG eletrnico). No entanto, essa tipografia, em vrios momentos, deve ser to
apelativa quanto qualquer outra informao. Por exemplo, a palavra Buy deve ser destacada,
quase saltando da tela, para que o usurio sinta-se impelido a clicar.

Logotipo: esse elemento deve ser trabalhado de forma a poder ser aproveitado em todos os
momentos do jogo, como sendo um elemento de apoio, mas no de destaque. Com o tempo, acaba
se tornando uma marca que representa a franquia. Como por exemplo, o conjunto de quatro
tringulos que representa a franquia Zelda.

Pictograma: muitas vezes, para os botes, muito importante o uso de figuras pictricas j pr-
estabelecida. No h a necessidade de querer reinventar a roda, uma vez que as chances de
rejeies so grandes.
Em um recente estudo elaborado como proposta de um redesign do jogo Resident Evil 4
Mobile (que fora publicado para iPhone e Android), foi constatado que os botes no transmitiam a
mensagem de forma eficaz, sendo que somente menos de 40% dos entrevistados reconheceram as
aes associadas aos smbolos.
Isso no significa que o pictograma deva ser pobre, por isso deve-se fazer o mximo esforo
possvel para que esse se ambiente ao jogo, utilizando outros recursos, tal como aplicao desses em
um container elaborado. Como no jogo Launcher Hot Air Balloon Flight, em que todos os containers
eram semelhantes s caixas de ao com engrenagens.

Paleta de cor: buscar sempre utilizar palheta com cores saturadas para situaes em que se deseja
impulsionar o jogador a apertar, como por exemplo, para vender determinado item na game store.
Dentro do ambiente de jogo, no necessrio tal palheta, para no entrar em conflito com outros
elementos, como por exemplo, com eventuais inimigos.
A palheta de cores nunca deve fugir daquelas determinadas para o jogo, para que no fique
discrepante, ou seja, mesmo que saturada, necessrio que essa faa possua tonalidades prxima
daquelas adotadas no produto.

Botes: esses por, geralmente, serem os container elementos grficos da interface do produto
devem estar completamente contextualizado com o mesmo, de forma a unificar todos os elementos
da interface, com o contedo do jogo, e cumprir a tarefa de transmitir a mensagem para o usurio.
Com isso evitam-se produtos mal elaborados, ambguos, coxas de retalho (quando se usa um
elemento pronto, conforme a necessidade), discrepncia e outros defeitos que podem desqualificar
um produto de modo geral.
Por exemplo, em um produto cuja temtica seja fico cientfica, no seria lgico utilizar
botes de um produto anterior, a no ser que possussem mesma temtica e uma ligao entre eles
alm do desenvolvedor em comum. E mesmo nesse caso, vlido tratar cada produto como um
produto diferente, sendo assim, elaborar uma nova famlia de elementos de interface, para no
banalizar ambos os produtos bem como o desenvolvedor.

GUI (General User Interface): compreende-se joystick virtual (quando o aparelho no possui
naturalmente), botes de aes, barra de vida, energia e/ou slip, elemento icnicos, timer, round e
outros itens grficos. interessante que a GUI tenha completa sincronia com a temtica do produto,
evitando-se uso de GUI padronizados ou pr-concebidos.
A GUI deve ser to atraente como o produto inteiro, pois o usurio lida com essa durante
90% ou mais do tempo que se dedica utilizando esse. Por esse motivo, a GUI no pode ser dbia,
levando o usurio s escolhas equivocadas destacando cada elemento um do outro, mas sem deixar
de ter semelhanas entre eles ou entre o produto.
Vale lembrar que, mesmo que a GUI seja elaborada de uma forma atraente, essa no pode
ser conflitante com a informao principal do jogo, mantendo uma leveza tpica para interface, Por
exemplo, uma GUI no pode ser to atraente ou mais bem feita quanto o jogo em si, e sim ser parte
do conjunto desses.
APRIMORAMENTO

Ainda dentro dos OBJETIVOS proposto o redesign dos projetos Tap Sandboard e Croc Crusher, realizado
para a empresa Up Top Games e, diante de tantas problemticas, mostraram-se ineficazes. Em uma breve anlise
de cada um, pode-se notar que em Tap Sandboard, por exemplo, os botes so constitudos somente por texto.
Isso se mostra ineficaz, pois restringe o produto somente o idioma original (no caso desses, o ingls) e no
momento de se traduzir cada um, pois muitas vezes o texto acaba ficando maior do que o container original, sendo
necessrio elaborar novamente todo o layout de cada uma das telas do produto.
Croc Crusher por sua vez, possui uma famlia de cones, mas tambm utiliza texto em seus botes, sendo
que os elementos grficos atem-se somente aos produtos vendidos na game store (loja virtual inserida dentro do
produto) que relativamente realiza sua tarefa: chamar a ateno do usurio lgico, uma vez que so os nicos
elementos pictricos fora do ambiente de jogo. Alm disso, dentro do prprio ambiente de jogo, a necessidade de
uma GUI mais bem elaborada clara, j que esse reproduz uma mquina estilo fliperama, mas no confere
feedbacks grficos suficiente para o que o usurio entenda as situaes em que se encontram.
Essa etapa do processo tem como objetivo buscar melhorar os trabalhos j publicados, bem como aprimorar
o olhar tcnico, realizando uma introspeco e crtica baseando-se no produto que se tem hoje, e naquele que se
quer obter aps realizar os estudos.
O processo de autocrtica vir aps realizar estudos de tutoriais encontrados na internet para que se possa
ter tambm a parte prtica do processo de criao e aprimoramento de interface, e produzindo botes e cones mais
atrativos, de forma a conquistar o usurio. Tais tutoriais focam softwares j conhecidos: Adobe Photoshop e
Illustrator, e posteriormente, o uso de After Effects (tambm da Adobe) para realizar pequenos efeitos visuais, que
so elaborados de forma simples, porm que consequentemente acabam por enriquecer o produto final.

Prazo

O estudo terico j teve incio a partir do terceiro semestre do curso de Design Grfico ministrado pela
instituio Centro Universitrio SENAC, onde foram abordados diagramao, elaborao de layouts (mesmo que s
direcionado para composio ambiental), estudo de cones, signos e pictogramas ergomtricos, tipografia
apropriada e usuais, distncia para observao, abstrao da forma e outras bases tericas.
A parte prtica foi levada em considerao e, apesar das limitaes e desafios, chegaram ser publicada em
com certa maturidade, uma vez que fora buscado atenuar os problemas claros, na medida do possvel.
No entanto, com essa nova proposta, interessante que se pratique um ou mais tutoriais por dia, e,
embasando-se nesse, aplicar as habilidades adquiridas reproduzindo outros elementos de interface com mesmos
aspectos visuais e tericos formando assim uma famlia grfica.

Incio: 24/12/2012
Trmino: 15/02/2013
HARDWARE

Produto Preo Link
Multifuncional HP Office Jet Pro 8600 De R$ 399,00 R$ 990,00 http://migre.me/cr0o1
SOFTWARE

Produto Empresa Custo
Photoshop CS5. 5 e CS6 Adobe A verificar
Illustrator CS5. 5 Adobe A verificar
After Effects Adobe A verificar
TUTORIAIS

Abaixo esto listados na tabela uma lista de reproduo com os tutoriais encontrados at ento. Vale
lembrar que, apesar de muitos deles parecer no estar vinculado ao tema interface (como a criao de Carto de
Crdito) acaba por agregar conhecimento que posteriormente na elaborao de outros elementos grficos.
Contedo Abordado Link para o Tutorial
Criar Objetos em 3d http://migre.me/cvOHA
Globo 3d http://migre.me/cvOQv
Carto de Crdito Realista 1 http://migre.me/cvORt
cones e Botes Luminosos http://migre.me/cvOTi
Boto Web http://migre.me/cvOUS
Vdeo Tutorial de Interface http://migre.me/cvOVp
Style Ring estilo Mac http://migre.me/cvOWj
Cmera Digital http://migre.me/cvOWN
Criar cone de Monitor http://migre.me/cvOXc
Bssola Detalhada http://migre.me/cvOXJ
cone de Lpis Realista http://migre.me/cvOYw
Carto de Crdito Realista 2 http://migre.me/cvOZh
Interface Futurista No-Funcional http://migre.me/cvP0m
Boto de Poder High-tech http://migre.me/cvP0P
Navegao estilo Volkswagen http://migre.me/cvP1S
Velocmetro http://migre.me/cvP2A
cone de Tablet estilo Bamboo http://migre.me/cvP3p
Criar Celular http://migre.me/cvP3Z
Criar Switches http://migre.me/cvP4p
Velocmetro NOS http://migre.me/cvP4B
Digital Tutors U.I http://migre.me/cvP55
Digital Tutors U.I 2 http://migre.me/cvP5h
Botes Azuis http://migre.me/cvP5H
Ma Verde Realista http://migre.me/cvP5W
Criar Bloco de Notas http://migre.me/cvP6f
Vdeo Tutorial - GUI http://migre.me/cvPnY
Vdeo Tutorial GUI 2 http://migre.me/cvPqx
Vdeo Tutorial GUI 3 http://migre.me/cvPrZ
Vdeo Tutorial GUI 4 http://migre.me/cvPwr
Vdeo Tutorial GUI 5 http://migre.me/cvPxD
Vdeo Tutorial GUI 6 http://migre.me/cvPz8

REFERNCIAS

Abaixo lista de sites e portflios que serve como referncia para estudos.

Links
http://dribbble.com/creativemints?page=1
http://junglespider.deviantart.com/art/Flash-PreLoader-Animation-
129319052?q=gallery%3Ajunglespider%2F34694459&qo=13
http://www.behance.net/gallery/Circus-City-(IOSAndroid)/5961457
http://www.behance.net/gallery/Dragon-Slayer-(Glu-Mobile)/6089099