-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathart.html
155 lines (141 loc) · 9.08 KB
/
art.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;400;600;800&display=swap" rel="stylesheet">
<link rel="icon" type="image/jpg" href="Images/Favicon.png"/>
<script src="https://kit.fontawesome.com/f1c27a6a68.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>
<title> Art | Fizza Ahmed </title>
<meta name="description" content="Portfolio website for Fizza Ahmed">
<meta name="keywords" content="portfolio, artist, toronto, web designer, student">
<meta name="author" content="Fizza Ahmed">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header" style="padding: 0.5em 7vw 0.7em 7vw">
<a href="#main" class="skip"> Skip to Main Content </a>
<span class="name"> <a href="index.html"> fizza ahmed </a></span>
<a href="index.html" class="logo-img"> <img src="Images/logosized.png" alt="Fizza Ahmed Logo - Home" style="max-height:2.5em"> </a>
<nav id="navigation" class="site-navigation" role="navigation">
<ul style="margin: 0px;">
<li class="headLinks">
<div class="dropdown">
<button class="header-category dropdown-button" > Works </button>
<ul class="dropdown-content">
<li><a href="https://fizzara.github.io/art"> Art & Design </a></li>
<li><a href="https://fizzara.github.io/code"> Code </a></li>
<li><a href="https://fizzara.github.io/figma"> Figma Design </a></li>
<li><a href="https://fizzara.github.io/game"> Game Design </a></li>
<li><a href="https://fizzara.github.io/thesis"> Master's Thesis </a><li>
<li><a href="https://fizzara.github.io/photography"> Photography </a></li>
<li><a href="https://fizzara.github.io/video"> Video </a></li>
</ul>
</div>
<span style="border-right: 1px solid white; padding-right: 0.5em;"></span>
<button class="header-category dropdown-button" style="padding-left: 0.5em;" onclick="location.href = 'https://fizzara.github.io/resume';"> Resumé </button>
</li>
</ul>
</nav>
</header>
<main id="main" class="works-content">
<h1 style="text-decoration: none;"> Art & Design </h1>
<h2> Illustration </h2>
<h3 style="padding-left: 1vw"> Humanities Welcome Week Sticker Design </h3>
<p style="padding-left: 1vw"> For Welcome Week 2022 I was asked to design the stickers that would be given to the incoming first years, as a way to welcome them to the McMaster community! </p>
<p style="padding-left: 1vw"> <a href="Additional Files/Ahmed_Sticker Process Work.pdf" download>View and download a PDF of my sticker process work.</a></p>
<div class="stickers">
<div class="sticker-content s1">
<img src="Images/van_SOH_Stickers.png" alt="Blue and peach 60s hippie van with text Welcome Week 2021 on side, with a peach flag that says Summer of Hum" style="max-width: 100%">
<p> A fun, decorative choice. Reminiscent of
the mystery machine from scooby doo, but
in bright, summer colours. </p>
</div>
<div class="sticker-content s2">
<img src="Images/sign_SOH_Stickers.png" alt="Green 60s motel sign that says Welcome Week 2021, with a marquee sign that reads Navy Nation Summer of Hum" style="max-width: 100%">
<p> A more subdued choice, similar to old
motel signs. Darker colours to fit with
other aesthetics, but still bright in its own
way. </p>
</div>
<div class="sticker-content s3">
<img src="Images/badge_SOH_Stickers.png" alt="Circular cream badge with red, orange, yellow, blue, and green stripes flowing down and to the viewer, with brown text that reads Welcome Week 2021" style="max-width: 100%">
<p> A more traditional, circular sticker, like
an enamel pin. A retro art look that will
match with many other colours, or that
would look good by itself.</p>
</div>
</div>
<hr>
<div class="char-design">
<div class="char-container">
<div class="char-slide">
<img class="char-img" src="Images/walk.gif" style="width: 100%" alt="Walk Animation">
</div>
<div class="char-slide">
<img class="char-img" src="Images/jump.gif" style="width: 100%" alt="Jump and Fall Animation">
</div>
<div class="char-slide">
<img class="char-img" src="Images/idle.gif" style="width: 100%" alt="Idle Animation">
</div>
<button class="char-prev" onclick="addSlides(-1)">❮</button>
<button class="char-next" onclick="addSlides(1)">❯</button>
<div class="caption-container">
<p style="font-size: 1.3em" id="caption"></p>
</div>
<script>
var charSlideIndex = 1;
displaySlides(charSlideIndex);
</script>
</div>
<div class="char-text">
<h3 style="font-size: 2em"> <b>Thesis Project Character Design</b> </h3>
<p> The art and animation of the character for my thesis project, a game on the topic of mental health, meant to educate players on various mental health disorders. These animations include the walk cycle, the idle animation cycle, and animations for jumping and falling. They are all used for traversal in the game, and the skirt and hair flow as the character moves and as the in world wind blows by. </p>
</div>
</div>
<hr>
<h2 id="graphicdesign"> Graphic Design </h2>
<div class="graphicDesign">
<div class="graphicImg">
<embed src="Additional Files/Graphic Designer - Fizza_Ahmed - Template.pdf" width="500px" height="300px"> <br>
<iframe src="https://onedrive.live.com/embed?resid=7D87727E6DCC64EC%2112896&authkey=!ALg5vXvs3wbZWTE&em=2&wdAr=1.7777777777777777" width="500px" height="300px" frameborder="0">This is an embedded <a target="_blank" href="https://office.com">Microsoft Office</a> presentation, powered by <a target="_blank" href="https://office.com/webapps">Office</a>.</iframe>
</div>
<div class="graphicTxt">
<h3 style="margin-bottom: 0"> First Work Ontario</h3>
<p class="subheader"> Redesigned Curriculum Template and Slides </p>
<p> Work Objective: Design a creative, engaging, and professional lesson plan guide and slide deck presentation based on First Work’s existing curriculum that engages and educates youth aged 15-18, ensuring the sample project is completed within an 8-hour timeframe. </p>
<p> This project was completed following First Work's branding guidelines, including their logo, color scheme, and typography requirements. To begin, I listed all of First Work's specifics for the project. This included the target audience, the deliverable details, their general brand voice, and the visual elements they emphasized. Once I had a comprehensive understanding of their brand and requirements, I conducted research on what youth aged 15-18 like to create a trendy curriculum template and slides design. I identified key trends such as the use of vibrant colors, dynamic animations, and interactive elements. The deliverables for this project were required to be fully printable, and so I was unable to add active animations and elements, and so I pivoted into using shapes and forms that bring through this idea, giving the work a flowing energy while still keeping related items grouped. </p>
</div>
</div>
<hr>
<div id="infographic" class="infographic">
<div class="info-image">
<img src="Images/Infographic.png" alt="infographic" style="max-width: 100%">
</div>
<div class="info-text">
<h3 style="font-size: 2em"> <b>Harry Potter "Going Places" Infographic</b> </h3>
<p> An infographic that details the various methods of transportation in the Harry Potter series. The images were created individually in Adobe Illustrator, and imported into Adobe InDesign. There, the text and graphics were arranged to fill the page. The text font and background colour were chosen from the theme. The serif font "Garamond" was used as as an "old" font, as the Harry Potter world is more olden, with a lack of technology. The background colour was chosen to mimic the colour of parchment, which is the most used paper in the series. </p>
</div>
</div>
</main>
<footer class="footer">
<div class="footer_name" style="display: flex; gap: 10px; font-size: 2em; align-self: center; align-items: center; font-size: 2em"> <img src="Images/logosized.png" style="max-width: 50px" alt="Fizza Ahmed Logo"> fizza ahmed </div>
<div class="footer_jump">
<p style="margin: 0px;"> Jump To </p>
<ul>
<li><a href="resume.html">My Resume</a></li>
<li><a href="" onclick="footerJump()">A Random Project</a></li>
<li><a href="thesis.html">My Master's Thesis</a></li>
</ul>
</div>
<div class="footer_reach">
<p style="margin: 0px;"> Reach out by </p>
<ul>
<li id="foot_email"><a href="mailto:fizzaahmed2000@hotmail.com"> ✉ Email</a></li>
<li><a href="linkedin.com/in/fizzara"><i class="fa-brands fa-linkedin"></i> LinkedIn</a></li>
<li><a href="https://fizzara.github.io/contact"><i class="fa-regular fa-note-sticky"></i> Contact Form</a></li>
</ul>
</div>
</footer>
</body>
</html>