-
Notifications
You must be signed in to change notification settings - Fork 0
/
logo-design.html
66 lines (66 loc) · 5.67 KB
/
logo-design.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com -->
<!-- Last Published: Sat Nov 26 2022 08:16:52 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="635b18a15c09ce818cd7845c" data-wf-site="63375e06b7a5ae566ddc5555">
<head>
<meta charset="utf-8">
<title>Logo Design</title>
<meta content="Logo Design" property="og:title">
<meta content="Logo Design" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/ux-ui-portfolio-999cb1.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Philosopher:regular,italic,700,700italic","Karla:200,300,regular,500,600,700,800,200italic,300italic,italic,500italic,600italic,700italic,800italic","ZCOOL XiaoWei:regular","Londrina Shadow:regular"] }});</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
<div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navbar w-nav">
<div class="w-container">
<a href="index.html" class="link-block w-inline-block"><img src="images/website_logo.png" loading="lazy" width="50" alt="" class="image-brand"></a>
<nav role="navigation" class="w-nav-menu">
<a href="index.html" class="nav-link w-nav-link">My Works</a>
<a href="documents/Resume.pdf" target="_blank" class="nav-link w-nav-link">Resume</a>
</nav>
<div class="w-nav-button">
<div class="w-icon-nav-menu"></div>
</div>
</div>
</div>
<div class="wf-section">
<div class="w-container"><img src="images/logo_websitebanner.png" loading="lazy" srcset="images/logo_websitebanner-p-500.png 500w, images/logo_websitebanner-p-800.png 800w, images/logo_websitebanner.png 1000w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px" alt="" class="page-banner"></div>
</div>
<div class="wf-section"></div>
<div class="w-container">
<h3 class="text-heading">Personal Logo</h3>
<p class="text-paragraph">Hello there! My name is Jennifer Nguyen. Fun fact: I graduated with a B.S. in Human Biology but now switched into UX/UI design! I love to create art especially with handlettering or painting but something I am not familiar with is designing logos. I thought it would be a fun idea to try to create my own personal logo so I could see what the process is like so that I’m prepared to make logos in the future, for instance, for mock-up apps and websites.</p>
</div>
<div class="w-container">
<h3 class="text-heading">Moodboard</h3>
<p class="text-paragraph">When I was branding “jennwithpens,” I decided to go with a pink color not only because I personally like the color pink but also because I feel that pink is a pretty, feminine color.<br><br>This time around, for my personal branding, I also wanted to go with a pink color, however I wanted a color that was more mature/elegant. So, as I was trying to find inspiration pictures for my mood board, I looked for more muted/natural colors.</p>
</div>
<div class="container-13 w-container"><img src="images/logo_moodboard.png" loading="lazy" srcset="images/logo_moodboard-p-500.png 500w, images/logo_moodboard.png 501w" sizes="(max-width: 501px) 100vw, 501px" alt="" class="image-phone"></div>
<div class="w-container">
<h3 class="text-heading">Logo Ideation</h3>
<p class="text-paragraph">I wanted a logo that was <strong>personal</strong>, <strong>modern</strong>, and <strong>feminine</strong>.</p>
</div>
<div class="container-17 w-container"><img src="images/logo_sketches.png" loading="lazy" alt="" class="image-phone"></div>
<div class="w-container">
<h3 class="text-heading">Final Logo Design</h3>
<p class="text-paragraph">The sketches that captivated me the most were the ones that were similar to a monogram. I used Adobe Illustrator to play around with different typographies, trying to connect j’s and n’s fluidly together. And this is the final result!</p>
</div>
<div class="container-14 w-container"><img src="images/logo_icon.png" loading="lazy" height="200" alt="" class="image-3x3"></div>
<div class="w-container">
<h3 class="text-heading">Future Plans</h3>
<p class="text-paragraph">When I have more time, I plan to create an expansive color palette for my brand so that my logo can be flexibly used on many different backgrounds.</p>
</div>
<div class="container-7 w-container"></div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=63375e06b7a5ae566ddc5555" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>