Design de sites

O design da Web tem um link direto para o aspecto visual de um site. Um web design eficaz é necessário para comunicar ideias de forma eficaz.

O design da web é um subconjunto do desenvolvimento da web. No entanto, esses termos são usados alternadamente.

Pontos chave

O plano de design deve incluir o seguinte:

Detalhes sobre a arquitetura da informação.
Estrutura planejada do site.
Um mapa do site de páginas

Wireframe

Wireframerefere-se a um guia visual para a aparência das páginas da web. Ajuda a definir a estrutura do site, vinculando as páginas da web e o layout dos elementos visuais.

As seguintes coisas estão incluídas em um wireframe:

Caixas de elementos gráficos primários
Colocação de títulos e subtítulos
Estrutura de layout simples
Frases de chamariz
Blocos de texto

Wireframe pode ser criado usando um programa como o Visio, mas você também pode usar uma caneta e papel.

Ferramentas de design da web

Aqui está a lista de ferramentas que podem ser usadas para criar designs web eficazes:

Coda 2
OmniGraffle
Pen and Paper
Vim
Coda 2 é uma poderosa ferramenta de desenvolvimento e design para web, vem com melhor interface de usuário, edição de texto, gerenciamento de arquivos, clipes, sites, design e melhor suporte para Mysql. OmmniGraffle é usado principalmente para wireframes. A desvantagem dessa ferramenta é que ela não possui prototipagem interativa e está disponível apenas para Mac. Caneta e papel podem ser usados para desenhar a aparência de como o site será. O Vim é uma ótima ferramenta de design da web. Ele oferece suporte a intenções automáticas de código totalmente personalizáveis, vários buffers para armazenar código cortado / copiado e gravação de ações para repetição automática.

SN	Descrição da ferramenta
1	Photoshop CC Esta é uma ótima ferramenta de design da Web fornecida pela Adobe. O mais recente Photoshop CC 2014 oferece suporte a muitos novos recursos, como objetos inteligentes, composições de camada, guias inteligentes, integração de Typekit, pesquisa de fontes e aprimoramentos de fluxo de trabalho.
2	Illustrator CC O Illustrator CC também é uma ferramenta de design da web que vem com recursos poderosos como bibliotecas AutoCad, impressão sobreposta em branco, troca de proxy de preenchimento e traço para texto, geração automática de cantos, imagens não incorporadas e ferramentas de toque, etc.
3 -
4 -
5	Sublime Text Sublime Text é um editor de código-fonte com interface de programação de aplicativos Python. Sua funcionalidade pode ser estendida usando plug-ins.
6
7
8	Imageoptim É basicamente usado para otimizar imagens em um site para carregá-las mais rapidamente, encontrando os melhores parâmetros de compressão e removendo comentários desnecessários.
9	Sketch 3 Sketch 3 é uma ferramenta de design da web desenvolvida especificamente para projetar interfaces, sites, ícones, etc.
10	Heroku É também uma ótima ferramenta de desenvolvimento web que suporta Ruby, Node.js, Python, java e PHP.
11	Axure Suporta ferramentas de prototipagem, documentação e wireframing para criar designs de sites interativos.
12	Hype 2 O Hype 2 oferece: A maneira mais fácil de animar e adicionar interatividade, Dureza o poder do HTML5, capacidade de resposta móvel e recursos WYSIWYG.
13	Image Alpha Essa ferramenta ajuda a reduzir o tamanho dos arquivos PNG de 24 bits. Ele faz isso aplicando compactação com perdas e convertendo para o formato PNG8 + alfa, que é mais eficiente.
14	Hammer Esta ferramenta é adequada para não programadores e válida apenas para pequenos projetos.
15	JPEGmini Lite É uma ferramenta de otimização de imagens e suporta fotos em qualquer resolução de até 28 megapixels.
16	BugHerd Esta ferramenta ajuda a ver como os projetos estão indo e no que todos estão trabalhando. Também ajuda a identificar problemas no desenvolvimento.

Anatomia da página da web

Um site inclui os seguintes componentes:

Bloco Contendo

Containerpode ser na forma de tag do corpo da página, uma tag div contendo tudo. Sem o container, não haveria lugar para colocar o conteúdo de uma página da web.

Logotipo

Logo refere-se à identidade de um site e é usado nas várias formas de marketing de uma empresa, como cartões de visita, papel timbrado, brouchers e assim por diante.

Navegação

Os sites navigation systemdeve ser fácil de encontrar e usar. Freqüentemente, a investigação é colocada logo no topo da página.

Conteúdo

O conteúdo de um site deve ser relevante para a finalidade do site.

Rodapé

Footerestá localizado na parte inferior da página. Geralmente contém direitos autorais, contratos e informações legais, bem como alguns links para as seções principais do site.