<!DOCTYPE html>
<html lang="en">
<head>
<title>David Lagou - Web Developer</title>
<meta charset="UTF-8" />
<meta name="robots" content="all">
<meta name="author" content="David Lagou">
<meta name="description"
content="This project was created in order to explore the 3D effects tool in Adobe Illustrator. Tools such as revolve, bevel & extrude were all used.">
<meta name="keywords" content="David Lagou web developer, UI/UX designer vancouver, BCIT, new media, portfolio">
<meta property="og:title" content="David Lagou | Front end developer" />
<meta property="og:url"
content="This project was created in order to explore the 3D effects tool in Adobe Illustrator. Tools such as revolve, bevel & extrude were all used." />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/favicon.svg" />
<link rel="stylesheet" href="css/style.css" />
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&family=Rubik:wght@400;600;900&display=swap"
rel="stylesheet">
<!-- Animation css -->
<link rel="stylesheet" href="css/aos.css">
</head>
<body>
<section>
<nav>
<div class="logo">
<a href="index.html">
<a href="index.html">
<img src="img/davidlagouLogo.svg" alt="Logo Image">
</a>
</a>
</div>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="navLinks">
<li><a href="index.html">Home</a></li>
<li><a href="webdev.html">Web Development</a></li>
<li><a href="uiux.html">UI/UX</a></li>
<li><a href="graphicdesign.html">Graphic Design</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</nav>
</section>
<header>
<div class="projectImgHeader kinetic">
<div class="headertxt">
</div>
</div>
<div class="projectPageHeader">
<h1>Kinetic Juice Poster</h1>
<p> Graphic Design | 2019</p>
<a class="buttonCTA" target="_blank" href="./pdf/combined_3D_drink_poster.pdf"> LINK TO PDF </a>
</div>
</header>
<div class="homeFeatureTxt">
<h2> PROJECT OVERVIEW</h2>
</div>
<section class="projectPageDetails">
<div class="projectCat">
<h3> What</h3>
<p> Kinetic energy is an energy drink designed to help athletes maintain high levels of carbohydrates and
glucose when performing.
</p>
</div>
<div class="projectCat">
<h3> Why</h3>
<p> This project was created in order to explore the 3D effects tool in Adobe Illustrator. Tools such as
revolve, Bevel & extrude were all used in order to simulate a bottle. In addition, we needed to create a
company logo and mini poster design to add to the packaging.
</p>
</div>
<div class="projectCat">
<h3> Who</h3>
<p> The project was designed and coded by myself.</p>
</div>
<div class="projectCat">
<h3> Tool</h3>
<p>Adobe Photoshop, Indesign and Illustrator
</p>
</div>
<div class="projectCat">
<h3> When</h3>
<p> March 2020</p>
</div>
</section>
<div class="homeFeatureTxt">
<h2> PROCESS </h2>
</div>
<section class="projectFeature" data-aos="zoom-in">
<div class="projectInfo">
<h3> PHASE ONE</h3>
<h2> Planning</h2>
<p class="projectInfoP"> This journey started with me researching all of the different energy drink brands
out there. I wanted to get a sense on how they marketed their bottles and what kind of information they
added on the bottles. This gave me a strong frame of reference when it came time to deciding how I was
going to label my bottle.
</p>
</div>
<div class="projectImg process">
<img src="./img/kinetic_research.jpg" alt="Kinetic drink research">
</div>
</section>
<section class="projectFeature two" data-aos="zoom-in">
<div class="projectInfo">
<h3> PHASE TWO</h3>
<h2> Bottle Design
</h2>
<p class="projectInfoP">When coming up with the design of the bottle , my main focus was creating an
aesthetic that would attract athletes. In order to better understand what the ideal user wanted, I
conducted several surveys to get inside the athletes head. After sorting through the results I decided
to go with a design as shown below. Athletes wanted power and energy and this is shown on the bottle
with the use of the lightning bolts and the intense use of the color red.
</p>
</div>
</section>
<div class="solarMockup" data-aos="zoom-in">
<div class="projectImg solar">
<img src="img/kinetic_bottle_draft_1.jpg" alt="Kinetic drink bottle rough draft ">
</div>
<div class="projectImg solar">
<img src="img/kinetic_bottle_draft_2.jpg" alt="Kinetic drink bottle rough draft two ">
</div>
</div>
<section class="projectFeature two" data-aos="zoom-in">
<div class="projectInfo">
<h3> PHASE THREE</h3>
<h2> Application
</h2>
<p class="projectInfoP">In order to better sell the bottle, it needed to be in an environment that helps
users understand our goal. I decided to surround the bottle in a basketball court and place it on the
hardwood floor.
</p>
</div>
<div class="projectImg process">
<img src="./img/Kinetic_Thumbnail.jpg" alt="Final Kinetic drink thumbnail">
</div>
</section>
<section class="projectFeature two" data-aos="zoom-in">
<div class="projectInfo">
<h3> PHASE FIVE</h3>
<h2> REFLECTION</h2>
<p class="projectInfoP"> One of the biggest takeaways from this project was learning how to use outlines and
shapes to create a 3D rendition of an object. This skill is beneficial for me moving forward because it
allows me to create prototypes to clients to better visualize a product.
</p>
</div>
</section>
<div class="footerCTA">
<a class="buttonCTA" target="_blank" href="./pdf/combined_3D_drink_poster.pdf"> LINK TO PDF </a>
</div>
<button onclick="topFunction()" id="top"> Top</button>
<footer>
<section class="container">
<section class="footerInfo">
<h2> Interested in working together ?</h2>
<div class="contactInfo">
<div class="contactItem">
<a target="_blank" href="mailto:dlagou18@gmail.com">
<img src="img/email_icon.svg" alt="email icon">
</a>
</div>
<div class="contactItem">
<a href="https://www.linkedin.com/in/david-lagou-988b66175/" target="_blank">
<img src="img/linkedin_icon.svg" alt="linkedin icon"> </a>
</div>
<div class="contactItem">
<a target="_blank" href="https://github.com/DavidLagou">
<img src="img/github_icon.svg" alt="github icon"></a>
</div>
<div class="contactItem">
<a target="_blank" href="https://www.instagram.com/dizzydezign/">
<img src="img/instagram-icon.svg" alt="Instagram Icon"></a>
</div>
</div>
<h3> © David Lagou Portfolio 2020</h3>
</section>
</section>
</footer>
<script type='text/javascript' src="js/navbar.js"></script>
<script src="js/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-out-sine',
once: true,
});
</script>
</body>
</html>