Já comentei diversas vezes como a prototipação é importante na criação de interfaces, um dos métodos mais simples e eficazes é fazer todo o processo no papel.

Prototipação em papel é uma excelente forma de simular interfaces pois permite rápidas modificações e testes com usuários reais.

Deixo aqui um vídeo criado pela Equipe de Inovação da MJV Tecnologia e Inovação, que exemplifica esse processo e mostra os beneficios desta técnica.

Já postamos aqui algumas ferramentas que ajudam o processo de prototipação, confira o post Imprima moldes para fazer seu wireframe.

Até a próxima.

Uma ótima dica para quem, assim como eu, gosta de fotografia.

Pra nós que somos amadores ter um equipamento profissional pode ser um investimento caro, entetanto é possivel obter bons resultados com uma boa edição e uma camera que permita que o arquivo seja salvo no formato RAW (sem compressão).

Pensando nisso, o designer Chris Spooner (@chrisspooner) criou um tutorial que ensina boas maneiras de fotografar/editar fotos para utilização em redes sociais, curriculum, etc.

Veja o tutorial completo no blog Spoongraphics

Que o wordpress é um dos cms mais ricos na questão de desenvolvimento de plugins ou extensões todo mundo sabe, mas hoje deixo uma dica pra que quer integrar facilmente uma biblioteca de vídeos do Vimeo ou do Youtube.

Com o Tubepress é possível importar playlists, videos postados em canais, videos relacionados a um tema ou até mesmo a pesquisas.

Alem de tudo isso, é fácil fazer a estilização da página utilizando CSS.

Gostou? Faça o download do plugin no repositório oficial.

Abraços.

A Banda OK GO já ficou conhecida com o clipe em que cantam e dançam sobre esteira elétricas.

Agora inovaram com um clipe interativo, um experimento em HTML 5  com apoio do Google, da música “All is not lost”.

Disponível no endereço allisnotlo.st, o website tem um visual interessante, com um bom trabalho de fotografia e fontes apropriadas, onde é necessário digitar uma “mensagem” que faz parte da interação do video.

O processo de carregamento é um pouco lento mas vale a pena, afinal é uma experiência que nao estamos habituados a ver todos os dias.
É recomendável o uso do Google Chrome embora eu acredite que o Firefox 5 tenha um desempenho satisfatório.

Acesse agora e de sua opinião sobre o projeto e como o mesmo se comportou no seu browser.

Abraços.

Você provavelmente já viu um vídeo com a letra de alguma música certo?

Eles seguem sempre um “padrão” como Fundo chapado e letras brancas ou a letra por cima do vídeo iguais aos filmes legendados, usam fontes como Arial e Helvetica que propiciam uma leitura rápida e legível.

Mas será que é possível ir além? Bem, Liam Harrison provou que sim.

Assista o vídeo e delicie-se com esse excelente trabalho:

Quem não gosta de passar longas horas em um museu? Afinal é um excelente lugar para ampliar nossa cultura, explorar novos mundos e adquirir muito conhecimento!

Preparamos uma lista com alguns dos melhores museus espalhados pelo mundo para sua inspiração e para colocar na sua agenda na próxima viagem.

1- Museu de Arte Moderna (Museum of Modern Art) – MOMA

Localizado na cidade de Nova York. É um dos mais importantes museus de arte moderna do Mundo. Foi fundado em 1929.

http://www.moma.org/

O quadro Noite estrelada, Van Gogh, 1889 é uma das inúmeras obras no acervo do museu.

2- Museu do Louvre (Musée du Louvre)

Localizado em Paris. É  um dos museus mais conhecidos do mundo. É a casa da Mona Lisa, Vênus de Milo, A liberdade guiando o povo e de outras grandiosas obras de arte. Foi fundado em 1793.

http://www.louvre.fr/

Mona Lisa ou La Gioconda, Leonardo Da Vinci, 1503-1507.

A liberdade guiando o povo, Eugene Declacroix, 1830.
3- Galeria Nacional (National Gallery)

Localizado no centro de Londres. Lugar de importantes artistas como: Rubens, Rembrandt, Caravaggio, dentre outros. Foi fundado em 1824.

http://www.nationalgallery.org.uk/

Marte e Vênus, Sandro Botticelli, 1483.
4- Museu do Prado (Museo Nacional del Prado)

O mais importante museu da Espanha. Lá está a mais importante coleção de arte espanhola do mundo. Foi fundado em 1819.

http://www.museodelprado.es/

As meninas, Diego Velazquez, 1656.
5- Museu de Arte de São Paulo Assis Chateaubriand – MASP

Localizado na Av. Paulista, em São Paulo. Foi fundado em 1947. Obras dos italianos Rafael, Botticceli e Bellini, do flamengo Rembrandt e dos espanhóis Velazquéz e Goya fazem parte da coleção do museu.

http://masp.art.br/

A estudante, Anita Malfaltti.

5- Galeria Uffizi (Galleria degli Uffizi)

Localizado em Florença, Itália. Foi fundada em 1580. Sua coleção compreende obras-primas aclamadas, incluindo trabalhos de Giotto, Piero della Francesca, Fra Angelico, Botticelli, Leonardo da Vinci, Raphael, Michelangelo e Caravaggio.

http://www.uffizi.com/

O Nascimento de Vênus, 1483, Sandro Botticelli.

Google Art Project

http://www.googleartproject.com/

Projeto do Google permite conhecermos 17 grandes museus (MoMa, o Kampa, em Praga, o Rainha Sofia, em Madrid, o Palácio de Versalhes ou a Galeria Nacional de Londres). Por cada museu, há uma obra de arte apresentada em altíssima resoluçã. Cada imagem contém 14 mil milhões de pixels, o que a torna mil vezes mais detalhada do que uma foto comum de uma câmara digital. Este conjunto conta com 385 salas onde os utilizadores podem “passear” e consultar, a partir do seu computador, quadros e obras de arte para obter informações acerca das peças e dos artistas.

Assita ao vídeo sobre o Google Art Project

Hoje apresentamos uma grande novidade aqui no Web Design Blog. Um novo recurso que contará com a ajuda de todos os nossos leitores.

O SHOWCASE

Mas o que é um showcase?

Conhecidos sites estrangeiros mostram trabalhos enviados de pessoas de todo o mundo, como o TheFWA ou o Awwwards, porem não temos um bom representante brasileiro (com exceção ao Logolicia). Pensando nisso o WDB inaugura sua sessão de Showcase, onde qualquer um pode enviar e expor seus trabalhos de web design.

E sabe qual é a grande vantagem disso ? A seção showcase vai servir como fonte de inspiração, já que de forma rápida e pratica você pode ver diversos trabalhos de diferentes temas e pessoas.

Nosso recurso está em fase de testes, mas já é possível enviar os seus jobs!

Para ver os trabalhos basta clicar aqui ou na opção showcase do menu, ali você dar sua avaliação, em forma de nota ou comentário.

Vote, comente, participe. Nos contamos com você.

Hoje trago uma dica rápida mas muito útil pra quem esta desenvolvendo um tema do zero ou com base em um template/framework.

Eu sou fã de carteirinha da plataforma WordPress, tanto para desenvolvimento de blogs quanto a de sites em geral.
Ele é um excelente CMS e pra quem não conhece, vale a pena experimentar.

No Painel de Temas você tem uma lista de todos os temas instalados no seu WordPress, vou utilizar como exemplo o Painel do Web Design Blog:

Observe que o tema que esta ativo aparece em destaque no topo, no nosso caso o WP-Framework, que foi o framework que utilizei como base para criar o tema do nosso site.

Diferente de outros CMS, o nome do tema não esta em um arquivo PHP, HTML ou XML, ele se encontra dentro do arquivo styles.css, isso mesmo, um arquivo CSS.

Abrindo o style.css que geralmente esta na pasta raiz do template, você vai ver que toda a descrição do tema esta em forma de comentários, no topo do arquivo.

Basta fazer as alterações seguindo os campos apresentados.

Theme Name: Nome do Tema

Theme URL: Website do tema

Version: Versão do Tema

Description: Descriçao do tema

Author: Autor

Author URL: Website do autor do tema

Tags: Tags relacioadas ao seu tema.

Como fiz as alterações com base no nosso blog, meu arquivo style.css ficou assim:

E para alterar a imagem do tema que aparece no painel?

Simples, basta criar uma imagem PNG com o tamanho 300px x 225px, salvar na pasta raiz com o nome “screenshot”.

Depois das alterações, nosso painel de temas ficou assim:

Pronto, alterações feitas sem muita dor de cabeça.
No futuro vou falar sobre o WP Framework, esse excelente tema que utilizo sempre que vou trabalhar com wordpress.

Este artigo foi lhe foi útil? Então não deixe de comentar!

Abraços, @adriano_trenahi ao som de Queen – Somebody to Love.

Recursos para o uso de fontes na web
Dando continuidade ao estudo da tipografia, apresentamos nesse segundo post maneiras de não ficarmos limitados as fontes seguras quando desenvolvemos um site.

Abaixo estão as principais alternativas que designers usam para ter mais liberdade no uso de fontes em websites.

Tag <font>

Foi o primeiro meio para os web designers terem algum controle sobre a tipografia. Permite editar cor e tamanho.

<FONT FACE=Times>Fonte Times New Roman </FONT>

Resultado: Fonte Times New Roman

Substituição por imagem

Permite o uso de tipografia avançada, trocando o cabeçalho por uma imagem. Permite o uso de qualquer fonte, porém com zoom fica muito ruim, além de causar problemas com o CSS, caso esteja desabilitado.

sIFR

Substituição Flash Escalável de Inman (Scalable Inman Flash Replacement) permite usar Flash, JavaScript e CSS para aplicar fontes, é uma maneira que requer pouco esforço e possui um bom visual, porém o uso excessivo do flash pode causar problemas de performance.

@font-face

É possível definir famílias de fontes que não estão no computador do usuário. Possui uma ampla margem de uso de fontes, porém há o problema de licenciamento e performance.

@font-face {
font-family:nome para a font importada;
src: url ('endereço de onde encontra-se a font');
}

Aplicando o @font-face pode-se utilizar a fonte como qualquer outra. Ex:

.paragrafo {
font-family: nome para a fonte importada;
}

Mais informações
Online
30 melhores recursos web para tipografias
http://www.webdesignerdepot.com/2010/06/30-of-the-best-web-typography-resources-online/

A Foto que ilustra a postagem é cortesia do © Ariusz – Fotolia.com