Diário de bordo

[q-midia]

You are what you look at.

Dan O'Sullivan Mais citações

[q-midia]

Google Glass

[q-midia]

Storytelling pode ser definido de várias maneiras, mas a que importa nesse caso é que se trata de uma poderosa ferramenta para compartilhar conhecimento, utilizada pelo Homem muito antes do que qualquer mídia social. Para ser mais exato, há algo em torno de 30 a 100 mil anos, quando acredita-se que o Homo Sapiens Sapiens desenvolveu a linguagem. Para entender essa ferramenta é preciso saber a diferença entre duas palavras da língua inglesa: “history” e “story”. A primeira está relacionado com fatos reais, como a queda do Império Romano ou alguma coisa que aconteceu na sua vida, rotina ou não. A segunda é uma estrutura narrativa, geralmente ligada à ficção, mas não necessariamente. Na língua portuguesa o correto é escrever “história” para ambos os casos, por isso, a partir de agora, entendam que sempre estarei me referindo à “story” ok? Contar uma história é encadear eventos de maneira lógica, dentro de uma estrutura com certos padrões que, de forma muito resumida, são: - Uma quebra de rotina. Histórias são sempre sobre eventos extraordinários. A não ser em “filmes de arte”, não há motivo para contar uma história sobre o cotidiano. - Pelo menos um protagonista, que é o personagem com o qual as pessoas devem se identificar. Ele sempre deve estar buscando algo. - Pelo menos um antagonista, que pode ser desde um super-vilão estereotipado até uma sociedade inteira, uma doença, o tempo etc. O importante é criar obstáculos para o protagonista. - Conflito, ou seja, a tensão desse embate entre os elementos opostos. É isso que segura a atenção do público. - Uma sequência de eventos com começo, meio e fim, passando por pelo menos um climax. O famoso “plot“, essencial para que a história faça sentido para as pessoas.

updateordie.com

Site sensacional: http://www.storytellers.com.br/

[q-midia]

Dicionário Visual: Cores e tintas [Infográfico]

Fonte: Printi

[q-midia]

Impressora 3D que faz balas, chocolates e outros doces chegam ao fim do ano.

Linha de impressoras 3D Chef Jet, do diretor-criativo Kyle von Hasseln, será comercializada por R$ 4 mil a R$ 10 mil.

Mas é exatamente esse o objetivo das impressoras 3D Chef Jet e sua versão mais sofisticada Chef Jet Pro, idealizadas pelo diretor-criativo Kyle von Hasseln, que nesta semana apresentou os modelos em Austin, nos EUA. A impressora 3D produz balas, colares de chocolates e outros quitutes comestíveis, inclusive adornos para bolos de noiva. Um protótipo foi apresentado por Hasseln no festival multidisciplinar de tecnologia SXSW.

O processo para imprimir os doces começa com a elaboração de um modelo tridimensional do objeto. O adorno imitava um detalhe dos pratos nos quais foi servido o banquete.

tecmundo.com.br

[q-midia]

Impressora 3D consegue moldar metal “contra a gravidade”

Sistema trabalha com braços robóticos e utiliza metal líquido para realizar a composição dos objetos - Se você sempre quis uma impressora 3D com a capacidade de moldar objetos a partir de metal líquido, você precisa conhecer o protótipo criado pelo Joris Laarman Studio. O sistema é capaz de imprimir fios metálicos com muita rapidez e em diversos eixos, aço, aço inoxidável, alumínio, bronze e cobre com braços mecânicos que trabalham para se adaptar melhor às diferentes necessidades dos usuários.

[q-midia]

História do Google em 02:13

rcastrodesign.com.br

[q-midia]

Dieter Rams

Idolatrado por muitos, o designer alemão Dieter Rams é considerado um dos mais influentes designers do século XX. De 1947 a 1953, Rams estudou Arquitetura na Escola de Wiesbaden, além de realizar cursos de carpintaria, sendo influenciado especialmente por seu avô. Após ter trabalhado para o arquiteto Otto Apel, entre 1953 e 1955, Rams passou a integrar o setor de produtos eletrônicos da Braun, empresa da qual se tornou diretor de design em 1961, posição que manteve até 1995, quando foi sucedido por Peter Schneider.

Dez Princípios do Bom Design segundo Dieter Rams:

1 / Bom Design é inovador

As possibilidades de inovação não estão, de forma alguma, saturadas. O desenvolvimento tecnológico está sempre oferecendo novas oportunidades de inovação no design. Mas o design inovador sempre se desenvolve paralelamente à tecnologia inovadora, e nunca pode ser um fim em si mesmo.

2 / Bom Design torna o produto útil

Um produto é comprado para ser usado. Ele tem de satisfazer determinados critérios, não apenas funcionais, mas também psicológicos e estéticos. O bom design enfatiza a utilidade do produto sem ignorar algo que possa prejudicá-la.

3 / Bom Design é estético

A qualidade estética de um produto é essencial para sua utilidade, pois os produtos são utilizados todos os dias e têm efeito sobre as pessoas e o seu bem-estar. Apenas objetos bem executados podem ser belos.

4 / Bom Design torna o produto compreensível

Ele esclarece a estrutura do produto. Melhor ainda, ele pode determinar claramente a sua função, fazendo uso da intuição do usuário. Na melhor das hipóteses, ele é auto-explicativo.

5 / Bom Design é discreto

Produtos que satisfazem um propósito são como ferramentas. Eles não são objetos de decoração nem obras de arte. Seu projeto deve, portanto, ser neutro e contido, para dar espaço à auto-expressão do usuário.

6 / Bom Design é honesto

Ele não faz um produto parecer mais inovador, poderoso ou valioso do que ele realmente é. Ele não tenta manipular o consumidor com promessas que não possam ser cumpridas.

7 / Bom Design é durável

Ele evita estar na moda e, portanto, nunca aparece antiquado. Ao contrário do design de moda, dura muitos anos – até mesmo atual sociedade do descarte.

8 / Bom Design é minucioso

Nada pode ser arbitrário ou deixado ao acaso. Cuidado e precisão no processo de design mostram respeito para com o consumidor.

9 / Bom Design é amigo do meio Ambiente

O Design tem uma importante contribuição na preservação do meio ambiente. Conserva recursos e reduz a poluição física e visual durante todo o ciclo de vida do produto.

10 / Bom Design é o mínimo design possível

Menos, porém melhor – porque concentra-se nos aspectos essenciais e os produtos não estão sobrecarregados com os não-essenciais. De volta à pureza, de volta à simplicidade.

revistacliche.com.br criacaodesitessalvador.com.br

[q-midia]

Jonathan Ive

Estilista nascido em Londres Jonathan Ive é vice-presidente sênior da Apple of Design, reportando ao CEO Tim Cook.Desde 1996, ele tem sido responsável por liderar uma equipe de design amplamente considerado como um dos melhores do mundo.Como a força motriz por trás da aparência de produtos inovadores da Apple, Jony também fornece liderança e direção de interface humana (HI) equipes de software em toda a empresa.

Reconhecida com inúmeros prêmios de design, os produtos da Apple são destaque nas coleções permanentes de museus em todo o mundo, incluindo o MoMA em Nova York e no Pompidou, em Paris.

Jony é bacharel em Artes e um doutorado honorário da Newcastle Polytechnic.Em 2003, ele foi nomeado Designer do Ano pelo Design Museum de Londres e recebeu o título de Real Designer da Indústria pelo The Royal Society of Arts. 

apple.com

jonyiveredesignsthings.tumblr.com/

tecmundo.com.br

exame.abril.com

[q-midia]

UX DESIGN

O Design de Experiência do Usuário (UX DESIGN) é toda parte de interação e comportamento do site que adiciona fundamento e história para o comportamento natural de um usuário e, ao fazê-lo, proporciona algo que eles levem dessa experiência.

É um trabalho que vai muito além de dar aos usuários o que eles apontam que querem, é um ciclo constante, que envolve testes de interatividade, tecnologias da navegação, estudo de comportamento, análises de origem e efetividades de conversões, e até mesmo, o que seu usuário fará depois de ser impactado por sua marca.

Embora o que implica uma abordagem Gestalt de design de mídia interativa, ou seja, usando uma coleção de elementos para formar um padrão que é maior do que a soma de suas partes, UX projeto também coloca ênfase especial sobre o lado humano da interação humano-computador, e seus resultados afetivos, e não na mera usabilidade em desempenho humano de aspecto design de interface de computador, que relaciona tradicionalmente para o campo da ergonomia.

Mesmo no que diz respeito à sua definição, Experiência do Usuário toma Arquitetura de Informação como seu alicerce e leva-o para o próximo nível. Eles fazem isso usando variados métodos de design centrado no usuário: testes de usabilidade, pesquisa e criação de persona, e fluxogramas de usuários (e muitos outros métodos). Dito isto, ainda é aparente que o UX Design está na moda.

Inspirado no conceito da "experiência do usuário total", introduzido à Apple por Donald A. Norman e "Experience Research usuário da Apple Grupo " no início e em meados dos anos noventa e corporações instituições como a IBM, a PARC, Microsoft, Nokia ou SAP estabeleceram numerosos grupos UX interdisciplinares, investigação ou departamentos de design. No entanto, apesar de o termo "experiência do usuário" já se amplamente adotado por profissionais e indústria, não há consenso científico sobre uma definição ou um modelo teórico de UX ainda.

Muitos UX Designers seguem alguns princípios para melhorar a experiência do usuário e facilitar seu próprio trabalho.

Feedback: Interfaces devem fornecer feedback sobre o seu estado atual. Por exemplo, se algo está processando e em qual nível do processo está, quantificar o tempo para a execução ou finalização de algo.

Implementação: Interfaces não devem ser organizadas em torno da implementação da tecnologia ou exigir que o usuário tenha acesso a informações adicionais que não são encontradas na própria interface.

Como voltar/desfazer: As ações voltar/desfazer da interface devem estar claras, explicando como voltar para o início ou desfazer a ação. O usuário deve ter acesso aos meios necessários para ter o controle da ação.

Recuperação/entendimento de informações: Uma interface pró-ativa deve ajudar os usuários a recuperar/informar sobre erros de tecnologia, por exemplo, instalar o Shockwave.

Interação: Os usuários devem ser capazes de descobrir funcionalidades e informações explorando a interface naturalmente, ou seja não deve ser forçados a recordar informações da memória.

Eficiência: Interfaces devem ser o mais eficiente possível, minimizando a complexidade das ações e do tempo total para completar uma tarefa. O que puder, deve sim ser simplicado, afim de melhorar a experiência final do usuário.

Estes são dois vídeos que abordam de modo simples, eficiente e muito fofo dobre Designer UX

http://vimeo.com/19131028 http://vimeo.com/21691333

Lista de sites que esclarece e se aprofunda no assunto

www.princiweb.com.br

smashingmagazine.com

uxpassion.com

uxpin.com

wiki

design.blog.br

design.blog.br/principios

http://design.blog.br/ux-e-ui-diferenca

nngroup.com

uxdesign.com

www.uxmatters.com

Para quem não sabe o que é ergonomia

ergonomia

Vídeo sobre o que seria abordado em uma palestra que aconteceu em Fortaleza

youtube.com

O Blog de onde foi tirado e uma super dica para quem, assim como eu, deseja fazer um curso sobre UX

uxdesign.blog.br

Palestra Designer de interação do google

youtube.com

Blog de onde foi tirado

popupdesign.com.br

Artigo para aplicação prática

Artigo

Livro sobre UX

amazon.com

[q-midia]

Front-end e Back-end

Já se perguntou qual é a Diferença entre Front-end e Back-end ou Como funciona uma página de Internet?

O que é Front-End?

O Front-end é a primeira camada que encontramos quando acessamos um site, um sistema web ou uma intranet, por exemplo. Esta camada é responsável pela interface que o usuário irá encontrar ao navegar pelo seu site, incluindo: design da página, formulários de contato, códigos adicionais, todos os inputs no site,etc…

Um profissional de Front-End trabalha com HTML, CSS e JavaScript, basicamente. HTML não é linguagem de programação, é linguagem de marcação; CSS é linguagem de estilo; e JavaScript (que é diferente de Java) é linguagem de script (nesse caso, o foco do front-end é em JQuery). Tudo isso é utilizado para “dar vida” ao design feito pelo web designer, e o que vai fazer o site ter funcionalidades é a programação.

O que é Back-End?

O Back-end é o nível mais baixo de programação, Banco de Dados e Armazenamento de dados é o que não falta por aqui. MySQL, Oracle, MS-SQL, SAP e outros sistemas fazem parte do Back-end, que é responsável por todo processamento final dos dados recebidos do Front-end (inputs, formulários, requisições, etc).

Nesta camada também encontramos alguns códigos Server-Side (Lado do Servidor), que funcionam exclusivamente no servidor, onde o usuário final apenas faz inserção de dados (via Front-end), não podendo alterar ou modificar esses códigos. Algumas linguagens Server-Side: Ruby on Rails, Lua, Perl, Python, Django, Server-Side Javascript (*.ssjs), WebDNA, entre muitas outras…

Toda essa parte de código pode ser dividida em duas partes de forma simples: Uma parte é o código que faz as coisas visuais terem forma em um site. Em um corpo humano, imagine que essa é a parte da carne, músculos e esqueleto. A outra parte é o código que faz as coisas funcionarem – no exemplo do corpo humano, imagine que essa parte são os órgãos. Só para completar o corpo humano, a pele, os pelos, a roupa e tudo mais é o design, mas vamos deixar essa parte de lado.

Quando falamos de “visual”, estamos falando da parte visível da coisa, por isso citei a carne e os músculos – que não são visíveis, mas dão forma ao design (a pele e tudo mais, lembra?). Quando falamos de programação, aí vêm as funcionalidades (órgãos, principalmente o cérebro, claro).

O ponto é: Não é preciso ser um programador para fazer um site, já que nem todo site conta com funcionalidades (como formulários de contato, ferramenta de notícias etc). Quando falamos de um site simples, apenas com textos e imagens de uma empresa, por exemplo, independente do número de páginas, um Web Designer pode fazer tranquilamente.

http://fabiolobo.com.br/o-que-e-front-end-e-back-end.html http://mobgeek.com.br/blog/o-que-e-front-end http://tuannymaia.com.br/principais-diferencas-entre-front-end-e-back-end/

Aqui vai um link explicando melhor alguns códigos citados acima entre algumas coisas essenciais que um front-end deve saber

http://tableless.com.br/tornar-dev-front-end/

Depois de saber um pouco melhor sobre códigos, mantenham-se atentos ao Cross-browser

Que é basicamente o problema da compatibilidade de navegadores e a necessidade de realizar diferentes códigos. Um site ou aplicação Web Cross-browser nada mais é do que o suporte a múltiplos navegadores de internet (Google Chrome, Internet Explorer, Firefox, etc).

Em muitos dos casos são aplicados folhas de estilos (CSS) específicos para alguns navegadores, ou de forma a torna-lo compatível com navegadores mais antigos. Porém é um assunto mais específico.

http://www.superix.com.br/blog/46-o-que-e-cross-browser-e-a-evolucao-dos-navegadores http://www.criarweb.com/artigos/778.php http://www.cross-browser.com/ http://tableless.com.br/evite-incompatibilidade-browsers/

[q-midia]

Design Responsivo

O conceito de design responsivo não é uma grande novidade, mas tem chamado bastante atenção nos últimos tempos com o crescimento do mercado de dispositivos móveis, principalmente por conta dos tablets e celulares de tamanhos e resoluções cada vez mais variadas.

Neste novo contexto dos navegadores e várias resoluções, o design responsivo surge como uma evolução lógica do design de sites, também conhecido como web designinternet era acessada por resoluções e navegadores muito semelhantes. Até pouco tempo atrás bastava fazer um site que funcionava em Internet Explorer com resolução máxima de 1024×768 pixels que tudo estava resolvido, claro existiam outras características, mas a grande maioria estava nesse mesmo grupo – no máximo havia os usuários de Mozilla Firefox. Hoje tudo mudou, temos TVs de 50″ polegadas acessando internet, temos celulares que tem telas de 2″ até 5″, tablets de 6″ até 11″ polegadas e sem contar os próprios computadores, que tem telas denetbook até os mais novos iMacs da Apple, colocando uma margem de 11″ até 26″ polegadas.

Esta característica demonstra que um site pode ser visto de diversas formas e em diversos contextos, e é para isto que os sites devem estar preparados. O design responsivo, como o próprio nome já indica, consegue responder ao tamanho da tela para se adequar da melhor forma. Ao invés de criar dois sites separados, um para mobile e um para desktops, como era muito comum hoje, você faz apenas um site que vai se adaptar muito bem a qualquer tela em que ele for carregado.

Como surgiu?

Em 2010, pensando em melhorar a sua experiência de navegação, Ethan Marcottecriou 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 Digitalnão tem a permanência da arquitetura. Na verdade, o que é projetado para internet hoje, já estará desatualizado daqui a duas semanas!

http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funciona http://www.princiweb.com.br/blog/front-end/css/o-que-e-design-responsivo.html http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/ http://tableless.com.br/introducao-ao-responsive-web-design/#.UaLC2SrDtr1

Outras coisas essencias para um design responsivo

Midia queries

Os códigos para criar uma página com tamanho adequado aos diversos dispositivos. http://blog.caelum.com.br/flexibilidade-em-paginas-para-dispositivos-moveis-com-media-queries/ http://blog.popupdesign.com.br/design-responsivo-iii-media-queries-e-compatibilidade/ http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/

Grid

Conjunto de linhas bases que fornecem uma estrutura para o seu layout (ou qualquer outro tipo de peça gráfica).

http://blog.popupdesign.com.br/design-responsivo-grids-e-texto/

Mobile first

http://tableless.com.br/mobile-first-a-arte-de-pensar-com-foco/

[q-midia]

Flat vs Skeuomorphism

Para entender o flat design, você precisa entender o outro lado: skeumorfismo. Skeumorfismo se resume a truques visuais, ou uso de talhes e ornamentações para fazer uma coisa parecer como outra. Em arquitetura, fachadas falsas são skeumorfismo. Em designs de carros, painel de madeira falsa é skeumorfismo. O skeumorfismo no design de interface de usuário geralmente se refere a um elemento digital projetado para parecer como algo do mundo físico. Isso pode ser o mural do Pinterest ao couro rico do Find My Friends.

Skeumorfismo no espaço digital vem de longe, desde a primeira GUI da Apple de 1984, que introduziu o conceito de “área de trabalho” e ícones que pareciam como pastas e pedaços de papel. Naquela época interfaces de computador eram conceitos totalmente estranhos para a maior parte dos usuários, o que fez o skeumorfismo uma ferramenta útil. Permitiu que designers criassem metáforas visuais entre objetos velhos e familiares (uma pasta de arquivos) e ferramentas novas e confusas (um arquivo digital). O skeumorfismo no ajudou a aprender.

Mas com a popularização dos computadores, menos pessoas precisavam desses truques visuais para entender a função de um ícone ou botão. O skeumorfismo se tornou um estilo exagerado, cheio de detalhes desnecessários. Então se tornou ruim para uma nova geração de designers – aqueles que já não lembram como era o mundo sem computadores.

Isso deve parecer bastante familiar. Modernistas defenderam as mesmas ideias desde a virada do último século: não coloque detalhes exagerados que não ajudam funcionalidades. Seja honesto com materiais e estruturas. Não crie uma frente falsa para fazer usuários se sentirem seguros. É o mesmo grito de guerra dos designers modernos desde que Le Corbusier veio a mundo. De certa forma, “flat design” não é nada novo – é apenas uma versão contemporânea do modernismo.

O Flat Design é uma das mais fortes para esse ano. O conceito do Flat Design é simplicidade através de formas planas sem as perspectivas de profundidade que estamos acostumados a ver hoje em dia. As cores e muitas vezes a tipografia são extremamente importantes para o sucesso do layout como um todo. Pode parecer muito simples, mas o esse tipo específico de design pode ser bem complexo quando aplicado incorretamente.

E o que vem depois do flat?

Apesar do mundo estar caminhando para se tornar flat, ele não vai ser flat para sempre. O flat design vai se estabelecer e algo virá depois – considerando o último século, cada onda do modernismo veio para se opor à que chegou antes. Por exemplo, depois do modernismo de Bauhaus e da International Style nos anos 1930, uma segunda geração de designers introduziu o conceito de Regionalismo Crítico na discussão, argumentando que a crença de um tamanho para tudo era muito redutiva. É provável que a mesma coisa aconteça com design de interfaces. Depois do radicalismo do flat design, provavelmente designers vão introduzir cuidadosamente dimensionalidade onde for necessário.

Mas ainda vai demorar alguns anos para isso. Por enquanto, vamos ter que esperar para ver se Jony Ive abraça o flat design, ou se ele se revolta – neste caso, as coisas se tornariam bem mais interessantes.

Esse site é O Máximo! Ele explica de forma super divertida a diferença entre o flat e o Skeumorfismo

http://www.flatvsrealism.com

webdesignerdepot.com

gizmodo.uol.com.br

zupi.com.br

sachagreif.com

Blog super legal do banco de imagens Shutterstock que mostra tendências

shutterstock.com