Coding Challenges and Process

So far, this year in web design the biggest challenge I have faced would be on the very first assignment when I didn't even know what HTML meant. I had absolutely no idea what to do, despite having intricate explanations and a step by step tutorial to follow. After the first one or two projects though, I began to develop a basic understanding of how to code, with a lot of help of course. Now, I can do nearly all of each project completely on my own. I would definitely say that I overcame those challenges. Coding becomes much easier when you know what a "tag" is. 

I was most surprised by the fact that I wasn't very behind in relation to rest of the class. Naturally, there were several people who had a very advanced understanding in HTML and CSS but most of class had little to no experience which made me feel more welcome and comfortable. So far, my favorite thing about coding is simply being able to type seemingly nonsensical things into the computer but then ending up creating something that I never thought I could do. I have learned so much even just in this first quarter but nothing compares to the proud feeling I get when I can figure out what I did wrong and fix it all on my own. I can't choose a specific thing to further explore, as I would like to enhance my knowledge in everything we have covered so far. Although I found a lot of interest in using the hexadecimal code of a color to change the text color of my writing.  

Photoshop Challenge (Nature Man)

Original Ideas to the finished product

From the very beginning I knew I wanted to use trees for the man's hair. I have seen some really cool photo manipulations with trees for hair, that looks so natural since they have the same general shaping. I also knew from the beginning that I wanted to change his jacket in some way, making it some kind of root or dirt. For the most part, my idea stayed the same. The end product wasn't exactly what I pictured but I was still happy with it.

Blending Modes, Masks, and Adjustment Layers

For Blending Mode, I increased the saturation to give the picture a more vivid look. The more saturated look makes the picture overall look better and more realistic. I used a Mask on the hair, jacket, and undershirt. I placed the photo on top of what I was wanted to mask and then I turned the opacity down a lot so I could easily see the under image. Next I used the Selection Tool to select the part of the top image I wanted. For example, on the tree image, I selected the part where his hair was directly under and then made a Mask out of it. For Adjustment Layers, I increased the brightness level slightly to give it a more pleasant and happy look. 

The turn out 

My project ended up being slightly different then my original idea. I'm not entirely sure what I was going for initially but I do know that It was different. That being said, the difference doesn't mean that I was less then satisfied with my end result, in fact, I was quite pleased with how it turned out. I was definitely surprised that it ended up being so similar.

Basic Photo Editing

For our first project in graphic design this year, we did a series of Adobe Photoshop tutorials. We learned several very helpful things and I learned to use some of the tools in ways I never knew I could. Tools such as Content Aware Fill and Clone Stamp were essential in the editing and making of these photos.

Content Aware Fill

Content Aware Fill is used to remove unwanted elements from images. By simply selecting an area of a photo, this tool makes the area blend in better. For example, The picture on the left previously had a rather unattractive graphic on the father's shirt, but using Content Aware Fill, I changed the shirt to be entirely blue. This was a fairly easy tool to to work with and it has great results.

The Patch Tool

The Patch Tool is another easy and important tool we used. This tool is primarily used to fix large areas of an image or get rid of unwanted blemishes. The picture to the right previously had a hook and many black smudges and spots on the wall but using The Patch Tool I easily removed them. This tool is very similar to Content Aware Fill, except it is more precise.

The Clone Stamp

The Clone Stamp is used to remove dirt, pimples, or any imperfections from things such as faces. It takes a sample from another part of the face and uses that to cover up the said thing you are trying to remove. The picture to the left originally had dirt and many spots on his face, but using this tool, I removed them and the results were quite natural. 

Healing Brush Tool and Spot Healing Brush

The Healing Brush Tool allows you to fix image imperfections such as scratches and blemishes. By sampling the surrounding area you can blend the imperfections into the rest of the image.

Spot Healing Brush is an easy, but lifesaving tool.You simply click on the blemishes you want to get rid of (or drag with the tool to paint over the larger areas you wish to repair) and the spot healing brush works out the rest for you.

Portrait Collage

This was by far the hardest as the tasks. I struggled to make the pictures blend together and look good. Making a portrait collage took all of the tools and immense patience and focus. I used Content Aware Fill, Patch Tool, Clone Stamp Tool, Healing Brush Tool, and Spot Healing Brush.

All of these skills I learned during the Photoshop tutorials will be extremely useful and important in any future I may have of graphic design. Going into these projects, I had no idea how to use the different tools in Photoshop. This definitely made certain parts of these projects pretty difficult. The first few were pretty easy and I didn't have any problems. However, after doing the harder projects at the end, I feel I could have redone a few of the earlier ones so they could look more professional.While most of these were all pretty easy to understand and produce, the portrait collage was a major bump in the road. This one was extremely detailed and complicated and I struggled with blending them all together. I also had trouble with the little boy's face because I couldn't get the clone stamp to work properly.

All in all, I am very pleased with my work. Although I had some hardships along the way, It ended up being a great learning experience and I can't wait to put forth these skills in projects outside of class.

Wayback Machine Comparison Excercise

2005 vs 2018 YouTube website 

1.  The most obvious difference between the 2005 and 2018 YouTube websites would be the the overall set up. The new website utilizes the entire screen while the old one only uses the center.
2. The next most obvious difference is the color scheme. The new website is a white background with red accents. The old one however, has multiple colors including; grey, tan, light blue, dark blue, orange, light orange, and the red from the logo.
3. Another difference is that the new website has a sidebar on the left which has a lot of links including; Home, Trending, and History. The older website has these tabs as well, but they are located at the top of the page and don't have nearly as many. 
4. The logo has changed within the last thirteen years from the "Tube" part being enveloped in the red to now there is a red play button in front of the words "YouTube".
5. On the old web page, you would rate videos on a scale of 1-5, but now, if you like the video, you give it a "thumbs up". 
6. The old YouTube was not for the vlogging, DIY, and prank videos that it is for now. It was much less diverse in video content and was more for tutorials on dancing and cooking, which it is still used for today but with added topics and ideas.

Wayback uses in web design

Wayback can be very useful in web design, especially when redoing/ changing an already existing website. Using elements from the previously created website, you can modernize and improve it. You can also learn from the mistakes of an old website and avoid the elements that were unflattering or unimpressive. This helps to create brand new and fresh ideas that help web pages be attractive and take in views. The last important thing that Wayback Machine can do is that can help to stop us from unintentionally copying ideas and looks from old websites. Using the same ideas that have already previously been established takes away from the uniqueness of each individual website.  

Fourth Quarter Group Project

Fourth quarter group project

For this project, all three first hour ecomm classes were sorted into groups based on our personalities. We worked together to design a product that could potentially become a real one. After we had a product idea, we created a logo, animation, and advertisement which we would present to all the classes and ecomm teachers. 

Time and management 

This project took the majority of forth quarter. We had several days in the animation rotation that we had to ourselves as we had finished our animations. After spending only a mere 9 weeks on this, everyone's work turned out fairly well. Our commercial was easily the best portion of our project, our logo was second. We did have the minor challenge of trying to all agree on the product. After many rough drafts, we finally agreed. We learned a lot of teamwork in this project because several of our personalities clashed and it was hard to agree on what to do at first. We didn't get much feedback on anything but our video and we receive a lot of positivity towards it. I think that our project ended up being pretty great. We put a lot of work and time into it and the end result showed that.

Time use

During class time, we completed all the assigned assignments. These included the logo, 2D animation, 3D animation, and the ad. When we thought we were finished, we had the comm teachers give us their opinions on the specific portion. We were always on track and working hard to meet the deadlines we set. Outside of class, I like to practice my skills by doodling new logos for brands or companies. I also make fun little commercials with my siblings just to practice on and off screen jobs. 

 

Strengths 

My strengths in ecomm would most definitely be editing videos and creating logos. I enjoy doodling which gives me inspiration for graphics and logos. I have been making (very bad and cheesy)  music videos since I was very young. I used this experience to my advantage and helped a lot in both the logo and video.

                        

Weaknesses

The most challenging thing for me in ecomm would be animation because I personally do not enjoy it as much as the others. I struggled to grasp the concepts introduced to us but I still found it interesting to lean about. I worked harder on getting better at this and in the end it showed when I helped out with the animation for he project.

Summary 

Overall, I had a very positive experience in ecomm. I really enjoyed the quarter project it was nice to work with people I had never talked to. I learned a lot about about myself and others throughout this project and ecomm in general. It was fun to try new things and get to experience things that I wouldn't get to otherwise. Next year I am continuing in graphic design and video. This year, class, and teachers have taught me so many things that I will never forget.

CSS and CARP design

For this project, we got to transform a plain and boring poem into a decorative and colorful one. This assignment started off with the simple poem. It was a white background with black txt in the default font. Then we gave it a background color and started changing the type. We bolded and italicized, changed the color, font, and size. In the end, everything really came together. 

Contrast

At first, there wasn't a lot of contrast in the poem design. When we changed it though, we added lots of contrast. We made the background color light tan and used a dark tan for the text color. Behind the light tan, there was black which contrasted well.

 

Alignment 

We didn't really need to change the alignment much. All we did was center Heading 1 and Heading 2. The rest of it stayed left aligned. The alignment looked very clean cut and everything went well together.

Repetition

There was a decent amount of repetition in this assignment. The dark tan text color repeated four different times. The font stayed the same pretty much throughout the whole assignment. The repetition made it all look finished and final.

Proximity

The proximity, or grouping, of this assignment was very obvious. Header 1 was bigger then Header 2 and Header 2 was bigger then the body. You can clearly tell what gets grouped with what. The paragraphs are even separated enough to tell what goes together. 

My Personality Type

My Myers-Briggs personality is ESFP. This means that I am a very outgoing person who acts on what I feel is right, rather then thinking. I work well in groups and like to make things happen. I am flexible and can deal well with change. A famous person who shares my personality type is Marilyn Monroe. 

I can confidently say that the description of a ESFP fits me perfectly. When it says that I am "outgoing, friendly an accepting", it's spot on. I go out go my way to make people feel included and I make friends easily. It also says that I focus on facts and details rather than ideas and concepts. This isn't always true. I don't always just go off of what's proven. I search for new ideas and ways to make something better. My personally type helps me to understand how to work better with myself and others.

My personality type is the kind of person who will always be there to make you laugh. This is very important on a team because sometimes it's ok to have fun and ESFPs lighten the mood. I am the jokester in my family, not really focusing on one the in specific, but multiple things. I am the main source of laughter in my family and I can always cheer someone up. Sometimes people don't like me because I am pretty energetic and happy and they don't like that. I work well with nearly everyone except of people more outgoing then I am. when people are more outgoing then me, we can't work very well together because we both talk a lot, and we continually try to talk over each other and don't listen to each other.

Throughout this assignment, I learned more about myself. I always knew that I was happy and outgoing person but I learned that I go with my gut rather then thinking about it. I focus on facts rather then ideas, which I never would have known if I hadn't taken the quiz. I learned a lot about myself.  

My LOBG personality type was an otter. I am a very outgoing and talkative person and that's what the otter was. They are the people who keep the group talking and working together. I definitely believe that this is me because I always break the ice in a group.