Design de botões de design plano e limpos para que eles mostrem disponibilidade e tenham uma aparência 'bem projetada'

Comecei uma pequena estrutura CSS recentemente. ( http://mincss.com se alguém estiver interessado) Eu rapidamente criei um design inicial para alguns botões. Depois de pedir feedback sobre o UX StackExchange (e receber muitos comentários bons), fui recomendado a vir aqui para obter conselhos adicionais sobre como melhorá-los.

É assim que elas são agora, após o feedback do UXStackExchange. Eu removi a borda preta, adicionei uma "sombra" de 3px e removi o chanfro de 1px:

Vou dar uma olhada no design plano.

Ainda tenho 3 perguntas:

• Esses botões mostram capacidade suficiente? (Isso parece ser um problema com o design plano)
• Você sugeriria adicionar um pequeno gradiente?
• Eles parecem bem projetados? (sei subjetiva, mas não consigo pensar em uma maneira melhor de perguntar isso)

De bom grado (e provavelmente usarei) qualquer comentário sobre esses botões.

Eu acho que um gradiente muito sutil definitivamente melhorará a estética dos botões. Como o estilo "Metro" do Windows 8 é um grande defensor desse estilo, usarei isso como um exemplo:

À primeira vista, os "ladrilhos" parecem ter uma cor lisa, mas se você olhar de perto, há um leve gradiente indo da esquerda para a direita. É mais perceptível em alguns do que em outros, mas todos eles têm. Como Yisela disse, você quer que esse gradiente seja quase imperceptível, quase subconsciente.

Como você mencionou, ao projetar botões simples, você precisa ficar de olho em algumas coisas. O primeiro sendo, eu diria: Parece um botão?

Isso não é necessariamente algo que depende apenas do botão, mas do restante dos elementos da sua interface do usuário. Se você estiver usando botões simples, sugiro que evite formas / estilos semelhantes em qualquer outro lugar. Você precisa manter um vocabulário visual para que as pessoas possam reconhecer instantaneamente esses elementos como botões e não como outra coisa.

As sombras são boas para isso, porque dão uma impressão de volume. Portanto, eles são mais fáceis de ver. Além disso, estamos acostumados a botões com esse efeito. No entanto, eu consideraria o uso de uma cor semelhante à cor do botão. Por exemplo, em vez de usar preto no botão vermelho, use um vermelho com 50% de opacidade. Outra opção para tornar os botões mais óbvios é adicionar um ícone (branco, sólido).

Eu teria muito cuidado com gradientes . Não porque são ruins, mas porque na atual tendência plana super simples, eles não se encaixam muito bem. Especialmente se as cores ou tons que você usa são muito diferentes. Um pequeno gradiente pode parecer muito bom, mas precisa ser minúsculo, quase imperceptível.

Em resumo, eu gosto da aparência deles. Eu mudaria apenas a cor da sombra para algo mais claro e talvez tornasse o texto em primeiro plano mais claro também, provavelmente branco. A fonte é boa e você está usando um bom preenchimento, um ótimo trabalho! Vejo que você os está usando no site, mas abaixo deles você tem um conjunto de notificações em tons pastel que parecem um pouco semelhantes. Eu reconsideraria o estilo deles, pois eles podem ser um pouco confusos e tentaria usar as mesmas cores em todo o site (todos os tons pastéis ou todos os contrastes).

Embora eu possa respeitar a criação de botões mínimos, você realmente precisa considerar se / como eles podem ser aplicados na Web em sites diferentes, como você está criando uma estrutura. Se você estiver fornecendo botões, precisará fornecer praticamente tudo o que alguém possa usar como tabelas, formulários etc. (no qual tenho certeza de que ainda está trabalhando).

Dê uma olhada no Bootstrap, se você ainda não o fez. O Bootstrap é uma estrutura CSS maravilhosamente simples e limpa que pode ser facilmente adaptada ou integrada a outro site e pode dar algumas idéias.

Agora, no que diz respeito a esses botões reais, eu brincaria com uma borda, pois isso ajuda a encapsular o componente e uma borda é bastante comum a muitos botões. Eu verifiquei o site e gosto dos estados de passar o mouse / clicar e acho que você se saiu bem com eles.

Se você deseja introduzir gradientes, seja consistente e certifique-se de usá-los em outros elementos também; caso contrário, você terá profundidades concorrentes, o que será apenas uma distração.

Os botões parecem bons, no entanto, o tipo de botão que mostra acessibilidade e sensação no estilo plano geral é o local em que a parte da sombra é colocada, é uma pequena faixa na parte inferior do elemento principal (botão) e é principalmente uma sombra mais escura do cor do botao.