Design de Interface Humano-Computador

noreply@blogger.com (Luciano Skorianez) — Wed, 21 Mar 2012 12:49:00 +0000

PESSOAL, O BLOG MUDOU PARA
http://luk.net.br/blog

FlexSlider - Jquery slider para usar

noreply@blogger.com (Luciano Skorianez) — Fri, 03 Feb 2012 11:42:00 +0000

Para quem gosta de Jquery, esse FlexSlider é uma excelente opção para fazer headers interativos no seu site.

http://flex.madebymufffin.com/

60 pacotes de ícones em vetor gratuitos

noreply@blogger.com (Luciano Skorianez) — Mon, 30 Jan 2012 13:37:00 +0000

http://vector.tutsplus.com/articles/web-roundups/60-free-vector-icon-packs-for-design-professionals/

Anime com CSS

noreply@blogger.com (Luciano Skorianez) — Wed, 25 Jan 2012 13:47:00 +0000

Use CSS para animar caixas de texto.

http://daneden.me/animate/

Mapas em vetor - Vector Maps

noreply@blogger.com (Luciano Skorianez) — Mon, 23 Jan 2012 12:09:00 +0000

http://blog.spoongraphics.co.uk/freebies/free-vector-maps-and-country-outlines

As fontes mais comuns nos sistemas

noreply@blogger.com (Luciano Skorianez) — Tue, 17 Jan 2012 21:35:00 +0000

Muitas vezes a gente não sabe quais são as fontes padrões dos sistemas operacionais. Bem nesse link tem uma lista atualizada.

http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

JQuery Tools

noreply@blogger.com (Luciano Skorianez) — Mon, 28 Nov 2011 10:06:00 +0000

O Jquery Tools é uma coleção dos mais maneiros componentes de interface para sites. Com ele você tem exemplos práticos com download para incrementar ainda mais o seu site.

http://flowplayer.org/tools/index.html

Mais 3 sites de imagens vetor para download

noreply@blogger.com (Luciano Skorianez) — Thu, 24 Nov 2011 23:17:00 +0000

http://www.vectorjunky.com/

http://www.freevectordownload.com/

http://vector4free.com/

21 Temas incríveis de Wordpress

noreply@blogger.com (Luciano Skorianez) — Wed, 23 Nov 2011 10:42:00 +0000

http://www.hongkiat.com/blog/21-free-premium-WordPress-themes-to-impress/

Usabilidade x Vontade = Satisfação

noreply@blogger.com (Luciano Skorianez) — Tue, 22 Nov 2011 10:10:00 +0000

Pra mim, usabilidade é tornar óbvio o óbvio. É facilitar o que já é fácil. Afinal, você quer que eu use? Então facilite!!!

Seres humanos são preguiçosos... Eu sou preguiçoso e a minha preguiça é inversamente proporcional à necessidade do item que eu estou buscando. Vou dar 2 exemplos:

Exemplo 1 - Hoje estou querendo comer chocolate. Porra!! Adoro chocolate!!! Não tem em casa, putz, sem problemas, desço minha ladeira, vou até a loja de doces, procuro vários. Droga, não encontro o que eu quero. Tudo bem, mesmo assim, pego um genérico e como. Até aí, beleza. Usabilidade 2... Vontade 10. Satisfação 20%... Perdi um tempão, tive que subir a minha ladeira de novo, enfim. Podia ter sido melhor.

Exemplo 2 - Hoje estou saudável, vou comer uma fruta! Fruta é bom e faz bem. Então, olho em casa, não tem também, vou descer a minha ladei... ahh deixa pra lá, vou ver TV. Como fruta outro dia. Usabilidade 0... Vontade 7. Satisfação 0% ... ahh, vou mudar um pouco esse exemplo:

Exemplo 2.1 - Hoje estou saudável, vou comer uma fruta! Fruta é bom e faz bem. Então, olho em casa, vou até a geladeira e encontro uma salada de fruta prontinha, demorô!! Usabilidade 10... Vontade 7. Satisfação 70%

Exemplos toscos, mas totalmente verdadeiros! Veja que mesmo gostando mais de chocolate do que fruta, minha satisfação no exemplo 2.1 chegou a 70% . Quando eu peguei o chocolate, só chegou a 20% (mesmo porque, quando eu cheguei em casa, já queria outro chocolate, mas não tive saco de descer de novo. Então, deixei para comprar perto do trabalho, no dia seguinte). Agora, vamos voltar ao mundo virtual usando essa metáfora. Um usuário só perderá tempo no seu site se ele quiser muito o seu produto, ainda mais que, com essa concorrênca mercadológica cada vez mais acirrada, a paciência dele é cada vez menor. Além disso, repare que a internet deixa as pessoas mais preguiçosas que elas já são por natureza. Pagam pela facilidade de receber o produto sem sair de casa. E isso é uma tendência. Onde todo o processo burocrático e intelectual seja um processo virtual... mas isso é outro papo que eu escrevo depois ( já falei, sou preguiçoso).
Estudando o perfil do seu cliente tendo como foco esse processo, podemos dizer que o seu cliente e/ou prospect só é 100% satisfeito se ele quiser muito um produto e ainda achá-lo facilmente( leia "rápido e fácil"). Tendo isso, fique tranquilo que ele voltará na sua loja virtual várias vezes.

LightBox - A galeria de imagens mais famosa em Jquery

noreply@blogger.com (Luciano Skorianez) — Tue, 22 Nov 2011 10:05:00 +0000

O LightBox é um famoso plugin feito em Jquery para galeria de imagens e portfolio.

http://leandrovieira.com/projects/jquery/lightbox/

Compare Ninja - Gerador de tabelas em HTML e CSS

noreply@blogger.com (Luciano Skorianez) — Fri, 18 Nov 2011 11:54:00 +0000

Agora você pode criar tabelas comparativas usando esse excelente gerador web. As tabelas ficam com um código bonito, leve e extremamente funcional

http://www.compareninja.com/index.php

Jquery Mobile - Framework

noreply@blogger.com (Luciano Skorianez) — Thu, 17 Nov 2011 16:51:00 +0000

Para quem curte Jquery, o Jquery Mobile é um framework específico para Smartphones e Tablets. Ele é totalmente otimizado para os sistemas baseados em "touch".

http://jquerymobile.com/

Inspire-se - SF Dok

noreply@blogger.com (Luciano Skorianez) — Wed, 16 Nov 2011 00:46:00 +0000

http://360langstrasse.sf.tv/page/

150 plugins em Jquery para você usar

noreply@blogger.com (Luciano Skorianez) — Wed, 16 Nov 2011 00:24:00 +0000

Um ótimo post para você achar diversos efeitos em Jquery. Aproveite!

http://www.webdesignshock.com/best-jquery-effects/

ArcadiaCharts - Gráficos em javascript

noreply@blogger.com (Luciano Skorianez) — Fri, 11 Nov 2011 19:50:00 +0000

O ArcadiaCharts é uma biblioteca baseada em Javascript e GWT (Google Web Toolkit) para construção de gráficos de alta qualidade na web.

http://www.arcadiacharts.com/

Linha do Tempo em Jquery

noreply@blogger.com (Luciano Skorianez) — Wed, 09 Nov 2011 20:55:00 +0000

Uma linha do tempo feita em Jquery que pode ser usada tanto na vertical quanto na horizontal. Faça o donload do código no prório site e experimente.

http://www.csslab.cl/2011/08/18/jquery-timelinr/

Aproveite e veja os efeitos em CSS3 no mesmo blog, no link: http://www.csslab.cl/2011/06/21/animaciones-css3-avanzadas/

Os melhores Brushes para o Photoshop!

noreply@blogger.com (Luciano Skorianez) — Tue, 08 Nov 2011 23:20:00 +0000

Quem trabalha com design sabe que em uma criação, o formato do pincel é fundamental para fazer imagens e ilustrações inovadoras. Aqui tem 2 links ótimos para donwload de brushes para você utilizar no seu Photoshop.

http://www.brushking.eu/

http://www.noupe.com/how-tos/80-all-you-need-photoshop-brushes.html

Simplesmente Modal. Esqueça o open.window

noreply@blogger.com (Luciano Skorianez) — Sat, 05 Nov 2011 01:53:00 +0000

O SimpleModal da Plasma é um plugin em javascript para fazer uma "nova janela" dentro da página de maneira muito mais estilosa e maneira. Nunca mais o seu site terá problemas com os bloqueadores de pop-up.

http://simplemodal.plasm.it/

obs. Como o upload de imagem desta josta não funcionou, só subi o link por enquanto.

Jcrop - Como cortar uma imagem usando o Jquery

noreply@blogger.com (Luciano Skorianez) — Fri, 04 Nov 2011 16:21:00 +0000

O Jcrop é um código feito em Jquery para você conseguir cortar imagens de maneira fácil e rapida. Esse efeito é muito usado quando você coloca sua imagem em redes sociais como o Facebook e o Google+

	http://deepliquid.com/projects/Jcrop/demos.php

Kendo UI - Um framework moderno em HTML5

noreply@blogger.com (Luciano Skorianez) — Wed, 02 Nov 2011 13:22:00 +0000

Mais um link muito bom enviado pelo meu irmão. O Kendo UI é um framework de última geração, baseado nas mais novas tecnologias web existentes. Usa HTML5, CSS3 e, lógico, Javascript com base no desenvolvimento Jquery na veia! Tudo num pacote só. Faça o download e teste que você vai achar foda! Eu achei!

http://www.kendoui.com/

Bootstrap - O toolkit do Twitter para designers

noreply@blogger.com (Luciano Skorianez) — Wed, 02 Nov 2011 13:07:00 +0000

Para quem curtiu o post sobre o Bootstrap ( não lembra? Acessa aqui ), meu irmão passou links para incrementar ainda mais esse "kit":

Extras do Bootstrap com icones nos "buttons"

http://lightglitch.github.com/bootstrap-xtra/#

Exemplos de "Modal" em scripts
http://nikku.github.com/jquery-bootstrap-scripting/

Jquery-Ui theme para Bootstrap

http://taitems.tumblr.com/post/482577430/introducing-aristo-a-jquery-ui-theme

http://taitems.github.com/Aristo-jQuery-UI-Theme/

3D Free - Modelos 3D para download

noreply@blogger.com (Luciano Skorianez) — Mon, 31 Oct 2011 10:01:00 +0000

http://archive3d.net/

http://www.3dmodelfree.com/

http://thefree3dmodels.com/

Wordpress - Temas para download - Themes Free!!

noreply@blogger.com (Luciano Skorianez) — Sat, 29 Oct 2011 23:19:00 +0000

Blog interessante para você baixar diversos temas para o wordpress

http://themecrunch.blogspot.com/

Outro blog com exemplos mais profissas!

http://wpclassic.com/

Esse blog é muito bom, com os melhores layouts que eu já vi para wordpress

http://www.simplewpthemes.com/

21 templates para download!

http://www.hongkiat.com/blog/21-free-premium-WordPress-themes-to-impress/

Histórico do Webdesigner: Dispositivos e suas resoluções

noreply@blogger.com (Luciano Skorianez) — Fri, 28 Oct 2011 15:38:00 +0000

Desenha, desenha, desenha e o cliente manda aumentar a logo...

Eu, que sou das antigas, comecei em 97 com web, pude observar a evolução da resolução nos dispositivos existentes. Antes era moleza, você queria fazer um layout para sites e definia 640x480 pixels, sempre que possível, puxando para 800x600 pixels. Tira as áreas da barra de navegação do menu do Internet Explorer e alguns pixels da barra de rolagem e pronto! Eu tinha as medidas exatas para começar o meu projeto de interface.

O tempo foi passando, o monitor ganha medidas maiores e, consequentemente, a resolução vai aumentando também. Foi para 1024x768 e os mais nerds já tiravam onda usando 1280x1024 com aqueles ícones microscópicos nas telas de 17 polegadas. Só que, como pobre não aguenta ficar só na melhora da resolução, resolveram complicar(pra mim, claro!). Descobriram que a nossa visão, mais periférica, encaixa melhor em padrões de tela 16:9, as chamadas widescreen, do que 4:3 que são aqueles padrões de televisão que a gente tinha. A resolução? Ahhh! Agora você tem várias opções e define facilmente nos monitores: 1152x864, 1280x720, 960x600, 1280x800, etc. Nem vou entrar no mérito dos browsers, mas quem quiser ter uma ideia pode ver o post "Evolução da internet" que tem os browsers lá.

Eu que me amarrava em fazer sites mais fixos, comecei a fazer uns expansíveis, meus sites em flash já tem que se adaptar também e passo a brigar alucinadamente com css. Hoje em dia o que não faltam são recursos para o webdesigner produzir o seu site mas não é fácil. Aqui tem uma pequena lista de tamanhos de resoluções para diferentes dispositivos. Lembrando que a a altura vai depender do tamanho do conteúdo, a largura pelo menos dá para ter uma noção se a gente se ligar nesses padrões:

320 px - Celular (Mobile) com tela na vertical
480 px - Celular (Mobile)com tela na horizontal
600 px - Pequeno Tablet
768 px - Tablet com tela na vertical
1024 px - Netbook ou Tablet com tela na horizontal
1280 px - Qualquer laptop ou desktop com monitores a partir de 17 polegadas
1920 px - Televisões full hd ( Ou você acha que o seu site não vai ser visto nessas telas?? bobinho você)