Posts Tagged layout
Identidade visual
Postado por Marco Moreira em design dia March 9th, 2010
Se existe uma coisa que não é fácil fazer para si mesmo, isso se chama “Identidade“. Quem já tentou criar a própria marca sabe do que eu estou falando.
Até hoje busco em mim, nos meus traços, em meu dia-dia o que de forte característica possuo para mostrar a minha identidade no visual do meu blog, twitter, youtube, etc. E vou dizer uma coisa, ainda não achei a peça certa do quebra-cabeça, mas a gente vai tentando…
Gosto da cor amarela (acho que já deu para perceber, né?)
Amarelo porque é uma cor quente, alegre, estimula a criatividade e espanta a preguiça.
Abaixo alguns prints da animação e significado da cor que vi no site Color in Motion da Claudia Cortés.
Uso uma tipografia que faz lembrar traços manuais, o que gosto bastante de fazer.
Nos BGs que fiz para Twitter e YouTube também utilizei características que se encontram no Photoshop. Idéia batidona na real, mas não vi por enquanto uma solução melhor para dizer visualmente que o meu trabalho oscila entre o lápis e o computador.
Bom, eis que tentei fazer com que uma coisa ficasse parecida com outra, então abaixo você poderá ver a linha visual da identidade que irá ficar enquanto eu não tiver uma idéia melhor.
Quem costuma usar photoshop e visitar a minha home do Twitter vai sentir uma certa agonia e querer clicar nas ferramentas do Photoshop. Essa é a idéia! 
Ainda fiz com que o layout pudesse se encaixar tanto em 1024 como para maiores resoluções, o que é até mais legal:
YouTube:
Imagem no Vimeo:
Mobile:
Cartões de visita:
Tendência, obviedade, cópia ou mera coincidência?
Postado por Marco Moreira em design dia November 20th, 2008
Ao acessar um site ontém, levei um susto!
Senti que o layout do site me parecia muito familiar.
A alguns meses atrás trabalhei no layout do hotsite da Feira do Guia do Estudante, inclusive postei aqui sobre o projeto.
Bom, printei as duas telas para se ter uma visão macro da coisa…
(lado esquerdo: hotsite do Guia – lado direito: site em questão)
O fato de sentir essa “familiaridade” com o site me incomodou um pouco, não pelo fato de poder ter sido uma cópia (por que a gente nunca pode afirmar se de fato é). Uma cópia realmente não me incomodaria. O que eu acho engraçado são elementos colocados totalmente fora de contexto, parece ser gratuitos. O que me incomoda e me fez pensar é justamente o óbvio, ou o “mais do mesmo”.
No post sobre o hotsite da Feira do Guia cheguei a dizer e a confessar que “decidi fazer algo que talvéz não seja tão inovador em termos de design, mas que o público se identificasse”, mas nunca pensei que pudesse fazer algo tão óbvio.
Óbvio ou não, todos os elementos que inseri foram colocados dentro de um contexto e de um conceito, já o site em questão não cheguei a achar conexão alguma com os elementos, enfim…
Será que meu layout foi tão óbvio assim que, sem pensar alguém conseguiu produzir tantos detalhes semelhantes?
Com base nessa questão decidi capturar alguns detalhes que me pareceram óbvios, agrupando na imagem abaixo:
E aí, tendência, obviedade, cópia ou mera coincidência?
Hotsite Feira do Guia do Estudante
Postado por Marco Moreira em arquitetura de Informação, design dia August 12th, 2008
Como era de se esperar e como faz parte da minha metodologia de trabalho neste projeto também comecei pelo wireframe. As informações já estavam bem organizadas, então a única coisa que fiz foi planificá-las para ter uma noção macro do site e então partir para a criação dos layouts no photoshop.
A idéia era fazer um visual jovem, a ver com os estudos, por isso decidi fazer algo que talvéz não seja tão inovador em termos de design, mas que o público se identificasse, que fosse extremamente funcional e fácil de encontrar as informações.
Em questão de legibilidade, optei por um layout com cores chapadas e desaturadas, que não fossem agressivas ao olho do internauta que visita o hotsite, além de fazer o fundo do texto também com o intuito de tornar uma leitura agradável, saindo do tradicional contraste fundo branco, fonte preta.
Mais uma vez eu contei com o Elton Prado, um parceiro que dá vida aos meus projetos, tornando-os navegaveis e indexaveis, tendo em mente sempre o foco no usuário, sempre se preocupando na função aliado ao visual.
Como o site já está fora do ar, você pode ver o layout no meu Flickr
Curso Abril de Jornalismo 2008
Postado por Marco Moreira em arquitetura de Informação, design dia June 9th, 2008
Hoje falo um pouco sobre como foi produzir o projeto “Em Tiras” para a editoria da Abril Digital sob orientação de Alini Sordili no Curso Abril de Jornalismo…
Pesquisas e referências
Primeiramente fomos convocados para fazer um site de história em quadrinhos, jogos e animações baseados nos moldes do Comflix. Claro, nós do grupo boiamos um pouco, pois o máximo que sabíamos de quadrinhos girava em torno dos gibis da turma da mônica..rs
Pois então, tivemos que correr atrás de pesquisas de público, de linguagem e entender de fato quais eram as necessidades deste público, o que eles pensam, o que eles curtem e como seria este tal “site ideal” para eles.
Dentre diversos livros que vimos e compramos na Comix, recomendo muito esse, o “Desenhando quadrinhos“, tanto para iniciantes quanto para quadrinistas auto-didatas que ainda não o leram. É obrigatório!
O livro também é excelente para quem faz storyboards e trabalha com animação. Percebi que uma história de quadrinhos tem tudo a ver com o comportamento do storyboard.
Wireframe
Depois de entender esse público e mergulhar nesse mundo partimos para a parte prática.
Nem todos optam por fazer um wireframe detalhado, mesmo porque as vezes não dá tempo, mas acho que sem ele a probabilidade de um projeto ter furos é muito grande, então preferimos gastar mais tempo no entendimento e no planejamento para fazer um projeto conciso de cabo a rabo!.
Logotipo
Primeiramente, definimos o nome, concebido por todos os envolvidos no projeto, depois veio a concepção do logo que foi feito por mim e pela designer Lívia Holanda, parceira do grupo.
O objetivo foi criar algo original e que de cara se relacionasse com o assunto que estávamos tratando. Acertamos em cheio!
Temos referência do “balão” presente em todas as HQs e definimos para a tipografia uma temática que tem tudo a ver com o rítmo dos frames das histórias em quadrinhos.
Layout do site
O prazo era curto. Nós fomos o primeiro grupo a entregar o projeto, o que exigiu muita energia e algumas madrugadas em claro.
Optamos por fazer um layout em que as informações dos boxes em primeiro plano ficasse em maior destaque em relação ao backgroud do site.
Estudamos também quais seriam as áreas mais nobres dentro do scroll e grandes áreas de acessos para a nossa principal idéia: O “Crie HQ”, onde o usuário poderia criar a própria HQ, imprimir, mandar para os amigos ou até salvá-la como imagem e fazer o upload no site, criando o seu perfil onde poderia exibir toda sua criação e essas serem submetidas a comentários e avaliação de outros usuários.
THE END
O Final foi tão feliz quanto triste. Foram 30 dias de intenso trabalho e aprendizado com profissionais da Editora Abril e alunos bacanas e talentosos que viraram grandes amigos. Este aí em cima foi o meu grupo. Da esquerda para a direita:
Jornalistas Natalie Reinoso, Katiane Romero, Lucas Pereira e Designers Lívia Holanda e Marco Moreira (eu!)
Para a apresentação mandamos fazer as camisetas, onde em cada verso havia uma letra, representando a união matadora do grupo. Lívia Holanda também preparou uma animação de abertura onde explicava o conceito do projeto:
E para fechar com chave de ouro ainda criamos e mandamos imprimir diversos fanzines que continha nossa história no projeto desde o início.
Valeu demais!
Que viagem!
Postado por Marco Moreira em design dia May 18th, 2008
Ufa!
Depois de um mês de intenso trabalho ele saiu!
Foram muitos “vai e vem” durante todo o trabalho, mas faz parte. Alguns trabalhos eu tiro de letra. O cliente aprova sem muitas alterações e ok. Mas como nós sabemos nem tudo são flores não é mesmo?
E outra é que a gente acaba lembrando que nós, designers não somos o centro do universo. Apesar de sermos especialistas nA arte, ninguém entende mais da marca do que o cliente.
Nos primeiros trabalhos com um cliente novo você pode ter certa dificuldade em “acertar a mão” ou até mesmo de entender a maneira de se comunicar com ele. E confesso que tive um bocado nessa, mas aprendi.
Fiz o wireframe, layout e animação, mas como programar não é minha especialidade, deixei essa parte com o Elton Prado que entende da arte e que também aprendeu um tantão em desvendar a porrada de erros e paus que o flash e os textos dinâmicos davam a todo momento.
Bom, este hotsite não é apenas uma cara bonitinha cheia de animações.
Ele foi desenvolvido com opção para 2 línguas, além de poder ser alimentado externamente, tanto textos como fotos e vídeos, então grande mérito deste trabalho se deve ao programador.
A princípio não haveria necessidade de ser abastecido por fora, mas como o cliente não tinha todo conteúdo, resolvemos fazer com que o hotsite funcionasse desta maneira. (como você vai poder ver, a opção em inglês e os vídeos ainda não foram ativados no site)
Clique para ver o Hotsite Europa para jovens no site do Viaje Aqui
Muito Estranhos
Postado por Marco Moreira em design dia March 9th, 2008
Este info não tem nenhuma novidade espetacular em temos de navegação ou visual, mas o objetivo foi colocar a matéria que saiu na revista Mundo Estranho 73, inserindo o conteúdo exclusivo para internet. Claro, os vídeos!
O conteúdo é curioso e imperdível! (Uma pena que está fora do ar)
Magel aqui também: