BRISTRÔ
RELATÓRIO DE TECNOLOGIAS WEB
DSG 1787 2015.2
Antonio Lapa Eduardo Massá Lucas luz
3 4 8 13
APRESENTAÇÃO PROCESSO O SITE CONCLUSÕES
3
APRESENTAÇÃO
A ideia do nosso projeto começou por um interesse comum entre os membros do grupo, comida. No começo pensamos em fazer um redesign do site do restaurante GulaGula, ao analisar o conteúdo do site vimos que isso acabaria nos limitando muito, por isso escolhemos desenvolver um template de website chamado, Bistrô.
4
PROCESSO
Estrutura O processo comeรงou pelo desenvolvimento de uma estrutura base, no formato de mapa mental.
5
Wireframes Evoluiu para um wireframe, onde já conseguimos definir os parâmetros base das páginas a serem construídas.
Amostra de wireframe
6
Visual Ap贸s o wireframe come莽amos a pensar na estrutura visual, usamos o sketch para compor e exportar os assets.
7
8
O SITE
O Site comporta as informações básicas de um restaurante.
Estrutura base de navegação Em todas as página do site há um navbar superior fixado no topo que redireciona para as páginas de “home”, “cardápio” e “onde”. O footer comporta um mini menu de navegação, o logo do estabelecimento e informações base para o contato. Tentamos fazer com através de javascript com que a navbar só aparecesse quando o header desaparecesse da tela e só voltar quando o usuário der scroll para cima, infelizmente não conseguimos aplicar os tutoriais disponíveis na internet.
Header e footer
9
A página inicial o topo, mostra uma foto grande em fullwidth como uma imagem da cozinha. Logo abaixo, um pouco da história do estabelecimento e do chef responsável pode ser contada. Segundo um preview da pagina de cardápio com um botão de call-to-action para o usuário ver todo o menu ofertado. Para completar um seção informativa com os possíveis restaurantes da rede, também com um botão de call to action que levara para a página de onde” Nessa seção pretendíamos colocar um slider para passar os possíveis restaurantes da rede, porem estavam aparecendo muitos problemas, principalmente na versão mobile, optamos por uma outra alternativa.
10
Pรกgina inicial
11
Página do cardápio A página de cardápio, assim como a home, possui um grande header para uma imagem em backgroud relacionada ao tipo de comida vendida no estabelecimento. Seguido do menu completo separado em duas colunas de 6 na versão de desktop.
Página do cardápio
12
Página de Onde Um grande foto do local é mostrada ao topo, seguida de informações mais especificas como horário de funcionamento, telefones e endereço, com um grande link de “pin” central para o google maps. Em um primeiro momento pensamos em adicionar um mapa funcional a página por embed, contudo vimos que para o usuário ser redirecionar direto para o site do google maps facilita o acesso a ferramentas como a de rota.
Página onde
13
CONCLUSÕES
Esse processo foi bastante agregador para todos que participaram. A experiência de criar o nosso primeiro site direto no código abriu nossa cabeça para outras áreas que não imaginávamos que podíamos trabalhar, principalmente por 2 membros do grupo cursarem comunicação visual. Aprender a usar o bootstrap foi bem legal, o framework facilita e agiliza muito o processo de desenvolvimento web.
Equipe: Antonio Lapa Eduardo Massรก Lucas Luz
Professor: Werther