Week 13 Outside Class

Very basic start to my webpage layout using HTML and CSS. So far I just have the header bar and content box in place, which will hold the header and general information about my artist; Kyle Cooper.

I had made a background in Illustrator but for some reason it will not show up in my coding. Will continue to work on the issue.
~Image of background I'm going to use:

And an image of a template/design I made using just Illustrator. This is just a design for me to go off of while coding.

Week 13B

Began class going a group project  on creating a hover-over effect on a image using coding.

Once we were finished we were able to begin working on our page. I started on just creating different style backgrounds I might use, as well as a feel for the typefaces.

Week 13A

Week 12 Outside Class

Continued working on color sketches for webpage layout.

Also began base layout for webpage with HTML and CSS. My design is very simple and empty right now.

I need to figure out how to combine the two top banners into one - or have all the text onto the first banner. I want them to all be together. I am also still figuring out what typefaces I would like to use in my layout, so for now I just have a simple typeface as a place holder.

Week 12B

Discussed ways on how to layout webpage with CSS. Different box options and background settings.

Week 12A

Went over some moodboards in class and talked about ideas for creating web pages for our designers.
Created some quick sketches for class to illustrate some ideas for my designers web page.

I wanted to try and emphasize his edgy style and incorporate the jagged, broken lines pattern which is found in a lot of his designs. Another one of my sketches I also tried making his name large and bold to look like some other styles he worked with; for example the Doom 3 and Superman logos. Both of which he emphasized in their respective title sequences.

Week 11 Outside Class

Homework for class
Notes on what I've learned from the Lynda.com HTML and CSS videos.

Saved an image of a chart that shows different commands for HTML and CSS. It seemed very helpful to save so that I can refer back to it if I need to in the future.
Looking at how HTML handles "white space", which is the spaces between lines of text in a HTML document. HTML can take any amount of white space that you put into your document, it compresses them together.
How to control line spaces and breaks. You can use a <br> </br> tag to create line breaks where you might want spaces between lines of text or paragraphs.
Also looked at how to create box models in CSS, since I had a little more difficulty making this command work for me. They determine how much space an element would need in a CSS document. You can also assign elements such as borders, styles, and colors to the box models. If a property is not desired, the automatic variant is 0.

Week 11B

Homework for class on Wednesday
Worked on a MoodBoard for my designer Kyle Cooper.
We weren't allowed to use any images directly of the designer or any of their work. This created a problem for me as I was trying to find images for Kyle's style. Kyle has such a large spectrum of works, it's hard to pinpoint one main aspect about him that doesn't involve using example images from his works. He has created so many title/ending credit sequences for movies and everyone is different from the other.

One of the aspects I caught from his style is he using a lot of typography and textures. He uses words and designs to grab your attention.
His style is also very "edgy", so I used a pattern to use with all of the pictures, kind of like what he does with his title sequences; he creates art with credits.

~
Watched Lynda.com videos on HTML and CSS in class time. 10 videos of my choice in each section. I chose to watch beginners videos to help me remember everything once again. I started getting really lost as we continued using more complicated commands in both.

Week 11A

Did another CSS tutorial during class time.

There is so much new stuff to learn with CSS it's starting to feel a little overwhelming. The large spectrum of codes that exist to create the nice looking pages we see online everyday is amazing.

Learned how to use class selectors, such as a Full Stop ( . ) and an ID selector ( # ). These are preceded by a name and used for different elements, such as #top or .intro.
When your HTML document refers to the CSS document is can use attributes such as "id" and "class".
An ID can b used to identify one element while a class can be used for multiple elements.
Another element that was very handy that I learned was you are able to shorthand commands instead of listing each one, such as "margin-top: 1px; margin-right: 2px;"
You can combine them together in one simple line. "margin: 1px 2px;
It was a lot easier to create multiple elements for one part of the page. The same could be used for text and borders.
Also learned how to place background images into the page. The only trouble I had was finding an image large enough to use that would fit into my HTML webpage, most were too small and would leave white edges where the background couldn't reach. Would need to find a larger resolution image for future designs that will fit any webpage on any computer.

Week 10 Outside Class

Did a CSS and HTML exercise outside of class. Working with separate files instead of using internal CSS commands (did external).

~

Also worked on research for our next major project in class. We will be creating a webpage for a given artist/designer using what we have learn with HTML and CSS.

My designer was Kyle Cooper.

Kyle Cooper is a designer best known for his work in film title sequences. He was co-founder Imaginary Forces, which is a design company for branding, digital design, commercial production, and experience design. He has produced more than 150 film title sequences, which include some popular titles such as Braveheart, Spider-Man, The Walking Dead, and American Horror Story. Kyle has also been named as the Honorary Royal Designer for the Royal Society of Arts in London.

He studied in graphic design under a designer, Paul Rand (best known for his corporate logo designs), at Yale University. Kyle later moved on to join Prologue Films in 2003, and in 2008 he was a finalist for the National Design awards. Kyle has also received five Emmy nominations and one win for the 81st Annual Academy Awards.

Sources:

• http://www.imaginaryforces.com/
• http://www.artofthetitle.com/designer/kyle-cooper/