design, cultura, internet e algo mais.
O semestre mal começou e já da pra imaginar o que vem por aí…
Vai dar pra matar saudade da Ufes até dizer chega.
E pra começar, meu primeiro experimento gráfico com o SuperLogo pra disciplina de design computacional.
A partir de agora está valendo!
Há algum tempo atrás eu vi a Emily Falqueto mandar um tweet de uma parada não muito divulgada que era o Previsão Web.
Esse Previsão Web é um serviço que até então está hospedado no site da Prefeitura de Vitória e que fornece informações bem úteis, como por exemplo quanto tempo falta para o ônibus que você está esperando chegue.
O tempo passou e nesse fim-de-semana resolvi testar o negócio de verdade. Com o laptop na mochila fui até um ponto de ônibus de Jardim Camburi.
O ponto fica na R. Carlos Martins, em frente à Yázigi Internexus; de lá mesmo consegui acessar a internet pelo wifi do Vitória Digital para fazer o teste que trago a vocês logo abaixo:
A experiência de uso do serviço não foi lá uma das mais straightforward já usadas por mim mas esse é um ponto que pode ser relevado já que, segundo informações recebidas do colega Charles Moreira e do também companheiro de curso e quiçá parente distante Pedro Puppim, a aplicação já está na linha de produção e de um processo de redesign completo.
Fico um pouco ressabiado quanto a coordenação do projeto, sob comando da agência Idéia Gráfica, visto que a empresa não tem nenhum grande trabalho na área em seu portfólio maaaaaas, por enquanto, prefiro aguardar antes de fazer qualquer crítica desnecessária.
E se você quiser saber um pouco mais, veja esta matéria sobre a tecnologia utilizada no Previsão Web que eu acabei de encontrar nos relacionados do meu vídeo.
Update: parece que a Prefeitura de Vitória tirou a página do ar depois que o Metzen disponibilizou o No Ponto. Bem, depois dessa notícia fica bem fácil imaginar o porquê.
Então, terminei hoje a primeira etapa de projetinho que estive desenvolvendo há alguns dias.
Nas últimas noites troquei algumas horas de sono pra bolar alguma coisa que colocasse em prática o que eu andei estudando sobre iPhones, Androids, Windows Phones, CSS, HTML e etc. No fim das contas, o que saiu foi uma versão do site da Ufes para iPhone/iPod Touch.
Para visualizar o site o recomendado é utilizar um iPhone ou iPod Touch. No entanto, caso você não tenha um desses aparelhinhos você pode acessar usando o Safari ou o Firefox do seu computador.
Se liga, o endereço para acessar é: www.diasnormais.com/iphone/ufes
Os planos de dominação mundial são de adicionar novas features aos poucos à medida que a coisa for rolando MAAAS antes de entrar em qualquer detalhe acho legal mostrar procês um pouco do processo de desenvolvimento.
Os rafes, rascunhos, rabiscos, garranchos e tal são meio que menosprezados, né. Acho que agora eu entendo um pouco melhor o que aqueles exercícios de leiautar no papel que a professora Sandra Medeiros passava nas aulas de Gráfica II e III queriam dizer.
Wireframes são esses desenhos toscões que você vê aí em baixo. É a simplificação do desenho de uma interface com o intuito de acelerar a criação — e posterior evolução — de ideias.
É a mesma coisa que meu brother Manoel Lemos já vinha me falando há um tempo atrás. Um personagem, ou uma história em quadrinhos, não nasce linda, maravilhosa, colorida, tchubiruba e finalizada de uma hora pra outra. É preciso camadas e mais camadas de tinta, e de criação, pra um garrancho torto se tornar uma linha nítida.
Depois de delimitar um pouco as informações básicas que eu tinha na cabeça e de rabiscar algumas ideias no papel, achei que tava na hora de refinar um pouco mais os desenhos.
É lógico que não tava na hora, ainda. Pensando melhor agora eu acho que eu deveria ter continuado um pouco mais no papel e esgotado outras alternativas. Por isso, sempre pense duas vezes antes de sair do papel pro computador. Se puder, pense três.
Saindo do papel, fui pro Axure RP Pro — um programinha bem bacana que, dentre outras coisas, é excelente para criar layouts de baixa resolução de forma bem simples e rápida.
Geralmente os wireframes não são muito mais complexos que boxes cinzas com texto de preenchimento mas neste caso eu resolvi detalhar um pouco mais o layout no próprio Axure para que eu não precisasse refazer o layout no Fireworks, por exemplo. Inclusive, lá no site do Axure (pronuncia-se a.cshúr) tem disponível várias bibliotecas com os elementos de interface mais comuns para download, inclusive os do iPhone.
É válido mencionar que muito do CSS, do HTML e do Javascript que eu utilizei foi encontrado por aí, em exemplos e tutoriais.
No início, meu plano era de utilizar o jQTouch — praticamente uma extensão do jQuery especialmente criada para desenvolver sites para iPhone — com todas as funções para lidar com efeitos de transição que imitam as dos apps nativos e também com suporte a geo-localização, acelerômetro e tudo mais. Além disso, ele também vem com várias imagens, stylesheet e demos de utilização pra você poder estudar.
Acontece que a minha pressa de meter a mão na massa — ou no código — falou mais alto e o que eu acabei fazendo foi um recorte de várias partes de um CSS daqui, de um Javascript alí e foi indo, indo, até acabar.
O código php que puxa as notícias do feed do portal da Ufes, por exemplo, é um que eu já havia utilizado em outro site.
Teve muita coisa feita no olhômetro mesmo. Adiciona pixel, subtrai pixel, reseta e declara. Coisa linda.
Não descarto utilizar o jQTouch no futuro, de jeito nenhum. O que você gasta a mais pra aprender a lidar com ele no começo você acaba ganhando em dobro lá na frente com menos tempo gasto resolvendo pepinos e desuniformidades, além de ter um código mais enxuto e muitas outras vantagens incluídas.
Nem todas as funcionalidades puderam entrar nessa primeira versão. As razões, claro, são várias: prazo, complexidade, prioridade e etc. O importante nessa etapa foi: com um funcionalidade escolhida, torná-la utilizável da melhor forma possível.
Acho que isso eu consegui fazer.
A ideia então é que novas funcionalidades sejam adicionadas aos poucos para tornar o site mais completo. Nisso, a listinha de coisas a serem adicionadas só tende a crescer, mas por enquanto:
Além dessa parte toda de funcionalidade, haveriam também mudanças, adaptações e melhorias na interface, acompanhando a evolução do site. Dá pra notar que várias coisas estão diferentes entre o wireframe e o site funcionando. Umas ficaram melhores, outras piores, outras ficaram pra trás por diversos motivos.
Pessoalmente, acho que um dos desafios à frente seria o de criar uma interface que oferecesse uma experiência comum para qualquer dispositivo touch — seja ele Android, HTC, Apple, Nokia e Microsoft — não baseada na estética e convenções de uma plataforma específica, como a do iPhone, por exemplo.
E nesse momento eu acho que já começo a falar demais, pois é. Ainda não viu o site funcionando? Então vai lá ver e depois volta aqui nos comentários pra contar o que achou!
Pro caso desse projeto ser atualizado, aqui fica registradas as mudanças.
Todo mundo sabe — ou deveria saber — que a atenção aos detalhes é peça fundamental de um bom design.
Pelo visto a Microsoft sabe muito bem disso e, a partir de uma simples mudança de azul nos links das resultas de busca do Bing, concluiu que sua receita anual poderia aumentar em pelo menos $80 milhões de dólares. Isso mesmo, uma simples mudança de cor.
Claro que há muitos outros fatores a considerar na hora de discutir se um design é bom ou ruim mas o que interessa pra gente agora é saber desse tal azul milhonário. Que azul mágico é esse? Paul Ray, User Experience Manager do Bing, disse o seguinte:
A Microsoft também testou diversas vesões de links azuis nos resultados da busca. Uma específica tonalidade de azul (#0044cc) levantou de $80 a $100 milhões de dólares por ano em comparação ao azul claro que a equipe de design havia tentado antes.
Mas, vejam só vocês, ao checar a página do Bing com o Firebug essa cor NÃO aparece lá. E agora? Vladimir Carrer, o cara que fez essa descoberta, explica sobre o segredo do azul de $80 milhões do Bing inclusive relacionando com teoria da cor.
De qualquer modo, vale muito a pena assistir à apresentação que Paul Ray fez no MIX10 falando do processo de redesign feito no Bing. Eu mesmo não sendo um grande fã da Microsoft vejo que o pessoal tem feito alguns trabalhos bem interessantes por lá recentemente, o Bing sendo um deles.
Isso não quer dizer que o Google vai sair da minha homepage tão cedo. Ainda.
Designing Bing: Heart and Science
Vale a pena cada segundo das outras palestras do MIX10, tanto pra galera do design quanto pro povo desenvolvedor. Uma que eu ainda estou assistindo se chama 10 Ways to Attack a Design Problem and Come Out Winning.
Fica a minha dica então: azul é o novo verde. E vocês, qual importância dão aos detalhes na hora de fazer um trabalho?
Muita gente não sabe mas eu só volto pra Vitória no dia 1º de abril e não, não é mentira! Pois se há um motivo pelo qual eu não vejo a hora de voltar para casa, esse motivo é a 2ª Semana de Design da Ufes, ou, a SDesign 2010. A galera tá dando o sangue pro evento acontecer e a parada está fervendo de atividades bacanas já confirmadas, inclusive com conferências, oficinas e mini-cursos. Só para dar um adianto, já está confirmado:
Quem não for bobo não perde esse evento que só fica atrás do DesignCamp, ein.
Então, para entrar no clima, aproveito para postar a minha humilde interpretação para o cartaz do evento.
Não esqueça: SDesign 2010, de 26 a 30 de abril no Cemuni IV da Ufes. Mais informações na página do evento no Facebook ou no Twitter @sdesign2010.
Localizador de amigos from Saulo Pratti on Vimeo.
Depois de uma certa enrolação da minha parte para tentar converter o vídeo e tirar a porcaria do letterboxing, aí está o vídeo final do trabalho de Multimídia I da faculdade, do mesmo jeito que foi exportado do Premiere.
Não vou me extender muito neste momento, então, resumidamente, o Localizador de amigos é um conceito de aplicativo para iPhone que utiliza a integração com redes sociais e tecnologia GPS para encontrar amigos que estejam próximos de você por meio de palavras-chave e outras variáveis.
É óbvio que o vídeo não está 100% e tudo precisaria ser retrabalhado para se chegar num protótipo funcional utilizável. Quem estiver interessado e quiser ajudar, entre em contato, por favor.
Não falei nada sobre isso antes por pura preguiça.
O InterCon é menos um evento de tecnologia que inovação digital. Na verdade, o InterCon se dividirá (ou se multiplicará?) em 4 eventos paralelos. Um deles será o FF’08 que promete ser inovador no formato e no conteúdo das palestras. Nas palavras de Luli Radfahrer: “Imagine um ciclo de palestras em formato Rave. Imaginou? POIS esqueça. é muito mais.”
E se você não sabia disso, não adianta se animar agora, porque o iMasters InterCon 2008 já é amanhã agora no dia 25.
Infelizmente eu não irei por motivos financeiros-temporais. Minha participação no entanto está garantida pro Campus Party 2009. Ainda assim, se você quiser, pode acompanhar desde já tudo que está sendo publicado sobre o evento: no Twitter, Flickr, YouTube, Videolog e também nos blogs que estarão cobrindo o evento, tudo isso concentrado no Livestream do InterCon no Blogblogs.
De certo ponto-de-vista, a participação via internet não é a mesma coisa que a participação integral, a participação presencial, acontecendo ao vivo e mantendo contato direto com as pessoas, mas eu poderia afirmar que é uma extensão do evento em si, um 5º evento ocorrendo paralelamente ao evento principal.
Se quiser participar de alguma forma, basta colocar a tag intercon2008.
Todos os dias vemos centenas de marcas novas e antigas. Todos os dias nós as vemos e em todos os cantos possíveis e imagináveis elas estão lá, marcando e demarcando.
Marcas que precisam ser lembradas por nós para funcionarem e, conseqüentemente, para vender, comunicar e funcionar propriamente como uma, resultado da simplificação de conceitos numa linguagem meramente visual e estilizada.
Na imagem acima temos vários soluções gráficas bem interessantes que poderiam muito bem ser logos de diversas empresas multinacionais, certo? Mas quais seriam elas? E qual seria o conceito de cada uma delas? O que representariam?
A bem da verdade, as figuras acima são apenas as bandeiras de algumas das capitais japonesas. Sim, são bandeiras de cidades japonesas1. Não me pergunte o nome dos designers que as desenharam porque eu não sei – como saberia? -, mas aposto que você nunca imaginaria isso, vai dizer. Ao menos que você fosse uma mistura de oriental com índio, ai tudo bem.
Entretanto, é importante dizer que cada um desses símbolos possui sim um conceito por trás fazendo as devidas ligações com a língua e com os elementos da cultura nipônica. Várias delas são representações altamente estilizadas de kanjis, katakanas e hiraganas, os quais estão intimamente ligados aos simbolos heráldicos – ou seja, a representação de brasões – japoneses, chamados de Mon.
1 Dica do Deadcrow.
Só vai sacar essa quem entende de tipografia:
A ideia é do genial blog Ironic Sans e já até virou camisa.
Para os desavisados, o significado de kerning, direto da bíblia tipográfica dos designers:
Kern: Parte de uma letra que invade o espaço da outra. Em muitos alfabetos, o f romano tem um kern à direita, o j romano tem um kern à esquerda e o f itálico tem um kern em cada lado. O verbo inglês to kern significa alterar o espacejamento de certas combinações delas – To ou VA, por exemplo – para que o membro de uma letra seja projetado sobre ou sob o corpo ou o membro da outra. (BRINGHURST, Robert. Elementos do Estilo Tipográfico, p. 359. Cosacnaif. São Paulo, 2005)
