posts da categoria Design

O novo formato de arquivo do Sketch 43

Algumas informações sobre o novo formato de arquivo do Sketch 43

por Diego Eis

O futuro das interfaces: Chatbots

Estamos acostumados a interagir diariamente com interfaces gráficas, seja no computador, celular, tablet, smart tv, etc. Naturalmente incorporamos a utilização dessas interfaces para obter nossos objetivos no dispositivo em questão, seja fazer uma busca no google, ver uma página no Facebook, ler um artigo em um portal de notícias ou escolher um filme no Netflix. Podemos não perceber, mas quando ligamos para um call-center onde a máquina (URA — Unidade de Resposta Audível) nos pede para dizer em voz alta o que desejamos, ou o número correspondente ao que queremos, também estamos interagindo com uma interface de voz para atingir nosso propósito.

por Raphael Guastaferro

Reação é melhor que previsão

Entender o usuário é algo difícil. Você pode perceber isso facilmente comparando a sua forma de usar algum serviço de internet, digamos o Facebook, com qualquer outra pessoa ao seu redor. Provavelmente você tem um costume totalmente diferente de navegar, consumir conteúdo, comentar etc. Pessoas diferentes, usam de formas diferentes um mesmo produto e isso é totalmente normal. É por isso que tentar prever cenários para desenvolver um produto para internet é algo complicado.

por Diego Eis

Como organizar e nomear o conteúdo do projeto?

Pode até parecer uma questão simples ou de pouco valor no projeto, mas a verdade é que a forma que você solucione essa ponto será determinante para o sucesso e o card sorting é o melhor caminho! O card-sorting é uma técnica usada para descobrir como o usuário classifica determinada informação em sua mente. Muitas pessoas acreditam que podem classificar a informação pelos outros pois acham que sabem como será a melhor forma.

por thonyconde

Indexando mobile-first – Google anuncia novidades

Segundo o Google, atualmente a maioria das pessoas já fazem busca utilizando um dispositivo móvel. Entretanto, os sistemas de classificação ainda costumam olhar a versão desktop do conteúdo da página em questão para dar relevância ao usuário. Pensando em mobile-first, isso pode trazer alguns problemas caso a página mobile tenha menos conteúdo do que a página desktop porque os algoritmos do Google não estão avaliando a página que está sendo vista pelo usuário da página mobile.

por Rodrigo Fávaro

Um software para front-end e UI Designers

Já faz um tempo que tento encontrar um software que seja bom para fazer o design das interfaces, em que eu possa compartilhar protótipos e ainda fazer as animações de UI. Comecei a usar o Adobe Experience Design, que no começo foi uma boa experiência, mas como sabemos, a Adobe geralmente demora um pouco para evoluir os seus softwares (também quando evolui, o bicho pega…rs). Sinto falta de maiores opções para animações de interface, uma coisa simples como fixar o header em um protótipo, é impossível.

por Rodrigo Godoy

CSS3 — Trabalhando com Múltiplas imagens background-images

Quem nunca se deparou com o um layout com imagens “sobrepostas” que precisavam ficar suspensas sobre múltiplas imagens de fundo, com CSS3, você pode aplicar aos elementos múltiplas imagens como plano de fundo sobrepostas. Sem a utilização do Z-index, é isso mesmo “necas de pitibiriba” de Z-index. Que Z-index que nada, agora a MODA é Background-image !!!

por Moisés Lopes Ferreira

Hierarquia no design

Hierarquia, segundo o dicionário Michaelis, é a categoria atribuída às pessoas ou às coisas, classificadas de acordo com a ordem de importância, crescente ou decrescente. Dessa forma, organizar hierarquicamente é o mesmo que definir graus de importância à alguém ou à alguma coisa. A hierarquia no design tem o mesmo objetivo da definição acima citada. Hierarquizar no design é controlar a transmissão e o impacto da mensagem. O designer sabe disso e faz uso da escala, cor, tonalidade, peso, inclinação, espacejamento, intervalos e inúmeras outras técnicas para atingir o objetivo de organizar a informação.

por Fabio Marelli

Faz uma animação legal aí!

Sempre que um projeto começa, eu me questiono se a agência entende a importância da animação para o design de interface e como o trabalho do motion designer pode contribuir para o sucesso da experiência interativa, reforçando tudo o que foi pensado desde o nascimento do projeto, lá na arquitetura de informação. Muitas vezes, ouvi que o motion designer coloca a mão no projeto para refinar e fazer firulas no site.

por Vanessa Nunes

React Native: Construa aplicações móveis nativas com JavaScript

| Construir aplicações multiplataforma nunca foi tão simples e divertido. Conheça o framework que está mudando os rumos do desenvolvimento mobile baseado em JavaScript.

por Carlos Cabral

Como uma simples mudança de cores pode revolucionar seu site

Testes A/B: design orientado à conversão de leads qualificados

por David Arty

Nada de Capa – Quando a firula é mais do que a função

Quem assistiu a animação da Pixar “Os Incríveis” conhece essa cena do vídeo. Nela o Sr. Incrível vai até a estilista Edna Mode para remendar o seu uniforme velho, mas ela o convence a criar um novo uniforme. Ele aproveita a deixa e pede para ela criar uma roupa clássica bem legal com capa e botas, quando ela berra a famosa frase: Nada de capa! À partir daí a Edna cita uma relação de vários heróis que foram detonados por causa da capa.

por cristianoweb

A Arte da Sedução dos Produtos

Você já reparou, que quando estamos em um grande grupo, acabamos sendo influênciados pela maioria? Mas você deve estar pensando: “Eu não sou assim. Gosto de ser diferente”. Será mesmo? Para explicar melhor e de forma simples, vou usar o mesmo metodo usado pela psicóloga Susan M. Weinschenk em seu livro Neuro Web Design: What Makes Them Click?. Nele ela divide o cérebro em três partes: Cérebro Antigo, Cérebro do Meio e Cérebro Novo.

por Marcus Himura

Precisamos confirmar a senha?

Você deve me entender: formulários são muito chatos. Tanto para desenhá-los quanto para produzir código front-end. Mas cada vez que desenho um formulário, eu tento simplificar ao máximo. A inclusão ou a exclusão de um campo pode afetar a taxa de conversão ou causar um desinteresse do usuário ao produto. Mas um dos campos que sempre me deixa com a pulga atrás da orelha é o de “cadastramento de senha”.

por Marcus Himura

Material Design com Materialize

Crie seu site utilizando um Framework totalmente material design, que não deixa a desejar em nada e seus resultados podem te surpreender. Do Conceito à prática com layout Material.

por Tiago Luiz

Gantry 5 – Desenvolvimento de templates para Joomla e WordPress

O Gantry é um framework de template Open Source e gratuito para o desenvolvimento de templates em Joomla e Wordpress.

por Léo WG

Material Design Lite: O framework do Google

A biblioteca de componentes e templates já conhecida dos aplicativos agora para websites em CSS, HTML e Javascript.

por Isaque Melo

Motion UI com estilos: Zeh Fernandes no Meetup CSS SP

A experiência em participar de um Meetup sobre Motion UI.

por Danilo Vitoriano

Rumo ao hexa(decimal)

Quantas vezes na sua vida você já se deparou com um código hexadecimal? A gente sabe que seu Command-C tá em um relacionamento sério com ele. Mas afinal, como que um punhado de letras e números representam essa tralharada de cores (ou o que quer que seja) que nós vemos por aí nos dispositivos digitais? Existe um artigo ótimo no Tableless explicando tudo o que você precisa saber sobre cor aqui.

por Guilherme Buchalla

Flat design: a nova tendência dos gradientes

Como utilizar gradientes em meio ao flat design nas suas composições web.

por Isaque Melo

O nome UX está errado

A sigla UX não é exclusividade de um profissional específico. Só para os prepotentes.

por Diego Eis

Então você quer ser designer web? (Parte 1 – Cores)

Nesta primeira parte, conheça algumas ferramentas para trabalhar com paletas de cores e tornar-se um designer web.

por cristianoweb

Realinhamento ou Redesign

Eu não sei você, mas eu adoro quando meus apps e websites preferidos mudam seus designs.

por Diego Eis

Tendências Web 2015 para desenvolvedores

Algumas tendências fortes que ainda veremos em 2015 e que podem perdurar ainda mais.

por Paula Berrocal

MaterialUp – Uma coleção de conceitos usando Material Design

Alguns conceitos de animação e design baseados no Material Design do Google.

por Diego Eis

Crie layouts simples. SEMPRE!

Você pode querer fazer um layout simples, mas seu cliente pode não entender de comunicação. E aí, o que você faz?

por cristianoweb

Não sou artista, sou designer

Hello World, eu sou cristianoweb, e esse é o meu 1º artigo no Tableless! Olá amigos leitores, esse será um texto de estreia! Para começar, nada melhor do que eu me apresentar, certo? Meu nome é Cristiano Santos, mais conhecido na Internet como cristianoweb e trabalho com criação desde 2001. Na época eu era designer gráfico e diagramador no setor de criação de uma grande escola/curso aqui do Rio de Janeiro.

por cristianoweb

Sobre o design oco

Sobre design ordinário e argumentos.

por Diego Eis

Anotações sobre Material Design do Google

Anotações sobre o Material Design, o novo conceito de design que o Google tem adotado em seus produtos.

por Diego Eis

UX: uma Responsabilidade de Todos

“UX não é só coisa de arquitetos de informação e designers. UX é a base de tudo.”

por Lenilson Nascimento

Design de Aplicativos para Android – Parte 2

Conheça os pixels independentes e as pilhas de resoluções, aprenda a criar e organizar entregáveis de design e descubra ferramentas úteis para criar seus próprios aplicativos Android.

por Dani Guerrato

Design de Aplicativos para Android – Parte 1

Conheça mais sobre a plataforma e veja quais são os primeiros passos para projetar suas próprias aplicações.

por Dani Guerrato

Transições inteligentes na experiência do usuário

Alguns websites superam outros, seja em seu conteúdo, usabilidade, design, funcionalidades, etc. Detalhes do design de interação e animação fazem uma diferença fundamental em websites modernos. Vamos compartilhar algumas lições tiradas de vários modelos e analisar por que esses simples padrões funcionam tão bem.

por Raphael Fabeni

Qual o seu valor como designer?

Os designers hoje tem como pauta principal pra discutir a profissão o “sobrinho do corel” ou “o illustrator é melhor que corel”. E ao mesmo tempo reclamam da falta de respeito que a profissão sofre. O que me surpreende não é o fato dos dois primeiros assunto serem completamente banais para o reconhecimento, mas que se pretende chegar ao objetivo de ser respeitado sem, muitas vezes, lutar por ele. E o pior, sem ao menos respeitar a si próprio como profissional.

por Lucas Guarabyra

Sobre Cor e Webdesign II

| Entenda a diferença entre matiz, luminosidade e saturação, aprenda a criar paletas de cores funcionais e conheça a fórmula mágica do contraste.

por Dani Guerrato

Ferramentas e sites para tornar mais ágil o seu desenvolvimento

No dia-a-dia, a correria em cumprir prazos nos faz buscar e fazer uso de ferramentas que possam auxiliar na velocidade de desenvolvimento. Seja no front ou no design, em tempos de mudanças e transições, nada mais justo que uma lista de algumas ferramentas especiais para que você mantenha seu processo profissional e ágil.

por Thaiana Poplade

3 patinhos foram passear. Por que? Quem eram eles?

Usuários tomam decisões a todo momento, você precisa identificar os perfis de usuários, assim como seus objetivos e comportamentos antes de projetar sua interface, assim saberá criar um verdadeiro Design centrado no usuário.

por Bernard De Luna

O Designer Gladiador

Maximus era um grande guerreiro e demonstrava ser um excelente observador, desde pegar um punho de terra até reconhecer gladiadores nervosos e grandes parceiros de batalha. Antes de iniciar um projeto, você precisa reconhecer a arena e todas as suas variáveis.

por Bernard De Luna

Design para Google Glass

Saiba tudo sobre o novo gadget da Google e como desenvolver conteúdo projetado especialmente para esta nova mídia.

por Dani Guerrato

Design para telas sensíveis ao toque

Conheça quais são as técnicas, padrões e principais desafios para o desenvolvimento de aplicativos nativos e interfaces web touch screen.

por Dani Guerrato

Criando mockups usando o Smarts Object no Photoshop

Criando mockups simples no Photoshop.

por Flavio Santana

Arquitetura da Informação em Landing Page

Construir uma boa arquitetura de informação e aprofundar o assunto da página faz toda a diferença para se obter bons resultados de conversão.

por Rodrigo Simoni

Padrões Complexos de Navegação no Design Responsivo

Como lidar com uma navegação complexa no design responsivo? Nesta tradução, Brad Frost mostra os prós e os contras na utilização de alguns padrões de menus.

por Will Sales

Usando o plugin 960gs e o Photoshop

Entenda como funciona o Grid 960. Ideal para iniciantes.

por Flavio Santana

O que é Design Atômico?

Conheça a nova metodologia para criação e desenvolvimento de layouts através de sistemas de interface modulares.

por Dani Guerrato

Storytelling

Neste artigo descubra como técnicas de storytelling podem ser aplicadas em web design para transformar a experiência do usuário.

por Dani Guerrato

Sobre Cor e Webdesign

Entenda o funcionamento dos sistemas de cores mais utilizados da web e conheça ferramentas úteis para criar e organizar suas próprias paletas.

por Dani Guerrato

Design Responsivo na prática: do rascunho ao digital

Quer criar um projeto de design responsivo e não sabe por onde começar? Acompanhe passo-a-passo a criação de um layout do wireframe até a apresentação do design com indicações de artigos, dicas e ferramentas para facilitar o seu processo criativo.

por Dani Guerrato

Slides para devs #5 – Design

Slides de apresentações sobre design.

por Diego Eis

Slides para Devs #4 – Retina display, imagens de alta resolução e afins

Apresentações sobre retinas displays, imagens em alta resolução e como construir websites retina ready.

por Diego Eis

Design responsivo: foco no ser humano

Gostaria de fazer uma rápida analogia sobre o desenvolvimento do design responsivo de hoje com os softwares de vinte anos atrás.

por Reinaldo Ferraz

Grids semânticos com LESS

Aprenda a construir rapidamente um grid semântico e responsivo utilizando CSS e uma ajudinha do LESS.

por Dani Guerrato

A linguagem como parte integrante da user experience

A linguagem é a ferramenta que utilizamos para entender e definir o mundo. E isto vale também para a criação de interfaces.

por Dani Guerrato

Locaweb Style – Como iniciamos

Como iniciamos e por que resolvemos criar um framework próprio aqui na Locaweb.

por Diego Eis

Favicons

Os favicons são pequenos mas indispensáveis. Entenda como eles funcionam e quais as melhores práticas.

por Dani Guerrato

Front-end, UX e Back-end

Na verdade não é cada um na sua. Ou você levanta para ver o que acontece no mundo ao seu redor ou você atrofia suas skills.

por Diego Eis

Guia de Estilos

Entenda mais sobre guias de estilos, padrões para equipes, organização de CSS e mais.

por Dani Guerrato

Um guia completo de tipografia para a web

Entenda os princípios da tipografia na web e saiba como melhorar a leitura dos usuários.

por Dani Guerrato