Mateus Souza

Conversas sobre desenvolvimento web

Categorias »

Webdesigner

Categoria | 4 posts usam esta categoria.

É... agora aguenta essa vida! apesar dos problemas (alguém aqui gritou Internet Explorer...) é uma ótima profissão e tem muito a crescer, então vamos ser cada vez mais qualificados e inovadores.

Menu Com Efeito Hover Perfeito Em Todos Os Navegadores!!!

3

Bom hoje eu vou postar um dos meus “macetes” que uso pra me ajudar na produção de sites… é o famoso “don’t repeat yourself”:

Demonstração / Download

Primeiro vamos ao conceito. Seria um modelo já produzido para agilizar o seu trabalho como webdesigner, por exemplo, você ta lá ganhando o pão de cada dia e se depara com um menu como este… não é mais facil usar o famoso CTRL+C e CTRL+V? Pois bem, este é o conceito… e acredite, sua produtividade vai aumetar e muito... chega de fica perdendo tempo escreve linhas e linhas de código, torrando a cabeça, ouvindo o chefe gritar no seu ouvido porque o job está atrasado… ok, eu apelei mais é essa a intenção.

É claro que cada menu é diferente um do outro e tals, enfim… o objetivo é ter em mãos um modelo propriamente feito, compatível com todos os navegadores, ai é só fazer o jogo do copiar e colar, um pouquinho de alteração aqui… outro ali… e voalá… menu certinho e produzido pelo menos na metade do tempo. Já deu pra entender né…

Como não te muito o que falar vamos logo ao bendito menu em css:

HTML:

<ul class="menu">
<li><a href="">Home</a></li>

<li><a href="">Contato</a></li>
<li><a href="">Serviços</a></li>
<li><a href="">Musica</a></li>
<li><a href="">Teste</a></li>
</ul>

O codigo HTML é só isso mesmo, uma lista simples, nada demais…

CSS:

ul.menu li {
float:left;
background: #333;
padding:0px;
line-height: 30px;
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.menu li a{
display: block;
padding: 5px 30px;
color: #fff;
font-size:17px;
font-family:Arial,Helvetica,sans-serif;
text-decoration: none;
font-weight: bold;
}
ul.menu li a:hover, ul.menu li:hover{
color: #fff;
background: #4698ca;
border-top-color: #5db1e0 !important;
border-left-color: #5db1e0;
}

Se você fizer o download dos arquivos verá que quase todas as linhas de códigos do CSS (algumas seria idiotisse comentar) estão comentadas explicando o funcionamento de cada uma.

Até a próxima.

As Maiores Mentiras dos Clientes

5

Cliente é complicado…  acho que todos os que estão lendo este post já deve ter ouvido algumas ou todas mentiras citadas abaixo, exerto os mais novinhos na área então já fiquem espertos pra não cairem nessa…

As Mentiras:

– Faça esse de graça que no próximo a gente se acerta.

Todo freelancer cai nessa quando faz o 1º trabalho, mas o 2º nunca vem. Ainda tem a desculpa: “é só para saber se você é bom mesmo”.

Novos freelancers… jamais caia nessa, pelo amor de Deus… eu graças a Deus nunca passei por isso e se passasse eu no mínimo iria chingar o cliente. Aqui vai uma técnica: Procure saber qual é a profissão do cliente. Suponhamos que ele é um pedreiro… diga o seguinte:

Quanto Cobrar Por Um Site?

12

Mais uma vez é levantada essa questão. Quanto cobrar por um site?

http://www.numclique.net/wp-content/uploads/2008/03/freela.jpg

Graças a Deus eu achei uma palestra feita pelo Sandro Reiller no Instituto Infnet sobre como calcular o custo de desenvolvimento de um site e cobrar do cliente de maneira adequada.

Exitem vários foruns de discursão, comunidades no orkut e em outras redes sociais que abordam esse tema, mas o certo é que, essa questão e nem essa paletra, como diz o próprio Sandro Reiller vai solucionar seus problemas, mas sim auxiliá-lo na sua decisão…

Chega de papo e vamos ver o video que vocês devem estar loucos para assistirem:

Ver video

Depois coloquem a sua opinião aqui nos comentários e os seus métodos para aprendermos mais…

Até a próxima.

Psicologia Das Cores

2

http://pokas.blogs.sapo.pt/arquivo/cores%20k%20se%20misturam.JPG

Hoje vou falar sobre as cores, uma parte fundamental na criação de websites.

-Mas por quê? Você pode me perguntar. Porque eu preciso saber disso?
Pois bem, infelizmente nos cursos de webdesigner não são abordados temas de como quanto cobrar (em breve falarei sobre isto), sobre a psicologia e a função das cores em um site, entre outros… e nos temos que aprender na marra ou errando, e é isso que vou fazer, poupar lhes desses erros cometidos somente por falta de conhecimento.

-Mas Mateus, eu ainda não entendi.
Vou lhe dar um exemplo, o cliente quer um site preto, como você irá convencê-lo de que esta não é a melhor forma? De que o branco por exemplo, será a melhor opção? Por isto é importante saber sobre este tema que é pouco abordado na web. Há aqueles que falam, “O cliente sempre tem a razão, se ele quer assim, assim será…“, ai está um dos grandes erros de alguns webdesigners. Somos formados, fazemos cursos é justamente para isso, você é o designer você obrigatoriamente tem que saber “por onde ir”, como fazer com que o visitante goste do que ele veja, digamos assim você é um desenhista profissional (design) e vai desenha uma pessoa, se você passar este trabalho para uma criança que mal sabe desenhar (o cliente) a diferença será vista de longe. Mais teoricamente podemos dizer:

O designer deve ter bastante criatividade, método, disciplina e conhecimento técnico e cultural. Quanto mais se estuda o meio de atuação da área onde ele pretende atuar e se exercita a observação e o olhar crítico, mais recursos se têm para gerar uma solução.

Sendo assim é muito importante o conhecimento para questões como a citada acima. Bom chega de papo furado e vamos ao que interessa:

Psicologia das Cores

A escolha das cores é fundamental para uma boa harmonia dos elementos de um site. Ela pode enfatizar textos, imagens e caracterizar especialmente os elementos da página.

A cor exerce influência decisiva nos olhos dos seres humanos, afeta a atividade muscular, mental e nervosa. A combinação das cores afeta o psicológico e pode tornar um ponto importante no interesse do público em seu site ou no site do cliente.

A combinação certa pode causar efeitos como de excitação, urgência, contentamento, calma, vulgaridade, melancolia, segurança etc., e ainda destacar algum elemento em relação a outro.

Na Web a seleção de uma cor é um pouco complicada, pois é impossível garantir que uma determinada cor irá se apresentar no monitor do usuário como ela realmente é, ou seja, como a que o designer colocou.

Isto acontece devido ao fato de cada monitor ter uma especificação diferente, uns podem trabalhar com mais vermelho, ser mais brilhante, ter mais contraste e etc., e ainda cada um pode estar configurado com uma determinada resolução como 640×480 pixels, 800×600 pixels e assim por diante.

A combinação desses fatores é que irá determinar a fidelidade e a reprodução de cores e a qualidade das imagens.

Abaixo você poderá visualizar algumas sensações “psicológicas” conhecidas:

As cores e os efeitos psicológicos

Sensações visuais + significado:

– Branco – pureza
– Preto – negativo
– Cinza – tristeza
– Vermelho – calor, dinamismo
– Rosa – graça, ternura
– Azul – pureza, fé

Sensações Acromáticas

Branco: inocência, paz, divindade, calma, harmonia, para os orientais pode significar morte, batismo, casamento, cisne, lírio, neve, ordem, simplicidade, limpeza, bem, pureza.

Preto: sujeira, sombra, carvão, fumaça, miséria, pessimismo, melancolia, nobreza, seriedade. É expressivo e angustiante ao mesmo tempo. Alegre quando combinado com outras cores.

Cinza: pó, chuva, neblina, tédio, tristeza, velhice, passado, seriedade. Posição intermediária entre luz e sombra.

Sensações Cromáticas

Vermelho: guerra, sol, fogo, atenção, mulher, conquista, coragem, furor, vigor, glória, ira, emoção, paixão, ação, agressividade, perigo, dinamismo, baixeza, energia, revolta, calor, violência.

Laranja: prazer, êxtase, dureza, euforia, outono, aurora, festa, luminosidade, tentação, senso de humor. Flamejar do fogo.

Amarelo: egoísmo, ciúmes, inveja, prazer, conforto, alerta, esperança, flores grandes, verão, limão, calor da luz solar, iluminação, alerta, euforia.

Verde: umidade, frescor, bosque, mar, verão, adolescência, bem-estar, paz, saúde (medicina), esperança, liberdade, paz repousante. Pode desencadear paixões.

Azul: frio, mar, céu, horizonte, feminilidade, espaço, intelectualidade, paz, serenidade, fidelidade, confiança, harmonia, afeto, amizade, amor, viagem, verdade, advertência.

Roxo: fantasia, mistério, egoísmo, espiritualidade, noite, aurora, sonho, igreja, justiça, misticismo, delicadeza, calma.

Marrom: cordialidade, comportamento nobre, pensar, melancolia, terra, lama, outono, doença, desconforto, pesar, vigor.

Púrpura: violência, furto, miséria, engano, calma, dignidade, estima.

Violeta: calma, dignidade, estima, valor, miséria, roubo, afetividade, miséria, calma, violência, agressão, poder sonífero.

Vermelho-alaranjado: sexualidade, agressão, competição, operacionalidade, desejo, excetabilidade, dominação.

A escolha da cor sofre influência da moda, das tendências e da decisão do designer.

Harmonia e Contraste

Espaços em branco podem ser definidos como áreas que não contenham textos, imagens ou qualquer outro elemento gráfico. Saber balancear o conteúdo e o espaço em branco em um site é a chave para manter a harmonia dos elementos dentro da página e prender a atenção do usuário.

A conseqüência da má utilização desse recurso é não ter um bom equilíbrio, assim os olhos ficam confusos pois não existirá uma progressão visual para o internauta seguir e conseqüentemente ele perderá o interesse pela página.

O que pode ser feito para que isto não aconteça é seguir as recomendações de alguns “gurus” em design:

“Não coloque o máximo de informações dentro de uma página”.

“Os espaços vazios reforçam a unidade de grupos, harmonizam as áreas, aumentam o contraste e facilitam a visualização e leitura”.

Em geral as cores claras e quentes elevam e expandem, por isso, no passado era comum casas com o teto pintado de azul e paredes amarelas, a sensação que passava era de mais espaço. Por exemplo, nunca se deve pintar um teto de preto ou roxo, essas cores passariam a sensação de opressão e clausura.

Visibilidade

Amarelo e Azul são as cores que melhor se lêem a distância.

O contraste preto-amarelo se vê desde mais longe.

O contraste preto-branco tem um valor neutro.

O contraste vermelho-verde é o que menos se percebe.

Em geral os elementos gráficos escuros sobre fundo claro se percebem melhor que o contrário.

Bom agora mãos a obra, recomendo que guarde este post nos favoritos e visite sempre que precisar de uma referência “psicológica”. Se mesmo assim surgir dúvidas faça comentários, comente a vontade!

Todas as Categorias