mission brewery mobile website mock up
DESCRIPTION
ÂTRANSCRIPT
![Page 1: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/1.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]
![Page 2: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/2.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]
Mobile Experience Design 126Drink ProjectMario Telles
Fall 2014San Diego City College
MISSION BREWERY
![Page 3: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/3.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]
Table OF ContentsObjectives :
Landing Page :
Beer Page :
About Page :
All Screens :
To show a mobile website that would scale.
Landing page on mobile phone and on tablet.
Bottle layout design and real life use view.
About the brewery layout design and real life use view.
A full preview of all screens together.
![Page 4: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/4.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]
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 web-site, i’m showing logo’s that they still use that demon-straight how they are going in several directions.
![Page 5: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/5.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]
![Page 7: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/7.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]
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.
![Page 8: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/8.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]
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.
![Page 9: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/9.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]
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.
![Page 10: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/10.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]
![Page 11: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/11.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]
![Page 12: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/12.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]
![Page 13: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/13.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]
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.
![Page 14: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/14.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]
The Story
The companys story:
And about the new owner of the company, How he got his start.
![Page 15: Mission Brewery Mobile Website Mock Up](https://reader031.vdocument.in/reader031/viewer/2022020210/568ca6711a28ab186d9151c2/html5/thumbnails/15.jpg)
SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: [email protected]