Tipos de design visual e interação para sites

Video: INTRODUÇÃO AO DESIGN GRÁFICO

Uma das melhores maneiras de obter idéias para a estratégia de recurso e interação visual do seu site é, bem, para ler o web. Existem vários sites que agregam grandes exemplos de design em várias categorias e indústrias, tais como e-commerce ou cuidados de saúde. (Para uma rápida olhada em alguns deles, é só usar os nomes desses setores como palavras de busca.) Embora seja útil olhar para sites dentro da mesma indústria como do seu cliente, boas idéias de projetos vêm de toda parte. Você deve aprender a isolar abordagens de design, quebrá-los ao essencial, e veja como você pode utilizá-los para influenciar seus próprios projetos.

sites cinematográficos

Uma das tendências mais populares é projetar cinematográfica sites: Uma grande imagem de herói serve como pano de fundo literal para o site, levando-se a janela do navegador inteiro. Esta abordagem dramática realmente “romances” o produto e obriga o designer para chegar a um sistema visualmente limpa de navegação de apoio. Nesses locais, elementos de interface e principal bóia de navegação no topo do cenário, muitas vezes com um grau de transparência, de modo a manter a aparência larger-than-life.

Video: The first secret of great design | Tony Fadell

O que é único sobre o site especializado (abaixo) é que o grande cenário foto é o conteúdo em si: O minimalista, transparente, coberta elementos da interface revelar diferentes partes da bicicleta ou oferta de acesso aos segmentos de vídeo sobre o making of da moto. Há também uma versão móvel-friendly do site (uma vez que os dispositivos Apple não suportam animação Flash).

design de interação inovadora

Qualquer maneira que um designer pode fazer uso eficiente do espaço de ecrã e, ao mesmo tempo, manter os usuários mentalmente fundamentada em termos de onde eles estão em um site, é um design inovador e bom. Dois exemplos ilustram a utilização criativa dos dois ingredientes comuns: maximizar a área de conteúdo e scrolling (Para cima e para baixo) ou panning (Lado a lado) dentro de um espaço controlado.

Video: Pagina Single Post - HTML5 e Design de Interação (aula #74)

Um excelente exemplo de interação e design visual é o site de Salt Lake City Sistema de Biblioteca Pública. Este site simples, limpo tem duas áreas que são maximizadas em termos de exibição de conteúdo. A parte superior tem uma área de herói rotativo (não é incomum.) - o que é bom é que ao contrário de muitos sites que usam essa convenção, a abordagem visual aberto, em camadas rompe-se a região de modo que não pareça encaixotado A parte inferior tem duas projeto características acontecendo: não só um sistema de abas permitem que o usuário para virar entre quatro categorias de exibição de conteúdo (filmes, livros, novelas gráficas, e Zines), mas também cada tabulado visor desloca horizontalmente, revelando uma colagem muito bem concebido de produtos. Após a rolar sobre um produto, o usuário vê uma tela pop-up oferecendo mais informações, além de um link para a página de detalhes. A interação comprimido nesta abordagem de design pode fornecer acesso rápido a centenas de produtos, de uma pequena porção de uma página.

Video: Grids no design gráfico: o que você precisa saber antes de começar a usar | Walter Mattos

Capturando a experiência de marca

O objetivo final de seus esforços de design visual é para capturar a essência da experiência de marca. Um site que ainda belamente é projetado abriga uma grande quantidade de informação é o site Sheffa Foods, como você verá na figura a seguir. Observe como simples e limpar a interface componentes são projetados. Se você fosse para remover a fotografia, o desenho modelo de site é realmente muito simples e monocromático. Essa é a chave para esta estratégia de design. Ao manter todos os componentes de apoio simples e usando apenas algumas cores, você permite que o conteúdo em si para tomar o centro do palco. Neste caso, o conteúdo caracteriza a fotografia ousada que reforça a imagem de marca Sheffa Foods de produtos frescos e de alta qualidade.