Tecnologia, Marketing e Design de Internet

Tecnologia, Marketing e Design de Internet Tecnologia Marketing Design Blog sobre Desenvolvimento Web, Tecnologia de internet, Design e Interface Web, SEO SEM Otimiza??o de Sites e Web Marketing, Cases de sucesso e Campanhas online, Microblogging, Wordpress Blog, CSS design

Contato

Receba os artigos
no seu E-mail
:

Arquivado em ‘Web Design e CSS’


Princípio da Gestalt no alinhamento dos layouts de sites

Quarta, out 8th, 2008

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.

analise-layout-site-ig-thumb

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.

layout-ig-grid-thumb

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.

mega-portal-thumb

É 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.

megaportal-grid-thumb

Outros dois exemplos:

grid-audi-small

mojito_grid

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!

Bookmark e Compartilhe

CSS Escolhidos #21

Quinta, out 2nd, 2008

ekochgren

hambodevelopment

podlahy

Bookmark e Compartilhe

Referência de blog sobre desenvolvimento web: criarsites.com

Quinta, jul 10th, 2008

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.

Bookmark e Compartilhe

Nova logo da rede Walmart

Quinta, jul 10th, 2008

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.

nova-logo-wallmart

Bookmark e Compartilhe

CSS Escolhidos #20

Terça, jun 10th, 2008

sredidom

brascri

holgerkoenemann

Bookmark e Compartilhe

CSS Escolhidos #19

Segunda, mai 26th, 2008

zendiko

jobmixer1

sequelnaturals

Bookmark e Compartilhe

CSS Escolhidos #18

Sexta, mai 23rd, 2008

weightshift

challies

hellyeahdude

Bookmark e Compartilhe

Quando criatividade não se comparada com execução

Sexta, mai 23rd, 2008

doodle

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.

Bookmark e Compartilhe

Designer, como o MEC compreende a formação

Segunda, abr 28th, 2008

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.

Bookmark e Compartilhe

CSS Reset, corrigir problemas de renderização nos browsers

Quinta, abr 10th, 2008

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:

CSS:
  1. /*  CSS Reset de Thalis Valle */
  2.  
  3. html, body, span, applet, object, iframe,
  4. h1, h2, h3, h4, h5, h6, blockquote, pre,
  5. a, abbr, acronym, address, big, cite, code,
  6. del, dfn, em, font, img, ins, kbd, q, s, samp,
  7. small, strike, strong, sub, sup, tt, var, dl, dt,
  8. dd, ol, ul, li, fieldset, form, label, legend, table,
  9. caption, tbody, tfoot, thead, tr, th, td  {
  10. margin: 0;
  11. padding: 0;
  12. border: 0;
  13. outline: 0;
  14. font-size: 100%;
  15. font-family: inherit
  16. }
  17.  
  18. img  {
  19. display:block
  20. }
  21.  
  22. :focus {
  23. outline: 0
  24. }
  25.  
  26. ol, ul  {
  27. list-style: none
  28. }
  29.  
  30. table  {
  31. border-collapse: separate;
  32. border-spacing: 0
  33. }
  34.  
  35. caption, th, td  {
  36. text-align: left;
  37. font-weight: normal
  38. }
  39.  
  40. lockquote:before, blockquote:after, q:before, q:after {
  41. content: ""
  42. }
  43.  
  44. blockquote, q  {
  45. quotes: "" ""
  46. }

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

CSS:
  1. body  {
  2. font-family: verdana, Arial;
  3. font-size: 0.9em;
  4. }

Bookmark e Compartilhe

CSS Escolhidos #18

Terça, nov 28th, 2006
  1. congregationallibrary.org
  2. blogmailr.com
  3. nasinicarni.it
  4. creixems.com/home
  5. laaikikai.org

[tags]css, webdesign[/tags]

Bookmark e Compartilhe

CSS Escolhidos #17

Segunda, nov 13th, 2006
Bookmark e Compartilhe

Formulário semântico e acessí­vel

Sábado, nov 4th, 2006

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:

Formulário de exemplo 1

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:

Exemplo de formulário semântico

Baixe os fontes formulário acessível

Bookmark e Compartilhe

CSS Escolhidos #16

Segunda, out 30th, 2006
Bookmark e Compartilhe

CSS Escolhidos pt 15

Segunda, out 9th, 2006
Bookmark e Compartilhe

CSS Escolhidos pt 14

Domingo, out 1st, 2006
Bookmark e Compartilhe

CSS Escolhidos pt 13

Segunda, set 25th, 2006
Bookmark e Compartilhe

CSS Escolhidos pt 12

Terça, set 19th, 2006
  1. flock.com
  2. malarkey.co.uk
  3. thisiscable.com
  4. dpivision.com
  5. bigcartel.com/home
Bookmark e Compartilhe

CSS Escolhidos pt 11

Segunda, set 11th, 2006
Bookmark e Compartilhe

CSS Escolhidos pt 10

Terça, set 5th, 2006
  1. jp33.com
  2. parcrittenhouse.com
  3. sktchr.com
  4. www.blurb.com
  5. kevinpotts.com
Bookmark e Compartilhe

SVG, imagens vetoriais em aplicações Web

Sábado, set 2nd, 2006

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.

sgv01.gif

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:

svg2.jpg

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.

Bookmark e Compartilhe

CSS Escolhidos pt 9

Segunda, ago 28th, 2006
Bookmark e Compartilhe

CSS Escolhidos pt 8

Segunda, ago 21st, 2006

Escolhidos da semana:

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

Bookmark e Compartilhe

Logo Creator, um gerador de Logos Web 2.0

Sexta, ago 18th, 2006

Exemplos de Logos Web 2.0

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:

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

Bookmark e Compartilhe

CSS Escolhidos pt. 7

Terça, ago 15th, 2006

css escolhidos

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

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

Bookmark e Compartilhe

Design minimalista. Uma estratégia visual à usabilidade

Segunda, ago 7th, 2006

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

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

Yahoo

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

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

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]

Bookmark e Compartilhe

CSS Escolhidos pt. 6

Segunda, ago 7th, 2006

Escolhidos da semana:

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

Bookmark e Compartilhe

Uma batidinha de Design e Semântica

Segunda, jul 31st, 2006

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!

Bookmark e Compartilhe

CSS Escolhidos pt. 5

Segunda, jul 31st, 2006

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/

Bookmark e Compartilhe

CSS Escolhidos pt. 4

Segunda, jul 24th, 2006

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

Bookmark e Compartilhe