<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Magel Studio &#187; redesign</title>
	<atom:link href="http://magelstudio.com.br/tag/redesign/feed/" rel="self" type="application/rss+xml" />
	<link>http://magelstudio.com.br</link>
	<description></description>
	<lastBuildDate>Mon, 30 Jan 2012 02:36:05 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>Redesenho do site da Mirandouro</title>
		<link>http://magelstudio.com.br/2010/09/24/redesenho-site-mirandouro/</link>
		<comments>http://magelstudio.com.br/2010/09/24/redesenho-site-mirandouro/#comments</comments>
		<pubDate>Fri, 24 Sep 2010 01:40:20 +0000</pubDate>
		<dc:creator>Marco Moreira</dc:creator>
				<category><![CDATA[arquitetura de Informação]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[redesign]]></category>
		<category><![CDATA[sketch]]></category>

		<guid isPermaLink="false">http://magelstudio.com.br/?p=2477</guid>
		<description><![CDATA[A Mirandouro é uma empresa tradicional na fabricação de jóias em ouro 18k e seus clientes possuem por natureza um alto grau de exigência no que diz respeito a imagem e a design, por isso ela precisava de um site que pudesse traduzir um pouco a sua imagem no mercado. A empresa já tinha um [...]]]></description>
			<content:encoded><![CDATA[<p>A <a title="Site da Mirandouro" href="http://www.mirandouro.com.br" target="_blank">Mirandouro</a> é uma empresa tradicional na fabricação de jóias em ouro 18k e seus clientes possuem por natureza um alto grau de exigência no que diz respeito a imagem e a design, por isso ela precisava de um site que pudesse traduzir um pouco a sua imagem no mercado.<br />
A empresa já tinha um site com um visual definido e o cliente queria &#8220;dar vida&#8221; e movimento ao site já existente. É aí que o designer aqui entra.</p>
<p>Propus então alguns ajustes no layout sem perder a característica já adotada, fazendo com que a nova proposta visual pudesse se encaixar melhor na construção do site em Flash. Então fiz alguns rafes em cima do layout antigo sugerindo as melhorias para o cliente com a preocupação de enriquecer a experiência do usuário, valorizar o produto e dar maior legibilidade e clareza aos textos, botões e imagens.</p>
<p><a href="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2010/09/rafes-novo-site-11.jpg" rel="lightbox[2477]"><img class="alignnone size-large wp-image-2482" title="Proposta de redesign" src="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2010/09/rafes-novo-site-1-630x457.jpg" alt="Proposta de redesign" /></a></p>
<p><a href="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2010/09/rafes-novo-site-21.jpg" rel="lightbox[2477]"><img class="alignnone size-large wp-image-2483" title="Proposta de redesign" src="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2010/09/rafes-novo-site-2-630x457.jpg" alt="Proposta de redesign" width="630" height="457" /></a></p>
<p>Com a ideia aprovada, layoutei todas as páginas. Abaixo você poderá ver um panorama geral da mudança do antigo para o novo (clique na imagem para ampliar).</p>
<p><a href="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2010/09/antes-depois-11.jpg" rel="lightbox[2477]"><img class="alignnone size-large wp-image-2479" title="Nova home com imagem randômica e nova página de texto com maior respiro e legibilidade" src="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2010/09/antes-depois-1-630x395.jpg" alt="Nova home com imagem randômica e nova página de texto com maior respiro e legibilidade" width="630" height="395" /></a></p>
<p><a href="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2010/09/antes-depois-21.jpg" rel="lightbox[2477]"><img class="alignnone size-large wp-image-2480" title="Otimização do espaço para a valorização do produto e recurso de mouse over para detalhes das peças" src="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2010/09/antes-depois-2-630x395.jpg" alt="Otimização do espaço para a valorização do produto e recurso de mouse over para detalhes das peças" width="630" height="395" /></a></p>
<p><a href="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2010/09/antes-depois-31.jpg" rel="lightbox[2477]"><img class="alignnone size-large wp-image-2481" title="Melhoria na usabilidade em Clipping e nova funcionalidade de envio de e-mail pela página de contato" src="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2010/09/antes-depois-3-630x395.jpg" alt="Melhoria na usabilidade em Clipping e nova funcionalidade de envio de e-mail pela página de contato" width="630" height="395" /></a></p>
<p>Depois de todas as telas aprovadas, parti para a produção em Flash que você pode <a title="Novo site da Mirandouro" href="http://www.mirandouro.com.br/" target="_blank">ver agora no ar</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://magelstudio.com.br/2010/09/24/redesenho-site-mirandouro/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Redesign do site da Mundo Estranho</title>
		<link>http://magelstudio.com.br/2008/10/07/redesign-do-site-da-mundo-estranho/</link>
		<comments>http://magelstudio.com.br/2008/10/07/redesign-do-site-da-mundo-estranho/#comments</comments>
		<pubDate>Wed, 08 Oct 2008 02:59:14 +0000</pubDate>
		<dc:creator>Marco Moreira</dc:creator>
				<category><![CDATA[arquitetura de Informação]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[arquitetura de informação]]></category>
		<category><![CDATA[redesign]]></category>

		<guid isPermaLink="false">http://blog.magelstudio.com.br/2008/10/07/redesign-do-site-da-mundo-estranho/</guid>
		<description><![CDATA[Wireframe O site da Mundo Estranho passou por uma reformulação radical. O objetivo foi a diminuição de peso e banda ocasionados pelo grande conteúdo Multimídia que o site anterior tinha, ter mais foco no que a marca tem de mais forte (curiosidades), melhorar a usabilidade e agilidade na navegação e fazer uma grande busca por [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Wireframe</strong><br />
O site da <a href="http://www.mundoestranho.com.br" target="_blank">Mundo Estranho</a> passou por uma reformulação radical. O objetivo foi a diminuição de peso e banda ocasionados pelo grande conteúdo Multimídia que o site anterior tinha, ter mais foco no que a marca tem de mais forte (curiosidades), melhorar a usabilidade e agilidade na navegação e fazer uma grande busca por perguntas e palavras-chave para que o usuário possa encontrar a resposta em forma de texto e infográficos que dão apoio às respostas.</p>
<p>Dentro deste objetivo comecei a organizar a informação e navegação no <a href="http://www.axure.com/" target="_blank">Axure</a> (imagem abaixo) e finalizado e aprovado a navegação, parti para o layout do site, que segue bem a estrutura criada.</p>
<p><img class="size-full wp-image-366 alignnone" title="redesenho_me2" src="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2009/06/redesenho_me2.jpg" alt="redesenho_me2" width="500" height="753" /></p>
<p><strong><br />
Layout<br />
</strong>Realizei o estudo de <strong>cores</strong> e <strong>iconografia</strong> dos canais priorizando o uso de CSS, melhorando a indexação em buscadores, padronização e compatibilidade com diversos browsers, estudo de tamanhos de título e conteúdo, RSS, tamanho e <strong>padrões de imagens</strong>, módulos na home com tamanhos de imagens diferenciadas dando maior flexibilidade para o Editor e um box do lado esquerdo com rápido acesso à área participativa para assinantes e leitores da revista.</p>
<p><img class="size-full wp-image-365 alignnone" title="redesenho_me1" src="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2009/06/redesenho_me1.jpg" alt="redesenho_me1" width="500" height="830" /></p>
<p><strong>Paleta de cores</strong><br />
Paleta usada como &#8220;manual&#8221; com a finalidade de facilitar a vida do programador e para quem irá trabalhar com o site daqui pra frente.</p>
<p><img class="size-full wp-image-367 alignnone" title="paleta_de_cores" src="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2009/06/paleta_de_cores.jpg" alt="paleta_de_cores" width="500" height="550" /><br />
<strong> </strong></p>
<p><strong>Iconografia dos canais</strong><br />
Seguindo as cores dos canais, a designer <a href="http://www.magelstudio.com.br/fzambon" target="_blank">Fabi Zambon</a> me ajudou a conceber a iconografia de maneira que fosse facilmente reconhecida e claro, o nome do <a href="http://mundoestranho.abril.com.br/tecnologia" target="_blank">canal</a> acompanha o ícone.</p>
<p><img class="size-full wp-image-368 alignnone" title="iconografia" src="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2009/06/iconografia.jpg" alt="iconografia" width="460" height="327" /></p>
<p><strong>Padrões das imagens</strong><br />
Foi pensado também na padronização das imagens da home, imagens de promoção e tamanho padrão das capas de revista a fim de facilitar também no trabalho de atualização do designer/editor.</p>
<p><img class="size-full wp-image-369 alignnone" title="tamanho_imagens" src="http://magelstudio.estudiodefotografia.com.br/wp-content/uploads/2009/06/tamanho_imagens.jpg" alt="tamanho_imagens" width="490" height="616" /></p>
<p><strong><br />
</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://magelstudio.com.br/2008/10/07/redesign-do-site-da-mundo-estranho/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

