Close Sidebar
Positioning-FROONT-cover-01

Lembram nesse post que eu falei que a empresa Froont fez uma série gifs pra ilustrar alguns conceitos do design responsivo? Então, continuando com a ideia de responsividade, eles fizeram outra série pra ilustrar as posições html/css, que são decisões importantes a serem tomadas no design responsivo.

 

The Z-index

Z-index_FROONT

Static position

02-Static-position-FROONT

Absolute position

03-Absolute-position-FROONT

Relative position

04-Relative-position-FROONT

Fixed position

05-fixed-position-FROONT

 

Otimo pra ilustrar, achei útil!

unnamed

Em dezembro do ano passado aconteceu o primeiro workshop da IXDA Brasília. O workshop de prototipagem de serviços foi ministrado pela Renata Aspin e pela Marina Faria que foram para o evento Interaction South America (ISA) de 2014 que aconteceu na Argentina. O IXDA Brasília organizou o ISAredux onde os que foram repassaram os conhecimentos para os que não tiverem oportunidade de ir.

O workshop foi ótimo e tivemos oportunidade de em pouco tempo desenvolver ideias para um determinado problema.

Utilizamos a técnica de business origami para prototipar. Nela é possível que todos participem do processo, é facilmente visível por todos e de baixa fidelidade.

Responsive-Cover-02-2

A empresa Froont criou uma série de gifs para explicar alguns conceitos que as vezes podem ser difíceis de explicar ou entender por algumas pessoas. São alguns princípios usados no design responsivo. Útil ou últil demais?

Responsive vs Adaptive web design

01_Responsive-vs-Adaptive

The flow

04_Flow-vs-Static-2

Relative units

02_Relative-Units-vs-Static-Units-1

Breakpoints

03_With-Breakpoints-vs-Without-Breakpoints-1

Max and Min values

07_Max-width-vx-No-max-width-1

Nested objects

05_Nested-vs-Not-Nested-1

Mobile or Desktop first

08_Desktop-first-vs-Mobile-first-3

Webfonts vs System fonts

06_System-fonts-vs-Webfonts-1

Bitmap images vs Vectors

09_Vectors-vs-Images-1

Que ideia maravilhosa! Para resolver o problema de vagões cheios e pessoas embarcando neles enquanto tem vagões mais vazios, o pessoal da Holanda colocou painéis de 3 cores nas plataformas que indicam se o vagão está cheio, meio cheio ou “vazio”.

149254_41bd16840dc44726b582c4ac4c4341fa

149278_9aa563a9ec2e4b14979a6103f158550e

Aqui fala como foi o processo de criação da agência Edenspiekermann

O Waze disponibilizou vídeos de algumas grandes cidades mostrando a visão do tráfego durante um dia inteiro. O Rio de Janeiro é uma delas!
A partir desses dados podem ser feitas diversas análises, conclusões, melhorias e claro, nos ajudar no dia a dia.

Estamos realmente fazendo a diferença, nós e o waze!

Eles também criaram o blog Data Waze onde diversas análises, histórias e outras coisas são divulgadas. Vale visita!

Alline Cabral - 2014