Quais são as vantagens relativas de design plano, design de material e skeuomorfismo?

8

Eu estive observando as diretrizes do Google para essa coisa chamada "design de material" e tenho seguido algumas delas. No entanto, também vejo muitos sites usando design plano: Twitter , Codecademy e Gitter - e isso é apenas alguns. Depois, há aqueles que usam gradientes CSS3, sombras etc. e imagens detalhadas para criar um site que pareça real (me corrija se eu estiver errado, mas não é isso o que é o ckeuomorfismo?), Como a página inicial para o Twitter Bootstrap 2 .

Pelo que entendi, o design plano reduz a carga no tráfego móvel.

Que vantagens (em termos de velocidade / UX / etc., Especialmente) cada uma oferece uma à outra?

DᴀʀᴛʜVᴀᴅᴇʀ
fonte
Eu acho que essa é uma pergunta interessante a ser levantada. Meu pensamento inicial é que os projetos ckeuomórficos podem ter uma desvantagem de velocidade se dependerem muito de imagens. Suponho que é isso que você entende por design plano, reduzindo a carga de tráfego móvel. Mas, como contraponto, um projeto ckeuomórfico ainda pode ser realizado com os muitos recursos disponíveis no CSS3, então eu temo que a resposta para saber se um ou outro é vantajoso em relação à velocidade seria "às vezes sim, às vezes não"
JohnB 27/09/14
@JohnB Não consigo acessar o site. Eu recebo um erro 'loop de redirecionamento' no Chrome - é melhor não mergulhar em uma discussão do AT aqui.

Respostas:

11

O ckeuomorfismo é realmente o oposto do design plano . O "Design de materiais" do Google é apenas o nome da marca para suas interpretações específicas de design plano. Ainda é um design plano. "Design plano" foi cunhado pela Apple quando eles lançaram o iOS7. Ele pegou porque era o primeiro termo usado, poderia ser facilmente chamado de "Design de Material" se o Google o fizesse primeiro.

A prática do skeuomorfismo é adicionar elementos visuais que você esperaria ver se o objeto era fisicamente real, em vez de projetado na tela. Um exemplo seria sombras e destaques. Eles existem em tudo no mundo real, mas em nada no mundo digital. A adição desses elementos ckeuomórficos foi projetada para fazer com que os humanos se sintam mais familiarizados com os elementos digitais.

Design plano é o oposto disso. No "design plano", não há consideração pela física e iluminação do "mundo real". Elementos digitais são criados, no entanto, o designer deseja fazê-los sem se preocupar com o que a "realidade" faria com o elemento se o objeto fosse físico.

A página inicial do bootstrap não é um exemplo de skeuomorfismo. É um exemplo de design plano em geral. Embora se possa argumentar que o retângulo de inserção no meio com o efeito de "gravação em relevo" também é ckeuomórfico. Portanto, talvez um "híbrido" possa ser a melhor descrição.

Em termos de vantagens / desvantagens tecnicamente - não há raciocínios sólidos para escolher um sobre o outro.

Frequentemente, para obter imagens de efeitos ckeuomórficos confiáveis ​​de alta qualidade, são necessárias. As imagens aumentam naturalmente as solicitações HTTP e o carregamento do navegador. Se você renunciar a imagens em favor de CSS skeuomorphic, o CSS pode ser extremamente complicado e grande. Embora seja necessário diminuir o número de solicitações HTTP, o tamanho adicional (kb) de um arquivo CSS com elementos cueuomórficos pode superar a redução de solicitações HTTP (do ponto de vista do usuário).

Geralmente, o design plano é facilmente realizado com CSS3 básico. Se uma imagem for necessária em um design plano, a mesma imagem provavelmente também será necessária em um design ckeuomórfico. Então eles se compensam em termos de vantagens / desvantagens. CSS Flat Design é geralmente menos complexo e mais fácil de editar, mas não precisa ser. É bem possível criar um design plano com propriedades CSS muito complexas. A maioria dos designs planos contém gradientes - mas não gradientes do "mundo real", com base no que a luz faria se o objeto fosse real. Todos os ícones iOS7-8 ou Windows 8 da Apple usam gradientes. Gradientes meramente muito sutis, em oposição a "fazer parecer que estão saindo" gradientes.

No final, não há nenhuma razão difícil para o design plano ser tecnicamente melhor ou pior do que o skeuomorfismo. Tudo se resume a uma questão de preferência por parte do designer. Tanto o skeuomorfismo quanto o design plano são meramente tendências de design, sem qualquer base no raciocínio técnico.

é semelhante a perguntar "Qual é tecnicamente melhor um site vermelho ou um site azul?" - não há resposta além de "O que você preferir".

Scott
fonte
1
Uma nota é que os efeitos skeuomorphic feita puramente em CSS causaria uma enorme diminuição desempenho passado apenas carregar o arquivo porque gradientes, caixa de sombras, etc, são muito intenso
Zach Saucier
Eu faço elude para que no @ZachSaucier resposta :)
Scott