Design


 

Cadê a inspiração?

 

Você já deve ter feito essa pergunta em algum momento onde sua inspiração resolveu tirar uma folguinha ou até mesmo aquelas férias de fim de ano. É complicado apontar caminhos onde você de fato vai encontrar inspiração, porque cada um tem um estilo diferente, e gostos em particular. Uns gostam de ouvir música e outros de dar uma volta. Então tentarei listar caminhos variados que possam abranger ao máximo o gosto de cada um.

Ouça músicas

Não tenho dados estatísticos, mas acho que não estou errado em dizer que esse é um dos métodos mais usados pelos freelancers, designers, ilustradores e etc. Independente do seu estilo musical, estar em contato com melodias que te agradam fazem com que seu cérebro organize suas idéias, deixando espaço para que novas possam fluir, sem contar que a música faz um bem enorme para a saúde e para a mente.

Então sempre que estiver sem inspiração coloque um fone de ouvido, faça uma playlist das suas músicas preferidas e abra as portas para a criatividade.

Caso seu computador seja como o meu, sem músicas, você pode acessar a Rádio Uol. Lá tem muitas playlists prontas e dos mais variados gêneros musicais.

Não vou indicar músicas aqui porque em breve teremos um post com esse propósito.

Procure e observe trabalhos de outros artistas

É muito mais fácil criar alguma coisa quando você tem uma boa referência. Essa referência pode ser seus artistas favoritos, sites, imagens, vídeos ou algo que se encaixe no trabalho em questão.

Depois de observar diversos trabalhos tente criar algo com seu estilo e sua técnica, ficar copiando os outros não é algo que vai fazer você se destacar. O trabalho pode até ficar bonito, você pode até vendê-lo, mas será apenas mais um trabalho.

Sites que você pode usar para se inspirar:

The Design Inspiration – Ilustrações, manipulações de imagem, efeitos de texto, websites e patterns.
Behance – uma vasta lista de assuntos relacionados a design, fotografia, arte, etc;
DeviantArt – a mesma coisa que o site anterior;
Designflavr – arte e design em geral;
Shelflife – design de embalagens;
Dribbble – web design, ilustração, tipografia, logotipos

Observe as coisas ao seu redor

Cores, formas, texturas e tudo que você tem ao seu redor podem perfeitamente serem combinadas para usá-los como material de trabalho.
A inspiração também está nas coisas simples da vida, às vezes ao observar as estrelas você pode ter uma idéia que era óbvia mas você ainda não a tinha pensado.

Converse com seus amigos

Discuta suas idéias com os seus amigos. Eles podem ter uma visão diferente e sugerir novas soluções para seu trabalho. A troca de conhecimento é essencial para a criação, até porque você não precisa necessariamente saber de tudo.

Além dos seus amigos você pode seguir pessoas interessantes no Twitter que sempre estão tuítando coisas bacanas:
@abcdesign_, @design_se, @designontherock, @designflakes, @Designraid, @Rico_Acidu, @abduzeedo, @ideafixa, @typograff, @logobr, @spacodesign, @MockUpDesign, @willianmatiola, @filipesf, @lypy, @manubenvenutti, @alinebottcher, @mithz e para saber outros olhe nos seguidores do @chocoladesign.

Espaireça

Se depois de tentar todas as dicas acima a sua inspiração não estiver em um nível compreensível, tente espairecer, esquecer um pouco do seu trabalho e de seus problemas. Saia de casa e dê uma volta no seu bairro ou na sua cidade e depois recomece seu trabalho.

Não tente forçar sua criatividade quando você sabe que não vai sair nada de bom dela.

Considerações finais

Existe muitas outras formas, mas cabe a cada um descobrir qual delas funcionará melhor consigo.

 

 

Introdução ao HTML5

 

Desde 1999, o desenvolvimento da linguagem HTML (HyperText Markup Language) ficou estacionado na versão 4. De lá pra cá, a W3C esteve focada em linguagens como XML (Extensible Markup Language) e SVG (Scalable Vector Graphics – o uso de gráficos vetoriais em navegadores). Enquanto isso, os navegadores estiveram preocupados em desenvolver suas funcionalidades, como exibir páginas em abas e oferecer a integração com leitores de RSS. Porém, recentemente organizações como Mozilla Foundation, Opera e Apple se uniram para atualizar o HTML e implementar nele novas funcionalidades.

Neste artigo veremos as novidades que o HTML5 traz. Para quem está se familiarizando agora com o HTML, sem preocupações: os elementos tradicionais continuam os mesmos, já que o HTML5 foi desenvolvido pensando também em todos os usuários que não utilizam os navegadores mais recentes do mercado.

 

Novos elementos

Vários novos elementos foram introduzidos no HTML5, todos com a finalidade de facilitar a compreensão e a manutenção do código. Alguns são uma evolução natural do elemento <div> com foco na semântica; outros surgiram da necessidade de padronizar a maneira de se publicar conteúdo, como acontece hoje com as imagens. Os principais elementos dessa nova versão são:

Elementos de estrutura

<header> – cabeçalho da página ou de uma seção (não confundir com a tag <head>);

<section> – cada seção do conteúdo;

<article> – um item do conteúdo dentro da página ou da seção;

<footer> – o rodapé da página ou de uma seção;

<nav> – o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página;

<aside> – conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).

Estrutura de uma p�gina escrita em HTML 5

Elementos de conteúdo

<figure> – usado para associar uma legenda a uma imagem, vídeo, arquivo de áudio, objeto ou iframe:

    <figure id="figura01">
      <legend>Figura 1. Esquema de uma página em HTML5</legend>
      <img src="html5.png" border="0" width="200" height="300"
	alt="Como fica a estrutura de uma página escrita com os novos elementos do HTML5" />
    </figure>

<canvas> – através de uma API gráfica, irá renderizar imagens 2D dinâmicas que poderão ser usadas em jogos, gráficos, etc;

<audio> e <video> – usados para streaming (transmissão pela internet) de áudio e vídeo. É uma tentativa de criar um padrão em todos os navegadores como acontece hoje com as imagens:

    <audio src="musica.mp3" autoplay="autoplay" loop="20000" /> 

    <video src="video.mov" width="400" height="360" />

<dialog> – junto com as tags <dt> e <dd> será usado para formatar um diálogo:

    <dialog>
        <dt> Michael, you never told me your family knew Johnny Fontane!
        <dd> Oh sure, you want to meet him?
        <dt> Yeah!
        <dd> You know, my father helped Johnny in his career.
        <dt> Really? How?
        <dd> ...Let's listen to this song.
    </dialog>

<time> – representa data e/ou hora;

<meter> – usada para representar medidas, que podem ser de distância, de armazenagem em disco, etc.

 

Elementos retirados do HTML5

Alguns elementos não existirão mais no HTML5. Alguns foram retirados porque sua função é puramente visual, e devem ser substituídos por uma declaração no CSS (Cascading Style Sheets), como: <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt> e <u>. Outros foram retirados porque afetam negativamente a acessibilidade do site: <frame>, <frameset> e <noframes>.

Apesar de serem considerados antigos, <b> e <i> ainda serão reconhecidos e renderizados para fins de formatação, mas devem ser substituídos sempre que possível pelos elementos <strong> e <em>, respectivamente.

Também foram retirados alguns atributos, seja porque caíram em desuso ou porque podem ser substituídos semanticamente por declarações no CSS para definir o visual dos elementos. Os principais atributos retirados são:

  • target no elemento <a>;
  • align nos elementos <table> e demais tags de tabelas, <iframe>, <img>, <input>, <hr>, <div>, <p>, entre outros;
  • background em <body>;
  • bgcolor nos elementos de tabela e no <body>;
  • border em <table> e <object>;
  • cellpadding e cellspacing em <table>;
  • height em <td> e <th>;
  • width nos elementos <hr>, <table>, <td>, <th> e <pre>;
  • hspace e vspace em <img> e <object>;
  • noshade e size em <hr>.

 

Doctype

Com o HTML5 usaremos apenas uma declaração doctype:

    <!DOCTYPE html>

Além de única, ela é curta e fácil de lembrar – hoje em dia praticamente todos os desenvolvedores copiam e colam o longo e complicado doctype de algum lugar na hora de começar um novo documento HTML.

 

Transição do XHTML

A semelhança entre o HTML5 e seus antecessores, HTML 4.01 e XHTML 1.0, é muito grande. Quem está familiarizado com as versões anteriores não sentirá nenhuma dificuldade na transição, e para quem ainda vai aprender a linguagem, os novos elementos deixarão o processo mais simples.

A sintaxe dos elementos é como no HTML 4.01, que não exigia que elementos como <img> e <input> fossem “fechados”:

    <input type="text" id="nome">

Porém, para aqueles que estão migrando do XHTML, a barra que fecha um elemento continuará sendo aceita:

    <input type="text" id="nome" />

 

Logotipo HTML5

Em janeiro de 2011 o HTML5 ganhou um logotipo, junto com símbolos gráficos que mostram para o visitante quais recursos estão sendo utilizados naquele site, como CSS3 e multimídia. Segundo o site oficial da W3C, o logotipo é “forte e confiável, universal como a linguagem de marcação que você escreve”.

Logotipo do HTML 5

 

É hora de usar o HTML5?

Com exceção do Internet Explorer (que promete mudar isso na sua versão 9), todos os navegadores já oferecem suporte à maior parte dos elementos do HTML5.

Alguns desenvolvedores defendem a ideia de esperar pela popularização do IE9 para começar a usar a nova especificação. Outros acreditam que toda nova tecnologia deve ser colocada em prática o quanto antes, e já começaram a utilizar o HTML5 junto com scripts que fazem os navegadores mais antigos reconhecerem as novas tags (como, por exemplo, este script do desenvolvedor Remy Sharp).

A resistência sempre vai existir (infelizmente ainda hoje encontramos sites diagramados com <table> como se estivéssemos em 1990!), mas a versão 6 do Internet Explorer permaneceu em uso durante mais de uma década e precisou da ação de grandes companhias como o Google, que deixou de dar suporte a ele para tentar diminuir a quantidade de usuários com um navegador incrivelmente antigo. Por isso, mesmo que o Internet Explorer 9 se popularize rapidamente, quando o desenvolvedor optar por utilizar HTML5, deve se preocupar em desenvolver páginas que funcionem em navegadores mais antigos.

De qualquer maneira, o jeito mais fácil de se tomar a decisão de migrar ou não para o HTML5 é estudando o público-alvo do site para saber quais os navegadores mais utilizados por ele, e pensar se o tempo gasto com a correção para navegadores antigos valerá a pena. Talvez seja mais interessante, por exemplo, redesenhar seu blog pessoal em HTML5, mas manter o portfolio em XHTML. Cada caso é um caso e planejamento, como em qualquer projeto, é essencial.

Decididamente o HTML5 inaugura uma nova era no desenvolvimento de páginas para a internet, onde a mobilidade do usuário é a palavra chave. Mudanças foram implementadas a partir das necessidades dos desenvolvedores, baseadas em erros e acertos. A partir de agora teremos aplicações Web mais ricas e com maior integração entre conteúdo on-line e off-line.

Para informações técnicas mais detalhadas sobre o HTML5, consulte a documentação oficial do W3C e a listagem de diferenças entre o HTML5 e sua versão anterior.


»¿