Web Design Students
Millikin University

Aaron Bynum

Learning Review

User Knowledge
My knowledge as a user of web design software and as a website designer as a whole has grown quite dramatically since the beginning of the semester. Although I already possessed some knowledge of desktop publishing and content management systems before entering into this class; I have never really gone through a structured tutorial of design software with the explicit intention of building on existing experience, with hopes of adding in new tech-related info.

It's been a while since I have used Dreamweaver--my first experience being back in High School to create a website for my Chemistry class. Nevertheless, I like the fact website management and page properties are easy to locate and help those inexperienced with CSS move along a little bit. Managing a website requires an individual to work with other applications (i.e. Adobe InDesign, Adobe Photoshop, &c.); I have learned here and there how to work through helpful strategies--such as image editing.

Design Knowledge
The most noticeable facet of design knowledge that I have learned throughout this course pertains to spacing and arrangement. Orienting information on a page has generally been rather simple for me to bypass in recent years what with other people acting as technical administrators on websites that I have contributed to. When it was me who was the individual with the responsibility of creating the proper input fields, text boxes, tables, image placeholders and much more--then site administration becomes a lot more of a struggle, but it's a good kind of struggle, because it forces me to think laterally and forces me to see the production and creation of a website in a different manner.

Project Management
I have found that delegating job tasks and responsibilities to particular group members when it comes to a community project is often the best strategy for project development and production. I worked with Russell Conway and Hannah Karcher on both the Mayfly Magazine project and the Macon County Historical Museum project. By delegating work to each individual, we were able to collectively agree that each individual was capable of excelling in whichever area of design of which they were assigned to develop. Russell for example, was always responsible for the graphical elements, Hannah the content, and myself the content and the coding (if applicable). Because these projects (the second in particular) was a creative challenge, we all decided that experimentation with the style and delivery of our content was necessary in order to ensure that the end design we agreed upon reflected our interest in the project and in the creative elements present within the project as well.

Tutoring
Having spent several upon several hours of the past semester in the computer lab, I was able to help many other students with their project work. The other students within this class that I managed to assist were concerned with things as simple as connecting to the server in order to properly update their website to slightly more complex, design issues, such as embedding particular media files or cleaning out the code within data, copied over from other applications.

It's always much easier to help individuals when you offer them a sort of step-by-step approach to problem solving. I say this because I found that whenever I was assisting another student, offering them alternative ideas to arrange their content or to fix the alignment, it helps most to give them alternatives as if they were sourcing another tutorial.

Regarding other students that have helped me throughout the semester. I've mostly made attempts to work through my troubles and design problems; but I did make the effort to talk to Galen when I was curious about CSS. He gave me some very helpful resources for building my beginner-user knowledge about cascading style sheets.

Project Proposal

Literary critique web site on an anime release that was originally a direct-to-video series of three episodes called LE PORTRAIT DE PETITE COSSETTE; a sort of psychological horror about a young man who willingly unleashes a cursed soul from captivity.

Hands On Training Tutorial Responses

Chapter 13

The final chapter was relatively short and didn't have too much material for me to dissect. Nevertheless, the most valuable part of this chapter that I pulled from the exercises on Forms definitely had to be Jump Menu function. I have always considered the drop-down menu one of the coolest and most mysterious aspects of web design, and was somewhat surprised to find it tucked away in one of the final chapters for us to study.

To put it to use, I figured that the jump menu would best serve a web section of my web site that has a lot of text information… information that needs to be broken up over a series of points, anchors, divisions, whatever. And as such, I figured that my page of sample articles would be perfect

(http://students.millikin.edu/~ABynum/My_Resume/WritPub_Experience/writpub_expFrame.html).

Although I currently have the links of the drop-down menu going to anchor links, having a side-frame with a jump menu that allows browsers to select which article to specifically go to is much easier to navigate and user friendly than clicking text links and always subsequently referring to a small "back to top" link as well.

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.

(New Chapter 6) CSS

The eleventh/sixth chapter on CSS was remarkably informative. The only problem is that there's so much information to take in, it's literally quite impossible to get it all on the first pass around. I am already aware of about half of what the chapter taught, because of my familiarity with the properties panel; but the whole deal with identification tags and applying style sheets to multiple pages was understandably new to me.

I wish the chapter instructed me more on which circumstances each particular Class or Advanced ID tags to use though… sure, it was helpful to learn and go through the steps of each process/function, but it's even more difficult attempting to rationalize abstractly just for which opportunities I should use them for. Some of the examples do solve this problem, hinting that certain tag changes are only good for singular changes, not global emendations… but on the whole I felt that the chapter, although remarkably thorough, wasn't able to give me much of a context for most of the info I learned.

I can't say that I'm going to use much of the information I found on tags immediately, but I'm sure I'll find a use for them eventually.

Chapter 10

The tenth chapter was fairly interesting in that it covers only one aspect of website design: rollovers. I've mostly only experienced with rollovers with regards to changing the colors of text links here and there, but I hadn't any idea as to how complex the rollover function really was.

I don't believe that I'll ever use multiple-event rollovers or pointed rollovers, simply because when it all comes down to it, I feel that they are a bit superfluous/excessive. I do however find a good purpose for the image replacement technique of generic rollovers, which I immediately applied to my Resume Case Assignment web page. Although I don't have enough experience and Photoshop know-how to manipulate images enough to make them appear spectacular, I still manage here and there to differentiate the two images to complement one another.

Rollover links are helpful because it helps diversify an otherwise text-heavy page. Since I'm not big on home-made graphics, these help a great deal.

Chapter 8

The most valuable part of the eighth chapter to me, which focuses on layers, has to be the "autostretch" function. It's the function that allows a particular column of a table or tabled object to bend and move and be so malleable as to accommodate the page width. Although you can only make use of one column with this option at a time, I find that if you're clever enough, you can find a way to apply this to a left-aliened column and a right-aligned column.

It often feels like a relatively simple function of a table function, but understanding when to apply it and understanding how to properly utilize this function is often complicated. One good example is my application of this on my Writing & Publishing Experience page of my EN 301 website

(http://students.millikin.edu/~abynum/My%20Resume/Writ-Pub%20Experience/writpub_exp.html).

The tables with the text on the right-hand side of the table (type #1) were simple enough to manipulate with the "autostretch" function; however, the other tables, with the text on the left-hand side (type #2), provided more of a design/layout challenge. It would be a serious problem if half of the tables stretched to fit the page while the other half did not or had stagnate, unmoving blocks of text. My solution to this problem was to take the type #2 table and add a third column on the left. This allowed me to place the text and image placeholder in the two right-hand columns, minimizing the left column. This also allowed me to apply the "autostretch" function to the center column, which contained text, and subsequent allow the text to move with the right-aligned image and web browser.

Prest-o Chang-o!

With the far-right column of type #2 collapsed entirely, the web browser cannot distinguish the difference, really. This to which makes the page pretty unique in a variety of ways.

Web Design
Links Page Critique

The links page of Hannah's World

(http://students.millikin.edu/~HKarcher/links.html) contains a variety of links and information for artists and artwork. Regarding the orientation of her links page; she has very functional and very simply organized page of bullet points and headlines. This is similar to the way that I myself organized my own website because I always considered bullet points, although simple, are the best way to organize listed items. The fact that the bulleted items are indented always help give some separation and "white space" to the overall look and feel of the page.
Regarding the navigation of Hannah's links page on artwork and artistry, although she does have a good variety of types of links (where they go and why to go there), she doesn't have any anchor links to help out the web browser. But then again, since the web page itself isn't exactly super-long, anchor links may not be a necessity.

Regarding content of the links page, Hanna has managed to assemble a diverse collection of art-related information. She organized them neatly: Art Schools, Art Exposure and roles in Art Creation (i.e. cartoonist, historian, graphic designer, &c.); and as a result directs web browsers to a good number of interesting locations. She hasn't filled out the listing of roles in art creation just yet, since there are so very many, but when she does her links page will then become a true resource.

resume critique

A really well designed online résumé that I found belongs to Melinda J. McAdams who works in Journalism at the University of Florida. Her résumé site (http://mindymcadams.com/resume/index.htm) is clearly divided into sections (i.e. Education, Publications, Technologies Mastered, &c.) with a perfectly placed sidebar that navigates to Home, Bio, Contact, Syllabi and Web Sites. Each larger Section, such as Work History, are filled with bold headlines and clear sans-serif fonts with subsections that web browsers can click to learn more about that particular past position. Ms. McAdams' résumé page has swift and easy navigation. And although I'm not particularly fond of purple, she layers and balances the purple(s) so well, it's really quite easy on the eyes.

One web résumé that I found, which wasn't so well designed, belongs to one Douglas Eby of Talent Development Resources (http://talentdevelop.com/resume.html). Although I like the fact that there are sample articles available directly at the top of the résumé page; the articles are not uniformly displayed, are not categorized, and what it all comes down to is that there's simply too many (no web browser is going to sit there and browse through some 40+ full-length articles with zero guidance. Additionally, there are no headings or boldface titles to aid in the browsing experience. Information towards the bottom-half of the web page is bunched up and grouped together in giant wads of words, nothing more and nothing less. (There are sections on previous work experience and on education acquired, but good luck on finding them without any site navigation.)

Chapter 7

The chapter on tables is, strangely enough, probably the most highly anticipated chapter of work for many students because it allows us to better make use of space on our web pages in addition to allow us better organization overall. Tables as objects can be manipulated in a huge variety of ways in comparison to other, more stagnant objects such as images or block text; which in the end, makes the website easier to navigate and easier for the web browser to understand the content therein.

Since tables in basic HTML (or other) operate just like any cell-arrangement in any MS application, I'm quite familiar with how to construct a table both in coding as well as through any control panel. Despite my previous experience though, i loved the fact that the workbook detailed things as specific as "<tr> stands for table row" to things as complicated as informing the designer how to permanently center-align an image on a web page.

The "transparent gif" (graphics interchange format) did throw me off a bit however, and wasn't often able to tell if the feature was actually working or not on Dreamweaver… Despite that, I still managed to grasp some understanding of spacing within a table.

The only thing concerning tables that I didn't find in this chapter concerned a particular alignment function that I have always been curious about. Although it doesn't pertain particularly to tables, I have always wondered if it is possible to vertically-align a table on a web page (in the same way that I am able to horizontally-align a table [i.e. "permanent center"]). The purpose of this would be for splash web pages that do not cover the entire surface area of a web page.

Chapter 6

Chapter Six was a handy chapter to have gone through because it offers some useful information for creating Font Lists, which is something that I have been rather itching to figure out how to operate. Although I wish that the concept of creating Font Lists was placed earlier in the Dreamweaver book, because I consider creating such a list a fundamental aspect of site design; I'll take what I can get.

Unfortunately, this chapter didn't explain how to create paragraph styles or anything of the sort. I don't know if the book is going to tackle this notion later on or if it simply assumes that it's users will pick it up eventually… bit I do think that it is rather annoying attempting to figure out how to format text that continues to vacillate back and forth between styles when you're editing a web page. <Yes, we will get into CSS paragraph styles in chapter 11.>

A Favorite Website: (dot) hackers

Web Address: http://blackwings.net/hack/index.php
Site About: News and information (fan created) website about the video game, animated television series, and otherwise multi-media entertainment project .hack (pronounced as, "dot-hack"). Points about the site:

• Although the website isn't updated very frequently, the site stores news and information on books, video games and other properties related to the franchise as a widely accessible archive.
• The design is simple and has a very easy navigation.
• The nav panel on the left-hand side of the web page is clean and organized.
• Because following eastern and western animation industries is one of my healthiest hobbies, I enjoy the thorough over-analysis the website's owner gives to each subject matter.

"Site Analysis"
09/18/06

Regarding the orientation of Dot Hackers, the website of interest, the premiere theme throughout the website is that of simplicity. Because the website itself is heavier on textual content than that of other interests, the overall look and feel of the website appears rather simple, pale and perhaps even meager altogether. The ultimate lack of diversity throughout the website when it comes to flashy images and an ultimate variance in font type does nevertheless hurt the site's design. The website's purpose is to offer a little bit of information on everything related to the multi-media subject matter; and as a result, suffers due to the site owner's devotion to covering so much data. Although the colorful banner atop the main page (and remains atop the page on any loaded page on Dot Hackers), all other design aspects outside of the cross-through rollover links feature remains relatively scarce.

On site navigation, Dot Hackers makes use of what is most likely the simplest form of internet navigation: the sidebar. Again returning to the largest, continuing and running theme of the website's design, we return to the idea of simplicity. The ultimate purpose and function of the sidebar is to provide web browsers with a recognizable and consistent way of finding relevant material to their (the web browser's) interests. The left-hand sidebar is a site map, essentially; while the right-hand sidebar is filled with a single banner ad (always Amazon.com) as well as with additional site information.

The organization of the left-hand sidebar usefully and very simply arranges the different aspects of the multi-media franchise of which Dot Hackers focuses on. Breaking the site navigation up into sections pertaining to videogames, television series, direct-to-video releases and other features, web browsers are able to visibly find and understand just about everything related to the Dot Hack universe.

Perhaps overlooked by most browsers though is the location of the News Archives, a series of links listed chronologically that catalogue each and every news update that the website owner has posted since the web portal's inception some years back. I'm pretty confident that the News Archive could be better located, seeing as it is currently located only at the bottom of the front/main page. The News Archive contains the majority of the website's content, and ultimately contains a great deal of information that web browsers would not be able to find elsewhere on the Dot Hackers website.

Regarding the quality of the content of the Dot Hackers website, the majority of the website's content lies in the News updates that are listed sporadically. It is also worth mentioning that the highest quality of information published on this website is listed within said News articles, which appear sporadically, as official information is released through corporate announcements, press releases as well as official conference meetings. The News articles are incredibly thorough and are detailed very well for a bi-lingual (Japanese/English) internet site owner.
While I will admit that the quality of the rest of the website, although touching upon every aspect of every other program (characters, story synopses, &c.), is rather generic information that could perhaps be obtained elsewhere; I believe that the largest value of Dot Hackers lies primarily in the News coverage.

Chapter 5

This chapter will probably be one of the most helpful as I continue to (hopefully) build my own site over the course of Web Design. Mapping images, e-mail addresses and web addresses to text and images is indeed relatively simple; but as I mentioned to another student, the beauty of design software is that there's always more than one way to do something.

What I enjoyed the most was creating anchor links… I've always required fellow net friends of mine to do the technical work for me, anchor links included; so it's fun to imagine or to know on some level, exactly what my media partners are engaged in on the other side of the code.

Chapter 4

What I think is probably the most valuable information within Chapter Four has to deal with configuring the page properties. The page properties are the most fundamental and simplest access points on the web designer's interface, and as a result I was pleasantly surprised that it was so easy to use. There weren't any excessive tabs or dials to configure, but only palates and input fields. I have some knowledge and experience when it comes to the organization and management of websites, but every little bit helps.

There isn't much to criticize regarding the fourth chapter, because it's so incredibly basic and straightforward. I however do feel that some of the pages talking about HTML coding were a bit out of place given that we won't be performing any coding whatsoever for a few more chapters.