ui design

Por que UI design é tão importante?

Quando fala-se em UI design, estamos a falar dos padrões visuais de uma “user interface”, ou a interface do utilizador. O UI design, assim como seu “primo” o UX design (que tem a ver com a experiência do utilizador) são hoje bastante difundidas, embora algumas empresas ainda deem pouca importância a esse fator.

O UI design determina, nos dias de hoje, o sucesso ou o fracasso de um website, aplicação, app de telemóvel ou mesmo serviços como caixas Multibanco ou painéis de confirmação de voos em aeroportos. O design da interface é o que permite que uma empresa ofereça ao usuário um sistema que o mesmo pode operar, sem erros, problemas ou dificuldades. Um UI design bem feito e bem pensado geralmente reflete num bom UX – ou seja, uma boa experiência do utilizador.

UI design em Portugal

Falemos antes de mais nada da casa: Portugal. Embora haja exemplos imensos de boas interfaces do usuário no país, a verdade é que o UI design ainda caminha cá em passos lentos. Quando falarmos, logo a seguir, sobre os “mandamentos” do bom UI design, perceber-se-á porque não dispomos ainda de boas interfaces por aqui.

Temos boas reproduções de interfaces que fazem sucesso no exterior e alguns competentes exemplos de melhoria, como ocorre no próprio site das Finanças de Portugal. Ao mesmo tempo, o nível de complexidade, excesso de informação e falta de preocupação na óptica do utilizador ainda nos fazem enfrentar algumas das piores interfaces das quais se tem notícia. Vamos a alguns exemplos:

ui design

Um exemplo de sistema online de faturação em Portugal – falta de preocupação com o visual, relatórios em listas sem fim e ausência de padrão responsivo para telemóvel. A experiência é pobre em muitas das aplicações existentes no mercado e pouco difere do que já era oferecido por softwares como o Microsoft Access mais de 20 anos atrás.

ui design

Netforce, do IEFP – um dos portais mais usados do país possui imensos menus, abas, submenus, itens e tópicos que causam uma inundação de informação, muitas vezes repetitivas e pouco útil. Qualquer usuário precisa entrar e sair de links e páginas dezenas de vezes até que encontre aquilo que realmente está a buscar.

Mas nem tudo deixa a desejar – há alguns websites portugueses em um excelente caminho. É bem verdade que alguns deles praticamente copiaram de forma idêntica os processos de alguns sites estrangeiros, sobretudo brasileiros, mas se isso reverter em benefício para o usuário, que mal há? Um dos exemplos claros dessa reprodução (embora a versão estrangeira ainda esteja um pouco à frente em usabilidade) é o Portal da Queixa. O site possui praticamente o mesmo UI design do brasileiro Reclame Aqui.

ui design

Portal da Queixa – interface claramente baseada na do brasileiro Reclame Aqui, mas bem executada. Simples, fácil de efetuar a queixa (com um passo a passo) e sem imensos campos e formulários a preencher. Leve, mobile friendly e objetivo no que se propõe a fazer.

Mas podemos estar esperançosos quanto ao futuro. Uma das melhores e mais ricas interfaces em UI design em Portugal, nos dias de hoje, é o sistema da Autoridade Tributária e Aduaneira. Embora nem toda a plataforma já esteja sob o novo conceito de design, o que pode causar confusão ao utilizador (que se vê diante de duas plataformas distintas para o mesmo fim), as partes que já adotam o novo visual são rápidas, simples de usar, dedutíveis em suas aplicações e mínimas em burocracia e estrutura.

ui design

Autoridade Tributária – plataforma nova e brutal em todos os aspetos. Leve, rápida, dedutível e simples para o uso. Mesmo utilizadores com pouca experiência no uso de computadores podem aceder o que precisam e operar seus muitos recursos.

Lembrando que, em relação ao UI design, não se trata apenas de uma questão estética. O design de interfaces tem muito mais a ver com pensar em como o utilizador fará uso dos sistemas e plataformas, prever seus movimentos e criar alternativas que lhe sejam úteis e de fácil operação.

O que buscar no UI design

Criar interfaces não é uma questão de gosto por parte da empresa que oferecerá essa plataforma e nem mesmo uma questão estética apenas. O UI design baseia-se em princípios relacionados ao utilizador – e é nele que pensaremos enquanto desenvolvemos um novo conceito. Há muita bibliografia a esse respeito, mas de um modo geral, o bom “user interface” está pautado em 7 princípios:

  1. Foco no usuário. É fundamental que o utilizador possua controlo sobre a plataforma que está a usar. Se o controlo daquilo que é exibido ou oferecido ao longo da experiência é da empresa ou do proprietário da plataforma, esse é o primeiro sinal de um mau trabalho de UI design.
  2. Objetividade. O utilizador precisa conseguir, em poucos passos, aquilo que de facto está a buscar. Esse princípio derruba, por exemplo, a grande maioria dos sistemas e interfaces disponibilizados por órgãos públicos, não apenas em Portugal, mas em todo o mundo. O Netforce, do IEFP, que citamos anteriormente, é um exemplo claro de como NÃO cumprir com a objetividade em uma interface.
  3. Consistência. Toda a plataforma ou interface precisa possuir as mesmas características e oferecer uma identidade ao usuário. Esse é o único problema ainda existente, por exemplo, no sistema a Autoridade Tributária. Parte da plataforma já encontra-se sob a nova interface, enquanto determinadas cenas ainda encaminham o usuário a um sistema mais antigo, com interface completamente distinta.
  4. Reversibilidade. Isto aplica-se, inclusive, às novas regras do Regulamento Geral de Proteção de Dados. Ao longo da sua experiência na interface, o usuário precisa ser informado, alertado e notificado a respeito das consequências das suas ações e, mesmo após levá-las a cabo, precisa encontrar meios de revertê-las sempre que for necessário.
  5. Feedback. Uma boa interface aprende e aprimora-se à medida que seus utilizadores façam uso de seus recursos. Se muitos utilizadores têm problemas com determinada parte de uma interface, isso deve culminar em uma modificação. Do mesmo modo, partes de uma interface que adequam-se completamente ao comportamento e operação do utilizador podem e devem ser copiadas em outros segmentos da mesma plataforma.
  6. Estética. Claro, e dispensável dizer, mas um bom UI design também possui estética.
  7. Simplicidade. Esse é o ponto máximo de um UI design bem feito – quando não é preciso explicar ao utilizador como ele deverá ou não fazer uso da plataforma, atingiu-se assim o ponto mais alto do design. O objetivo final de qualquer boa interface é fazer com que sua operação seja um ato completamente natural e dedutível.

Informação demais no design não resulta… saiba o porquê

Quem trabalha ou já trabalhou com comunicação sabe de algo… quase todos os clientes e empresas querem colocar TUDO em suas peças publicitárias e de divulgação. A ideia torpe de que é preciso colocar tudo e mais um pouco, ainda que seja num cartão de visitas, não é apenas “falta de estilo”. Se sua empresa sempre busca meter tudo em qualquer que seja a media, está na hora de mudar.

Quando trata-se de design, muitas empresas ainda têm dificuldades em enxergar algo simples. O cliente ou leitor NUNCA lê tudo. Especialmente quando lidamos com peças de publicidade de rápida visualização, como folhetos ou anúncios online, a probabilidade é de que cada usuário as veja por segundos. Entretanto, muitas das peças que vemos em todo canto possuem toneladas de informação, textos e imagens.

Mais do que uma questão estética – essa mais relacionada ao gosto – trata-se de foco e organização. Ao priorizar “tudo”, prioriza-se nada, a bem da verdade. Quando damos destaque a todo o conteúdo de maneiras diferentes, não fazemos ver nenhuma parte dele em particular. Isso leva a peças de publicidade que não resultam.

O conceito de campanha

Toda empresa possui dezenas, centenas ou milhares de produtos. Todas têm valores e história. Todas elas atuam em diversos segmentos e mercados. Entretanto, cada peça de publicidade precisa ter um alvo específico. E, para alguns desses alvos, 99% da informação que possuímos é irrelevante. Estudemos dois casos distintos.

CASO 1 – DESCONTO SAZONAL

Digamos que determinada empresa esteja a oferecer descontos em alguns de seus pacotes de viagem, apenas para o mês que antecede às férias de verão. Apesar de possuir mais de 30 pacotes de viagem distintos, essa empresa deverá focar seus esforços de marketing nos destinos ligados ao veraneio. Isso leva a algumas conclusões iniciais:

  • Destinos fora do contexto de veraneio, longe de praias, de hotéis “fazenda” e quintas ou de regiões montanhosas não são prioridade
  • Qualquer pacote que não esteja incluído no desconto é irrelevante
  • A informação-chave aqui são os preços – não particularidades de cada pacote

Com foco nos preços, o objetivo é o de atrair o público com base nos descontos. Anunciar adicionais de serviços, custos extras e afins é algo que vai de encontro à meta inicial: vender com desconto.Em seguida, é preciso pensar em termos de público. Há anúncios para um público geral, mas caso seu apelo seja a retirados, anunciar pacotes de casas noturnas e bares da moda não parece útil. Do mesmo modo, se a empresa aqui objetiva um público mais jovem e universitário, destinos românticos ou de família não surtirão qualquer efeito.

Finalmente, há que se usar hoje em dia a web para informações mais aprofundadas. Evitemos incluir todos os detalhes de cada roteiro. Preços, número de dias, nível de desconto e 3 ou 4 pontos principais de visitação – isso é mais que suficiente. Para terminar, dados de contacto ou para que o leitor busque mais informações.

O modelo “institucional” infelizmente ainda é usado, mesmo no segmento de viagens. Nele, opta-se por longos textos (que ninguém lê) e não há destaque especial para nada. Mesmo dados para contacto parecem estar escondidos do público por alguma razão.

Especialmente em segmentos de venda para o público final, o modelo institucional é um erro comum.

 

CASO 2 – RODADA DE PROMOÇÕES

Há empresas grandes de varejo que promovem diversos produtos ao mesmo tempo em folhetos que parecem pequenos jornais. Entretanto, em um espaço exíguo, como em um flyer, tal receita não funciona. Há como diagramar-se um folheto de modo a comportar várias imagens e produtos, mas o maior problema dos folhetos promocionais de empresas é o ponto de foco. TUDO é destaque.

Empresários muitas vezes têm a impressão de que se derem destaque a tudo, tudo parecerá importante. O que ocorre é exatamente o inverso: sem um ponto focal definido, o leitor perde-se em meio a tanta informação. O flyer na imagem exemplifica bem.

Números, porcentagens, preços, slogans – tudo em destaque, caixa alta e tipografia explosiva. Há tanto em destaque que mal se veem os produtos.

 

Campanhas que resultam

Para que uma campanha resulte, ela precisa de um foco, uma temática ou um alvo – ou todos os três. Como vimos nos dois exemplos anteriores, havia em planeamento um foco específico, mas ele perdeu-se na inundação de informações. O design e a comunicação precisam de prioridade – oferecer toneladas de informações equivale a dar 10 horas de aulas seguidas a um estudante. Com sorte, ele absorverá as primeira duas horas de explicações.

 

Web Design Conversão

Web design sem conversão é inútil

O web design é, comumente, uma área associada à arte. Sem dúvida que o objetivo dessa disciplina é sempre o de criar algo belo, prático e inovador. Contudo, há um objetivo muito mais crucial e importante no web design, o qual por vezes é esquecido. O web design precisa gerar conversões.

Ainda quando não se trata de uma loja ou site corporativo, todo website tem sempre uma meta. Há sempre algo que deseja-se por parte do usuário ou leitor: seja uma maior permanência, ou cliques em áreas específicas, ou que transfira ficheiros ou ainda compre produtos. A função do web design, nesse caso, não é a de “deixar tudo bonitinho”. Ao contrário, há sites não tão bonitos que geram resultados esperados – outros são lindos, mas não atendem às metas que são estabelecidas.

Web design com conversão

O web design com conversão implica no estudo do público-alvo, do cliente que está a desenvolver um novo site e até mesmo das práticas e plataformas em voga no momento em que o site é desenvolvido. O erro comum está em “fragmentar” o raciocínio no campo do design. Ou faz-se primeiro algo bonito ou vistoso, para somente depois pensar no uso prático dessa peça, ou pensa-se demais na prática, utilizando o design somente à posteriori para “consertar” o que realmente não é aceitável.

A visão holística dentro da criação de sites ainda é algo raro. Dificilmente opta-se pelo simples e direto e, tanto da parte de clientes quanto de agências, prima-se pelo aspeto do projeto em termos de gosto, não de usabilidade ou resultados. Enxergar a conversão, com base nas intenções do cliente e comportamento de seus usuários, é uma das principais funções do web designer.

Características do bom web design

Seguir tendências, estar com uma “cara” moderna ou aplicar modelos prontos que estejam em alta não constitui um bom web design – ao menos não necessariamente. A união do útil, do agradável e do lucrativo precisa ocorrer sempre. A visão completa de Dieter Ram a respeito dos “mandamentos” do bom design traduzem, de forma primorosa, o que qualquer empresa ou dono de site deve esperar de seus web designers. Contudo, é preciso deixá-los trabalhar, para que alcancem uma peça que atenda a 10 itens essenciais:

  1. Um bom web design é INOVADOR. O bom web design faz uso, sempre que conveniente, de tecnologias que sejam inovadoras e atuais. Desenvolvimento de sites com padrões de um, dois ou dez anos atrás é algo que não é cabível e nem mesmo profissional. O bom web design cria produtos que tenham uma vida útil considerável, e portanto precisam ser inovadores em relação a seus antecessores.
  2. Um bom web design é ÚTIL. Isso significa que todo elemento, estético, artístico ou visual, precisa de utilidade. Vivemos em uma época na qual usuários são imediatistas e práticos, e qualquer aspeto sem utilidade é simplesmente ignorado ou deixado de lado.
  3. Um bom web design é ESTÉTICO. Sim, a beleza ainda é importante. De um modo geral, o “high-end” do trabalho do web designer é criar produtos belos a partir de todas as demais limitações e necessidades existentes num projeto.
  4. Um bom web design é EXPLICATIVO. Tal qual o design tradicional, um produto de web design que precise de explicações ou manuais para que seja compreendido pelo usuário é algo que certamente fracassou. Se leitores e usuários não percebem o que determinado design quer dizer, é hora de trocar por algo mais compreensível.
  5. Um bom web design é DISCRETO. É possível ser apelativo sem atropelar a personalidade do próprio usuário ou a importância do conteúdo. Quando o web design interfere de maneira a limitar a compreensão do conteúdo ou impedir a manifestação e engajamento do usuário, ele simplesmente não funciona.
  6. Um bom web design é HONESTO. O web design de qualidade não tenta “parecer” algo diferente daquilo que é. Um site não pode manipular o usuário com promessas que não é capaz de cumprir ou oferecendo funcionalidades que simplesmente não possui.
  7. Um bom web design é DURADOURO. O web design e suas tendências estão em constante evolução e mudança. O web designer precisa, desse modo, garantir que o produto entregue a seus clientes seja atual e cabível pelo maior tempo possível. O bom web design sobrevive a tendências menores.
  8. Um bom web design é PRECISO. Não se pode deixar a interpretação e o design por conta do acaso. Cada reação e intenção deve ser, sempre que possível, prevista pelo web designer e usada de modo a tornar o site algo mais eficaz.
  9. Um bom web design adapta-se ao AMBIENTE. No caso de Dieter Ram, isso diz respeito ao atributo “environmentally friendly” de um design. No contexto do web design, pode-se traduzir como algo que não crie incômodos e poluição visual em relação àquilo com que o usuário já está habituado, conforme a respetiva plataforma.
  10. Um bom web design é MÍNIMO. O web design tem como função organizar e dispor informações e conteúdo relevante, para criar uma visualização funcional, útil, prática e agradável. Quanto maior o número de elementos e variáveis, mais difícil torna-se atingir tal objetivo.

Saleable design

A MeuPPT trabalha com uma filosofia dentro de seus projetos de design e web design que vai além dos conceitos que já abordámos. A verdade é que o design de qualidade, além de criar conversão e gerar resultados para o cliente, pode inclusive gerar receita. Marcas bem constituídas são capazes de criar fontes alternativas e complementares de receita simplesmente com base em seu design e estilo.

No campo offline, a Apple, a Ferrari, a Starbucks, são todas bons exemplos disso. Seu design é tão marcante, útil e agradável, que chega a ser vendido e criar faturação para essas empresas. A Ferrari vende perfumes, camisetas, jaquetas e acessórios de vestuário. Em tese, trata-se de uma marca de automóveis. Entretanto, seu design é tão bem planejado e construído que passa, por si só, a ter valor.

No campo do web design isso é, de certo modo, uma novidade. Ainda assim, pensamos com esse objetivo. Amanhã, aspetos e módulos de programação e web design usados em um site empresarial poderão ser vendidos aos usuários. Plataformas personalizadas e com design mais sofisticado podem ser alternativa paga a websites mais simples e comuns. Ebooks, apresentações, animações – tudo isso pode gerar receita financeira suplementar. Como designers, temos de pensar no valor do que criámos – inclusive sob o aspeto financeiro.

O Saleable Design é o design que pode ser vendido. A partir dele, podem ser criados produtos e serviços específicos, que antes sequer eram imaginados. Para concluir a ideia da conversão, basta encerrar com uma simples frase:

 

 

Design sem conversão é apenas mero desenho.

MeuPPT Comunicação
Tendências em web design

5 tendências em web design em 2018

O web design está sempre a mudar. Boas práticas dos anos 2000 e 2001 hoje são risíveis, mas o fato é que as coisas mudam bem mais rápido do que se possa supor. Algumas tendências em web design em voga dois anos atrás já estão com cara de “retrô”, enquanto outras que já estiveram presentes no design voltam com tudo.

Nem toda empresa precisa mudar ou atualizar um website. Contudo, se já vão muitos anos desde a última modernização ou se sua empresa lida com o público mais jovem, é bom ler este artigo até o final.

Tendências em web design – tipografia

A tipografia está a ganhar foco no web design ao menos nos últimos três anos. O uso de textos como elemento gráfico torna o carregamento de websites mais rápido e também o impacto mais eficaz, especialmente em telemóveis. Fontes e textos em “bold”, poucas palavras em destaque, com cores contrastantes e fontes que se confundem com imagens. A tipografia deve seguir em alta este ano, como forma de destacar marcas e criar mais apelo junto ao usuário.

Tendências em Web Design

Tipografia forte e contraste em preto e branco – uma forma rápida e leve de impactar mais na web.

Tendências em web design

Fontes em tamanho extremo em conjunto com cores e transparências, mesclando imagens.


Tendências em web design – gradientes e degradês

Tidos por muito tempo como algo fora de moda, o uso dos “gradients” ou degradês voltou ano passado com força total. Transições entre cores semelhantes ou de mesmo tom, discretas e suaves. A ideia é criar certa perspetiva em imagens na web, oferecendo uma visualização quase tridimensional nos ecrãs. Os degradês podem ser aplicados ao fundo, mas também a elementos em específico. Mesmo na parte de identidade visual e criação de logótipos e marcas, o uso das transições de cores é cada vez mais comum, puxado por grandes marcas da web atual.

Tendências em web design

Degradês e transições vêm sendo aplicados a logótipos e elementos, para criar uma sensação de relevo e profundidade nos ecrãs e sugerir mais movimento.

Tendências em web design

A norte-americana de pagamentos Stripe é apenas um dos exemplos de grandes empresas da web que vêm “puxando” a tendência do uso de transições de cores e “gradients”.


Tendências em web design – duotone

“Duotone” é exatamente o que o nome sugere: o uso de dois tons de uma mesma cor, geralmente em par com elementos em branco ou preto. Especialmente quando o uso da cor possui uma intenção junto ao usuário, o impacto é maximizado e, após o contacto inicial do leitor com a composição, as cores deixam de ser o foco principal, passando a ser a mensagem o centro das atenções. O duotone é uma forma sofisticada e em alta de criar cenários dentro da lógica de storytelling de um site, com “cenas” em cores diferentes. Além disso, é um modo mais minimalista de usar cores e tons fortes.

Tendências em web design

O duotone permite que o uso de cores fortes e “berrantes” seja eficaz, mas sem tirar a importância ou relevância do texto ou conteúdo em si.


Tendências em web design – assimetria

A simetria é algo supervalorizado atualmente – o web design parece ter-se revoltado em relação à óptica sempre simétrica e “certinha” dos websites. A assimetria, juntamente com o uso e sobreposição de imagens e textos, é uma das grandes tendências para 2018. Mais do que simplesmente uma forma de quebrar a monotonia, a assimetria vem sendo utilizada para criar sequências de telas e histórias mais engajadoras no web design – uma forma de deslocar e dirigir a atenção do leitor e reduzir abandonos de páginas.

Tendências em web design

Palavras quebradas em linhas distintas, tamanhos diferentes de fontes, sobreposição com imagens e falta de paralelismo. O uso mais assimétrico dos elementos é uma grande tendência, especialmente quando relacionada ao uso do storytelling na comunicação online.


Tendências em web design – vídeos como fundo

Ainda na tendência de imprimir mais movimento a websites e contar histórias, o uso de vídeos como background é uma tendência crescente. É preciso apenas observar que, como vídeos consomem recursos para renderização e exibição, o mais prudente é utilizar trechos de vídeos mais curtos e em “looping”, ou seja, que se repetem após alguns segundos, eliminando a necessidade de carregamento constante.

Tendências em web design

Vídeos de fundo eliminam a necessidade de muito texto – a perceção do significado dá-se de modo automático e o usuário sente-se como que colocado em uma jornada.

Raleway - Fontes Gratuitas

Fontes gratuitas – pare de usar Calibri e Arial

Calibri, Arial, Times New Roman… Há 25 anos, quando o Windows 3.1 era novidade, e todas essas fontes gratuitas inundaram textos e documentos mundo afora, isso representava variedade.

Vínhamos de uma era na qual máquinas de escrever, havia quase 100 anos, digitavam textos sempre no mesmo formato. Computadores imprimiam em uma fonte única também, e mesmo nos ecrãs, não havia qualquer variedade. O mundo era “Courier” e mesmo hoje ainda temos a “Courier New“.

Nesse cenário, a repentina possibilidade de usar 10 ou 12 fontes diferentes parecia maravilhoso. Além da já conhecida Courier, computadores agora ganhavam uma nova lista de fontes de texto que poderiam ser usadas em qualquer ocasião: Arial, Times New Roman, Georgia, Verdana, Tahoma, Impact e tantas mais. Textos chatos agora eram… um pouco menos chatos.

Fontes gratuitas – os primeiros websites

Os primeiros sites a ganhar a internet, ainda antes dos anos 2000, tinham de usar basicamente as mesmas fontes do Windows. Navegadores da época, como o Explorer e o Netscape, não possuíam bom suporte para recursos gráficos ricos. Além disso, o CSS, o HTML e o próprio web design em si engatinhavam.

Empresas que quisessem utilizar fontes diferentes daquelas do Windows em seus sites precisavam fazê-lo em formato de imagem. O que deixava as coisas mais lentas e até mesmo um pouco estranhas e fora de proporção. Felizmente, essa época já passou… mas há quem siga a usar fontes de 20 ou mesmo 30 anos atrás.


Fontes gratuitas – como utilizar?

Para além das fontes-padrão, é necessário que um site carregue as fontes que pretende utilizar. Para fazê-lo, é necessário habilitar a fonte para uso, para que a mesma seja acionada através de instruções CSS contidas nas páginas. Há quatro maneiras básicas de fazê-lo, embora não iremos detalhá-las neste artigo (o faremos em outra ocasião, de cunho mais técnico):

  1. Gerando uma requisição a partir do próprio HTML, na seção <head> da página.
  2. Utilizando a instrução @import, a partir de uma folha de estilo CSS.
  3. Carregando a fonte por meio de propriedades @font-face, também no CSS.
  4. Carregando a fonte por meio de Javascript ou Jquery.

Há mais um par de maneiras de implementar novas fontes, porém não são muito utilizadas. De um modo geral, em um site WordPress ou desenvolvido em outro tipo de CMS, o modo mais simples de diversificar fontes é implementá-las a partir do Google Fonts – uma imensa biblioteca de fontes do Google de livre utilização. As fontes podem ser baixadas ou apenas “renderizadas” no website, como webfonts. Atualmente são mais de 800 as fontes disponibilizadas.

Há outros bancos de fontes gratuitas existentes, os quais veremos a seguir.


Fontes gratuitas – Google Fonts

São 848 fontes e novas delas são sempre adicionadas. Quando seleciona-se uma das fontes, o programa do Google dá inclusive instruções de como deverá incluí-las em seu website, via HTML ou CSS. A simplicidade do Google Fonts tornou a ferramenta quase um padrão entre novos temas e templates para WordPress, Joomla, Magento e outras plataformas. Para quem é adepto de fontes quadradas e fora de moda como Calibri e Arial, eis algumas sugestões encontradas no Google Fonts para substituí-las:


Fontes Gratuitas – Adobe Edge Webfonts

Também gratuita, essa biblioteca de fontes gratuitas tem a assinatura da Adobe. São mais de 500 atualmente e elas também podem ser renderizadas em seu website. Entretanto, para tal, é necessário uma pequena requisição Javascript. Mas não se desespere, basta aceder ao rol de fontes da Adobe e clicar numa delas. Na parte de baixo do ecrã verá instruções claras de como deve implementar.

Fontes Gratuitas - Adobe Edge Fonts


Fontes Gratuitas – Fonts for Web

Outra biblioteca de fontes gratuitas para uso em sites. Esta, em particular, possui um plugin WordPress próprio, o que facilita ainda mais o uso das fontes. Entretanto, para aceder às fontes é preciso fazer um registo no site, embora esse seja gratuito. Preste também atenção – embora a ampla maioria das fontes desse banco sejam de livre uso, há aquelas que não poderão ser utilizadas para fins comerciais.


Fontes Gratuitas – Fontello

Não se trata bem de webfonts, mas este último site merece uma menção por um aspeto peculiar. Ele permite que sejam criadas webfonts para uso em sites com conjunto de ícones. Exato, basta escolher os ícones que formarão a fonte desejada e transferir o resultado. Após isso, basta implementar em seu website por meio de Javascript, plugins ou CSS @font-face (em outra oportunidade ensinaremos tudo isso).

Fontes Gratuitas - Fontello

Tela do Photoshop

5 alternativas grátis ao Photoshop

Isso mesmo – é possível aceder a alguns recursos de edição de imagens e fotos de forma gratuita. Claro, antes de contar quais são essas ferramentas, vale dizer: NÃO HÁ suite de programas melhor para design gráfico e web design na atualidade que o oferecido pela Adobe. Mas calma, há alternativas grátis ao Photoshop.

Se seu trabalho exige esse tipo de software, é melhor optar por uma assinatura do Creative Cloud, que oferece todos os programas da Adobe para uso em um par de computadores.

Contudo, a maioria das pessoas que hoje precisam de ações simples para seus websites e empresas simplesmente NÃO DEVEM assinar ou adquirir esses produtos. Eles são caros e voltados a profissionais. As alternativas gratuitas ao Photoshop existentes, muitas para uso online, oferecem ferramentas para a grande maioria dos casos triviais:

  • Redimensionamento de imagens
  • Conversão de formatos
  • Ajustes básicos de matiz, brilho, contraste e afins
  • Aplicação de filtros simples
  • Montagens triviais
  • Texto sobre imagem

Tudo isso pode ser feito com as 5 alternativas grátis que listámos aqui. Então, sem mais demora conheça-as e defina depois qual sua ferramenta de eleição.


Alternativas grátis ao Photoshop – Photoshop Express

Isso mesmo – a própria Adobe oferece uma ferramenta como “alternativa grátis” ao seu produto. Não se trata de algo inconsistente. O Photoshop Express oferece a maioria das ferramentas básicas, mas certamente possui muito menos recursos e grandes limitações em relação ao programa original. Ainda assim, para fins do dia a dia e para não especialistas, é uma óptima pedida. Há, inclusive, versões do Photoshop Express como apps para iPhone e Android (embora ainda mais limitadas).

Photoshop Express

O único problema da versão online para desktop é o fato de ser ainda baseada em Flash – e exigir assim a instalação ou atualização dessa extensão no navegador. Ainda assim, é uma alternativa gratuita e simples para ajustar e aprimorar fotos.


Alternativas grátis ao Photoshop – Pixlr

O Pixlr é um dos editores online mais populares – principalmente pela facilidade de uso. Hoje, ele conta com duas versões de web apps, uma mais complexa e uma estilo “express”. Infelizmente, para usar também é necessário instalar e atualizar a extensão do Flash. A boa novidade é que, além do já conhecido editor para web, o Pixlr agora também está disponível para telemóveis e tablets.

Pixlr mobile


Alternativas grátis ao Photoshop – Photopea

Um pouco mais simples, o Photopea é outra alternativa para quem precisa editar rapidamente fotos e imagens online. Apesar de mais rudimentar, esse editor não exige o Flash, e roda normalmente na maioria dos navegadores, mesmo mais antigos. A interface não tem o capricho de outros editores, mas ele dá jeito para a maioria dos trabalhos de redimensionamento e ajustes rápidos, possuindo inclusive alguns filtros pré-configurados para fotos.

Photopea


Alternativas grátis ao Photoshop – Photoshop Web

Com uma plataforma bem mais pobre que seus rivais, mas ainda servindo ao propósito, esse simples app online editar fotos para emergências. A vantagem? Bem, é totalmente em português. Para quem tem dificuldades em operar outras alternativas, com plataformas em inglês, é uma boa opção para começar. Contudo, vale o aviso: em qualquer tipo de aplicação web, saber inglês é algo que lhe permite uma maior flexibilidade e acesso a ferramentas diversas.


Alternativas grátis ao Photoshop – Fotor

Outra alternativa que não utiliza Flash e roda bastante rápido em qualquer computador. O Fotor possui apenas ferramentas mais básicas, mas é excelente, por exemplo, para redimensionar e reduzir o peso de imagens para uso em blogs. Há alguns efeitos e filtros disponíveis, mas maior complexidade só mesmo na versão paga o aplicativo.

3 peças de design gráfico de impressão low-cost

Existe impressão low-cost? Impressões em Portugal geralmente são algo custoso. Gráficas regionais cobram fortunas, mesmo para impressão de peças padronizadas e comuns, como cartões de visita ou flyers e panfletos. Se ainda está a gastar centenas de euros para conseguir o básico de seu estacionário é hora de começar a recorrer a serviços online.

A 360imprimir é uma gráfica online de qualidade, opera mesmo fora de Portugal e constantemente oferece promoções que lhe permitirão gasta metade ou mesmo um terço do valor que costuma pagar. Acredite: em alguns casos que avaliamos, custos de € 1.000 ou mais em gráficas poderiam cair para € 400-450 se as impressões fossem feitas ali. Além de qualidade e preço, a 360imprimir oferece entrega em qualquer canto de Portugal – a preço justo e com rastreamento online da carrinha.

Agora ao final do ano, muitas empresas imprimem catálogos, agendas, calendários e peças promocionais. Em alguns casos, a encantar clientes já para 2018. Em outros casos, a acelerar vendas de Natal. Qualquer que seja, é hora de imprimir – e REALMENTE usufruir de bons serviços em “low-cost”.

Especialmente se está em regiões mais afastadas do eixo Lisboa-Porto, poderá economizar até 50% ou mais de seus custos com gráfica. Faça as contas e veja por si. Gráficas em regiões como as de Braga, Viana do Castelo, Bragança, Vila Real, Viseu e outras operam sem maior concorrência de grandes players dos centros urbanos maiores. Com isso, acabam por cobrar o que lhes vem à cabeça. E sua empresa o paga…

Bem, comecemos então pelo básico do estacionário – um dos pontos de gasto de dinheiro que, aos poucos, causa prejuízos e reduz resultados…

3 peças de impressão low-cost – cartões de visita

Faça um orçamento de 500 cartões de visita por aí: o normal. Cores em frente e verso, sem qualquer revestimento especial, em dimensões 85mm x 55mm. Chegamos a ouvir o valor de € 57,00 – e isso se os pegássemos ali na gráfica. Online os conseguirá por € 20-25 cada 500 unidades. Veja por si.

Agora suponhamos uma empresa com 10 comerciais – a imprimir 1.000 cartões de visita para cada um deles. Com o milheiro de cartões por aí ao redor de € 80-90 ou mais, seria uma despesa de € 900. Ao pagar os preços praticados por gráficas online, poderia estar a economizar até 400 ou 500 euros em um único pedido! Além disso, poderá criar designs mais ousados e modernos para os cartões e personalizá-los e atualizá-los de modo mais frequente, beneficiando de um sistema rápido e barato de produção de impressos para vendas e promoção.

Poderia, por exemplo, usar uma pequena parte das centenas de euros que economizou e fazer connosco uma cotação para cartões mais apelativos e profissionais. Que acha?

3 peças de impressão low-cost – flyers e folhetos

Um cliente nosso outro dia nos comentou: um de seus parceiros havia pago quase € 90 para imprimir 2 mil folhetos tamanho A5. Três dias antes, havíamos efetuado um pedido para outro cliente: 4 mil folhetos A6 a € 33,50. Por que tanta diferença? Embora o tamanho A5 consista basicamente no dobro do A6, os valores são exorbitantes. Foram impressos metade dos flyers e pagou-se quase três vezes mais.

Portugal ainda é um país no qual a publicidade regionalmente ocorre de porta em porta, muito mais do que em outros países mundo afora. Especialmente no contexto regional, folhetos ainda são um pilar da propaganda. Gráficas e designers o sabem, e terminam por cobrar, novamente, quanto lhes parece crível por parte dos clientes.

A MeuPPT oferece aos clientes uma proposta com a qual podem beneficiar de custos baixos de impressão, diagramações e artes que podem ser usadas em mais de uma campanha e acompanhamento de resultados. Uma ação com 20 mil folhetos, nos preços absurdos pagos no primeiro exemplo, tem de gerar enorme retorno, ou é apenas gasto. Supondo que seus clientes em geral gastam 20 ou 30 euros em sua loja, por exemplo, seria necessário que a campanha trouxesse mais de 30 cliente para seu estabelecimento. E isso apenas para conseguir faturação bastante para pagar pelos impressos.

3 peças de impressão low-cost – cartazes

Imprimir cartazes online também é algo barato. Esse tipo de peça é óptima quando tem-se bom relacionamento com outros estabelecimentos e comerciantes, ou quando atua-se em sítios específicos. Ideal para anunciar seus produtos e serviços em escolas, centros comerciais, universidades, comércios de bairro, restaurantes, clubes e outros. Hoje é possível imprimir mais de 200 cartazes tamanho A3 por menos de € 50, usando serviços online. Isso já inclui IVA e entrega, é claro.

O cartaz é uma peça de sinalética, muito mais do que um item de estacionário ou uma propaganda entregue em mãos, como um flyer. Precisa possuir um design profissional, conteúdo direto e apelativo e diferenciar-se de tudo mais que há ao redor. Somente assim é possível captar a atenção de potenciais clientes e, no intervalo de poucos segundos em que permanecem com olhos em sua publicidade, vender uma ideia.

Economizar na impressão é uma estratégia inteligente para reduzir custos e dirigir parte do investimento a peças mais ousadas e apelativa. E nisso a MeuPPT poderá sempre ajudar. Fale connosco e surpreenda-se com o quão pouco terá de gastar para acelerar suas vendas e resultados.

MeuPPT e ANPME – parceria com benefícios para associados

A MeuPPT, especializada no desenvolvimento de apresentações, websites e outros serviços de comunicação e design, firmou parceria com a ANPME. A Associação Nacional das Pequenas e Médias Empresas é um entidade cujo objetivo é o de representar e defender os interesses dos pequenos e médios empresários portugueses.

A ANPME oferece a seus associados apoio jurídico, fiscal e contábil gratuito, além de apoio no desenvolvimento de projetos e modelos de negócio. Com a parceria firmada com a MeuPPT, a ANPME passa também a estender benefícios imensos em serviços de comunicação para seus associados e parceiros.

Objetivo da parceria com a ANPME

A MeuPPT e a ANPME concluíram que os serviços em comunicação e design de qualidade prestados em território português para pequenas e médias empresas são, muitas vezes, caros e inacessíveis. Ao final das tratativas, ambas definiram que associados da entidade beneficiariam de um acordo que lhes fornecesse serviços de qualidade a um custo amigável. Pretende-se, a partir desse acordo, garantir que pequenos empresários portugueses possam apelar de forma mais eficiente ao público e enfrentar uma concorrência cada vez mais acirrada.

Dentre os muitos benefícios oferecidos a partir da união das duas entidades em prol do empresário, a MeuPPT dispôs-se a:

  • Oferecer a associados da ANPME um preçário diferenciado, com descontos exclusivos (AINDA MAIS BAIXOS QUE NOSSOS PREÇOS ATUAIS!!)
  • Apoiar a ANPME em suas estratégias de comunicação, colaborando no desenvolvimento das mesmas
  • Promover a ANPME como entidade líder no apoio a iniciativas de empreendedores de Portugal
  • Compartilhar conhecimento, experiência e know-how em comunicação e design com a ANPME e seus membros
  • Participar ativamente dos processos de modernização e apoio à competitividade dos empresários portugueses no cenário regional e global

Atendimento a necessidades especiais

Além dos serviços de web design e comunicação oferecidos a custo vantajoso, a MeuPPT recomenda a associação à ANPME. As iniciativas da entidade já beneficiaram milhares de empresários portugueses e podem ser decisivas no crescimento de seu negócio.

A MeuPPT oferece aos associados da entidade um atendimento diferenciado. Criámos websites de forma mais rápido, operamos junto a gráficas e fornecedores para conseguir melhores preços para membros e possuímos instrumentos informáticos modernos e simples para formações e comparticipação de conhecimentos.

Assim como a ANPME, a MeuPPT deseja apenas uma coisa: o sucesso de seus clientes e parceiros. A própria manutenção de nosso modelo depende, diretamente, do quão bem-sucedidos nossos clientes possam ser. Trabalhamos sempre de forma incessante para que os serviços que fornecemos estejam atualizados, em linha com referências de mercado e otimizados para aqueles que os utilizam.

Se você precisa de um trabalho em design, web design e comunicação eficiente e rápido, mas preocupa-se com os custos, o caminho está agora mais fácil.

Primeiro, ponha-se em contacto com a ANPME. Beneficie-se com a associação a uma das entidades de apoio empresarial que mais crescem em solo português, acedendo a vantagens que o colocarão muito à frente da concorrência. Uma vez associado, usufrua também de nossos serviços em caráter especial e exclusivo, contando connosco para qualquer problema ou dilema que poderá ter em seu cotidiano.

Esperamos por você e pelo seu sucesso!

 

Minion Pro e Open Sans

Combinando fontes em apresentações PPT

Combinar fontes de modo inteligente é um dos principais aspectos de design que diferenciam uma péssima apresentação de uma peça de primeira linha. Uma boa apresentação, assim como um bom website, possui combinações de fontes, estilos e tamanhos bem definidas. Em outras palavras: é preciso variar a forma com que os textos aparecem, cortando a monotonia e, às vezes, criando destaque sobre algum trecho ou passagem.

No Powerpoint, o tamanho das fontes também é um aspecto importante. Veremos alguns motivos do porquê os tamanhos influenciam até mesmo no modo com que o público interpreta os slides. De um modo geral, as mesmas regras de bom senso e aplicação de fontes usadas num PPT podem ser aplicadas em seu website. O problema é que, tanto em um quanto em outro, as pessoas parecem não dar atenção mesmo às mais básicas noções e ao bom senso.

Por isso mesmo, resolvemos postar algumas dicas para combinar fontes. Lembre-se de que elas não são regras absolutas, e podem ser dobradas. Entretanto, elas ajudarão você a escolher e compor melhor, ou mesmo a opinar em trabalhos desenvolvidos por profissionais (quem sabe por nós correto?).

Combinando fontes – o básico

Para começar, basta dizer que há duas dicas bastante básicas para combinar fontes: no caso de duas fontes distintas, escolher um com serifa e outra sem (calma, vamos explicar se você não sabe); e também usar versões e estilos diferentes de uma mesma fonte.

No primeiro caso, vamos lembrar o que é uma fonte serifada? As serifas são traços e segmentos que ocorrem nos finais das letras e caracteres, criando prolongamentos. É a “perninha” do A, ou os traços na base do M. Mas a imagem abaixo mostra isso melhor. Aqui, você nota as diferenças entre uma fonte SERIF e uma SANS SERIF.

Diferença SERIF e SANS SERIF

 

Pois bem, é bom criar combinações que incluam uma fonte serifada e uma sem serifa. Isso cria contraste dentro de uma apresentação ou website e permite que se dê destaque a algo em particular, ou que sejam diferenciadas informações distintas. As fontes não têm necessariamente de ser “parecidas”, mas é claro que algumas combinações se sustentam melhor do que outras.

Outra boa dica é a de não confundir o leitor com o tipo de sentimento e emoção que você deseja passar. Pense assim: há opções mais sóbrias, outras mais divertidas. Algumas sugerem flexibilidade, outras uma texto mais tradicional. Evite, ao menos de início, misturar o tipo de interpretação. Uma chamada em fonte mais sisuda dificilmente vai bem com um texto escrito numa fonte mais divertida.

Finalmente, é preciso padronizar tamanhos. Se os títulos são todos em 28px, mantenha-os nesse tamanho. Se o texto normal possui 18px, não mude essas dimensões conforme os slides avançam. Mentalmente, ao lermos qualquer coisa, nosso cérebro utiliza os tamanhos para determinar o tipo de informação. Se o texto diminui, o público pode tomar um texto importante como uma legenda, ou um título como um mero bullet point.

Manter dimensões dentro do padrão também ajudam você a criar um senso de hierarquia. O usuário não precisa ser informado a todo momento de que X é um subitem de Y ou vice-versa. O próprio tamanho da fonte, sozinho, dará essa informação ao público – e com isso você não precisa poluir seus sites e apresentações dando explicações demais.

Combinando fontes – selecionando classes

Apesar de haver manuais extensos de tipografia em português, quando selecionamos fontes de texto para design ou web design, é melhor mantermos as coisas em inglês. Na internet, você encontrará quatro tipos básicos de fonte: SERIF, SANS SERIF, SCRIPT e DECORATIVE. Cada um desses tipos possui subclassificações que podem ser úteis:

SerifSans SerifScriptDisplay
Old StyleGrotesqueFormalGrunge
TransitionalSquareCasualPsychedelic
NeoclassicalHumanisticHandwrittingGraffiti
Slab SerifGeometricBlackletterOthers
GlyphicNeo-grotesqueBrush Script

Há mais subtipos, dependendo de onde buscamos cada fonte. De qualquer modo, a tabela engloba e separa bem os grupos principais. Como regra básica, tentamos usar grupos diferentes em um par de combinações. Já os subtipos sugerem certos valores e interpretações extras. Por exemplo, uma fonte SERIF de um tipo “Old Style” irá transmitir um ar mais clássico, até mesmo antigo e rebuscado. Já uma “Slab Serif” possui um ar muito mais moderno, como veremos em alguns exemplos de pares de combinações logo adiante.

Fontes mono-espaçadas

Pois bem, há mais uma classificação de fonte que você encontrará com facilidade: as “Monospaced”. Essas fontes incluem vários estilos e tipos, com uma única característica em comum: cada caractere ocupa um mesmo espaço horizontalmente. Para entender isso, basta lembrar de uma máquina de escrever (onde as fontes eram mono-espaçadas). Fosse o caractere um “I” ou um “M”, ele tinha de ocupar um mesmo espaço no papel, pois as alavancas e hastes que batiam no papel e carimbavam as letras tinham o mesmo tamanho e largura.

Com isso, essas fontes possuem espaços desproporcionais – as letras “I” ou “L” minúsculo ficam muito mais distante dos caracteres ao lado, se comparadas a letras como “M” ou “G”. É possível chegar a ótimas combinações com essas fontes, mas até você produzir boas montagens, tente evitá-las, pois seus espaços desproporcionais causam desconforto ao leitor, especialmente em slides.

7 regras rápidas para combinar fontes

Poderíamos escrever laudas e mais laudas sobre tipografia e combinação, mas vamos manter as coisas objetivas para si. Separamos aqui 7 regras que podem ajudar você a escolher seus próprios sets de fontes, além das combinações que vamos oferecer em seguida:

  1. Considere o contexto. Tente evitar fontes alegres e com aparência infantil se o tema é mais sério e corporativo. Do mesmo modo, evite fontes retilíneas ou clássicas demais se o tema é mais divertido e ligado ao entretenimento.
  2. Considere a leitura. Fontes lindas, porém difíceis de ler, não são boas escolhas para apresentações e websites. Seu público precisa compreender rapidamente o que está escrito, e você não deve dificultar esse processo.
  3. Misture fontes de grupos diferentes. Fontes SERIF com fontes SANS SERIF, ou mesmo fontes SCRIPT com fontes SANS SERIF, ou fontes DISPLAY com outros grupos.
  4. Preocupe-se com o contraste. Uma fonte deve possuir uma boa diferenciação em relação à outra. Se você quer optar por fontes parecidas, é melhor usar estilos e pesos diferentes de uma mesma fonte: como parte do texto em negrito e parte em itálico “Thin”.
  5. Use “famílias” de fontes. Algumas fontes possuem versões SERIF, SLAB e SANS SERIF ou mesmo SCRIPT. Nesse caso, designers dessas fontes já as fizeram de forma complementar, e usá-las em conjunto é uma resposta fácil para seus problemas.
  6. Evite muitas fontes. Duas fontes bem escolhidas funcionam bem. Ao adicionar uma terceira ou uma quarta, as possibilidades de criar combinações ruins aumentam. Tente restringir o número de fontes e estilos usados e enriquecer seu conteúdo mais com base nas imagens.
  7. Use fontes “amigáveis”. Com isso queremos dizer fontes que estão presentes no Windows ou podem ser facilmente encontradas em qualquer dispositivo. Usar fontes exóticas demais pode gerar problemas de visualização ou até mesmo de impressão. De qualquer modo, softwares como o Powerpoint também possuem a opção de salvamento com a fonte utilizada – isso evita que seus clientes tenham as fontes substituídas ao ver uma apresentação, caso não a tenham em seus computadores.

Bem, claro que mesmo depois de ler este artigo, você provavelmente quer facilitar sua vida. Para ajudar, separamos algumas combinações de fontes prontas para você, que seguem nas imagens abaixo. Todas as fontes usadas são gratuitas para download ou podem ser encontradas em sua própria máquina. Clique nas gravuras para ver os nomes de cada fonte utilizada.

Todas as fontes usadas nos exemplos estão presentes no Google Fonts e podem ser baixadas gratuitamente, inclusive com suas “famílias” e todos os estilos disponíveis. Para baixá-las, basta clicar aqui.