Mission Brewery Mobile Website Mock Up

Page 1

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


MISSION BREWERY Mobile Experience Design 126 Drink Project Mario Telles Fall 2014 San Diego City College

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


T able OF Contents Objectives :

To show a mobile website that would scale.

Landing Page :

Landing page on mobile phone and on tablet.

Beer Page :

Bottle layout design and real life use view.

About Page :

About the brewery layout design and real life use view.

All Screens :

A full preview of all screens together.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


Objective To show a mobile scalable design: Starting off with Mission Brewery was a daunting task. The website lacked cohesivness in its images and a very unorganized structure. Along with the mess they did not have a scalable mobile side. So my task I took on was to bring the companys colors, images, and overall direction together and display it in a mobile website. However since this project was started the company must have read my mind, because they re-did the whole website. So instead of showing images of a before website, i’m showing logo’s that they still use that demonstraight how they are going in several directions.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


The Mobile Design

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


Home Page Two moble device views: Landing on the home page has gives you a video about the company, and information about how the beer is created. On the home page you get a facebook and twitter link. There is also a menu and location icon that remain on all screens.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


Menu Slide out menu: I created a slide out menu for navagation through the website. The menu slides out from the left by tapping the menu bars at the top.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


Beers Slidding over to highlight: The company has very nice bottles and the color pallet is somthing I wanted to show off in the beers page. By sliding over the beers they highlight and info about the beers changes above.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


The Story The companys story: This section talks about the companys history were they came from and why we have two Mission Brewery buildingsin San Diego.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


The Story The companys story: And about the new owner of the company, How he got his start.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES

EM: MARIO.A.TELLES@GMAIL.COM


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.