My Weblog

Karen Geis
Instructional Graphics
LIS5315.721C08
Dr. Simon

I started this course with no experience in developing web sites. I did not have any web design software on my home computer. I initially thought I’d use one of the free Web design sites but changed to Frontpage. I used the computers at the Sarasota USF campus. With a great tutorial from Alex, in our class, and a microsoft tutorial, I was able to get started with page layout, color combinations and content. I thought it was important to iron out the content before going to far with the site’s look.
I collect books about Florida and love American and Florida History. I have a B.A. in History from USF. I thought the Florida Booklist could be a great educational site. These books are loaded with information about Florida and some interesting facts would be helpful as well. I have seem many sites with top or left-sided navigation bars, so I thought this was perfect time to use a right-sided navigation bar. Along with my finally color combination choice of tan or light yellow for sand and blue for water and that right-sided navigation bar, I hope it all conveyed the look of the State of Florida. The tan area to the right looking very much like the shape of Florida with the site’s content floating out in the blue Gulf of Mexico.
My site is very simple! No animated dancing manatees or scary pirate ships moving across the site. Just a bit of clip-art which I hoped fit well with the whole look. It’s not like me to play it this safe, but my lack of time (summer semester) and experience made me feel like keeping it simple. I felt as if trying something too difficult could mess up the whole site, and there was not enough time for that. Much praise goes out to my fellow classmates for daring to use all those fancy gadgets!!!
I normally would have learned the software first and then set-out to do a project like this. When I first use Power Point or Excel, I quickly found some wonderful courses at my local community college. It took all the struggle out of learning the software. Yes, you are always learning with all software but it’s nice to comfortable up front.
Some 0f my problems were with linking pages together, making sure graphics/clip-art was compatable with different browsers and an issue with loading the site to my web space. Alex helped me work through these technical problem. There was a issue with Mozilla and microsoft clip-art, and I had too many index pages on my web space.
I learned a lot in this class. I liked developing the look of the site most. The colors and where everything was positioned seemed so important to me. The gadgets would be a secondary issue for me even if I was more experienced.

Flashvista has a pleasant blue color around the main site content. It is a combination of search engine and directory for flash sites and resources. Navigation leads to tutorials, news, templates, games, books and the newest cool site.
Flash Tutorials has a great color combination of blue and pink. The site contains many tutorials, resources and a forum. This site as well as several other sites this week have an area to donate to the site.
Sitepal-Flash Avatar is a site that customizes speaking avatars for websites. The avatar is an animated person that delivers any kind of message. The site has many demo’s, all its features and pricing. I really liked the photograph converter for making an avatar of the sites developer.
Swift has a blue top navigation menu and lettering. I know I said this early on in the semester, but blue is a very popular color in web sites. The site promotes flash software for MAC andf Windows. It contains product information, tutorials, resources, forums and downloads. The inspiration has award winning site and many examples of incredible animated graphics. The butterfly was great.
Swish is more software for flash with all its product information, templates, tutorials, a forum and many links for resources.
Hotscripts is a well laid out site with a industrial look to it. A category listing, new listings, most popular, top rated, a discussion area, stats and many links.
Creating MP3’s and streaming audio has links, web site and flash templates, articles archvies, forum, internet and webmaster tools and a place to submit articles.
Audacity is free sound editing software. It has links, a forum, downloads, job listings, feedback area and a place to donate to the site. All available in a wide variety of languages.
Musicovery Internet Radio has incredible graphics!!
Amaya has templates, FAQ’s, users and developers sections, publications and features. It did not have a pleasing color combination for the navigation area.
Trellian is software for creating free web pages. It has downloads, an awards section, testimonials, FAQ’s, tips and a printable manual for the software.
Seamonkey has a great blue banner and logo. The site has downloads, news, support, features, add-ons, merchandise and an area to donate to the site.
Free text editors is a free HTML and web editor. WYSIWYG web editor and site builder with many article links, tutorials, and an area for programming and webmasters. A nice color combination of blue and yellow. The yelow is on a very prominent navigation bar.

Libraryspot.com Image Resources has a very dramatic bright yellow left-sided navigation bar. There are many links to various types of photographs. Google, Alta Vista, Yahoo, newspapers, Eastman Kodak, Smithsonian, National Geographic and American Memory(Library of Congress) are all listed and show new and historic photographs. The historic photographs on National Geographic, Smithsonian, Eastman Kodak and American memory are all incredible.
Readwrite Web is an interesting site with a vast amount of information. It’s well laid out with clearly defined categories.
Footnote.com (Historical Image Resources) is another great site for viewing historical photographs. I liked the Browse by Historical Eras section. The pages unfolded to view photographs. The user can choose a time period and the different categories within each time period.
Adobe Photoshop site has all the software’s features, tutorials, photoshop groups, events and seminars, FAQ’s and purchase information.
Adobe Fireworks has an interesting gray textured background. The site also has all the product features, FAQ’s seminar listings and a nice features tour.
Gimp describe all its features and has downloads for its image editing software. Gimpshop has numerous tutorials for every level of user. Examples include beginner, intermediate, expert, photo editing and the web.

Chapter 15 in Creating Web sites discusses fancy buttons and menus. Specialized buttons and collapsible menus can help make any site stand out. Graphical buttons or image buttons can be used to link to additional pages and information. Dymanic or roll-over buttons change color when the mouse moves over it. Menus are a desired feature as a alternative to buttons. Collapsible menus appears when a group heading is moved over with the mouse and clicking on the heading gives the expanded results.
Chapter 16 talks about audio and video. Background music, animation and full movies or movie clips are all multimedia features. These features should be used in a constructive way as they can annoy to the site’s users. Flashing colors, loud background music and unexpected pop-ups can distract the user. Linking and embedding are ways to intergrate audio and video into a web site. Linked multimedia features resides alongside HTML and image files on the site. Embedded multimedia will likely required special software on your web server to be viewed. There are several multimedia files. Examples are synthesized music which stores small, low quality music files and digital audio stores recorded audio of better quality. Digital video can be used to show full video but must be compressed with editing software which can diminish quality. Animated Gif’s creates moving cartoons and spinning text which are normally small in file size, easy to create and widely supported by many browsers. Flash is create using shapes rather than a combination of video clips. It is a excellent way to create animated logos and fancy introduction screens. Streaming audio or video clips allows the site to show large files by only downloading small sections of the audio or video clip until the entire file is complete.

I love typography site has a simple design with a white background and black lettering. It is easy to navigate and has an extensive list of articles about typography.
Typographica is another site with a simple design. The site displays many different fonts that are very unique.
Microsoft Typography is an excellent source of information with the history and development of typographics, links, articles, events and free tools. The variation of color in the banner is interesting.
ABC Typography allows the user the select different types of fonts which gives multiple examples and a history of that font. The different categories in the navigation bar matches the pages in color.
Alistapart: Typography has a simple design and extensive list of articles about code, content, culture, design and user science.
Typographic is divided nicely into categories like evolution, timeline, anatomy, glossary and a bibliography with book and web resources.
Design Snips has a great logo and another simple layout. The site also give an extensive list of design elements with excellent examples. Lots of really advanced designs.
All these site have a very simple but well laid out designs. They highlight the content and not fancy design.

Pricinples of Beautiful Web Design chapter 5 is about imagery. Photographs and illustration act to draw in the user and help them move around the site. It makes the site look more appealing. Photographs can be taken by the site’s creator, obtained from stock photographic sites or purchased from a professional photographer. Photoshop can be used to enhance the look of the photograph by cropping it and adjusting the color.
Chapter 13 in Creating Web Sites talks about how web sites can make money. Instead of creating the physical store, an e-commerce site can be a cheaper alternative. The visitors can view the site products and then purchases whatever they like. Selling products is the best way to make money on the web but sites can also take donations, show advertisements or take part in a affiliate program which refers users to other sites for a commission. Google and Amazon both have affiliated programs for users.
Chapter 14 discusses JavaScript and DHTML. JavaScript enhances HTML pages with all its interactive features. It works well for pop-up windows, marquee style scrolling text and buttons that light up. Google and Amazon use server-side applications. The advanced software that powers these giants search massive databases for the users requested information. Client-side application are less powerful programs that work within normal HTML. Dymanic HTML writes code and controls the look and location of all the HTML elements.

Urban Dirty had a black background with white lettering. This is very dramatic! It had a simple navigation bar that enables the user to view free textured photos of surfaces. An extensive collections of photos. This site linked to Grunge Texture. This site has a great color scheme. It fits well with the site. It is neat how the content part of the site is on what appears to be a piece of paper. Though it’s nicely set-up, Texture King was more commercial looking than the other texture sites. It sells shirts to advertize the site. Deviant Art Textures has a pleasing gray scheme which in a way does not match the dramtic mature of the vast photo collection. Best Texture Flickr Group has a very simple layout with an all white background and blue and pink lettering. The site is filled with incredible photos. Photoshop Tutorial on Creating Textures has a dark brown background a tan colored background for the content area and red and black lettering. The site contains blog designs in various categories. 2007 Web Design Trends has numerous examples of web sites with incredible texture. Some example are minimal design and dark backgrounds.

Chapter 4 in Principles of Beautiful Web Design discusses typography or communication. The site communicates with its users through the use of type or lettering. This means fonts. Much like color, fonts can convey different moods and meanings. Certain fonts go with certain sites. Some fonts are formal and some are not. Some fonts are safe to use and are compatible with various systems, and they are Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Times New Roman and Verdana. Anatomy of type describes how letters are place on an imaginery line that we write on. This can be typed or handwritten. Letters made into word can be adjusted both horizontally and vertically to enhance readablity.
Creating Web Sites chapter 11 talks about attacking visitors. The site must be completed first before the creator should start looking for visitors. The creator needs to look for similar or related sites and start up reciprocal link agreement. The site should be connected to internet directories and search engines. To keep visitor coming back, the site should be updated regular and this means weekly or monthly. It is also important to know who’s visiting your site.
Chapter 12 talks about how a site’s visitors can talk to the site/creator and each other. Through discussion boards and chat rooms, visitors can communication their feelings. Updates should be communicated before after any changes are made. Visitor email, forums and groups are all vital links to the site. Feedback from users is an important tool.

Colorsontheweb.com was a great site for defining color usage for web sites. The site used color well to define differenet areas on the site. It also had a double menu near the top of the page. It provides lots of information about color on the site as well as many links to outside sources of information. The site and Principles of Beautiful Web Design work well together to provide a wide range of information about color. The Color Contrast Analyer was a handy tool for viewing color combinations and how different color lettering appears on a certain background. Also, I liked the helpful hints about which color ranges will work best on the web.

Texture is the topic of chapter 3, in Principles of Beautiful Web Design. Texture give the design or specific objects on the site a certain “feel or appearance.” Points make up all the graphic items on the site and lines can convey movement. A lines thickness adds character and can separate different areas of the site and create borders with varied colors and patterns like stripes. Light, shadows and where different objects on location all give graphics and text boxes added texture.
Chapter 9 in Creating Web Site discusses invisible tables. These table help align text, pictures and headings. Cell spans allows a specific cell to enlarge to encompass multiple columns or rows. Borders separate content on the site but should not be used for every area and color can also work well to divide up different areas.
Chapter 10 in Creating Web Sites discusses frames. Frames allows the designer to show multiple web pages in the same browser. Frame set lets the designer divide up browser window into specific rows and columns. The scolling feature appears when content of a page is larger than the size of the frame.