Usabilidoido: Menu Principal

English Website


Comece pelo epicentro do layout

Perfil no LinkedIn
Perfil no Youtube
Perfil no Twitter
Perfil no Instagram
Perfil no Spotify
Comece pelo epicentro do layout

Jason Fried propoz uma nova forma de começar um layout: primeiro o epicentro. Ao invés de começar pela logomarca, pelo cabeçalho ou pelo menu, o designer deve começar pelo ponto crítico do layout, a parte que se fosse retirada mudaria o propósito da página. Ou seja, se você vai projetar um site institucional cuja maior função é dar acesso a uma extranet com login e senha, comece por essa caixa. O resto irradia.

Nunca tinha parado pra pensar nisso, mas é realmente uma boa idéia. No Usabilidoido acertei, comecei pela coluna da esquerda definindo fundo, tipografia cores antes de fazer as demais. Mas na maioria dos projetos, acabo começando pela bendita logomarca, na ânsia de manter a identidade visual. Melhor começar pelo contéudo central, no caso de sites institucionais.

Porém, acredito que essa abordagem só vai funcionar direito se for feito um wireframe da página antes do design gráfico. Para descobrir o que vai ser mais importante numa página, é preciso analisar cada uma das partes e valorá-las. No wireframe, o pessoal costuma usar ou números ou gradações de cinza para indicar importância de cada bloco.


Autor

Frederick van Amstel - Quem? / Contato - 08/07/2004

Redes

Siga-me no Twitter, Facebook, LinkedIn ou Instagram.

Citação

VAN AMSTEL, Frederick M.C. Comece pelo epicentro do layout. Blog Usabilidoido, 2004. Acessado em . Disponível em: http://www.usabilidoido.com.br/comece_pelo_epicentro_do_layout.html

Relacionados



Comentários

Discussão
Guilherme
09/07/04 às 13:11

Acho que pra determinar elementos e importância deve funcionar. Mas é exatamente isso que o wireframe faz. A gente não se preocupa com a logo e sim com posicionamento e dimensões.

Pro desenho realmente buscamos a logo como referência porquê é ela que indica vários "parâmetros visuais".


Discussão
Fabiano Cruz
09/07/04 às 14:03

Concordo com vocês Fred e Guilherme. Após elencar as principais "funções" de cada ambiente on-line, o wireframe norteia a produção de acordo com suas respectivas peculiaridades.

O óbvio todos fazem, mas o grande "pulo do gato" é exatamente potencializar uma boa diagramação, proveniente de um wireframe, com design criado especialmente para o propósito.

Abraços!


Discussão
Marcelo Linhares
10/07/04 às 20:30

Não podemos - já que esse blog é relacionado a usabilidade - esquecer das "Guidelines" que são elaboradas antes de qualquer protótipo funcional ou não, com intuito de estabeler uma padronização visual, de tarefas e semântica de todas as páginas do website.

Com isso satisfazemos uma heurística importante do "SOBERBO" Nielsen
"Consistência".

Em falar nisso Fred, quando você irá escrever algo relacionado as Guidelines?


Discussão
Fred
11/07/04 às 02:18

Não entendi o que você quis dizer com esssas guidelines, Marcelo. Você se refere aos requerimentos da interface? Ao escopo?

Guidelines pra mim são aquelas listas de recomendações genéricas que os gurus publicam para ter como parâmetro na tomada de decisões. É possível cada equipe elaborar suas próprias guidelines, mas me parece contra-producente. Gasta-se tempo demais para se chegar à guidelines genéricas.

Aliás, esse é um assunto espinhoso. Por isso ainda não escrevi nada. Pra começar terei que traduzir a palavra e arranjar algum eufemismo para que não pareça impositivo. A maioria dos designers não entende o seu espírito e acabam por tomá-las como os 10 Mandamentos: ame-os ou odeio-os.

Estou redigindo as minhas guidelines para Flash e estou pensando em lançar no formato Wiki, assim qualquer um pode acrescentar e alterar. O que acha da idéia?


Discussão
Marcelo Linhares
12/07/04 às 07:38

Requerimentos de interface!!!

Bom, na verdade eu já fiz (ou tentei) fazer um trabalho sobre guidelines.....

Nas minhas pesquisas encontrei as guidelines para sistemas desktop no Windows, guidelines para DOS, guidelines para BD em ORACLE, as guidelines de interface WEB (recomendações e especificações da W3C), entre outras.

No trabalho eu tinha que desenvolver uma guideline de um sistema WEB...

Bom, em baixo nível eu cheguei a conclusão que as GuideLines na WEB são as próprias CSS( Cascading Style Sheets) criadas no início do desenvolvimento que em todo o processo de criação das páginas servirão como referências de cores, posicionamento, exibição, etc..... acrescidos de algumas especificações não técnicas que envolvem mais os aspectos cognitivos como diretrizes de mensagens do sistema (erro e confirmação) diretrizes de formulários (valores default, disposição dos elementos) diretrizes da linguagem utilizada (formal ou informal).

Quando eu lhe pedi pra escrever sobre guidelines era justamente para entrarmos em uma discussão sobre o que é desenvolver uma guideline para WEB??? sua importância?? ou se é simplesmente mais uma metodologia que funciona perfeitamente em sistemas Desktop e que na WEB não faz muito sentido sua aplicação (é o que eu penso)

Vale a pena você criar um padrão particular e tomar isso como verdade em todo processo de desenvolvimento???

De fato é importante criar um "padrão", sem dúvida, mas qual é o limite dessa padronização????

São tantas dúvidas rapaz....!!


voltando ao assunto novamente....
Fiquei curioso em ver sua guideline para FLASH, acho bacana disponibilizá-lo na web, não acho ser uma boa idéia disponibilizá-lo em WIKI, "assembleismo" demais na maioria das vezes não funciona,
Todo o seu esforço e estudo que teve para criar as guidelines serão jogadas fora por gente que instintivamente "contribuirão"...


mas de qualquer forma vale a pena a experiência....

Bom....
Adianta um pouco aê sobre as suas Guidelines, pq eu fiquei curioso...!!!

OBs:. guidelines para interface em FLASH eu nunca tinha visto!!


Discussão
Fred
12/07/04 às 18:34

Agora entendi o seu sentido de Guidelines. É como o manual dos sistemas operacionais com recomendações para desenvolver interfaces. Um exemplo famoso é o da Apple:

http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/

Acho que o CSS é a concretização dessa definição, mas não tem o status de documentação. Além do mais, além de consistência na apresentação, precisamos de consistência no comportamento, ou seja, precisaríamos de um documento maior. Sugiro o nome "Manual de Apresentação e Comportamento de Elementos de Interface", mas soa tão chato, né?

Concordo com você, acho que na Web isso não funciona. A natureza dela é tão entrópica que não vale à pena dispender tempo tentando conter a heterogeneidade. Melhor tentar apartar interesses e lidar com elas. Bem a discussão já saiu bastante fora do tópico, mas agora vejo realmente a oportunidade de um post só sobre o assunto.


Discussão
carlos
01/08/05 às 16:51

Estou engatinhando na Informática, e gostria de ter um texto mais simples, bem rudimentar sobre a criação de Icones. Se possível, me ajude.
Carlos


Discussão
Fred
01/08/05 às 17:00

Carlos, esse outro post fala justamente sobre isso:

http://www.usabilidoido.com.br/processo_de_criacao_de_icones.html

Espero que ajude.






Você merece.

Assine nosso conteúdo e receba as novidades!

Atualizado com o Movable Type.

Alguns direitos reservados por Frederick van Amstel.

Apresentação do autor | Website internacional | Política de Privacidade | Contato