Acúmulo de informações, redes sociais, notícias, feeds, blogs, emails, mensagens instantâneas, são apenas algumas das informações que recebemos todos os dias. Muitas vezes é difícil conciliar trabalho com tanta informação. A todo momento uma carga de novidades chega aos nossos olhos sendo ponto forte para distração e redução da produtividade.

O que deve-se fazer é buscar ferramentas para melhorar a produtividade, permitindo uma melhor execução dos seus trabalhos e consequentemente tendo mais tempo para absorver tanto conteúdo. Reuni alguns aplicativos e dicas úteis para melhorar a produtividade de web designers.

Programa: Focus Booster

Focus Booster

O aplicativo Focus Booster ajuda o profissional caso necessite trabalhar um determinado tempo em um único projeto. O aplicativo funciona facilmente, basta definir quanto tempo irá trabalhar naquele projeto e quanto tempo de intervalo. Como se estivesse ligando um cronômetro. Assim que o tempo acabar você será avisado através de um alerta do programa.

Pre-requisito: Adobe Air
Sistemas: Windows / Mac / Linux

Programa: Klok

Klok

Um dos melhores aplicativos para projetos web. Com o Klok é possível criar pastas para cada projeto, separadas pelas etapas naturais (briefing, design, html, programação), definir quais horários do dia você executará projeto x ou y. Poderia comparar com uma agenda voltada a projetos. Além de anotações, o aplicativo gera um gráfico mostrando quantas horas você trabalhou em cada projeto.

Pre-requisito: Adobe Air
Sistemas: Windows / Mac / Linux

Programa: Fences

Fences

Um programa muito útil para usuários Windows. Através dele é possível organizar o Desktop, criando blocos de conteúdo e rotulando-os. Assim você pode criar as categorias de atalhos de acordo com sua necessidade. Exemplo: trabalho, jogos, pessoal, internet. Para não poluir sua área de trabalho, o programa permite personalização completa dos blocos.

Sistemas: Windows

Site: Remember the Milk

Remember The Milk

Remember te Milk é um site node você registrar suas tarefas. Através do site é possível separar as tarefas nas categorias estudo, pessoal e trabalho, além de definir prioridades. Caso algum do trabalho envolva outros profissionais também é possível compartilhar informações de suas tarefas.

Pre-requisito: Acesso a Internet
Sistemas: Windows / Mac / Linux

Hora para tudo

Quantos feeds de blogs e sites você assina? Já analisou quanto tempo gasta lendo? Essa leitura tem um horário reservado ou é paralela aos seus trabalhos? É importante que ao trabalhar você saiba distinguir qual melhor momento para ler todo o conteúdo de seu interesse e limpar a caixa de entrada do seu email.

Um web designer durante o processo de criação de um layout gasta pelo menos 30% do seu tempo em busca de sites como referência, ícones que se adaptem corretamente ao design, etc. Ou seja, todo o momento você está conectado a internet, cercado de conteúdo. Separe um ou dois horários fixos para checar seus emails, matérias interessantes, conteúdo para estudar. Uma boa dica é sempre favoritar uma página interessante, o que geralmente acontece quando passamos o dia no Twitter. Quando chegar o horário que você separou ou tiver concluído todos os trabalhos, abra a lista de favoritos e aproveite.

Mantenha o foco

Querer abraçar 5 trabalhos simultâneos na tentativa de gerar um melhor faturamento não é uma opção interessante. Ao manter toda sua atenção em um único trabalho a execução do mesmo ocorre de forma mais rápida e eficiente. Sendo assim a probabilidade de concluir 5 projetos, trabalhando apenas 1 de cada vez, será bem maior do que trabalhar simultaneamente.

Lembre-se que a linha de raciocínio interfere muito em soluções de um site. Evite quebrar essa linha de raciocínio a todo custo.

Conhece outros programas ou tem dicas para melhorar a produtividade de um profissional web? Compartilhe, comente.

A implementação de ícones em interfaces gráficas vem desde os primórdios da informática quando os computadores deixaram de ter apenas uma tela preta com caracteres e códigos para aderir a interfaces mais robustas nas quais facilitam a utilização de sistemas que são utilizados até hoje (você está utilizando neste momento, olhe ao redor do seu desktop, seja windows ou linux está cercado por ícones) e na internet não é diferente.

Neste artigo conhecerá bons exemplos de uso além de várias dicas. Caso tenha interesse em ficar atualizado nos artigos publicados neste blog assine nosso Feed.

Índice

1. O que são ícones?
2. Porque e como utilizar ícones
3. Dicas de utilização
4. Sites de referência em utilização de ícones
5. Sites para download de ícones

O que são ícones?

A palavra Ícone vem do grego “Eikon” que significa imagem e tem a função de se referir a algo por semelhança em estrutura e representatividade. Existem explicações aprofundadas sobre o assunto, recomendo a leitura do artigo feito por Everaldo Coelho.

Porque e como utilizar ícones

Os ícones são uma maneira simples e eficaz de chamar a atenção de seus usuários. Possibilitam tanto a melhoria visual quanto a passar rapidamente uma informação.

Exemplos práticos da importância de um ícone: o que seria dos feeds sem seu famoso quadradinho laranja ao lado? Provavelmente muitos sites perderiam alguns assinantes
por isso. Outro exemplo é o recente popstar da internet Twitter, basta vermos o pequeno pássaro azul para corrermos e clicar para em seguida decidir se seguiremos mais uma pessoa.

Mas cuidado, apesar de serem importantes para uma boa apresentação no design e agilizar informação, se não forem usados com cautela poderão ter o efeito inverso no quesito velocidade de informação. Veja as dicas a seguir.

Dicas de utilização

1. Evite o excesso de ícones
2. Não tente “inovar” demais, você não precisa “inventar” um novo tipo de ícone, basta que o mesmo seja bonito e combine com seu site, de preferência personalizado.
3. Tamanho não importa, porém evite usar muitos ícones pequenos com exceção dos mais comuns (como imprimir, bookmarks, home page, email).
4. Se for utilizar no menu principal não o deixe sozinho, insira uma descrição do mesmo ao lado ou abaixo (com uma ou duas palavras).
5. Escolha um estilo uniformizado. Para isso procure por “pacotes” de ícones em sites de downloads grátis.

Sites de referência em utilização de ícones

Confira algumas referências de designers que souberam como explorar os ícones para um design mais bonito e uma comunicação mais eficiente.

Shannon Moeller

Karimzurita

Raka Creative

Tender Support

AD Works

Sharkey Media

Sites para download de ícones

Existem incontáveis sites que fornecem download de ícones grátis, em outro post já recomendei 10 deles, você pode conferir em “10 sites excelentes para download de ícones“.

Artigo por Rafael Marques

A partir desta segunda-feira (15) o RGB Magazine traz o 1º Especial Photoshop. Tutoriais, arquivos para downloads e dicas. Todo o material aqui postado tem como público alvo iniciantes e profissionais. Confira o conteúdo.

• Apresentação da interface e de suas ferramentas (nível básico);
• Ferramentas (nível básico) – move tool, marquee tool, lasso tool, magic wand tool, crop tool.
• Trabalhando com camadas;
• Tutorial: Tratamento de imagens – melhorando brilho e contraste (nível básico);
• Tutorial: Recortes profissionais de imagem utilizando a Pen Tool (nível médio);
• Tutorial: montagem utilizando recorte de imagens e gradientes (nível básico);
• Como criar seus próprios gradientes e patterns;
• Sites para download de patterns, gradientes e brushes grátis;
• Photoshop voltado para Web (nível médio); e
• Tutorial: Criando o layout de um site no Photoshop passo-a-passo (nível médio).

Não perca o 1º Especial Photoshop do RGB Magazine. Caso tenha dúvidas sobre os tópicos ou tutoriais envie um comentário.

Este é um tema que já foi e continua sendo motivo de polêmica, gerando debates e a publicação de muitos artigos sobre o assunto. É normal que toda e qualquer empresa que publique seu site queira um site de aparência bonita, atraente e que cause impacto aos visitantes, porém dependendo do público alvo do site, um bom design pode não significar tudo.

Cada negócio sugere um tipo de produto ou serviço, consequentemente a abordagem para os mais variados tipo de negócios será diferente. Quanto mais os anos se passam melhores ficam as ferramentas de desenvolvimento, desta forma, a melhoria visual na internet é surpreendente. Anos atrás você não encontrava por exemplo um site todo em flash, não era tão fácil o acesso via banda larga e os sites costumavam ser mais pesados.

O Confronto

Responda a seguinte pergunta: É melhor um site bonito com conteúdo fraco ou um site de conteúdo relevante e design horrível? Certamente em ambos os casos existem os lados positivos negativos.

Os sites bonitos são capazes de gerar acessos, causar impacto a visitantes e ser admirado, porém caso não haja conteúdo relevante o visitante dificilmente retornará ao site, pois provavelmente irá em busca de conteúdo que tenha maior importância. Ao priorizar o conteúdo de qualidade provavelmente o site terá um
feedback melhor dos visitantes, conseguindo adquirir acessos constantes, entretanto dependendo do baixo nível de design do site pode perder alguns visitantes principalmente se o layout não permitir uma fácil navegação.

O Desafio

Não é necessário pensar muito para concluir que se o seu site consegue manter um alto padrão de design e conteúdo ele terá grande destaque. A partir desta afirmação é importante fazer um planejamento sobre a facilidade e disponibilidade para gerenciar o site. Caso tenha um bom design, bom conteúdo, mas não apresente atualizações, aos poucos os visitantes abandonem as visitas considerando que não encontrarão nada de novo.

Veja abaixo alguns exemplos de quando deve priorizar cada área.

Quando priorizar o Design

• Buffets;
• Lojas de Roupas;
• Festas Infantis;
• Restaurantes; e
• Espaços de Eventos.

Quando priorizar o Conteúdo

• Empresas de marketing;
• Blogs;
• Portais de Notícias;
• Sites Jornalísticos; e
• Sites de Tutoriais.

Dicas

Lembre-se que um dos fatores importantes para estar nas primeiras posições no resultados de buscas é extremamente importante um bom conteúdo. Cuidado para não exagerar em um bom design e o mesmo tornar a funcionalidade do site baixa. Se é capaz de gerar um bom conteúdo aproveite os bons serviços disponíveis na propria internet como Blogs e sistesmas de gerenciamento de conteúdo como Wordpress, Joomla, entre outros.

Para quem utiliza internet há alguns anos já deve ter percebido evoluções consideráveis quanto a legibilidade dos sites e facilidade de navegação. Isso acontece devido o aprimoramento diário da web, tanto na aplicação de novos padrões quanto nos desafios por uma internet melhor. Uma das tendências importante é o espaçamento no design dos sites.

Por que os espaçamentos são importantes?

Os espaçamentos favorecem uma melhor legibilidade, são capazes de separar áreas distintas e podem ser utilizados ainda como estratégia para dar mais destaque a uma região específica do layout. Veja as dicas a seguir.

1. Mantenha um padrão para os espaçamentos

Procure estabelecer um valor fixo para o tamanho de cada espaçamento, por exemplo, entre cada coluna e/ou bloco do seu site defina uma distância de largura e altura igual. Veja o exemplo a seguir do layout do tema para Wordpress WP Polaroid.

Observe que todas as margens de largura são iguais (nesse tema a margem é de 25px entre cada coluna), facilitando a leitura e ajudando a identificação de blocos de conteúdo sem a necessidade de bordas. O site também ganha em redução da folha de estilos (css), pois as margens sendo iguais basta definir uma única vez o valor das mesmas.

2. Margens que geram boa legibilidade

O tamanho das margens dependerá obviamente do tipo de conteúdo e design. Em geral o tamanho das margens varia de 10px a 20px em sites para resolução 800×600 e de 15px a 30px em sites para resolução 1024×768. Lembrando que estas margens citadas não são regra e é muito comum encontrar margens maiores que até mesmo facilita a leitura.

3. Cuidado com exageros

As margens também podem ser prejudiciais caso seu uso seja excessivo ou despadronizado. Imagine que uma margem muito grande poderá fazer um “buraco” no design. A despadronização de margens poderá confundir a leitura do site, fazendo com que o visitante não saiba onde deve procurar o conteúdo.

4. Observações

Cuidado para não confundir padronização com sempre utilizar o mesmo tamanho de espaçamentos e margens iguais para altura e largura em todos os blocos de conteúdo.

5. Exemplos de sites com margens bem aplicadas

Globo – www.globo.com

Mugg – www.mugg.com.br

Magnus Jepson – www.jepson.no

As cores têm significados específicos, são capazes de alterar a interpretação de uma imagem, além de serem um fator crucial para o desenvolvimento web.

Para Designers, o conhecimento das cores e suas representações são essenciais para o desempenho de um bom trabalho. Uma cor não pode ser definida apenas por gosto pessoal, pois dependendo do tipo de conteúdo oferecido existem restrições.

Todas as cores podem ter suas representações positivas ou negativas, dependendo de sua aplicação. Veremos então a algumas representações positivas e negativas das cores Vermelho, Verde e Azul (RGB – Red, Green, Blue).

Vermelho (Cor Complementar: Verde)

Representações positivas:

• Ativa
• Atração
• Coragem
• Determinação
• Dinâmica
• Energética
• Excitante
• Quente
• Paixão
• Romantismo
• Sensualidade
• Sucesso

Representações negativas:

• Agressividade
• Impaciência
• Ofensiva

Verde (Cor Complementar: Vermelho)

Representações positivas:

• Conforto
• Eficiência
• Generosidade
• Harmonia
• Natural
• Tranquilidade
• Sinceridade

Representações negativas:

• Amargo
• Ciúmes
• Ignorância
• Indiferença
• Inexperiência
• Melancólica

Azul (Cor Complementar: Laranja)

Representações Positivas:

• Autoridade
• Calma
• Frio
• Confiança
• Flexibilidade
• Honestidade
• Inteligente
• Percepção
• Proteção
• Responsabilidade
• Sinceridade

Representações Negativas:

• Deprimido
• Isolamento
• Nostalgia
• Solidão