SEJA BEM VINDO
latest
Mostrando postagens classificadas por data para a consulta gráfica. Ordenar por relevância Mostrar todas as postagens
Mostrando postagens classificadas por data para a consulta gráfica. Ordenar por relevância Mostrar todas as postagens

10 Ferramentas incríveis para apresentação de Projetos Web (Wireframes)


Quem trabalha com apresentação de projetos web, já está acostumado com o termo wireframe. Ele é utilizado para cunhar o desenho básico (?esqueleto?) que serve de guia para a interface que estamos projetando ? seja um site ou aplicativo, por exemplo ? e para organizar visualmente os elementos fundamentais do projeto antes de desenvolver. Existem ferramentas que ajudam a criar esboços rápidos e que permitem a colaboração de outros membros do projeto. Seguem algumas dicas de ferramentas incríveis.

Primeiramente vamos entender melhor o que é um Wireframe?
Wireframes são desenhos com estruturas básicas de um projeto, que pode transmitir uma ideia de como será a arquitetura daquele produto quando pronto. Em outras palavras, seria um “esqueleto” inicial, disposto a mostrar como aquele projeto será quando pronto. Os wireframes são muito utilizados para que o desenvolvedor possa ter um entendimento de todos os requisitos solicitados pelo cliente no desenvolvimento do projeto, seja este um software, um site ou até uma casa ou carro. Através desse esboço inicial, o desenvolvedor consegue analisar junto ao cliente todos os elementos que estarão, possivelmente, na versão final do produto e evita perda de tempo com reconstruções posteriores quando o projeto já estiver na fase final de construção.



*O wireframe é a etapa essencial para visualizar projetos, estruturar informações e desenvolver a interface gráfica.

SE VOCÊ GOSTA DO NOSSO CONTEÚDO -  Siga nosso perfil de Dicas do LinkedIn:



1. MockFlow
A melhor ferramenta online que eu testei. Fácil de usar, com diversos recursos e componentes. Permite o compartilhamento do wireframe, utilização de grid, guias, régua e exportação como blueprint (formato semelhante àquelas plantas azuis de engenharia) e preto e branco. Infelizmente a versão gratuita permite criar apenas um mockup, porém, com múltiplas páginas. Possui também a versão stand-alone.



LINK DA FERRAMENTA - Clique aqui para acessar



2. Mockingbird
O Mockinbird é uma ferramenta online que facilita a criação, visualização e compartilhamento dos wireframes de seu site ou aplicação.


LINK DA FERRAMENTA - Clique aqui para acessar



3. Lovely Charts
É uma ferramenta online disponível para instalação no Chrome que permite não somente a criação de wireframes, mas também de sitemaps, fluxogramas, organogramas, e muito mais. A única desvantagem é que nessa versão gratuita você pode salvar apenas 1 gráfico editável, mas pode exportar ilimitadamente.



LINK DA FERRAMENTA - Clique aqui para acessar



4. HotGloo
O HotGloo é totalmente baseado na web e possui muitas features que permitem interações drag&drop bem simples e fáceis de se realizar. Essa á outra ferramenta para criação de wireframes que com suporte a colaboração em tempo real.


LINK DA FERRAMENTA - Clique aqui para acessar


5. Cacoo
Cacoo é uma ferramenta com interface amigável, uma boa quantidade de recursos e versão em português. Assim como o Lovely Charts, ele também permite a criação de diversos tipos de diagramas, inclusive UML e é completamente free.


LINK DA FERRAMENTA - Clique aqui para acessar



6. iPlotz
Com iPlotz é possível criar rapidamente mockups e wireframes navegáveis e clicáveis para a prototipação de  sites e aplicativos, em geral.


LINK DA FERRAMENTA - Clique aqui para acessar



7. Axure
Axure permite criar wireframes, diagramas de fluxo, protótipos e especificações para aplicações e web sites. Ele conta com uma série de widgets, incluindo botões, campos de formulário, formas e elementos dinâmicos que você pode editar e formatar. Também é possível a criação de bibliotecas de widgets personalizado.


LINK DA FERRAMENTA - Clique aqui para acessar



8. Balsamiq
Usando Balsamiq Mockups você se sente como se estivesse desenhando, mas é digital, então você pode ajustar e reorganizar controles facilmente e o resultado final é muito mais limpo! Com 75 controles pré-definidos para escolher, você pode projetar qualquer coisa, desde uma caixa de diálogo super-simples a um aplicativo RIA completo.
\4
LINK DA FERRAMENTA - Clique aqui para acessar



9. PhotoShare
A ferramenta web ProtoShare é bem fácil de usar. Com foco na prototipagem e colaboração, os membros da equipe podem rever o trabalho e fornecer feedback em tempo útil, ideias e sugestões em wireframes clicáveis ou conteúdo criativo.


LINK DA FERRAMENTA - Clique aqui para acessar



10. Illustrator, Corel Draw, Photoshop e outros
Você não necessariamente precisa utilizar programas específicos para desenvolver wireframes; eles podem ser desenvolvidos utilizando ferramentas gráficas como o Illustrator e o Corel, por exemplo. Mas às vezes os prazos são curtos e algumas das ferramentas listados acima oferecem recursos que permitem mais rapidez na produção e na avaliação do wireframe por membros da equipe.









Em resumo, os wireframes são grandes “salvadores de tempo” e ajudam todas as partes envolvidas no projeto, em especial o web, ao chegar a acordos sobre a colocação dos principais elementos de página, como cabeçalhos, áreas de conteúdo, menus de navegação e rodapés.

Sucesso a todos!

_______________________________________________________________

Autor: Adriano Oliveira 
Fundador e Editor-chefe do Acervo Publicitário, formado em Publicidade e Propaganda pelas Faculdades Integradas de Bauru (FIB), trabalha como Profissional de Marketing B2B no segmento de engenharia mecânica, tem especializações em Design, Marketing Digital e eventos industriais. "Compartilhar o torna mais do que você é. Quanto mais você der para o mundo, mais a vida poderá retribuir." (Jim Rohn)
Visualizar perfil de Adriano Oliveira (1000+) no LinkedIn_______________________________________________________________
Ficaremos honrados se você "Curtir" nossa page do Facebook:

Ferramenta Open Source p/ Planejamento de Projetos Criativos



Esta ferramenta é gratuita e foi desenvolvida para quem necessita armazenar e organizar ideias, de maneira fácil e funcional, sendo de grande uso para a elaboração do Planejamento de qualquer Projeto, seja ele de Marketing, Jobs para Arquitetura de Sites, Eventos ou qualquer outro relacionado a nós Criativos. 



Para isso, ele se aproxima do modo como o nosso cérebro funciona, ou seja, tenta ligar conceitos da forma mais natural possível, através de um modelo de diagrama denominado mapa mental. Os desenhos feitos em um mapa mental partem de um único centro, a partir do qual são irradiadas as informações relacionadas. Eles podem ser feitos com um programa de computador adequado ou com canetas coloridas e um bloco de papel, e podem ser usados por todos os profissionais para gerenciar qualquer tipo de informação. Esta ferramenta foi construída com Java e com o código aberto (Open Source), ela é bem simples de usar para quem já é adepto da técnica de mapas mentais. Por um detalhe simples: a interface do programa lembra bastante uma folha de papel e as ferramentas para o desenho estão apenas a um clique. Não tem segredo!



[Clique na imagem para ampliar]



Mapa Mental
O mapa mental foi criado pelo inglês Tony Buzan. Ele representa, de forma gráfica, como as idéias se organizam e se associam em torno de um elemento principal, criando uma linha de raciocínio muito mais fluida, lógica e espontânea. O Mapa Mental é utilizado para a gestão de informações, compreensão e solução de problemas, memorização e aprendizado, até a criação livros, elaboração de palestras, ferramenta de brainstorming e no auxílio a gestão estratégica das empresas.







Desejamos sucesso a todos!

_______________________________________________________________________

Autor: Adriano Oliveira 
Fundador e Editor-chefe do Acervo Publicitário, formado em Publicidade e Propaganda pelas Faculdades Integradas de Bauru (FIB), trabalha como Profissional de Marketing B2B no segmento de engenharia mecânica, tem especializações em Design, Marketing Digital e eventos industriais. "Compartilhar o torna mais do que você é. Quanto mais você der para o mundo, mais a vida poderá retribuir." (Jim Rohn)
Visualizar perfil de Adriano Oliveira (1000+) no LinkedIn_______________________________________________________________________
Ficaremos honrados se você "Curtir" nossa page do Facebook:

Os 15 Mandamentos da Direção de Arte


Artigo desenvolvido pelos ex-alunos da ESPM. Que tem como finalidade fomentar o conhecimento a respeito da direção de arte. Seguindo-as com coerência,ou até violando-as por um motivo válido e consciente, vocês poderão seguir mais firmes pelo caminho da criação, sem a culpa de ter cometido os pecados mais comuns no mundo da arte publicitária. Boa leitura e que e a criatividade e o bom senso estejam sempre convosco.

1. Jamais esquecerás que a criação começa pelo conceito
Começo com uma dica que serve tanto para redatores quanto diretores de arte. Nem adianta começar a trabalhar, seja criando títulos ou elaborando um layout, ser ter um conceito criativo definido na cabeça. Tudo começa pelo briefing. Nele está descrito o objetivo da comunicação. Se não está, a falha já começou lá no atendimento. Depois de ler o briefing, pesquisar sobre o produto ou serviço (nunca aceite a informação que um atendimento lhe passa como verdade absoluta), entender sua natureza e funcionamento e focar seus esforços no objetivo daquela campanha, você deve transformar tudo isso em peças publicitárias. Ou seja, dizer tudo aquilo da forma mais breve e surpreendente possível.



2. Não pularás as preliminares antes de chegar ao gozo
Calma aí que eu explico. Criação é como sexo. Pra chegar ao ápice é preciso de estímulos. Para se chegar ao orgasmo criativo, é preciso também de uma série de preliminares. A primeira delas é o brainstorm. Aquele bate-papo informal em que a equipe discute o problema e põe pra fora toda e qualquer ideia que lhes vêm à cabeça. É a hora do vale tudo. Aqui não pode ter censura. E nem pense em se aproveitar para detonar as ideias da sua colega loira. Ao fim da orgia mental, no meio de tantas ideias, deve haver pelo menos uma legal. Aí vale à pena, uma nova discussão para aprimorá-la e só então, você deve se aproximar do maior objeto de desejo de qualquer aluno: o computador.



3. Utilizarás com sabedoria e propriedade o grande poder das cores
Assim como na tipografia, é muito comum o aluno se limitar às opções das paletas do software. O olho humano é capaz de perceber 16 milhões de tonalidades diferentes! Como você pode se limitar a algumas dezenas delas? Ao invés da paleta utilize o seletor de cores, onde você pode deslizar por entre elas, descobrindo tonalidades originais e surpreendentes. É comprovado cientificamente: as cores afetam o estado emocional das pessoas de forma direta. Utilize esse poder e use as cores para despertar emoções no seu público-alvo. Estudando a psicodinâmica das cores e até observando as reações desencadeadas pelas cores em si próprias, você vai perceber que a cor adequada à mensagem e ao público pode garantir o sucesso do seu trabalho. Por exemplo: você já pensou em um anúncio voltado para o público jovem trabalhado com cores frias ou tons pastéis? Nada a ver, né? E o contrário: um anúncio sério para executivos com cores radicais? Também não cola! Pensem nisso antes de clicar na paleta ou no seletor, de preferência.



4. Não distorcerás fontes ou imagens
Ao selecionarmos um objeto em um programa de computação gráfica, automaticamente surgem alças ao seu redor. Para fontes e imagens a regra é uma só: amplie ou reduza o elemento somente pelas alças das quinas. Assim, eles têm as suas proporções respeitadas ao serem ampliados ou reduzidos. Fontes ou imagens "esticadas" ou "achatadas" são um verdadeiro atestado de amadorismo e garanto que, para a maioria dos diretores de criação, motivo de demissão por justa causa.



5. Não se limitarás à Fonte Default
Tipografia é personalidade. Escolher a fonte ideal para um título, para um bloco de texto ou para o nome ou descritivo de uma logomarca é uma tarefa que exige sensibilidade, critério e consciência da idéia a ser transmitida. Portanto, não se limite, por preguiça ou comodismo, às chamadas "fontes de sistema" (aquelas que já vêm embutidas no Windows) como a "Times New Roman", "Arial" ou "Verdana". Ou ainda as fontes "default" - aquelas que os próprios softwares aplicam quando você digita um texto (Avant-Garde, no caso do Corel Draw). Pesquise e busque novas opções (a Internet esta aí pra isso) e faça o seu próprio "fontfolio", organizando fontes novas e diferentes em um CD.
Mas lembre-se. Não adianta ser diferente só por ser diferente. Lembre-se sempre dos critérios para a utilização de tipos: legibilidade (de nada adianta uma fonte transada se não dá leitura), adequação à mensagem e ao público-alvo (tipos descontraídos para anúncios jovens, clássicos para anúncios sofisticados e objetivos para anúncios técnicos, por exemplo.), adequação ao meio (um outdoor precisa de rápida visualização e, consequentemente, fontes sem serifa; mas fontes serifadas podem ser muito bem-vindas num anúncio, por exemplo) e história do tipo (saber que a Edwardian Script é inspirada na escrita cursiva do período Eduardiano inglês e que a Verdana foi criada especificamente para telas de computadores são dados bem elucidativos na hora de utilizá-las, não?). Se no fim das contas, por algum desses três critérios, você achou que a Times ou a Arial é a melhor escolha, aí sim, você vai ter uma boa razão para usá-las.



6. Não se obssecarás pela Comic Sans
Está aí um fenômeno tão inexplicável quanto os garfos entortados pelo Uri Gueller no Fantástico (um guru que entortava talheres com o poder da mente nos anos oitenta). Por que raios todo estudante tem uma atração fatal pela Comic Sans? Vamos falar um pouco sobre essa fonte tão amada por vocês? A Comic Sans é assim chamada pelo fato de ter sido inspirada na tipografia das histórias de quadrinhos (daí o "comic") e por não ter serifas (daí o "sans" ou "sem" em latim: sem serifas.). Enfim, uma fonte descontraída, inspirada no universo adolescente das HQs. Aí vem o Pedrinho tascando-lhe Comic Sans no anúncio do hospital, Mariazinha enfiando Comic Sans no anúncio para o empreendimento imobiliário... Pô, assim não dá! E os quatro critérios foram parar aonde? É melhor nem responder.



7. Não ampliarás imagens de forma indiscriminadas
Uma imagem digital é formada por pequenas unidades chamadas de pixels (picture element). Quanto mais ampliamos uma imagem mais tornamos os seus pixels aparentes. É como se analisássemos uma amostra de sangue ao microscópio. A olho nu só vemos um líquido encorpado e vermelho. Mas, através da lente, vemos uma série de pequenas partículas que o compõem. O erro mais comum nesse caso é copiar uma imagem da Internet e ampliá-la indiscriminadamente. As imagens da Internet são tratadas com resolução mínima para que os sites se tornem mais leves e funcionais. Se você precisa de uma boa imagem para layout, existem duas soluções básicas. A primeira são os bancos de imagem. Eles disponibilizam imagens para fins publicitários em resoluções ideais para o seu layout (quando o cliente aprova o layout e esse vai ser produzido, é necessário comprar a foto e obter o arquivo em alta resolução). A segunda solução é a pesquisa avançada do Google. Ao clicar no link "imagem", surge a opção "pesquisa avançada de imagem". Uma segunda página permite selecionar alguns parâmetros de busca de imagens. Selecione tamanho grande e o resultado serão imagens no tamanho de "papel de parede", o que significa uma ótima resolução para layout e, com um pouco de Photoshop, até mesmo para pré-impressão. Lembre que layouts são impressos em jato de tinta ou em laser (copiadoras). Nesses casos, é suficiente uma resolução de 150 dpi no tamanho final para um bom resultado.



8. Não abandonarás a imagem perdida no meio do layout
OK, você encontrou a imagem perfeita para a sua idéia. E o melhor: a resolução está ótima para layout. Mas os cuidados não terminam aí. É muito comum o aluno simplesmente "largar" a imagem no meio da peça, como se sua simples presença já fosse o suficiente para garantir uma boa composição. Assim como a tipografia ou as cores, as imagens são elementos gráficos. E, como todo elemento gráfico, precisam estar em harmonia com os demais e não perdida, sem nenhum elo de ligação com o restante do layout. Existem alguns recursos básicos para não deixar a imagem como aquele "retângulo" perdido no meio da peça. Experimente ampliar a imagem até que ela se torne o principal elemento do seu layout (nesse caso, cuidado com a resolução). Ou então, utilize o recurso de transparência para criar uma transição suave entre a imagem e o fundo, evitando corte brusco entre a imagem o restante do layout. Ou ainda, tente um corte diferente para a imagem, como uma curva (no caso de uma composição mais feminina) ou um papel rasgado (para uma peça mais jovem e descontraída). Enfim, são apenas algumas possibilidades e essa questão é como Neston: existem mil maneiras de resolver, invente a sua.



9. Respeitarás a Hierarquia dos elementos
Através da composição visual, você pode guiar o olhar do espectador ou a sua linha de leitura. Dê mais destaque aos elementos principais e menos destaque aos elementos secundários. Parece óbvio, mas é muito comum entre a produção de estudantes, anúncios onde a fonte do título tem o mesmo corpo que a fonte do texto. O que deve atrair minha atenção primeiro? A ordem mais convencional é imagem - título - subtítulo - texto - assinatura. Portanto, respeite essa hierarquia e dê a cada um dos elementos o seu devido peso e lugar no anúncio. E mais uma vez: pode subverter a regra, mas desde que tenha uma boa razão para isso.



10. Não reduzirás a logomarca do cliente a pó
A marca não é o principal elemento em uma peça publicitária. Numa lógica convencional, primeiro vem a imagem e o título disputando o primeiro lugar. Em segundo o subtítulo, que quase sempre explica e justifica um título criativo. E, por fim, o consumidor checa quem é que assina a peça ou a logomarca do anunciante. Uma lenda muito antiga diz que a logomarca pequena é mais elegante. Mas pequena não significa ilegível. Dê à marca um peso justo. Torne-a visível, mas sem esquecer a hierarquia entre os elementos. Existem anunciantes que já possuem uma identidade visual tão forte que podem se dar ao luxo de assinar apenas com o símbolo gráfico, como a Nike, por exemplo. Mas, a grande maioria dos anunciantes não desfruta desse poder e necessitam, portanto, que sua marca seja facilmente visível nas peças pelas quais eles pagam caro.



11. Não esquecerás que a ilustração também é um caminho
A propaganda está redescobrindo a ilustração. Até os anos 50, a ilustração reinava absoluta na propaganda impressa do mundo inteiro. Mas quando os métodos de reprodução fotográfica se tornaram acessíveis, a reação natural dos diretores de arte foi trocar todas as ilustrações pelo poder de persuasão da imagem real. Assim, a ilustração foi quase banida da propaganda. Mas, a partir do final dos anos 80, os publicitários redescobrem que ilustração também é bacana e que ela pode ainda ser uma opção diferente e, paradoxalmente, inovadora num mundo dominado pela imagem fotográfica. A ilustração tem um caráter lúdico, ou como dizem por aí, uma magia muito própria. Cabe ao diretor de arte, com seu bom senso, escolher entre ilustração ou imagem. Optando pela primeira, é muito importante atentar para o seu estilo ou o seu "traço". As ilustrações podem ser realistas, cômicas, estilizadas, ter um traço sério ou descontraído, por exemplo. Pesquise diversos tipos de ilustração e encontre aquele que mais se identifica com a mensagem e o público-alvo da sua peça.



12. Consumirás insaciavelmente cultura e informação
Um publicitário não é nada sem cultura e sem informação. Principalmente um criativo. A grande idéia surge exatamente no momento em que você confronta as informações do briefing com as informações e a bagagem cultural gravadas no HD do cérebro. Dessas associações surge a mágica das grandes sacadas. Cinema, teatro, livro, exposições e música de todos os gêneros são itens indispensáveis a sua sobrevivência profissional (Isso não parece nada mal, hein!). E não vem com essa história de que a grana está curta, porque biblioteca, Internet, mp3 e os piratas camelôs estão aí pra isso. Mas não basta ver e ouvir. É preciso interpretar e refletir sobre o que foi visto/ouvido. Seja a exposição de arte contemporânea ou o novo filme do Homem Aranha. Esteja atento às informações ao seu redor e aprenda a ver o mundo além da superfície.



13. Aprenderás a ver antes de fazer
Todo mundo sabe que pra ser um bom escritor é preciso antes ser um bom leitor. Da mesma forma, para ser um bom diretor de arte é preciso consumir muita direção de arte. Da boa, é claro. Veja o que os grandes diretores de arte estão fazendo no Brasil e no mundo. As tendências, os estilos, os novos recursos gráficos. Armazene esses dados no HD do cérebro. Eles serão as suas referências ou o seu "repertório visual". Ainda que no começo você termine copiando o estilo dos seus favoritos (sim, também já copiei os meus mestres), logo você descobrirá o seu estilo próprio e poderá se tornar referência para outros tantos que ainda surgirão. Por isso, olho nas revistas e jornais brasileiros e gringos. Alguns caminhos? Revista Veja (os maiores anunciantes do país estão lá), Revista da MTV (tudo o que há de inovador termina publicado lá), Archive (alemã; custa caro, mas coloca você lá na frente em matéria de tendência) e os jornais da sua cidade (pra saber o que anda acontecendo no quintal de casa). Só pra começar.



14. Respeitarás os mais velhos
Essa até parece que saiu da tabula do Moisés. Porém, mais por esperteza do que por obediência, escute o que os diretores de arte mais experientes têm a lhe dizer. Está certo, o cara pode ter dez anos e um talento apenas mediano. Mas ainda assim sua experiência é valiosa. Sua bagagem profissional faz com que saiba, por exemplo, que texto preto no fundo ciano é o maior "esparro" pela péssima legibilidade. E um conselho desses pode lhe tirar de uma baita fria. Com meus 10 anos de profissão, não me sinto o dono da verdade e escuto as observações até da moça do cafezinho. Pois é! Ela é público. Antes de dizer que na "sua" peça ninguém mete a mão, escute as opiniões dos seus colegas, da moça do café e até (é duro, eu sei) do atendimento. Reflita sobre elas e, de cabeça fria, aproveite as mais coerentes e descarte as impróprias.



15. Experimente de vez em quando desobedecer todo e qualquer mandamento
"Ué? o cara endoidou!", devem estar pensando vocês. Mas um dos grandes trunfos da direção de arte e de qualquer outro trabalho criativo é a inovação. E para alcançá-la, às vezes é necessário ir de encontro às regras e convenções. Mas, como sempre digo, para quebrar uma regra é preciso conhecê-la profundamente. Aí sim, estaremos quebrando a regra de uma maneira consciente e inovadora e não pelo fato de não conhecê-la ou, em outras palavras, pela simples ignorância.
Esperando sinceramente que esta modesta contribuição sirva de orientação no caminho até o trabalhoso título de Diretor de Arte, aproveito para lembrar que conhecimento nunca é demais. E se muitos consideram que o trabalho de direção de arte é 90% feeling, arriscaria-me a dizer que é nesses 10% restantes, a parte do conhecimento, que pode se esconder o grande diferencial num mercado cada vez mais disputado. E só para não sair do clima bíblico, diria que para nós, profissionais de comunicação, só o conhecimento salva!



Descritivo: a descrição do produto ou serviço representado por uma logomarca. Situa-se, geralmente, logo abaixo da própria logomarca. Exemplo: Paraíso Tropical Restaurante. Logo abaixo da logomarca (Paraíso Tropical), vem, em menor destaque, a palavra "restaurante", descrevendo o produto "Paraíso Tropical". Importante não confundir descritivo com slogan. Este último é uma sentença de efeito, que visa destacar algum atributo ou diferencial do produto/serviço e não apenas descrevê-lo. Exemplo: VISA. Por que a vida é agora. VISA é uma marca que dispensa um descritivo, mas utilizasse um, seria algo como VISA. Cartões de Crédito.




Cores - Sistemas

Existem basicamente quatro sistemas de cores à sua disposição: CMYK, RGB, Hexadecimal e Pantone. Como e quando usar cada um? Vamos primeiro dividi-los em dois grupos: RGB e Hexadecimal são sistemas de cor luz, usadas para suportes eletrônicos como os monitores, sendo que o sistema hexadecimal é usado especificamente para a programação de web sites. Já o CMYK e o Pantone são sistemas de cor pigmento. Tudo aquilo que é impresso deve ser baseado em CMYK. E a escala Pantone é uma espécie de codificação das cores, que garante o máximo de fidelidade na hora da impressão profissional.




Sucesso a todos!





_______________________________________________________________________


Ficaremos honrados se você "Curtir" nossa page do Facebook: