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.

Espaço em branco

Também é chamado de negative space e refere-se a qualquer área da página que não seja coberta por tipo ou ilustrações.

Erros de design da web

Deve-se estar ciente dos seguintes erros comuns, sempre deve-se ter em mente:

  • O site não funciona em nenhum outro navegador do Internet Explorer.

  • Usando tecnologia de ponta sem um bom motivo

  • Som ou vídeo que começa automaticamente

  • Navegação oculta ou disfarçada

  • 100% de conteúdo flash.