…My website is coming along! You can see my website has improved immensely since the last time we met in class. Actually, the revisions should be rather minor; I plan to correct the following:

1. Fix the links for grade level 3-5 and the headings on four of the pages (e.g. Historical Overviews, Lesson Plans, Educational Activities, and Books & Bibliographies). They all connect to the homepage now.
2. Fix the CSS coding in the footer (for some reason it looks different in Firefox). It looks fine on IE.
3. Trying to decide whether to include the external links on the homepage. It’s not required as part of my project scope for this assignment, but may do so anyway. Any thoughts one way or another?

I appreciate comments and suggestions!

Just checking in with everyone…thanks for your comments!

Since the HTML/CSS Mock-ups Presentations on Monday I have been “web-in along” with my website revisions, based on the your comments and my own. I have been working on the header image, the homepage photographs, and other doo-dads in need of correction. No major hold-ups so far. But with the end of the semester, and a paper to write and I am trying to do a little bit each day. This includes required HTML and CSS coding for drop-down menus, proper font colors, font sizes, and page alignment.

Well, I have got to get back to the “drawing board”, as they say.

Well, I would have to say that this assignment has been the most challenging for me! Although I have made some headway using HTML and CSS for my three mock-ups, I still have a long way to go.  And this is a good time to mention that I have basically started from scratch when it comes to my website. I am no longer using the Autumn theme in Omeka, and writing the codes without the benefit of a “theme template.” Jeremy and I decided this would be the best option considering my evolving website design.

Looking at my HTML and CSS mock-up pages you can see that I have inserted all of my original layout components, but having difficulty positioning the search box and navigation links on top to span the entire homepage; in addition to figuring out the proper spacing and dimensions as per my “revised” website concept. Also, I haven’t been able to figure out how to get the Colonial Architecture title situated on the background image for each page. Please keep in mind that because of the spacing and the lack of alignment at this point, there is a lot of empty space and random placement of text . I plan to change the blue and purple (automatic colors that I do not want) hyperlinks to match the other existing colors as specified in my wireframe mock-ups; move the (3) photographs over to the right side of athe page along with the text; add a sidebar to the Native American page with the state-recognized tribes and two other ethnic groups; and add a horizontal band of color (gold to match navigation links) to the footer and move  the footer text to the right. I also would like to add a print capability to all of the “Resources” pages.

As I proceeded with my design, I decided to make a few minor changes on my pages that I believe will improve overall website navigation for a more user-freindly approach to teachers, as follows; 1) changed the top navigation links (historical overviews and glossaries, lesson plans, etc.) to reflect the educational resources on architecture; 2) provided the website specific information links (copyright, tools, etc. in the footer only; 3) removed the descriptive paragraphs/text on the three photographs; 4) removed additional lines to make the page less restrictive and confined; 4) eliminated “browse photos” in the navigation links because I have  “primary sources” that will cover photos, maps, artifacts, etc. and it would be redundant.

To say the least, I still have alot of work to do for the final project to resolve the above mentioned issues, as well as fine -tuning my CSS page. I am open to any helpful hints!

First of all, I want to thank everyone for their comments last week, and blog responses this week. And a special thanks to Maureen and Jeremy!

I think perhaps I confused quite a few people when I decided to show the “blues” and “reds” in my Wireframes. They were mainly for show (indicating user selection) and to remind me what I needed to do when I put this all together using CSS and HTML.  This includes the pop-up menus for the different grade levels; I removed them as well. For my revised website design, see cawebsitedesignrationale22

So I have removed the “blues” and “reds” and decided to use underlines to highlight user selections instead. Also, I moved the TeachArch logo (replaced the blue color with brown) down to the bottom of the homepage, and included navigation functions at the top, as per suggestions during last week’s presentations. Another “biggie” was to remove all of the lines from the navigation functions on the left side of the homepage that made it look too busy.

As a result of the revisions mentioned above, I also had to tweek the layouts for the show page and browse pages in order to maintain consistentcy. And I believe that by enlarging the Colonial Architecture in Virginia, 1607-1783 Header and background image (by adding an additional historical photo) creates more emphasis on the architecture and additional interest to the site.

Hopefully, with less colors and less lines, the website is overall more cohesive and visually-appealing.Any other comments are welcome!

It’s interesting with this week’s readings (and some of the other readings during the course of this semester) taking me back to issues like accessibility, sustainability, and visual organization that were (still are) commonly addressed in the architecture field. It also reminds me of statements made by both Dr. Cohen and Dr. Rosenzweig about the numerous correlations between new media and architecture.

For example, the book Dive Into Accessibility delves into subjects such as design priniciples, disabilities, and audience. Each one of these elements are integral to the execution of any successful design whether it be for a space or website. Another book, Building Accessible Websites, addresses similar issues, in addition to certification and testing of websites, copyright laws, language codes, multimedia uses, and type and colors specifically as it relates to people with color-blindness. Of course, I have to mention the author’s healthy discussions on CSS and HTML (but I prefer skipping over it for the sake of my own lack of mental “accessibility” to complete understanding of them), but I will spare us all!

The two articles from WebAim, “Designing for Screen Reader Compatibility” and “Creating Accessible Javascript” are quite different in their content. Nonetheless, there are “tidbits” to glean from each one. For instance, the importance of screen readers to blind people is a good point. In the first article, the author states, “…without them they would need to rely on other individuals to read the content out loud to them.” And even though I have had to design thousands of spaces considering ADA codes (design commerical spaces  for people with disabilities according to laws), honestly I have not thought about the connection to new media until I read these books and articles. In the second article, the author not only clearly defines the differences between Javascript, HTML, Java, and other applications, but emphasizes Javascript as a platform to “increase accessibility” to those with disabilities as well as the common reader.

I found these books and articles particularly insightful, and challenged my own thinking when it comes to designing websites accessible to all no matter the cicumstance or situation. It certainly encourages a new way of thinking outside the box.

Well, here it is…my first attempt at the cawebsitedesignrationale. Although the assignment called for 4 pages of color mock-ups using my Wireframes as the foundation, I added an extra wireframe/mock-up called “Browse Page 1.” It helped me to take the conceptualization stage of my website design a bit further. By including this additional page it gave me a “better picture” of my overall layout and design, as well as providing the visual organization I needed to go forward.

In order to complete the Design Rationale, I put a lot of time and effort into research on the Internet locating several types of Colonial font types and paint colors, hex values, and logo types. In addition, I found colonial wallcovering samples, borders, and historic photographs as possible options in my website design.  However, I decided that the rich wallocverings used at Colonial Williamsburg and other historical sites would send the “wrong message” when it comes to telling the story of diverse ethinic groups, so I chose to a more “humble” approach to setting the tone for my historically-accurate Colonial Website. As a result, I used Photoshop to transform a black and white photo and used it as a background image in my title box at the top of each website page.  It took some playing around to get the right look. I may still have to work on it a bit in order to see the two structures behind the website title. I also created my own logo, TeachArch, using Photoshop for the rendering and touch-ups. My overall goal was to create a website that is teacher-friendly, easily navigatable, visually-appealing, and balanced in presenting historically-accurate information on the different types of ethnic architecture in Virginia during the Colonial period.

I look forward to your comments!

Well, this week’s been a rough one for me with deadlines at work, battling a sinus infection, and recent news that my mother, sister, and brother-in-law have all been diagnosed with Celiac disease all in the same week. I have been trying to get my assignment done; googling, photoshopping, powerpointing…lots of “ings” going on!

…While working on my color mock-ups and doing my own research, I came across a couple more websites that have FABULOUS and FUN fonts for just about everything, but they cost money. One site is called FontCraft and the other is called Myfonts. Just thought I would pass them along for anyone who’s looking to enhance their theme/layout.

Just thought I would pass along some of the websites where I found different logos/logotypes for inspiration, as follows:

http://www.logomaid.com/

http://www.allfreelogo.com/

http://www.gmkfreelogos.com/

This week I have been experimenting with hand sketched logos, see teacharch-logo-samples2,  as well as historically-accurate mount-vernon-colonial-paint-colors , colonial-fonts , and wallcoverings-from-colonial-williamsburg for my website project. Over the last two weeks I have been “doodling” and thinking about a logo called TeachArch for my website,on top of the fonts and colors for my website, Colonial Architecture in Virginia, 1607-1783.  Although I have spent more time on the design of my actual logo rather than the “website title,” I have made progress with both. I went online and searched for  “colonial fonts” and “colonial paint colors” at some familiar websites, such as Colonial Williamsburg and Mount Vernon. I discovered that both organizations had employed specialty companies with various tasks such as the development of  interior paints, wallcoverings, borders, etc. that reflected materials used during the 17th and 18th centuries. As a result I came up with several inspirational options to consider for my own website.

Along with our class instruction on Photoshop last week as well as suggestions and tutorials from this week’s readings, I have a better grasp of my next steps. Katrin Eismann’s book, Photoshop, is quite easy to follow and engaging even though she makes it clear from the start that learning Photoshop will take “time, curiosity, and patience” (3).  I would agree…especially big doses of time and patience! And I found Paula Petrik’s article, Scholarship on the Web, helpful and informative in her matter-of-fact/to the point approach to techniques and methods. Petrik has a way to take the most complex idea and make it so simple for the rest of us. I found the information on matting engravings and line art particularly intriguing, and even briefly thought about including line art on my own website. But considering my colonial theme, I think for now I will stick with finding the right logo, fonts, and colors so I can present a historically-accurate design and cohesive layout.

It’s hard to believe, but another week has gone by and we have another assignment due. This week it’s the Sitemap and (3) Wireframes. Even though this assignment was time-consuming, I enjoyed it! Since I tend to be very detail-oriented in general, I took my time to think about my overall methodology by drawing up several pencil-drawn drafts first. After I worked out all of the nitty-gritty details, I then committed my drafts to computer-generated drawings as seen in the attached PDF files, colonial-architecture-in-va-wireframes and sitemap .

My approach was to be certain that my Sitemap and Wireframes were explicit; concise and succinct information that could be easily understood. I even had a friend look at them in order to provide constructive criticism. As a result, I made a few revisions. My goal was not only to consider all of the important details associated with creating a successful website design (like we have read about and discussed in class), but as a type of checklist or inventory. 

For example, in my Sitemap I used a hierachal approach to the mapping of my website content and the relationship between the homepage, hyperlinks (internal and external), navigation/search functions, and other pages. Using varying sizes of rectangles, squares, and ovals, as well as lines, blue arrows and black arrows I depicted the relationships between all of the website elements. I considered the homepage as “primary” and chose to locate a highlighted rectangle in the center of the page to convey its importance. The squares and ovals indicated are “secondary” mapping information but important nonetheless.  The “key” is specific to the mapping information provided. I also included a note to emphasize the fact that the Native Americans would be the main focus in my final project.

Using the Sitemap as a reference for my Wireframes, I generated three total: 1) Homepage; 2) Show Page; 3) Browse Page – each one includes the elements presented in the Sitemap and concentrates on specific elements for this exercise. My approach was to use a grid for a basis for my layouts with the intent of making the content readible, consistent, functional, navigable, and aesthetically-pleasing. As shown, boxes indicate the desired content and accompanying notes (with descriptions) to the side ensure that all material is covered and/or if vital information is missing. This exercise helped me to conceptualize my updated website design, specifically in using Omeka for my final project. There’s definitely room for improvement, but I feel like I covered “most” of the bases. If you have any suggestions, I am open to them!