Projetando layouts de interface do usuário do Killer Web com Freebies - Ultimate Guide

O campo do web design tomou fôlego em apenas alguns anos. Atualmente, há designers mais ativos em todo o mundo do que nunca, todos colaborando em ideias de projetos inovadores. E os conceitos por trás de muitas dessas tendências foram desenvolvidos através de designers gráficos profissionais.

Pode levar meses ou até anos para entender completamente os detalhes técnicos da criação de uma interface de usuário. Você precisa considerar tamanhos e posicionamento de elementos de página, além de legibilidade de texto e rótulos. Com um pouco de tempo livre, você pode mergulhar em uma abordagem minimalista para criar sites com menos e reduzir a confusão. E, mesmo assim, existem dezenas de outras técnicas de design a considerar também.

Para este guia eu emparelhei alguns técnicas modernas de design de interface de usuário com freebies você pode baixar e brincar com. É minha esperança que isso ofereça alguma motivação para os interessados em uma carreira na construção de gráficos / web design. Mesmo web designers profissionais podem achar algumas dessas tendências úteis para o seu próximo projeto.

Pratique com modelos completos

Quando você tem as habilidades para projetar seu próprio layout a partir do zero, não há necessidade de começar com modelos. Iniciantes, por outro lado, podem se sentir mais confortáveis a partir de um projeto completo e trabalhando nos detalhes mais finos..

Existem alguns excelentes downloads gratuitos de modelos completos de sites da PSD para portfólios, páginas iniciais, blogs e muitas outras categorias. Estes são os projetos perfeitos para começar a se familiarizar com um “geral” layout da web. Cada site terá diferentes necessidades de elementos de página e você terá que determinar quais itens são importantes.

Aqui está um exemplo de PSD chamado "AppCivilization", projetado por Martin Fabricius. O layout é apresentado para um estúdio de criação que cria aplicativos móveis e, possivelmente, websites. Em direção ao fundo, você encontrará um pequeno painel de ícones de aplicativos exibidos em um portfólio. Você também notará que todo o design é dividido horizontalmente em um cabeçalho, no slideshow superior, no conteúdo principal e no rodapé escurecido..

Original Source - Baixar

Criando páginas de destino

Vamos dar uma olhada em outro brinde também desenhado por Martin. Este próximo exemplo é uma página de destino que você pode usar para vender qualquer tipo de produto. Geralmente, são produtos digitais que podem ser baixados pelo usuário, por exemplo, aplicativos, fotos, ícones, modelos, etc..

Original Source - Baixar

Mas a melhor parte de seu design é que é muito flexível para os iniciantes trabalharem por aí. O cabeçalho ainda usa uma pequena navegação superior com uma imagem grande, mas notavelmente as ações esperadas do usuário são diferentes. Ele tem um grande “Compre!” botão que se destaca logo acima da dobra. Em uma página de destino do produto, isso chamaria mais atenção do que uma apresentação de slides do jQuery.

Outra ótima técnica de interface do usuário é a pequena tela de recursos do iPhone no meio da página. Martin inclui uma captura de visualização do iPhone, um botão da App Store e uma pequena lista de recursos importantes. Quando os visitantes estão procurando por detalhes do produto, você não pode tornar as coisas mais simples do que através de uma lista formatada.

Mais modelos:

Aqui estão alguns modelos PSD gratuitos que lançamos no passe:

"BiZ" Business Website Templates PSD
"ThinkJuice" Site de produto PSD Template
Modelo de PSD de site de negócios profissional
Modelo de PSD de Site de Portfólio "Polo360"

Você também pode estar interessado nestes:

Modelos de sites de negócios
Tutoriais de páginas "em breve" + modelos

Navegação do site principal

Menus e botões são apenas ferramentas para construir elementos de página muito maiores. Não há como negar que a navegação principal do seu site possui um propósito muito significativo. Você precisa disso para que seu site seja facilmente acessível com possíveis métodos de fallback para usuários de dispositivos móveis.

Abaixo está uma barra de navegação legal com um efeito de textura de costura. O estilo de destaque pode ser apresentado como uma caixa escurecida ou como uma ponta apontando para o conteúdo da página. Este estilo tem sido proeminente ao longo dos anos e parece ótimo no cenário certo.

Original Source - Baixar

Outro brinde similar é este cabeçalho de navegação texturizado projetado por Edi Gil. Eu realmente gosto de como esta segunda barra de navegação inclui uma lista de links e alguns botões de página adicionais. Você vai querer oferecer links secundários para os visitantes, onde eles podem encontrar seus perfis na Web..

Original Source - Baixar

Estilos de menu alternativos

Além da típica barra de navegação horizontal, há outros estilos de design a considerar. Os links verticais podem ser divididos em diferentes subtítulos, o que deixa mais espaço para o conteúdo da página.

Tomemos por exemplo o menu gratuito abaixo, desenhado pelo site Icojam.

Cada título é construído para expandir e recolher com base no objeto selecionado. Além disso, o design permite que um pequeno contador de números fique no lado direito de cada categoria. Isso seria melhor preencher como uma navegação no blog para contar quantas postagens são arquivadas em cada tópico.

Original Source - Baixar

Dicas de navegação / Tutoriais:

50+ Limpar Scripts de Navegação Baseados em Tabs CSS
Práticas recomendadas e exemplos de navegação do Breadcrumb
Construindo Navegação Móvel com jQuery
Codificação da Navegação Breadcrumb em CSS3
Projetando Navegação Com Menos CSS

Formulários Web mais limpos

A era moderna da Internet está longe de ser um ponto de encontro estático. Os usuários estão constantemente compartilhando informações e interagindo uns com os outros diariamente. A maior parte desse compartilhamento de texto e mídia é gerenciada por meio de formulários da Web.

Devemos olhar apenas alguns exemplos de como você pode criar entradas e botões de aparência limpa. O design de seus elementos pode ajudar muito os visitantes a usá-los. E isso, por sua vez, aumenta a credibilidade do seu site e gera mais visualizações de página.

Campos de Login

Existem alguns ótimos exemplos de PSDs de formulário de login para fazer check-out. Este freebie de login via Cientista WP tem todos os seus elementos padrão. Dois campos de entrada para login / senha, um botão de envio e caixas de seleção para gerenciar cookies de sessão.

Este modelo de design é perfeito se você puder implementar os efeitos através do jQuery. A parte superior direita da seta faz você pensar em uma configuração de janela em estilo pop-up. Essa é uma técnica maravilhosa para economizar espaço no seu site, mantendo o formulário oculto até que um usuário clique no link de registro.

Original Source - Baixar

O formulário abaixo é gratuito para download graças ao designer Gil Huybrecht. Ele usou um padrão similar com um fundo granulado e textura de papel. O que mais gosto no design de Gil são os elementos "oversized". É muito mais fácil pousar em um formulário de login que preenche toda a página. Os usuários podem ver facilmente o que estão digitando e há menos confusão.

Original Source - Baixar

Se você tem experiência como desenvolvedor frontend usando CSS3, é super fácil traduzir este gráfico em código. Você pode até mesmo implementar o efeito de brilho externo selecionado e cantos arredondados para o botão e campos de entrada.

Contatos

Outra forma que você encontrará em praticamente todos os sites é um formulário de contato. Isso normalmente incluirá campos para o nome do remetente, o e-mail e o conteúdo da mensagem..

O brinde abaixo é um ótimo exemplo do uso de texturas e ícones personalizados.

O design também usa texto de espaço reservado em vez de rótulos. Isso significa que quando o formulário carrega primeiro cada campo é definido com um valor padrão (ex: seu nome). Mas, quando você começa a digitar, o espaço reservado é limpo e seu conteúdo é exibido. Todos os navegadores compatíveis com os padrões suportarão esse efeito e economizarão espaço na página.

Original Source - Baixar

Outro brinde maravilhoso para pegar é este formulário de contato com guias projetado pelo talentoso Jonno Riekwel. Esse design é muito mais simples e possui rótulos acima de cada entrada. Esta é uma ótima solução para grandes empresas ou startups que precisam enviar mensagens através de diferentes departamentos da empresa..

Original Source - Baixar

Entre em contato com tutoriais de formulários:

Formulário de Login / Registro: Idéias e Exemplos Bonitos
Criar um Formulário de Login de Efeito de Papel Empilhado
Criar um formulário de contato HTML5 / CSS3 com base em Ajax

Fitas e Banners

Apenas 6 ou 7 anos atrás cantos arredondados estavam começando a subir em tendências de design populares. Agora chegamos ainda mais longe com sombras e fitas de canto.

Original Source - Baixar

Alguns desses elementos podem ser usados como destaques de design, como um contador de comentários ou como uma data de publicação para um blog. A fita costurada acima é perfeita para portfólios ou páginas de projetos onde você deseja capturar a atenção do seu visitante. Você também pode tentar uma fita vertical semelhante, onde o design cai a partir do topo.

Esses pequenos efeitos de página ajudam muito a aprimorar seu layout. Os visitantes tomam conhecimento e vão adorar essas gentilezas estéticas. Mas considere que pequenas fitas de canto são apenas parte dessa tendência de design.

Original Source - Baixar

Além disso, designs completos de banners se tornaram incrivelmente populares para aumentar o reconhecimento da marca. Você pode utilizá-los em seu logotipo, navegação, página inicial ou mesmo em postagens de blog em destaque. As implicações são praticamente ilimitadas, com bons recursos de design.

Envolvendo o canto

Outro efeito de banner de faixa de opções muito específico é realizado envolvendo o design no canto da página. Isso cria a ilusão de que sua página é 3D e que a faixa de opções é envolvida na parte superior de seu website.

O design abaixo é 100% gratuito para download e pode ser usado para suas próprias idéias de projetos. Você pode ver como isso chamaria a atenção dos visitantes e por que essa tendência se tornou tão frenética. Tenha cuidado para não usar demais os banners. A granel, estes podem ficar muito irritantes, como os antigos efeitos brilhantes / espelhados "web 2.0".

Original Source - Baixar

Criando com botões

Além de hiperlinks, você terá a maior interação dos visitantes com botões. Esses itens de página podem executar qualquer coisa com a ajuda de chamadas do jQuery e do Ajax, exceto que você também pode usar botões para vincular a conteúdo estático, como downloads de freebie, por exemplo.!

O kit de interface do usuário abaixo, projetado por Matt Gentile tem muito mais do que apenas botões. Seu conjunto de PSD é fantástico para iniciantes que buscam captar gradientes e texturas para construir formas semelhantes. Muitas vezes você encontrará botões de qualidade muito superior em kits de interface do usuário do que com PSDs singulares.

Original Source - Baixar

Como criar variações

Como você gasta tempo praticando essas técnicas, você vai querer criar muitos estilos diferentes ao longo do tempo. Isso pode resultar na troca de botões semelhantes entre diferentes projetos e layouts. Um bom exemplo é o conjunto de botões leitosos oferecido pelo designer Robert van Klinken.

Original Source - Baixar

Cada um dos três botões originais tem um estilo de gradiente diferente, exceto os estados de foco e ativos que parecem semelhantes. Ao trabalhar no Photoshop, você precisará combinar cores entre gradientes ou mover as cores para uma camada de efeitos. Com esse entendimento você pode até mesmo criar seus próprios brindes para download!

Original Source - Baixar

Texturas de madeira + papel

Quando você precisa incrementar seus projetos básicos de layout, você terá que passar para métodos mais engenhosos. As texturas são sempre bem-vindas se você puder implementá-las adequadamente por meio de planos de fundo CSS ou conteúdo de largura de conjunto. E duas das texturas mais populares que vi são de madeira e papéis em branco.

A idéia do bloco de notas é realmente simples, mas pode se transformar em um design de branding legal como parte de um elemento da interface do usuário ou incorporado a todo o layout. Mas o papel nem sempre parece o melhor por si só, e outra textura pode ajudar os estilos a se misturarem. É aqui que as texturas mais detalhadas da madeira podem entrar em jogo..

Original Source - Baixar

As imagens vão se destacar e ficar maravilhosas envoltas em uma casca externa. Todo o conceito de textura é dar ao seu site uma sensação ou emoção específica. Temas de madeira podem evocar uma sensação de lar e natureza. Há até mesmo um kit de interface web de madeira incrível para download por Jeremiah Wingett. Se você estiver se sentindo criativo, tente reunir algumas de suas próprias texturas e veja como elas funcionam em um ambiente baseado na Web.

28 texturas de madeira de alta resolução

Conclusão

Os melhores web designers são aqueles que praticam diariamente e nunca deixam seus fracassos impedir seus objetivos finais. Você tem que ser responsivo e se recuperar rapidamente de tentativas bem-sucedidas e malsucedidas. As dicas e brindes deste guia devem ser um bom ponto de partida para começar a aprender como construir diferentes conceitos de página para um projeto da web. E gostaríamos de ler seus pensamentos sobre o assunto na área de pós-discussão.