RELATÓRIO DESIGN PORTAL RIO ESTADO DIGITAL CONTÉUDO PARA O CARNAVAL 1. INTRODUÇÃO Para o carnaval de 2011 foi pensado uma intervenção no ambiente do portal que projetava não só ações no âmbito de conteúdos e serviços, como desdobramentos do Projeto de Identidade Visual, webdesign e do Design de personagens. A proposta de criar um ambiente particular para o período do carnaval envolveu estudos para adequação da marca, redesign de interface, animações e adaptação de toda navegação para exibição em plataformas celulares. Por conta disso, essa etapa do projeto consolidou além do desenvolvimento de um novo produto para o Portal, um estudo de seu potencial de adaptação transmídia (desktops/celulares) e geração de sub-produtos como esse hotsite. 2. IDENTIDADE VISUAL O partido adotado para a Identidade visual do hotsite foi a manutenção do vínculo com o layout do portal e a consolidação da imagem do projeto. Sendo assim, o estudo de cores e formas foi pautado na marca do portal e nas cores da home. Da palheta original do portal foi escolhida três cores com tonalidades mais diferenciadas e depois apenas clareou-se um dos tons de azuis para destacá-lo do azul principal da identidade. Em uma última etapa, adicionou-se o laranja para que a gama de cores variasse em um espectro mais amplo de acordo com a temática em questão.
Definição de fontes e palheta de cor Com a palheta e fonte definida, a logo vetorial foi tratada então como mapa de bits permitindo aplicação de textura e volume. Além da logo, um grafismo foi criado, grafismo que desdobra a idéia de quadrados da logo em bolas/confetes nas cores da palheta.
Criação de grafismos e aplicação de texturas Tendo em vista o contexto diversificado de exibição do hotsite e a necessidade de configurações diferentes de acordo com as diversas plataformas, produziu-se um brasão que isola a logo e a mantém passível de ser aplicada independente da região, sem interferir em sua composição.
Destaque da forma como selo para aplicação autônoma em diversos ambientes 2. WEBDESIGN Os estudos de webdesign partem da listagem do conteúdo e de uma definição de wireframe que estabelece os paralelismos entre as exibições em desktop e em celular.
Texto sobre sit e Celular Tela de abertura Portal Home Vinhet as de abert ura (link para o canal ) Box sobre a home, com link para o canal Logo RED/Carnav al Barra de nav egação - funções Menu - f unções Menu de funções Canal Download de Papéis de parede Informações sobre as escolas Quiz Enquetes Dowload de papéis de parede Informações sobre escolas Barra de navegação funções de sub menu Identificação da Escola (logo, brasão ou nome) Enquete s Thumbnail dos papéis de parede Escolha de album de fotos Fotos de um album Thumbnail das capas dos albuns Thumbnail das f otos Fotos Escolha de Álbum de fotos Fotos de um album wireframe de conteúdo e funções do hotsite Essa visualização geral das demandas do hotsite permitiu as orientações do sistema visual da interface. Concluídas as definições da logo, palheta de cores, fontes e grafismos, o layout do hotsite também adapta a identidade visual das páginas internas com esses elementos visuais. A interface contou ainda com estudo de pattern que traz a textura da logo para o fundo branco das páginas. A barra de faixas em degradé também foi tratada com a textura e escolheu-se a cor laranja como cor principal do segmento distinguindo das demais abas do portal. Passouse a utilizar parte do grafismo para o destaque de títulos e formatou-se uma diagramação dos títulos que remetessem tanto a formatação do portal como a tipografia usada nesse segmento.
Proposta de layout de elemntos da interface Essas definições foram utilizadas em todo o sistema, apenas os segmentos específicos das escolas de samba tiveram suas cores adaptadas às cores das agremiações tanto nas faixas como nos grafismos e títulos: Faixas variando de cor de acordo com as escolas Grafismos variando de cor de acordo com as escolas
Títulos variando de cor de acordo com as escolas A diagramação das telas segue, então, a exposição de conteúdos dentro desse sistema de elementos. Aplicação de Identidade Visual do Portal nos diversos segmentos do hotsite
A adaptação da interface do ambiente desktop para o celular foi realizada pela re-diagramação dos elementos do sistema para exibição em diferentes plataformas (I-phone, Andorid etc.). Aplicação de Identidade Visual do Portal na exibição para celualres. O restante do conteúdo do portal continuou com usa identidade, mas, durante esse período, a logo adaptada também foi aplicada aos demais segmentos de conteúdo, como na home, por exemplo:
Aplicação do brasão nos outros segmentos do protal. 4. PERSONAGENS E CONTEÚDOS GRÁFICOS Os personagens símbolos do Portal: Linete, Lanzinho e Red também participaram da construção desse hotsite em duas situações: - uma vinheta animada para a home do portal: anunciando nesse momento da navegação principal a existência do hotsite; - Ilustração temática: adaptação dos personagens ao tema do hotsite para aplicação em vinhetas gráficas, material impresso de divulgação e em conteúdos gráficos oferecidos como brindes.
Frames da vinheta de divulgação do hotsite na home do portal Ilustração temática dos personagens
Aplicação em material de divulgação impresso (filipeta) Como brinde, para o usuário, foram criados papéis de parede que podiam se baixados tanto para interface do computador como para o celular. Os papéis de paredes traziam as cores da escola preferida do usuário na bandeira e nas fantasias dos personagens. Exemplo de aplicação da ilustração em papéis de parede
Papel de parede aplicado ao desktop
Papéis de parede para as outras escolas.