A evolução do Google e de sua marca

O Google evoluiu, e muito com o tempo. E neste tempo também aprendemos a ‘evolui-lo’. A internet se tornou algo gigantesco nestes últimos 20 anos, e se tem uma empresa e uma marca que pode ser considerada como pioneira, inovadora e pivô de tudo isso é o Google.

Tive grande resistência a usar este buscador no começo. Eu era mais simpático ao Cadê, e até ao Yahoo. Mas, com as vindas do Gmail, Orkut, Youtube, tive que ceder.

Hoje o Google lança sua nova marca, novamente remodelada, em um vídeo que mostra como não apenas a marca em si evoluiu, mas os conceitos e os produtos como um todo.

Não gosto de monopólio, gosto da ampla concorrência. Mas, quem conseguir inovar e fazer a diferença, sempre alcançará um degrau a mais que os demais. Isso é fato, isso é mérito. Isso é o mundo em que vivemos.

Anúncios

Google traz o Material Design Lite com CSS, HTML e JavaScript

O Material Design Lite (MDL) do Google permite adicionar o look and feel do Material Design em websites. O Material Design é a linguagem visual padrão para Android e que, agora, o Google propõe como multiplataforma.

De acordo com o Google, o MDL têm os requisitos para que seja caracterizado como “lite”:

  • Tem poucas dependências de forma que é fácil de instalar e usar;
  • Não depende de frameworks, permitindo que os desenvolvedores façam sua integração com qualquer cadeia disponível de ferramentas para front-end;
  • Sua base de código é relativamente pequena;
  • Têm foco restrito, implementando as boas práticas do material design e não é um framework abrangente.

O MDL não é a primeira implementação de HTML/CSS/JS do material design e existem alternativas como o Materialize e Material Bootstrap. A principal vantagem que o MDL trás em relação a estas opções desenvolvidas pela comunidade, de acordo com o Google, é que o MDL foi desenvolvido “com a colaboração das equipes de Material Design e Chrome UX e é constantemente revisado buscando aderência às especificações do material design”.

Antes do MDL, o Polymer era a implementação canônica de material design para CSS/JS. Porém, comparado ao MDL, o Polymer tem escopo maior e vai além do domínio visual, incluindo componentes para comunicação de dados e componentes não especificados pelo material design.

Até o presente momento, o MDL não é otimizado nem suporta o uso de componentes individuais, por exemplo, um botão. Ainda sim, para desenvolvedores que querem usar apenas uma parte dos componentes MDL, é possível criar uma distribuição MDL customizada comentando componentes indesejados do material-design-lite.css e scripts inadequados do Gulpfile. Feito isso, basta executar gulp.

O MDL segue a convenção BEM de forma que os nomes para cada classe css são consistentes, isolados e expressivos. O Google detalha quais boas práticas eles seguiram ao aplicar BEM no desenvolvimento do MDL. Por outro lado, o BEM pode levar a explosão no comprimento dos nomes de classes e, de acordo com o feedback inicial, o MDL parece ser sensível a esse problema, por exemplo, ao necessitar de dezessete nomes de classe diferente para um simples card que é um conceito básico do material design.

O Google afirma que o MDL funciona em todos os navegadores modernos (Chrome, Firefox, Opera, Microsoft Edge e Safari) com degradação suave em navegadores como o IE9. Também sugerem referenciar a CDN para incluir o MDL no website, mas também é possível baixar ou importá-lo via npm ou Bower.

Fonte: InfoQ Brasil

Design Responsivo e Experiencia do Usuário (UX)

Equipes de desenvolvimento tem trabalhado para desenvolver sites para diferentes dispositivos, mas para que se tenha êxito em um projeto web é preciso levar em consideração não apenas o conteúdo em si, mas também o design e a performance de usabilidade em cada tipo de dispositivo.

Definindo um design responsivo
Web Design Responsivo (WSR ou RWD em inglês) é o desenvolvimento web alinhando mudanças dinâmicas na aparência da página, de acordo com o tamanho e orientação do display utlizado. Por exemplo, uma pagina para ser considerada responsiva deve se adaptar tão bem na tela de um smartfone, como em tablets e computadores convencionais. Para isso, o design responsivo é utilizado para parear as diversas plataformas, tendo assim a tarefa de oferecer o mesmo conteúdo aos vários usuários de um site na web.

Esta solução é providencial para que não precisem ser criadas várias páginas com código fonte diferente para um mesmo conteúdo, dando um retrabalho para a equipe de desenvolvimento. Além de demandar tempo e investimento maior por parte de quem estiver por trás do projeto.

Sendo feito desta forma, o mesmo código HTML serviria para vários dispositivos, usando apenas o CSS para mudar a aparência da página de acordo com cada caso. Isso se torna transparente ao usuário, que praticamente não notaria a diferença ao acessar em diferentes dispositivos.

No design responsivo, o projeto é ágil, os elementos da página se modelam de acordo com a resolução da tela, aumentando ou diminuindo tanto imagens como textos. O projeto Responsivo conta com grids baseadas em proporção para reorganizar o conteúdo e elementos de design. As colunas diminuem ou aumentam em relação a uma tela de Smartfone, Tablet ou Notebook por exemplo.

Adaptável as novas tecnologias
Por ser modular, a performance das páginas estariam disponíveis a mudanças mesmo com o surgimento de novas tecnologias. Trabalhando responsivamente, os conteúdos podem se adaptar a inteligencia em óculos e relógios, objetos que estão sendo desenvolvidos nos últimos tempos e em breve devem se tornar populares, a exemplo dos tablets e demais portáteis.

Concluindo
O design responsivo é uma ferramenta, e como todas as outras requer cuidado. Se preocupar apenas com a aparência e deixar o conteúdo de lado, ou vice-versa, não pode ser o ponto final. As equipes de desenvolvimento devem sempre cuidar desta fusão, preocupando-se com o conjunto Conteúdo x Design x Performance. A usabilidade deve ser o carro-chefe, pois o usuário do outro lado do código sempre será o foco principal em um projeto web.

Modelo de trabalhos – mídia impressa e digital

Olá for all!

Como trabalho final, passei a meus alunos dicas de como montar a identidade visual de uma empresa, em uma campanha de divulgação de produtos e/ou serviços. Postarei aqui, alguns exemplos de panfletos e banners, em formato para web e impressão, para que sigam e entendam como montar estes trabalhos.

Panfleto formato padrão
Modelos de banner para web

 

Modelo de banner impresso
Modelo capa da rede social FACEBOOK
Modelo Backgroud (fundo) para rede social TWITTER