WEBDESIGN

UNIVERSIDADE ESTÁCIO DE SÁ
CURSO DE DESENHO INDUSTRIAL
WEBDESIGN
CAMPUS PRAÇA XI - NOITE
VICTOR YAMAMOTO DE SOUZA
200901191267
Rio de Janeiro
2013
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.
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: http://bis.sebrae.com.br/GestorRepositorio/ARQUIVOS_CHRONUS/bds/bds.nsf/0EE8D61A9BD9491E8325795700652708/$File/
NT000470F2.pdf.
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.
Website do reustaurante Spoleto.
Website do restaurante Brambini.
Website do restaurante Artigiano.
Website do restaurante Fasano.
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.
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.
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.
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.
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”.
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.
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”.
TELAS DO WEBSITE
Página “Home“.
Página “O restaurante“.
Página “Cardápio“, item Pizzas crocantes.
Página “Cardápio“, item Pizzas recheadas / Stromboli.
Página “Cardápio“, item Saladas.
Página “Cardápio“, item Massas.
Página “Fale Conosco”.
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 3.
7 - A interface não conta com atalhos, uma vez que não há esta necessidade
devido à baixa quantidade de links
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.
10 - Não há necessidade de nenhuma página de ajuda, segundo os avaliadores, devido à simplicidade da interface.