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.

Do wireframe ao mainframe

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.

É beeeeeta!

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:

• Lista de telefones úteis
• Cardápio do RU
• Filmes em cartaz no Cine Metrópolis

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!

O que mudou?

Pro caso desse projeto ser atualizado, aqui fica registradas as mudanças.

• 1.0.0 — release inicial (15/07/2010)

Referências

• jQTouch — A jQuery plugin for mobile web development.
• Building iPhone Apps with HTML, CSS, and JavaScript
• iPhone Samples
• Web Design Inspiration for the iPhone

Observações

• O projeto é beta e totalmente pessoal, não tendo nenhum vínculo com a Ufes.
• Dúvidas ou sugestões? Use os comentários abaixo ou me mande um email.

Foi legal MESMO ver aquele lugar todo lotado de gente de design. Lá estavam presentes professores, alunos e profissionais. Gente que eu conhecia, gente que ainda vou conhecer.

Nas palavras do vice-reitor da Ufes, Reinaldo Centoducatte, o auditório do Cemuni IV é um local importante na história da universidade e dos próprios estudantes. Quem já teve a oportunidade de encarar colegas e professores nas apresentações de PGs do curso deve mesmo ter alguma lembran;a especial do lugar.

Ontem, mais do que nunca, o auditório foi palco de um evento que ficará marcado na história do curso de Desenho Industrial.

Depois da apresentação houve a palestra da designer Helena de Barros mostrando o trabalho surreal dela com foto motagens photoshopagens.

E o evento continua até o dia 30. Mais novidades no @sdesign2010, atualizado por este que vos escreve! =D

Update: nem pra vocês me avisarem que o vídeo tava incompleto, né? Corrigido.

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?

• Mini-cursos Tipocracia e Outras Fontes
• Conferências Colméia, Nitrocorpz e FiveCom
• Mostra competitiva de Projetos de Design

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.

• Clique aqui para baixar o arquivo .jpg de alta-resolução (3508 × 4961 – 1.83MB)

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.

Participe do grupo de discussão do DesignCamp Vitória no Google Groups.

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.

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.

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 japonesas¹. 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.

¹ Dica do Deadcrow.

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)