Web Design Students
Millikin University

Hannah Karcher

Learning Review

User Knowledge
My user knowledge of websites at the beginning of this semester was non existent. I had never worked on web design software before and was afraid that I would have to know all this coding knowledge to make a website. I discovered that while coding knowledge helps it is not essential to make a great website. I had never used Dreamweaver and was excited to get to finally learn how. I learned all about how to make a root folder and how that had to sync up with the web in order for the whole website to work. I had a lot of trouble with that at first but I think that by the end of the semester I have a pretty good handle on it. I learned all about tables and image place holders and those two little items made my life a lot easier. Web design I learned is a lot more than arranging things to fit on a page. It involves planning and a lot of readjusting to get things to look just right. While learning how to use Dreamweaver I also had the opportunity to dabble in Photoshop by creating image graphics and adjusting my photos to fit into the web design. I really like how with Dreamweaver I was able to learn all the basics of web design and also how people use the web. I discovered all about links, rollovers and the greatness of named anchors. I learned that even the simplest website has a lot of work go into it. I also found that while CSS helped at times it went over my head in terms of my user knowledge and became a burden rather than a useful tool.

Web Design Knowledge
For website design I learned a lot about tables and how to put images in the correct spots. I learned information about tables and how they help create columns where a designer could put links and useful information for the user. I also learned that with tables you can put graphics in them to create a sense of a border around your page if needed. While I learned about the various animated gifs and rollovers I had a hard time implementing it into my own website itself. I am a visual person but designing a website I learned was not always about how things looked on the page. I had to learn how users saw the sites I made. I had to constantly ask the question is my site visually and user friendly? It was hard at times to design a website in a purely logical way and sometimes it was hard for me to understand why links were not working and if I had to reorganize a page because it did not work structurally. I also learned that on a multi page site you must have a consistent color scheme which for some reason had never occurred to me until I started to design more than one page.

Project Management Knowledge
For my project management knowledge I learned a lot about how to come to a consensus on how a project wanted to look. In my teams I don’t think we ever ran into major issues on design but we had to work around what each of us were capable of. I learned a lot about time management and how that plays a big part in how fast a website gets done. I realize that everything cannot happen with lighting fast speed and while say the effect on the overall website may look simple it took a lot of effort to accomplish that task. For the Macon County Historical Site I learned that everyone has a part. I was the user with the least amount of coding knowledge so I was designated to make the scavenger hunt. I realized that it was not a personal reason but a team reality. As for working with the clients I learned no matter what you give a client they can not like what you have done one bit. We lucked out because our project seemed to be well received. I learned that no matter how much you prepare something for the client and follow their guidelines you could still have to do the whole site over. If your working with a client and a team it is not about your individual tastes its about giving the client what they need.

Tutoring Knowledge
I came into this semester knowing little to nothing about web design, Photoshop or dreamweaver. I feel like I really did not tutor people as much as I gave suggestions. I often had to help myself those lonely nights in the computer lab and sometimes I just had to work with what I knew. When I did help people it was often to suggest a different font size or what colors complimented each other. I helped a few times with explaining what the assignments were or how to insert a placeholder but I feel I really did not teach as much as I learned and was helped by others. I give great thanks for Aaron Bynum and Carrie Seymour without their help I would not have borders around my pictures and would have no idea how to link my site up. Aaron helped me constantly with little mundane questions such as "where might I find the horizontal rule?” and "Aaron I need help figuring out_____". Carrie helped me with little Photoshop questions when I was trying to rearrange my pictures and change various borders. It helped my picture look more in sync with the rest of my photos. Overall I learned a lot with the help of specifically these two people but lots of others as well, without them I don’t think I would have survived this semester.

client project

Website Proposal:
Macon County Historical Society

Hannah Karcher
Aaron Bynum
Russell Conway

http://students.millikin.edu/~Hkarcher/HistoricalSociety/MCHS.html

The MCHS in their initial needs was looking for an educational link to their main web page. They wanted it to be able to be primarily used by younger children but also accessible to teachers and parents as well. They wanted the web page to encompass the excitement of learning about Lincoln and the history of the Macon County area. The web page would ideally be visually stimulating and fun.

The team proposed ideas and we decided that an interactive map would best suit the needs of the client. We traveled to the historical site and collected questions and walked around the museum area. We decided that the visitors to the site should see what the layout of the area was and where certain objects were. We drew the map in a sketchy sort of style to invoke an 1800’s map type feel. We felt this created visual interest as well as an orientation to the museum site for visitors. On the map we decided that the buildings would be great for rollovers. We thought that by putting interesting little fact bubbles as the visitor went over the buildings would be a fun and educational interactive element.

The color choices the team chose for the map matched with the old map type feel we wanted. The fact bubbles we chose the shades of red because they matched directly with the red in the MCHS website. The facts we used were available on the website but also from our observations while in the museum itself.

The map is a small part of the web page. We also included a fun downloadable PDF that is a scavenger hunt around the museum site itself. We thought this could be used by parents and teachers planning to take their kids to the museum site. We thought the scavenger hunt would be a great idea because it got the kids and parents excited about coming to the museum. This also helped teachers if they were planning a visit that allowed the kids a structured activity in which they could learn as well as have fun. The questions range from very simple to very detailed and challenges any visitor to look very closely. The scavenger hunt allows the visitors to go all over the museum site and hopefully in the process stop to look around the exhibits all the while seeking out the information. To make it even more exciting if the visitors do finally complete the scavenger hunt and fill in the answers at the end of the puzzle to figure out the secret words!

The clients stressed that they did not want a whole new website but an educational link. This web page is interactive without being to over done. It’s interesting and filled with educational information. We made the fact boxes easy to update and if need be we created a folder with information on how to do that in java script. We kept the design simple and not distracting so that it could easily be used in a classroom on a projection screen for a lesson and on a home computer. We wanted the user to feel interested in going to the site and using the information to want to go to the museum itself. We think that the map and scavenger hunt site gives interesting facts and creates a game but we believe this does not detract from the MCHS itself. If anything we believe this web page will encourage the visitors to want to come even more to the museum site!

Hands On Training Tutorial Responses

Chapter 13

I really liked this chapter. It was easy to understand and there really was not anything complicated. These forms dispelled my mythological status I put on buttons and forms on websites. They have always helped a website and look ten times better I think then links. They were very simple and make a website so much more cleaner and organized. The thing that was sad that if I was to make a form and have it transmit data I wouldnt be able to do that unless I had more "operational involve programming". But overall one of my favorite exersizes it even beat out tables!

Magazine Case Review

http://students.millikin.edu/~ABynum/EN301/MAYFLY_comp/MayflyCase_russell/mayflyhome.html

For the team of Russel, me, and Aaron our Mayfly case wanted to reflect the booklet so it was easy to make the visual connection from the literal booklet Mayfly to the website. We designed our fonts in Futura as text and Worms for the sidebar text on the left for each page. It was organized in the simplest way we could imagine someone searching for the information. We catorgized our main page with a link to the frog on each page leading you back to the main page.

The links on the side were spaced out to be visually appealing but also we wanted to look spaced out like a haiku would be. We did not choose colors besides the links of red and blue because we thought too much else would be distracting to the concept behind haiku. We tried to emphasize the haiku and did that much on the intro page with lots of examples of the work and a lot of negative white space. We had a brooks books link at the bottom of every page so that if a person typed in Mayfly they could also easily go straight for each website. It took some time to develop but the page that took the most time was the gallery.

We ideally envisioned the gallery as something that would scroll by as the viewer was looking at the artwork, sadly that didn't quite work as well as we hoped the first time. It works it is just that the viewer now has to scroll through the artwork themselves. The gallery was made primarily by Russel and he envisioned as the haiga as icons. The viewer could see them and scroll by as if in a gallery but if they clicked on them they could see the whole picture with the haiku as well. It still was flanked on either side by plenty of white space so that it kept with our concept of haiku and simplicity. The structural arrangement of each page was simple like the concept. Every page is blocked in by two black sidebars. This visually is able to keep the eye to the center of the page, the main information and has the same look as the Mayfly booklet. It is a simple concept but it helps the website flow really well.

Chapter CSS

This chapter was very insightful but a ton of information. It helped me understand nice ways to make the layout of websites easier I like the idea of CSS External style sheet that seems like a great thing to know if your making a multiple page website! I think the explanations were helpful but sometimes I felt that I was being overloaded with so much information I felt that I was just doing the exersize not really soaking it in. I also felt while in each exersize they explain what every little step was I had trouble when I was making new CSS rules, which was informative, that I didnt know why I was typing say #tdSidebar in the tag they never explained what that meant. I felt that if I was making rules for my website I wouldn't know what to call them. Is there a rule or can you just name them whatever you want? I felt that while making new rules was important and definetly will be helpful when I try to polish up some of my websites aspects its seemed very very tedious. I think it was helpful and before I did this chapter I was very apprehensive because I thought that i would have to rewrite the actual code and I found out that you can make changes without even having to really look at the code but at times the chapter was trying to explain the css coding part but missed really fully explaining, felt it was a little glossed over.

Chapter 10

This tutorial is I think the most interesting so far. I liked learning how to create rollovers it was pretty easy once you got the hang of it. The only thing was for the first exersize was the tediousness of going through all the files and then renaming them and then making sure they were in the right file. It was pretty simple and just was a lot of file linking. The multiple event rollovers was impressive and it created a cool effect and would look really nice on a website. Again it just took a long time to name and rename all the files so that they would work properly but it was worth it in the end. My favorite to learn and it was easier than I thought it was going to be was Exersize 5 with creating flash buttons. Flash as to my understanding has always seemed really complicated but Dreamweaver was able to do the buttons quite with ease. I liked the simplicity of making them, that there is a whole flash buttons feature is nice. I think i would have to know more about flash but these buttons are a really nice slick idea on a website. I hope i will be able to incorporate it somewhere.

Chapter 8

The chapter itself was pretty interesting. The layers thing was confusing at first because I had a harder time with inserting the second layer ontop of the first one. The steps they suggested I just couldn't find what they were mentioning so I just did the good olde drag and click method, it never fails. The things that I felt the chapter never really fully covered was with the text box, I layered it like they asked but it looked stupid althrough out while I was doing the exersize. I think I did fine with the converting tables into layers and all that but the really hard for me came with the layout tables and cells. I just didn't find anything thing in this section they were talking about. I was really confused and when they mentioned the layout tab I couldnt find it and literally looked through every file I could think of. I tried to work around that by just making a table with two cells of my own and that worked... for a minute. Then the book wanted you to find the Draw layout cell and do all that stuff with the navbar and I was offically lost. I really struggled to find everything they were talking about and had no luck. I tried to insert the images on my own into tables but I never found the layout view and thats what really messed me up. The last whole section I couldn't seem to get anything right and it was extremely frustrating and I looked through every tab you could think of and didn't find it. Frustration is the word for the last exersize of this chapter.grrrrrrr Chapter 8.

Aaron's Bookmark Critique

I thought his website entry through the comic is very clever and creative for one thing. The book marks page was a little hard to find at first because it didnt stand out with all the other information that is in the index page itself. I like the consistancy of the bookmarks page with the same deep red as the previous pages. The banner for his en 301 stuff is nice but should be at the bottom it was distracting to me. The links page font I feel should have been a little bigger so the veiwer has know they have gone to the correct page. The rollover links was nice how it changed to orange. I thought the orientation on the left side was a little annoying at first until I saw the really nice graphic element at the throught the right side of the page. I like that the links open in seperate window its nice. I thought the links subjects could be bigger.

Chapter 7

I learned more than I think I ever knew about tables in this chapter. Tables are the focus but I think this will help when it comes to making my websites organized more interesting and visually put together. There were a few exersizes that seemed to have too many steps to make one thing happen. Overall though I thought it was helpful and will help my websites in the future.

resume critique

http://www.joearrigoni.com/joearrigoni/index.aspx
This is a great website. Its interesting and entertaining. The colors visually are very understated and font is nice and appealing. I really enjoy the 6 sections with different titles that show how he is progressing with a project, personal news and latest skill set. His name is clearly displayed that states it is personal website and online resume. It has sections clearly labled. I like how the resume is very clean, appealing and easily defined. He offers it in a downloadble format instead of it automatically dowloading to your desktop, which I personally find annoying because you cant even look at it first. The two complaints I have is one about the ugly color of pea green for the letter color and the weird circle bullets. It wouldn't hurt him to have black font color I think it would be more striking.I thought his portfolio section was clean and gave great clear examples of his work. The great thing on this website is the cover letter. Its his website so therefore he can elaborate in detail what he does for his cover letter and really give the employer a sense of what he does and his skills. It is the right length and easily understandable. I really am impressed by this website/resume.

http://www.ccs.neu.edu/home/jpeeler/resume.html
This is probably the worst web resume/website I have ever seen for a proffesional of any sort and he is a WEB APPLICATIONS DEVELOPER!!! I hate the graphics on the left side it looks like I stepped into a 4th grade web project. The by line for the website is "a site about me" well of course it is, it has your name on the top! I like the hobbies icon, a smiley face how original. If I was an employer for a graphic design or web developing company I wouldnt even give this guy a second glance. I understand this is harsh but have you seen the website? I think it could be so much more. The colors are really bright and the icons while understandable don't need to be there it screams non proffesional. Now if you read the home page this website is for a class but still there could have been more consideration taken especially since this is out on the web and employers could potentially see it. The resume itself is really wide when I opened it up in word, the font and set up was really cramped and hard to read. It does not look that polished to me, he looks like he wanted to cram as much information as he could and he accomplished that goal.

Chapter 6

Chapter 6 was very informative and at the same time frustrating. For exersize 1 and 2 I found that the font choices had changed. The book describes a 2 setting but there is none on this program so I became kind of stumped. I tried the override that they describe for the color background and for some reason was unable to get it. Also for the fonts they described fonts in the order that did not appear in the font box so I improvised a little. Exersize 3 and 4 seemed a little tedious but were basic. The define list was helpful though. Exersize 5 and 6 things were harder to find for me and in totally different files. For example when it mentions to find the color scheme it did not have the one the book was looking for. I did it manually from page properties and that worked just fine. Exersize 7 was just strange and I could not seem to find anything they were talking about so I got frustrated very quickly. The rest of the chapter was informative. I tried the flash text but I dont think it worked for me.

http://www.marcjacobs.com

Being a very visual person I really liked the set up of the website. I really thought the clean white background with the words that highlighted certian sections made it visually easy to navigate through the site. I really liked the way the models were set up. It was set up very much for someone looking at the clothes visually, the scrolling models, but also showed a full length picture that could go up and down. From a technical standpoint if you clicked on the model it would show automatically what each peice was and its number. Its probably not that technical but I really enjoyed the way all the information you would want was at the top and easy to find and didnt clutter all over the page.

http://www.marcjacobs.com

Orientation: It is a fashion designer’s website that displays current and past runway shows. The website is made for clients that shop for high designer merchandise clothes and accessories. It helps if you know fashion because the website labels it by seasons. It also targets viewers with the latest digital technology. The reason being is that the videos and some of the graphics might take a long time to load on a slower computer so it helps to have a faster internet connection. I love the way that at the top it is organized by general info such as bio, travels etc. They are just extra portions to the design that helps the consumer understand the concept of the clothes as well as understand what the company is doing and how they run a business. The font for the website clearly labels where you are when you are at the home page, Marc Jacobs is clearly bold and stays consistent through all the pages. The line below that is more links that will help the consumer with a more specific find in terms of clothes and accessories offered. I really enjoy the way the text on the site is not bolded until it is clicked on but until then it washes into the background. There are various links to each collection and when you click on a link it puts a little line under the word and its highlights and then once the link is selected it positions that title in the middle of the screen.

Navigation: I think the concept is very clever and keeps the website from looking to cluttered. I really thought the scrolling bar that is used throughout the website adds another sleek touch and has everything you read or look from left to right. The pictures they use from each runway show are big enough to actually look at the clothes on the runway. I really think it was an interest visually too have the individual models cut out and then label all the individual pieces by name and code. This would be a major help I would think if you are a consumer looking for a very specific piece and you needed to find it quickly. It’s also easy to navigate if say your looking for clothes in a specific collection there are links that take you directly to that collection. I appreciate how the font size is not to small and does not clutter the screen and does not require any text or links at the bottom.

Content: The site should be seen as a portfolio of a business. It is made for a person that likes fashion. This site is very direct about how and where to access information on its business it does not need a lot of extra links. It is made for a casual browser or someone who might be interested in the designers but also well-seasoned fans of his clothes, accessories and perfume. The site as I have expressed many times is visually sleek, focused and easy to browse within.

The first question I have from Chapter 1 is How do people personally see their lives changing if everything went digital? Would it be easier or harder? I personally like the physical notion of a book. I dont think no matter how progressive technology got I would never be able to give up my library of books. My second question is What will constitute as a library or as a reasearch center if everything is digitalized? What will happen to the people that help you reasearch your paper topic or book?What happens to the social spaces of a library with the loss of the interaction factor? —Hannah K

Chapter 5

I liked the other way to link things with just being able to drag the arrow it seemed to me to speed up the linking of the new source images. It took me a while to get used to the Image maps but sometimes it was a little confusing with the placement within the property manager. Otherwise I just think it going to take some time for my brain to warm up to the set up of the book and its exersizes.

Chapter 4

I really thought the pre-reading before the chapter was really important and helped me in the later chapters. For chapter 4 it took me a while to get to used to the way the book was set up. I felt a little disorientated because I am such a visual person and so when the book would say where to say find a folder and the book was set up visually as a PC. I love the mac I have used it all the time so that's why I might find it harder than others to get used to the book. After doing the first part of exersizes though I think I started to get used to the setup. I liked how the book showed different ways of going about the same tasks. It took me a while to get used to every indvidual thing being a seperate folder but it makes sense once you see how many images and different fonts you need. The linking the images to folder took a while to get used to but once I did it a few times it made sense. I thought at the end of the exersize it was a little repetitive but it helps to ingrain that basic information early on.