Web Design Students
Millikin University

Galen Broaddus

Learning Review

Over the course of this semester, I have picked up some useful knowledge pertaining to web design and publishing that has enhanced my abilities for my own personal work, both outside of and related to school. When I entered the class, I partially expected to be ahead of the game with my past work in website design, but there were a lot of elements to this course that I did not anticipate.

One way in which my expectations were somewhat shattered was in the design aspect and Bolter's perspective on hypertext. I did not expect to get much out of the text - and perhaps I got a little less out of it that I should have - but the idea of hypertext as a way of remediating current forms of text while creating new ones and different ways of representing speech and language sort of struck me as intriguing. In considering my final project, especially its continuance beyond the semester, I keep thinking about the ways in which connections are made to other things, and I even had an opportunity to edit the writing of one article to reflect a connection to another piece that was loosely connected in the print version by pointing to a page. Those sorts of associations and networks still make me consider how design should serve the functionality of connectedness, not simply aesthetic appeal (although that is of course quite important).

The group project we did this semester were both very fulfilling and quite difficult, especially since it was a challenge to find times when the whole groups could meet together (because let's face it, we're all college students with insane schedules). This affected some projects more than others and in different ways, and it certainly made me realize how difficult it is to delegate responsibilities on a site that is supposed to be a unified whole. If I am working in CSS and another member of my group is less proficient with it, should we sacrifice the design for something easier? Can you have different people doing images without referring to the "grand design"? These questions were ones that we answered to varying degrees of success, and I certainly learned a good deal about the need to split up tasks.

I did feel, however, like I had some skills to share with my classmates, especially with CSS (since that seemed to be the thing I got best this semester). I felt very comfortable taking a leadership role in certain situations where I could help guide other students through difficulties with some design plans, and we were often able to talk through suggestions to see what the best objective options might be.

As a whole, I was very grateful for the course's use of Dreamweaver, a program that I had heard of but never worked with previously. I learned quite a bit of my knowledge from the perspective of coder, and while that still works best for me, it is comforting to have a WYSIWYG editor that can help in the process without having to use the save-refresh-repeat method to see designs in action. Dreamweaver also has so many tools at the designer's disposals to create different media, so much that I didn't even really get to dig into all the different avenues. Perhaps in my future web work, I will be able to take the knowledge gleaned from this course and use it to continue coordinating the updating and future redesign of the Dec Online, utilizing skills and knowledge of team dynamics with web design to produce quality designs that will fulfill the tradition presented in this course.

Hands On Training Tutorial Responses

Chapter 13

xxxxx

Magazine Case Review

Mayfly Case: Meredith Monti, Galen Broaddus, Jim Butts

URL: http://students.millikin.edu/~jbutts/en301/mayfly/

While designing our website, we decided on a simple layout. Little color and lots of space on each page was a way of mirroring the general way haiku are presented. We did not want to distract from the general purpose of the page with too many images and colors. We decided on a consistent theme for each page using the same layout.

We also tried to do our work efficiently utilizing a common CSS style sheet and layout out elements with that instead of tables. We used some of the artist’s cover work on our pages for accents and backgrounds. We wanted these images to be simple so that they would not distract from the Haiku; therefore, picked one that would act as a sort of border, and we added a bit of color to draw in the viewer a little more.

We added navigation to the left side of the page and labeled things clearly. We tried to work within a page that would not necessitate scrolling on most monitors in order to continue our theme of simplicity. On our recent issues page we are using images from the past three Mayfly magazines so that viewers can see recent covers and cover Haiku.

We decided not to show archives of past work for two reasons. We did not want to give the viewer everything; after all, it would be nice to sell some back issues. Also, we wanted the site to feature only the necessary information in order to keep it short and simple. To showcase the artist Lidia Rozmus, we took her chop and used it as the link to the page with her bio. While “hidden” links like this aren’t always a great idea, since people don’t always find them, we thought it would work in our case since the site’s layout is minimal, and viewers would likely look around for other things to click on. We also created a simple introduction page that we feel balances nicely between simplicity and abstraction.

Chapter CSS

xxxxx

Chapter 10

Chapter 10 was actually quite different for me, since I have used rollovers before but not quite so simply. In the past, I had to search out specific scripts that would do the switching, but Dreamweaver makes that much more simple. I also liked the multiple image swapping and may try to use that in the future for the dynamic effect. In fact, the dynamic effects this chapter displays are incredibly helpful for moving from a site that may be aesthetically pleasing but still somewhat boring and uninteractive to a site that is functional as well as aesthetic.

James Butts resume

I reviewed Jim Butts' web resume, and I was fairly impressed with the format. The design is minimalist, which suits a resume as we think of it in print. The image at the top is an interesting choice; it appears to have been created from a screenshot of the beginning of the page's code (you can clearly see meta tags). I have mixed feelings about the way he used Javascript to make collapsible categories; whereas I think it would display his computer knowledge quite well, it also requires too much interaction with the page.

If the page opened uncollapsed, then I think this might be more effective, especially since the objective is hidden, something that potential employers would want to see right up front. Other than that, the resume accomplishes exactly what it needs to in both content and design.

Chapter 8

Chapter 8 was by far the tutorial with the most new information for me; I have never worked with layers (other than CSS) before and certainly not with going between layers and tables, so that was a bit disorienting (but not badly). I also liked the layout view and its functionality with tables; although I think I still prefer CSS for its convenience as a template (using an external stylesheet), I wouldn't mind using the layout view to at least orient the areas of the page before converting them to CSS. I enjoyed this chapter immensely.

Chapter 7

Chapter 7 had a lot of useful exercises for tables, especially the "rounded" tables at the end. I am not sure if I would want tables <i>that</i> rounded for a site, but it would be a good technique to use more subtly (i.e. with less curvature at the corners. I also had not considered importing tables, but some web clients might have tables of information already created that could be imported into a table on the site. I'm also not sure about their take towards putting several images together to make one menu bar; I think I would prefer using one longer image and utilizing an image map, but that's just my personal preference.

resume critique

I found a resume (at http://www.tnellen.com/ted/) whose overall style I liked. Although the background seems a bit tedious and clichéd for the web, it has the design of a resume - header-style introduction at top, sections below for various categories of qualification. These categories are linked by anchors in the header section as well. One thing that would work more effectively if clearer are the links back to the top anchor; they are signified by an image of a up arrow with a white background that fades too well into the page background. Overall, a nice design, even if a bit amateurish.

The one I liked less was at http://users.dickinson.edu/~dempsey/vita.html; the design appealed to me more for its simple aesthetic (black text on white background), but there is no semblance of navigation and very little orientation in the header other than the author's name, city and state, and E-mail addresses. Since the layout is similar to the first, navigation tools like anchors would have really helped to make this resume a good one.

James Butts' bookmarks case

I am analyzing James Butts' bookmarks case, and it is clear initially that he has some experience with web publishing. The page is built using CSS in tables, which makes everything look very clean. I also like the use of a background image, which is created so that it blends with the color of the right side of the page. The image helps draw one's attention to the left of the page, but the content in the center of the page still stands out enough against the different background color.

Navigation is relatively simple, especially since the page is not long and does not require much scrolling. James has put links for each of the four categories at the top of the page, which are anchored to the table for each. In the bottom right hand corner of each table, he has another link anchored to the top (although it is not underlined and could possibly be missed if you weren't familiar with the “back to top” convention). Another technique James used is to make each of his links open in a new window instead of in the current. This is sort of a preference to the web designer, since it is a double-edged sword: if you make links open in the same window, users viewing your site are drawn away from it and have to hit Back to return; if you make links open in a new window, the user is forced to deal with new windows that can sometimes hinder navigation on their screen. In general, I think this is a good technique for what James is doing.

The content is also quite good; with each link, James has given a short description of what the site is about, most being related to a gaming console/handheld or developer. One thing that James did not do is to put content before the links to explain the page, and this may be under the assumption that the content is clear enough without having to explain it to anyone who is likely interested. The information is thorough and authoritative.

Chapter 6

Chapter 6 was relatively easy, since I have worked with font faces and alignment, as well as lists. I had not seen definition lists used before, so that was interesting to pick up. I also had not ever worked with Flash text, which seems like an incredibly simple way to circumvent the font issues and to create mouseovers (although it has not always worked well for me as links for some reason).

Website: http://plato.stanford.edu/contents.html
The site is a simple, clean design with a sidebar that makes navigation on the site much easier and therefore helps the site fulfill its purpose for browsing through entries.

The website I am going to analyze is the Stanford Encyclopedia of Philosophy, found at http://plato.stanford.edu, which is a compendium of articles on topics related to philosophy. Although this sites are basically identical for the different mirror sites, I am focusing on the site hosted at Stanford.

The orientation of the site for the home page (..contents.html) is notably left-aligned; it is fixed around a menu attached to the left margin, with several links for navigation. It also has a top bar with an image that announces the title of the site and also serves as a link back to the main index for the site. Interestingly, the contents page also contains a great deal of blank space to the right of the table of contents, save for the horizontal bars that separate the different alphabetic sections. In addition, the menu on the left side is in a separate frame, which allows the right side with the table of contents to be scrolled while leaving the menu frame stationary.

Navigation as such is very simple with this site. As just noted, the menu is always visible because of its stationary frame, so the links are always available for navigation, even while browsing content. The most important links on the content page are links to anchors at various points on the page, corresponding to the alphabetic sections of the page, so that the Web user can easily jump to a specific letter if there is a topic he or she would like to peruse for more information. In the same respect, many of the listings in the table of contents actually correspond to different entries, and so the table of contents uses anchors to take the user directly to the link for that entry (for instance, clicking on the “Giles of Rome” link under Aegidius Romanus will take you to the entry for Giles of Rome by Roberto Lambertini). There is also a search form on the menu for both the contents page and the article pages, which searches for the appropriate words or phrases in the content of the articles.

The content is generally quite good; the articles are of course thorough on their respective subjects, and there is quite a bit of information on the site. My primary complaint (insofar as I have one) is that there are quite a few entries that have no links and presumably no article with which to link. This is sort of a double-edged sword in that it simultaneously frustrates the reader who might want to view that article and keeps them in anticipation, since such a compendium is always a work in progress. Of course, this is a necessary flaw for such a work, so I will not fault the site for it.

Chapter 4 & 5

I have completed chapters 4 and 5, and I had encountered most of the information before. The one thing that I had not worked with that I have always wanted to learn is the image map feature, and I had simply never tried to work with the HTML to do it manually. Dreamweaver makes it very simple to use. I also like that Dreamweaver will actually read certain colors and convert them into hex format for you; it's a pain having to calculate the hex coding from the R-G-B output by hand! Having worked with FrontPage before this, DW is definitely a huge step up.