I was tasked with design mockups and graphics for the look and feel of Vivitek's 2012 website relaunch. Featuring stunning visuals on the homepage with its sleek-black GUI, the first impression is eye-catching.
![](https://cdn.myportfolio.com/35790937-45d0-43c3-ab14-333188796686/cb681504-2c53-44b6-9fd2-2eca16af4560_rw_1920.png?h=f44f1020de89ceceb37a46c80e43b01f)
The lower section with the two banners was designed to slide down with a click of the arrow to reveal social networking "widgets" for YouTube, Twitter, and Facebook, a news ticker, and additional social button links. For YouTube, Twitter, and Facebook, the labels at the top of each widget are clickable, and will take the user the corresponding social site. The YouTube widget displays the latest videos from Vivitek's YouTube channel, the Twitter widget shows recent tweets, and the Facebook widget shows the latest user "likes" of Vivitek products.
![](https://cdn.myportfolio.com/35790937-45d0-43c3-ab14-333188796686/9d988904-8bc4-4e3d-a503-aefbce038ce8_rw_1920.jpg?h=11b8fdf0bb434faaf81ddb50b04b5647)
I was also tasked with creating the look and feel for all inside pages and tools, such as product detail pages and a projector distance calculator. Below is the preliminary design of a product detail page with the projector calculator interface, although the final functionality of the calculator was scaled back in favor of a simpler treatment.
![](https://cdn.myportfolio.com/35790937-45d0-43c3-ab14-333188796686/e9ea7628-f407-4987-9224-55d1340145c5_rw_1920.jpg?h=d5ee30a588990d3b41f5b161ac320a02)
![](https://cdn.myportfolio.com/35790937-45d0-43c3-ab14-333188796686/fe0bc142-255c-4cd6-a389-778a63409491_rw_1200.jpg?h=18c3b59130021f619c474f6da0e28165)
There was also a need for informational vertical pages such as the Technology Learning Center.
![](https://cdn.myportfolio.com/35790937-45d0-43c3-ab14-333188796686/97167053-ca21-4daf-9d87-e74363fe71bf_rw_1200.jpg?h=354a4202b20e542faf654a81655c111e)