Pacote de inspiração para quem anda emperrado
Okay, você está lá sentado em sua cadeira na sua casa/escritório e precisa fazer o design/CSS daquele sitezinho específico que você prometeu para seu tio ou aquele freela que parou por um bloqueio criativo e agora você mal pode ter seus vícios distrativos.
A Smash Magazine publicou faz 2 anos mais ou menos um pacote com mais de 60 screenshots (com links) para você se inspirar e copiar criar seus layouts rapidinho. Seu fim de semana agora está salvo, a não ser que seu cliente fale que o site está "escuro demais" e queria um tema floral.
URL curta (Snick.me)Como uma interface gráfica pode ser poderosa
Existe muitos exemplos de empresas e projetos livres que prestigiaram-se pelo seu auto grau de qualidade nos softwares ou jogos que produziram, mas que ao mesmo tempo deram uma importância ímpar para a interface gráfica dos mesmos.
É preciso pouco para produzir uma interface boa. Vamos analizar a interface mais conhecida do planeta, a da Google. Muitos conservadores gritaram, esperniaram e criticaram silenciosamente (eu mesmo ouvi muito) que a interface do Google é feia. Sim, ela é(ra).
Tal popularidade do software fez com que as pessoas se acostumassem com uma nova geração de interface que eles intencionalmente ou não, criaram. Na época do surgimento da Google, tudo era trevas, digo, carnaval. Sites carregadíssimo de imagens, propagandas, dezenas de links. O conceito de "Portal" para ser o ponto de entrada de uma empresa era muito comum, e a Google veio para quebrar esse paradigma, exibindo em seu portal 15 links, uma textbox, dois botões e uma logomarca.
Sua simplicidade simpatizou o planeta que muitas empresas alteraram seus mecanismos de busca, o antigo site Cadê que era nossa Estrela Pop para procurar coisas aqui no Brasil também se adaptou e hoje exibe só uma texbox também.
Anualmente as empresas costumam fazer alterações em seu layout, algumas mais pesadas como o Terra já fez esse começo de ano. Mas empresas como a Google não podem se dar ao luxo de alterar sua interface radicalmente, o público que acessa o portal é distinto demais para haver uma aceitação grande, mas para uma interface tão poderosa como a dela uma simples alteração causa alarde e admiração.
A Google mudou ontem, dia 09/01/2009 por volta das 18:00 o favicon dela (aquele ícone que aparece do lado do endereço) para um "g" branco estilizado com as cores da empresa mixando-se ao fundo.
O que antes era um "G" azul no fundo branco passou para esse "g" branco no fundo colorido. A mudança foi tanta que o blog Undergoogle.com já anunciou sua mudança minutos depois da publicação do novo ícone.
Notem como uma empresa conquistou seu lugar ao Sol com sua interface altamente prestigiada onde uma alteração de um ícone de 16x16 gerou centenas de posts em blogs (incluindo esse), notícias na Folha e na Abril.
Apenas por curiosidade, esse novo ícone foi criado por André Resende do curso de Ciência da Computação da Unicamp. Sim! Foi um brasileiro que criou em um projeto juntamente com vários estudantes. (Eu queria ter visto e participado...)
Visualizações: 298Promoção de uma GUI
Quem não se lembra do massivo comercial do Microsoft Windows 95 quando eles introduziram o Botão Iniciar (que hoje é um dos mais famosos elementos de GUI), podendo ser até mais famoso que o próprio Windows. O investimento de marketing em cima do Windows 95 tornou a "Barra de Tarefas" com seu "Botão Iniciar" a marca registrada do Windows.
Tão famoso ficou, que as pessoas acostumaram-se com o termo e a idéia, que se tornou prático e essencial em um sistema operacional (SO) ter esse tal botão. Tanto é que a Microsoft patenteou essa "marca" dando ela o direito único a explorar a idéia do botão iniciar, apesar que algumas outras empresas usarem essa mesma idéia mas com tênues mudanças para não render processos jurídicos. (Atenção freetards, não estou discutindo linux, Mac ou quem veio primeiro: o ovo ou a galinha).
No Brasil, promover um novo software não é tão rentável, pois o consumidor final não é o foco principal de empresas como a Microsoft (sim, apesar de quase todos os habitantes do Brasil, terem um (PC) com o Windows instalado, a Microsoft foca mais os produtos dela em empresas. Uma justificativa talvez seria o baixo poder aquisitivo da população, não sendo viável vender uma cópia do Windows XP Professional por R$ 749,00 (mais ou menos, mas peraí, estamos no Windows Vista já, mas ainda dá para comprar o XP OEM) para o João da padaria da Penha, comerciais de softwares ocorrem com uma certa frequência, e pode-se dizer que o foco dos comerciais em GUI chama muito a atenção de consumidores finais. No vídeo abaixo você pode conferir um vídeo promocional sobre o Windows 95, na época de seu lançamento, note o foco no botão iniciar.
(esses vídeos vieram dos extras do CD do Windows 95)
O foco desse post tem mais caráter curioso do que prático. Mas é interessante ver como interfaces tem sim sua importância em produtos. Agora, se quiser vender software no Brasil para usuário doméstico, não faça propaganda na TV, mas cative eles. O que você, leitor perdido que caiu nesse blog acha? (comente! não precisa de registro)
Visualizações: 837Como usar cores em layouts
Para quem não é designer, começa aí um pesadelo na hora de montar uma interface: As cores. Elas são suas aliadas na passagem da informação, tanto para um site, quanto para um software ou jogo. Mas como fogo, se você não souber manipula-la, você se "queima".
Cores são as propriedades mais ricas em um website, software ou jogo. A cor ajudará na definição da identidade visual, padrão de navegação e relacionar áreas. De acordo com Farina (2002), as cores transmitem estados e sensações, induzem uma pessoa. Tons de laranja e vermelho (cores quentes) atraem jovens de 10 a 17 anos, tons claros de azul e cinza atraem a atenção de profissionais adultos entre 20 e 40 anos. Ao projetar um software, website ou jogo, deve-se levar em consideração as cores e usar elementos com cores certas. Tons de verde remetem a um ambiente hospitalar. Um software de automação hospitalar que siga estes padrões se adapta bem ao ambiente e provavelmente ao logotipo da empresa que certamente seguirá o mesmo padrão de cores.
A combinação de cores é muito importante, uma boa combinação causa harmonia, tranqüilidade e conforto visual no produto. Como um remédio, dosar para mais ou para menos o fator "cor" fará com que o produto melhore ou fique mais doente ainda. Por exemplo, usar a cor azul e vermelha combinadas causa um desconforto visual, pesando muito o produto e conseqüentemente a opinião subjetiva de um usuário para com o produto. Veja abaixo a imagem e note como as junção nas fronteiras das cores criam linhas claras e escuras entre elas. Isso não existe, é um desconforto visual.
A cor de um website está intimamente ligada às cores usadas no logotipo da empresa, uma tendência comum é seguir as cores do logotipo para construir a identidade visual. Mas deve-se tomar cuidado com o tom das cores, pois um logotipo por ser pequeno e objetivo, pode carregar corres fortes que em grande quantidade (em um Layout) podem ficar cansativas. Aconselha-se o uso de cores contrastantes e pastéis para uma definição forte de identidade visual e ao mesmo tempo conforto visual.
Existem livros que falam só disso! Acoselho a leitura do livro "Psicodinâmica das Cores em Comunicação" (ISBN: 8521203993), de Modesto Farina. É uma pós-graduação em cores que eu tenho certeza que vale a pena a leitura, pois mesmo quem não é da área, vai achar super interessante.
Abaixo, alguns exemplos e contra-exemplos de combinações de cores:
Deu para perceber né? Mas não é só isso, nossa históra vai continuar, falando sobre Backgrounds em websites e tipografia ideal para websites.
Visualizações: 6456Técnicas de Layout
Tanto um website, software ou game, passam por um processo de criação de layout. Deve-se levar em consideração que o Layout deve ser fácil de aprender e usar, ele será uma peça importante na hora da comunicação do seu produto. Compilei aqui 3 aspectos importantes ao montar um layout para seu site:
No ocidente, é um costume ler-se da esquerda para a direita, de cima para baixo, basta pegar uma revista em quadrinhos feita no Brasil para conferir a ordem de leitura dos balões. Um Layout leva em consideração esses fatores, pois a comunicação feita em balões em um quadrinho é feita com elementos (e widgets no caso de um software) em uma GUI.
A figura abaixo mostra a ordem de leitura de uma interface gráfica:
Note como a maioria dos websites carregam seu logotipo no canto superior esquerdo, é o local que se inicia a leitura. Ao construir uma interface, é importante fazer com que esta ordem seja seguida, pesando corretamente os elementos da interface. A Região Quatro mostrada acima, não deve pesar mais que a Região 1.
A Região 1 é o ponto inicial que o usuário observa seu site, muitos desenvolvedores de sites não sabem porque todos colocam o logotipo nesta região, acreditando que é um chavão, ele coloca também. Uma Região nunca deve ser mais pesada que a Região anterior.
A Região Dois é um ponto estratégico para a inserção de logotipos, ou um menu superior, pois o trajeto que os olhos fazem entre a Região Um e a Dois ainda é a mais importante. Dependendo do ramo do website, inserir um menu de serviços, um campo de senha ou publicidade, é uma prática bastante adotada por designers e webmasters.
Um outro fator importante na construção de um Layout, é atentar-se na Hierarquia da Informação, que consiste em organizar a disposição das informações em seu website em relação a outros elementos visuais da GUI. Essa disposição determina que informação o usuário vê, e o que ele é encorajado a fazer primeiro, muito utilizado em websites de comércio eletrônico (e-commerce). Para ajudar a decidir a hierarquia, deve fazer a si mesmo perguntas como: "Qual informação é mais importante para o usuário?" e "O que o usuário deseja ver primeiramente? E em segundo, terceiro, quarto lugar?". Para um usuário que procura websites de confecção de etiquetas comerciais, ver como elas são e preços é a prioridade, no caso de um software de edição de imagens, por exemplo, a primeira coisa que um usuário quer fazer é: Criar uma nova imagem.
Dar foco e ênfase nas informações relevantes e centrais do produto auxilia o usuário a se localizar no Layout. Se um usuário procura um website de um estúdio de gravação para treinar com sua banda, dê ênfase nas salas, preços e imagens do local, deixe mais relevante do que outros serviços como gravação de CDs, empréstimos de equipamentos, etc.
Estrutura e equilíbrio dos elementos e informações do site são vitais para que haja compreensão do layout. Misturar assuntos ou não deixar claro onde termina o menu, e onde começa o conteúdo, dificulta a leitura do usuário, e o mesmo acaba se perdendo. Sites pessoais sofrem pesadamente com este problema. Por falta de estudo, muitos criadores acabam pecando nas noções mais básicas de estrutura e equilíbrio. Um erro grave e imperdoável é misturar anúncio com conteúdo do site. Isso faz com que o usuário se sinta enganado por estar sendo persuadido a clicar nos anúncios de publicidade.
A figura abaixo ilustra uma tradicional quebra de equilíbrio e estrutura, misturando anúncios textuais da empresa Google Inc com itens de seu menu de navegação e elementos de notícias do site. O usuário que clicar erroneamente em um anúncio, se sentira enganado pela pegadinha, além de ter dificuldades em separar o que é anúncio de conteúdo.
Relação de Elementos é um fator que complementa a Estrutura e Equilíbrio. Criar relações entre elementos de mesma categoria, ou conduzir um fluxo de navegação é importante. Na figura abaixo temos um bom exemplo de manter relações usando cores. Note como o website do e-commerce Submarino utilizou cores para relacionar suas seções.
Agora, para fazer o enlace deste padrão de cores, note a figura abaixo e veja como o Submarino fechou a relação entre Beleza e Saúde com azul-bebê e Brinquedos com Vermelho, no mapa de navegação:
Por fim, quando temos um website, software ou game muito grande, é importante prestar atenção na unidade de integração. Isso faz com que uma seção de seu website, ou uma janela de seu software carregue elementos chaves que permitem o usuário saber que ainda está em seu website ou software. Isso exige que se construa uma identidade visual que permite saber em qualquer momento que mude o título de seu website por estar em uma sub-seção, ou caso abra muitas janelas em seu software, o usuário ainda saiba que ainda está dentro do produto, para não causar a sensação de que ele deixou o website, ou abriu outro programa. O Website da Microsoft Corporation possui um padrão visual onde mesmo mudando o título, nos permite deduzir que ainda estamos no website da Microsoft, basta olhar a figura abaixo e ver por alto a relação visual entre os dois sites.
A identidade visual do topo se mantém em todos os hotsites. A disposição do menu e elementos centrais (região 1, 2 e 3) sempre seguem o mesmo padrão. Então, não importa se mudar as cores ou até o logo, você ainda saberá que está dentro da rede de sites da Microsoft, ou ainda estará vendo um produto da Microsoft.
Então, resumindo a ópera, para começar a fazer uma interface de sucesso, os três itens abaixo devem ser obedecidos:
- Ter uma disposição dos elementos de forma correta;
- Tornar a navegação e leitura simples, sem poluição; e
- Criar uma identidade visual
Dá para começar a trabalhar com isso? Dá sim! Mas ainda tem mais coisas que vai gostar de saber, que estarei publicando nos próximos posts!
Visualizações: 1844As Oito Regras de Ouro
Complementando o post anterior que fala sobre avaliações heurísticas existe uma outra metodologia alternativa à Heurística de Nielsen. De acordo com Dias (2003, p.55), Ben Shneiderman também criou heurísticas para projetos que envolvem interfaces gráficas, que foi chamada de "As Oito Regras de Ouro", que são:
- Consistência: Seqüência de ações similares para procedimentos similares. Manter um padrão visual para as cores, Layout e fontes. Utilizar a mesma terminologia em menus.
- Atalhos para usuários assíduos: Teclas de atalho, macros e navegação simples facilitam e agilizam a interação do usuário mais experientes com a interface.
- Feedback informativo: Toda e qualquer ação do usuário requer uma resposta do sistema, cujo qual será mais ou menos explicativa dependendo do tipo de ação a ser executada.
- Diálogos que indiquem término da ação: As seqüências de ações do sistema deve ser organizada de tal forma que o usuário consiga entender os passos e saiba quando cada um deles for executado com sucesso.
- Prevenção e tratamento de erros: A interface não pode dar vias para o usuário cometer erros graves, e caso ocorram erros, devem haver mecanismos que tratem, corrijam na medida do possível, e caso não seja possível, instrua o usuário para uma possível solução.
- Reversão de ações: Sempre que possível, as ações devem ser reversíveis, de forma que tranqüilize o usuário e lhe dá mais coragem para explorar o sistema.
- Controle: Os usuários mais experientes devem ter a sensação de que eles dominam os processos do sistema e que ele apenas responde a suas ações.
- Baixa carga de memorização: O sistema deve conter uma interface simples para memorização. Para isso requer uma boa Estrutura e Equilíbrio para relacionar elementos e facilitar a memorização subjetiva das telas, sem exigir esforço.
Note que as heurísticas de Nielsen e nas regras de ouro de Shneiderman, apresentadas acima, contém alguma semelhanças. Ambas buscam a melhor experiência de uso, objetivando a busca da qualidade e acessibilidade da interface a ser usada, baseando-se na qualidade, na "amigabilidade" (user-friend) e usabilidade do sistema.
Este é um fator que prova que a usabilidade proporciona um maior conforto para o usuário, uma vez que todos buscam maior agilidade e menos tempo de adaptação necessária para utilizar o software, website ou game.
Devido ao dia-a-dia rápido e dinâmico em que as pessoas são submetidas, a necessidade de assimilação de um sistema deve ser o mais rápido possível, para que as empresas tenham o maior lucro possível devido a treinamentos menores. Uma interface fácil permite um aprendizado melhor e com isso, menor tempo de treinamento, e, portanto maior economia.
Acredito que valha a pena explorar esse lado com mais atenção ao desenvolver um sistema, certamente o resultado é positivo depois de tantos estudos por tantas pessoas.
Visualizações: 856Usabilidade
Usabilidade tem muito o que falar, mas vou seguimentar em vários posts, começando com este, que introduz o assunto, conta um pouco da história e seus criadores e objetivos.
Para Hix e Hartson (apud Heemamm, 1997), conceituaram usabilidade como a combinação da fácil aprendizagem, alta velocidade de execução de tarefas, baixa taxa de erros, subjetiva satisfação e retenção do conhecimento da interface, ou seja, o usuário mesmo depois de um bom tempo sem interagir com a interface, ainda se lembra de como usa-la. Já para Bevan (apud Dias, 2003) aponta "usabilidade" como sendo um termo técnico para referenciar a qualidade de uso de uma interface. De acordo com as normas ISO 9241, "usabilidade" é definida como "Efectividade", Eficiência e Satisfação com que os usuários atingem os seus objetos em um determinado sistema.
Quando falamos de usabilidade, estamos nos referindo o quão bem os usuários podem utilizar os recursos do website ou software. "User Friend" (amigo do usuário) é um termo mundialmente conhecido para definir se uma interface ajuda o usuário, seja um website, software ou game. Porém, user friend é diferente de usabilidade, além de não ser uma definição baseada em termos científicos, ou seja, dizer que uma interface é user friend, não lhe dá substrato e métricas. É um termo vago, e muito abrangente.
Porém, Nielsen associou o termo usabilidade a cinco atributos de uma interface passiveis de mensuração, que seguem:
- Facilidade de aprendizado;
- Eficiência de uso;
- Facilidade de memorização;
- Baixa taxa de erros e
- Satisfação subjetiva
Com esses atributos, torna-se possível medir o grau de usabilidade, além de se tornar um termo mais concreto. Dizer se uma interface tem alta ou baixa usabilidade é verdadeiro.
Visualizações: 408A Xerox não é só para copiar papel
No post anterior contei a história da interface gráfica, mas sem dúvidas, um dos saltos no mundo das interfaces gráficas foi dada pela empresa Xerox, acredite, na construção de um sistema desktop chamado 8010 Star Information System em 1981. Este foi seu primeiro sistema comercial que reuniu várias tecnologias que hoje podemos chamar de "Computador Pessoal", incluindo um display de bitmaps, e sem dúvidas, a primeira interface a usar o conceito de janelas, ícones, pastas e menus.
A filosofia chave para a construção desta interface, é de que ela deveria ser intuitiva para o usuário final, para ser usada em escritórios e empresas. E para isso, o carro chefe foi o conceito de What You See Is What You Get (WYSIWYG).
No final, podemos observar uma tela onde há ícones e pastas, cada qual representando seu tipo de arquivo (imagem, texto, etc), onde ao clicar neste ícone, abre-se uma janela. Note que no Star da Xerox, não há programas como editores de imagem e processadores de textos, mas cada tipo de documento abre em seu aplicativo apropriado, e nada mais.
A interface do Star da Xerox segue o conceito de objetos, por exemplo, em um editor de textos, você tem objeto página, objeto parágrafo, objeto palavra, objeto letra, e se você clicar neste objeto, você invoca uma série de opções como copiar, recortar, remover. Em outros casos aparece uma "janela de opções" onde você pode configurar propriedades diferenciadas para cada tipo de objeto, como tamanho da fonte e estilo.
A interface do Star da Xerox segue o conceito de objetos, por exemplo, em um editor de textos, você tem objeto página, objeto parágrafo, objeto palavra, objeto letra, e se você clicar neste objeto, você invoca uma série de opções como copiar, recortar, remover. Em outros casos aparece uma "janela de opções" onde você pode configurar propriedades diferenciadas para cada tipo de objeto, como tamanho da fonte e estilo.
Uma das inovações também inclui a alta compatibilidade entre os aplicativos, por exemplo, se você cria um objeto gráfico em um programa de imagens, você pode inseri-lo dentro do editor de textos, juntamente com sua documentação. Esta capacidade de incluir diferentes objetos em um mesmo lugar não existia no Microsoft Windows antes de ser criada a tecnologia Object Linking and Empedding (OLE) que foi inclusa no Windows nove anos depois, em 1990.
Podemos ver o resultado desta incrível criação na imagem abaixo, onde é possível observar os diferentes objetos interagindo. Note os widgets, ícones e janelas:
Pena que hoje a Xerox é vista como copiadora de papel, ou melhor, a ação de fotocopiar uma folha!
Visualizações: 398O surgimento da GUI
Historicamente, nos anos 60 não existia uma interface gráfica, até então, tudo era a base de cartões perfurados, quando não, papéis perfurados com algoritmos e alfabetos, o output (saída de dados) era feita através de impressoras. Não existia uma interação com o usuário.
Sketchpad sendo usado
Em 1962, Ivan Sutherland nascido em 1938 e até a data deste post, ainda vivo, criou em sua tese de PhD no Massachusetts Institute of Technology (MIT) o que podia se dizer a primeira GUI já desenvolvida. O software Sketchpad, que podemos considerar o antecessor do Caomputer-Aided Drafting (CAD) abriu alas para o mundo das interfaces gráficas. Com o uso de um light pen (uma caneta sensível conectada ao terminal) e um Cathod Ray Tube (CRT) que conhecemos como Monitores CRT usados até hoje
O Sketchpad segundo a Wikipédia, através de uma interface simples, porém intuitiva proporcionou ao usuário uma nova experiência ao operar um computador. Com o monitor sensível aos toques da light pen, o usuário pode "clicar" nas regiões onde estariam desenhadas opções. As áreas clicáveis eram reconhecidas ao toque, e o terminal determinava se a área x-y do toque executava alguma ação. Adicionalmente, o usuário podia desenhar na tela com a Light Pen.
Visualizações: 262Silverlight: Primeiros passos
Quando falamos de interfaces gráficas e WEB, logo corremos nossa mente para a tão famosa WEB 2.0 com suas bordas arredondadas e peroladas, com sua logo sombreada sempre com o "beta" pendurado em algum canto.
Mas quando falamos de GUI para WEB, as coisas não estão só limitadas a isso, pelo menos por enquanto. Há uma tecnologia da Microsoft que já está andando faz um tempo mas ainda não fez seu boom chamada Silverlight (que as pessoas adoram falar que é um copycat do Adobe Flash).
Cada uma tem suas particularidades e no caso do Silverlight, tem coisas muito interessantes, principalmente quando falamos de WEB.
Usando o WPF, o Silverlight tem uma seleção de recursos interessantes quando falamos de interfaces, aliado a suíte de aplicativos Microsoft Expression (mais especificamente, o Expression Blend) o desenvolvimento para essa nova plataforma (que eu adoro chamar de HiFi UI) fica muito mais fácil.
As principais particularidades do Silverlight 2 para desenvolvimento de aplicações RIA, em sua versão BETA para uso massivo incluem:
- Uso de WPF na UI: Usando o Windows Presentation Foundation da Microsoft, produzir essas interfaces agora é fácil (para quem já degustou a versão 1 do Silverlight sem esse WPF). Com ele, é possível uma alta manipulação gráfica, animações além de inserção e alta personalização de controles como Buttons, TextBox. Alta capacidade de manipulação de Layout, Estilos, Data-Binding e o meu preferido: Template Skinning. O mais divertido disso tudo é que você pode usar a alta personalização feita na Web e reutilizar os controles em Windows Form Applications. Basicamente, a liberdade que se tem em um Windows Form Applications foi introduzida na WEB.
- Rich Controls: Todos os widgets já conhecidos em windows form applications podem ser usado de forma fácil e simples para a WEB. Isso inclui controles de layout (Grids, Containers, Panels, etc), comuns (Gauges, Scrolls, Calendars, etc) e manipulação de dados (DataGrids, ListBox, etc). Todos estes controles com um nível de edição alto, permitindo o designer soltar a imaginação no formato e cores do controle, antes limitado.
- Rich Base Class Library: Todo o poder de manipulação de dados oferecido pela API do .NET é possível com o Silverlight, pois toda a library do framework conversa com o mesmo, como por exemplo: Collections, IO, Threading, XML, Globalization, TCP, etc).
- Rich Networking Support: O Silverlight suporta um pool de possibilidades de networking, incluindo o tão comum RSS, como o REST, WS*/SOAP, POX e outros serviços HTTP. (Não preciso citar toda a liberdade TCP/IP né?)
Agora, um fato importante é que o Silverlight 2 não requer o Framework da Microsoft para rodar no computador cliente, apenas sua library mínima. Pesa pouco mais de 4MB e roda nos navegadores mais comuns como IE (obviamente), FireFox, Safari, etc.
E o melhor de tudo é que tudo pode ser programado via Visual Studio 2008 (o Expression Blend integra completamente com o VS), bastando adicionar alguns pacotes de expansão gratuitos.
Tanto o Visual Studio 2008 quanto o Expression Blend (em suas versões Preview) podem ser baixadas e exploradas gratuitamente, não sendo necessário a recorrer ao "capitão gancho" para fuçar nele.
Para começar a experimentar, incentivo a acessar o Get Starting do site oficial do Silverlight, e em poucas horas estará programando seus primeiros Hello Worlds no seu PC gratuitamente. (Pelo menos no caso do Visual Studio, por 90 dias).
Silverlight: http://silverlight.net/GetStarted/
No site também tem o blog do Scott Guthrie, onde baseei este post, e lá contém mais informações sobre os primeiros passos.
Tem no site supracitado, mas vale dar uma ajuda que a Microsoft também oferece uma vídeo-aula mostrando desde a instalação de todas as suítes até o seu primeiro "Hello World", realmente fantástico! (http://silverlight.net/learn/learnvideo.aspx?video=57010)
Estarei continuando isso, e não deixem de ver mais sobre esse mundo, pois as possibilidades são infinitas e há espaço no mercado para todos =)
Visualizações: 439