UNIVERSIDADE ESTÁCIO DE SÁ CURSO DE DESENHO INDUSTRIAL WEBDESIGN CAMPUS PRAÇA XI - NOITE VICTOR YAMAMOTO DE SOUZA

Transcrição

1 UNIVERSIDADE ESTÁCIO DE SÁ CURSO DE DESENHO INDUSTRIAL WEBDESIGN CAMPUS PRAÇA XI - NOITE VICTOR YAMAMOTO DE SOUZA Rio de Janeiro 2013

2 INTRODUÇÃO O presente projeto visa o desenvolvimento de um website para a rede de restaurantes Sbarro, especializada em pizzas e culinária italiana no geral. Originada em 1956 no Brooklyn, EUA, é uma empresa tradicional em vários estados do país, querendo atualmente expandir sua área de atuação para o Brasil, sendo aberto uma filial no Shopping Village Mall, na Barra da Tijuca, RJ. O principal objetivo do mesmo é criar uma forma de divulgação virtual que possa funcionar como cartão de visitas apresentando a empresa e também agilizar o atendimento real dos pedidos de encomenda, através de cardápios online.

3 ABRANGÊNCIA Os responsáveis pela idealização do projeto, bem como sua avaliação e aprovação são o sr Randy Jones, diretor de estratégias globais e a srª Sarah McAloon, diretora do departamento de marketing. Como restaurante temático e conhecido internacionalmente, possui um público mais seleto pela qualidade de atendimento oferecida, tendo por este motivo escolhido a Barra da Tijuca como bairro inicial para sua atuação no Brasil, onde há predominância da classe B, conforme sustenta o estudo realizado pelo SEBRAE RJ. Além da classe social, identifica-se como público-alvo da empresa homens e mulheres de várias idades, geralmente entre 13 e 40 anos, que buscam rapidez e qualidade de atendimento. Referência disponível em: QUIVOS_CHRONUS/bds/bds.nsf/0EE8D61A9BD9491E /$File/ NT000470F2.pdf.

4 PESQUISA DE SIMILARES A pesquisa de similares foi realizada com restaurantes italianos presentes na própria Barra da Tijuca e também em outros bairros nobres do Rio de Janeiro, visando a aproximação com as características do público-alvo da Sbarro. Foi possível constatar, de forma geral, um layout mais simplificado, com poucos elementos e destaque para as fotos do espaço físico ou dos produtos oferecidos, com a excessão do Spoleto que tem um layout com maior quantidade de elementos e menos requinte, utilizando uma proposta mais popular. As cores tendem a relacionar-se com o esquema cromática da bandeira nacional italiana (ex: Tizziano e Brambini), com matizes relacionadas à massa (ex: Artigiano), símbolo da culinária do país, ou tons mais neutros e escuros, demonstrando requinte e sofisticação (ex: Fasano). Website do reustaurante Tizziano.

5 Website do reustaurante Spoleto. Website do restaurante Brambini.

6 Website do restaurante Artigiano. Website do restaurante Fasano.

7 A MARCA E SEUS ELEMENTOS VISUAIS Logotipo atual da empresa. A empresa Sbarro já possui um logotipo, cuja conceitualização baseia-se na bandeira italiana, tanto nas cores quanto na forma, embora as listras estejam na posição vertical. O nome Sbarro, originado através do sobrenome da família fundadora, apresenta-se sobre o símbolo que funciona como moldura, utilizando uma versão em negrito, para destacar- -se sobre o fundo e tornar-se mais pregnante. O website estrangeiro segue o mesmo padrão do logotipo, utilizando o verde e o vermelho como cores principais e o branco como cor de fundo ou secundária. O preto aparece geralmente nos textos, otimizando a legibilidade das letras. A navegação ocorre basicamente por meio do menu principal horizontal posicionado no topo do website, com submenus deslizantes. No que se refere à tipografia, há a mesclagem dos tipos serifados e não serifados, sendo o primeiro utilizado em títulos e destaques, enquanto o segundo nas massas de texto dentro do site, embora as fontes serifadas possam não ser tão funcionais quanto as sans-serif em ambientes virtuais quanto em materiais impressos, uma vez que em monitores com resoluções maiores elas podem prejudicar a visualização.

8 Website da empresa nos Estados Unidos. Para a criação do novo website, visando sua adaptação ao mercado brasileiro, foi decidido a utilização dos elementos similares ao website, como o esquema cromático do logotipo. Porém, devido à falta de pregnância das cores principais, o laranja foi utilizado como destaque tipográfico, criando uma relação com o produto e trazendo ao layout a cinergia das cores quentes. A tipografia seria alterada para uma sem serifa, visando a otimização da legibilidade em ambiente virtual. Desta forma, foi escolhida a família Lucida para compor a tipografia do website, utilizando a fonte Lucida Handwriting como elemento de destaque por sua estética caligráfica, denotando uma preocupação quase artesanal, e a fonte Lucida Sans Unicode, utilizando-a nas massas de texto, a fim de manter o padrão estético e melhorar a visualização, além de garantir a reprodução da mesma em diferente computadores, uma vez que esta é uma fonte padrão do sistema Windows.

9 MAPA DO WEBSITE De acordo com a análise das informações a serem implantadas no website, foi criado um mapa para estrutural com o intuito de organizá-las hierarquicamente e de forma simplificada. Basicamente a página principal pode levar o usuário à qualquer área do site, com a exceção dos cardápios, cuja subdivisão informa os tipos de refeições disponíveis. Home Cardápio O restaurante Contato Pizzas crocantes Pizzas recheadas / Stromboli Saladas Massas Mapa do website em desenvolvimento.

10 WIREFRAMES A estrutura básica do website americano foi mantido, visando a padronização da marca e a eficiência do posicionamento vigente. O logo no canto superior esquerdo facilita e agiliza a identificação da marca, sendo o posição primária dentro da ordem de leitura. O menu horizontal, segundo elemento dentro da ordem, é mantido devido à sua importância base, seguido da área de conteúdo e do rodapé, como elemento de menor relevância e informações complementares. Logo Menu horizontal Conteudo principal Rodapé da página / informações complementares Wireframe da página principal.

11 No caso da seção cardápio tornou-se necessário a divisão da área do conteúdo principal para dar origem à um submenu onde seriam listados os tipos de refeições disponíveis. Neste caso a área de conteúdo (reduzida) passa a exibir os pratos segundo a seleção no submenu. Logo Menu horizontal submenu Conteudo principal Rodapé da página / informações complementares Wireframe da seção Cardápio.

12 LAYOUT DA INTERFACE O elemento de fundo do logotipo da empresa foi utilizado como borda da área de conteúdo, reforçando as cores da marca. Ao mesmo tempo servem como divisão entre as áreas do site, limitando a área principal de navegação e de informações complementares e destacando a área do conteúdo. O fundo do site é um pattern que forma uma malha com elementos e cores relevantes ao tema, diminuindo a monotonia gerada pelo branco. O anúncio promocional é similar à versão americana, destacando o produto oferecido e servindo para captar atenção do usuário através da sedução da imagem pelos sentidos. Layout da página principal.

13 A cor marrom foi escolhida para compor o fundo do submenu baseando-se na composição da imagem promocional da página home, e também por possibilitar um bom contraste com o branco. As imagens utilizadas como fundo na área de conteúdo da página cardápio são fotografia dos produtos oferecidos, que são alternadas conforme o item escolhido, representando os mesmos. Assim como no menu principal horizontal, o submenu marca o link selecionado como página atual através da coloração laranja, auxiliando o usuário na navegação. Layout da seção Cardápio.

14 TELAS DO WEBSITE Página Home. Página O restaurante.

15 Página Cardápio, item Pizzas crocantes. Página Cardápio, item Pizzas recheadas / Stromboli.

16 Página Cardápio, item Saladas. Página Cardápio, item Massas.

17 Página Fale Conosco.

18 AVALIAÇÃO HEURÍSTICA A avaliação heurística do website foi realizada através de um modelo com programação simplificada, disponibilizada à três usuários selecionados a fim de avaliar os critérios propostos, seguindo a metodologia sugerida de Nielsen. Desta forma foi possível alcançar a seguinte avaliação: 1 - O diálogo com o usuário se estabelece de forma simples, havendo apenas a quantidade necessária de informações; 2 - A linguagem é comum ao usuário, tendo algumas ressalvas nos nomes de certos pratos oferecidos na página Cardápio, dificuldade oriunda do fato de ser uma culinária estrangeira, mas que é solucionada com a descrição do prato logo abaixo. 3 - A pouca quantidade de links e a disposição do menu principal visível em qualquer parte do site facilita a navegação, não havendo labirintos onde o usuário se perca, pois os caminhos encontram-se sempre à mostra. 4 - A interface é padronizada, e não foi encontrada nenhuma ação ambígua. 5 - O modelo de teste não contempla a programação de envio de formulário, porém o projeto é que haja uma mensagem de confirmação de envio para que o usuário possa ter um retorno de sua operação. 6 - Faz-se a mesma avaliação do item A interface não conta com atalhos, uma vez que não há esta necessidade devido à baixa quantidade de links

19 8 - Como citado no item 5, não há a utilização de sistema de envio, havendo poréma a intenção de que seja informado claramente ao usuário caso alguma informação preenchida no formulário esteja incorreta. 9 - Tendo um formulário que contém apenas 3 campos de temática simples, nenhum dos avaliadores achou necessário maiores informações à respeito da utilização do sistema de envio Não há necessidade de nenhuma página de ajuda, segundo os avaliadores, devido à simplicidade da interface.