Web Design Student
Millikin University

Nicole Faletti

Learning response

Throughout this course, I have definitely acquired new and important skills that I hope to keep with me through the rest of my life. I have become more acquainted with creating, designing, and maintaining websites. I have learned how to be a part of a design team. I have learned the important aspects of creating and designing web pages too. My user, designer, project, and tutor knowledge in this class has definitely grown.

I have learned a lot about user knowledge during EN 301. Before this class, I was scared to even click the Dreamweaver button on a Mac computer. Now, that’s the first thing I want to do! I have learned a lot about the program itself, such as what buttons to click to get the things I am looking for. I know pretty much what all of the icons mean in Dreamweaver also. At the beginning of the class I had no idea where to even begin. Overall, I feel as if my user knowledge of the program has definitely improved.

My designer knowledge is something else that has improved greatly. Whenever I look at a website now, I immediately start judging the navigation and orientation of the page. I know what design elements catch the eye of the audience, such as animations or bright colors. I know that it is important to have a close off at the bottom of the page to “end” the page. It is also important to make a general layout so that the information is organized. It is also important to have a header to introduce the page. Another design aspect that I have learned is that it is better to not have a TON of text on your webpage. People don’t like to read too much on a computer screen. It’s good to make sure the font is readable as well. Catchy websites are usually simple, straight to the point, and have a lot of pictures and not a ton of text. All of this information was just a star in the sky to me before this class. 

Project knowledge is something else I have acquired in this class. The two client cases we had to complete pretty much taught me project knowledge. I learned that it is extremely important to listen to the wants and needs of the client. For example, in the Mayfly Magazine case, the client wanted the website to be simple just provide a brief description of what the magazine is and does. My group and I took this information, along with the design requests, and worked on our project. It was important to add a little bit of our own thoughts and concepts in the work as well. I feel that it is important to add a little bit of your own creativity when working on a client case. They provide you with the information, and you come up with the creative plan. This newly obtained project knowledge has helped me work well with the groups I have been in and we’ve created some pretty awesome websites! 

Tutor knowledge is the final knowledge that I have become more acquainted with. I feel it is important to help people out with their user and design questions. I was very happy that closer to the end of the course I was the one answering a few questions instead of asking them. I think in order to have a great tutor knowledge, you have to have the other three knowledge experiences as well. If you don’t know a lot about designing then you can’t really help someone with design questions. If you’re not away how to work in a group to complete a project, you can’t help anyone who has questions about it. In the beginning of the class, I found myself asking a lot of questions. If I hadn’t asked these questions, I definitely would not be as knowledgeable as I am today.

Overall, I feel that I have learned a great deal from this class. I hope to take my Web Design skills with me as I continue my education and career. I was even thinking about taking more classes on this topic to continue with it and possibly make it a side job to teaching! I really enjoyed this class and I hope to keep making awesome web pages. 

Hands On Training Tutorial Responses

Client Case Review

Connect, Respect, Elect 2008 Debriefing
Stephanie Pezzelle, Katy Cryns, Matt Wheeler, and Nicole Faletti

Upon first entering our web page you see the “home” page. We used a table to create the general layout of our page. Our navigation bar is on the right side of the layout and each link has a rollover. We chose the right because most are found on the left and we wanted the site to have a unique feel to it. We decided to keep this navigation bar consistent on every page. On the left side of the page we have a poll of which democratic and republican candidate should be president. We thought this was a simple, but fun and interactive, way to show what people thought about the candidates. We also include a brief overview of what each page has on it to make navigation a little easier. We hope to subscribe to a newsfeed as well that posts up-to-date information about the election issues and debates! At the bottom of the page we included a sign-off with the design rights! We feel that with this page, we could add a little more color to the text to make it a little more appealing to the eye. Also, we could add more links to newsfeeds and media sites that deal with the election as well.

The “1st Time Voter” page is simple, yet is full of important information. We decided to get rid of all of the fears and questions that a first time voter may have. Once again, we kept the layout of the page the same as the “Home” page and put a giant “1st Time Voter” title at the top of the page so the navigator knows what page he is on. We felt this page was necessary for the audience that we are aiming the page for because a lot of college students aren’t quite sure how to register to vote and also, how important it is to register! Once again, we had planned to add a splash of Illinois on the background to symbolize our state. 

The “Candidates” page contains pictures of the Democratic and Republican Candidates along with their names. We felt this was necessary so that voters can identify the candidate if ever seen on TV. Also, at the bottom of the page we included a “What Do They Stand For?” link that directs to a separate page with tables showing which candidate support which issue! On this page, we could possibly add another link to the other parties besides the Democrats and Republicans. We feel these parties are just as important as the main parties.

The “Current Issues” page goes into detail about each current issue that is being debated so that voters can decide whether or not THEY support the issue to better find the candidate that has similar ideas and opinions as they do. Each issue on the “What Do They Stand For?” page is covered. One thing we can improve on is definitely decrease the size of the paragraphs and make a more bulleted list of the main points in each issue.

We also made an “Elections” page. The layout is consistent with every other page and the sign off is at the bottom as well. We felt this page was necessary so voters knew when to hit the polls! The elections we are going to include are the Presidential Election, Important State Elections, and Elections around the Decatur Area.

We have a “Discussion Board” page as well. We feel that a discussion board is a good concept to have so people can communicate with each other and see what other people have to say about the election. We hope that this discussion board works well!

Finally, we have a “Contacts” page. This page will have the contact information of people we feel can answer questions that students and the community may have about the election, voter registration, the candidates, and important election events.

Stephanie designed the layout for our Election website. Nicole came up with name “Connect, Respect, Elect 2008.” Katy came up with the ideas for the pages we have, and Matt focused a lot on the issues and decided which ones were the most important ones to focus on.   As a team, we worked together well and communication was never a problem.

Overall we feel our design fulfilled every request for the client. Our site is easy to manage and can be updated at any point. After adding the rest of our features, we feel that our site will be the “hot-spot” for election information.

Client Case Plans

Information or Entertainment Emphasis?

I believe that we are focussig our Election website completely around entertainment. We realize our audience for this website is college-aged people. We feel that in order to catch the attention of this audience, we need to center our site around entertaining them. We are going to provide a lot of information about the election on our site but in an entertaining way, so the audience will become knowledgable but still entertained about the campaigns and elections. We want our audience to interact with our web page as well. We hope to have a discussion board where visitors can state their opinions about the election or issues that are being discussed in the debates as well. Hopefully our website becomes a huge hit!

3 comparison websites:

http://www.cnn.com/ELECTION/2008/

This website is hosted by CNN News. This website seems the closest to what our team is looking for when it comes to a website. There is "presidential pong" the game, which is entertaining. Various news pieces and video clips exist all over the site. This site is very informational, yet entertaining to the general audience.

http://news.yahoo.com/fc/US/2008_Presidential_Election

This is another website that can be compared to how we are trying to design our website. This page has bits of information on every topic in the Election: Candidates, issues, polls, blogs, top stories, videos, audio clips. This page seems to be extremely based on information.

http://www.npr.org/templates/topics/topic.php?topicId=1102

This website is kinda of what we want our site to NOT look like. This site is based doesn't have any information on the debate issues. There are no polls or videos. There is an audio clip, but it's only the stories that are already listed on the website. It is simple, plain, and has no entertainment value. It's all informational, but the information listed doesn't seem to help college-aged people make an informed decision. We DO NOT want our site to be like this one!

Chapter 10

This chapter seemed pretty easy and went fairly well. It was cool to see how to make a printer friendly version of web pages and fun stuff like that. This chapter was really short, but at least I know how to make a printer friendly version! Should come in handy when I have to make an order form for my individualized project :)

Chapter 9

This whole layering thing, although I don't quite understand it, is kinda cool and seems like it would be very useful when it comes to designing a web page. It looks cool when everything is said and done! Maybe I just have to do it a few more times to actually remember how to layer things! haha

Chapter 8

YAY TABLES! Finally I learned how to actually do some of the stuff I didn't know how to do with a table, such as round the edges. I pretty much knew how to do most of the stuff from this chapter through Dr. Brooks's short lessons at the beginning of class. But, it's nice to re-cap how to do some of these things!

Web Design
Links Page Critique

Stephanie Pezzelle’s Bookmarks Case

Organization:
This page is very well organized. The links at the top of the page are organized into a table. The fonts are similar to make it easier to read. The “Back to Top” buttons also make this links page more organized.

Navigation:
It is extremely easy to navigate this page with all of the links provided. Each section is anchored to a link at the top of the page, and at the bottom of the section a link brings you back to the top of the page.

Interactivity:
This page is all words. It is an extremely useful site, but maybe a few pictures would brighten it up a little and make it more interesting and fun.

http://students.millikin.edu/~spezzelle/RawFoodistsCorner/rawfoodistscorner.html

resume critique

Good Resume Example

http://www.1st-writer.com/WebResumeExample1.htm

Bad Resume Example

http://www.teacherweb.com/pa/georgegblaisdellelementary/mrsvinelli/t.stm

Chapter 7

This chapter made it easier to understand how to work with the text on your webpage. I know I was having some trouble with this before the chapter on allignment and how to get the text to stay where I want it to. I also learned how to get the text to stay at the top instead of move around on different computers. I'm still confused on how to do a Flash Text or whatever that is. Maybe I"ll get some help with this int he future.

Chapter 6

This chapter was extremely confusing to me. I can complete all the exercises with the book, but I don't think I could ever do a CSS page without it. I don't really understand yet the entire CSS process. I felt like I was just doing what the book told me to do and I didn't really pick up on any of it. Hopefully I'll be able to better understand CSS as we go on with the chapter tutorials.

A Favorite Website:

Web Address: http://www.hollisterco.com
Site About: I really like this website because it's catchy and easy to navigate. I really like how there are interactive images at the bottom of the index page. I also like the fact that you can access the music played in the store on the side. It creates the feeling that you're in the store itself.

"Site Analysis"
Orientation, Navigation, Interactivity for: http://www.hollisterco.com

When this page first pops up the sound of waves and seagulls immediately begins. Right away, you are given the feeling that you’re on a beach. The picture in the center of the screen is a couple on the beach appearing to be in love. The background of the page is a beach scene with animated palm trees that look like they’re blowing in the wind. Birds also fly through the air on the background. The soft greens give that cool, beach feeling as well. You immediately know you’re at the Hollister Co. page as well because of the logo on the left hand side of the page. At the bottom of the page, the toolbar is constant. You always know that you are at the Hollister Co. page because the Hollister Co. logo stays on the left hand side the entire time.

The interactivity on the opening page is entertaining and catchy as well. On the right hand side of the picture, two tabs can be clicked on. One of these tabs takes you to the music playlist that is played in the store. When you click on this tab, the playlist pops up in a second window so you can listen as you navigate through the site. I really like this because it gives off the feeling of the store from your personal computer. The other tab is to contact the store. Underneath the picture on this page, there are several objects that can be clicked on. The three Tiki Men in the bottom left of the screen each animate when you run the mouse over them. Also, each of them can be clicked on to either search the page, or find the closest Hollister Co. store to you. Each of the other images can be clicked on to view photos and videos as well. In order to enter the site, you click on either “Dude’s Shop” or “Betty’s Shop” at the top of the page.

Navigation through this site is extremely easy. Picture of each of the clothing items pops up when you click on certain items. You can always go back to the index page by clicking the Hollister Co. logo as well. It’s extremely easy to switch back and forth between the “Dude’s Shop” and the “Betty’s Shop” because the tabs are always at the top of the page. The links are very visible on the page as well. When you scroll over something you can click on, the pointer changes to a hand. When you scroll over the images you can purchase, different colors pop up that you can preview it in. Also, the price shows up. I like that the price doesn’t show up until you scroll over the item.

Overall, this page is extremely catchy to the public. I enjoy the sound clips, the images, and the animations. The navigation on this page is fluid and it’s easy to get back to the main page or any part of the website. I like how the logo for Hollister Co. is always on the lefthand side. It makes the orientation of the page that much better. The interactivity on the index page also makes the page more interesting. It’s fun to click on the little images and find where they take you!

Chapter 5

This link chapter helped me become more comfortable with the different types of links: relative links, absolute links, e-mail links... etc. I'm still a little cloudy on how to create PDF files and ZIP files... I hope this is not too important. I looked ahead at Chapter 6 and realized that it's CSS. I'm not going to lie, this chapter has me a little nervous!!!

Chapter 4

I began chapter 4 and got up to exercise 2. When the book told me to view the code of the page, I immediately became terrified and didn't understand a single thing I saw on the screen. I'm assuming this fear will go away as the lessons continue... hopefully.

This section got me a little more familiar with just the basic actions you can do with a website. I'm starting to feel a little more comfortable with dreamweaver. This is a good thing because I don't usually work with Mac's and have never worked with dreamweaver. I like that I now knwo how to insert pictures and text and maneuver them around the page. It's also very helpful that this chapter covered links.

Chapter 3

This chapter helped me get a little more comfortable with opening files in Dreamweaver. I had a little trouble locating some of the folders and files the book was talking about but it soon became easier for me after a few tries. The Site Map section was a little confusing at times, but you said that this section isn't really necessary. I will take your word on that.

-What is the difference between Relative and Absolute URLs? I'm still confused
-Is it vital that we understand the path structure? Because I don't.

Chapter 2

This chapter is kind of self explanitory. I feel a little more comfortable about what the icons mean in Dreamweaver 8 now. I'm terrible with web designing so all of this jargon is slightly confusing to me. Hopefully I'll get better as the course goes on! I'm excited to start designing!

Chapter 1

I'm still very unclear of the difference between HTML and XHTML. I haven't had to use either before so I don't know when to use which and such. I've seen a lot of HTML codes on Myspace, but that's all that I have come across.