24 projetos de sites inteligentes que combinam JQuery e ilustração
Graças ao poder do JavaScript, as palavras "dinâmico" e "ilustração" não se aplicam mais apenas a sites baseados em Flash.
Agora que o HTML dinâmico é uma realidade nos navegadores mais usados e que existem muitas bibliotecas JavaScript sofisticadas para tornar o uso mais fácil, os sites CSS podem recuperar parte do crédito de rua mantido com tanta propriedade pelo Flash.
Dessas novas bibliotecas JavaScript, o jQuery tornou-se um dos mais amplamente adotados por causa de sua facilidade de uso, amplitude de recursos e foco inicial em exclusividade visual.
Aqui estão 24 exemplos inteligentes de designs de sites usando jQuery e Illustration .
1.Form Cinqüenta e Cinco
Características: Alterando a ilustração do cabeçalho; várias pequenas janelas de slideshow.
Descrição: Este site não apenas tem um conteúdo genuinamente bom relacionado ao design, mas o jQuery é usado de diversas maneiras para aprimorar a aparência e a usabilidade do site. Adicione um plano de fundo ilustrado com mudanças periódicas e alguns controles de interface circulares agradáveis e você terá um belo casamento de jQuery e ilustração.
Home page com ilustração de cabeçalho: 
Coluna da esquerda com tags ativadas: 
Cabeçalho de sombra da janela para efetuar login: 
2. Frozn
Características: Deslizamento vertical e horizontal.
Descrição: Além dos grandes círculos coloridos com números, o recurso que mais notei foram as fotos de perfil ilustradas. Então, eu cliquei neles. Foi quando a mágica aconteceu: sombreamento de janelas vertical e horizontal que abriu um conjunto completo de entradas de blog com vídeos incorporados do Vimeo. O gradiente de rodapé persistente é um efeito interessante quando você rola para baixo.
Grandes círculos e ilustrações de autor na página inicial: 
Expansão vertical de conteúdo: 
Ilustrações de autor expandem para revelar entradas de blog e vídeos: 
3. iPhone Mockup
Funcionalidades: arrastar e largar, segmentação
Descrição: Se você já pensou em criar um aplicativo para o iPhone (e qual não foi o desenvolvedor da Web?), Esse pode ser um site para verificar. Ele permite que você arraste e solte os elementos de interface desenhados ou desenhados por computador em um esboço de iPhone esboçado ou desenhado por computador. Embora seja bastante básico em design, é um uso inovador de ilustração que só poderia ter sido retirado anteriormente com o Flash.
Editor de iPhone desenhado por computador: 
Editor do iPhone esboçado: 
4. Flourish da Flórida
Recursos: Mouseovers com transparência, apresentação de slides
Descrição: As cores brilhantes e os detalhes da árvore ilustrada nesta página inicial são captadores de atenção imediatos. Clique em qualquer uma das categorias que se ramificam a partir da árvore e você terá não apenas conteúdo descritivo orientado por jQuery, mas também uma árvore completamente diferente. Role para baixo e você verá uma bela apresentação de slides centralizada e um rodapé que leva o motivo natural para o subsolo.
Visão completa da home page, com grande árvore, slideshow e rodapé: 
Árvore de “usabilidade”: 
Árvore “Flexibilidade”: 
5. Chá Rodada App
Características: Slideshow, pequena animação, objetos deslizantes
Descrição: Talvez seja eu ou um sinal de que a Apple tem designers brilhantes, mas eu gosto de sites que cortaram fotos do iPhone. Este site tem um animado, com uma apresentação de slides na tela acionada por passar alguns botões bem trabalhados. O tipo Helvetica arredondado combina bem com o design do telefone e dos botões. As ilustrações com tema de chá na página e nas capturas de tela do aplicativo unem tudo.
Animações dentro do gráfico do iPhone na página: 
Janela pop-up exibe a tela do aplicativo: 
Outra tela do aplicativo Tea Round mostrada no gráfico do iPhone: 
6. Melhor Antes
Características: posicionamento de tela, animação de navegação
Descrição: Se os sites puderem usar esteróides da jQuery, esses serão os Barry Bonds da Web. Com todos os recursos visuais dinâmicos, esse site pode ser facilmente confundido com um site em Flash. Após uma inspeção cuidadosa, você verá que a página não é nem Flash nem complexa do ponto de vista da programação. Mas a percepção de que nem um vestígio de Flash existe permanecerá gravada em sua psique.
O menu inicial: 
Mais coisas em chaves: 
Submenu e portfólio: 
Animação
Encontrar um design de site para o qual o DHTML foi escolhido para criar a animação é sempre uma surpresa. A melhor parte para mim é que eu posso ver no meu iPhone. Tenho certeza de que essa não é a principal razão pela qual os designers escolheram ignorar o Flash e suas ferramentas amigáveis à animação. Eu não sei o quanto eles confiaram no jQuery para codificar suas animações, mas eles tiveram que ter tendências sádicas de algum tipo para conseguir isso.
7. Olho do Tori
Características: Pássaros de Origami voando horizontalmente.
Descrição: Quem pensa em usar o origami em uma página da Web? E quem pensa em usar pássaros de origami azul para representar tweets, em vez da ilustração azul padrão? E quem pensa em animar tweets? A resposta a estas perguntas é, os criadores do Olho do Tori. Crie um site com qualquer um desses recursos e você terá algo completamente original. Para esses criadores, ter todos esses recursos não foi suficiente. Eles tomaram a decisão contra-intuitiva de fazer toda a animação sem Flash!
Origami Twitter pássaros voando através de uma paisagem: 
8. Malas
Características: Animação de apresentação de slides e rodapé com ícones de uma cor.
Descrição: O uso do jQuery aqui é mais óbvio quando o slideshow é acionado por um clique na área de navegação. O expansivo espaço em branco, o tipo preto e as ilustrações de ícones combinadas criam um site agradável. Mas eis que, uma animação no rodapé não parou de funcionar desde a sua chegada. Clique com o botão direito do mouse nas animações pretas sólidas e você descobrirá o segredo do filme de longa duração do site: Sprites e DHTML.
Home page com muito espaço em branco: 
Grandes ícones espalhados pelo conteúdo da apresentação de slides: 
A animação de rodapé é executada continuamente, independentemente de onde você esteja no site: 
9. Kidd 81
Recursos: animação de cabeçalho viajando horizontalmente.
Descrição: Os desenhos com tema de inverno de cores vivas atraem sua atenção imediatamente, e o design tem continuidade até o rodapé. Como alguns desses outros sites que usam o jQuery para animar objetos, as imagens que se movimentam suavemente parecem indistinguíveis do Flash à primeira vista. A cereja no topo do bolo, no entanto, é o arrastável “Uau! Eu não acredito que você pode arrastar esses ícones.
Animações de cabeçalho da página inicial: 
Um rodapé com o mesmo tema ilustrado: 
A seção da loja tem o mesmo caractere e cores: 
Rolagem Vertical
Algumas ferramentas JavaScript são capazes de acionar a rolagem suave entre as seções de uma página. O jQuery, é claro, é mais do que capaz de realizar esse efeito, e pelo menos alguns dos sites desta seção seguem esse caminho. A rolagem dinâmica é um ótimo efeito, mas combinada com ilustrações criativas e detalhadas, o recurso é apenas uma parte da imagem maior.
10. Tomas Pojeta
Características: céu, oceano, debaixo d'água.
Descrição: Como alguns outros sites nesta seção, a Pojeta adota um motivo que vai de alta altitude até abaixo da superfície. O topo do site está no espaço, com seu foguete e macaco altamente detalhados. Role para baixo e você verá alienígenas e balões na baixa atmosfera. Mais abaixo está um pedaço de terra com aparência de ilha de Páscoa no meio da água, o que leva a uma visão subaquática com um submarino. Cada ilustração se ajusta e as transições são praticamente ininterruptas.
Foguete e macaco no espaço: 
Ilha de Páscoa e Tucano: 
Submarino subaquático: 
11. Morphix
Características: espaço, céu, terra, subterrâneo.
Descrição: Morphix também começa com alguma ação atmosférica superior, mas depois transita para terra em vez de mar e termina com um corte subterrâneo. O estilo é obviamente diferente, mas a ilustração de cada camada abrange a largura da página, como a última, criando um senso de horizonte. E novamente, a transição do céu para o subterrâneo flui suavemente, especialmente com a rolagem dinâmica.
Atmosfera superior, com portfólio: 
Nível do solo, com vacas e arranha-céus: 
Subterrâneo, com raízes de árvores e marmota: 
12. GANDRWeb
Características: vários infográficos.
Descrição: Ao contrário dos dois sites anteriores, este usa infográficos no lugar de personagens, paisagens e fundos. Cada seção da página explica o gráfico que acompanha. A parte inferior da página apresenta, sem surpresa, um grande formulário web. Um site puramente relacionado a vendas que usa tanta boa ilustração é raro. As transições acionadas por jQuery adicionam brilho à mensagem.
Infográfico explicando benefícios e preços: 
Infográfico explicando o processo de design: 
Formulário Web: 
13. Orman Clark
Características: nuvens, objetos terrestres e voadores
Descrição: Como os dois primeiros sites nesta seção, o site de Orman Clark começa com o céu, mas a página alta fica com o céu nublado todo o caminho até o rodapé, onde atingimos o chão. Uma diferença notável entre esta página e a maioria das outras neste artigo é a posição fixa da navegação principal e da ilustração. Isso é acentuado pela explosão de estrelas no topo do plano de fundo que destaca o ovo flutuante. O site também apresenta um slideshow jQuery bem integrado para o portfólio.
Balão, vaca e ovo: 
Slideshow do portfólio biplano e jQuery: 
Formulário Web, rodapé e navegação fixa: 
14. Dreamerlines
Características: várias colagens.
Descrição: O site Dreamerlines usa uma abordagem discreta. Como o GANDRweb, cada seção tem um gráfico distinto que é amarrado às seções vizinhas apenas pelo espaço em branco. Cada seção, no entanto, é única, detalhada, colorida e chamativa. Ilustrações pesadas, grande texto em negrito e coloração de fundo definem o tom.
Texto grande para começar: 
Colagem na cara: 
Formulário Web rodeado por muitos recursos visuais: 
15. Snack Social
Características: Arame, pássaros e terra.
Descrição: O motivo do céu nunca envelhece e os designers podem escolher entre qualquer número de paletas para colorir seu horizonte. O horizonte do Social Snack é um pouco nebuloso, com um pronunciado verde e marrom. As aves sentam-se em fios que estão espalhados verticalmente ao longo da página para separar as seções. O site termina com um telhado. Embora o blog não tenha rolagem suave do jQuery, o divertido cabeçalho ilustrado com personagens fofos merece menção.
A paleta de cores e o motivo do pássaro no topo: 
As molduras das fotos da equipe estão penduradas em um fio de pássaro: 
Personagens fofinhos na seção do blog: 
Slideshow
Um dos usos mais freqüentes e reconhecíveis do jQuery é o slideshow venerável. Sempre que você vê o conteúdo deslizando pela tela após um clique do mouse, e nenhum Flash pode ser encontrado, provavelmente é jQuery. Você encontrará slideshows em sites corporativos, páginas de destino, portfólios de agências, sites de comércio eletrônico, em qualquer lugar. Eles são tão onipresentes. Abaixo estão alguns exemplos de slideshows que ganham vida por causa de ilustrações nítidas.
16. GoSiteWave
Características: Slideshow vertical com navegação horizontal e ícones atraentes.
Descrição: A apresentação de slides de rolagem vertical, combinada com os ícones e imagens, é a verdadeira história aqui. Espera-se que os slideshows rolem horizontalmente, então o oposto aqui é atraente. Os azuis e laranjas brilhantes, os botões arredondados e o fundo escuro com faixas de luz habilmente colocadas contribuem para o efeito. Claro que, se os ícones não fossem tão bem feitos, o site poderia não ter feito o corte.
Gráficos de slides da página inicial: 
Outra apresentação de slides: 
17. Sketchen
Características: Slideshow horizontal de filmes em Flash, com conteúdo pré-carregado, texto grande e ilustrações.
Descrição: Se você gosta de amarelo, você vai adorar este site. Este slideshow apresenta ilustrações recortadas que mantêm o fundo amarelo intacto. Um slideshow adicional na “lightbox” pop-up contém o portfólio. Eu mencionei que as ilustrações eram grandes? Eles ocupam muito espaço, mas são muito bem feitos. A cor e as imagens de fundo são acentuadas pelos elementos navegacionais verde e branco, e o contraste nítido garante que a usabilidade não seja uma preocupação.
Megafone: 
Rodapé branco: 
Maçã: 
Portfólio em “lightbox”: 
18. Formulário cinquenta e cinco
Características: Rolagem vertical suave, conteúdo do blog gerado dinamicamente, apresentação de slides, realce de navegação principal,
Descrição: Não deixe a paleta de cores monocromática e os desenhos de linha simples enganá-lo. Este site da agência tem tudo. Rolagem vertical suave, rodapé fixo que sobrepõe conteúdo, uma apresentação de slides de portfólio, conteúdo de blog incorporado dinamicamente, etc. Com todas essas funções, o que realmente diferencia o site é o número total de ilustrações aleatórias e o fato de que elas tudo muito engraçado. Nesse sentido, uma visita ao site não está completa sem a amostragem do hilário vídeo "Sobre".
Muitas ilustrações na tela inicial
Tipos de letra correspondem ao estilo de ilustração
Apresentação de slides do portfólio
Os títulos de navegação do rodapé destacam conforme você rola
Rolagem Horizontal
Ao contrário da apresentação de slides, que geralmente é confinada a uma seção de um site, a rolagem horizontal (como definida aqui) acontece no nível do navegador, ou pelo menos parece assim. A rolagem horizontal dinâmica não tem tantos ótimos exemplos quanto a rolagem vertical; mas, como você verá, designers que pensam horizontalmente têm grandes imaginações.
19. Corte Serial
Características: Ilustrações grandes para portfólio; rolagem horizontal e vertical.
Descrição: Esta apresentação de slides é realmente projetada para ocupar a área de visualização do navegador. Você não pode rolar para a esquerda ou para a direita, mas isso importa? As ilustrações e o design são tão impressionantes que o desenvolvedor poderia ter entrado em contato direto, de cabeça para baixo ou qualquer outro método não intuitivo de navegação, e as pessoas ainda gastariam o esforço de descobrir o que viria a seguir. O que realmente ajuda é o tamanho do ícone de navegação e que as fotos e imagens do portfólio ocupam toda a tela.
Trens: 
Capa de CD: 
3-D cara com sapatos: 
20. Tyler Finck
Características: Transições horizontais, com animações criadas a partir do fundo.
Descrição: Este é um ótimo exemplo do uso da imagem de plano de fundo para criar um efeito de animação para a rolagem horizontal dinâmica. A paleta de cores é principalmente preto e branco. Os tipos de letra são em negrito e têm fundos espessos em blocos em determinados locais, e o tipo baseado em imagem tem um aspecto esboçado. O pacote completo funciona bem.
Uma home page minimalista: 
Bio: 
O tiro do dinheiro: 
Outra Funcionalidade
Alguns sites que usam o jQuery não são facilmente categorizáveis. Eles podem ter recursos incomuns ou fazer uso sutil de jQuery ou adaptar uma técnica comum de maneira incomum. Pré-carregamento, preenchimento automático de texto, aparecimento e desaparecimento de texto e sobreposição de texto sobre imagens são alguns dos truques encontrados no conjunto final de sites desta coleção.
21. Etiqueta Laranja
Recursos: pré-carregamento de imagens.
Descrição: O pré-carregamento de imagens é a extensão do uso do jQuery pela Orange Label. Conforme você rola para baixo, os itens do portfólio são adicionados à página (com um gráfico giratório informando que eles estão sendo pré-carregados). Do ponto de vista da usabilidade, esse recurso conveniente evita que a página carregue automaticamente conteúdo que consome largura de banda. A ilustração no topo é grande, colorida, altamente detalhada e deliciosa para os olhos.
A ilustração: 
Ilustração ampliada: 
Item e rodapé do portfólio: 
22. Silk Icon Finder
Recursos: conclusão do texto.
Descrição: Digite o nome de um ícone e este site classifica seus ícones com base nos possíveis resultados do que você digitou até o momento. A qualidade dos ícones é muito boa, e o serviço é bastante conveniente em geral. Como o design é realmente sobre resultados de pesquisa, ele tem pouca distração visual, o que é uma grande vantagem.
Visualização padrão: 
Resultados da pesquisa para “light”: 
23. Vyniknite
Recursos: Fade.
Descrição: Este site começa com uma excelente ilustração de dente-de-leão, boa disposição e boa seleção de tipos de letra. A única ação notável do jQuery acontecendo é o desvanecimento e o desaparecimento que ocorrem quando navegamos pelas guias. Outra pequena fatia do céu é a forma como o dente-de-leão se sobrepõe às abas ativas e inativas. E se você olhar de perto para o fundo, você verá alguns elaborados redemoinhos de vento acompanhando a fauna flutuante.
Dandelions abundância: 
24. Agência Halo
Características: Slideshow automático com ilustração de fundo; texto sobre imagens.
Descrição: Fundos, fundos, fundos. Navegue por este site e você encontrará uma variedade de elementos decorativos cheios de ilustrações em 3-D coloridas. Um portfólio impressionante pode ser acessado por meio de uma apresentação de slides do jQuery na página inicial. Como alternativa, você pode encontrar informações sobre cada item na seção de portfólio (ou "trabalho") da sobreposição de texto na miniatura.
Home page com slideshow: 
O portfólio sobrepõe texto a imagens: 
Outro fundo colorido: 
Escrito exclusivamente para WDD por Maurice Wright. Ele é um desenvolvedor web e designer e criador de Moluv.com . Desde 2000, a Moluv tem sido uma fonte de inspiração de design para mentes criativas que procuram os sites mais bonitos da Internet.
Como o jQuery mudou a maneira de projetar seus sites? Por favor, comente abaixo ...