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

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.

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.

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

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!

15 Brushes de papel amassado para Photoshop »

10jan 2010, às 07:55

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

publicado por: Magno Valdetaro

O site Colorburned acaba de lançar o Moldy Paper Photoshop Brushes que nada mais é que um novo pacote de brushes em alta resolução para Adobe Photoshop.O pacote conta com 15 arquivoc no formato .abr que podem ser usandos para dar um visual mais grunge ou uma textura diferenciada no seu projeto. Faça o download e confira você mesmo!

Iconic: Pacote com 84 ícones em vetor »

06jan 2010, às 06:53

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

publicado por: Magno Valdetaro

Some Random Dude é um blog sobre design e tecnologia que acaba de lançar um pacote de belos ícones batizado de Iconic.

O pacote conta com 84 ícones e todos em 2 formatos; SVG e PNG.

Os ícones no formato PNG vem em diversos tamanhos (8x8, 12x12, 16x16, 24x24 e 32x32) e em 14 diferentes cores.

115 spray brushes para Photoshop »

05jan 2010, às 08:00

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

publicado por: Magno Valdetaro

Primeiro post do ano! Para acabar com o abandono e tocar essa tranqueira de blog novamente, aí vai 6 pacotes com 115 spray brushes!

Pacote com 25 brushes de spray para Photoshop

Pacote com 40 brushes de spray para Photoshop

Pacote com 20 brushes de spray para Photoshop

Pacote com 20 brushes de spray para Photoshop

Pacote com 5 brushes de spray para Photoshop

Pacote com 5 brushes de spray para Photoshop

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:

Gostou da ideia para o natal?

Web Icon Set – Mais pacotes de ícones »

01dez 2009, às 07:55

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

publicado por: Magno Valdetaro

Web Icon Set é um site que oferece ícones com qualidade profissional para desenvolvedores web. Eles acabam de lançar o seu primeiro pacote de ícones, o Web Application Icon Set que está sendo distribuído gratuitamente. Estes ícones podem serem usados em qualquer desktop e aplicação web. Eles estão no formato PNG com tamanhos de 128, 64, 48 e 32px. Web Icon Set disponibiliza regularmente novos ícones, por isso, fique atento!

Acesse o site e baixe o primeiro pacote para aplicações. Aproveite e me conte o que achou e se este vai para os seus favoritos, abraços.

Dia do Designer! »

05nov 2009, às 07:39

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

publicado por: Magno Valdetaro

Parabéns a todos os Designers deste país tupiniquim! No dia 5 de novembro, é comemorado o dia do Designer que por sua vez é a data de nascimento de Aloísio Magalhães, pioneiro do design gráfico no pais.

A data é comemorada desde 1998 quando então Presidente da República Fernando Henrique Cardoso assinou o decreto instituindo o 5 de novembro como dia Nacional do Design (só faltou ser mais um feriado).

Mas afinal quem foi Aloísio Magalhães?

Aloisio Magalhães foi um criador múltiplo. Pintor, pioneiro do design gráfico no Brasil, administrador cultural, incansável defensor do patrimônio histórico e artístico. Por não distinguir fronteiras rígidas entre tantas e várias atividades, fez de cada uma delas a extensão das outras, dando curso a um processo de hibridismo e contaminação entre áreas criativas comumente separadas.

Nascido no Recife, em 1927, ingressou na Faculdade de Direito desta cidade em 1946. A partir de 1950, participa do Teatro do Estudante de Pernambuco, dirigindo o seu Departamento de Teatro de Bonecos e é um dos fundadores das Edições TEP, embrião do Gráfico Amador. Em 1949, participa do IV Salão de Arte Moderna do Recife. Dois anos mais tarde, recebe bolsa do governo francês para curso de museologia no Louvre. Em 1953, já de volta de Paris, participa da II Bienal de São Paulo com duas pinturas.

Para continuar a leitura sobre Aloísio Magalhães visite:

http://www.mamam.art.br/mam_apresentacao/aloisio.htm

Vida de Designer não é fácil é uma briga eterna pela valorização e reconhecimento da profissão. Muito suor, força de vontade e dom, um bom designer busca todos os dias por novidades, quer ser o melhor, e ama o que faz cada dia mais!

Parabéns para todos nós, designers gráficos, web designer, designers de produtos, de móveis, todos os tipos de designers que não conheço! ;]

Mais de 600 ícones para Mapas »

27out 2009, às 08:22

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

publicado por: Magno Valdetaro

Map Icons Collection é um pacote com mais de 600 ícones, todos em PNG transparente, e podem ser usados para se referir a qualquer coisas  em um mapa, veja alguns exemplos na imagem a seguir: