Conceito de Design de Sites

Contraste

O analisador de contraste de cores é uma ferramenta para verificar se determinada combinação de cores para o fundo e para o primeiro plano, oferece boas condições de visibilidade. Ela dispõe ainda de funcionalidades que fazem simulações de determinadas condições visuais tais como a cegueira cromática.

Repetição

Repetir certos elementos que unem as partes dispersas. Cada página no site deve parecer pertencer ao mesmo site, á mesma empresa, ao mesmo conceito. Os botões, cores, estilo, ilustração, formato, layout, tipografia, todos podem ser parte da repetição que unifica o site inteiro.

Teoria das Cores, Color, Coding

É uma estranha combinação de letras e números, cada código HTML contém o simbolo # e 6 letras ou números. Estes números estão no sistema numérico hexadecimal. Por exemplo, "FF em hexadecimal representa o número 255 decimal.

Os primeiros dois símbolos no código HTML representam a intensidade da cor encarnada. 00 é o mínimo e FF o mais intenso. O terceiro e o quarto representam a intensidade de verde e o quinto e o sexto representam a intensidade de azul. Portanto, combinamos as intensidades de encarnado, verde e azul, podemos misturar qualquer cor que desejar.

Exemplo:

#FF0000 - Com esse código html dizemos ao browser para mostrar o máximo de encarnado e nenhum verde e azul. O resultado é claro a cor encarnada pura: =

#00FF00 - Este código html mostra apenas o verde e nenhum encarnado e azul: =

#0000FF - Este código html mostra apenas o azul e nenhum encarnado e verde: =

#FFFF00 - Combinação de encarnado com verdes da amarelo: =

#CCEEFF - Ponha um pouco de encarnado, um pouco mais de verde e o máximo de azul para ter a cor do céu. =

Tipografia e Estilos de Escritas

Tipografia é a arte e processo de criação de caracteres. O termo tipo é o desenho de uma determinada família de letras como por exemplo: verdana, futura, aria, etc. O conhecimento adequado do uso da tipografia é essencial aos designers que trabalham com a diagramação, ou seja, na relação de texto e imagem.

Na tipografia, as fontes tipográficas (ou apenas fontes) são classificadas em 4 grupos básicos: as com serifas, as sem serifas, as cursivas e as fontes dingbats.

Mapa do Site

É uma simples planta de quantas páginas e onde se localizam cada uma delas, como no exemplo:

Organização de arquivo

Os endereços são escritos na forma de URL, que é a maneira que inventaram para se especificar o caminho até se chegar num arquivo que esteja em algum local da internet.

O formato da URL é:

protocolo://nome-do-computador/pasta/arquivo

O protocolo indica como o navegador ira buscar o arquivo. Nome do computador é aquele endereço do tipo www.alguem.com.br e as pastas são os diretórios dentro desse computador onde estão os arquivos. Uma URL de um artigo do site da CMI Brasil é por exemplo, http://www.midiaindependente,org/pt/blue/2004/09/290669.html, onde http:// é o protocolo, pt, blue, 2004 e 09 são pastas,uma fica dentro da outra e 290669.html é o nome do arquivo

Links Relativos e Links Absolutos

Link absoluto é aquele em queo endereço é escrito integralmente. Link relativo é aquele em que o endereço é escrito de forma resumida.

Por exemplo:

<a hef="http://irineifatec.blogspot.com">Pagina Inicial</a> é absoluto

<a hef="http://irineifatec.blogspot.com/index.html">Pagina Inicial</a> é absoluto, mas

<a hef="/">Pagina Inicial</a> é relativo

<a hef="index.html">Pagina Inicial</a> também é relativo

Todos apontam para a home deste site. Observe que no relativo só apareceu o nome /index.html e no outro exemplo apenas "/" que, por convenção, significa a página inicial do site. No link relativo aparece o nome do do arquivo (no caso, index.html e "/").

As vezes a grafia de um link relativo é mais complicada. Veja por exemplo:

Os dois pontos e barra são estendidos como substitutos da página inicial, que fica na raiz do site.

Colocando no código-fonte, conduz ao destino desejado, como se pode ver clicando no link abaixo.

O link tem 4 elementos indispensáveis ao seu funcionamento: ancora, hipertexto de referência, texto dolinke âncora de fechamento </a>, Eles aparecem assim <a hef="http://dominio.com.br/glossario2.html#Ancora>Texto do link</a>.

Wireframe

Wireframe é um desenho básico, como um esqueleto, que demonstra de forma direta a arquitetura de como o objeto (interface, página da Internet, modelo, etc.) final será de acordo com as especificações relatadas.

Ele é elaborado para organizar os elementos que entrarão na composição do projeto final, no entanto, ele deve ser feito da maneira mais simples possível, mostrando apenas o essencial, como uma espécie de rascunho, sem cores ou imagens.

O objetivo do Wireframe é auxiliar o desenvolvedor no entendimento dos requisitos que foram recolhidos junto ao cliente com relação as funções e objetos que um sistema (mas não somente relacionado a informática ou Internet, pode ser um objeto, modelo, etc.)

Mockup

É como o wireframe, é um desenho básico, como um esqueleto, que demonstra de forma direta a arquitetura de como o objeto (interface, página da Internet, modelo, etc.) final será de acordo com as especificações relatadas, porém no mockup é descrito o tipo de fontes e cores que serão usadas no seu projeto.