Carlos JoséVivendo o design como designer

Olá pessoal, um dos trabalhos que ocuparam os meus dias de novembro, dezembro e um pedacinho de janeiro foi este da Crepes Triunfo. Depois da aprovação do PSD pelo cliente, começamos a transformar em realidade passando tudo para o WordPress.

Optei em utilizar o WordPress pela facilidade de manutenção e atualização dos texto e fotos pelo próprio cliente. Gostei muito de poder criar este projeto, pelo fato da ideia inicial ter sido mantida do começo ao fim com pequenas modificações. Nas fotos pude contar com a minha amiga Debora Câmara.

A ideia para este site é servir os futuros clientes e atuais clientes com uma navegação simples, direta e objetiva. Em cada seção servir com todas as informações necessárias e seguir um padrão de comunicação. Por fim a home não tem texto e sim o background que fica alternando as fotos com os crepes, dessa forma, expor o produto de cara, sem arrodeios ou mistérios.

Abaixo segue as imagens geradas no Adobe Photoshop que foram as referências para a criação do site.

Olá pessoal, vamos iniciar 2012 com uma lista de tutoriais para incrementar o seu conhecimento no Adobe Photoshop. No ano passado estive tão ocupado que escrevi poucos posts aqui no blog, para este ano será bem diferente.
Segue abaixo uma seleção dos melhores e mais complexos tutoriais do Adobe Photoshop:

• Create a Festive Cocktail Using Photoshop’s 3D Capabilities
• Create Cool Neon Effects
• Captain America Shield in Photoshop
• Eroded Fashion Portraits
• Reader Tutorial: Flaming Car in Photoshop by Lincoln Soares
• Golden Foil Gift Box from Scratch
• Use Photoshop to Create a Still-Life Lamp, Nightstand, and Picture Frame
• Create Revolutionary Cosmic Art
• Create a Rocky Text Effect with Space Background in Photoshop
• Shiny Glass Yellow Tomatoes with Colorful Liquid inside and Splashing Effect
• Photo Manipulation: Surreal Oceanscape in a Bottle
• Cold Beer Glass Illustration. Foam Texture and Dewy Glass Effect
• Create a Floating Over-Grown “Tree House” in Photoshop
• How to Create a Photo Manipulation of a Flooded City Scene
• Fairy Night. Beanstalk
• Create a Devastating Tidal Wave in Photoshop
• Roses Bouquet Splash Effect
• Create a Dark and Mysterious Fantasy Portrait
• Christmas Night. Magic Scene with Flying Santa
• Quick Tip: How to Create an Abstract Wireframe Text Effect
• Create a Glowing Superhero
• Fake X-ray Effects
• Create Detailed Vintage Typography with Illustrator and Photoshop
• Create a Fictional Arctic Snow Frog in Photoshop
• How to Create Happy New Year 2012 Colorful Greeting Card in Photoshop CS5

É isso!

16º EDTED: 10 cidades, 200 palestras e 5.000 participantes!

O Edted – Encontro de Design e Tecnologia Digital – é o maior evento de internet do Brasil. Em 2011, chega à sua 16ª edição e vai passar por dez cidades, apresentando 200 palestras e contando com aproximadamente cinco mil profissionais presentes. A programação é dividida em três espaços, nos quais os participantes podem circular livremente:

“Design e Marketing”, “Tecnologia e E-commerce” e “Business”.

“Criação, E-commerce e Mobile serão os temas centrais desta edição. Esperamos, assim, levantar discussões sobre os assuntos que estarão em evidência em 2011. Grandes especialistas nesses temas estão sendo convidados para ministrar as palestras, e esperamos também um público bastante participativo, pois teremos inclusive palestras interativas. Michel Lent, da Pontomobi/RBS, vai abrir o evento falando sobre a integração das mídias “sem escalas”: do celular a TV. Leo Balter e Murilo Curti trarão tendências e experiências com HTML5 e CSS3, Gustavo Guanabara vai falar sobre desenvolvimento para iPhone e iPad. Marcelo Albagli, da Canvas, ministrará uma palestra sobre criação e por aí vai…”, adianta Adriana Melo, idealizadora do Edted.

O “road show” terá início em maio e vai até dezembro. Confira o calendário abaixo:

Rio de Janeiro: 21 de maio – SulAmérica
São Paulo: 11 de junho – Amcham
Belo Horizonte: 16 de julho – Ouro Minas
Brasília: 27 de agosto – Convenções Brasil 21
Florianópolis: 24 de setembro – Centro Sul
Porto Alegre: 15 de outubro – Plaza São Rafael Hotel
Curitiba: 22 de outubro – Hotel Bourbon
Salvador: 05 de novembro – Hotel Fiesta
Fortaleza: 26 de novembro – Fábrica de Negócios
Recife: 03 de dezembro – Mar Hotel

Nos intervalos, os participantes poderão visitar livremente a área de exposição, que receberá empresas de software, hospedagem, e-mail marketing, sistemas de pagamento, livrarias etc. Estarão presentes nossos patrocinadores: Microsoft, Dinamize, NetRevenda, PagSeguro, EmailManager, Pagamento Digital, Tecla, RedeHost e a Revista Wide, da Arteccom.

Os eventos serão realizados aos sábados, das 9 às 18 horas, e os valores variam de R$ 29 a R$ 79, dependendo da data de inscrição. Fique de olho no site do evento para conferir as datas promocionais: www.edted.com.br. Inscreva-se agora e prepare-se para se atualizar com profissionais renomados, que levarão até você o melhor conteúdo da internet!

Olá pessoal, depois de muito tempo sem escrever aqui no blog, vamos retomar as atividades normais (espero). Volto a falar sobre grid system para criação de websites. Para os meus alunos este assunto é uma prática constante. Tenho utilizado o grid system 960.gs tanto nas aulas quanto em projetos.

O gridsystemgenerator.com é uma escolha bem interessante, pois trás mais opções de criação e uso dos sistemas de grades. Por exemplo, é possível utilizar os grid system: 960.gs, golden grid, 1kb grid e o simple grid. Para quem já conhece o 960.gs sabe que tem uma largura máxima de 960 com 24 colunas, pois bem, através do gridsystemgenerator.com podemos definir configurações personalizadas tais como: largura (width), nº de colunas (nº of colunms), margem da esquerda e direita (margin left and right).

Se por um acaso você entrar com valores que não geram um grid perfeito, o próprio sistema retorna algumas opções válidas para que você possa ajustar. Por fim lhe será dado a opção de fazer o download do HTML e CSS resultante da sua configuração e mãos a obra!

É isso!

Olá pessoal, quanto tempo? Estou na maior correria, o segundo semestre do ano sempre é muito puxado pra mim, por isso tenho escrito pouco no blog. Na semana passada na sexta-feira dia 16/09 na jornada acadêmica que a UNIBRATEC promoveu para seus alunos, tivemos uma palestra bem interessante sobre a transposição de um jornal para o iPad pelo Vitor Fernandes – Design de Interação Visual para Dispositivos  Móveis: Do Impresso para o Digital, foi excelente.

O Vitor mostrou na prática o projeto feito no Adobe Illustrator que utilizava um sistema de grades na distribuição da diagramação da tela, pois bem, achei um framework-CSS que vem com elementos de paginação, calhas e uma grade básica para criar website e afins para iPad e detivados.

Segundo site Magazine Grid, o framework utiliza HTML5 para ter uma boa semântica, foi projetado especificamente para iPad respeitando as orientações retrato e passagem, com uma grade simples de 8 colunas. Funciona bem com iPhone.
Se você ficou interessado, visite o site Magazine Grid faça o download do framework e leia a documentação e comece a projetar websites e afins para iPad e derivados.

É isso!

Olá pessoal, vamos fechar o mês de agosto falando sobre comida e design, uma combinação muito boa. Ontem na aula falando sobre arquitetura da informação, mais especificamente experiência do usuário, fiz questão de mostrar exemplos diferentes onde a tônica era comunicar para o usuário de forma direta e objetiva.

Associado a tudo isso a tecnologia e um excelente design com uma navegação simples e fácil. Um ponto negativo era que nenhum tinha se preocupado com os dispositivos móveis. A designer gaucha Gisele Muller nos traz a lista 20 Inspiring Food Related Websites for Your Delight, que realmente é um deleite, porem com uma preocupação de apresentar um design excelente também nos dispositivos móveis, pena que nem todos tiveram esta preocupação com os usuários.

É isso!

Olá pessoal, mais um pré-lançamento da Adobe na área de desenvolvimento web, publiquei um post no dia 5 de agosto sobre o Adobe EDGE que pelo que parece substituirá o Flash (nada confirmado, apenas minha opinião). Como simples usuário, é uma grande facilidade, muito prático e rápido para desenvolver websites sem escrever uma linha de código HTML.

Como profissional web, achei um retrocesso da Adobe voltar a apostar em criação de sites utilizando o modo visual sem o entendimento do código HTML que está por trás. Tudo bem que o código gerado segue os padrões: HTML5, CSS3, jQuery. Fiz um exemplo e exportei para ver o resultado, achei o código muito pesado, tinha muita coisa desnecessária.

Acho que o Adobe MUSE por ser um programa ainda em fase de testes, poderá aperfeiçoar o código-fonte. Semelhante ao Adobe Illustrator que traz uma janela de diálogo para saber o tipo de projeto a ser criado, o Adobe MUSE tem esta mesma premissa utilizando neste caso um sistema de grade (grid system), o usuário deve definir a largura total, quantidade de colunas, largura da coluna e os valores das margens das colunas.

Abaixo segue algumas das características do Adobe MUSE:

• Projeto – As páginas são criadas e visualizadas como sitemaps, páginas-mestre.
• Design de páginas – Combine imagens, gráficos e texto com total controle, flexibilidade e poder (quase como se você estivesse usando o Adobe InDesign).
• Adicionar interatividade – Cheio de widgets  de arraste e solte totalmente personalizáveis, como menus de navegação e slide show, incorporar trechos de código HTML para incluir coisas como o Google Maps e muito mais.
• Publicar o site – Preview do site com Muse para ver como está ficando e testar as funcionalidades.

Segue os link necessários para que você possa testar o Adobe MUSE e tirar as suas próprias conclusões: http://labs.adobe.com/technologies/muse/, http://muse.adobe.com/ e http://muse.adobe.com/showcase.html

É isso!

Olá pessoal, estou produzindo um website que esta na fase da arquitetura de informação, mais precisamente analisando a parte de tecnologia que o website deve ter. Na procura por plugin jQuery que atendam as funcionalidades que projetei, achei o leanModal. O importante nesta fase de pesquisa é guardar toda e qualquer informação, mesmo que você não utilize agora ou no projeto que esteja trabalhando, mais no futuro  vai utilizar.

Nos pontos fortes se destacam:

• Perfeito para esconder conteúdo que precise ser mostrado rapidamente;
• Largura e altura flexíveis;
• Várias chamadas para conteúdos diversos;
• Excelente para ser utilizado em telas de login, formulários, alertas, painéis e etc.

No website você encontra dois exemplos juntamente com a opção de download e como utilizar este plugin que é extremamente fácil. Com conhecimentos mais avançados em jQuery e CSS é possível fazer uma personalização do mesmo.

É isso!

Olá pessoal, chegamos ao final da primeira semana de volta as aulas e já temos novidades no ar. Foi anunciado na segunda-feira dia 01 de agosto de 2011 pela Adobe a sua mais nova ferramenta de animação e interatividade o EDGE que utiliza os Web Standards, isso mesmo, HTML5, CSS3 e Javascript.

Diferente do Adobe Flash o Adobe Edge não terá dificuldades em ser indexado pelos buscadores, já que o resultado da animação não será um objeto e sim um arquivo javascript com CSS. Você pode conferir a animação – Getting Jumpy criado pela Media Rain, abaixo o código fonte dessa animação:

Segue abaixo os links necessários para que você possa fazer download, instalar e aprender a utilizar a primeira versão do adobe Edge.

http://labs.adobe.com/technologies/edge/

É isso!

Olá pessoal, as cores são importantes na aplicação de qualquer tipo de trabalho, a falta da cor também é um fator e por fim o exagero da aplicação da cor. As cores comunicam muito uma mensagem, uma expressão, um propósito, uma ideia.

Uma das primeiras disciplinas que estudamos em design são fundamentos! Que nos ajudaram a nortear nossos trabalhos, por isso, trago aqui para os estudantes iniciantes e intermediários, uma lista de 20 sites que fazem bom uso da aplicação das cores para transmitir e comunicar uma ideia. Alista foi feita pela designer gaúcha Gisele Muller para o site WDL - 20 Fresh Examples of Color Usage in Web Design

É isso!