Graphic Design 1 & 2

 This is not new information since we have discussed this a bit in class, but it is always a good reminder to know. I first learned about typography when I was designing designs for a yoga studio in Chicago. One thing I didn't really think about when learning or doing this in my designs was choosing coordinating typefaces. Something that the article talked about I found interesting was mixing serifs with sans serifs is an easier option than combining two serifs or two sans serifs. It's all about finding a typeface that fits the mood of what you are going for. The article did mention that designers should use contrast as well when choosing a type font. Towards the end of the article I liked the four guidelines it gave designers to follow while choosing Web Types. I found that to be helpful for my next project.  

 While reading this pdf it gave me a lot of information even though it was simple and straight to the point. It does a good job getting its point across and by adding images to connect what they are saying to you. I thought the page about Faux Choice was interesting to me because this relates to our Assignment 2. I have never heard of this term before and now it makes sense while doing this in one of our projects. I like to do something that involves teaching me as well because I am a very visual learner. With this article it is connecting the dots for me because of learning what these mean/are in past assignments were very helpful. Hicks Law makes to most sense to me. It is saying that the more choices you have the more time it will take to process a decision. If there are lots and lots of choices then the brain will get overwhelmed and you will most likely stop whatever it is you are doing. 

The feedback I got from my classmates was very helpful to me. The first thing I am going to fix is the yellow circle that moves across the screen so that it moves back and forth instead of one time across. Another thing I want to add is when you click on a button I want some of the circles to change colors and to do that I will copy what I have already for the circles but then change some colors. So when you click the button it will appear. My classmates also suggested that I put my own text/writing in instead of an image of a book. With that image I also have to change the size to fit the whole canvas so there are no edges. I enjoyed this project and learning what I can do with another way of using code. 

https://www.nurturedigital.com/ Nurture Digital is a platform for an agency, and they focus on digital branding and marketing for companies. The motion graphic animation is the very first thing that you see when you click on the website. The motion graphic is made as a complex looped animation. It represents the process of a single company's workflow to give you an idea of what the companies process is like.   As soon as you click the link you will see the motion graphic which was incredibly done design wise. It has many animations of people, objects, and many more. Off to the side it has some familiar company logos which you are able to click on. If you click on any logo, it builds the page in front of you. What I mean in front of you meaning it taking all the information and putting it together like a puzzle. As you scroll to gain more information it moves around the page like water flowing down a river.              This whole interactive website is very visually appealing. The

  https://editor.p5js.org/rhochst/full/B9dTEUckJg

  http://species-in-pieces.com/      Brain James created this interactive website using shapes to form images of certain species. Not just random species but endangered ones. These animal images are forming together by 30 pieces of shards/shapes which transition to each animal. There are also video content, typed information, and statistics about each endangered animal. As I was playing around with this website I found myself clicking through each image just memorized by the flow of the shards creating each image. I love how there are different buttons or icons you can push and it pulls up more information about that endangered animal. I found one thing really cool and that was the opportunity to be able to download desktop wallpapers and you can print out posters of each animal. I think this is a great way to show how important it is to help these endangered animals by showing you in a different/more interesting way. 

  https://editor.p5js.org/rhochst/sketches/B9dTEUckJg

I want to add more animated elements to this. I have a couple ideas but I would like some input on what I could do. One of my ideas is animating the circles maybe by making them move or having them go from smaller to bigger. I added an image of a page out of my favorite book because my name is the main character which I think is really cool.  let img; function preload(){ img = loadImage("assets/book.jpg"); } function setup() {   createCanvas(1280, 720);   noStroke()   stroke(12) } function draw() {     image(img,0,0);   background(0,50);   for(let y= 0; y <= height; y += 40)     {       for(let x=0; x<=width; x += 40)        {         fill(0,99,218);         stroke(255);         ellipse(x,y,10,10);         } }    /*     stroke(255,0,0);   line(mouseX,0,mouseX,height);//gray line     stroke(0,255,0);   let mx=mouseX/2+60;   line(mx,0,mx,height);//black line   */ }