Blog post 5: project two

For Project two I want to focus on the ad campaign that is called One, and it is a campaign to end extreme poverty. I am okay with the layout of the website, but I really like what it is working towards. One thing with this website is that it is a global organization so it is very big and has a lot of internal links. I think what I enjoyed about the website is that it has so many options to find information/sign up to help. It is almost a little to cluttered though. I want to focus my project on talking about One, and seeing how I could change the layout of the website, it is user friendly but it is not very appealing to the eye.

Assignment one: Blog post 4

The Technical:

            Before I started working on my website I wasn’t sure if I wanted to just go off of the template that we did as practice, or if I wanted to start from scratch and use a template online. I decided to use a template from Freecsstemplates.org. I tried to choose one that was fairly easy to work with. I started with one and I thought I liked the layout and so I started messing around with the style sheet. I then realized that I messed things up and so I had to start over or else I was just going to confuse myself even more then I already was. So I went back on the website and I found one that was fairly easy to control. I took the template and started messing around with it. The challenges that I faced with this template came mainly when I was almost done. They didn’t really have any major effect on the website – they were more style issues rather than technical issues. I tried to make a new hashtag so that I could maybe change the style of page 2 or page 3, but it wasn’t letting me do that. I though that maybe I should just leave it so I didn’t mess anything else up. I wanted to do that so maybe I could change the size of the pictures and the border boxes, so they were different on each page. I changed it so they were the same size on all the pages. I changed the color of the title box to yellow instead of orange; I also changed the size of the image box to 500 by 400 so that it fit to the size of all of my images. One thing that I came across was that I could not center the boxes or when I tried they wouldn’t center. I tried to change them on both the style sheet and the index and they wouldn’t center so I left them off to the left.

The Ideal Website:

            So when I started thinking and planning what I wanted to do for the website in my head I wanted to try to take the skill that I had from the sample project and then step it up. I wanted to challenge myself to make it look more professional and look more put together than my other website. When I did the sample I had zero idea about coding or html. I actually took to it and wanted to try other things that would push my skills farther. I am happy with how it turned out especially this being the second time I’ve done this before. If I got stuck on things Google helped me with finding the correct way to do things. If I knew everything there is to know about code then each different page would have a different layout but I didn’t know how to make that happened to I just kept it simple.

Modes:

            Because I didn’t have any videos or sound I focused on special mode and visual mode. The special mode was how I organized my website and the proximity between the image and text boxes. I tried to make sure that all of the image and text boxes were the same distance and size on each page. I tried to use visual mode by using the same color scheme throughout the website that was appealing to the eye. I also changed the colors of my pictures to that they also fit with the color scheme somewhat. The layout of the website was all the same essentially so it was easy for the viewer to navigate.

Design Strategies:

            I tried to make my design strategy as simple as possible, while also looking professional and showing my personality. I focused a lot on purpose: trying to make the words on the page important along with the layout of the page. The context of the text was all my own writing, although I did give credit to the website that I got the template from. Trying to incorporate both of these design strategies I would hope that the audience knows more about me and the website was visually appealing to them.

Here is the links to my website and the validator for my website:


http://studentweb.engl.wsu.edu/355/creed/project/index.html


http://validator.w3.org/check?uri=http%3A%2F%2Fstudentweb.engl.wsu.edu%2F355%2Fcreed%2Fproject%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0

SNL: Paul Rudd Promo Video

For this blog post I wanted to do something a little different then finding an ad campaign or something like that. What I chose to look at was the promo videos that Saturday Night Live sends out for their show the following Saturday. The one that I chose in particular to talk about was a couple weeks ago when Paul Rudd was on the show with One Direction. I told you I had a crush on One Direction and I love SNL, so why not try to incorporate them as much as I can? Here is the link to the video:

http://www.youtube.com/watch?v=JNmN58HujKY

Watching this video, SNL is setting it up in a way that showcases Paul Rudd, but he is blending in with the other guys too (looking a little more professional). The colors are dark, and the guys fill up the screen. I think that the dialogue is what is going to catch the viewer’s attention the most. With this being a promo video for a comedy show they are going to use the dialogue to the best of their ability (they are going to make it funny). At :56 they are now selling their show. You can see that the font is bold and the “Saturday” is smaller with the “night” and “live” gradually getting bigger as you read down the page. With the show being set in New York they are filming, going over a bridge and the font is in white so the words stick out on the page. The NBC network logo is up in the right corner and after the time that the show is on. The proximity of the words are close because they want to make sure you are seeing everything possible. At 1:02 it switched to a black screen and bright yellow SNL logo on the page. This is reminding the viewer one last time what they are watching. It is the last thing they see in the video so they will notice that the most. With the bright yellow writing it is something that you can’t miss. They framed the logo in the center so that your eyes are focused on that one thing. They are making the promo video funny so that the viewer will want to go and watch that episode when it is aired on Saturday.

DTC website blog

So here is what I learned while doing this HTML coding assignment, this stuff is fun. I was so scared and turned off by it at first because it was nothing that I have ever done before, but while doing it I found out that I enjoyed it a lot! I made some changes though because I felt like I wanted to mess around a bit and see what I could come up with. I changed the colors of the layout and I added my own links to the bulleted lists. I wanted to make it so that the website was an about me so that if you went on there you could find some things and you could click some links to take you to my Facebook, Twitter, Blog etc. After I linked to those I wanted to see what else I could do with the abilities that I have right now, so I played around with different styling techniques. I took a code off that website that you gave us and changed the bulleted lists up a bit making my page look a little more put-together. One thing that bothered me that I had trouble with was making the links to my websites centered, which is one thing that I need to work on. 

Here is the link to my file!

file://localhost/Volumes/355/creed/sample/index.html 

Christine