Arquivo

Archive for the ‘Tutoriais’ Category

Fireworks: 45 Excelentes e Úteis Tutoriais

O Tio Bruno é um cara legal. Eu diria que ele é um cara fundamental.

Se você acompanha a carreira, os cursos, e o blog do Bruno Ávila pode ter certeza que já evoluiu muito com isso.

Pois em seu blog ele postou 45 tutoriais da utilização de efeitos e das ferramentas do Fireworks. Tem de tudo. Com certeza você vai gostar.

Segue abaixo o link para o blog.

http://www.brunoavila.com.br/avante/fireworks/fireworks-45-excelentes-e-teis-tutoriais.html

Divirta-se e inspire-se.

Categorias:Tutoriais Tags:,

Design Responsivo em 3 passos

janeiro 30, 2012 1 comentário

Muitos me perguntam: por onde eu começo para aprender as técnicas e o uso do design responsivo?

Pois comece por algo simples, fácil e útil como este EXEMPLO.

Notou? Simples e útil. As 3 etapas para fazer este layout de exemplo são:

1) Uso das meta tags
2) Aprendendo a estrutura do HTML
3) Media Queries ( aqui está o grande segredo )

Acesse o tutorial no link abaixo e comece agora mesmo, afinal você nao quer ficar para trás com tantos tablets por aí não é?

TUTORIAL – DESIGN RESPONSIVO EM 3 ETAPAS

Divirta-se e inspire-se.

 

Categorias:Tutoriais, WEB Design Tags:

Tutorial – Criando um site com fundo preto

Algumas técnicas e cuidados devem ser tomados ao desenvolver um site predominantemente preto. Segue link contendo um tutorial passo-a-passo mesmo no Photoshop para você criar o layout acima e ficar por dentro das técnicas envolvidas.

http://designinstruct.com/web-design/create-an-extremely-simple-dark-web-design-in-photoshop/

Divirta-se e inspire-se.

Categorias:Tutoriais

Design Responsivo – Tabelas – Tutoriais e Exemplos

julho 28, 2011 2 comentários

Identifique abaixo qual das 2 tabelas adaptadas para o IPhone está errada:

Acertou quem respondeu: AS DUAS.

Sim , nenhuma delas serve para uma tabela adaptada ao IPhone.

A da esquerda está com as fontes visiveis, mas de difícil compreensão, afinal o conteúdo ultrapassou a largura determinada.

A da direita só com uma lupa. Ela está adaptada na largura, mas de que adianta? Não dá pra enxergar nada.

Pois o resultado de uma tabela aplicada ao design responsivo seria este:

Lindo não é mesmo? E o melhor de tudo, é uma tabela responsiva, ou seja, usando media queries, não precisamos ficar fazendo gambiarras com o objetivo de adaptar para o monitorzão de 1920 x 1080 e para o IPhone do tiozinho.

Segue abaixo um link contendo o tutorial de como fazer esta tabela, e também vários outros exemplos de tabelas e gráficos.

http://css-tricks.com/9096-responsive-data-tables/

E fica a dica, aqui no blog temos tutoriais e bastante conteúdo sobre design responsivo.

Divirta-se e inspire-se.

Categorias:CSS, Tutoriais, WEB Design Tags:,

Tutorial – Criando um layout elegante – business

O objetivo deste tutorial é chegarmos nesse resultado usando o Photoshop:

O tutorial traz um passo a passo. É interessante não só para criar o layout acima, mas para aprender algumas técnicas utilizadas e alguns padrões no layout que é muito legal. Segue abaixo o link. Divirta-se e inspire-se.

http://trendytuts.com/web-layout-tutorials/how-to-create-an-elegant-business-psd-template-in-photoshop.html

Categorias:Tutoriais Tags:

Tutorial – Layout profissional com fundo preto ( dark web layout )

maio 18, 2011 1 comentário

O objetivo deste tutorial é chegarmos nesse resultado usando o Photoshop:

O tutorial traz um passo a passo. É interessante não só para criar o layout acima, mas para aprender algumas técnicas utilizadas em objetos em cima de backgrounds escuros. Segue abaixo o link. Divirta-se e inspire-se.

http://www.free-stock-graphics.com/tutorials/how-to-create-a-advanced-dark-web-layout/

Categorias:Tutoriais, WEB Design

Projeto de sites – Criação e Manutenção

Existe um passo a passo do que fazer para que meu projeto do site da padaria da esquina ande? Serve também para aquela empresa multinacional que pediu um hotsite pra mim?

A resposta é: SIM. É possível usar os mesmos passos para qualquer site. Mas cuidado com o TOC, ok?

Seguem abaixo os 5 passos para que o seu projeto ande de vez.

1. Briefing – A primeira fase é aquela reunião com o cliente. O levantamento de opiniões, conceitos, os concorrentes, público alvo e efeito do site.. Você tem um modelo de briefing? Se não tem dê uma lida nesse post aqui.

2. Design – É aqui que o monte de anotações de seu briefing ganha vida. A partir do seu esquema de cores, da estrutura do site, você já poderá ver que rumo o site tomará, e começar a criar personas levando em conta o público alvo. Você não faz idéia do quanto pode alterar o seu layout e conteúdo ao criar personas. Nunca deixa de fazer isso, o resultado será muito melhor. Também pesquise em sites como o CSSLine ( use a pesquisa por cores para definir sua paleta ), o Dribbble e o Favwork para inspiração. E dê uma olhada aqui no blog na tag inspiração.

3. Desenvolvimento – Essa é a fase da mão na massa. Não desanime agora. Este é o coração do site. Se algo der errado aqui, esqueça o design. Ninguém acessa um site que não funciona. Independente se você usa ASP.net, PHP, JAVA, crie um bom sistema de gestão de conteúdos, fácil e dinâmico. Lembre-se que nem sempre quem usar o seu sistema tem um conhecimento amplo de informática. Digo por experiência própria, ” PENSE NO PIOR”.

4. Teste – E a prova real vem agora. Teste seu site em TODOS os aspectos. Funcionalidade, usabilidade, browsers, etc. IMPORTANTE: teste o seu site em um celular. Muita, mas muita gente mesmo acessa a internet por ele. Tire exemplo do próprio wordpress. Tente acessar este blog pelo wordpress. Você verá como fica a organização. Se não for possível adaptar seu layout, faça uma versão mobile do site.

5. Manutenção – Normalmente cada empresa disponibiliza algumas horas por mês de manutenção para os seus clientes. Um valor deve ser combinado lá na primeira reunião, pra evitar muita demora nesse processo.

Lógico que nesse meio tempo vão surgir outras situações. Daí vai de cada um. Mas tente projetar o seu site usando estes passos que o resto vem ao natural ok?

Divirta-se e inspire-se.

%d blogueiros gostam disto: