Here’s the link to my first Hypertext Website Project
Topic and Purpose of Website
My first website is a prototype for a hypothetical first-year composition class called Practical Writing. I envision this class as a useful addition to a Community College two-year technical or associate degree program where good written communication skills rather than academic writing are stressed. My audience is the approximately fifty percent of Community College students, according to CollegeBoard.org who do not plan to transfer to a four-year college, but still need good, transferable writing skills. I also plan to use many of the design ideas I learned during this process to create an actual class website for an independent study I’ll be doing this summer.
Design and Development Process (C.R.A.P.)
I love color, and lots of it. This, in combination with a naturally eclectic design sense, was bound to lead to many hours of site editing. I realized that I had crossed the line of good design practices when, prior to reading the C.R.A.P. articles (even though I had removed my brightly colored home page image), I received the following comments from my fellow classmates; “Even though the color scheme is one you don’t see often (black/red & blue/yellow), it works surprisingly well.” Another classmate wrote, “The red on you project is very bold.” I took these suggestions as kindly hedged constructive criticisms, and scrapped my original brightly colored Home page image for a more “subtle” bright red on white image. Now my Home Page had a huge amount of white space for contrast, but it wasn’t an audience grabber. So, after weeks of playing with the new image, I switched it back to my original choice; I’m happy I did too. I chose to create contrast on my homepage by using color mainly as a frame around large areas of white space. I think my choice of bright contrast exudes energy, creativity, and warmth― just the feeling I want for my class. I like how the bright image draws attention to the count-down calendar gadget too. I realized that color could be overwhelming though if it distracted from my focal points, so I opted for changing most of my script to black, using font size and bold lettering to draw attention where needed. In my sidebar, I used a dark shade of gray for the text so as not to compete with the black text of my page content, and I kept a touch of red too. Another eye-catching move I made was to use the turquoise color of my background for all my hyperlinks. All title fonts on the site are Verdana (except for the main site font which is Asset), and all text font is Trebuchet.
The page I had the most trouble with was the Assignment page. There was a lot of information that I wanted to appear here. One classmate confirmed what I already suspected, that “on [my] “Assignments” page, some of the assignment titles are gray and are the links, while the ones that are not links are black. Visually, it is distracting.” Another classmate mentioned “that the font size on the Assignments page is a bit large to read and is inconsistent with the rest of the site.” I really cleaned up this page (and standardized the fonts overall on the site). I used a simple image of a blank notebook, a small font size for the text, red and bold for the main instructions, gray for all assignments, and underline for all links, which created the proper hierarchy of the information and assignments, as well as providing good repetition of design element with the other pages. I used a line to separate each assignment. Only the first two links are operable at this time.
The Instructor’s Page uses my photo to connect (proximity) the two personal aspects of this page together; How to Contact Me and About Me(Do you like how I went all the way to France with my turquoise shirt just to create repetition of color on my website?) This page also serves another practical purpose. Students will also use this page to make appointments with me for conferences on a shared calendar (not the one that’s there now). This is the only page where I used a totally different font (Normal in italics) to make a special point― to mind my privacy when calling my home phone.
The Class Newsletter page is a template for a monthly student-edited project utilizing peer-review as its means of success. Students will write original newspaper-style articles, ads, haikus, and profiles of people in the news here on a rotating basis as part of their course grade. I hope that this newsletter would work entirely as a peer reviewed project. I aligned the image slightly outside the page boundary to suggest its impermanence as part of the Class Newsletter page.
The Student Page contains a limited amount of pertinent resources to ensure success in the course. My rational is that students will be more likely to use resources if there are only a few of them. Because of the limited amount of text on the page, I experimented with an asymmetrical balance layout that I learned in Basics of Design: layout & typography for beginners to create flow around the page. Rather than use a stock image on this page, I used a Wordle of the information on the page. Wordles might be a fun resource for students to use as a way of drawing important points from class readings. This, for instance, is a Wordle of the first portion of the article “Augmenting Human Intellect: A Conceptual Framework” by Douglas Engelbart from our class textbook.
Habits of Mind, one of the subpages to the Student Page, is just the draft from the WPA Council. Ideally, this page will be constructed to link out to explanations and resources for specific habits of mind that are pertinent to the student. The class syllabus is the second subpage of the Student Page. Rather than make this a primary page, I note at the top of the page that any changes to the syllabus will be in the Announcements section of the Home Page.
I began the learning process for this project feeling very insecure and by taking notes on various tutorials.
- YouTube video
- Two student Webinars
- Basics of Design: layout & typography for beginners. 2nd ed.
In the end though, I dove in, made mistakes, resolved numerous hopelessly unorganized elements, and emerged with an acceptable, finished product. Oddly enough, the finished product looks nothing like I wrote about in my first blog about the project. My “calming colors” evolved into a blaze of vibrancy. My audience changed too, from “undergraduate writing students learning about multimedia text construction” to community college non-transfer students learning practical written communication skills. What I learned is that I’m by nature a changeable (flexible), persistent, and independent person. These characteristics generally serve me well, but they often lead me to take a rougher road than necessary and that sometimes leads me to dead ends. In the future, I will benefit from taking a more systematic approach, fleshing out my outline better, and referring back to the many things I learned this time around. I would like to learn how to lay out grids more effectively to “both divide and unite the page” (Austin and Doust 65).
Various authors describe and expand on the C.R.A.P. guidelines. New Media Design expands on these guidelines by adding sound and movement to the design process while “[relying] on rules to create a sense of the whole” (Austin and Doust 71). I reflected that self-discipline, structure, or the inevitability of following the rules, is something that evolves as knowledge and experience is acquired and broadened. After some initial wild scurrying about my fragmented site, I started following new rules that create structure in hypertext and found, like Douglas Engelbart, in his article “Augmenting Human Intellect: A Conceptual Framework,” that “when I learned to work with the structures and manipulation processes . . . that I got rather impatient if I had to go back to dealing with . . . books and journals, or other ordinary means of communicating” (Wardrip-Fruin and Montfort 107). My messy process eventually coalesced from a learning experience for me to a product that could contribute to the learning of others (which was Englebart’s goal too). When Theodor H. Nelson broke down the writing process, he translated the needs of writers into a structure too. That structure allowed for movement and “various provisions for change” into “any form and arrangement desired” (137).
Bibliographic Information for Site Links and Learning Resources
Austin, Tricia, and Richard Doust. New Media Design. London: Laurence King, 2004. Print.
Council of Writing Program Administrators (CWPA), National Council of Teachers of English(NCTE), & National Writing Project (NWP). (2011). Framework for success in postsecondary writing. Retrieved from http://wpacouncil.org/framework
Darling, Dr. Charles. Darling’s Guide to Grammar and Writing. Capital Community College Foundation. Web. 11 April 2012. http://grammar.ccc.commnet.edu/grammar/
Graham, Lisa. Basics of Design: layout and typography for beginners. 2nd ed. London: Cengage, 2005. Print.
Old Dominion University’s Academic Skills Unit- http://uc.odu.edu/academicskills/
Old Dominion University’s Perry Library-http://www.lib.odu.edu/
Steves, Rick.Rick Steves: Europe through the Back Door. N.p., Web.11 April 2012. http://www.ricksteves.com/
Tidewater Striders Running Club. http://tidewaterstriders.com/
Wardrip-Fruin, Noah and Nick Montfort, eds. The New Media Reader. Cambridge: MIT Press, 2003. Print.
Engelbart, Douglas. “Augmenting Human Intellect: A Conceptual Framework.” Wardrip-Fruin and Montfort 95-108.
Nelson, Theodor H. “A File Structure for the Complex, the Changing, and the Indeterminate.” Wardrip- Fruin and Montfort 134-145.
Wordle “word clouds”. http://www.wordle.net/
I reviewed these student blogs:
Reading and replying to my classmate’s hypertext project drafts reminded me that although the Twilight Zone episode says we are all alike in ways, we are also very different. I learned so much about creativity and collaboration (even if indirectly). I was glad that my classmates provided such honest and helpful critique on my project, and I tried to be equally helpful. I found that the process of reviewing made me sensitive to how I worded my criticism as to be objective, yet open to the idea that there are many forms of artistic expression. We are each unique.
To improve my own project, I need to make some adjustments to my font sizes in order to be more consistent and choose my focal points more carefully throughout my site. I also need to reassess my choices of color and page arrangement. I realize from my classmate’s sites the benefit of white space for contrast and clarity, but also that how much white space to use is a personal style choice. I think that some of my layout could benefit from clearer delineation.
Susan and Kristopher reviewed my project. I anticipated that I still had work to do and the comments that I received reflected that.
Here’s a basic outline/map for my classroom website:
Here’s the link to my first Hypertext Website Project
Hypertext Project Blog 3
I watched a tutorial I found on FollowMolly.com. This website belongs to Molly Schroeder, a technology integration specialist, a certified teacher, and Google Apps for Edu certified trainer. This is her promotional site, but on the Tech for Teachers page there’s a free YouTube video in the bottom right corner of the page of a webinar that gives detailed instructions and walks you through creating a class web site.
I wanted to just jump in and get my feet wet so I paused the video at each step of the process and took notes. Later I used my notes to begin playing with a test site of my own. As you can see, it was a messy process. After reviewing the CRAP guidelines, I realized that I really needed to just scrap my test site and start over.
I will be using Google Sites to construct my Hypertext Project. I searched “easiest free software for constructing a web site,” and got recommendations for a gazillion soft ware applications. The trouble is that FREE on the internet isn’t always free, and usually involves a trial period that must be canceled or you will be charged. Google Sites seems so easy and convenient in comparison, accessible through my email account.
Although I have blogs on both WordPress and Blogger, I have no experience creating a web site, so I thought it would be helpful to first define some terms:
- A blog– is defined on I’d Rather be Writing as “individually authored mini-magazines or journals where one author (or sometimes a small authoring group) crank out article after article (or entry after entry) usually with a common theme.”
- The same blog site defines a wiki as “a platform for groups to collaborate on an information project, such as documentation, technical specs, or other reference material (e.g., Wikipedia). One author isn’t just cranking out all the information.”
- According to Answers.com, “the difference between a wiki and a web site is that “Web page is a document connected to the World Wide Web and viewable by anyone. But, a wiki is a server program that allows [designated] users to collaborate in forming the content of a Web site.
It’s interesting that authorship is what defines these terms, whereas audience is usually the primary concern of writers.
I will be accessing the software for this project on my home, desktop computer.
Hypertext Project Blog 1
Learning C.R.A.P: Building a Class Website
I will be creating a class website for my hypertext project. My goal is for it to be clean and functional, but also “approachable.” My audience is undergraduate writing students learning about multimedia text construction, so I want to model the C.R.A.P. principles from the very start. I’ll begin right now by incorporating what I learned from watching the C.R.A.P. links into my Hypertext Project blogs. Hopefully, my audience (in this case, you) will notice that my font choice for this blog is my first step to mimic the modeling process I hope to project on my site.
I know that there will be a broad range of technological expertise in my proposed audience; therefore, it’s important that my website feels approachable and inclusive. I would like to accomplish this while projecting my own personal style which I see as naturalistic as well as minimalist. These possibly diverse goals may be a challenge to blend.
For simplicity’s sake, I plan on using a two-column layout with high contrast in calming colors, maybe gold and blue. I would like to find a representative image that connects nature and technology; an image of someone using a laptop in a tree would be cool (and approachable). Has anyone noticed a change in Compfight? Every Creative Commons search I did turned up zero images. I never had this problem until recently. I may try some different image search sites if I keep turning up empty-handed.