Archive for category design
O padrão é não ter padrão
Postado por Marco Moreira em design dia May 8th, 2013
São Paulo é a cidade da diversidade cultural, do clima maluco, da mistura de pessoas de diversos lugares do país e do mundo. Essa mistura já faz parte da identidade cultural da cidade, mas nem por isso deveria ser tão desorganizada em termos de padrões na comunicação visual.
Entra gestão, sai gestão e quando se há intenção de fazer uma coisa legal, uma nova direção entra e desfaz o que já vem sendo construído. Me parece também que não existe um planejamento visual para a comunicação na cidade como um todo e isso acaba prejudicando o dia a dia do cidadão.
É como se não houvesse padrão entre as seções de uma publicação impressa, entre as páginas de um site ou entre as estações do Metrô.
Não estou dizendo que tudo precisa ser igual, mas é como uma marca que tem o seu manual de identidade ou seu “guideline”. Tudo se constrói através de um guia de estilo onde a linguagem visual obedece a um padrão de conceito, formas, cores, tipografias…
Bom, acho que não estou falando nenhuma novidade, mas é que é assunto básico no que se refere à preocupação com o usuário na área em que atuo (Arquitetura de informação e Design). Ou seja, num site por exemplo, se não tivermos uma unidade visual entre as páginas, não temos uma boa experiência de uso, o usuário se perde e sai do site. A diferença da “experiência de uso” em uma cidade é que você não tem como sair dela em apenas um clique.
Andando por São Paulo e observando diferenças entre tudo o que deveria ter uma ligação tanto visual quanto funcional, constatei que o padrão da cidade é não ter padrão. Ruim para a cidade, para o residente e para o visitante.
Um dos grandes problemas do projeto da cidade é a falta de pesquisa com os próprios cidadãos pagantes dos impostos (se teve, não parece que existiu). Ou a prefeitura te consultou antes de fazer alguma mudança grande no seu bairro? Você fez parte de alguma pesquisa?
Em cada bairro se vê um tipo de sinalização, de passarela, de iluminação, de ciclovia, de transporte, de pontos de ônibus, etc.
Então me baseei apenas em um exemplo onde a falta de padrão acontece: nos pontos de ônibus de São Paulo. E como não tive tempo de fotografar os pontos por aí, printei imagens do Google Street View.




Logo quando eu estava fazendo esse levantamento, começaram a surgir os novos pontos de ônibus, aí pensei “Que legal! finalmente vão padronizar e melhorar a condição dos pontos!”, aí decidi incluir a crítica nesse mesmo post.

Olhando de perto, fico pensando na quantidade de vidro que cada ponto tem. E se isso quebrar? Não vai ficar perigoso, machucar alguém? O quão rápido será a manutenção disso?
Sem dizer que a publicidade foi a primeira a ser colocada, mas… onde é que fica a indicação de quais ônibus passam ali?
Ouvi dizer também que em dias de sol o ponto vira uma estufa e “cozinha” quem estiver ali.
Esse é só mais um de muitos casos onde o poder público gasta milhões sem o consentimento de quem REALMENTE usa o serviço.
Aproveitei também para pesquisar o que o criador e público tem dito sobre os novos pontos. Divirtam-se!
Focamos nossas soluções nos passageiros, oferecendo proteção, segurança, conforto, bem-estar e dignidade. Fizemos abrigos inteligentes, adicionando tecnologia e comunicação instantânea com os ônibus e com a cidade, elevando a experiência dos passageiros a um novo patamar (ver matéria)
A intenção é embelezar São Paulo com as estruturas, que vão ser bem iluminadas e foram desenhadas para dar orgulho ao cidadão. (ver matéria)
Anunciados pela prefeitura como mobiliários com design e tecnologia modernos, os novos pontos de ônibus paulistanos estrearam sem informação básica: quais linhas passam pelo local. (ver matéria)
A maioria achou-os bonitos, mas está preocupada com a conservação. “Não dou uma semana para quebrarem esse ponto”. (ver matéria)
Qualquer cobertura opaca é melhor que o melhor dos vidros, ainda mais com teto baixo. Fica a sensação de mormaço de praia. (ver matéria)
Os usuários também reclamam do tamanho da cobertura dos pontos de ônibus. “Não cabe. Pelo fluxo que tem São Paulo, eles são muito pequenos. (ver matéria)
Veja também o post Descomunicação visual onde registro e falo sobre a lei Cidade Limpa na época em que o Prefeito Gilberto Kassab a implementou e o post Comunicação Visual mostrando as lojas dois anos depois.
Top 10 Magel Studio 2012
Postado por Marco Moreira em design dia December 31st, 2012
Esse ano foi o ano do “sem tempo”. Talvez o ano que menos postei por aqui, é verdade. Conciliar trabalho, vida pessoal, estudo, freelas, etc não é fácil. Mas apesar da falta de atualização constante, vi um aumento de acessos no decorrer dos meses. Por isso também queria agradecer a todos que tiveram a paciência de esperar cada post, das curtidas e dos compartilhamentos que ajudaram e ajudam este Blog a crescer. Valeu mesmo!
Iniciei o ano trabalhando na Gauge com experiência do usuário e testes de usabilidade para clientes como Natura, Porto Seguro e Wallmart. Depois tive oportunidade de integrar a equipe de UXD (User Experience Design) da Ogilvy & Mather e até então cuido de clientes como Coca-Cola, Dove, OsGemeos, Jac Motors, AdeS, Schweppes entre outros.
Dos principais freelas, fiz um trabalho de facilitação gráfica, fotografia de vitrines para a Tory Burch e um trabalho de Arquitetura de Informação com Responsive Design do novo site da Speedo.
E como todo fim de ano faço o Top 10, segue os posts de 2012 que mais fizeram barulho este ano:
Magel Studio, agora no Behance
Postado por Marco Moreira em design, projetos pessoais dia November 16th, 2012
Depois de tanto tempo sem tempo, finalmente fiz meu portfólio no Behance.
O intuito é publicar lá trabalhos mais visuais mesmo, então foco agora é em projetos pessoais e ilustrações, mas eventualmente entre projetos de AI e foto também.
Convite de casamento: passo a passo
Postado por Marco Moreira em design, ilustração dia August 23rd, 2012
Recebi uma encomenda para fazer um convite de casamento baseado em uma linguagem que já havia aplicado em alguns trabalhos. A ideia era fazer convites exclusivos para os padrinhos, utilizando uma linguagem bem manual para dar uma característica mais pessoal.
Então segue o passo a passo de mais um trabalho que foi bem legal ter feito =)
Criação dos avatares dos noivos
![]()
Design do cartão para aprovação
Antes de iniciar o trabalho do desenho na munheca, fiz um layout no computador apresentando a ideia do envelope e a disposição dos elementos na parte interna e externa do convite.

Desenho à mão com a ajuda de uma mesa de luz
Com base no layout aprovado, iniciei o trabalho desenhando o cartão à mão para depois escanear e enfim fazer a arte final e enviar para a gráfica.

Montagem do Mock-up
A montagem de um mock-up para fazer o teste de cortes e encaixe foi essencial para evitar surpresas no final do processo. Este mesmo processo foi feito na criação de um folder que postei aqui no Magel a alguns meses atrás.
Produção do envelope
A quantidade de convites era pequena, então sugeri que fossem feitas algumas “janelas” destacando palavras da capa do convite. Por este motivo eles tiveram que ser manualmente confeccionados, um a um.

Gráfica e finalização
Depois da impressão ainda escrevi o nome dos convidados em cada envelope.

Resultado final =)

E a entrega, de bike.
A satisfação vem agora, no sorriso do cliente!

O convite acompanhou um mini bolo feito pela Bololândia e inspirado nos avatares dos noivos criados para o convite.

Se curtiu este trabalho vai gostar também do cartão de aniversário personalizado
Passo a passo: Criação de um folder
Postado por Marco Moreira em arquitetura de Informação, design dia May 23rd, 2012
Hoje vou levantar uma questão que tem a ver com produção, processo e meios que podem otimizar a vida do designer (e do cliente), minimizando refações e garantindo os prazos. Então descrevi nesse post um caso prático, mostrando o passo a passo deste trabalho.
Job: Criação de um folder frente e verso.
Briefing: Criar um folder tipo cabide. Este folder deve ser impresso em 4/4 (4 cores, frente e verso), com verniz em reserva em algumas áreas com faca especial (no cabide) para ser pendurado em retrovisores internos dos automóveis.
O folder também deve ter picote para que uma área seja destacada e mais, nele deverá ter 2 espaços para ser preenchido à mão assim que forem definidos os tipos de produtos pós compra e outra área que receberá um código por folder, por isso ela deve ficar em branco.
Outra necessidade é exibir dentro do folder duas marcas distintas apresentando sua linha de produtos, dando a possibilidade do instalador escrever quais produtos foram instalados.
Aí pronto, é só desenhar tudo isso de uma forma clara e fácil de entender.
Desafiador, não?
Pois é, diante desta quantidade de informações a serem consideradas, usei o meu conhecimento de Arquiteto de Informação, implantando o wireframe (uma das formas que servem para documentar um projeto na fase da Arquitetura de Informação) antes da criação visual, dando prioridade para a aprovação da informação em primeiro lugar.
Primeiramente levantei as informações, elencando junto ao cliente as chamadas e as prioridades dada a cada elemento no folder e a partir disso, iniciei uns sketches.



Feito o levantamento das informações, iniciei o estudo do trabalho ordenando os textos e gráficos em uma primeira versão, ou, como disse, o “wireframe” da peça.
Qualquer cliente que esperasse receber um layout e recebesse um folder sem cor, com certeza iria estranhar. Por isso propuz este processo com a finalidade de acertarmos o projeto de ponta a ponta, minimizando a margem de erro, tanto minha, do cliente quanto o da gráfica.
No final o cliente ficou feliz com o processo e com o resultado (e eu também!)
Wireframe inicial


Mocku-up ou Boneco


Apresentação do layout feito em Illustrator e finalizado no Photoshop



Mockup do layout final (feito após a aprovação do passo anterior)


Prova de cor e área do verniz em reserva


Estudo de formato do cabide
O formato escolhido foi o terceiro da esquerda para a direita por seguir mais a linguagem aplicada no visual do folder e por alguns carros terem a aste que segura o retrovisor mais espessa.
Folder impresso

Legenda:
1) Campo para ser preenchido após a escolha dos tipos de insulfilm.
2) Área que será destacada para fixar no volante do carro, informando ao dono a data correta para a abertura dos vidros e uso do desembassador térmico traseiro.
3) Picote da área a ser destacada.
4) Número de série do certificado para o controle da garantia.
Folder no carro


Ao se envolver na criação de uma peça gráfica, o designer deve se atentar a outras coisas tão importantes quanto à parte visual, como a ergonomia (onde e como isso será utilizado?), ao tamanho e prioridade da informação (quem vai ler? qual a distância?), a produção, etapas de aprovação e as próprias peculiaridades da área impressa – e são muitas! (bonecos, provas, verniz, corte, fechamento de arquivo e por aí vai).
A criação de um folder pode ser mais complexa do que imaginamos, por isso é bom se atentar às necessidades do cliente, responsabilidades do designer e todos os detalhes na hora de orçar.
Meu amigo, designer e ilustrador Gustavo Bacan trabalhou na criação dos ícones e no fechamento de arquivo da peça. Valeu, Guga!
Top 10 Magel Studio 2011
Postado por Marco Moreira em design dia December 31st, 2011
Este ano foi uma pauleira!
Iniciei o ano fazendo consultoria em Arquitetura de Informação para a Insula (Agencia digital da Neo Gama) e depois toquei o resto do ano fazendo muitos freelas. O aprendizado na carreira solo foi enorme, uma etapa necessária para quem quer abrir seu próprio negócio ou quer ter liberdade e uma qualidade de vida melhor.
O meu perfil multidisciplinar e liberdade na escolha dos trabalhos permitiu que eu fizesse trabalhos de vários gêneros. Trabalhei com criação de logotipo e desenvolvimento de um manual de identidade visual, fotografei salas comerciais da Virtual Office e vitrines da Louis Vuitton, fiz ilustrações em tempo real em workshops da rede O Boticário, trabalhei com edição de vídeos, criação de infográficos, me envolvi na área gráfica fazendo a criação de um folder, ilustrei materias para a revista Super e Nova Escola e fiz projetos da área de Arquitetura de Informação atendendo a algumas agências me envolvendo em projetos do Banco Itaú, Bradesco, Harley Davison, Pernambucanas, Jimbo e Brasil.gov nas plataformas web, tablet e celular.
Depois de me envolver em tantos projetos como freelancer, recebi uma proposta de trabalho da empresa Gonow. Lá comecei implantando novos processos de AI e participando de um projeto legal da editora Saraiva que estará no ar em breve.
Como não bastasse essa agitação toda, surgiu um novo desafio para iniciar 2012: Uma proposta para integrar à equipe de UX da Gauge. Decisão tomada, lá vou eu!
E como de praxe, segue abaixo os 10 posts que mais deram audiência aqui no Magel =)























Magel aqui também: