Atalhos do Firefox

Navegando pela ampla rede achei um site onde mostra atalhos do Firefox, confesso que vários deles nunca tinha visto, vale a pena conferir

Segue a lista

Browser Management Shortcuts	Windows	Mac OS X	Linux
Help	F1	n/a	F1
Add Bookmark	Ctrl+D	Cmd+D	Ctrl+D
Bookmarks Sidebar (toggle)	Ctrl+B Ctrl+I	Cmd+B	Ctrl+B
Browsing History (toggle)	Ctrl+H	Cmd+Shift+H	Ctrl+H
Download History	Ctrl+J	Cmd+J	Ctrl+Y
Clear Private Data	Ctrl+Shift+Del	n/a	Ctrl+Shift+Del
Page Manipulation Shortcuts	Windows	Mac OS X	Linux
Full Screen (toggle)	F11	n/a	F11
Increase Text Size	Ctrl++ Ctrl+Scroll down	Cmd++	Ctrl++ Ctrl+Scroll down
Decrease Text Size	Ctrl+- Ctrl+Scroll up	Cmd+-	Ctrl+- Ctrl+Scroll up
Restore Text Size	Ctrl+0	Cmd+0	Ctrl+0
Print	Ctrl+P	Cmd+P	Ctrl+P
Reload Page	F5 Ctrl+R	F5 Cmd+R	F5 Ctrl+R
Force Reload Page (override cache)	Ctrl+F5 Ctrl+Shift+R Shift+Reload button	Cmd+Shift+R Shift+Reload button	Ctrl+F5 Ctrl+Shift+R Shift+Reload button
Stop Loading	Esc	Esc Cmd+.	Esc
Save Page As	Ctrl+S Alt+Left-click	Cmd+S	Ctrl+S
Page Source	Ctrl+U	Cmd+U	Ctrl+U
Page Info	n/a	Cmd+I	Ctrl+I
DOM Inspector	Ctrl+Shift+I	Cmd+Shift+I	Ctrl+Shift+I
Page Navigation Shortcuts	Windows	Mac OS X	Linux
Go Down One Line	Down Alt+Scroll down	Down	Down Alt+Scroll down
Go Up One Line	Up Alt+Scroll up	Up	Up Alt+Scroll up
Go Down One Page	PageDown Spacebar	PageDown Spacebar	PageDown Spacebar
Go Up One Page	PageUp Shift+Spacebar	PageUp Shift+Spacebar	PageUp Shift+Spacebar
Go to Bottom of Page	End	End	End
Go to Top of Page	Home	Home	Home
Move to Next Frame	F6	F6	F6
Move to Previous Frame	Shift+F6	Shift+F6	Shift+F6
Move Focus to Next Actionable Item	Tab	Tab	Tab
Move Focus to Previous Actionable Item	Shift+Tab	Shift+Tab	Shift+Tab
Open Link	Enter	Return	Enter
Open Link in New Tab	Ctrl+Enter	Cmd+Return	Ctrl+Enter
Open in Background Tab	Ctrl+Left-click Middle-click	Cmd+Click	Ctrl+Left-click Middle-click
Open in Foreground Tab	Ctrl+Shift+Left-click Shift+Middle-click	Cmd+Shift+Click	Ctrl+Shift+Left-click Shift+Middle-click
Paste URL in Tab	n/a	n/a	Middle-click on Tab 1
Open Link in New Window	Shift+Enter Shift+Left-click	Shift+Return Shift+Click	Shift+Enter Shift+Left-click
Save Link Target As	Alt+Enter	Option+Return	Alt+Enter
Caret Browsing	F7	F7	F7
Navigational Shortcuts	Windows	Mac OS X	Linux
Home Page	Alt+Home	Option+Home	Alt+Home
Back	Backspace Alt+<- Ctrl+[ Shift+Scroll down	Delete Cmd+[	Backspace Alt+<- Ctrl+[ Shift+Scroll down
Forward	Shift+Backspace Alt+-> Ctrl+] Shift+Scroll up	Cmd+-> Cmd+]	Shift+Backspace Alt+-> Ctrl+] Shift+Scroll up
Open New Tab	Ctrl+T Double-Click on Tab Bar	Cmd+T Double-Click on Tab Bar	Ctrl+T Double-Click on Tab Bar
Close Tab (close Window if only one tab)	Ctrl+W Ctrl+F4 Middle-click on Tab	Cmd+W Cmd+F4	Ctrl+W Ctrl+F4
Next Tab	Ctrl+Tab Ctrl+PageDown	Ctrl+Tab Ctrl+PageDown	Ctrl+Tab Ctrl+PageDown
Previous Tab	Ctrl+Shift+Tab Ctrl+PageUp	Ctrl+Shift+Tab Ctrl+PageUp	Ctrl+Shift+Tab Ctrl+PageUp
Select Tab [1 to 9]	Ctrl+[1 to 9]	Cmd+[1 to 9]	Alt+[1 to 9]
Open New Window	Ctrl+N	Cmd+N	Ctrl+N
Close Window	Ctrl+Shift+W Alt+F4	Cmd+Shift+W Option+F4	Ctrl+Shift+W Alt+F4
Location Shortcuts	Windows	Mac OS X	Linux
Select Location Bar	Ctrl+L Alt+D	Cmd+L	Ctrl+L Alt+D
Complete .com Address 2	Ctrl+Enter	Cmd+Return	Ctrl+Enter
Complete .net Address 2	Shift+Enter	Shift+Return	Shift+Enter
Complete .org Address 2	Ctrl+Shift+Enter	Cmd+Shift+Return	Ctrl+Shift+Enter
Open Address in New Tab 2	Alt+Enter	Option+Return	Alt+Enter
Open File	Ctrl+O	Cmd+O	Ctrl+O
Web Search Shortcuts	Windows	Mac OS X	Linux
Web Search (Keyword)	Ctrl+K	Cmd+K	Ctrl+K Ctrl+J
Select Next Search Engine in Search Bar	Ctrl+Down	Cmd+Down	Ctrl+Down
Select Previous Search Engine in Search Bar	Ctrl+Up	Cmd+Up	Ctrl+Up
Form Shortcuts	Windows	Mac OS X	Linux
Select Next Entry	Down	Down	Down
Select Previous Entry	Up	Up	Up
Toggle Checkbox	Spacebar	Spacebar	Spacebar
Auto Complete Shortcuts	Windows	Mac OS X	Linux
Select Next Auto-Complete Entry	Down	Down	Down
Select Previous Auto-Complete Entry	Up	Up	Up
Delete Individual Auto-Complete Entry	Shift+Del	Shift+Del	Shift+Del
Text Manipulation Shortcuts	Windows	Mac OS X	Linux
Select All	Ctrl+A	Cmd+A	Ctrl+A Alt+A
Cut	Ctrl+X	Cmd+X	Ctrl+X
Copy	Ctrl+C	Cmd+C	Ctrl+C
Paste	Ctrl+V	Cmd+V	Ctrl+V
Delete	Del	Del	Del
Undo	Ctrl+Z	Cmd+Z	Ctrl+Z
Redo	Ctrl+Shift+Z Ctrl+Y	Cmd+Shift+Z	Ctrl+Shift+Z Ctrl+Y
Page Search Shortcuts	Windows	Mac OS X	Linux
Find in This Page	Ctrl+F	Cmd+F	Ctrl+F
Find Again	Ctrl+G F3	Cmd+G F3	Ctrl+G F3
Find Previous	Ctrl+Shift+G Shift+F3	Cmd+Shift+G Shift+F3	Ctrl+Shift+G Shift+F3
Quick Find Text	/	/	/
Quick Find Link	‘	‘	‘

Fonte: http://www.7is7.com/

Menus com listas, construindo de forma simples e semântica

Falar em código semântico, tableless, css e como tudo isso se envolve com a W3C pode ser para alguns um grande quebra-cabeça. Na verdade é, mas com um pouco de vontade, teoria e paciência, esses itens podem se transformar numa verdadeira filosofia de trabalho e depois de um aprendizado bem realizado, tornar a produtividade do dia-a-dia um verdadeiro desafio estimulante.

Resumidamente, compreender a utilização correta dos elementos é um passo extremamente saudável para relembrarmos como tudo foi concebido originalmente para ser utilizado e tornar o trabalho simples e mais claro para todos.

O assunto pode ser um verdadeiro martírio para desenvolvedores, que por muitas vezes se auto absolvem da adequação aos padrões web, construindo aplicações e sites que poderiam ser mais leves, mais responsivos, fáceis de usar, e por conseqüência, mais fáceis de atualizar.

Um exemplo muito utilizado atualmente para mostrar como é possível construir mais simples são os menus para sites, sejam horizontais ou verticais, existe uma maneira muito limpa, verdadeiramente semântica e intuitiva para mecanismos de buscas como o Google.

Uma recomendação que faço para a construção de sites e aplicações é começar pela informação e não layout, pois iniciando seu projeto pela estrutura da informação, a possibilidade do projeto perder o foco é muito menor,além disso, como sabemos, hoje o conceito tableless permite a aplicação de layouts como uma camada sobre o seu código.

Falarei aqui sobre a criação de menus utilizando listas, e listas obviamente tem uma série de utilidades que devem ser tratadas de forma específica caso a caso, o que significa que se usada corretamente, torna seu código naturalmente semântico.

Compreendendo Listas

Para compreender listas é importante saber que existem várias opções de utilização para elas, como vemos abaixo:

1.Listas ordenadas

 

<ol>

 <li>Ricardo</li>

 <li>Felipe</li>

 <li>Manoela</li>

</ol>

O resultado para a lista acima é:

1. Ricardo

2. Felipe3. Manoela

Note que pelo fato de termos utilizado as tags corretas, os itens foram automaticamente ordenados e numerados (esse comportamento é padrão, podendo ser personalizado por CSS).

2. Listas não ordenadas

 

<ul>

 <li>Ricardo</li>

 <li>Felipe</li>

 <li>Manoela</li>

</ul>

O resultado agora é:

o Ricardo

o Felipeo Manoela

Note que esse modelo não numera automaticamente os itens, mas por padrão os marca como itens de uma lista (também é comportamento padrão que pode ser alterado por css).

3. Listas de descrição

 

<dl>

 <dt>Livro</dt>

 <dd>Descrição do livro</dd>

</dl>

O resultado:

Livro

Descrição do livro

Utilizando listas para construir menus

Até aqui você já tomou conhecimento de como as listas funcionam dentro do código html, então não vai ter problemas para entender o código abaixo, pois na verdade o segredo estará no css que aplicaremos a lista.

O modelo vertical de menu:

 

<ul class="menu_vertical">

 <li><a href="#">Home</a></li>

 <li><a href="#">História</a></li>

 <li><a href="#">Filosofia</a></li>

 <li><a href="#">Produtos</a></li>

 <li><a href="#">Contato</a></li>

</ul>

Note que definimos em ul utilizará a classe menu_vertical, vamos ao código CSS que faz tudo acontecer como desejamos:

 

<style type="text/css">

ul.menu_vertical {

 margin: 0;

 padding: 0;

 list-style: none;

}

ul.menu_vertical li a{

 display: block;

 padding: 10px;

 color: #333;

 background: #eee;

 border-bottom: 1px solid #fff;

 text-decoration: none;

}

ul.menu_vertical li a:hover {

 background: #ccc;

}

</style>

Note que o código CSS é bem simples, mas tem parâmetros chaves importantíssimos que são em “ul” a redução de margin e padding para 0 (zero), pois essa tag tem por padrão valores positivos setados nela; o display: block na tag “a” permite que a área de clique seja maximizada para toda a área disponível dentro da tag li a qual ela está contida.

O resultado visual deste menu é o seguinte:

É importante lembrar que o menu terá automaticamente a largura máxima do seu objeto pai, porém é possível limitar sua largura a um valor específico setando o parâmetro width no CSS da tag ul.

O modelo horizontal de menu:

Este modelo utiliza praticamente o mesmo código, com pequenas modificações, veja:

 

<ul class="menu_horizontal">

 <li><a href="#">Home</a></li>

 <li><a href="#">História</a></li>

 <li><a href="#">Filosofia</a></li>

 <li><a href="#">Produtos</a></li>

 <li><a href="#">Contato</a></li>

</ul>

Só mudei o nome da classe, note que o html continua exatamente o mesmo. Vamos ao CSS:

 

ul.menu_horizontal {

 margin: 0;

 padding: 0;

 list-style: none;

}

ul.menu_horizontal li {display: inline;}

ul.menu_horizontal li a{

 float: left;

 display: block;

 padding: 10px;

 color: #333;

 background: #eee;

 text-decoration: none;

}

ul.menu_horizontal li a:hover {

 background: #ccc;

}

O resultado final:

Observe que é ai que entra o conceito moderno de personalização de layouts através de tableless, pois o html não foi alterado, apenas sua classe, e o código CSS foi o responsável pela mudança da aparência, deixando claro um conceito de camadas, cada uma com sua respectiva função.

As alterações no CSS que permitiram ao mesmo menu ter a aparência horizontal foi que na tag “li” aplicamos display: inline, pois assim ele deixa de ser nativamente um elemento de bloco e passa a ser um elemento de linha, não criando mais quebras de linha antes e depois dele mesmo (padrão a todo elemento de bloco), em seguida determinamos para “a” float: left, o que significa que as tags “a” estarão posicionados lado a lado, a partir da esquerda para a direita.

Os trechos CSS apresentados acima podem ser personalizados eternamente a gosto e necessidade da sua aplicação. Não se esqueça que o CSS dá a você o controle sobre a aparência da sua página ou aplicação.

O importante no conceito tableless é escrever simples, sem complicação, sem redundância e sempre, mas sempre que possível procure rever seu código a busca de limpeza e redução de conteúdo desnecessário.

Para saber mais as incríveis variações de CSS que se pode fazer com listas, você não pode deixar de visitar este site: Listamatic (http://css.maxdesign.com.au/listamatic/).

Seja simples, faça um trabalho limpo e torne-se mais produtivo, antes que seus concorrentes o façam.

Até a próxima!

 

Autor: Roberto Rabadan (e-mail) é Analista de Usabilidade da LocaWeb focado no design de interfaces web. Tem como principal objetivo profissional aprimorar as competências entre design e usabilidade de interfaces, buscando tornar a experiência e prazer de navegação a mais perfeita possível para o usuário final. Graduado em Propaganda e Design, tem mais de 16 anos de experiência com soluções para internet.

Fonte: http://www.imasters.com.br/

Picnik: Nunca foi tão fácil editar suas fotos online

Há algum tempo atrás, falei de um editor de fotos online, o Phixr.com. Na ocasião, tinha gostado do serviço em questão, porém foi aquele gostar meio sem opção, o gostar por não ter surgido nada melhor. Eis que recentemente descobri um que alia tudo aquilo que gosto.

Um bom serviço pra mim, seja ele online ou offline, é aquele que consegue agregar um bom visual, uma grande funcionalidade e uma grande acessibilidade, tornando o uso simple, eficiente e prazeroso. O picnik consegue reunir tudo isso!

Você gosta de uma interface usando muito flash e ajax? Se gostar e tiver a necessidade esporádica de utilizar um editor de fotos quando está fora de casa, creio que você acaba de encontrar uma solução.

Escolhendo/Enviando a foto

Logo de cara, você poderá escolher se deseja trabalhar em uma foto do seu computador, ou de um website (sendo especialmente fácil caso estas sejam do Flickr ou Yahoo! Photos), webcam, ou testar o produto com uma das fotos disponíveis. Ao terminar de enviar a sua foto, ele te transfere para a aba de edição, onde a “diversão” começará.

Editando a sua foto

Caso você queira aproxima a visão, é bem simples, basta utilizar o interessante zoom. Depois de se ajustar, conheça as opções de edição disponíveis no serviço:

• Auto-fix: Correção automática de alguns atributos
• Rotate: Girar
• Crop: Recortar determinado local
• Resize: Redimensionar
• Exposure: Controlar a iluminação
• Colours: Controlar a coloração
• Sharpen: Controlar a nitidez
• Red-Eye: Remover os já não tão comuns, olhos vermelhos

Ao clicar em qualquer uma destas opções, o super-organizado menu automaticamente irá dar lugar ao local onde você poderá especificar os detalhes da função. Complicado? Uma imagem te explicará tudo. Veja na imagem abaixo o que acontece quando eu clico na opção rotate, compare com a imagem lá de cima.

Entendeu?

A partir daí, tudo é muito auto-explicativo, feito para o agrado do usuário leigo até o avançado que está longe de seu Photoshop. Uma outra ferramenta muito interessante, é o Cropping, feito de maneira rápida e muito interessante. Ao clicar nesta função, ele cria uma grade na imagem, para que você possa rapidamente selecionar aonde quer cortar.

Efeitos Criativos

Além da aba de edição, você pode adicionar os “Efeitos Criativos”, apesar que esse quesito ainda não está totalmente desenvolvido, ficando restrito a alguns “Efeitos Especiais”:
Black & White: Transformar a foto para Preto & Branco

Sepia: Converter a foto para tons Sepia (vide figura ao lado)

Boost: Aumentar a intensidade das cores

Matte: Destacar a foto com um efeito claro ao redor do objeto central

Vignette: Destacar a foto com um efeito escuro ao redor do objeto central

Soften: “Borrar” a foto

Salvando a sua foto

Se você tiver terminado de editar a sua foto, vá para a aba Save & Share, lá poderá enviar por email, salvar no computador, criar um slideshow no flickr, salvar no flickr, ou até mesmo mandar imprimir (não disponível na versão beta).

Conclusão

Levando em conta a sua situação (longe de casa, sem estar no seu pc com seu programa de edição predileto), o picnik com certeza será extremamente útil e conseguirá cumprir com louvor a sua proposta. Confesso que um ponto crucial que me agradou foi o visual (foi o que fez eu testar o produto), mas logo descobri que além disso, ele realmente é bem eficiente. Melhor do que ler como ele funciona, é ir lá e testar! Cliquem aqui.

Fonte: http://www.diogoazevedo.com/

Autor: Diogo Azevedo

Que fonte será esta?

Volta e meia me deparo com um logo onde preciso recria-lo mas não tenho nem idéia da fonte que foi utilizada, bom eis aqui a solução(ou pelo menos uma ajuda), o site www.myfonts.com oferece uma ferramenta que pode te ajudar nesta tarefa, você coloca a imagem e ele te sugere algumas contes parecidas com a da sua imagem.

Segue um exemplo da utilização
1 – Localizando imagem a qual deseja encontrar o nome da fonte.

2 – O sistema “scaneia” a imagem e te pergunta quais letras deseja procurar.

3 – Por fim, te mostra as fontes mas parecidas que ele encontrou.

Saridon

Ebay

Fonte: http://adhunt.blogspot.com/

Knorr

Fonte: http://adhunt.blogspot.com/

iPod Hi-Fi

Fonte : AdRants.

Milenio

Um mundo tão complexo que as vezes precisa de uma boa explicação.



Fonte: http://adhunt.blogspot.com/

Pilot Extrafine Pen

Caneta Pilot Extrafina
GREY & TRACE Barcelona.

Fonte: http://adhunt.blogspot.com/

HP

Simples campanha de guerrilha da HP’s Photosmart 955C Printer
Publicis Graffiti Argentina.

Fonte: http://adhunt.blogspot.com/2007/02/hp-photosmart-printer.html

Artigos de papelaria da Penline

Penline Stationery: Strong tape. Agency: Euro RSCG, Kuala Lumpur, Malaysia, Creative Director: Case Deenadayalan, Art Director: Choo Chee Wee, Copywriter: Joel Lim.

Fonte: http://adhunt.blogspot.com/

Permanente

Agência: TBWA, Chile.

Fonte: http://thiagomiranda.wordpress.com

É Guerra!

Isso é o que eu chamo de bater de frente.
Agência: Jung Von Matt de Hamburgo

Fonte: http://thiagomiranda.wordpress.com/

Como desenhar no estilo Web 2.0 – 1ª parte

Existe um estilo predominante hoje na internet e eu vou destrinchá-lo para os designers brasileiros começarem a se acostumar com esse novo jeito de desenhar sites.

1. Simplicidade

Web-design está mais simples que nunca, e isso é uma coisa boa.
Design 2.0 significa foco, clareza e simplicidade.

E isso não significa ser minimalista, como eu vou explicar depois.

Eu realmente acredito na simplicidade. Isso não é dizer que todos os sites devem ser mínimos, mas que deve-se usar quantos recursos forem necessários para alcançar o que você precisa alcançar.

Como diz o ditado : Me dê duas soluções para um problema, a mais simples é a melhor.

O resultado é que você tem que olhar o conteúdo. Você acaba interagindo exatamente com os elementos que o designer planejou. E você não se importa – Isso é fácil, e você tem exatamente o que você precisava.

Por que simplicidade é bom.

• Sites têm metas e toda página tem um propósito.
• A atenção do usuário é um recurso esgotável.
• É o trabalho do designer ajudar os usuários a achar o que eles querem (ou avisar o que o sitem quer aviar paraeles).
• Coisas na tela atrem os olhos. Quanto mais coisas na tela existir, quanto mais coisas diferentesexistirem para noticiar, é menos acessível para o usuário alcançar as coisas importantes.
• Nós temos que estabelecer uma comunicação, e quanto menos barulho, melhor. Isso é economia, ou simplicidade.

Quando e como fazer o designer simples ?

Quando?

Sempre !

Como?

Existem duas coisas importantes para alcançar sucesso com simplicidade:

1. Remova componentes desnecessários, sem sacrificar a efetividade.
2. Tente soluções alternativas para alcançar o mesmo resultado mais simplesmente.

Sempre que você estiver fazendo layouts, remover elementos visuais desnecessários deve ser encarado como uma disciplina.

Concentre-se particularmente nas áreas do layout que são menos relevantes para o propósito da página, por que a atividade visual nessas áreas irão tirar a atenção do conteúdo e da navegação.

Use detalhes visuais – Linhazinhas, palavras, formas, cores – para comunicar uma informação importante, não para decorar

E lembre-se de perguntar-se sempre :

Tem como eu fazer isso de forma mais simples ?.

Se a resposta for sim, simplesmente, FAÇA !

2. Layouts Centralizados

Basicamente, uma grande maioria dos sites atuais são posicionados cetralizados na janela do navegador. Relativamente poucos são full-screen (layout flúido) ou alinhado pela esquerda / tamanho fixo, comparando com alguns anos atrás.

Por que Layout centralizado é bom.

Esse estilo “2.0″ é simples, impactante e honesto. Sites que aparecem centralizados na sua frente ficam mais simples e honestos.

Também, porque nós estamos sendo mais econômicos com nossos pixels (e conteúdos), nós não estamos mais pressionados a apertar o máximo de informações possíveis acima da linha do mar.

Nós estamos usando menos para falar mais, então nós podemos ser um pouco mais livres com os espaços usados, e diagramar nosso conteúdo com muitos dos amáveis espaços em branco.

Quando e como usar o layout centralizado?

Como eu disse, posicione seu site centralizado ao menos que tenha uma ótima razão para não fazê-lo.

Você talvez esteja querendo ser mais criativo como o espaço, ou querendo aglomerar o máximo de informação possível na tela.

3. Poucas Colunas

A alguns anos atrás, sites com 3 colunas era o normal e sites com 4 colunas não eram incomuns.
Hoje, site com 2 colunas são bem comuns, e 3 colunas já está como máximo.

Por que poucas colunas é bom.

Menos é mais. Poucas colunas parecem mais simples, impactantes e mais honesto. Nós estamos mostrando menos informaçãos mais claramente.

o site da apple é um lider na elegância da simplicidade.

Esse tipo de layout funciona muito, mas muito bem. Cada vez que eu experimento o design simples da Apple, eu fico mais convencido que o design Zen é o Graal sagrado.

Como escolher o número de colunas.

Eu definitivamente recomendo que não use mais que 3 colunas, simplesmente por que você não deve usar mais do que precisa.

4. Topo diferenciado

Isso significa fazer o topo da tela (a marca principal e a área de navegação) diferentes do resto (o conteúdo principal)

Claro, isso não tem nada de novo, mas é uma boa idéia e tem sido usada sempre. Mas tem sido usada mais que sempre agora, e a divisão está cada vez mais forte.

Por que o topo diferenciado é bom.

O topo do site diz “Aqui é o topo do site”. Parece óbvio, mas é bom saber onde a página começa.

Isso também inicia a experiência do site com uma força. Isso é muito “2.0″. Nós gostamos de força, impacto.

Quando e como usar o topo diferenciado?

Em qualquer site, a marca e a navegação devem ser óbvias, impactantes e claras.

Então, é uma boa idéia criar um espaço no topo do site para posicionar a logo e a navegação.

Sempre coloque o logo em cima no topo. Eu sempre recomento também, colocar a navegação logo após o logo.

O topo deve ser visualmente diferente do resto do conteúdo. O jeito mais forte de fazer isso é usar um impactante e sólido bloco de uma cor diferente, mas existem alternativas.

5. Navegação simplificada.

Navegação permanente – a navegação global do seu site tem que aparecer em todas as páginas como um parte permanente do layout – tem que ser claramente identificado como navegação, e tem que ser fácil de interpretar.

• Design 2.0 faz a Navegação global grande, impactante, limpa e óbvia.
• Hyperlinks inline (links dentro de textos) são claramente diferenciados do texto normal

Por que navegação simplificada é bom.

O usuário precisa ser capaz de identificar a navegação, que vai dizer-lhe várias informações

• Onde ele está (em um esquema de coisas)
• Onde mais ele pode ir a partir daqui
• E quais opções ele tem para fazer as coisas

Seguindo o princípio da simplicidade, e a diminuição geral do “barulho”, o melhor jeito de deixar claro a navegação é :

• Posicionar os links permanentemente longe do conteúdo
• Diferenciando a navegação usando cores, tons e formas
• Fazer a navegação grande e impactante
• Deixar claro o texto de cada link, sem ambiguidades

Como manter uma navegação simplificada?

Lembre-se sempre de uma coisa: Navegação tem que estar claramente diferenciada da não-navegação.

6. Logos impactantes.

Uma marca limpa, forte e impactante – incorporando atitude, tom de voz e primeira impressão – é ajudada por um logo impactante.

Por que?

Fortes, logos impactantes dizem “Aqui estamos nós” de um modo que nós podemos acreditar.

Quando e como ?

É muito difícil de dizer como criar um bom logo, mas em resumo…

Seu logo deve :

• Funcionar em todos os contextos – incluindo panfletos e camisas
• Ser reconhecível e diferente
• Representar a personalidade e as qualidades da sua marca na primeira vez que ela é vista

Na segunda parte vou falar sobre tamanhos de textos, introdução dos sites, cores, superfícies, entre outras coisas.

 

Autor: Julio

Fonte: http://julioweb.wordpress.com/