Manual Básico para Designers PDF

MARKETING DE CONTEDO PASSO A PASSO!
Manual bsico
para designers
Os mais acessados do
Vitamina Publicitria sobre
Design
!
!
Manual bsico para designers: Os mais acessados do Vitamina Publicitria sobre Design!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
Manual bsico para designers: Os mais acessados do

Vitamina Publicitria sobre Design
Copyright 2014 Vitamina Publicitria
Todos os direitos reservados.
!
!
!
!
!
Sinta-se livre para compartilhar, republicar ou passar este livro pela internet Apenas no
altere o seu contedo, combinado? Obrigado!
!
!
!
!
!
!
!
!
!
!
!
!
!
vitaminapublicitaria.com.br
itamina
P U B L I C I T R I A
!
!
!
Contedo:
!
27 blogs que todo designer deve conhecer....05
53 colees de cones para Flat Design.....28
Gerador de Sombra Flat em Plano Longo (Long Flat Shadow Generator Psd)...66
36 recursos de Flat Design.........67
Como fazer uma ilustrao vetorizada do sketch at a arte nal.97
10 Tcnicas de Design para Fotos com Textos....105
Como car em alta no mundo do branding (mesmo com um oramento curto)..119
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
Introduo
!
!
Por Daniel Z. Chohfi
!
A sesso de Design sempre foi a mais acessada do Vitamina Publicitria.
!
Com artigos como 27 blogs que todo designer deve conhecer que chegaram a mais de
5.000 compartilhamentos somente dentro do blog e outros milhares nas redes sociais
que sobem a cada dia, criamos este Ebook resumindo o contedo de primeiro pra
voc levar para qualquer lugar.
!
!
Introduo ao Design
!
Temos certeza que voc ir tirar proveito das tcnicas e indicaes que reunimos aqui
para todos os designers, seja voc um iniciante ou expert neste ambiente
maravilhoso.
!
Boa leitura!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
27 blogs que todo designer deve conhecer
Este post acabou se tornando um dos mais compartilhados de todos os

tempos do Vitamina e no mais apenas os 26, 27 ou mais blogs que todo
designer deve conhecer.
Adicionamos todas as indicaes bacanas comentadas aqui no blog e nas

redes sociais e esta tornou-se uma lista com dezenas de boas indicaes.
Designers Brasileiros
Blog sobre dicas de design, eventos, colunas, tutoriais e assuntos gerais

relacionados ao mercado brasileiro.
!
!
!
!
!
!
!
!
Assuntos Criativos
!
Blog referncia na rea de Design e Publicidade.
!
100% Design
!
O 100% Design aborda variados assuntos e fonte de inspirao visual e

informao de qualidade com mais de 500 posts e 8.000 imagens.
!
!
!
!
!
!
!
!
!
!
!
!
!
!
Bons Tutoriais
!
!
!
!
!
!
Blog de Design com uma pitada de criatividade de qualidade, Inspiraes,

Ideias para Campanhas Publicitrias, Tutoriais Photoshop, Web Design e
muito mais.
Boteco Design
!
!
O Boteco Design teve incio como um grupo do Google de colegas da

faculdade que gostavam de divulgar e comentar notcias, trabalhos,
exposies, cursos, e tudo mais relacionado ao nosso curso, Design.
!
!
Choco La Design
!
Choco La Design um dos maiores veculos independentes de produo de

contedo relacionado a Design.
!
!
!
!
Clube do Design
!
!
!
!
!
!
Dicas para designers. Os melhores posts de design, em um s lugar.

Photoshop, Illustrator, CorelDRAW, Indesign e mais.
Criatives
Blog de Design e Criatividade com inspiraes, tutoriais, Web Design,

Eventos de Design, Dicas para Blogs e idias para Campanhas publicitrias.
!
Cutedrop
!
!
Visual e inspiracional. Blog sobre design, tecnologia, moda, culinria,

publicidade, msica e muito mais.
!
!
!
!
!
10
!
!
Design Blog
!
!
!
11
!
!
!
Blog de design grco e web com artigos exclusivos, dicas, teoria do design e
muito mais para voc aprender design.
Design Culture
O Blog Design Culture nasce para levar o melhor do Design, Cultura,

Comunicao, aes criativas e as mais diversas expresses de artes.
!
!
!
Design Fera
!
!
Blog Parceiro do DB e um dos maiores do Brasil.
!
!
!
!
!
12
!
!
Design In a Box
!
!
13
!
!
!
!
!
Blog com informaes sobre design grco, web design, ilustrao, arte,
publicidade, fotograa, moda e todas estas coisas bacanas que ns
adoramos.
Irresistveis
!
Inspirao para mentes criativas.
!
Design On The Rocks
!
Blog referncia quando o assunto Design, com layout e domnio nova, visa
crescer muito mais.
!
!
!
!
!
14
!
!
Vitamina Publicitria
!
!
15
!
!
!
!
!
Blog sobre Publicidade, Design, Marketing Digital, Redes Sociais, Tecnologia

e Jornalismo. Somos ns!
!
!
Designer Eects
!
!
O Designer Eects um blog que aborda tudo sobre o mundo do design, do

impresso a web, do analgico ao digital.
!
Designerd
!
Blog de Design e Web Design, com dicas para estudantes e prossionais,

inspiraes para designers, ilustradores e outros prossionais criativos e
muito mais.
!
!
16
!
!
Designine
!
!
17
!
!
O blog mostra, como contedo principal, campanhas publicitrias, design,

artistas e seus trabalhos, novidades e muita criatividade!
Des1gnOn
Blog voltado para estudantes, prossionais e pessoas em geral que curtem

design e artes. Na minha opinio, um dos blogs mais bacanas atualmente
voltados a design. Tambm um dos parceiros do Vitamina Publicitria.
LogoBR
!
!
18
!
!
respeitado e citado como referncia por estudantes, acadmicos e

prossionais quando se trata de branding.
!
!
Orange Design
!
A maior razo para a existncia do Orange Design divulgar o design e sua

prosso atravs de artigos, entrevistas com designers premiados e anlise
de produtos.
!
Paroxismo Records
!
Blog parceiro do Designers Brasileiros e trata sobre vrios assuntos.
!
!
!
!
!
!
!
19
!
!
Pixel Coee
!
!
20
!
!
!
Podcast bem humorado sobre design, propaganda, games, programao,

msica e muito mais.
!
Revelando Ideias
!
Blog dedicado inteiramente para os apreciadores de inovao, criao,

design, fotograa, ilustrao, animao e muito mais.
!
!
Sala7 Design
!
O Sala7 um blog feito por estudantes de design que resolveram juntar o

interesse, estudo, paixo e vontade bloggar, tudo em um s lugar.
!
!
!
!
!
!
21
!
!
Caf Com Galo
!
!
22
!
!
!
Blog muito bacana sobre design, entretenimento, fotograa e marketing.
!
De Volta ao Retro
Lab Criativo
!
!
23
!
!
DESIGNICES
!
!
Design & Chimarro
!
!
24
!
!
LOGO.BR
abduzeedo.com / abduzeedo.com.br
!
!
25
!
!
A List Apartlist
Smashing Magazine
!
!
26
!
!
Desafio Criativo
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
27
!
!
53 colees de cones para Flat Design
2013 foi o ano do Flat Design e milhares de colees foram criadas pelos mais
variados designers. O Mashable fez uma matria que reuniu 53 colees de cones
lindos para Flat Design e eu gostaria de compartilhar com nossos queridos leitores
para que possam utilizar em seus projetos pessoais e comerciais de alta qualidade.
O Mashable um dos, se no o mais famoso portal de marketing digital do mundo, e

cobre as principais notcias de mdias sociais sobre temas como Facebook, YouTube,
Gmail, Twitter, Amazon, Pinterest e muito mais.
!
!
1. FlatIcons.co
!
!
!
!
28
!
!
O FlatIcons.co oferece cones lindos disponveis PSD, SVG, EPS e em quatro tamanhos
diferentes. Como so vetores, permitem a ampliao perfeita para qualquer tamanho
mantendo a qualidade.
!
2. Linecons
!
O Linecons do DesignModo, uma das principais referncias em at design.

Disponibiliza cones gratuitos totalmente escalveis em vetor com estilos de contorno.
Cada cone est disponvel em HTML, CSS, PDF, AI, PSD, PNG e SVG.
!
!
29
!
!
3. FlatIcons.net
FlatIcons.net um fabricante de cones, permitindo que voc crie seus prprios

cones at livres de royalties, que voc pode vender, doar ou usar. Para comear,
basta escolher um cone dos 2500 disponveis e personaliz-lo.
!
!
30
!
!
4. Flatalicious
Aqui voc vai encontrar um conjunto bem concebido de 48 cones at, disponveis em
formato PSD. So cones em vetor totalmente escalveis, que podem ser
redimensionados para qualquer exigncia. Eles so perfeitos para projetos web,
aplicativos ou infogrcos.
!
!
5. IconShock
!
Esta uma coleo gigantesca com mais de 3.600 cones no estilo at, que podem ser
utilizados em projetos pessoais e comercial. Criados em um estilo suave de cor
vibrante, e disponveis em trs formatos, h cones aqui para atender a qualquer
exigncia.
!
!
!
!
!
31
!
!
6. Pixeden
!
!
32
!
!
Esta coleo a minha favorita. A Pixeden oferece uma coleo completa de cones
at criados em um estilo minimalista com detalhes nicos. Cada cone est disponvel
em vetor e PSD.
7. Program Icons
Criado pela equipe de design da Applove , esses cones so muito bem trabalhados e
projetados, com requintada ateno aos detalhes. O site apresenta os cones de
programas como o Adobe Photoshop, iTunes, Chrome e Firefox, entre outros.
!
!
33
!
!
8. Meteocons
!
!
Meteocons um conjunto at com mais de 40 cones disponveis em PSD, CSH, EPS,

SVG, Desktop Font e formatos de fontes web. Eles podem ser utilizados em projetos
pessoais e comerciais, e a Meteocons Font fornecida em formatos TrueType e
OpenType, completo com um kit @ font-face.
!
!
34
!
!
9. Flat Icons PSD
Este um conjunto de 20 cones at coloridos em formato vetorial PSD, disponveis

no tamanho de 128 x 128 pixels, e inspirado por cones do Google. So camadas
vetoriais, para que eles possam ser facilmente editadas e livres para uso pessoal e
comercial.
!
!
!
!
35
!
!
10. Flatties
Flatties um super conjunto legal de cones at. Todo o conjunto trabalhado a partir
de formas vetoriais em 48 x 48px, e vem em um PSD organizado, AI e PNG separados.
!
!
!
!
36
!
!
11. Stroke Line Icons
Aqui est um outro conjunto de cones simples na linha da Pixeden, disponveis em

PSD, EPS, AI e PNG.
12. Long Shadow Social Icons
!
!
37
!
!
!
!
!
Estes cones lindos de mdia social so projetados em um estilo de sombra, e esto

livres para projetos pessoais e comerciais. Eles esto disponveis em tamanhos de 32,
48, 72, 128 e 256px.
!
!
13. Flat Icons Jan Dvok
Este pacote de cones at do designer Jan Dvok inclui 24 cones disponveis como
um download gratuito em PSD, para fcil personalizao.
!
!
!
!
!
!
!
!
!
38
!
!
14. Flat Icons Freebie
Esta coleo de cones at do designer Seevi Kargwal so maravilhosamente

trabalhados com um estilo nico. So seis cones que incluem o Safari, Instagram e
bate-papo, disponvel como um PSD livre.
15. Flat Icons Pierre Borodin
!
!
39
!
!
Uma seleo de cones at do designer Pierre Borodin, com smbolos de interface,

como um relgio, calendrio, notas e e-mail. Tambm est disponvel um outro
conjunto de cones lisos de Borodin, como um PSD livre.
16. Colorful Flat Icons
Michael Dolej projetou um conjunto de cones at coloridos e livres, com cones de

aplicativos conhecidos como Chrome, Spotify, Skype, Evernote e muito mais.
Disponvel em formato PSD.
!
!
!
!
!
!
!
!
!
!
!
40
!
!
17. Flat Social Media Icons
Este um conjunto livre de 35 belos cones em ambos os formatos PSD e PNG, que
podem ser utilizados em projetos pessoais e comercial. Os cones incluem Dribbble,
Facebook, Google, HTML5, Twitter e muito mais.
18. Flat Social Icons
!
!
!
41
!
!
Conjunto de 16 cones at da Pixeden, disponvel como um PSD livre. Cada cone

projetado com um efeito de sombra longa, com o PSD facilmente editvel. O conjunto
inclui os principais cones de mdia social, incluindo Twitter, Behance, LinkedIn,
Dribbble e muito mais.
19. Flat UI
O kit de UI at da Designmodo inclui uma seleo de cones at para os principais

elementos da interface, incluindo um calendrio, chat, compras, relgio e lista de
tarefas. Com certeza um dos melhores desta lista.
!
!
!
!
!
!
!
!
42
!
!
20. Metro UI Icons
Inspired by the at Windows 8 style, this huge set includes over 725 icons, and
includes icons for applications, browsers and operating systems. All icons are also
available in 256-pixel .ico format.
!
!
21. Flat Icons Buatoom
!
!
43
!
!
!
Inspirado no estilo at do Windows 8, este enorme conjunto inclui mais de 725 cones
para aplicativos, navegadores e sistemas operacionais. Todos os cones tambm esto
disponveis em 256px. Formato ico.
!
!
22. Flat PSD Freebie Alberto Valentin
Estes pequenos cones deslumbrantes do estilista Alberto Valentin esto disponveis

em formato PSD. Eles seguem o estilo at perfeitamente, com grande uso de cores
brilhantes e incluem chat, iMac, cones de relgio e muitos outros bacanas.
!
!
!
!
!
!
!
44
!
!
23. Flat Social Icons Jorge Calvo
Este um grande conjunto de cones sociais minimalistas livres do designer Jorge

Calvo, pronto para uso em projetos de impresso e web. Eles esto no formato EPS,
so totalmente escalonveis e baseados em uma grade para resultar em uma
preciso extrema. Tambm est disponvel a verso pronta web em HTML, em CSS3
animado!
!
!
!
!
!
45
!
!
24. Flat Icons Dan Vineyard
Estes 12 cones at livres no formato PSD, do designer Dan Vineyard, podem ser
usado no trabalho pessoal e comercial. O conjunto inclui cones de perl, zoom, lixo,
cones de bate-papo, cones de pasta e muito mais.
25. Flat Program Icons Alexander Schultz
!
!
46
!
!
!
Alexander Schultz desenvolveu este belo conjunto de cones de programas,

disponveis em formato PSD, com cones para muitas aplicaes importantes,
incluindo o Adobe Photoshop, Illustrator e Dreamweaver, entre outros.
!
!
26. Publicons
De Joshua Sortino, Publicons uma coleo crescente de cones at. Enquanto

trabalhava em projetos de editor, Joshua se cansou de recriar cones para plataformas
que normalmente no so includos com conjuntos de cones.
27. Flat File Icons
!
!
47
!
!
!
Um conjunto Premium, que consiste em uma coleo de estilo at, cones de arquivos
baseados em vetor. Eles so super simples e podem ser usado em conjunto com
qualquer tipo de cone ou texto. As cores tambm so facilmente editvel.
!
!
28. Flat UI Kit PSD Martin Knize
Um extenso pacote de cones at do designer Martin Knize, que inclui mais de 150
cones em formato PSD. Knize tambm fez outros dois pacotes que esto disponveis
para download.
!
!
!
!
!
!
!
!
48
!
!
29. Plex Icon Set
Plex um pacote de cone at disponvel apenas para uso pessoal, e inclui mais de
119 cones em formato PNG, que vo desde Chrome, Firefox, calculadora, e HTML
para VLC, YouTube e Twitter.
!
!
!
!
!
!
49
!
!
30. Cosmo Mini Icons
Esta uma verso at dos cones Cosmo fornecidos pelo IcoJam, e inclui uns
impressionantes 1.262 cones em 40 x 40px. Formato PNG.
31. Flat Icon Set Stafie Anatolie
!
!
50
!
!
Este um conjunto excelente de cones maravilhosamente projetados em at design

e formato PSD, de Stae Anatolie. Os cones incluem o Google Chrome, Gmail,
YouTube, Apple e muito mais.
32. Free Flat Icon Set Barry McCalvey
Este um conjunto em escala de cinza de cones do designer Barry McCalvey, num

estilo simples, com um calendrio, relgio, cmera, calculadora e muito mais.
33. Flat Icons Freebie Seevi Kargwal
Aqui est outro belo conjunto de cones at do designer Seevi Kargwal, que pode ser
baixado gratuitamente em formato PSD. O conjunto inclui uma calculadora,
calendrio, notas, cmera e muito mais.
!
!
51
!
!
34. Social Icon Set Stafie Anatolie
!
!
52
!
!
!
Este um outro cone at denido pelo designer de Stae Anatolie, com logos e
smbolos dos mais populares sites de mdia social, como Dribbble, Facebook, YouTube
e outros.
!
!
35. Flat Social Icons Thiago Marques
Mais um brasileiro da lista, foi originalmente criado para um projeto de cliente. Estes
cones sociais do designer Thiago Marques incluem vrios cones sociais e cartes de
crdito populares.
!
!
!
!
!
!
!
53
!
!
36. Flat Icons Visual Creative
!
!
Este um conjunto namente trabalhado de cones at do estdio Visual Criativo, em

formato PSD com 512px. Os cones incluem um calendrio, boto de mdia, dicionrio
e sacola de compras.
!
!
!
54
!
!
37. Eldorada Mini
Eldorado Mini uma verso gratuita de cones e inclui mais de 1262 PNGs 40 x 40px.
Estes cones esto disponveis para uso em projetos pessoais e comerciais.
38. Flat Credit Cards
!
!
55
!
!
!
!
Aqui est uma seleo de cinco cones de carto de crdito no estilo at do designer
Ian Silber, usando uma fonte Open Sans para a consistncia. O conjunto inclui vrios
grandes fornecedores do carto de crdito, incluindo American Express, Visa e
Mastercard.
39. Circle Flat Icons
Conjunto de 24 cones de alta qualidade, retina e prontos para mdias sociais, que tm
formas circulares e apresentaes vibrantes, combinando duas cores. Eles esto
disponveis em formato PNG em quatro tamanhos diferentes: 256 x 256px, 128 x
128px, 64 x 64 e 32 x 32px.
!
!
!
!
!
!
!
!
!
!
56
!
!
40. Flat Social Media Icons Nathan Brown
Um conjunto de 30 cones at de mdia social em formato vetorial, disponvel como

um download gratuito em PSD. Os cones incluem plataformas populares, como o
WordPress, Twitter, Skype, Evernote, Dropbox e muito mais.
41. Flat Icon Set Design Deck
!
!
57
!
!
!
Estes cones at podem ser baixado como um conjunto gratuito de 20, ou como um
conjunto que inclui mais de 800 cones no total. Todos so nomeados e agrupados em
um arquivo PSD, que inclui dimenses de 32 x 32px a 512 x 512px.
42. Simple Flat Icons Graphics Fuel
Coleo com 20 cones at de mdias sociais para as suas necessidades de

compartilhamento social. Os cones so criados em 114 114px, e podem facilmente
ser redimensionados e utilizado para dispositivos mveis ou para a web. Criado com
camadas inteligentes, o arquivo PSD pode ser editado facilmente.
43. Free Flat Icon Pack Nathan Brown
!
!
58
!
!
!
Este pacote de cones de Nathan Brown contm 25 cones at em vetor em um

arquivo PSD. O pacote tem um estilo nico e contm cones para o Vimeo, Calendar,
Facebook, Campre, e-mail e muito mais.
44. Flat Icons Mike Clarke
Este um conjunto de nove cones planos do designer Mike Clarke, que est
disponvel como um download gratuito PSD. Os cones incluiem uma pasta, e-mail,
chat, downloads, bloco de notas e muito mais.
!
!
!
!
59
!
!
45. Flat Icons OthMane Machrouh
Othmane Machrouh desenvolveu esta coleo de seis cones at, que pode ser
baixado em formato PSD. Machrouh tambm criou um outro conjunto de cones at
que esto disponveis de forma gratuita.
46. Flat Custom CS Icons
!
!
60
!
!
!
!
!
Este um conjunto de 15 cones personalizados da Adobe Creative Suite, do estilista

Tom Newton. Eles esto disponveis em formato icns. Tambm tem at um vdeo para
mostrar como alterar os cones para o estilo at, bacana heim!
47. Flat Icon Pack Martin Knize
Este pacote de 50 cones at do designer Martin Knize vem em vrios tamanhos, de

48 x 48 pixels at 512 x 512 pixels, e est disponvel em formato PNG. Os cones Flat
apresenta mais 45 novos cones, e denitivamente vale a pena baixar.
!
!
48. Free Social Media Icons Allan McAvoy
!
!
Coleo com 32 cones de estilo at do designer Allan McAvoy, disponveis em

formato eps., e cada cone facilmente escalvel e editvel. O conjunto inclui muitas
!
!
61
!
!
plataformas populares, incluindo Dribbble, Paypal, Flickr, Dropbox, Twitter e muito

mais.
49. Flat Vector Icons Jared Kennedy
!
!
62
!
!
!
Do designer Jared Kennedy, esta uma seleo de 12 cones em vetor disponvel

como um download gratuito em PSD. Os cones tm um toque retro, e apresentam
um jogador de lme, cmera polaroid, juntamente com os cones mais tradicionais,
como o iPhone e bate-papo.
!
!
50. Flat Polygon Icons
!
!
Um pacote de cones do designer Wahid Anggara, seleo apresenta 15 cones de

mdia social belamente projetados em forma de polgono, incluindo Twitter,
Facebook, YouTube, Tumblr e outras opes populares.
!
!
!
!
!
!
63
!
!
51. Hex Icons Pack
Este um grande pacote de cones do designer Martin Knize, com mais de 170 cones,
alm de 45 cones de jogo. H uma grande ateno ao detalhe, com cada cone
projetado dentro de uma forma hexagonal. Voc pode solicitar cones adicionais a
serem includos em pacotes futuros.
!
!
!
!
64
!
!
!
52. Flat Icons Pack Jagjeet Singh
Este um pacote de 20 cones at coloridos em um arquivo PSD de vetor, do designer

Jagjeet Singh. Os cones so em 128 x 128 pixels de tamanho, inspirados nos cones
do Google e de tendncia de design at. So vetores totalmente editveis.
53. Free Flat Icons Nikki Hampson
!
!
65
!
!
!
Conjunto com nove cones at, do designer Nikki Hampson, so livres para uso
pessoal e comercial. Cada um foi muito bem trabalhado, e a coleo inclui cones para
RSS, favoritos, mapas e muito mais.
!
!
Gerador de Sombra Flat em Plano Longo (Long Flat Shadow

Generator Psd)
E pra nalizar com chave de ouro, segue o link para o download de um .psd incrvel
pra voc criar os seus cones com o conceito long shadow, da Pixeden.
!
Download
!
!
!
!
!
!
!
!
!
!
66
!
!
36 recursos de Flat Design
Mais um artigo do Mashable que vale a pena traduzir para compartilhar com nossos
leitores do Vitamina sobre Flat Design.
Em contraste com a concepo do skeumorsmo, design plano, ou at design centrase em formas simples, cores e tipograa para enfatizar a clareza e a facilidade de uso.
Era um termo cunhado por Allan Grinshtein da LayerVault em seu post A Era do Flat
Design, publicado no ano passado. O lanamento do iOS 7 provou que o at design
no mais uma moda passageira, mas com certeza, um passo a frente.
O achatamento de estilo signica simplicar os elementos da interface, remoo de

elementos estranhos e decorao como relevos, gradientes e texturas para criar
um design fresco (no bom sentido), limpo, e concentrado na hierarquia dos elementos
do layout.
Para ajudar voc a comear com o at design, o Mashable compilou 36 Kits de UI

em .PSDs de alta qualidade, cada um com uma variedade de componentes de
interface e elementos para a utilizao em seus projetos.
H qualquer outro kit de UI de at design que voc recomendaria? Se sim, por favor,
compartilhe o link nos comentrios abaixo, com os nossos leitores.
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
67
!
!
1. Flat UI Pro
Flat UI Pro baseada no Twitter Bootstrap e desenhada em um estilo simples,

contendo um grande nmero de componentes bsicos, cones e smbolos. O kit inclui
tambm uma verso em PSD.
2. Flat UI Free
!
!
68
!
!
Flat UI Free um recurso livre da Designmodo, e contm os principais elementos

bsicos de uma interface web para utilizao.
3. Flat Design Toolkit
!
!
Um kit projetado pelo Freepik, contm todos os componentes essenciais de interface

de usurio, fornecendo grcos e pers de usurio.
!
!
!
!
!
!
!
!
!
!
69
!
!
4. Blog/Magazine Flat UI Kit
Este um kit IU livre visando blogs e revistas, que inclui uma grande variedade de
componentes que podem ser usados para criar Websites limpos e coloridos.
!
!
!
5. Vertical Infinity UI Kit
!
A Vertical Innity UI Kit contm uma grande variedade de componentes, a partir de

menus, dropdowns, widgets, botes e players de mdia para formas e paginao. Ele
tambm otimizado para telas retina.
!
!
!
!
!
!
70
!
!
!
!
6. Flat UI Kit Riki Tanone
!
Este um kit at de UI em PSD desenhado por Riki Tanone, com um widget de

calendrio, mapas, etiquetas e muito mais.
!
!
!
!
71
!
!
!
!
7. Flat UI PSD Devin Schulz
!
Este Kit UI de Devin Schulz possui um conjunto criativo de componentes, incluindo

navegao, caixas de entrada e botes.
!
!
72
!
!
!
!
8. Metro Vibes UI Kit
Vibes Metro um premiado Kit de UI desenhado e disponvel no PixelKit, que presta

ateno aos mnimos detalhes e s caractersticas das belas cores.
!
!
!
9. Flat UI PSD Riki Tanone
!
!
Este kit uma outra oferta gratuita de Riki Tanone, com mais componentes de
interface de usurio, incluindo um player de mdia e pers de usurio.
!
!
!
!
!
!
!
!
73
!
!
10. Featherweight Flat UI Kit
!
!
74
!
!
Um kit de UI abrangente de Sarah Justine, onde cada elemento em vetor, otimizado

para retina e distribudo atravs de camadas. Os texto e as cores so facilmente
editveis, com projetos que so completamente livres para uso pessoal ou comercial.
11. Flat Web UI Kit
!
!
!
75
!
!
Este um pacote GUI que inclui o projeto de elementos de formulrio, controles,

widgets, formas e loaders.
12. Flat UI Kit Sebastiaan Scheer
Este um Kit UI de inspirao que gratuito para download como um PSD, e vem
com widgets de tempo, um media player e elementos de navegao.
!
!
13. Flat UI Kit Hseyin Yilmaz
!
Inspirado Kit de UI de Hseyin Yilmaz, este kit tem os principais componentes de

interface do usurio, incluindo pers, players e formas de mdia.
!
!
!
!
!
!
!
76
!
!
14. Square UI
!
!
77
!
!
O Square UI um dos meus preferidos. um pacote de interface de usurio premium

incluindo um conjunto de componentes excelentes, ideal para prototipagem rpida.
H tambm uma verso gratuita disponvel para download que excelente. Use!
!
!
15. Flat UI Kit Jamie Syke
Um Kit UI colorido de Jamie Syke, vem com uma interessante mistura de

componentes e imagens e est disponvel como um PSD livre.
!
!
16. Flat Beach GUI
!
Uma UI pastel temtica de Mike Clarke, est disponvel como um PSD gratuito e inclui
botes, widgets e componentes de mdia.
!
!
!
!
78
!
!
17. Flat UI Kit Zachary VanDeHey
!
!
79
!
!
!
!
A UI Kit de vero inspirada de Zachary Vandehey, disponvel como um arquivo gratuito

em Adobe Illustrator, que apresenta widgets, botes, pers, cones e um media
player.
18. Design Shock Flat GUI
GUI em at design disponvel em verso premium ou gratuita, com um enorme

nmero de componentes e elementos.
19. UI Pixels Flat UI Widget
Este um kit UI at sensvel que usa apenas duas cores, por isso extremamente fcil
de editar e vem cheio de widgets e componentes de interface. Est disponvel como
um PSD livre.
!
!
!
80
!
!
!
20. Tempees Flat UI Kit
!
Tempees oferece um kit at de UI para suas aplicaes ou sites, que inclui vrios
estilos de botes, cones de menus, blocos de perl e widgets. Est disponvel como
um download gratuito em .PSD.
!
!
!
81
!
!
!
!
!
!
!
21. Eerste Flat UI Kit
!
Criado pela Design Your Way, Eerste inclui vrios elementos grcos, incluindo menus,
pers de redes sociais, formulrios de comentrios, tabelas de preos, players de
vdeo, calendrios e muito mais.
!
!
!
!
!
!
!
!
82
!
!
!
22. Metro UI Kit
A Metro UI Kit outra UI excelente, inspirada pelo Microsoft Windows que apresenta
estatsticas, grcos, calendrio, menus e estilos de pesquisa.
!
!
!
83
!
!
23. Flat UI Kit Abhimanyu Rana
Um kit UI maravilhosamente concebido a partir de Abhimanyu Rana presta muita

ateno aos detalhes e cores, com widgets, players de mdia e pers de usurio.
!
!
84
!
!
24. Flat UI Andy Law
Esta impressionante UI em .PSD est disponvel para download gratuito. Possui um

sistema at de cor, estilo, media player, Widgets e muito mais.
!
!
85
!
!
25. UI Kit PSD Piotr Kwiatkowski
A UI Kit lindamente projetada de Piotr Kwiatkowski est disponvel como um PSD

grtis e tem widgets, grcos, galerias de arte, mapas e um carrinho de checkout.
!
!
!
!
26. Simple & Bold UI Kit
!
Elementos de interface do usurio em um kit PSD livre, com estados de boto, feeds
de notcias, media players, menus de lista, painis, widgets de calendrio e muito
mais.
!
!
!
!
!
!
!
86
!
!
!
!
!
!
27. Flat UI/UX Kit Asim Craft
!
!
Um Kit UI at de Vectornpixel, que contm campos de formulrio, botes de

navegao, fotos e muito mais. Ele est disponvel como um download gratuito
em .PSD.
!
!
!
!
!
!
!
!
!
!
87
!
!
!
!
28. Flat UI Kit PSD Andreea Nicolaescu
!
Este kit de elementos de interface do usurio de Andreea Nicolaescu tem menus,

players de mdia, botes, forms, calendrios e listas suspensas, disponvel como um
download gratuito em .PSD.
!
!
!
!
!
!
!
!
!
!
!
!
88
!
!
!
!
!
29. E-Commerce Flat UI Kit
!
Est disponvel como um download gratuito em .PSD e contm vrios elementos de

interface do usurio para uso em projetos de comrcio eletrnico, os quais so
facilmente editveis.
!
!
!
!
!
!
!
!
!
!
!
89
!
!
!
!
!
30. Flat UI Elements Andrew Beckwith
!
Elementos de interface do usurio em alta qualidade com widgets e componentes

maravilhosamente concebidos com grande ateno tipograa.
!
!
90
!
!
!
!
!
!
!
!
!
!
91
!
!
31. Polaris UI Kit
Polaris UI Kit um belo conjunto de componentes de interface do usurio, que inclui

caixas de edio, botes de navegao e widgets para uso em seus projetos de
design.
!
!
!
!
92
!
!
!
32. Free Flat UI Kit Visual Creative
!
Este um kit UI livre da Creative Visual que possui um player de mdia, botes, um
relgio, formulrios de login e pers de usurio. Disponvel como um download
em .PSD.
!
!
93
!
!
!
33. Flat UI Kit PSD Pro Web Design
!
Disponvel gratuitamente e inclui navegao, painis de usurios, grcos de rea,

grcos de barras, grcos de segmento circular, elementos de entrada, sliders,
interruptores, botes e reas de widget.
!
!
!
!
34. Dark UI Kit Hseyin Yilmaz
!
Outro kit UI de alta qualidade de Hseyin Yilmaz, caracteriza um projeto escuro, e

inclui botes de mdia social, widgets, formulrios de contato e navegao.
!
!
!
!
!
!
94
!
!
35. Super Clean Flat UI Kit
!
!
95
!
!
!
Limpo, bem organizado Kit UI de WeCreate, disponvel como um download gratuito

em .PSD. facilmente editvel, contendo vrios dos principais componentes de
interface.
36. Flat UI PSD Alexandre Crenn
Simples e bem organizado kit de Alexandre Crenn, que tambm apresenta um

wireframe de iPhone at.
!
!
E assim nalizamos as indicaes de 36 recursos para at design.
!
Bom proveito!
!
!
!
!
!
96
!
!
!
Como fazer uma ilustrao vetorizada do

sketch at a arte final
O que uma ilustrao vetorizada?
!
!
Vetores so demais! Ao contrrio da raster art (que uma imagem feita de pixels,
como um JPG), o vetor feito de curvas, caminhos e pontos. Suas propriedades, como
cor, preenchimento e contorno, podem ser facilmente editadas.
A melhor parte sobre vetores o fato de serem incrivelmente teis. Os designers no

tm que se preocupar com dimenso em pixels ou com resoluo, uma vez que os
vetores so construdos a partir de caminhos e pontos e podem ser redimensionados,
sem preocupao com perda de detalhes.
Um nico vetor pode ser usado para uma miniatura na tela do computador, ou para
ser impresso em um outdoor, com a mesma qualidade.
!
!
!
!
!
!
!
97
!
!
Mos na massa!
Fazer arte em vetor fcil. Voc ver que a possibilidade de editar as linhas e formas
permitir que voc trabalhe rapidamente, gastando seus esforos mais no lado
artstico do que no tcnico.
Este tutorial ir mostrar um passo-a-passo para se fazer uma arte vetorizada, mas no
se trata da nica maneira. Ento, sinta-se livre na utilizao de todas as tcnicas
apresentadas aqui.
O Adobe Illustrator o software mais popular na criao de vetores. Ele usado por
prossionais e amadores e muito verstil. No entanto, voc ver que o Illustrator
no o programa mais fcil logo no incio.
Mas, brincando com as ferramentas e fazendo alguns testes, possvel aos poucos
se aprimorar.
!
!
!
!
!
!
!
98
!
!
Parte 1: Comece com um esboo
!
Desenhe e escaneie
!
Sketches so importantes. Voc tem uma ideia na cabea, mas voc no sabe como
ele vai se concretizar at que comece a desenhar. Sua primeira ideia raramente a
sua melhor criao, ento fazer vrios esboos a melhor maneira de testar e
descobrir boas ideias.
Voc pode fazer o seu desenho como quiser: pode ser escaneando ou fotografando
um modelo, desenhando em um tablet ou usando outro programa como o
Photoshop. Tudo o que importa que voc faa um esboo e aplique-o no ilustrador,
para poder us-lo como um guia para fazer o vetor.
!
!
!
!
!
!
!
99
!
!
Sugestes de ferramentas
A Brush uma ferramenta de desenho sensvel presso (que pode

se usada como pincel).
A ferramenta Pencil para o caminho bsico de desenho / edio.

til para fazer formas.
A Pen Tool pode criar caminhos ponto a ponto, em linhas retas ou

curvas.
!
A Select Tool serve para selecionar os objetos.
!
!
A Direct Select Tool para selecionar e editar pontos individuais em

seus caminhos.
!
!
Parte 2: Desenhando suas linhas
!
!
100
!
!
!
Depois de ter o esboo no Illustrator, podemos comear a trabalhar. Faa o seu

esboo transparente usando conguraes de opacidade do Illustrator (no Control
da paleta, na parte superior ou utilizando a paleta Transparency).
Mantenha o seu trabalho artstico organizado, usando camadas. Eu acho que o

melhor para manter o seu esboo transparente e para criar camadas de cada fase de
criao de sua arte.
Tire suas linhas usando a ferramenta Brush ou a ferramenta Pencil. Como j

indiquei, o Brush recomendado porque sensvel presso (se voc estiver
trabalhando com um tablet), e mostra as linhas como voc est desenhando.
A ferramenta Pencil tambm tem alguns usos, tais como desenhos de linhas
mecnicas e uniformes.
!
!
Parte 3: Adicionando cores
Na camada abaixo de sua linha de trabalho, vamos comear a adicionar cor para
preencher nossas formas.
Esta uma etapa importante, pois aqui que voc vai decidir o esquema de cores da
sua imagem como um todo.
Voc pode fazer alteraes em suas cores a qualquer momento, mas muito mais
simples de fazer alteraes nesta fase inicial, antes que voc tenha ido longe demais e
j acrescentado muitos detalhes.
!
!
101
!
!
Eu tambm gosto de mudar a cor da minha linha de trabalho para complementar as

cores de base que eu estou escolhendo (s trabalhar com as linhas do desenho na cor
preta chato).
!
Existem muitos mtodos que voc pode usar para fazer suas reas de cor.
!
No importa como voc opta por adicionar a sua cor, pois no h maneira errada
para o trabalho, desde que que do seu gosto!
Voc pode colorir seu desenho usando a ferramenta Brush. Usando diferentes tipos
de pinceladas, permite criar muitos efeitos.
Ou voc pode desenhar mo formas grandes e planas, usando a ferramenta

Pencil. Esse tende a ser o mtodo mais rpido.
!
!
!
!
!
!
!
102
!
!
Parte 4: Adicionando detalhes de cor
Agora em uma camada acima de sua camada cor de base (mas abaixo da camada de
linha de trabalho), vamos adicionar alguns detalhes de cor.
Usando a ferramenta Brush dentro de suas reas de cor, voc pode pintar em
alguns tons mais escuros e mais leves para adicionar sombras e luzes.
!
hora de brincar com as cores e traos para criar o efeito de profundidade!
!
Se voc estiver usando um tablet de desenho sensvel presso, voc pode usar os
traos nos e grossos para pintar facilmente nas formas exatas que voc precisa.
!
!
!
!
!
!
!
!
!
!
!
103
!
!
Feito!
Sua obra-prima est pronta! Se voc chegou at aqui, voc deve ter uma criao
vetorizada, que est bem organizada em camadas, com formas facilmente editveis.
Este tutorial foi concebido para ser geral, ento eu no entrei em muitos detalhes
sobre cada etapa, apenas uma rpida viso geral do processo de abertura do
esboo arte nal. O Illustrator no o programa mais fcil de aprender, mas se voc
tiver um tempinho, pode descobrir um novo talento.
!
Texto e ilustraes: Doodle Machine Andr Jolicoeur (www.doodlemachine.com)
!
Fonte: iStock by Getty Images (www.istockphoto.com.br)
!
!
!
!
!
104
!
!
10 Tcnicas de Design para Fotos com Textos
Uma das melhores tcnicas que voc pode ter atualmente em seu arsenal criar
artes que possuam fotos com texto. Esta prtica est sendo utilizada em uma
quantidade absurda de blogs e aes publicitrias. Porm, pode ser uma das
habilidades mais difceis de fazer da forma correta.
necessrio ter a foto certa, um olhar de fotgrafo e saber o que se deseja atingir pra
tirar o mximo das tipograas em fotos. Se voc est disposto a tentar o desao, aqui
vo 10 dicas pra fazer o seu design acontecer:
1. Adicione Contraste
!
!
!
!
!
!
!
!
105
!
!
O texto precisa realmente ser legvel. O maior desao pode estar na harmonia do
contraste do texto com a foto. Tenha certeza que as cores do texto possuem contraste
suciente para se destacarem com o fundo da foto. Se a foto clara, trabalhe com
uma tipograa escura.
O contraste tambm pode dizer respeito ao tamanho do texto com o que est
acontecendo na foto. O texto tem que trabalhar a favor de, e no contra, a imagem.
No exemplo do site da Pack acima, a imagem grande o texto no, o que d o
contraste necessrio pra imagem funcionar.
!
!
2. Faa o Texto Parte da Imagem
!
!
!
As vezes acontece de voc ter a sorte de conseguir mesclar a imagem com o texto.
Pode ser difcil conseguir atingir esta ttica e s funciona em alguns casos, mas
quando acontece mais fcil atingir este resultado com uma imagem simples e
pouco texto, como no exemplo da Mclaren acima, ou em uma foto que j seja
realizada com o texto embutido.
!
!
!
106
!
!
!
!
!
!
!
!
107
!
!
3. Siga o Curso da Imagem
!
!
108
!
!
!
!
Trabalhar a uidez, o curso da imagem, uma das dicas mais importantes ao

trabalhar textos em fotograas. Voc precisa de palavras que encaixem de uma forma
lgica na foto. E por favor, no coloque texto sobre as partes importantes da imagem,
como a ao principal da foto, rostos ou no produto principal que voc est tentando
apresentar.
Uma dica bacana aplicar o texto onde o sujeito da foto est olhando. Procure por
espaos vazios. Os exemplos acima mostram os personagens com uma linguagem
corporal que est totalmente dentro da foto. Planeje a sua ao, seja um publicitrio e
produza a foto sabendo onde o texto ser implementado.
4. Borre a Imagem
Uma das ferramentas mais simples e ecientes que voc pode ter no seu kit de
design borrar partes da imagem para destacar o texto. Borrar a imagem ajuda o
!
!
109
!
!
texto a se destacar e adiciona foco ao conceito principal da mensagem, como o site da

Wallmob acima. O desfoque do fundo acrescenta clareza ao texto e produto para os
usurios do site.
5. Coloque o Texto em uma Caixa
!
!
110
!
!
Quando a foto tem muitas cores ou sesses com diferenas entre claro e escuro,
colocar o texto em uma caixa pode realmente fazer ele se diferenciar.
Escolha uma forma (acima temos exemplos com um quadrado e um crculo) que
funcione com as suas palavras e imagem.
Depois escolha uma cor para a forma que tenha contraste suciente para se destacar
perante o restante mas que harmonize com o layout.
Considere utilizar um pouco de opacidade para deixar a imagem mais amigvel e

apresentar mais da foto de fundo.
!
!
6. Adicione Texto ao Fundo
!
Outra dica bacana adicionar o texto ao fundo da imagem ao invs de utilizar o

mesmo no primeiro plano. Normalmente os fundos tem menos elementos e mais
fcil trabalhar o texto. Os fundos tem normalmente apenas uma cor, o que facilita a
leitura.
!
!
111
!
!
!
O resultado nal natural e no necessita de um monte de truques ou alteraes na

foto original. Brinque com os efeitos sutis de sombra como na arte da Caitlin Wicker
acima, assim como posicionamentos que adicionem profundidade a imagem.
!
!
112
!
!
7. Exagere
!
!
113
!
!
Quando voc no tem certeza do que dizer, considere exagerar no tamanho das
palavras. Esta tcnica aplicvel s imagens e ao texto. Elementos grandes chamam a
ateno do leitor e facilitam a leitura.
Usar imagens grandes ou com zoom, como na imagem do caf acima, ajuda ao
utilizar sombras ou ter um contraste melhor. Usar textos grandes ou mais pesados
possibilitam uma boa leitura em praticamente qualquer imagem.
!
!
8. Adicione Cor
Usar cor adiciona um efeito muito interessante para a imagem. Os dois sites acima
apresentam abordagens diferentes. Um utiliza o contraste com uma cor que no est
na foto como um todo, enquanto o outro aplica uma cor que faz parte da
composio. As duas tcnicas podem ser utilizadas com sucesso.
!
!
!
!
114
!
!
9. Use uma Combinao de Cores
!
!
115
!
!
Um efeito que est se tornando popular a utilizao de combinaes de cores sobre

imagens que auxiliam na aplicao do texto. Pode ser difcil atingir o resultado
almejado, mas o efeito excelente. Opte por uma combinao de cores visualmente
interessante.
O balano est em fazer a imagem de fundo poder ser vista, mas deixar tambm o
texto legvel. Provavelmente voc precisar testar com vrias combinaes de cores e
opes de fotos antes de dominar o efeito. No tem certeza de que cores usar?
Comece com uma combinao das cores da sua marca.
!
10. Simplifique
!
O conselho master em design keep it simple se aplica tanto aos textos como s
imagens. Voc realmente quer que as pessoas vejam a foto e as palavras. Usar muitos
efeitos pode trazer o resultado contrrio.
Quando trabalhar com imagens, use uma tipograa simples e uma imagem clara pra
chegar aos melhores resultados. Lembre de deixar as partes importantes da imagem
sem obstrues e continue trabalhando no seu design at que o texto possa ser lido
claramente e boa sorte!
!
!
!
116
!
!
!
!
!
117
!
!
!
Dica Extra
!
Utilize o plugin GuideGuide para trabalhar com o seu design dividido perfeitamente
como voc quiser no Photoshop. Provavelmente ele no vai ajudar a aplicar as
tcnicas acima, mas em outros layouts ser de grande ajuda. grtis e excelente.
!
!
Dica Extra 2
!
Alm dos exemplos acima, vale a pena conferir os sites. Alm de apresentar as artes
em tamanho real, o desenvolvimento e as tcnicas utilizadas so de vanguarda. Todas
estas dicas podem ser aplicadas desde anncios em revistas e outras aes a
Websites.
!
Este post uma verso do original 10 Tips for Designing with Type on a Photo.
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
118
!
!
Como ficar em alta no mundo do branding

(mesmo com um oramento curto)
!
Por Jennifer Borton*
!
Somos ensinados quando crianas a no julgar um livro pela capa. No entanto, essa
lio no se aplica necessariamente aos negcios, e os clientes muitas vezes julgam
uma empresa pela aparncia da sua marca. Portanto, fundamental criar para sua
marca uma identidade visual que seja atraente para os clientes e transmita as
mensagens certas.
A identidade visual desempenha um papel fundamental na estratgia de branding de

qualquer empresa, independentemente do tamanho ou do setor. Como a expresso
visual de uma marca, ela pode abranger muitos elementos de design, como forma,
cor, imagens, tipograa e composio. Um estilo consistente deve ser identicvel em
todas as comunicaes visuais, desde materiais impressos at mdias digitais.
Atualmente, para ser levado a srio, voc precisa de uma presena na web limpa e
organizada (clean), apoiada por papel timbrado e material impresso prossionais
para ajudar a reforar sua identidade visual. Uma vez estabelecida, essa identidade
forte ajuda a denir sua empresa, distanci-la da concorrncia e promover certa
lealdade sua marca.
!
Sua marca visual tem tanta importncia quanto o seu plano de negcios!
!
Como criar sua marca visual
!
Embora seja importante pensar visualmente, essencial que voc esteja decidido a
respeito das mensagens-chave que est tentando transmitir antes de comear a criar.
Invista em sua marca visual o mesmo que voc investiu no seu planejamento
comercial. Prepare uma estratgia que dena claramente suas ideias e o que voc
deseja alcanar. Examine seu contedo e escolha os principais conceitos e temas que
aparecem nele. Usando essas ideias como palavras-chave, comece a procurar
elementos de design e imagens que os reitam. Lembre-se de que as imagens devem
servir como intervalos visuais para seu contedo que ajudaro o leitor a compreender
o que est escrito.
!
!
!
119
!
!
Simplifique
Embora isso dependa essencialmente da marca, uma regra fundamental de design

que, normalmente, menos mais. Uma ilustrao limpa e inteligente transmitir uma
ideia mais rapidamente e distncia. Uma imagem vale mais que mil palavras, ento
a imagem que voc escolher falar tudo sobre sua marca.
Selecione imagens que tenham um elemento nico, algo de destaque que torne sua
marca memorvel e sempre combine com seu estilo visual. Por isso, se voc estiver
usando uma ilustrao, veja o que mais o artista produziu e pense em como esses
recursos visuais poderiam ser incorporados em outras partes de seu site ou de seu
material impresso. Isso dar coeso visual a suas comunicaes e poder at dar a
impresso de que suas imagens foram criadas exclusivamente para seu material.
!
Conhecer sua concorrncia
!
No se esquea de observar a concorrncia. No que eles esto acertando e o que

poderiam melhorar? Que outras marcas (at mesmo fora do seu espao) voc admira
e por qu? possvel reproduzir o que eles zeram bem sem ser um imitador?
!
Ferramentas criativas profissionais
!
Muitas pequenas empresas no tm recursos para contratar empresas de design ou

fotgrafos prossionais para criar seu contedo e tendem a coordenar isso por conta
prpria. A criao de uma identidade visual coesa no precisa ser complicada ou cara.
Bancos de contedo, por exemplo, alm de fotos, so timos lugares para procurar
ilustraes, incluindo arquivos que podem ser usados como planos de fundo, bordas
ou elementos de design de materiais impressos.
Depois de denir a aparncia, elabore um conjunto de diretrizes para ajudar a

garantir que sua marca mantenha a consistncia medida que ela crescer e evoluir.
Essas diretrizes devem descrever os valores e a essncia da empresa, o tom de voz, o
estilo de tipograa, o estilo fotogrco ou ilustrativo, a paleta de cores, os layouts, etc.
A denio dessas diretrizes de uma vez e sua implementao em todas as
comunicaes visuais o ajudaro a evitar car com um site ou folheto da empresa
com aparncia amadora, que no represente adequadamente a marca.
!
!
!
120
!
!
Entretanto, com o passar do tempo, como voc avalia se os materiais que voc tem
precisam de atualizao? Pergunte a si mesmo: J se passou muito tempo desde que
voc projetou sua apresentao? Voc encontra diculdade para reunir algo toda vez
que um possvel cliente pede informaes? Seu setor mudou desde o
estabelecimento de seu negcio?
Existe muita concorrncia? E como so os materiais das empresas concorrentes em

comparao com o seu?
!
Principais tendncias
!
Somos bombardeados com publicidade de tantas formas e h tanto tempo que o

pblico consegue identicar quais mensagens so falsas, inferiores ou foradas.
Parcialmente devido inuncia da televiso com muito foco na realidade, no
cotidiano das pessoas, h uma tendncia a reetir pessoas e situaes reais em
materiais impressos de marketing.
Imagens que capturam um momento autntico, um momento da vida, permitem que

o leitor se identique instantaneamente com a mensagem transmitida.
Em recentes viagens Austrlia, notei que o pas tem uma cultura particularmente
rica em ilustraes, com meios ilustrativos que vo desde renderizaes 3D at
vetores encontrados em propagandas, convites, folhetos e outros materiais de
marketing.
Isso no nenhuma surpresa, pois a capacidade de adaptao innita de vetores

continua a fazer deles a principal escolha para planos de fundo, texturas e
sobreposies, elementos de navegao, banners e decoraes.
O que est mudando o modo como as ilustraes so usadas, alm dos estilos que
esto evoluindo e se popularizando. Reetindo a tendncia para autenticidade e sites
minimalistas como o Pinterest e a loja virtual de empresas de pequeno e mdio porte
Etsy, as pessoas esto criando e usando estilos antigos, distanciando-se de ilustraes
com forte manipulao por computador.
!
!
!
!
!
121
!
!
Estas so algumas das principais tendncias de ilustrao para inspirar e ajudar voc
a dar o pontap inicial ao criar a identidade visual e o material impresso para sua
marca:
Estilo de desenho mo
O visual de design feito mo no uma
tendncia nova, mas continuar
denitivamente forte por enquanto. Os
designers continuar a explorar as texturas
de giz, pintura, caneta e tinta, esboo e
pinceladas em planos de fundo sobre papel.
!
!
Tcnicas orgnicas
A moda das artes e dos ofcios se reete no
crescente nmero de ilustradores que
misturam suas ferramentas e tcnicas,
adaptando tecnologias para colocar seu
estilo artstico na tela, em vez de deixar que
as ferramentas decidam o que eles podem e
no podem fazer.
!
!
Inspirao em materiais
impressos
Um resultado especco de todo esse
cruzamento de disciplinas e modos de
criao a tendncia para grcos
inspirados em materiais impressos. Chapas
de cores inspiradas em xilograa de alto
contraste so combinadas com ricas
texturas indicativas da era anterior
impresso digital.
!
!
!
122
!
!
!
Maiores detalhes
Com o aumento das resolues, desde o novo monitor na sua rea de trabalho at a
tela do seu dispositivo mvel, os designers esto tirando vantagem dos pixels extras.
Charme retr
Uma tendncia verstil que incorpora belos padres, rendas e um toque retr.
!
!
O vetor heri
Estamos vendo mais ilustraes na frente e no centro, no simplesmente sobrepondo
e apoiando outras imagens.
!
!
Seja qual for o estilo que voc escolher para sua marca visual, mantenha-o verdadeiro
e consistente. Os visuais que voc usa precisam reetir os principais pontos de
contato de sua marca, ou voc corre o risco de criar uma desconexo entre a
promessa e a experincia da marca, minando a conana do cliente em seu negcio.
Sua marca um reexo do seu negcio; por isso, seja el aos valores fundamentais
de sua empresa e ao que ela representa.
!
*Gerente de Ilustrao Snior da iStock by Getty Images (www.istockphoto.com.br)
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
123
!
!
Gostou?
Compartilha!
!
!
124

Manual Básico para Designers PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Manual Básico para Designers PDF

Enviado por

Direitos autorais:

Formatos disponíveis

MARKETING DE CONTEDO PASSO A PASSO!

Manual bsico para designers: Os mais acessados do

Todos os direitos reservados.

27 blogs que todo designer deve conhecer

Este post acabou se tornando um dos mais compartilhados de todos os

Adicionamos todas as indicaes bacanas comentadas aqui no blog e nas

Blog sobre dicas de design, eventos, colunas, tutoriais e assuntos gerais

O 100% Design aborda variados assuntos e fonte de inspirao visual e

Blog de Design com uma pitada de criatividade de qualidade, Inspiraes,

O Boteco Design teve incio como um grupo do Google de colegas da

Choco La Design um dos maiores veculos independentes de produo de

Dicas para designers. Os melhores posts de design, em um s lugar.

Blog de Design e Criatividade com inspiraes, tutoriais, Web Design,

Visual e inspiracional. Blog sobre design, tecnologia, moda, culinria,

O Blog Design Culture nasce para levar o melhor do Design, Cultura,

Blog sobre Publicidade, Design, Marketing Digital, Redes Sociais, Tecnologia

O Designer Eects um blog que aborda tudo sobre o mundo do design, do

Blog de Design e Web Design, com dicas para estudantes e prossionais,

O blog mostra, como contedo principal, campanhas publicitrias, design,

Blog voltado para estudantes, prossionais e pessoas em geral que curtem

respeitado e citado como referncia por estudantes, acadmicos e

A maior razo para a existncia do Orange Design divulgar o design e sua

Podcast bem humorado sobre design, propaganda, games, programao,

Blog dedicado inteiramente para os apreciadores de inovao, criao,

O Sala7 um blog feito por estudantes de design que resolveram juntar o

Caf Com Galo

Design & Chimarro

53 colees de cones para Flat Design

O Mashable um dos, se no o mais famoso portal de marketing digital do mundo, e

O Linecons do DesignModo, uma das principais referncias em at design.

FlatIcons.net um fabricante de cones, permitindo que voc crie seus prprios

Meteocons um conjunto at com mais de 40 cones disponveis em PSD, CSH, EPS,

9. Flat Icons PSD

Este um conjunto de 20 cones at coloridos em formato vetorial PSD, disponveis

11. Stroke Line Icons

Aqui est um outro conjunto de cones simples na linha da Pixeden, disponveis em

12. Long Shadow Social Icons

Estes cones lindos de mdia social so projetados em um estilo de sombra, e esto

13. Flat Icons Jan Dvok

14. Flat Icons Freebie

Esta coleo de cones at do designer Seevi Kargwal so maravilhosamente

15. Flat Icons Pierre Borodin

Uma seleo de cones at do designer Pierre Borodin, com smbolos de interface,

16. Colorful Flat Icons

Michael Dolej projetou um conjunto de cones at coloridos e livres, com cones de

17. Flat Social Media Icons

18. Flat Social Icons

Conjunto de 16 cones at da Pixeden, disponvel como um PSD livre. Cada cone

O kit de UI at da Designmodo inclui uma seleo de cones at para os principais

20. Metro UI Icons

21. Flat Icons Buatoom

22. Flat PSD Freebie Alberto Valentin

Estes pequenos cones deslumbrantes do estilista Alberto Valentin esto disponveis

23. Flat Social Icons Jorge Calvo

Este um grande conjunto de cones sociais minimalistas livres do designer Jorge

24. Flat Icons Dan Vineyard

25. Flat Program Icons Alexander Schultz

Alexander Schultz desenvolveu este belo conjunto de cones de programas,

De Joshua Sortino, Publicons uma coleo crescente de cones at. Enquanto

27. Flat File Icons

28. Flat UI Kit PSD Martin Knize

29. Plex Icon Set

30. Cosmo Mini Icons