Design.Blog.br

Sobre a falta de atualizações

Canha — Thu, 11 Mar 2010 13:00:55 +0000

Os leitores mais fiéis devem ter notado a falta de updates. E tenho uma desculpa boa: estou me casando esta semana!

Embora eu raramente divulgue informações pessoais aqui no blog, vejo que tenho o dever de informar aos leitores de feed e pessoas que acessam o blog constantemente explicando o por que do atraso.

Meu casamento está marcado para o dia 13 de Março e logo em seguida estaremos indo para nossa lua de mel. Ou seja, o blog só volta a partir do dia 22 de Março. Não atualizei nestas últimas semanas por estar ocupado demais com todas as preparações. O Twitter do Design Blog tem um monte de twits programados já, então se quiser ainda ficar por dentro de coisas designerísticas interessantes, sugiro que siga o @design_blog.

Até lá!

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Cantos arredondados para qualquer navegador

Canha — Thu, 04 Mar 2010 13:00:35 +0000

Recentemente vimos aqui mesmo no Design Blog, um artigo que ensina Como criar cantos arredondados com CSS3. Mas como todos sabem o CSS3 ainda não foi implementado em todos navegadores. Este artigo fala uma maneira prática de criar cantos arredondados de forma que funcione em qualquer navegador.

Criar cantos arredondados em divs, sempre foi um grande desafio para muitos web designers, até o surgimento do atributo border-radius no CSS3. Mas esse atributo por enquanto, infelizmente, é suportado somente por três navegadores.

Mas isso não é motivo para deixarmos de usar cantos arredondados, pois existe uma maneira muito prática e rápida de fazer com que sua div fique com cantos arredondados em qualquer navegador. Então vamos ao que interessa:

A primeira coisa que devemos decidir é o tamanho do raio do canto. Após decidido o raio, devemos abrir algum editor de imagens e criar um círculo com o dobro do raio definido. Por exemplo: se o raio do canto for de 5px, o círculo deverá ter 10px de diâmetro.

Então, depois de criado o círculo, devemos cortá-lo em quatro partes, como na imagem abaixo, salve as imagens, com os mesmos nomes que coloquei abaixo, pois fica mais fácil de identificar a imagem certa para cada canto, além de poder servir como um padrão na hora de criar bordas para outras divs.

Uma observação muito importante a ser feita aqui, é que as imagens não podem ter fundo transparente, pois poderá haver alguns problemas na junção com a parte reta da borda.

Corte a ser feito na imagem

Agora, que já temos as imagens necessárias, vamos criar a parte de CSS da div.
Inicialmente, vamos criar uma div principal, onde vai o conteúdo da caixa, e três classes: uma para definir padrões dos cantos, uma para definir retas horizontais e outra para retas verticais.

#divPrincipal { position:relative; margin:10px; width:400px; height:auto; padding:5px; overflow:hidden; }

#divPrincipal .cantos { width:5px; height:5px; z-index:10; position:absolute; }

#divPrincipal .retaH { width:100%; height:1px; background-color:#666; position:absolute; z-index:1; }

#divPrincipal .retaV { width:1px; height:100%; background-color:#666; position:absolute; z-index:1; }

No padding da #divPrincipal, devemos colocar o valor do raio do canto, na classe cantos, também devemos colocar no width e heigth o valor do raio do canto, além de declaram no z-index um valor maior do que o valor do z-index das classes de borda reta, para que as imagens dos cantos sobreponham as linhas retas.

Agora vamos declarar, cada uma div individual, para cada canto da div:

#divPrincipal #blt { top:0px; left:0px; background-image:url(bLeftTop.png); }

#divPrincipal #blb { bottom:0px; left:0px; background-image:url(bLeftBottom.png); }

#divPrincipal #brt { right:0px; top:0px; background-image:url(bRigthTop.png); }

#divPrincipal #brb { right:0px; bottom:0px; background-image:url(bRigthBottom.png); }

Repare que coloquei como id de cada uma das divs, uma sigla que identifique qual canto ela representa por exemplo: “Border Left Top” virou “blt”. Assim fica mais fácil de saber quais atributos devo colocar, por exemplo: se a div é do canto direito e no topo, coloco o valor 0px nos atributos right e top. Já se ela é no canto esquerdo, na parte de baixo da #divPrincipal, coloco 0px no left e bottom. Além de colocar como background, a imagem correspondente àquele canto.

Agora vamos declarar em nosso CSS, as bordas retas:

#divPrincipal #bTop { top:0px; }

#divPrincipal #bBottom { bottom:0px; }
#divPrincipal #bLeft { left:0px; }

#divPrincipal #bRigth { right:0px;

Nas bordas retas, a situação fica ainda mais clara, só precisamos definir valor 0px para a direção que tal borda estará.

Agora, vamos partir para o HTML. Em sua página você deve colocar a #divPrincipal, e aninhada à ela, cada div de canto, e de borda reta. Após ter colocado cada div, vem o conteúdo da div em si. Como no exemplo abaixo.

Nesta caixa temos bordas arredondas que funcionam em qualquer navegador.



Ela foi testada no Internet Explorer 8, Firefox 3.5, Chrome e Opera 10.

À partir desse exemplo, chegaremos a um resultado muito próximo ao da seguinte caixa:

Pode-se usar também efeitos como sombras, brilhos, relevo, etc. na borda, é só adaptar o tamanho das divs dos cantos, altura da div de linha horizontal, largura da div de linha vertical, e o padding da divPrincipal, de acordo com suas necessidades.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Tá com medo do default?

Canha — Wed, 03 Mar 2010 13:00:09 +0000

Muitas pessoas que trabalham com criação de imagens, no geral se vêem em momentos em que há diversas opções default, por padrão, de criação que por parecerem muito comuns ou muito usadas são evitadas ao máximo.

O que muitos não percebem é que o uso dessas opções, a aplicação de alguns efeitos padrões, quando em complemento e em usos diferenciados acelera, e muito, a criação e cria visuais inovadores e surpreendentes.

Quando o assunto são vetores este site, o VectorTuts, apresenta tutoriais e dicas onde muitas opções default são utilizadas para se criar composições bonitas, práticas e rápidas.

Claro que é difícil se habituar e conseguir criar coisas novas e diferenciadas com coisas disponíveis pra qualquer um e que todos podem usar.

No Web Design por exemplo temos que lembrar que nem sempre ousar demais é o caminho, nas páginas da internet, tem certas coisas que se modificadas demais causam confusão e atrapalha, links por exemplo, quando não são sublinhados dificultam a identificação como tal.

Afinal, o uso de opções default pode e deve ser benéfico se usado com moderação, só não pode ser utilizado para substituir opções criativas, mesmo se for necessário muita rapidez no término do trabalho.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Designers não são web designers

Canha — Tue, 02 Mar 2010 13:00:28 +0000

Artigo de um colaborador do blog falando sobre os designers, empresas e cursos que acham que design gráfico é o mesmo que web design.

Este artigo comporta-se como um protesto contra designers que desdenham o web design e acham-se capazes de criar um site como um impresso. Estendem-se as empresas que incentivam seus designers GRÁFICOS a produzirem layouts sem instruí-los sobre essa nova área, muitas vezes longe da abordada em seus cursos. E, sobretudo, os cursos superiores de Design, que em sua maioria não abordam o tema com a devida importância, contratando professores despreparados, com o intuito de apenas completar a grade curricular.

O web design é uma especificação do Design digital que se equivale ao gráfico e produto.

Web design

O projeto de uma interface para web interage com muitas outras áreas além da visual, como é de costume na produção de um cardápio ou de um flyer ou uma peça gráfica em geral. É nessa linha que surgem os primeiros tropeços da falta de informação destes pseudo-webdesigners.

Acostumados a tratarem apenas do visual, deixam de lado a premissa mais importante da web hoje, o UCD(design centrado no usuário), que trata-se em priorizar os diferentes tipos de usuários avaliando suas capacitações e limitações.

A internet reproduz o mesmo site de diversas maneiras, as cores e a resolução mudam de monitor para monitor, a renderização de browser para browser, a velocidade de navegação de usuário para usuário, interferindo diretamente na percepção visual da página, ao contrário de um material impresso. Não apenas as limitações de hardware, deve-se compreender que falando de internet, tratamos de padrões rígidos que para serem quebrados devem ser estudados e testados de forma a descobrir seu sucesso. Denominamos de acessibilidade esses padrões invisíveis que se repetem em vários sites e tornam-se comuns, habituando o usuário. Por exemplo, a barra de busca encontra-se preferencialmente ao lado direito e ao topo; para retornar à página principal, normalmente clicamos na logo da empresa.

Mapa do tesouro da usabilidade

Tais fundamentos estão inseridos no usuário e muda-los drasticamente, tornará sua interface não-intuitiva, obrigando o usuário a pensar e exigindo uma curva de aprendizado para a navegação. No final frustrando-o.

Uma interface digital necessita interação e dinamismo, tudo acontece muito rápido, estamos há um click de outro site, a pressa ao usar o computador faz com que o usuário não tenha uma leitura atenta e navegue a partir da tentativa e erro. É preciso resumir e sintetizar a informação, de modo que seja encontrada rapidamente. Tendo agora mais uma área envolvida no projeto de um website denominada de “Arquitetura da informação”.

Passado essa turbulência, ainda temos mais um obstáculo pela frente, o programador, ou seja, aquele que irá desenvolver o front-end do website, tirá-lo do layout e aplicá-lo. Por ser apenas um designer e não um web designer ele não tem domino de xhtml e CSS, ferramentas básicas para criar a estruturação e a estilização da página, projetando-a como um impresso, alinhando todos os itens de um menu à esquerda e o último, por capricho, a direita.

Na montagem do layout é necessária mais uma classe para poder alinhar esse ultimo item, adicionando linhas de código ou até mesmo uma imagem a mais, aumentando o tempo de produção do programador e deixando o site mais pesado.

Diagrama para o webdesign

A interface web trabalha com marcações que trazem a idéia de padrões. Todo o título deve ser estilizado de forma similar para facilitar a identificação do usuário na página(acessibilidade) e pelo modo com que as linguagens de
marcações trabalham. A partir do momento que este designer aprender a implementar seu próprio layout vai entender o funcionamento e projetar pensando na montagem. Minimizando o tamanho do site e agilizando processo de produção.

O motivo desse desdenho em relação ao web design está no fato de ser uma área nova que cresce em tamanho e faturamento, absurdamente. A falta de um mercado sólido abre brechas para qualquer fundo de quintal se aventurar na construção de websites e a falta de profissionais capacitados obriga ou abre oportunidade para o designer gráfico se adptar, porem essa adaptação muitas vezes vem com a falta de informação e domínio do assunto não levando atenção necessária. Bastando contratar alguém que implemente os layouts e estará pronto para web. Essa idéia muitas vezes agrada o cliente nas primeiras impressões, mas não os seus usuários, tornando o website falho.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Inspiração de segunda – parte 5

Canha — Mon, 01 Mar 2010 13:00:29 +0000

Existem muitos times brasileiros de futebol que possuem sites considerados uma atrocidade. No entanto, alguns ainda se salvam. Eis uma coletânea de sites oficiais de times que chamam a atenção pelo seu design interessante.

São 10 sites de times de futebol brasileiros que foram escolhidos a dedo. Que fique claro: não estão em nenhuma ordem específica e não estou favorecendo nenhum deles. Não acompanho nenhum time ;)

Você acha que faltou o time do seu coração? Deixe um comentário com o nome do time que você acha que deveria constar aqui por ter um site bem produzido.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

5 dicas de design que se aprende com a Apple

Canha — Fri, 26 Feb 2010 13:00:33 +0000

Eu gosto do Windows, especialmente o XP (embora agora eu seja 100% Mac). Durante anos usei ele e não tenho nada contra produtos Microsoft. Mas convenhamos que, em termos de design, a Apple está muito mais a frente da gigante MS. Eis 5 coisas que podemos aprender com a Apple em relação a design de interfaces.

Mantenha-o simples

Veja o site da Apple. Não pense no que você vê, mas no que não vê. Vou dar uma dica: você não vê tudo que você vê neste site do Microsoft Office. A resposta é poluição visual. A página inicial deve nos dizer tudo sobre nossa empresa, falar de todos os nossos produtos nos mínimos detalhes, listar todas as vantagens do produto e deixar o logo no maior tamanho possível. Certo? De acordo com a Apple, não.

A diferença entre o site da Apple e do MS Office 2010 - diferença gritante

A Apple sacrifica um pouco da usabilidade, fazendo com que o usuário tenha que clicar mais de uma vez para poder visualizar determinada informação apenas para não saturar a tela dele – que no final das contas, seria tão trabalhoso para o usuário filtrar todas as informações em uma página só do que separar de forma que fique fácil de achar.

Use fotos fantásticas

Um dos motivos que levou a Apple a diminuir o uso de gráficos supérfluos, foi para mostrar o que realmente é importante: seus produtos. Olhe as fotos que eles usam; é quase impossível não fixar seus olhos naqueles aparelhos durante vários segundos.

Em uma mistura de fotografia profissional, renderização 3D e, claro, Photoshop, as imagens realmente chamam a atenção. Outro detalhe são os tamanhos das imagens; ocupam boa parte da tela. De nada adianta passar horas editando uma foto para que fique super legal apenas para diminuí-la a um tamanho de thumbnail e colocar no site.

É possível aprender que não basta tirar uma foto e jogar no site (ou folder, revista, etc) de qualquer maneira. Gaste um pouco mais de tempo (ou dinheiro, contratando alguém que saiba fazer algo incrível) e faça algo fantástico.

O contraste é a chave

Outra coisa que faz com que as fotos de produtos da Apple sejam tão incríveis é o ambiente no qual estão contidas. O cérebro humano ama contraste. É o motivo da gente ficar impressionado com o pico de uma montanha no horizonte, acima de um oceano. É o que faz a gente ficar com água na boca ao ver aquele iPhone preto brilhante em um fundo branco. É aconselhado que você sempre procure utilizar o contraste seletivo em tudo que você criar. Que seja contraste de cor, tamanho, peso de fonte, etc.

Dê atenção aos detalhes

A Apple parece focar bastante nos detalhes. Todos os pixels de seu site e afins são planejados. Nunca caia na armadilha de dizer “ninguém vai notar” ou “tá bom o suficiente”. Muitas vezes é o tempo gasto com os mínimos detalhes que separam os bons designers dos ótimos designers.

Não acredita em detalhes? Veja a região dos logos de redes sociais do site do Microsoft Office e me diga que não te deu um frio na espinha.

Ai ai...

Crie propagandas instrutivas

Para reforçar a mensagem que o mouse possui uma superfície multi-toque, a Apple criou a imagem abaixo. Mesmo sem o título, quase todo mundo consegue compreender o que está acontecendo na figura e conseqüentemente entendem como usar essa nova tecnologia com a qual não estão acostumados.

No entanto, a Apple vai muito além de ilustrações. Praticamente qualquer pedaço de hardware e software no site deles possui um vídeo explicativo. Isto ajuda horrores na hora de reduzir o suporte técnico a questões freqüentes. Toda vez que algum convertido ao mundo da maçã me faz uma pergunta (como sou usuário de Mac, muitos me vêem como um suporte gratuito ao sistema), aconselho visualizar os vídeos pois eles fornecem uma melhor explicação e entendimento do que um e-mail ou conversa via telefone poderia. Dê uma olhada na biblioteca de vídeos institucionais da Apple para ver como funciona.

Em resumo

A Apple Inc. é basicamente sinônimo de “design classudo”. Existe muito que podemos observar destas obras de arte que vão além de imitar o efeito de reflexo que eles colocam em tudo. Essas dicas foram dadas para serem aplicadas no seu próprio trabalho de maneira única. Use elas como inspiração.

Toda vez que alguém menciona a Apple é normal ter fiéis e odiadores, prontos para mostrarem seu amor ou ódio ao método de design da Apple. Você é qual deles? E por quê? Deixe um comentário abaixo!

Confira mais 10 dicas no Design Shack (ING)

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Modelos de Planos de Marketing (com downloads)

Canha — Thu, 25 Feb 2010 13:00:17 +0000

Entenda o que são planos de marketing e faça o download de alguns modelos para usar de referência.

Marketing é uma parte essencial da vida de um designer. No entanto, um designer não é necessariamente um marketeiro, mas precisa saber de algumas coisas importantes desta área. Entre eles, o plano de marketing. Ele é uma das ferramentas mais importantes; serve para determinar o que é o seu produto, para onde ele vai e como ele vai lá.

O objetivo do plano de marketing é equalizar a matriz SWOT – em português, FOFA – pontos Fortes, Oportunidades, pontos Fracos e Ameaças. Ou seja, transformar os pontos fracos em pontos fortes, as ameaças em oportunidades.

Matriz SWOW ou FOFA - exemplo do xCakeBlogs

O plano de marketing é um documento que trata de tudo: desde a descrição do produto ou empresa a ser “marketado”, as estratégias de marketing que serão empregadas, o tempo levado, os custos gerados e retorno planejado. Em sumo, é o documento que será o guia do produto ao sucesso.

O plano de marketing é bastante utilizado por start-ups (empresas virtuais que estão surgindo no mercado) para conseguir levantar dinheiro de investidoras – serve também para empresas físicas, mas vou focar principalmente nas virtuais.

Um plano bem elaborado pode facilmente render a um contrato bom que vá fazer a empresa decolar, como foi o caso da brasileira Boo-Box que elaborou um plano de marketing interessante e acabou recebendo o investimento de uma empresa especializada no assunto.

Os modelos de plano de marketing disponíveis para download aqui são bem auto-explicativos. No entanto, existem umas regras a serem seguidas:

1) caso vá utilizar um modelo, fique com aquele modelo até o final. Nada de misturar modelos, pois gera confusão no final das contas.
2) seja o mais descritivo possível. Não adianta dar como descrição do seu produto “um produto que irá revolucionar o mercado”. Por que ele irá revolucionar o mercado? O que ele faz que outros não fazem?
3) deixe o resumo executivo por último. O primeiro capítulo do plano de marketing é sempre o último a ser feito, pois aí você já tem uma noção boa e firme do que vai ser feito.

Faça o download gratuíto destes modelos de plano de marketing bem detalhados, leia-os que você entenderá melhor como esse sistema funciona.

Excelentes livros de marketing
Livros sobre planos de marketing
Modelo de planejamento de marketing completo.
Modelo de Plano de Marketing (Portal da Propaganda). Formato: DOC (preview em HTML)
Como é um plano de marketing.
Exemplo de Plano de Marketing da Top Brands. Formato: PDF (preview em HTML)

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Design Blog Podcast – Episódio 01

Canha — Wed, 24 Feb 2010 13:50:41 +0000

Após muita enrolação, finalmente consegui gravar o primeiro episódio do Design Blog Podcast. É um podcast esporádico, curto (no máximo, 15 minutos) e trata dos mesmos assuntos tratados aqui no blog.

Neste primeiro episódio, falo sobre o artigo de Paul Boag publicado no Smashing Magazine intitulado “O cliente que é burro (ou você não está sendo claro o suficiente)?” (em tradução livre). O podcast explica o por que de alguns clientes serem “chatos” e como você pode resolver isto.

Este episódio tem 11:26 de duração, pesa aproximadamente 8mb (formato MP3) e está em qualidade de 96kbps.

Aproveite para assinar o feed exclusivo do podcast aqui. Ou se preferir, assine o feed do site inteiro neste link.

O que acharam do podcast? O assunto tá interessante? Tá de bom tamanho? Comente!

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Como colaborar com um artigo pro Design Blog

Canha — Tue, 23 Feb 2010 13:00:14 +0000

Alguns já devem ter notado: o Design Blog agora está aceitando artigos de colaboradores. Saiba como é possível colaborar e o que você pode receber em troca.

O Design Blog é um blog sem fins lucrativos (ou seja, não recebo nenhum dinheiro para postar aqui) – no entanto, me possibilitou fazer diversos projetos e até ser contratado algumas vezes por empresas de web design (que é meu foco profissional). Agora, estou estendendo essa possibilidade a todos os leitores designers.

Com uma média de 2.000 visitas únicas por dia, mais de 800 soldados no Exército do Design e quase 2.000 assinantes de feed, o Design Blog contém quase 190 artigos exclusivos e não é seu típico blog onde o conteúdo é apenas copiado de outros.

Com isto dito, o Design Blog está abrindo as portas para novos colunistas. Não há um mínimo de postagens obrigatórias – você pode contribuir uma vez com apenas um artigo. O colunista recebe total crédito por seu artigo e pode linkar seu site ou portfólio.

Alguns dos colaboradores do Design Blog e seus respectivos créditos

Você pode escrever sobre o que quiser – desde que relacionado com uma das áreas de design tratadas aqui no blog (design de produto, gráfico, web design e freelancing). Basta acessar o formulário de colaboração e ler as instruções adicionais.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Fonte tipográfica beneficente

Canha — Mon, 22 Feb 2010 13:47:00 +0000

Parece que hoje em dia ninguém quer doar dinheiro sem ganhar nada em troca. São campanhas beneficentes que oferecem um jantar caro, ou até mesmo uma placa com seu nome por dar dinheiro a uma causa. Tem gente que até faz e vende fontes tipográficas especiais.

O objetivo da SOTA (Society of Typographic Aficionados – ou “Sociedade de Aficionados por Tipografia” em tradução livre) ao criar a fonte “Coming Toghether” era de poder beneficiar vítimas do terremoto no Haiti.

A fonte – que contém mais de 400 &’s – teve a contribuição do mesmo número de tipógrafos espalhados por quase 40 países (inclusive alguns brasileiros) e é fornecido como uma única fonte multi-plataforma OpenType.

Ela está sendo vendida a US$ 20 e pode ser adquirida pelas distribuidoras de fontes Ascender Fonts, Veer, FontShop, e MyFonts. O valor integral será repassado ao fundo do Doctors Without Borders (“Médicos Sem Fronteiras”) que está prestando ajuda no Haiti.

Você acha que é uma ação válida? Você compraria esta fonte para ajudar vítimas de desastres naturais?

Update: Obrigado André Luiz pela correção de título ;)

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Design.Blog.br

Sobre a falta de atualizações

Artigos relacionados

Cantos arredondados para qualquer navegador

Artigos relacionados

Tá com medo do default?

Artigos relacionados

Designers não são web designers

Artigos relacionados

Inspiração de segunda – parte 5

Artigos relacionados

5 dicas de design que se aprende com a Apple

Mantenha-o simples

Use fotos fantásticas

O contraste é a chave

Dê atenção aos detalhes

Crie propagandas instrutivas

Em resumo

Artigos relacionados

Modelos de Planos de Marketing (com downloads)

Artigos relacionados

Design Blog Podcast – Episódio 01

Artigos relacionados

Como colaborar com um artigo pro Design Blog

Artigos relacionados

Fonte tipográfica beneficente

Artigos relacionados