Curiosidade O que é Design de Interfaces? 4e5
Informação Design Responsivo 6e7
Notícia Um incrivel projeto de redesign para o site da Pixar 8 , 9 e 10
Portifólio Fandanz App 11
Informação Diferença entre UX e UI 12 e 13
Atualidade Têndencias do Design de Interface para 2015 18 e 19
Curiosidade
O que é Design de Interface?
Design é um campo interdisciplinar que compreende atividades de concepção e projeto de um novo produto que pode, por exemplo, ser um veículo ou apenas seu painel, um novo modelo de telefone celular ou computador, uma interface (gráfica) de usuário de alguma loja virtual ou de sistema desktop (que você use em seu computador pessoal ou notebook).
“Simplicidade no design é essencial para a satisfação do usuário e sucesso de um produto ou sistema. “
4
Design é, na realidade, uma atividade que abrange uma ampla gama de aplicações e ao mesmo tempo requer do designer (ou algumas vezes chamado projetista) uma atenção especial com os aspectos
funcionais e estéticos do produto, além de exigir muita imaginação e habilidade para criar modelos e fazer ajustes iterativos e re-design. Os designers assim como os artistas têm sempre sido influenciados pelo ambiente onde vivem, e isto reflete exatamente o tempo e o lugar. Em outras palavras, o design similarmente a arte acompanham as necessidades de seu tempo e lugar. Segundo o pensamento de Antoine de Saint-Exupéry capturado na frase acima, é difícil saber quando se alcançou a perfeição no design. Entretanto, ele apontou que ela pode ser alcançada tornando-o mais simples, que podemos interpretar como ´facilitar a vida do usuário´. Simplicidade no design é essencial para a satisfação do usuário e sucesso de um produto ou sistema. Uma questão que costumo levantar em palestras e aulas com meus alunos é: Por que o Google se tornou no site de buscas mais usado? A resposta é: A necessidade
humana por acesso a informação e simplicidade. O segundo motivo é, na realidade, o principal. Não há nada mais fácil do que fazer uma busca no Google. Você tem uma tela quase toda branca e apenas uma janela na qual você digita as palavras referentes ao conteúdo de seu interesse. Você nem qualquer outra pessoa precisa de treinamento ou auxílio para fazer isso. Por que? Trata-se de um único serviço que disponibilizado ao usuário e da forma mais simples possível. Hoje em dia, os processos existentes nas empresas exigem que haja um suporte automatizado às tarefas das pessoas de maneira estruturada e previsível de trabalho. Além disso, há a necessidade imprescindível de interação. Tudo
isso requer adequado design de equipamentos e de sistemas (ou ferramentas) de software de modo a tornar mais intuitiva e fácil às atividades de seus usuários, minimizando o tempo de realização do trabalho. Disso tudo o que foi dito acima, você deve perceber que o design é uma atividade essencial às pessoas e determinante no sucesso dos produtos, especificamente, os novos produtos. O surgimento e, principalmente, o sucesso de novos produtos no mercado é determinado pela riqueza e simplicidade do design. Veja que paradoxo. Ser ao mesmo tempo rico em detalhes e suficientemente simples de usar. Um ótimo exemplo recente é o i-Pod da Apple.
http://www.espacoacademico.com. br/076/76amsf.htm https://mihijoylasrrss.wordpress. com/2015/03/03/las-herramientas-decontrol-parental/
5
Informação
Design Responsivo Design Responsivo é uma técnica de estruturação HTML e CSS, em que o site se adapta ao browser do usuário sem precisar definir diversas folhas de estilos para cada resolução.
Como surgiu?
Por que usar?
Em 2010, pensando em melhorar a sua experiência de navegação, Ethan Marcotte criou o artigo Responsive Web Design para o blog A List Apart. Ele apresenta o arquiteto inglês Christopher Wren, que disse certa vez que arquitetura é uma arte que “objetiva a eternidade”. Todo arquiteto que se preze quer construir um prédio que seja admirado (e habitado) por séculos… Infelizmente o Design Digital não tem a permanência da arquitetura. Na verdade, o que é projetado para internet hoje, já estará desatualizado daqui a duas semanas!
Nos tempos atuais, além dos desktops e notebooks, é possível acessar a internet através de smartphones, tablets, televisores e já existem até mesmo geladeiras que possuem internet para algumas finalidades, como buscar receitas ou ler as últimas notícias, por exemplo.
http://www.princiweb.com.br/blog/frontend/css/o-que-e-design-responsivo.html
6
De acordo com a pesquisa realizada pela WMcCann, 41% dos entrevistados acessam a internet pelo celular e, dentre estes, 47% utilizam banda larga móvel (3G). Além disso, 44,4% das pessoas que ainda possuíam o celular convencional, disseram que pretendiam trocar de aparelho em 6 meses ou menos. Como fazer?
O Design Responsivo usa Media Queries, que em uma tradução livre é consulta de mídia. São expressões que direcionam o visitante do seu site para uma folha de estilos diferente de acordo com o dispositivo que ele estiver utilizando.
Quer saber mais? Ainda é difícil encontrar artigos em português que expliquem tão bem o passo-a-passo de como fazer um Design Responsivo, mas indicamos esses três artigos do blog da PopUp Design.
i b^ okf kd
l ki f kb
i b^okf kd
l ki f kb
i b ^ o kdf k
l ki f kb i b ^ o k fd k
l ki f kb
7
Notícia
Redesign
Um incrivel projeto de redesign para o site da Pixar Um projeto de redesign para o site de um dos maiores estúdios de animação do mundo. Ousado, não? Quem já assistiu às animações da Pixar sabe que coisa boa é o que não falta. “Procurando Nemo”, “Monstros S.A.”, “Universidade Monstros”, “Toy Story”, além dos lindíssimos curtas. Um mundo mágico de encantamentos e cores. Tanta coisa que dá vontade de ir lá no site deles e rever de tudo um pouco. Mas, quando a gente vai lá no site da Pixar, dá uma olhada meio torta e pensa : “será que eu tô no site certo”? Um frame fixo no meio da tela e um pequeno “slider”
8
que permite navegar entre os tópicos do site não parece lá muito encantador. O fundo preto dá uma carga sóbria ao site, enquanto os produtos feitos pela empresa são lúdicos e animados. Quase não tem integração com players de vídeo, nem pra ver teasers ou trailers. Basicamente todo o conteúdo aparece em forma de popups sobre lightboxes. Será que a Pixar parou no tempo ou está ocupada e deixou um pouco o site de lado? A notícia boa é que não falta no mundo gente talentosa com vontade de resolver problemas. E assim os designers/ videografistas Martin Vlas (Holanda), Melissa
Kumaresan (Emirados Árabes) e Boutaib Yassine (Marrocos) criaram por conta própria uma nova versão para o site da Pixar. Com um layout mais limpo, fundo claro e boxes coloridos, o resultado confere mais leveza e bom humor ao conteúdo visual. Toda a iconografia também foi desenvolvida, em outline e contornos arredondados. O projeto possui sitemap, simulação em vídeo das transições, versão responsiva mobile e novas propostas de interface e interação, como área de login com atividades “gamificadas“, com ranking e premiações.
Depois
Antes
9
E tambĂŠĂŠem um modelo do site para smartphones
Quem quiser saber mais e ver o funcionamento do site confira o projeto completo no Behance http://www.cutedrop.com. br/2015/03/um-incrivel-projetode-redesign-para-o-site-da-pixar/
http://www.cutedrop.com.br/2015/03/ um-incrivel-projeto-de-redesign-para-osite-da-pixar/
10 10
Portfolio
Projeto completo em: http://www. characterdesignserved.com/ gallery/Fandanz-App/16451269 11 11
Informação
Diferença entre
O termo User Experience (UX) referese a uma área de conhecimento que estuda todas as interações dos usuários em relação a um determinado produto ou serviço. Trata-se de um conceito que visa tornar a navegação mais funcional e lógica para os clientes e/ou visitantes de um site ou sistema. O UX design é o estudo de como uma pessoa se sente em relação a uma interface ou um sistema. O projetista de UX deve analisar como esses usuários se sentem em relação à usabilidade, utilidade e à eficiência na execução de tarefas, e assim por diante.
O user interface, por sua vez, nada mais é que a parte estrutural de um site ou de um software. Trata-se do meio através do qual o usuário vivencia a experiência, do layout onde há a interação entre as pessoas e o computador. É a parte visível do website ou sistema. Em um contexto estratégico, o UI está dentro do UX design. Por exemplo, o UI designer é o profissional que desenvolve o layout (desenha o site) de acordo com o que a equipe de User Experience planejou para as experiências e interações do usuário com o website.
Indispensáveis para a usabilidade de sites, softwares e aplicativos, os conceitos de UX e UI design têm se tornado cada vez mais importantes para as discussões a respeito de soluções para web. Curiosamente, no entanto, por serem relativamente novos, os dois termos ainda geram certa confusão quanto às suas definições específicas. Resumidamente, em relação ao design de um site, é possível definir o UI, ou User Interface, como o “desenho” ou layout de um projeto online. Já o UX Design, ou User Experience, é toda a parte de interação e comportamento que um website proporciona.
12
http://wassai.com.uy/pt-br/entenda-adiferenca-entre-ui-e-ux-design/
13
Atualidade
Tendencias do Design de Interface para 2015
1 Quanto maior, melhor Não é só o texto que é ficará maior na web: imagens também! Costumava haver limitações importantes em mente no tamanho das imagens por causa da largura de banda limitada, mas isso é cada vez menos um problema nos dias de hoje. Como resultado, as imagens grandes tomaram conta da web. Em 2015, as imagens vão se tornar o centro da atenção de maneiras novas e interessantes. Técnicas fascinantes surgirão para redimensionamento responsivo, extraindo cores dominantes para os fundos, e otimizando imagens cada vez mais.
2 Flat Design Depois de sair em partes separadas da indústria — em linguagem UI da Microsoft, no novo guidelines do Google, e nova estética usada pela Apple — a tendência do flat design está apenas começando. Enquanto alguns têm argumentado que há problemas com flat design no reino de 14
interfaces com o usuário, o consenso geral é que é uma técnica favorável para o web design. Isso tem tudo a ver com a nossa forma de consumir o conteúdo na web, bem como a tecnologia por trás servindo as páginas da web. Flat design vem com princípios minimalistas, que por sua vez resulta em sites que são flat e descomplicado, rápido e com conteúdo focado.
3 Efeito Parallax Talvez a tendência mais impressionante seja a animação em scrolling e o efeito Parallax. Nós podemos encontrar em todos os lugares, até mesmo em grandes sites como algumas das páginas de produtos da Apple e Google. Usando rolagem em vez de clicar como uma técnica de navegação bem sucedida. Primeiramente, requer menos tempo de carregamento da página, e o mais importante é o fato de tornar mais fácil para criar transições suaves de um ponto a outro sem atualizações dissonantes. As informações estão sempre fluindo.
4 Webgráficos Nós somos muito visuais, temos a tendência de absorver melhor as informações quando as vemos apresentadas de forma gráfica, o que resultou na popularidade dos infográficos. Criamos o infográfico como uma maneira fácil de transportar grandes quantidades de informação com um elevado grau de retenção. Uma nova tendência surgiu. Webgráficos! Muito parecido com infográficos, os webgráficos transmitem grandes quantidades de informação, mas envolvem elementos que permitem ao usuário interagir com a informação. Eles são visualmente mais atraente do que infográficos e aumentam significativamente a atenção com o usuário. Em 2015, os designers vão descobrir que mais clientes vão exigir webgráficos interativos como parte de um projeto personalizado. Você pode esperar para ver isso crescer em popularidade e estabelecerse como um dos principais componentes da moderna web design. Fontes: http://www.des1gnon.com/2014/12/7tendencias-cruciais-para-web-designem-2015/
1
2
3
4
15