Archive for the ‘design’ Category
Pensar vs sonhar acordado – qual a diferença?
A maior parte das pessoas que passa o dia a “pensar” não faz mais do que sonhar acordada. Pensar não é o mesmo que sonhar acordado. O pensamento construtivo é muito mais difícil que sonhar acordado – talvez por isso tão poucas pessoas de facto pensem.
Por forma a ser útil, pensar tem que ser: Read more
Esta técnica é uma forma simples e rápida de começar um projecto daqueles para os quais não nos surge nada nas fases iniciais que possam despoletar «aquela» ideia.
A técnica é esta: Read more
Quatro pontos essenciais quando se fala de design de produto, design de interfaces ou mesmo design gráfico:
Formato JPEG
O formato JPEG (Joint Pictures Expert Group) é um tipo de arquivo para armazenamento de imagens que pode trabalhar com esquema de cores em 24 bits. Isso significa que este formato aceita 16,8 milhões de cores. O JPEG é um dos formatos de imagens mais populares e isso deve-se à capacidade de reproduzir imagens fiéis às originais.
O JPEG utiliza um algoritmo de compactação que se baseia na capacidade do olho humano. No entanto, mesmo sabendo-se que ficheiros em JPEG podem trabalhar com até 16,8 milhões de cores, o olho humano não é capaz de distinguir todas elas. Assim, é possível tirar uma série de informações que representam cores em imagens e manter apenas aquelas visíveis ao olho humano. Noutras palavras, o formato JPEG “tira” da imagem aquilo que os humanos não conseguem ver. Esse processo é conhecido como compressão. Isso faz com que imagens bastante realistas sejam criadas, sendo que os tamanhos dos ficheiros são reduzidos.
Algo interessante no JPEG, é que os ficheiros podem ter diferentes níveis de compressão. Quanto maior a compressão, ou seja, retirada de informação, menor será o tamanho do ficheiro, porém pior será sua qualidade. Assim, quando se disponibilizar as imagens online, é mais adequado mantê-la em tamanho pequeno. No entanto, se a imagem for utilizada num documento, muitas vezes é melhor mantê-la com o máximo de qualidade possível, para que a impressão seja satisfatória.
Uma desvantagem do JPEG é que a imagem normalmente perde qualidade a cada vez que o ficheiro é salvo. A isso chama-se compressão degenerativa. Os ficheiros em JPEG têm a extensão .jpg. Por exemplo, imagem.jpg.
Formato GIF
O formato GIF (Graphics Interchange Format) é um tipo de ficheiro para imagens que trabalha com uma paleta de 256 cores. Isso faz com que o GIF não seja recomendável para figuras que precisam de aproximação da realidade, a não ser que a imagem em questão seja a preto e branco (ou escala de cinzentos). Devido a essa característica, o uso do formato GIF é adequado para ícones ou imagens que não precisam de muitas cores (ilustrações, por exemplo).
Apesar deste formato parecer limitado devido ao número baixo de cores com que trabalha, o GIF é muito utilizado por alguns recursos que oferece. Um deles é a capacidade de utilizar fundo transparente. Com isso, é possível, por exemplo, que um site publique uma imagem em GIF e esta terá como fundo a cor da página. Além disso, o GIF permite que uma sequência de imagens sejam guardadas num único arquivo, onde cada imagem surge no lugar da anterior após um tempo pré-determinado. Isso dá a sensação de animação, como mostra a imagem abaixo.
O GIF utiliza um formato de compressão que não altera a qualidade da imagem a cada operação de salvar, como ocorre com o JPEG. Considerando esta forma de compressão juntamente com a capacidade de trabalhar apenas com 256 cores, o GIF consegue criar imagens com tamanho bastante reduzido. Isso foi essencial para o início da internet, onde a velocidade era bem mais baixa que a actual.
A extensão dos arquivos no formato GIF é .gif. Por exemplo, imagem.gif.
Formato PNG
O PNG (Portable Network Graphics) é interessante porque consegue trabalhar com esquema de 24 bits de cores, ou seja, 16,8 milhões de cores. No entanto, em comparação com o JPEG, a compressão obtida é mais eficiente e não proporciona perda de qualidade a cada salvamento, o que permite maior fidelidade à imagem original. Além disso, as imagens em PNG não requerem muito espaço, podendo-se ter figuras de alta definição e tamanho em bytes pequeno. Ainda assim, o JPEG costuma ter imagens de tamanho ainda menor em alguns casos.
O PNG também possui o recurso de transparência, o que o faz uma excelente alternativa ao GIF neste caso, pois é possível ter imagens com fundo transparente, mas com o objecto utilizando um número muito maior de cores.
As imagens no formato PNG possuem extensão .png. Por exemplo, imagem.png.
Princípios de construção de uma composição
Organização
The design clearly and completely communicates the message. A degree of originality is used in the graphics and/or illustrations. The composition leaves enough negative space around the edges of the poster so that the eye can move around the images. A center of interest is established and the work is visually balanced. Lines, values, and shapes are appropriately clear and add to the communication and aesthetics of the work. The craftsmanship is of high quality.
O design comunica claramente e completamente a mensagem. Um elevado grau de originalidade é usado nos elementos gráficos e/ou nas ilustrações ou imagens. A composição deixa espaços negativos suficientes à volta dos elementos do poster para que o olhar circule pela(a) imagem(ens). Um centro de atenção foi estabelecido e o trabalho está visualmente equilibrado. Linhas, valores (cromáticos ou lumínicos) e formas são apropriados e claros e adicionam valor comunicativo e estético ao trabalho.
3 – The design communicates the message. The graphics and/or illustrations are appropriate to the message. The composition leaves enough negative space around the edges of the poster so that the eye can move around the images. A center of interest is established and the work is visually balanced. Lines, values, and shapes are appropriately clear and add to the communication of the work. The craftsmanship is of adequate quality so as not to detract from the visual effect.
2 – The design communicates most elements of the message but some details may be left out. The graphics and/or illustrations do not necessarily fit the theme. The composition does not use the space well but the message is reasonably clear. A center of interest may not be as clear, and the work may not be visually balanced. Lines, values, and shapes are of unsure quality and do not add to the communication. The craftsmanship may be of such quality to detract from visual effect but central message is still present.
1 – Essential elements are missing from the design and it does not communicate the message. The graphics and/or illustrations do not fit the theme or detract from the message. The composition uses space poorly, with no margins, uneven lettering, and poor spacing of lines. There is no center of interest and the work is not visually balanced. Lines, values, and shapes are of poor quality and do not add to the communication. The craftsmanship is of poor quality and detracts from visual effect. The central message is unclear as a result of the lack of visual design.
0 – Unfinished or missing
«Web 2.0? O que é isso?»
«A Web 2.0 baseia-se em conceitos simples. Aliás, a simplicidade é um deles.
Simplicidade
Tudo deve ser intuitivo e evidente. Acessar, catalogar e utilizar deve ser um prazer e não uma tortura de cliques infinitos. É um mundo sem tabelas desnecessárias ou gráficos pesados. Nele, os ambientes adaptam-se ao local onde são lidos/consumidos; na verdade, parece-nos que o destino é a independência deste suporte. O mundo da web 2.0 parece, às vezes, prescindir de URL´s. O seu endereço é o seu Feed. A nova web alimenta-se. De conteúdos.
O conteúdo
Keith Robinson, do excelente Asterisk, nos conta a cada post que Content is King. Se o conteúdo é rei, não nos custa lembrar que sua árvore genealógica está ali, páreo a páreo com a dos Reis Merovingios, estendendo-se quase ao infinito. Ou seja, tente entender conteúdo sob bases mais largas a partir de agora. Conteúdo é texto, áudio, vídeo…é tudo isso. Mas não só isso.
O conteúdo da Web 2.0 é a possibilidade democrática e sem barreiras de exercer sua possibilidade de opinar. A esta habilidade de opinar diretamente sobre o conteúdo, damos o nome de Tagsonomia, ou seja, associar àquele trecho de qualquer coisa, uma marca indelével, classificatória e…pessoal. Cada conteúdo pode ter infinitas Tags e ser consumido a partir delas.
Daí a enxurrada de Comunidades Digitais e Aplicações que nos fazem mais falantes, que mostram ao mundo nossa(s) personas digitais . E isso não quer dizer que este mundo novo acontecerá apenas no computador pessoal, como conhecemos hoje. A Web 2.0 nasce sob a égide da pervasividade. Ou seja, as aplicações que chegam ao “mercado” virão prontas para rodar nos players de mp3, nos celulares, nos videogames, na TV Interativa.
E mais: no mundo da Web 2.0 você recebe, transforma, publica. Um ciclo infinito de geração de informação. Que lugar melhor para isso acontecer do que na web? Amigos tecnológicos de plantão: a única plataforma viável é a web.
A plataforma
Mutante, a web é uma plataforma em constante evolução, desde os sites da década de 1980, acessados apenas por governos, praticamente em modo ‘texto puro’, passando pelos excessos dos idos de 1996, ao ambiente clean da era google, a web vem evoluindo a cada novidade.
O HTML, que foi criado para exibir documentos e não aplicações, forçou aos desenvolvedores um formato mais “básico” e diferente das aplicações até então desenvolvidas para sistemas informatizados. O impacto da web na vida das pessoas foi tão grande que de repente fazer aplicações do jeito web passou a ser a maneira “certa”, porém ainda limitada. Juntando-se a este cenário a falta de padrão dos navegadores e as conexões ainda lentas a web continuou a ser uma plataforma tecnológica limitada. No melhor estilo it’s not a bug, it’s a feature! os desenvolvedores se justificavam dizendo que todas aquelas interfaces leves e sem muitos recursos para o usuário final eram uma coisa boa o que, como tudo na vida, nem sempre é verdade.
Até que um dia uma aplicação chamada GMail veio não só mostrar que era possível fazer seu navegador se comportar como uma coisa mais parecida com uma aplicação “de verdade” como também veio mostrar o que era a Web 2.0: a velha web de sempre, só que melhor, mais nova, versão 2.0. Evolucionária e não necessariamente revolucionária. Mas para frente é que se anda, 2.0 lá vamos nós. O GMail entrou e venceu em um mercado mais do que saturado, o de email via web. Mas ao reinventar o conceito de email (e dar 1gb de espaço) conquistou os corações dos usuários.
Enquanto isso, os desenvolvedores correram para destrinchar o código do GMail para descobrir como aquilo era possível. Era Web 2.0 começando como a Web 0.1, com o bom e velho “exibir código fonte”. A resposta estava no até então pouco utilizado comando Javascript xmlHttpRequest.
Hoje, as aplicações web se aproximam bastante do que temos instalado em nossos PCs. Ajax, a re-invenção do Javascript associado ao XML, Ruby on Rails, xmlHttpRequest, entre outras dezenas de novidades, fazem ser cada dia mais difícil diferenciar o que é web do que não é. Apenas como exemplo, o novo Office, da Microsoft, virá bem parecido com uma interface web, confiram no link.
A empresa Web 2.0 por excelência é o Google. Mas essa é só a boa notícia.
Com o GMail os maiores pesadelos das empresas de software tradicionais, especialmente a Microsoft, começaram a se realizar. Estava provado ali que agora era possível rodar qualquer tipo de aplicação no seu navegador. O usuário começou a se ver livre não só do sistema operacional como até mesmo do conceito de “seu computador”. Os boatos começaram a voar: o Google vai lançar um pacote de programas web para concorrer com o MS Office.
O Google é a empresa Web 2.0 por excelência por seguir o lema de “lance logo, lance sempre, todo dia”. A web (desde sempre) acabou com a necessidade de grandes versões de software sendo lançadas a cada ano ou mais. Você pode lançar uma versão hoje e outra amanhã, sempre a partir do feedback conseguido com cada incremento. Os programas rodam em todos os lugares mas só existem em um lugar: o servidor. Por isso você pode lançar seu produto hoje e não mês que vem. (Daí vem, provavelmente, o fato de praticamente todo serviço do Google trazer a palavra beta ao lado do nome) Lance o produto com o mínimo de funcionalidades para atingir seu objetivo e cresca com ele.»
Em computação gráfica, imagem vectorial é um tipo de imagem gerada a partir de descrições geométricas de formas, diferente das imagens chamadas mapa de bits (bitmaps), que são geradas a partir de pontos minúsculos diferenciados pelas suas cores. Uma imagem vectorial normalmente é composta por curvas, elipses, polígonos, texto, entre outros elementos, isto é, utilizam vectores matemáticos para a sua descrição. Num desenho sólido, de uma cor apenas, um programa vectorial apenas repete o padrão (a informação matemática), não tendo que armazenar dados para cada pixel.
As Curvas de Bézier são usadas para a manipulação dos pontos de um desenho. Cada linha descrita num desenho vectorial possui nós, e cada nó possui alças para manipular o segmento da recta ligado a ele.
Por serem baseados em vectores, esses gráficos geralmente são mais leves (ocupam menos memória no disco) e não perdem qualidade ao serem ampliados, já que as funções matemáticas se adequam facilmente à escala, o que não ocorre com gráficos raster que utilizam métodos de interpolação na tentativa de preservar a qualidade. Outra vantagem do desenho vectorial é a possibilidade de isolar objectos e zonas, tratando-as independentemente.
Pixel (aglutinação de Picture e Element, ou seja, elemento de imagem, sendo Pix a abreviatura em inglês para Picture) é o menor elemento num dispositivo de exibição (como por exemplo um monitor), ao qual é possível atribuir-se uma cor. De uma forma mais simples, um pixel é o menor ponto que forma uma imagem digital, sendo que o conjunto de milhares de pixels formam a imagem inteira.
Num monitor colorido cada Pixel é composto por um conjunto de 3 pontos: verde, vermelho e azul. Cada um destes pontos é capaz de exibir 256 tonalidades diferentes (o equivalente a 8 bits) e combinando tonalidades dos três pontos é possível exibir em torno de 16 milhões de cores diferentes. Em resolução de 640 x 480 temos 307 mil pixels, a 800 x 600 temos 480 mil, a 1024 x 768 temos 786 mil e assim por diante.
Resumindo: O Pixel é a menor unidade de uma IMAGEM, e quanto maior for o número de pixeis, melhor a resolução que a imagem terá.