Introdução ao Webdesign

helldanger1 · Mai 20, 2009

Primeiros passos para aquelas pessoas que desejam criar sua própria página web, desde o ponto de vista do designer. Motivação a seguir, programas a utilizar, etc.

Capítulos do manual

1.- Prólogo aos primeiros passos no web design
Considerações a ter em conta na hora de desenhar uma página web.

2.- Introdução ao web design
Dados para ter em conta na hora de começar no web design, pois a web é um canal de publicação com características muito especiais.

3.- Características especiais da publicação web
Diferenças específicas da publicação de conteúdos na web em relação a outros meios como poderia ser a televisão.

4.- Algo mais sobre o web design?
É importante levarmos o trabalho a sério ao fazer uma página web: redigir sem falhas e organizar a informação devidamente.

5.- Ferramentas para profissionais do web design
Ferramentas que podemos utilizar para desenhar uma página web com excelentes resultados. Algumas recomendações importantes e outras para trabalhos mais específicos.

6.- Design adequado
O design gráfico, industrial, de identidade, deve ser adequado ao produto, pessoa, empresa que representa. Logo, podemos entrar debater outros aspectos do design.

7.- Web Design. Problemas gerais
Os principais problemas que podemos encontrar na hora de decidir o design para nossa web.

8.- Conclusão à introdução ao web design
Últimas anotações de interesse para o design de páginas web.

helldanger1 · Mai 20, 2009

Prólogo aos primeiros passos no web design

Considerações a ter em conta na hora de desenhar uma página web.
Por Gck

Há alguns dias, durante um jantar, meu pai me perguntou o que era exatamente isso dos chats, "ou o que as pessoas fazem quando se escrevem através da Internet". É um homem um tanto suspicaz ante as novas tecnologias, de maneira que me vi obrigado a lidar com três frentes de uma só vez, adicionando o fato de que a pergunta, pensada com intenções propositadas, veio como um golpe e me deixou meio embaraçado por alguns segundos. As três linhas de ataque das que falo eram as seguintes: uma, a que me obrigava a descrever de maneira superficial as bases tecnológicas dos chats, já que meu pai tinha comparado com sistemas de comunicação mais convencionais, e eu devia estabelecer as distancias adequadas. Em segundo lugar, expliquei os elementos da prática, como por exemplo, a interface típica de um software de chat ou as funções básicas: fluxo de texto em tempo real e transmissão de arquivos, assim como o modo no qual os chats se organizam e podem ser desfrutados em diversas salas; como algo elementar. Em terceiro lugar lhe sugeri a utilidade dos chats, suas vantagens frente a outras formas de comunicação à distância e lhe expliquei, de forma mais geral já, que pese a sua postura, Internet constitui em grande medida o sistema sanguíneo do futuro, embora no melhor dos casos, trata-se de artérias de fibra de carbono... Daí, passamos a conversar sobre questões muito mais diversas sobre a Rede, porém isto já não tinha importância. Um tema ou outro era um assunto de formas.

Na verdade, eu tenho uma grande atração pelos chats genéricos, e opto por aplicações de correio instantâneo. Porém aquela conversa me revelou algumas das bases que, depois, me ajudariam a responder a uma usuária em um fórum de web design. Sua pergunta era: "Apesar de não saber muito de computadores, sempre estou seduzida, e agora quero fazer minha própria página web. Por onde começo?"

Claro que isso era uma declaração de intenções e não existia, nem existe, uma resposta infalível. O desenvolvimento web é um processo criativo e íntimo, como a própria navegação na Internet; aonde vou se me conecto à Rede? Pois isso depende de você. E mais, o provável é que muito em breve você já nem deixe que os usuários compartilhem e bisbilhotem seu . Da mesma forma, uma vez que começamos a desenhar, decidimos que ninguém pode se intrometer em nossa forma de trabalhar. Não é verdade?

Então, isso quer dizer que não existe uma espécie de protocolo de principiantes? Sim que existe um protocolo, uma trilha que todos costumamos seguir para chegar ao nosso destino (naturalmente, o destino de cada usuário é diferente, e ainda mais engenhoso, maior será o aprendizado).

helldanger1 · Mai 20, 2009

Introdução ao web design

Dados para ter em conta na hora de começar no web design, pois a web é um canal de publicação com características muito especiais.
Por Gck

Como no caso dos chats, podemos considerar que existem três diretrizes elementares que servem de guias. Uma delas é o conhecimento tecnológico de Internet; estamos obrigados a saber como funciona de maneira geral, desde as conexões de computador até o valor dos servidores, passando pela arbitragem das linhas telefônicas e claro, considerando os diversos navegadores que existe no mercado, ademais de prestar atenção na necessidade nos instruirmos, embora seja um pouco, na linguagem HTML. É muito difícil levar a sério alguém que não tem constância de que, dando uma olhada no código fonte de uma página, encontrará etiquetas tão básicas como <head> e <body>. Estes conhecimentos técnicos nos informam nossas possibilidades criativas; não basta somente criar uma preciosa imagem e deixa-la em nossa página principal, se não sabemos que tal imagem poderia demorar um minuto para carregar... E hoje em dia, essa realmente é uma verdade infalível.
Em segundo lugar, estamos obrigados a saber trabalhar. Não é mais difícil que isso; se trabalhar em modo código, deve dominar o HTML e, melhor ainda, o HTML e outras linguagens de uso comum na Rede. Se empregar software do tipo WYSIWYG (o que vê é o que se obtém, em português), deve ser capaz de conhecer as funções de seu programa. É verdade que deter-se a ler as instruções é chato, e provoca o que se conhece como "curva de aprendizagem", porém é a única maneira de chegar a entender e desenvolver todas as possibilidades técnicas e imaginativas que lhe permitem as diferentes aplicações do mercado. Se usar DreamWeaver, também poderá conhecer FrontPage, por exemplo, porém isso não leva a lugar nenhum. São programas diferentes que precisam de diversos processos de instrução.

helldanger1 · Mai 20, 2009

Características especiais da publicação web

Diferenças específicas da publicação de conteúdos na web em relação a outros meios como poderia ser a televisão.
Por Gck

Em terceiro lugar é fundamental saber que a Internet não é uma conferência telefônica, um CD-ROM ou televisão a la carta. A Rede sofre limitações próprias e desfruta também de possibilidades mais extensas e pessoais. Assim, quando desenhamos nossos web sites, devemos entender que os visitantes não esperam o mesmo de nossas páginas que de um programa de TV, inclusive embora ambos tratem o mesmo tema.
Tomemos por exemplo um documental sobre os elefantes africanos. E imaginemos a um cidadão muito interessado em tais animais, que em um momento do dia deve escolher entre ver a vida dos elefantes em televisão, ou buscar informação na Internet à propósito do mesmo. Nós temos a obrigação de desenhar uma página web a respeito. Tomaríamos inspiração da televisão? Talvez alguma, porém se sabemos o que nos convém, não passaríamos de aí. Por exemplo, a tv se encontra a um mínimo de dois metros do telespectador; o monitor do computador, a uns palmos; o texto deve ser estreito para não irritar ao navegante. Na tv isso dá no mesmo. À tv também é indiferente mostrar centenas de perspectivas e de áudio emitidos pelos elefantes africanos. O web apenas poderia fazer isso, em condições padrões de conexões de 56kb. Porém, nós podemos criar links a páginas que tratem todas e cada um dos costumes do enorme paquidermo. A televisão, não...

A pergunta, sintetizada, é esta: o que damos ao navegante para lhe tornar fiel aos nossos conteúdos ainda que seja somente durante uma sessão? Daremos personalização, conteúdos, liberdade, engenho, beleza, oportunidades, bom gosto, comodidade, dados, síntese, gráficos, informação detalhada, esquemas, conhecimentos em três palavras ou sabedoria em textos de três quilômetros, e tudo mais, enfim, o que quer que busque. Estamos em condições de fazer estas coisas? Melhor que sim!

helldanger1 · Mai 20, 2009

Algo mais sobre o web design?

É importante levarmos o trabalho a sério ao fazer uma página web: redigir sem falhas e organizar a informação devidamente.
Por Gck

Há mais coisas, certo. O design enfocado à Rede costuma ser filho da receptividade, como qualquer outro tipo de design. Além da aprendizagem técnica, que consiste em ler Informações, às vezes chatas e tediosas, existe um modo complementar e muito excitante de aprender. Como dizia, falamos de receptividade. De ver o que outros muitos fazem com um talento que parece inesgotável, e deixar que o que vemos sedimente em nosso trabalho; desde o design gráfico dos web sites, as imagens que incluem e que às vezes definem sua identidade, até a maneira na qual escrevem seus textos. Posso dizer que poucas coisas me parecem tão divertidas e pouco sérias como um parágrafo mal escrito. Será que o fato de nos desenvolvermos no ambiente digital nos dá o direito de escrever mal? Sem dúvida que não. Os textos devem ser sugestivos, esclarecedores ou enigmáticos, porém sempre chamativos e eficientes.
Há pouco tempo visitei um web site de uma grande empresa e acabei me perguntando se a redação tinha sido corrigida por algum narrador estrangeiro. O texto era breve e direto, mas cometia erros gramaticais tão evidentes que era o que chamava mais atenção; inclusive mais que o bonito e "efervescente" design. Tenhamos em conta que se nos consideram pouco aplicados, não nos tomarão como uma alternativa razoável. (E podemos esquecer a idéia de alguém que nos pague por nosso trabalho.)

Olhemos, analisemos, aprendamos dos demais. É um processo baseado na febril atividade de nosso mouse. Teremos que clicar milhares de vezes, antes que o efeito dos mestres do web nos deixe a sua marca. Para começar podemos observar os estudos e casos de grandes empresas do meio como Adobe e Macromedia, que incluem seções muito interessantes; e também temos a oportunidade de ver as páginas das agências de publicidade e design; com freqüência seus melhores trabalhos estão feitos para si mesmos, e não para seus clientes.

helldanger1 · Mai 20, 2009

Ferramentas para profissionais do web design

Ferramentas que podemos utilizar para desenhar uma página web com excelentes resultados. Algumas recomendações importantes e outras para trabalhos mais específicos.
Por Gck

Mais tarde você precisará do software que interpretará seus desejos, inquietudes e talentos e lhes dará a forma que quiser -no melhor dos casos-, de maneira que possa transferir tudo a um servidor web aberto ao público. Aqui também não existe um acordo. Tudo dependerá de se você trabalha em modo html -1st Page 2000 é uma aplicação reconhecida e gratuita- ou WYSIWYG, cujo espectro é também muito amplo, desde o popular e doméstico FrontPage de Microsoft, até os profissionais e valiosos Dreamweaver o GoLive!, passando pelos acessíveis, mas potentes Namo Web Editor ou NetObjects Fusion...

Também será bom dispor de algum programa de design gráfico. De uma maneira elementar, podemos dizer que existe de dois tipos mais ou menos puros, e um terceiro tipo misto. Em um dos casos trata-se de aplicações de desenho vetorial, ou seja, aquelas que geram gráficos desde zero mediante ferramentas de traçado geométrico, porém fundamentalmente, também dizendo de uma forma mais plana, falamos de desenhos de linhas e curvas. Contudo, não podemos nos confundir. Estes programas são mães de muitas das melhores ilustrações que vemos tanto na Rede como em publicidade impressa e nas embalagens de produtos cotidianos. Atualmente, assume-se que Adobe Illustrator é o melhor neste campo; entretanto, compete com o clássico indiscutível CorelDraw, além do Macromedia Freehand. E, não obstante, existem alternativas baratas e eficientes, bem criticadas e admiradas nos meios, como ZonerDraw 4 ou Xara.

O segundo dos casos quando falamos de gráficos é o retoque fotográfico; ou o que é o mesmo, o trabalho de design visual sobre imagens que normalmente combinam fotografias reais com objetos desenhados e efeitos visuais. Adobe e Corel também disputam o "bolo", de momento favorável ao primeiro. Suas estrelas são PhotoShop e Photo Paint. As alternativas mais acessíveis costumam ser Paint Sho Pro de Jasc e Ulead Photo Impact.

Uma terceira opção é o software que combina retoque fotográfico e desenho vetorial; cada vez mais, esta é uma possibilidade que traz de série todos os grandes programas, de maneira que não faz falta mudar de aplicação para misturar os modos de trabalho gráfico.

helldanger1 · Mai 20, 2009

Design adequado

O design gráfico, industrial, de identidade, deve ser adequado ao produto, pessoa, empresa que representa. Logo, podemos entrar debater outros aspectos do design.
Por César Martín

O que significa adequado?

O design é uma representação formal e portanto, costuma ser o primeiro ponto de contato entre a pessoa e o produto / serviço / pessoa.

Para que um design seja adequado deve dispor da informação necessária para conhecer ao cliente, mercado, consumidores, produto / serviço.
Com esta informação deve-se realizar os protótipos necessários.
Desenvolver o design final.

Estilos Vs. Adequação

Há designers / consultores / "gurus" que defendem um estilo frente à adequação do design à necessidade.

O estilo seja "neutro", "barroco", "limpo", "alemão", "americano" não passa de um estilo e portanto, não pode ser o ponto de partida para o desenvolvimento do design.

O ponto de partida deve ser o entendimento da necessidade do cliente.

As necessidades do cliente podem depender de uma infinidade de fatores e não se pode generalizar. Cada momento, cada região, cada canal, cada preço, cada consumidor, faz com que a necessidade seja diferente.

A melhor ferramenta que o designer pode demonstrar é a compreensão e o entendimento para poder realizar a solução gráfica.

Design

A adequação do design frente ao estilo faz com que os valores do mesmo sejam algo mais universais e duradouros.

Ou seja, se alguém defende um estilo (neutro, barroco) pode-se ver comprometido pela realidade do ambiente.

Os valores do design com os me sinto identificado costumam ser do estilo:
•Ajuda.
•Cumprimento.
•Duradouro.
•Integração (com as pessoas, sistemas, usuários).
O design deve ajudar às pessoas.
A ajuda pode ser de muitos tipos, pode ajudar às pessoas a ganhar mais dinheiro, a ler com mais facilidade, a navegar mais rápido, a desfrutar o momento.

O design cumpre sua função
O design deve cumprir a função atribuída. O design é uma "utilidade" para chegar a um fim.

Duradouro.
O efêmero nos leva ao consumismo desmedido. Tender a que o design sirva hoje, amanhã, dentro de 10 anos. Esta lição eu levei tempo para aprendê-la.

Integração
Este conceito faz referência a que o design há de se integrar nos processos naturais das pessoas. Não há que criar novos obstáculos, e sim, dotar às pessoas de melhores ferramentas.

Design não é o design gráfico e não é o design industrial

Em muitas conversas cita-se "design" aplicando-o sem muito critério às disciplinas que passam pelo design industrial, gráfico, identidade...

Visto desde fora não há problema, porém, desde dentro é como se falamos de esportes e citamos o futebol, as barras paralelas e a natação como se fossem a mesma coisa. Suponho que uma coisa é ser espectador de sofá e outra é subir em uma barra paralela e dar dois mortais.

Design gráfico. Comunicação
Cor. Forma. Tipografía. Imagens.

Design industrial. Produto.
Processos industriais. Ergonomia. Materiais.

"Design". Processo "criativo".
O processo criativo de resolver um problema pode-se chamar de "design", mas é um termo tão vago que em geral não quer dizer nada.

Buscar soluções sem ataduras

O design deve se adequar à resolução do problema, evitando que um estilo nos condicione uma forma de pensar ou buscar soluções.

helldanger1 · Mai 20, 2009

Web Design. Problemas gerais

Os principais problemas que podemos encontrar na hora de decidir o design para nossa web.
Por Serviweb

Uso de Flash

As Facilidades e Utilidades que apresenta flash são inumeráveis na hora da interatividade, e impacto visual. Por outro lado, a interatividade melhora notavelmente em conexões de cliente/servidor em suas últimas versões, infelizmente as webs 100% flash podem trazer alguns problemas na incorporação a buscadores.

Interatividade

O designer na hora de buscar uma solução à interatividade deverá levar em conta que público está orientado o site. Um dos principais problemas que se apresenta na interatividade, é a complexidade que o designer agrega ao site, e sem opção de voltar atrás, ou mostrar um mapa do site, conseguinte assim que o usuário navegue seções de sub-seções e fique perdido dentro da página. Uma página deverá ser o que se chama APT (à prova de tolos) assim consegue o objetivo desejado, que o usuário encontre sua busca.

Incompatibilidade

Neste tema entramos em uma dura luta entre os exploradores mais famosos do mercado, porém, na hora de ser útil neste rubro, pode-se contar com flash já que se executa com seu projetor e raramente terá problemas. Há que ter muito cuidado quando se fazem páginas dinâmicas, com php, asp, etc... E também com os CSS que se incluirá na folha de estilo, isto pode lhe trazer algumas dores de cabeça já que os exploradores interpretam diferente e alguns deixam passar o código e outros não, ou definem código diferente. Então aí, entra-se em uma disputa não só com o cliente que quer que seu site se veja em todos os navegadores, como também consigo mesmo ao tentar fazer com que as coisas funcionem em vários navegadores. Uma solução viável é conhecer a fundo os exploradores mais usados no mercado, e saber como interpretam código.

Formulários Web

Estou certo de que a maioria das pessoas se incomoda em ter que completar formulários Web. Estes por sua vez, apesar de serem úteis, podem fazer com que um usuário deixe de fazer sua consulta e abandonar seu site. Na minha opinião, estes formulários devem ser absolutamente claros e concisos, e obviamente, evitar fazer perguntas inúteis, sem esquecer que o formulário deve ser curto. (Preferência geral dos usuários). É útil configurar uma auto-resposta para que o usuário tenha uma espécie de comprovante do consultado, já que este e-mail pode causar uma visita futura.

Uso desconsiderado de Janelas

Atualmente, nos encontramos invadidos pelas publicidades em pop-ups, evite o uso de pop-ups no site, primeiro porque já os exploradores mais vendidos trazem uma ferramenta para bloqueá-los e é incômodo para o visitante ter que ativa-lo para ver o material que busca.

helldanger1 · Mai 20, 2009

Conclusão à introdução ao web design

Últimas anotações de interesse para o design de páginas web.
Por Gck

Existe vida além dos gráficos estáticos?

Na verdade sim. A opção mais comum é Flash de Macromedia, que permite criar filmes realmente complexos e interativos combinando ilustrações absortas, gráficos vetoriais, áudios e ActionScript, a linguagem de comandos específica de Flash, além de outras possibilidades muito bem conhecidas.

Concluão

Concluindo, o trabalho do desenvolvedor web (essa espécie de alquimista obrigado a dominar e combinar variáveis tão díspares, e às vezes de aparência incompatível, como a usabilidade e o atraente para o usuário, e a efetividade técnica de para a empresa que paga seus honorários, como por exemplo no caso de lojas on-line), este trabalho é um longo processo que requer um enorme grau de instrução e aprendizagem técnica, porém, também de generosas doses de intuição e antecipação. Afinal de contas, a Rede muda e cresce a cada pouco tempo, e não podemos ficar atrás. Boa sorte!

Por onde continuar

Publicamos em CriarWeb.com outro manual de design que certamente será interessante para aqueles que queiram se aprofundar no tema: Curso prático de webdesign.

Podemos conhecer alguns programas interessantes para o design na categoria de design da seção de programas.

Também temos outros conteúdos sobre design classificados em nosso diretório, onde encontraremos outros manuais, categorias, artigos e links a outras webs.

Esperamos que esta introdução ao design tenha sido interessante.

Introdução ao Webdesign

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP