Qual a importância do Princípio da Gestalt no alinhamento dos layouts de sites? É estranho, mas é comum layouts de sites/interface web serem concebidos de forma a causar má sensação da percepção dos nossos olhos.

Decidi escrever sobre isso, depois de ver um portfólio de alguém que é formado em Design, participante da lista DG - Designer Gráfico, que me fez duvidar de se tratar de uma pessoa com formação na área. Isso sempre acontece. Penso que existem muitos profissionais que não têm diplomas (natos), e estão entrando no mercado de trabalho para ensinar muitos que tem. O ego nas pessoas, em colocar seus diplomas e títulos como escudo, está fazendo muita gente se acomodar. Depois de ver um portfólio web de qualidade tão baixa, pensei: está na hora de falar sobre isso.

O que faz você pensar em um site bonito?

Cores, caixas, formas de elementos, contexto, tipografia, programação, audiência, etc… será que um site bonito se torna sucesso de audiência, ou a audiência faz um site se tornar bonito? Um site é bonito porque faz o seu estilo, ou é bonito porque faz o estilo dos outros? É bonito pelo bom conteúdo ou por que informa, ou tem nome? Bonito por quê?

Um site tem que atender vários tópicos, e ao mesmo tempo tem que apelar (sem agredir), conquistando a percepção ou idéia que as pessoas têm em relação ao design. Um site que informa, deve ter sua arquitetura preparada para informar, e não fazer arte. Um site que é arte, tem que ter sua arquitetura preparada para causar idéia de beleza, modernismo ou sofisticação. Seja qual for a sua natureza, tudo deve estar dentro de um padrão de gestalt, na separação e organização do conteúdo e elementos.

Essa organização é que causa o bem estar, e está presente em tudo. Não poderia estar ausente do processo de criação de layouts de sites.

Alinhamento - Layout de portais

Peguei como exemplo, o site do IG, um portal de grande porte que precisa informar com credibilidade, e estar presente no mundo virtual de forma a satisfazer todos os desejos de quem o assina, ou visita.

Clique na imagem e amplie-a.

Olhando a imagem ampliada, percebe-se os espaços entre cada elemento, em blocos:

1. Bloco de conteúdo do topo, ende todo elemento filho está alinhado no espaço estabelecido;
2. Bloco da área dos menus, que respeitam a área de respiro entre os elementos à direita;
3. Bloco do media center projetado alinhado com os elementos à sua direita, e de tamanho igual ao bloco elemento 4;
4. Publicidade do mesmo tamanho do bloco 3, respeitando o alinhamento entre os seus visinhos;
5. Blocos para as principais notícias, ambos de mesma proporção e respeitando o alinhamento dos elementos visinhos;
6. Blocos de chamadas para destaques, respeitando a margem conforme número de caracteres das chamadas no espaço dinâmico;
7. Bloco para chamadas populares, também de mesmo tamanho da área 8, respeitando sua margem com os demais elementos visinhos;
8. Bloco para chamadas populares, do mesmo tamanho da área 7;
9. Bloco destinado à publicidade, respeitando a margem dos elementos à sua esquerda;
10. Blocos de chamada para turismo, ambos do mesmo tamanho, e respeitando a margem padrão entre os elementos da página.

Visualização da Grid (IG)

Clique na imagem e amplie-a.

Para outro exemplo, peguei o Mega Portal de Criciuma, que serve para entender a diferença entre layout que segue padrão de alinhamento, e layout que não segue:

Clique na imagem e amplie-a.

É visível a diferença ao compararmos com o layout do IG. Este, possui elementos perdidos, e que não respeitam margens, e nem seguem um padrão de tamanho para cada bloco/elemento.

Visualização da Grid (Mega Portal)

Clique na imagem e amplie-a.

Outros dois exemplos:

Está claro, a importancia da organização de elementos e conteúdo em um layout web. Mais interessante, é fazer isso baseado em um design bem feito, para que o visitante chame de “site bonito” e não apenas um amontoado de informação, mesmo que esteja bem organizado e alinhado. Foi possível perceber a falta de tudo isso, no layout do segundo exemplo.

E agora, como você vai desenvolver seu site? Qual exemplo vai seguir?

Links como referência, do Luli Radfahrer:

Grids: cada coisa em seu lugar

O Grid do Mojito

Boa leitura!

Aos webmasters de plantão, segue uma referência de blog que fala sobre: webmasters, blogueiros, dicas para criação de sites, hospedagem de sites, produtividade, otimização, divulgação e monetização de sites.

Criarsites é um blog sobre desenvolvimento web, criado por Celso Lemes que reside no Japão.

Ele disse em seu blog, que depois de perceber que era possível ter algum retorno financeiro com internet, ele começou a aprender sobre desenvolvimento web.

The following is a paid review.
Este post foi pago pelo ReviewME.

A rede Walmart aposenta seu logo, adotado em 1992. Criado pela Lippincott, de Nova York, o novo logo ainda não está sendo usado no Brasil.

Grace Moon, uma jovem estudante na Califórnia venceu uma competição do Google que propunha a criação de um Doodle , usado em ocasiões sazonais.

A criatividade dela custou US$10 mil em bolsa de estudos, mais US$25 mil para sua escola Canyon Middle School, em Castro Valley.

A designer Cristina Jacó escreveu um artigo interessante sobre como a profissão de designer, hoje é vista pelo MEC - Ministério da Educação e Cultura.

Para ler o artigo na íntegra, acesse “Como o MEC compreende a formação em Design“, no portal Imasters.

Apesar de não ser mais novidade para quem já trabalha profissionalmente com desenvolvimento web, muitos aindas não conhecem a maneira de corrigir problemas de renderização nos browsers.

CSS Reset faz com que todas as propriedades das tags sejam zeradas desde o início, através dos seletores que aplicam no HTML e/ou XHTML. Quem pesquisar por CSS Reset vai encontrar um padrão que promete fazer com que os principais browsers que dominam o mercado, renderizem de igual pra igual. Eu, que uso o IE7, IE6, Firefox, Opera e Netscape para testar meus trabalhos, tive alguns probleminhas entre eles, com a tag <table>. Então, fiz um ajuste para solucionar o problema. Abaixo, segue o CSS Reset que uso no meu dia-a-dia:

Aproveito para deixar muma dica, que é sempre setar as propriedades de estilo e tamanho de fonte no seletor body. Exemplo:

1. congregationallibrary.org
2. blogmailr.com
3. nasinicarni.it
4. creixems.com/home
5. laaikikai.org

[tags]css, webdesign[/tags]

• somox.com
• morum.com.br
• backpacken.eu
• imperion.pl
• tanyamerone.com

Esta semana peguei um formulá¡rio de boleto online para torná-lo semântico e acessível, e no momento em que alterava aqui e ali, pensei: preciso escrever artigos voltados ao desenvolvimento web.

Não vou falar de tags como h1, h2, h3, h4, h5, h6 ou p, span, blockquote etc. Todos já estão "carecas" de saber o que é certo e o que é errado.

Tive a idéia de escrever um artigo sobre formulários depois de alterar um boleto online que continha um fonte totalmente fora da realidade. Então, estou pegando um simples formulário escrito em HTML, para deixá-lo acessével e correto, semanticamente falando.

Há vá¡rios tópicos que eu poderia abordar sobre usabilidade, mas não quero o fazer agora. O que eu quero é mostrar a parte "por trás", da coisa. Sei que muitos ainda se esquecem de escrever corretamente formulários HTML, pensam em tudo, mas quando chega a hora, esquecem de coisas simples que fazem grande diferença aos usuários de leitores de tela ou para aqueles que por algum motivo, não podem usar o mouse.

O preview abaixo, é de um simples formulário de 5 campos, escrito do modo antigo:

Clique aqui para ver o código fonte.

Vamos fazer a mágica? Abaixo, segue a lista das etapas para a transformação do formulário:

1. Adaptação do fonte para XHTML 1.0 Transitional;
2. Eliminanação das tags table, tr, td e font;
3. Folha de estilos separada da estrutura de marcação;
4. Insersão de tags específicas para formulários semânticos e acessíveis: fieldset, legend, label, optgroup, tabindex e accesskey;
5. Validação do formulário.

Pronto! Confira o resultado do novo formulário semântico e acessível logo abaixo ou clique aqui para ver o resultado:

Baixe os fontes formulário acessível

• olshtyn.com
• furious-angel.com
• begreennow.com
• dtelepathy.com
• donjose.com.br

• cajovna-altan.cz
• macaroondesign.com
• mentorwestmichigan.com
• buscacoche.es
• satsu.co.u

• regines.net.au
• flexilis.com
• albergoolisipo.com
• fraziermedia.com
• lucidcrew.com

• methodarts.com
• haus-hoyer.de
• emanuelblagonic.com
• trezr.com
• booreiland.nl

1. flock.com
2. malarkey.co.uk
3. thisiscable.com
4. dpivision.com
5. bigcartel.com/home

• mein-brandenburg.com
• lydnos-arts.fr
• snook.ca/jonathan
• per.fectio.net
• blumedia.ca

1. jp33.com
2. parcrittenhouse.com
3. sktchr.com
4. www.blurb.com
5. kevinpotts.com

SGV, ou Scalable Vector Graphics (Gráficos Vetoriais Escaláveis) é uma linguagem baseada em XML, projetada para a criaação de gráficos vetoriais estáticos e dinâmicos, ou animados através de comportamentos JavaScript/DOM. A linguagem foi criada pelo W3C e também pode ser manipulada com ASP, PHP e JSP.

Essa tecnologia permite três tipos de objetos gráficos:

• figuras geométricas vetoriais;
• imagens raster/bitmap;
• texto.

A grande vantagem do formato SVG, é que não há perda de qualidade nas imagens quando ampliadas, ao contrário do que acontece com os formatos convencionais (por pixels), como: JPG, BMP, GIF e PNG. Também é uma linguagem Open Source. Nenhuma marca tem direitos exclusivos sob a utilização da mesma, e não exige a legalização de determinados softwares/aplicativos.

Onde está a graça?

Na possibilidade de criação de gréficos e figuras geométricas de forma dinâmica. Jé imaginou a criação de gráfcos a partir de valores vindos de bancos de dados? Para se ter uma idéia, o Google Analytics faz algo parecido, porém utilizando a tecnologia Flash.

Exemplo de gráfico gerado a partir de dados fornecidos pelo usuário:

No caso acima, o grafico foi gerado depois de eu setar o número 40 para o campo de canditado 1, e 100 para candidato 2. Se eu tivesse setado 60 para o campo candidato 1, a porcentagem cresceria, imediatamente.

Infelizmente, não são todos os browsers que suportam SVG. Atualmente, talvez os únicos que suportam: Firefox e Opera

Saiba mais sobre Gráficos Vetoriais Escaláveis.

• postgrado.uem.es
• orangesegment.ph
• stylesurge.com
• idlerhythm.com/a
• worldfood.com

Escolhidos da semana:

• enjoylifecounselling.net
• manatag.e-knjige.net
• galwayoysterfest.com
• ns.sympatico.ca/smith3564
• okcmoa.com

[tags]css, webdesign, xhtml, webstandards[/tags]

Com a popularidade da Web 2.0, de fato, é normal surgirem novos serviços para a plataforma. O Logo Creator, talvez seja o começo de uma nova era, em relação ao tratamento de imagens para a web. Não é tão interessante um gerador de logomarcas alltype, que não agrega valor intrínsceco, estudo de mercado, necessidades da marca e do cliente ou padrão de identidade visual da empresa ou marca, etc. Mas o interessante é a idéia.

No mundo da publicidade é normal dizer que "nada se cria, tudo se copia", e fazendo valer a frase, sabendo das necessidades que as empresas e marcas têm em investir na tecnologia e no marketing, surge então a possibilidade de as marcas se transformarem, na Web 2.0.

Que os designer de internet fiquem atentos. As marcas serão "copiadas", para a plataforma Web 2.0

Alguns exemplos:

• flickr.com/photos/tags/yay2dot0logoparody/interesting/
• fontshop.com/fontfeed/archives/web-20-logos.cfm
• drweb.de/weblog/weblog/?p=518
• yh.yayhooray.com/thread/90661/yh-collab-redesign-famous-logos-in-web-2-0-format

[tags]web 2.0, logo creator, webdesign[/tags]

pixelpusher.biz
c.dric.be/gium/issues/01
speaklight.com
urbanfoodworks.org
execute-gfx.de
Pixelpusher

[tags]css, webdesign, xhtml, webstandards[/tags]

Se é certo que os usuários tem notável impaciência em relação ao tempo gasto de
navegação, para achar a informação que procuram, e se é certo que usuários tem insistência em gratificação imediata, do que lhe é fornecido, seja em sites B2C, portais ou blogs, a usabilidade deve ser bem planejada, pois ela governa a web.

Usabilidade exige clareza na arquitetura da informação, que exige qualidade visual e interface organizada. Sabendo disso, o estilo minimalista é uma estratégia visual, no
sentido "deconstrutivimismo", onde através dos traços, objetos e cores, dá-se a devida importancia para o que é relevante ao usuário, excluindo tudo aquilo que pode ser irrelevante, dentro do contexto.

A aplicação do estilo minimalista na interface web, organiza a informação, de modo como elas devem ser interpretadas. Para cada propósito e segmento de mercado, o design cuida da aparência, como um sistema eficiente baseado na interface projetada ao usuário. Assim, onde a meta é disponibilizar informação de maneira eficáz e rápida, o sistema tem de permitir uma perfeita intereção com o usuário, que posteriormente deve levar consigo a satisfação pelo serviço prestado.

Pegamos como base de entendimento, o portal Terra

Sob uma breve análise de interface, podemos constatar que o Terra mantem um padrão visual; ícones, objetos, tipografia e cores. No estilo retangular arredondado, cada bloco possui os mesmos valores (tons e corpo de fonte), também nos banners de publicidade. Os blocos encontram-se posicionados por nível de importancia de conteúdo: navegação, publicidade, categorias/notícias em destaques, últimas notícias etc. Porém, fica devendo em Web Standards. Também, não passou no validador do W3C.

Como segundo exemplo, Yahoo Brasil

O Yahoo também mantém uma identidade, mesmo não mantendo no padrão, os botões e menus, por exemplo. Usa tons leves e de cores frias, como o azul e turquesa. Tem um design minimalista no estilo "quadradão" (bastante utilizado nos portais gringos). Na ordem de importância de informação, mantém as notícias em segundo plano, dando desque às tags Yahoo. É fácil a localização no portal. Não foi possível validar no W3C. Deve em Web Standards.

Apesar de se falar tanto em Web Standards, podemos constatar que nem todos estão realmente seguindo os padrões, em favor à correta visualização nos demais dispositivos.

Em relação ao design das páginas iniciais do Yahoo e Terra, é possível perceber a diferença entre simplicidade e complexidade. O Yahoo mantém esse padrão minimalista, desde seu surgimento.

Deixando um pouco de lado os portais, peguemos dois blogs, como exemplo:

Kibe Loco

Layout não tem identidade. Há poluição de elementos na imagem de cabeçalho. O uso do tom amarelo (cor quente) foi trabalhado com objetos quadriculados que causam uma irritação; tenção. Há desorganização visual, na área dos artigos. Percebe-se que o Antonio Tabet não se preocupa com aparência, e sim com conteúdo, que é a questão relevante, do blog. Também não passou pelo validador do W3C.

Google Underground Blog

Design minimalista, no padrão Google com tons claros e frios. Diferentemente do Kibe Loco, há organização de informação. Layout no estilo 3 colunas, com blocos de conteúdos, a interface organiza a área visual. Na lateral esquerda, encontra-se os links e bloco de anúncios. No centro, os artigos são visualizados em bloco, destacando como menus, "comentários", "del.icio.us" e "E-mail". Na lateral direita, encontra-se "Selos", "Destaques", "Mais buscados" etc. Não passou pelo validador.

Estes são exemplos básicos, de como um site deve ser bem projetado, para que ofereça aos usuários o que tem de especial e mais relevante, usando a interface projetada para servir como uma plataforma desenhada, especificamente para ser funcional e causar satisfação ao usuário/leitor.

Não se pode esquecer: design envolve gosto pessoal. Cuidado para não decepcionar seu target, usuário/leitor.

[tags]design, css, webdesign, usabilidade, webstandards, w3c[/tags]

Escolhidos da semana:

www.thamesvalleypod.tv
www.train1on1.co.uk
www.teacherzpetz.com
www.esourcemarketing.com
www.ptz-berlin.org

Hoje, decidi escrever sobre o meu ponto de vista entre design e semântica, duas palavrinhas que devem ser entendidas como um todo, a resultar numa boa batidinha. Sem álcool.

Alguns profissionais estão deixando de lado a estética da web, para ressaltar o valor da semântica. Do mesmo modo como a ergonomia não pára, a semântica organiza, o design dá a beleza.

Um exemplo: qual seria a meta de uma marca disponibilizar um site com a semântica 100% em dia, deixando a desejar na questão de layout, se a marca tivesse de vender arte, design? Ou então, o que seria de um site com um layout respeitado, mas com uma estrutura semântica, quase zero? Seria questão de planejamento ou "seguir" o que os outros estão fazendo, mesmo não sabendo que fazer bonito não é fazer certo?

Penso que, é preciso planejar para desenvolver um site que sirva de ferramenta, para se conquistar algo. E design e semântica devem trabalhar juntos para que um site consiga alcançar metas.

A semântica é a organização e uso correto dos dados da estrutura XHTML. O design é a arte de conseguir seu valor estético, dar as vestes mais apropriada - a pele do esqueleto. E agora, fazer bonito ou fazer certo? Fazer bonito e fazer certo!

Acredito que a semântica é uma questão muito importante, àqueles que desejam ser verdadeiramente profissionais de internet. Hoje, ter um site na internet não significa nada, não abre nenhuma porta e não alavanca nenhuma venda. Um site pode ser uma boa ferramenta de marketing, mas como qualquer ferramenta, ela deve funcionar. Agora, jogue o açucar na taça - o design, responsável pelo real valor estético, da coisa.

Portanto, um bom profissional deve não só leiautar, como saber tratar informações. E
pra concluir, vai um parágrafo de um post do Henrique Costa Pereira, no Web Insider:

"Nos Estados Unidos e na Europa as empresas pagam alguns milhares de dólares e euros pela otimização de mecanismos de busca (SEO Search Engine Optimization). No Brasil esta prática ainda parece um pouco travada pelo ego de grandes empresas e agências que fazem sites bonitinhos e mal desenvolvidos."

Mas e se os sites bonitinhos estivessem devidamente estruturados quanto á semântica? Seria o ideal!

Saudade dos escolhidos? Seguem os da semana:

www.twinings.com/index.php?territory_id=1
www.tribolis.com
www.dream-design.net
www.maxvoltar.be
www.foxbrookapartments.net/

Estou todo semana, selecionando alguns site Tableless/CSS que encontro por aí... Esta semana os escolhidos são:

www.fisyco.com/hungary
www.merix.com.pl/home
www.arinzedesign.com
www.oneida.com
www.foxbrookapartments.net