Daniel Carvalho - Web Designer

Compartilhando Conhecimentos

Formas de Organização das páginas do seu Site

1- HIERARQUIAS



A maneira mais fácil e mais lógica de estruturar os seus documentos. As hierarquias e os menus adaptam-se especialmente bem aos documentos on-line e hipertexto. Exemplo: sistemas de ajuda.

HOME PAGE




Em uma organização hierárquica, é fácil para os leitores descobrir a posição em que se encontram na estrutura. Nas hierarquias, a home page fornece uma visão geral do conteúdo que está subordinado a ela e ainda define os principais vínculos as páginas dos níveis inferiores da hierarquia.

Este tipo de estrutura oferece um risco mínimo de ficar perdido, além de ser uma forma mais fácil de localizar informações. Mas procure não incluir muitos níveis para não aborrecer os leitores. Pois estes, após ter de selecionar opções em muitos menus, acaba esquecendo o que estava procurando. Fica aborrecido demais para prosseguir. Procure manter apenas dois ou três níveis na sua hierarquia.

2- LINEAR



Muito semelhante à forma como são organizados documentos impressos. Neste tipo de estrutura a home page é o título, ou introdução, e todas as outras páginas acompanham-na em seqüência com vínculos que levam de uma página a outra, normalmente com opções de avançar e retroceder.

Uma organização linear é muito rígida e limita tanto a liberdade dos seus leitores de consultar as informações quanto a sua própria liberdade de apresentá-las. As estruturas lineares são ideais para apresentar, no ambiente on-line, um material que já tenha esse tipo de estrutura no ambiente off-line. Como por exemplo: instruções passo-a-passo ou treinamento baseado em computador.



3- ESTRUTURA LINEAR



Você pode tornar a estrutura linear menos rígida permitindo que o leitor se desvie do caminho principal. Pode ter, por exemplo, uma estrutura linear com ramificações alternativas que partam de um único tronco. As ramificações podem se reunir ao tronco principal em algum ponto mais adiante, em um nível mais baixo da estrutura, ou continuar se ramificando em níveis inferiores seguindo caminhos próprios até chegar a um "fim".

Além de ramificar a estrutura linear, você pode também oferecer vínculos que permitam aos leitores avançar ou retroceder na cadeia, caso precisem rever alguma etapa ou já conheçam alguma parte do conteúdo.



4- COMBINAÇÃO DAS ESTRUTURAS LINEAR E HIERÁRQUICA



Uma forma comum de organizar um documento na Web consiste em obter uma combinação das estruturas linear e hierárquica. Essa estrutura combinada ocorre com maior freqüência quando documentos de estrutura rígida, porém lineares, são apresentados no ambiente on-line. Um exemplo são os famosos FAQ (Frequently Asked Questions).

A combinação de documentos lineares e hierárquicos funciona bem desde que haja pistas em relação ao contexto.
Como essa é uma estrutura linear e hierárquica, em cada página do roteiro você deve oferecer vínculos para o leitor avançar, retroceder, retornar ao início e subir um nível.

Horizonte em 5 minutos

OK, aqui montei uma imagem em seguencia de um horizonte com apenas 3 ferramentas do COREL DRAW, é claro que o objetivo não é ensinar a criar imagens e sim dar uma ideia de como você pode usar a criatividade e criar maravilhas.

AS FERRAMENTAS USADAS










2° CRIEI UM TRAÇO COMO SE DESSE A IMPRESSÃO DE UM HOTIZONTE MONTANHOSO






3° ADCIONEI UM CIRCULO REPRESENTANDO O SOL






4° TRACEI UM CAMINHO PARA DAR UMA PERSPECIVA






5° UTILIZANDO A FERRAMENTA DE MIDIA ARTISTICA VC TEM INUMERAS OPÇÕES PARA ADCIONAR A SUA IMAGEM, NO CASO ADCIONEI UMA PASTAGEM OU GRAMA.






6° LOGO EM SEGUIDA ADCIONEI DOIS PASSÁROS COM A MESMA FERRAMENTA






7° LOGO APOS NUVENS






8° EM SEGUIDA UMA TEXTURA NO CÉU






9° ADCIONEI UMA TEXTURA






POIS É , COMO EXISTEM INFIDAVÉIS FORMA DE SE MONTAR IMAGENS DE FORMA ILUSTRATIVA EU PAREI POR AQUI, PELO FATO DE DEIXAR SOMENTE UM PONTO DE CURIOSIDADE EM VOCÊ, AGORA MÃOS A OBRA E BOA CRIAÇÃO.

HA...NÃO ESQUEÇA É CLARO DE ASSINAR A SUA OBRA.





Valeu
Até a próxima.

Transformando Fotos em Pintura

Este é um simples tutorial que mostra como transformar sua imagem ou foto em uma tela estilo pintura. Este efeito terá uma tela de pintura bonita e imagem em um cenário com muitas cores misturadas entre si.

Veja o antes e o depois:



Passo 1:

Abra a sua imagem no Photoshop. Duplique a camada, depois de duplicar ou defina a tipo como: Soft Light. Fazemos isso para reforçar a cor da nossa imagem.

Veja na tela abaixo o exemplo:



Passo 2:

Faça uma união (Merge) com a camada nova e a copia, selecione as duas e precione CTRL+E. Então com a nova camada unida, vá em Filter > Artistic > Paint Daubs. Aplique estas configurações ou algo próximo para obter o efeito mostrado abaixo:





Passo 3:

Depois vá emFilter > Brush Strokes > Angled Strokes. Novamente aplique algo próximo da tela abaixo para obter o efeito desejado.





Passo 4:

Agora vá em Filter > Distort > Glass. Aplique estas configurações ou algo próximo para obter o efeito mostrado abaixo:





Passo 5:

Duplique a camada que recebeu os efeitos. Tire a saturação da camada duplicada indo em: Image > Adjustment > Desaturate.

Passo 6:

Com a camada dessaturada selecionada, vá em Filter > Stylize > Emboss. Aplique as configurações abaixo:



Passo 7:

Finalmente, defina esta camada como senhdo Hard Light ou Vivid Light, dependendo de como sua imagem é.

Criar Album de Fotos no Photoshop

Crie uma pasta em qualquer lugar de seu computador com as imagens com a qual iremos trabalhar após isso iremos ao menu Arquivo>>Automatizar e por fim iremos escolher a opção
Galeria de fotos na Web conforme vemos abaixo:


Onde na nova tela que surgiu iremos selecionar o botão procurar e apontar o caminho até a pasta onde com as nossas fotos,conforme descrito abaixo:

Nosso próximo passo é configurar nossa galeria como o estilo, seu local de destino e as informações sobre o autor conforme vemos abaixo:

Onde o resultado final podemos conferir abaixo:

Efeito Matrix no Photoshop

Começamos com a criação de um documento simples conforme já vimos anteriormente após isso selecionamos a tecla d para o reset das cores, aonde após isso iremos ao menu filters>> texture>> Grain conforme vemos abaixo:


Surgindo a tela abaixo:

Onde iremos efetuar as configurações destacadas acima:
Grain type= Vertical
Contrast=100
Intensity=100
Ficando nossa imagem similar a vista abaixo:

Onde iremos retornar ao menu filter>>Artistic>>Neon Glow conforme vemos abaixo:

Surgindo a tela abaixo, onde iremos efetuar as seguintes configurações:
Glow Size=5
Glow Brightness=25
Glow Color=Qualquer tonalidade de Verde

Onde nossa imagem será similar a vista abaixo:

Após isso iremos retornar ao menu filter >>stylize>>glowing Edges conforme vemos abaixo:

Onde na nova tela iremos efetuar as seguintes configurações, conforme vemos abaixo:
Edge Width=1
Edge Brightness=4
Smoothness=1

E o resultado final vemos abaixo onde ainda é possível incrementar um pouco mais através de sua criatividade esse efeito, então use e abuse da base criada nesse exemplo:

Como garantir usabilidade, navegabilidade e interatividade

Se tem uma coisa que você quer, é que seu visitante tenha uma experiência de qualidade em suas páginas. E estas palavrinhas são os conceitos que farão do tempo que seu visitante passa em suas páginas, uma porcaria ou uma curtição:

- Usabilidade – suas páginas são fáceis ou difíceis de usar? O ideal é que sejam fáceis, mesmo quando alguns designers gostam de criar ‘desafios’ para o visitante descobrir como navegar. Podem até ganhar um prêmio qualquer, mas perderão os visitantes. É da natureza humana preferir situações fáceis e conhecidas.

- Navegabilidade – não se trata de nenhum site sobre esportes aquáticos, mas da forma como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de seu site com apenas dois cliques , pode dizer que o site tem boa navegação. Três cliques são admitidos para sites com mais de 500 páginas, mas se passar disso, tem alguma coisa errada com seus menus e botões. Outra dica: se é preciso clicar em um botão ou link para voltar sempre que o visitante quer visitar outra página, está faltando navegabilidade e podemos dizer que o site está ‘travado’.

- Interatividade – é a forma como o visitante se relaciona com as páginas e vice-versa. Se o visitante não consegue ler o texto porque o fundo não tem contraste suficiente com a cor das letras, ele não poderá interagir com o site. Como nos itens anteriores, a palavra chave é simplicidade e deixe-me acrescentar, foco. Projete a forma como o internauta interage com o site de forma a criar uma experiência enriquecedora e na direção de seus objetivos .

Vamos examinar alguns modelos que podem lançar uma luz sobre a questão.

Elementos de design
É desses elementos que sua página é feita.

Estarão eles na ordem e disposição que vai afetar o sistema límbico do leitor? O quê vai acender aquela fagulha no hipotálamo da pessoa que fará com que ela abra os bolsos para seus produtos e serviços?

Quem responde é você, pensando a experiência centrada no cliente.

Agora vejamos os elementos de design que você vai usar.

Marca – serve para comunicar sua marca ao visitante, para identificar a página e manter a coesão dentro do seu domínio. O canto esquerdo superior funciona no ocidente porque lemos neste sentido, mas você pode usar o topo da página como quiser. Enquanto o visitante ver a marca na mesma posição vai saber que está em seu site.
Publicidade – elementos como banners, links e etc. que servem para promoção ou propaganda de produtos e serviços de terceiros. Está marcado em vermelho para te lembrar que a publicidade leva seu tráfego embora, e a não ser que esta seja sua intenção, pense bem se vale a pena fazer a publicidade de terceiros.
Formulário de assinatura – para captação do nome e email do visitante para a sua lista de contato. A assinatura tem que ser voluntária, no jargão: opt-in. Significa que o leitor opta por entrar na lista ou seja, te dá PERMISSÃO de enviar-lhe emails posteriormente. Não dá para exagerar a importância da lista de permissão. Toda página deve conter uma caixa de assinatura, ao menos, como função secundária. A exceção seriam as páginas extras que você libera após o visitante assinar.

Menu principal – as opções de navegação e interatividade de suas páginas mais básicas. Exemplo: você publica artigos em seu site, pode ter uma seção de artigos que consta no menu principal. 99% dos sites seguem a linha: ‘quem somos, nossos produtos, nossos clientes’ e você não vai querer seguir essa linha.

Menu secundário ou de seção – a existência deste menu secundário depende do tamanho do site. Somente portais e sites com muitas páginas, necessitam de menus secundários. Usando o exemplo anterior, este menu conteria links para cada um dos artigos publicados no site, ou então, links para as categorias dos artigos (quando a quantidade exigir tal divisão).

Mensagem (função, ação) – este é o principal elemento de qualquer página. Se uma página não tem uma função definida, não passa uma mensagem definida ou não pede que o visitante execute uma ação definida, esta página não tem razão de ser, não tem valor e não precisa existir. Uma página nem deveria ser criada sem uma função, sem um objetivo.

Scripts – são componentes que automatizam processos como o script de indicação, para entrar nos favoritos, webcards, etc.
Complemento (copyright, contato, avisos, etc) – são informações e links que completam a informação / layout da página.

Identidade do site
Se o seu site está ‘travado’, examine a marca, o menu principal (e o secundário quando existir) e o complemento. Veja suas posições e o acabamento das imagens e dos textos. Estes elementos são também chave para a navegabilidade e grande parte da usabilidade do site.

Há outros elementos que também estarão em todas as páginas que tem funções desligadas da identidade do site e que acabam tendo também este papel: formulário de assinatura, scripts, etc (marcados em cinza).

A identificação está intimamente ligada à credibilidade
Você já visitou um daqueles sites em que cada página tem uma cor de fundo diferente, ou que, para ver outra página tem que clicar no botão voltar? Duvido que tenha se inclinado a fazer negócios com uma empresa que tem páginas tão fracamente ligadas visualmente. Sem uma identificação clara, o site não passa credibilidade, pelo contrário, passa uma imagem amadora e antiprofissional.

Disposição dos elementos de design
A ordem em que você dispõe os elementos do design em suas páginas tem uma relação direta com o sucesso que a página vai obter. Não existe uma fórmula única. De tempos em tempos, vale a pena fazer uma pequena mudança nas posições para estudar os resultados. Mas podemos dizer que alguns elementos funcionam melhor em determinadas posições.

Um modelo de distribuição de elementos de design

Por exemplo:
O menu principal não precisa ficar na vertical como indicado na disposição padrão. Tudo depende dos objetivos que você tem para seu site.

A marca pode ocupar todo o espaço do topo da página. Mas se colocada muito abaixo, pode ficar escondida e o site perde a identidade.

Desde que fique antes da primeira dobra, o formulário de assinatura poderia ficar em qualquer lugar.

E por aí, vai.

O mais importante é que os elementos estejam dispostos de uma forma a aumentar as suas chances de sucesso, seja qual for a função da página. Use os elementos de design a favor de sua oferta e não contra ela.

A criatividade é o limite, insistindo em que você deve manter a coesão e sentido na distribuição dos elementos.

Planejando o site
Conceitualmente, podemos dividir uma página, em duas partes principais:

- Forma : composta pelos elementos que dão identidade, navegabilidade e usabilidade ao site. São a marca, o menu principal, o fundo (background) das páginas. A forma é mantida igual em todas as páginas.

- Função : o elemento que chamamos de mensagem é que dá a função à página. Cada página deve ter uma função definida e distinta das outras páginas.

Antes de sair construindo as páginas de seu site, use estes conceitos para planejar o que e como vai fazer. O primeiro passo é definir seus objetivos e em seguida, usar os elementos de design para alcançar suas metas.

Como estamos falando da estrutura do site, vamos deixar a função de lado por um instante e nos concentrar na forma. Prepare a ‘cara’ do seu site e crie UM modelo apenas, para TODAS as páginas. Lembre-se apenas de deixar espaço para a mensagem.

Quando tiver preparado o modelo para a estrutura de seu site, você poderá usar os programas mais modernos de criação de páginas web, que têm um recurso chamado ‘template’ (modelo).

Você passará a criar páginas baseadas neste template, acelerando o desenvolvimento e permitindo que você foque sua atenção na função de cada página, facilitando planejar a mensagem que será passada adiante, sem se preocupar mais com o layout que será mantido pelo modelo.

Por Anderson Villela - Redator do Oficina da Net

Pesquisar este blog

Deixe seu recado, seu pedido de post.

Esse blog foi útil a você?

Seguidores