web Design | TRANSIÇÕES E ANIMAÇÕES

by primeiro design

000000003

Durante muito tempo o CSS só serviu para pintar quadradinhos e mais nada. Desde quando o pessoal do WaSP organizou todo o movimento dos Padrões Web fazendo com que todos os desenvolvedores, fabricantes de browsers e até mesmo o W3C acreditassem no poder dos padrões não houve grandes atualizações no CSS. Praticamente formatávamos font, background, cor, tamanhos e medidas de distância e posição.

O básico: propriedade transition
A propriedade transition é praticamente auto-explicativa. Sua sintaxe tão simples que talvez até dispense explicações mais elaboradas. Vamos começar com o código abaixo:

a {
color: white;
background: gray;
}
No código definimos que o link terá sua cor de texto igual a preta e seu background será cinza.

O resultado esperado é que ao passar o mouse no link a cor do texto seja modificada, mudando do branco para o preto e que a cor de background mude de cinza para vermelho. O código abaixo faz exatamente isso:

a {
color: white;
background: gray;
}
a:hover {
color: black;
background: red;
}

O problema é que a transição é muito brusca. O browser apenas modifica as características entre os dois blocos e pronto. Não há nenhuma transição suave entre os dois estados.
Podemos fazer a mudança de um estado para outro utilizando a propriedade transition. Suponha que ao passar o mouse, as mudanças acontecessem em um intervalo de meio segundo. Bastaria colocar a propriedade transition no a:hover e pronto. Ao passar o mouse, o browser modificaria as características do link com uma pequena transição de meio segundo. O código seria como se segue abaixo:

a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}

Dessa forma a transição apenas acontece quando o hover é ativado. O problema é que ao tirar o mouse, o browser volta bruscamente para as características iniciais. Para modificar isso basta inserir também a propriedade transition no estado inicial.

a {
color: white;
background: gray;
-webkit-transition: 0.5s;
}
a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}

O que a propriedade transition faz é comparar os valores das propriedades em comum entre os dois estados do link ou de qualquer outro elemento, assim ela modifica suavemente os valores quando há a ativação da função. Esta é uma técnica simples e que serve para manipularmos transições básicas como cor, tamanho, posição etc.
Agora suponha que em um bloco há uma determinada propriedade que no outro bloco não há, como no código abaixo:

a {
border:1px solid orange;
color: white;
background: gray;
-webkit-transition: 0.5s;
}
a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}

Nesse caso o browser detecta que há uma propriedade no primeiro estado, mas não no segundo, por isso ele não faz a transição desta propriedade, apenas das propriedades em comuns.
Abaixo veja o código. copie em um arquivo HTML e veja o efeito:

<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>CSS Transition</title>
<style type=”text/css” media=”screen”>
a {
color:white;
background:gray;
-webkit-transition: 0.5s linear;
}
a:hover {
color:black;
background:red;
-webkit-transition: 0.5s linear;
}
</style>
</head>
<body>
<a href=”#”>Link! Hello World!</a>
</body>
</html>

Republished by Blog Post Promoter

O que é o flat design?

by primeiro design

Este novo conceito do design visa a simplicidade e a limpeza de Layouts e elementos, levando a um entendimento mais fácil e mais simples para quem está vendo, deixando de lado relevo, 3D, quantidade grande de cores em um so elemento, gradientes e etc.Ele o estilo flat defende a ideia de que não é necessario mostrar um elemento de forma total para fazer com que as pessoas o entendam e associem a algo material.

exemplo: por que usar uma imagem de uma cadeira quando apenas a silhueta ou o contorno de uma ja deixa a entender do que estamos falando?

A simplicidade e facilidade de entendimento dos elementos facilita ao usuario a assimilar a informação de modo que fica mais simples entender aonde começar e a onde terminar de ver um layout, e esse conceito se aplica a qualquer tipo de mídia sendo digital ou impressa (o flat design tem sido mais utilizado em web sites, porem, é cada vez mais comum se encontrar material impresso com esse estilo)

Os elementos

São em sua maioria bem geométricas como quadrados ou retangulos, quando usado em elementos gráficos que simbolizam objetos reais, a simplicidade permanece ja que o objeto real não é mostrado e sim lembrado com uma imagem simples que remete a ideia do objeto em questão.

Cores

O conceito do flat design tambem se aplica no uso das cores, cores muito mais vivas são implementadas de modo a conseguir uma atenção maior para o elemento em que é aplicado, ja que no flat raramente se usam texturas ou degradês.

Tipografia

A tipografia tambem é muito importante na aplicação do conceito do flat, se a ideia é utilizar elementos visuais simples e cores sem degradês ou texturas, não é recomendado o uso de tipografias muito desenhadas, o ideal é manter a tipografia no mesmo contexto que o resto do projeto.

veja alguns exemplos de aplicação do flat Design:

 

Republished by Blog Post Promoter

A importância de ter um portfólio online.

by primeiro design

Há algum tempo atrás montar um portfólio era uma tarefa que tomava uma grande quantidade de tempo e gerava incontáveis preocupações a quem estava montando, preocupações que iam a escolher o tamanho da impressão (sim estamos falando de portfólios impressos.) até mesmo a escolha da pasta, seria de plástico? De couro? Afinal, uma boa apresentação pode ajudar a encher os olhos de um possível cliente, todos esses pequenos detalhes contribuíam com a dificuldade de se ter um portfólio apresentável e principalmente o custo na montagem de um, felizmente, com a tecnologia ao alcance de todos agora, temos mais opções de divulgação de portfólio, a mais usada é a montagem de um site especifico para divulgar seu trabalho, algo que praticamente todo cliente exige ver antes de até mesmo pensar em contratar seu trabalho, afinal, é através dele que os clientes podem conhecer seu estilo de trabalho, seus pontos fortes, com quem já trabalhou, suas referências e etc. sendo assim, tal como a pasta de couro antigamente, o layout e a apresentação de um site portfólio é igualmente importante e também pode te ajudar a ganhar alguns pontos na hora da apresentação. Hoje em dia, há diversas opções para criar um site grátis para seu portfólio. 

 

O que todo portfólio online deve ter

– uma página inicial impactante –

Hoje em dia ninguém tem tempo, tempo é algo muito precioso, na internet então, com todas as possibilidades de pesquisa, distrações, banners por todo lado, tudo o que contribui para um possível cliente não dar atenção para seu site e abandoná-lo. Por isso, uma página inicial impactante é o que você precisa para manter quem visita seu site com vontade de continuar nele, mostre sua marca, de inicio já mostre seus melhores trabalhos, imagens grandes, faça com que sintam vontade de clicar e saber mais, um site portfólio com muito texto na página inicial tende a ser menos efetivo que um site com foco em imagens, lembre-se disso.

– formulário de contato –

Seu site está recebendo visitas e as pessoas estão gostando do que estão vendo, não demora muito e a vontade de pedir um orçamento e consultar você para uma possível contratação acontece, e como entram em contato com você? Através do seu formulário de contrato claro, seu site precisa ter um, da um toque profissional e organizado a comunicação e principalmente, por ele você já vai ter uma noção da necessidade do cliente. Um bom formulário deve ter os campos: nome (ou empresa), telefone, e-mail, assunto e mensagem.

– apenas os melhores –

Vamos falar a verdade, nem todos os trabalhos que fazemos são os que mais gostamos ou os melhores, esses são os que devem ficar de fora do seu site, afinal, não adianta ter 50 trabalhos em seu portfólio se 30 deles não foram os melhores resultados, manter trabalhos que não representam o seu melhor em seu portfólio pode ser um problema, pois a chance de um visitante abrir seu site e olhar diretamente para esse tal trabalho é bem grande, portanto, se você tem 50 trabalhos, coloque apenas os que forem os melhores, se de 50 trabalhos seus melhores forem 10, esse é o seu numero.

– organização –

Muito provavelmente seu trabalho tem variações, clientes com necessidades diferentes, trabalhos com diferentes temáticas, ilustrações, identidade visual, trabalhos pessoais e etc. O melhor a fazer quando você tem variedade em seu portfólio é categorizar de forma que, ao visitar seu site, o visitante possa ir direto para a categoria do seu trabalho que mais atenderia a necessidade dele, sendo assim, um portfólio organizado pode ajudar você a ganhar um cliente.

Como ter um portfólio online

Ter um portfólio online pode parecer fácil de ser feito se você for um web designer, um programador ou conhecer alguém com essas habilidades, mas se você não tem a menor ideia de como colocar seu trabalho na internet, essa é a parte que você vai mais gostar. Um site simples pode ser bem caro, tem o custo da hospedagem, custo do registro do domínio, e claro, o custo da implementação do site, felizmente existe um site que pode ajudar você a ter seu portfólio online e, melhor ainda, gratuitamente, trata-se do wix, um site que possibilita a qualquer um a criar sites gratuitos, utiliza um editor arrasta e solta para facilitar a vida dos que não sabem programar e, falando em facilidade, ele ainda possui vários templates semiprontos para que você tem ainda menos trabalho em montar seu portfólio, lindas galerias, otimização para dispositivos móveis, domínios, acervo de imagens, hospedagem segura, SEO, suporte 24/7 e muito mais, tudo disponível em um único lugar para você. Wix.com é uma plataforma líder de desenvolvimento web baseada em nuvem que mais de 100 milhões de pessoas em 180 países escolheram.

Vantagens de fazer seu site no wix.com

 ♦ Sites otimizados
 ♦ Sem necessidade de programação
 ♦ Templates semiprontos
 ♦ Plataforma gratuita
 ♦ Criação de sites responsivos para dispositivos móveis
 ♦ Fácil adaptação e edição
 ♦ Suporte
 ♦ SEO

E muitas outras vantagens, recomendamos que você visite o site wix.com para saber mais sobre como publicar seu portfólio online. Veja abaixo alguns exemplos de template que você pode encontrar no Wix.

Republished by Blog Post Promoter