O que é Web Design?

Bem pessoal resumido aqui em poucas palavras a definição de Web Design.

O web design pode ser visto como uma extensão da prática do design, onde o foco do projto é a criação de web sites e documentos disponíveis no ambiente da web.

O web design tende à multidisciplinaridade, uma vez que a construção de páginas web requer subsídios de diversas áreas técnicas, além do design propriamente dito. Áreas como a arquitetura da informação, programação, usabilidade, acessibilidade entre outros.

A preocupação fundamental do web designer é agregar os conceitos de usabilidade com o planejamento da interface, garantindo que o usuário final atinja seus objetivos de forma agradável e intuitiva.

O que é Design?

Muito se discute sobre a suposta etimologia do termo design, entretanto ela surge em nosso cotidiano quase como um vocábulo coringa que agrupa e dá status a atividades que a princípio não tem necessariamente relações diretas com a palavra.



Neste artigo, pretendese desmistificar a origem e aplicação do termo a fim de

ampliar a capacidade de aglutinar conhecimentos específicos sobre o tema, de modo que o leitor seja capaz de desenvolver seu entendimento de modo livre a partir de dados científicos e acadêmicos.



Partiremos da convenção de que a tradução mais aceita para a palavra design é o termo desenho industrial, considerando os postulados estéticos de Kant e as análises dos empiristas ingleses sobre a beleza e a funcionalidade (DORFLES, 2002), endossados pela nomenclatura atribuída aos cursos de formação de nível superior pelo MEC (Ministério da Educação e Cultura) no Brasil desde o tempo da ESDIRJ até os dias de hoje.



A ICSDI (Internacional Council of Societies of Industrial Design), entidade fundada em 1957, em Paris, que reúne sociedades e associações profissionais em todo o mundo, dedicadas a promover o desenvolvimento da sociedade industrial, discrimina o termo desenho industrial como vemos no texto a seguir:

.

"Desenho Industrial é uma atividade no extenso campo da

inovação tecnológica, uma disciplina envolvida nos processos de

desenvolvimento de produtos, ligada a questões de uso, produção,

mercado, utilidade e qualidade formal ou estética dos produtos".

(ICSDI apud CUNHA, 2000)

.

Segundo o autor italiano Gillo Dorfles, o design surgiu como o que conhecemos hoje por Desenho Industrial a partir da Revolução Industrial, a partir da necessidade da produção industrial para suprir a demanda dos grandes centros urbanos em expansão. O surgimento foi alavancado com invenções como a máquina a vapor de James Watt em 1776 e o tear mecânico de Edmond Cartwright em 1785 que possibilitariam a produção em série.



Máquina a vapor de James Watt de 1776.



Tear mecânico de Edmond Cartwright de 1785.



Segundo o mesmo autor, desde o início, o design é produzido por meios mecânicos, em série e por meio de uma atividade projetual, diferenciandoo

de outras atividades como o artesanato, por exemplo, que é produzido manualmente, resultando em peças únicas e para suprir a ausência da atividade projetual presente no design, transforma possíveis erros

na produção em adornos.



O design possui atualmente no Brasil e no mundo, diversas ramificações, dentre elas o design gráfico que compreende a comunicação e programação de espaços visuais bidimensionais visando à impressão, o design de produtos que tem por objetivo o desenvolvimento de projetos de produtos e utensílios, o design de embalagens que mescla características das duas anteriores e o design multimídia que é voltado para ambientes digitais como a web, jogos, televisão entre outros.



O deputado Eduardo Paes, em seu projeto de lei n° 2.621 de 2003 para

regulamentação da profissão de desenhista industrial, afirma que:

 .

“ Art.1º Desenhista industrial é todo aquele que desempenha

atividade especializada de caráter técnicocientífico, criativo e artístico, com vistas à concepção e desenvolvimento de projetos de objetos e mensagens visuais que equacionam sistematicamente dados ergonômicos, tecnológicos, econômicos, sociais, culturais e estéticos que atendam concretamente às necessidades humanas.”

“ Parágrafo único Os projetos de desenhista industrial são aptos à seriação ou industrialização que mantenha relação como ser humano quanto ao uso ou percepção, de modo a atender necessidades materiais e de informação visual.”

.

O MEC classifica o desenho industrial como ciência social aplicada, ou seja, a área abriga as ciências cujos conhecimentos impactam na vida humana do ponto de vista coletivo.

O aproveitamento do desenho industrial como ciência social aplicada, está atrelado a outras áreas especificas do conhecimento distendendose

de forma multidisciplinar.



Design não é arte, não é artesanato, não é publicidade, não é arquitetura e nem informática. Apesar dessa muldisciplinaridade, o design prevalece como uma ciência autônoma que se faz valer da tecnologia e de outros aspectos em comum como, por exemplo, as ferramentas gráficas da informática, a influência e relações com os períodos históricos artísticos ou das pesquisas e fundamentações do marketing.



O design é uma ciência relativamente nova que promove relações com outras

ciências, talvez essa seja uma das dificuldades em rotulálo de forma eficaz e indiscutível e até mesmo regulamentálo como uma profissão soberana e autônoma. No Brasil, a maioria dos grandes projetos é oriunda de países com um maior desenvolvimento e encomendados pelas empresas multinacionais, que detêm grandes parcelas do setor industrial.



Sobre a atividade projetual do design, Rafael C. Denis afirma que o termo design carrega uma ambigüidade em seu sentido no qual há um desdobramento entre opostos.

Ao mesmo tempo em que compreende o ato abstrato de designar, criar e conceber, o design também abrange o desenho, as especificações e o registro das idéias de um modo concreto resultando naquilo que ele define como projeto.



Vale á pena salientar que muitos acreditam que a palavra “desenho” tem essa

mesma dualidade, sendo autosuficiente como tradução do termo original inglês. Wilton Azevedo, professor e designer gráfico brasileiro, apresenta um ponto muito interessante quando diferencia a arte do design por meio de seu caráter de intencionalidade de reprodução em série, talvez porque o caráter projetual (tão abordado até aqui) está presente em ambos.



Sendo assim, afinal, o que é design?

Não irei fazer nenhuma conclusão que poderia ter uma conotação simplista sobre o termo, pois sinceramente espero que essas definições complementem e abra caminho para novas pesquisas propiciando que o design possa atingir novos patamares como ciência, evoluindo e se inovando com o tempo.

No Brasil há uma carência e certa aversão à complementação teórica, sobretudo no design, que por muitos ainda é visto como o simples ato de manipular imagens ou uma arte decorativa.





Bibliografia



AZEVEDO, Wilton. O que é Design. São Paulo. Ed. Brasiliense, 1998.

CUNHA, Frederico Carlos da. A Proteção Legal do Design: Propriedade Industrial. Rio de Janeiro. Editora Lucerna, 2000.

DENIS, Rafael Cardoso. Uma introdução à história do design. SP. Ed. Edgard Blücher,2000.

DORFLES, Gillo. O Design Industrial e a sua estética. SP. Ed. Presença, 1991.

DORFLES, Gillo. Introdução ao Desenho Industrial. Lisboa. Edições 70, 2002.

HESKETT, John. Desenho Industrial. Rio de Janeiro. Ed. José Olímpio / UNB, 1997.

10 Dicas para salvar seu site!!!

Existem inúmeras razões para que tão poucos sites estejam trazendo retorno para as empresas. Um dos motivos pode ser o design. Siga estas dicas e aumente as suas chances de sucesso:

1. Menos é mais. Faça o site leve e rápido

Se você esta vendendo um produto ou serviço na Internet, não se deixe levar pelos 'artistas' da rede. Mantenha o foco em sua mensagem. Ninguém quer ver um layout cheio de animações e gravuras que nunca terminam de baixar.

Tenha em mente que se não ajuda a vender não serve. Não faça nada só porque os outros estão fazendo. Construa um site para agradar ao cliente, não ao chefe.

Lembre-se que "a imagem seduz, mas é o texto que vende". Se

você quiser passar sua mensagem não deve esconde-la. Use um layout limpo e elegante, clean. Simples, mas não simplório.

Você tem apenas alguns segundos para conquistar a atenção do Internauta. Mantenha as páginas leves, use poucas imagens, bem colocadas e comprimidas. O texto deve ser direto e objetivo. Especialmente na página inicial.

2. Padrão

Todos nós temos uma "zona de conforto". Gostamos de nos sentir acomodados e seguros. Imagine chegar em casa todos os dias e a cor das paredes estar diferente? No começo pode ser um "barato", mas depois de algum tempo, você começa a ficar ansioso e inseguro.

Da mesma forma, mudar a cara de cada página, torna as pessoas confusas e impacientes. Elas podem pensar que estão em outro site e quando você menos espera, estarão mesmo.

Mantenha o mesmo padrão em todas as páginas. É fácil, basta:

• Usar as mesmas cores, molduras, botões, fontes e demais elementos em todas as páginas;

• Deixar a logomarca da empresa sempre na mesma posição.

• Se o menu está à esquerda, deixe-o lá o tempo todo, se estiver à direita, idem.

Além de tudo, mantendo um layout padronizado você passa uma impressão mais profissional.

Pense no Mac Donald´s: uma franquia com centenas de lojas em todo o mundo, todas iguais. Você sabe que em todas elas vai encontrar o mesmo serviço e a mesma satisfação.

3. Navegação

A palavra chave é simplicidade. A Internet já é um labirinto de informações. Conheço diversas pessoas que ficam loucas quando têm que achar alguma coisa. Então não complique, torne a navegação em seu site simples e direta.

Todas as páginas devem estar a dois, no máximo, três clicks de distância umas das outras. Você pode conseguir isto colocando menus para as áreas principais do site em todas as páginas.

Uma forma de testar a navegação do site é chamar alguém, de preferência, sem muito conhecimento. Peça a ele que encontre alguma coisa que VOCÊ sabe que está lá, só não diga como.

Outra forma é imaginar-se um iniciante na Internet e verificar se seria difícil encontrar alguma informação.

4. Fale conosco

Já tentou entrar em contato com a empresa e se perdeu no labirinto de links e páginas sem encontrar o email ou telefone da mesma? Eu já e aquela empresa perdeu um possível cliente.

Para evitar este problema, coloque seu email em todas as páginas. Se necessário faça um formulário de contato com poucos campos para o usuário preencher. Apenas o nome, email, telefone (caso haja algum problema com o email) e um espaço para a mensagem são necessários. Você poderá pedir as outras informações mais tarde. O importante agora é fazer contato.

5. Logos e Imagens

Já disse que ninguém quer esperar dois minutos para ver uma gravura que nunca termina de carregar. Mantenha suas imagens a um mínimo possível. Se você tem que usar muitas imagens para passar sua mensagem, uma palavra: compressão.

Imagens são uma parte importante do site, mas podem torna-lo muito pesado. Para evitar ou pelo menos minimizar este problema, use compressores de imagens. Existem diversos disponíveis no mercado, inclusive alguns gratuitos.

6. Fontes (famílias de tipos de letra)

Use apenas uma fonte em todo o site. Se quiser usar mais de uma fonte, use apenas para destaques, citações e títulos. Mantendo a variação de tipos de letras ao mínimo, você garante um visual mais padronizado e limpo. É muito mais profissional.

Outra razão é que há poucas "fontes padrão" na Internet. Arial, Verdana, Courier e Times New Roman são algumas delas. Se você usar alguma fonte fora dos padrões, pode ser que os usuários não vejam as páginas como foram criadas.

Mantenha o padrão.

7. Espaço em branco

Tão importante quanto as notas de uma canção são as pausas. Pergunte a qualquer músico.

O mesmo ocorre no design de qualquer peça publicitária. Deixe que as palavras saltem da tela, colocando bastante espaço entre elas. Deixe o texto 'respirar'. Use margens à esquerda e a direita.

Seguindo estas sugestões, o visual ficará muito mais limpo, agradável e profissional.

8. Becos sem saída

Um beco sem saída é uma página aonde não existem links para sair dela.

Pense no site de uma forma que não precise dos botões do browser para navegar, ou seja, se precisar clicar no botão voltar, tem alguma coisa errada.

Você pode colocar um link <voltar> nas páginas, mas esta não deve ser a única forma de sair da página.

9. Links Mortos

Links mortos são aqueles que estão no menu, mas ainda não foram criadas as páginas correspondentes ou, pior ainda, levam a uma "página em construção".

Se a página não existe ou não está completa, não coloque indicações para ela, no futuro você poderá colocar os links e destacar que a página é nova, tornando o conjunto mais dinâmico e trazendo maior impacto. Além de tudo, links mortos dão um ar de falta de profissionalismo.

Páginas com a mensagem "em construção" causam uma frustração enorme ao internauta, afinal ele espera encontrar a informação, mas ela não está lá.

Veja que um site de verdade, estará sempre em construção. A construção só termina com o fim do site ou da empresa.

10. Links Quebrados

Teste todos os links em todas as páginas, sempre. Links quebrados, ou seja, os que levam a páginas de erro ou não existentes, são outro fator de frustração e falta de profissionalismo.

Se você tem muitos links externos (para outros sites), teste-os de vez em quando para manter a integridade do site.

Como fazer o efeito Rollover nas imagens.

> O Que É: Um efeito simples e útil que quando você passa o mouse sobre uma imagem ela se "transforma" em outra. Pode também seu um link.



> Como Fazer:



1. Vá no Menu Insert > Interactive Images > Rollover Image. Ou procure pela imagem abaixo.







2. Abrirá uma janela. No 1° quadro você nomeia a imagem. No 2° você escolhe a imagem principal e no 3° quadro a imagem que aparecerá quando passar o mouse sobre a imagem original. O 4° quadro é opicional, nele você pode colocar uma palavra ou frase que queira que aparece quando o mouse parar sobre a imagem depois de alguns segundos.E no 5° e último quadro você pode colocar um link para onde queira que vá a página após o clique na

imagem.







3. Está feita sua Rollover Image

Usar modo Código ou Modo Design?

Não podemos negar que criar um site no modo Design é muito mais rápido e prático. Isso acontece pois até uma pessoa sem conhecimento nenhum no assunto consegue montar um site, por mais simples que seja. Porém devemos ressaltar que o Dreamweaver, trabalhando no modo Design gera diversos códigos, que só são entendidos por quem conhecimento em HTML. Isso leva a códigos desnecessários, deixando a página mais pesada e com uma formatação um tanto falha. Por isso é bastante importante se ter um conhecimento, mesmo que básico em HTML para poder manipular do jeito que quiser esses códigos. Tirando e adicionando o que quiser para deixar a página mais leve e mais organizada, otimizando assim o código gerado pelo programa.

Vendo o Dreamweaver como um programa auxiliar e não como uma ferramenta principal de trabalho, vemos que ele se torna em um recurso útil e funcional, gerando automaticamente códigos mais complexos, como de tabelas e lista com muitos itens. Até mesmo para se verificar se o código não possui tags não fechadas e caracteres soltos no meio do código por meio de uma barra de ferramentas lateral do editor que destaca esses tipos de códigos inválidos e compara a abertura e o fechamento de chaves.

Formatando um texto no HTML

Olá pra todos!!!

Nesse artigo vamos aprender um pouco as Tags para formatação de texto, espero que gostem!!!

O documento de hipertexto possui uma boa variedade de Tags para a formatação dos textos contidos nele, enriquecendo o layout. Mas não se esqueça não se deve usar esses recursos com exageros.



Primeiro vou definir cada uma das Tags, para somente depois passar a exemplos práticos.



<font>

Define o corpo geral da fonte a partir do ponto onde é inserido até que encontre a Tag </font> retornando então para o padrão.


Sintaxe:

<font size=tamanho color=cor face=fonte>



Size – tamanho da fonte, pode variar de 1 a 7.

Color – define a cor e pode ser passado em hexadecimal ou o nome da cor em inglês.

Face – define a fonte a ser utilizada e o nome da fonte deverá ser passado ente aspas.



H (header)

A Tag <Hx> define um título para a página. Ela formata linhas de texto entre <hx> e </hx>, onde x é um número que varia ente 1 e 6, representando o tamanho da fonte, onde 1 é o maior e 6 o menor.



Sintaxe:

<h1>Tamanho 1</h1>

<h2>Tamanho 2</h2>

<h3>Tamanho 3</h3>

<h4>Tamanho 4</h4>

<h5>Tamanho 5</h5>

<h6>Tamanho 6</h6>



Address

Essa Tag formata o texto como um endereço, colocando-o em itálico.



Sintaxe:

<address>seu endereço</address>



Blockquote

Tem por objetivo definir tabulações no texto, como se fosse o resultado do uso da tecla TAB.



Sintaxe:

<blockquote>texto</blockquote>



BR (Break Line)

Define uma quebra de linha no texto.



Sintaxe:

...Texto bem grande, indo para a linha de baixo<BR>Daqui pra frente o texto está uma linha abaixo.



P (Parágrafo)

Define o texto ente ela como sendo um parágrafo.



Sintaxe:

<p align=alinhamento> ... texto... </p>



Align pode receber:



Left – alinha o texto à esquerda

Right – alinha o texto à direta

Center – centraliza o texto.



Center

Essa Tag atribui ao texto que estiver ente ela um alinhamento centralizado.



Sintaxe:

<Center>texto a ser centralizado</Center>



B (Negrito)

O texto que estiver dentro dessa Tag ficará em negrito.



Sintaxe:

<b>texto em negrito</b>



I (Itálico)

O texto que estiver dentro dessa Tag ficará em itálico.



Sintaxe:

<i>texto em itálico</i>



U (Sublinhado)

Essa Tag deixa todo o conteúdo dentro delas sublinhado.



Sintaxe:

<u>texto sublinhado</u>



DEL (Tachado)

Tag responsável por deixar os textos dentro dela em formato tachado, com um risco no meio das letras.



Sintaxe:

<Del>texto tachado</Del>



SUP (Sobrescrito)

A Tag <sup> dá efeito sobrescrito ao texto dentro dela.



Sintaxe:

^{texto sobrescrito}



SUB (Subescrito)

A Tag <sub> dá efeito subescrito ao texto dentro dela.



Sintaxe:

^{texto subescrito}




HR

Insere uma linha para separação de textos e parágrafos. Quando essa Tag é definida, automaticamente acontece uma quebra de linha.



Sintaxe:

<hr width=largura size=altura color=cor NOSHADE>



Width – define o comprimento da linha

Size – define a espessura da linha

Color – define a cor da linha

Como melhorar a escrita do seu codigo!

Fala galera! hoje iremos ver duas ferramentas que são muito importantes para melhorar o código da sua página. Vamos lá.

Validando o código

Embaixo da aba propriedades (Properties) temos a aba resultados (Results).
Abrindo a aba results, temos algumas guias como Search, Reference, Validation, Target Browser Check, Link Checher e outros... Vamos clicar na guia Validation para validar nosso código.




Clicando na seta verde do lado ( veja figura acima), vá na opção "Validate Current Document". Se o Dreamweaver pedir para salvar o documento primeiro, salve e depois execute. Após feito isso, você perceberá que ele irá gerar um relatório com os possíveis erros de validação da sua pagina e você mesmo poderá corrigi-los. Caso houver erros, será exibido um hexágono vermelho conforme a figura abaixo:



Se aparecer um triângulo amarelo, o seu código está válido mas há algumas divergências, por exemplo, se o seu charset está definido para usar caracteres especiais como (espaço), " (aspas) e você inseriu algum caractere acentuado ( á, à, ã, â, ä .... ) no código, ele irá citar uma recomendação conforme a figura abaixo:



Se aparecer "No errors or warnings found.", parabéns! o seu código está válido. Se quiser conferir, basta ir no site da W3C para testar.



Agora para finalizar:

Organizando seu código

Para arrumar seu código é só você ir na barra do lado e clicar no último item do menu. Clicando nele, vá em Apply Source Formatting e ele irá arrumar o código para você. Essa organização pode ser modificada indo em Preferences > Code Format. Lá você poderá modificar espaços, tabulações, recuos e outras configurações para organizar seu código. A imagem abaixo ajuda localizar a ferramenta.



Espero ter ajudado! Um abraço e até mais!