Untitled
unknown
plain_text
2 years ago
14 kB
14
Indexable
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Helena's Website</title>
<link rel="stylesheet" href="styles.css">
<!-- Open source fonts taken from https://fonts.google.com/ -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arvo:wght@700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<script src="prompt.js"></script></head>
<body>
<header>
<h1>Helena's Website</h1>
</header>
<div class="box">
<h2>Reflection</h2>
<p>Before starting the first year at the university I did not have any experience with graphic design course (specially creating websites by coding), even if from always I was finding it extremely interesting. The last year when I was in the college, I had a chance to use Adobe programs, especially the ones related to media such as Premiere Pro and After Effects. Rarely I was using as well Adobe programs such as Illustrator or Photoshop. Thanks to that I did not have any issues with creating my typographic project. I was finding that task very relaxing also I had a chance to present my creativity. On creating my typographic project I spent the most of time and same goes with creating a website. Even if from the start of first semester I was finding the graphic design course interesting ,at the same time I knew to understand some steps in that course I will have to spend more time. The great example was creating a website by coding. That is because before first year I never had a chance to do stuff like this, everything seemed for me to be confusing, even the process of connecting the Github program to the VisualStudios was complicated for me.</p>
<p>For the first three weeks I was finding this whole thing overwhelming. Furthermore, when we were required to start planning/creating a layout for our websites I started going through the coding worksheets again, however this time I started finally understanding the process of making them. Also, a really important thing to highlight is that the weekly coding worksheets helped me extremely with creating my own website. Especially when it comes about decorating/precising it. The task which surprised me because at the start I thought that the process of making it is going to be easy, however after time it turned out to be challenging was a process of creating three posters about skateboarding (CARP). The reason why I was thinking that this project is going to be easy was because I already had an experience with using the Adobe Photoshop program and Illustration, because of that fact I was expecting the Indesign program is going to work the same/similar way. However, from the start I was struggling with using it; the great example is when I wanted to remove a background from the image which I wanted to use for my first poster. To solve out the problem I had to watch the Youtube video. Nonetheless even if I was finding the process of creating this work hard at the beginning, I was finding it useful at the same time.</p>
<p>That is because I knew it is going to help me in the future when I am going to be required to work for the professional clients. This task gave me a chance to get ready for the further tasks which I will have to do. So far, I enjoyed the first semester of graphic design course and I am looking forward to start the next project in the second semester. Even if I started the university not a long time ago, I can already see a huge improvement in my computer skills, especially the ones with coding. </p>
</div>
<main class="flex-container">
<section class="flex-item">
<h2>Typographic Project </h2>
<div class="fancySubTitle"><h3>Axial</h3></div>
<p> Every element is arranged along a single axis, either on its left or right. The information is presented separately to attract the viewer's attention and boost its appeal.</p>
<img src="1.png" class="center">
<div class="fancySubTitle"><h3>Radial</h3></div>
<p> Every element in the radial system is arranged to radiate like rays from a central point of emphasis.</p>
<img src="2.png" class="center">
<div class="fancySubTitle"><h3>Dilatational</h3></div>
<p>Every element in a dilational typographic system grows in a circular pattern from a central point. Random system components don't seem to follow any particular pattern.
</p>
<img src="3.png" class="center">
<div class="fancySubTitle"><h3>Random</h3></div>
<p>The elements are arranged freely by the random system, they have no clear goal,
direction or pattern.</p>
<img src="4.png" class="center">
<div class="fancySubTitle"><h3>Grid</h3></div>
<p>The grids are effective on books,posters, websites and many more. a grid is a set of invisible lines, either vertical or horizontal; that divide a page into pieces. There are rarely any problems with readbility of grid text.
</p>
<img src="5.png" class="center">
<div class="fancySubTitle"><h3>Modular</h3></div>
<p>An alphabet made up of a restricted set of forms, or modules ,is called a modular typerface.
</p>
<img src="6.png" class="center">
<div class="fancySubTitle"><h3>Transitional</h3></div>
<p>Lacks edge alignments and axis relationships, allowing the pieces to move freely.It works well for creating posters and book covers.
</p>
<img src="7.png" class="center">
<div class="fancySubTitle"><h3>Bilateral</h3></div>
<p> A collection of standardised units that are non-objective. every word is positioned symmetrically along one axis.
</p>
<img src="8.png" class="center">
</section>
<section class="flex-item">
<h2>CARP</h2>
<p>I have created three different posters about the Skateboarding by using the Adobe Indesign. In each one of my work my intention was to present in the clear and presentable way the theme of posters and what story they are telling for the target audience.</p>
<div class="fancySubTitle"><h3>Poster 1</h3></div>
<img src="3a.png" class="center">
<p>The first poster which I have created is my the least favourite one, that is because it looks simple. Before starting the university I have never had a chance to use the Adobe Indesign program. Because of that we can notice a lot of empty spaces around the character. Also after creating the rest two posters I have realised that some information written on the first poster are hard to read neither because of the size or colour. Thanks to creating the first poster I had a chance to gain a knowledge about using the Indesign program and to experiment with some options (little dots around the character) which I have used for the rest of my posters. Furthermore the most noticeable thing which person can notice is that instead of using a basic picture of a girl skateboarding ,I have decided to by using a pen only present her movements. Thanks to this idea the poster might look more standing out, and the main picture( of skateboarding girl) is matching more nicely with the rest of the poster when it comes about the colour scheme .</p>
<div class="fancySubTitle"><h3> Poster 2</h3></div>
<img src="2a.png" class="center">
<p>For creating the second poster I have decided to go for something compeletely different comparing to my first work. This time I have decided to use the actual picture of a girl skating (we can see her face), the only thing which I changed in it was cutting off the background. Also I wanted to experiment with changing the shapes of text to make it even more eye-catching for the target audience. The most challenging thing which I had a chance to experience while making it was cutting off the background from a picture with a girl. That is because the function of dong it works completely different comparing to the Adobe Illustrator.</p>
<div class="fancySubTitle"><h3>Poster 3</h3></div>
<img src="1a.png" class="center">
<p> The third poster which I have created looks similar to the first work which I have made. That is because I liked the first design of my however, after a time of using the Adobe Indesign I improved my skills of using this program. Thanks that I have decided to use some details which I was using in my first work ,to develop them even more. The great example is where in the first poster instead of using the actual picture of a girl skateboarding by using a pen I only presented her movements, meanwhile in the third poster I have decided to create exactly the same effect by using more pictures. Thanks to that the target audience will notice even more clearly the theme of my poster without even reading any information.</p>
<div class="fancySubTitle"><h3> Upgrading The Chosen Poster</h3></div>
<img src="ff2.png" class="center">
<p>From my three created posters I had to choose a one of them which might be the most interesting and the best for the target audience. However, after choosing the best poster I will have to develop and precise it even more.Instead of choosing it on my own , I have decided that the best thing is going to ask someone for their opinion (GIGI). In his opinion the best poster which I have made is the second one. That is because you can see very clearly the theme of the poster (what the girl is actually doing on it) because on the rest of the posters even if you can see the movements of the girl , you can only guess what she is doing there. Also all the colours which I have used for this specific poster work well with each other. However, the thing which I had to improve was a text, that is because some if them were not easy/clear to read. Especially the title in the black colour which was blending with the dark purple background. To make the poster even more readable I have changed the size and a colour for a white when of text which was presenting the dates of skateboarding event. I like even more the updated version of my poster, after changing some details in my work there should not be any issues for target audience while reading it.</p>
</section>
<section class="flex-item">
<h2>Coding Project</h2>
<p>The whole coding project work was made by following the weekly coding worksheets. </p>
<div class="fancySubTitle"><h3> Week 1-2</h3></div>
<a target="_blank" href="https://helenamarecka.github.io/Coding-Worksheet-Week-2/">GitHub - Coding Worksheet Week 2</a>
<img src="pizza.jpg" class="center">
<p>For the first two weeks I’ve had a chance to learn the basic stuff when it comes about creating website by coding. On the first week of following the coding worksheet we were required to connect the Github program to our non existing back then website. Now when I am looking at the first worksheet I am finding it extremely simple and easy. However, back them I was struggling with it a lot. That is because before starting this course I never had a chance to code and use the Github program. On the second worksheet we had a chance to learn how to add text and images. Still back then I was struggling with that step. Furthermore now I don’t have any problems with making it. I was finding that worksheet extremely helpful.</p>
<div class="fancySubTitle"><h3>Cake Week 3</h3></div>
<a target="blank" href="https://helenamarecka.github.io/coding-worksheet-week-3/">GitHub - Coding Worksheet Week 3</a>
<img src="pizza_more.png" class="center">
<img src="more.png" class="center">
<img src="cake.png" class="center">
<p>For the week 3 we were required to precise our page, by changing the colour of background and making the size of paragraphs bigger. The first part of this worksheet I was finding easy however, at the end our task was to create the another new page (this time about cakes) and connect it with a pizza website (which I created before). This step I was finding extremely confusing and I spent a lot of time on completing this step. However, at the same time after figuring out how to make this step I had a chance to improve my coding skills when it comes about creating and improving your website for future tasks.</p>
<div class="fancySubTitle">
<h3> Flexbox-Rundown Week 4-5 </h3>
</div>
<a target="_blank" href="https://helenamarecka.github.io/flexbox-rundown/">GitHub - Flexbox Rundown</a>
<img src="flexbox.png" class="center">
<img src="flexbox1.png" class="center">
<p>The week 4 and 5 I was finding the most challenging, that is because we were required to create buttons which would sync to our pages also we had to publish videos from Youtube but at the same time I was finding it extremely helpful. That is because before starting a coding worksheet 4 I completely did not know how to create this type of functions. I am really happy that I had a chance to learn this type of stuff because definitely this skill is going to help me with my future projects.I’ve had a chance to use a lot of elements/details from these two worksheets to create and precise some details for my website. Definitely I can see a huge improvement in my coding skills from week 1 and the current ones. At the start of week one I completely did not know how to use the the GitHub program and to make a website by coding, meanwhile now I feel confident from making this type of stuff.</p>
</section>
</main>
<footer>
<p class="smallText"> Helena Marecka | Student ID ###### © 2023</p>
</footer>
</body>
</html>Editor is loading...
Leave a Comment