18 exemplos de wireframes e mockups »

20mai 2010, às 09:10

Publicado em Design | Seja o primeiro a comentar (0) »

publicado por: Magno Valdetaro

Em primeiro lugar:

O que é Wireframe?

De forma geral wireframe é um documento/esboço que ajuda a arquitetar a distribuição e organização das informações e visualizar sua relação a outros elementos de um ambiente a ser projetado. Cabe ao wireframe indicar de forma estrutural a disposição de todos os elementos que compõe, neste caso, um site como: Marcação de texto, lista de links, breadcrumbs, tamanho das imagens, orientação de navegação, etapas de interação do usuário e ambiente.

O uso de wireframe ainda te ajuda numa reunião com um cliente, possibilitando dar uma visão de como se comportará o que você está projetando e propondo.

Caso queira se aprofundar mais sobre wireframes viste este artigo do Webinsider:

Wireframe, documento cada vez mais importante

Ok, mas e o que é Mockups?

Mockups são modelos em escala 1:1, ou seja, em tamanho real do que será projetado. Sempre muito utilizado para demonstrações, avaliações de um design, promoções e outras finalidades. Costuma ser mais usado para modelos físicos, mas pelo que me parece há empresas adotando o conceito para projetos web e sistemas.

Para fins deste post considero isto o suficiente sobre Mockups, caso queira se aprofunda mais indico o artigo em .pdf: “A importância do modelo físico para o desenvolvimento de um produto”

Sendo assim vamos as referências, todas elas retiradas do blog WDL.

NationWide / NASCAR

5 Anos de Firefox

Links

GEOINT2009 (Microsite)

Coastal Capital Partners

New Local

Vimeo Página de Profile

BPgraphics

Vimeo Topo da página de Vídeo

Cartoonity.com

CommLogix Wireframe

Early Ember Sketches

Wirethumbs

Mais alguns

iPad App Sketch

Web Layout Sketches

Librespeak interface sketch

Concepção Original do Twitter

Leia Mais »

Diferença entre “Design Centrado no Usuário” e “Design Centrado no Designer” »

06abr 2010, às 10:32

Publicado em Design | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

No cotidiano de uma empresa volta e meia temos pequenas discussões filosóficas, numa dessas, conversamos sobre arte e design. Eu como sempre defendo o design funcional, feito para o usuário mesmo que isso comprometa a arte, afinal eu não sou artista eu quero desenvolver soluções! Mas essa vai ser uma discussão eterna que vai do tipo e caminho que cada um quer seguir.

Dias após essa conversa na empresa, o Henrique Costa Pereira do Revolução.etcque pra mim é autoridade em padrões web escreveu este post sobre a diferença entre “Design Centrado no Usuário” e “Design Centrado no Designer”. Leia um trecho a seguir:

A abordagem do “design centrado no usuário” me parece ser ainda um brinco de pérola dentro das empresas. Ele é “caro” (assunto pra outro post), bonito, não é todo mundo que tem bom gosto pra saber combinar e não se acha nas mãos dos vendedores ambulantes. Entre os ambulantes existem apenas imitação. O brinco de pérola mesmo, é caro. E como estamos falando de uma “abordagem” de desenvolvimento para web – e não de brincos ou jóias – é ainda mais complicado, porque o mercado cria espaço para os dois lados. Mas é óbvio, que eu estou aqui para defender ~~brinco de pérola~~ a abordagem do design centrado no usuário, e não o designer ou o arquiteto da informação ou o “especialista em experiência do usuário“. Então, não leve pro lado pessoal, please.

Este tema é polêmico e eu não sou ingênuo o suficiente pra acreditar que seria possível acabar com a discussão aqui. Ela nunca vai morrer, porque sempre vai existir pessoas que conseguem bons empregos como web designer, programação de interface, diretor de arte e blá blá blá e não sabem do que estão falando. Mas você não precisa ser um desses profissionais. Meu objetivo com este texto é deixar bem claro aqui a diferença existente entre designers que entendem de web e os que não entendem. Se tiver alguma porrada pra dar, os comentários estão abertos!

Para ler este ótimo artigo completo visite:

Diferença entre “Design Centrado no Usuário” e “Design Centrado no Designer” no Revolução.etc.

Leia Mais »

Proporção áurea ou Número de Ouro »

02mar 2010, às 10:42

Publicado em Design | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

A proporção áurea também conhecida como número de ouro ou número áureo ou até mesmo proporção dourada é um número irracional misterioso e enigmático que nos surge numa infinidade de elementos da natureza na forma de uma razão com o valor arredondado a três casas decimais de 1,618 sendo considerada por muitos como um número divino e por esta consideração vem também a ser batizado de: seção áurea, razão áurea, razão de ouro, divina proporção, proporção de extrema razão, divisão de extrema razão.

600px-Mesures_de_la_main_artlibre_jnl

Este número está envolvido com a natureza do crescimento. ᶲPhi maiúsculo (não confundir com o número Pi π), é a inicial do nome de Fídias que foi escultor e arquiteto encarregado da construção do Pártenon, em Atenas. Como é chamado o número de ouro, pode ser encontrado na proporção em conchas (o nautilus, por exemplo), seres humanos (o tamanho das falanges, ossos dos dedos, por exemplo), até na relação dos machos e fêmeas de qualquer colméia do mundo, e em inúmeros outros exemplos que envolvem a ordem do crescimento.

Retângulo dourado

Golden_spiral_in_rectangles Trata-se do retângulo no qual a proporção entre o comprimento e a largura é aproximadamente o número Phi, ou seja, 1,618, obtemos um retângulo de ouro pois os lados verificam a proporção áurea.

Os egípcios fizeram o mesmo com as pirâmides. Por exemplo, cada bloco da pirâmide era 1,618 vezes maior que o bloco do nível logo acima. As câmaras no interior das pirâmides também seguiam essa proporção, de forma que os comprimentos das salas são 1,618 vezes maiores que as larguras

Um retângulo de ouro é facilmente obtido com compasso e régua por este método:

Construir um quadrado;
Desenhar a linha do ponto central de um lado para um dos cantos no lado oposto;
Usar essa linha como raio de uma circunferência para definir a altura do retângulo;
Completar o retângulo;
O nº de ouro é então o que permite a divisão perfeita de quadrados/retângulos.

Update: O @tarciozemel do blog Desenvolvimento para Web me enviou este link do site Golde Ratio Calculator que disponibiliza um gadget para calcular facilmente o número de ouro! Fica meu agradecimento ao Tárcio Zemel!

Leia Mais »

Readymechs »

10dez 2009, às 07:26

Publicado em Design | Seja o primeiro a comentar (0) »

publicado por: Magno Valdetaro

O natal está chegando e que presente seria legal para um designer? Readymechs pode ser uma boa escolha! Readymechs são brinquedos para você imprimir, recortar, dobrar e construir um carismático personagem (ou não).

Do tamanho adequado para ser impresso em um A4, você só vai precisar de fita adesiva dupla face, um bom papel fosco espesso e de 10 a 15 minutos do seu precioso tempo e assim ter um excelente enfeite para sua mesa, prateleira ou estante.

Veja um exemplo: