Site Reviews - Week 8

http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources
Basically, this wikipedia page is a long list of links to resources and web sites for images. Some of the categories include historical, art, books, logos, postage stamps, culture, religion, computer-generated, and many more.

http://www.libraryspot.com/images.htm
Library Spot provides a list of links gathered specifically for searchers. Their mission states: "We created LibrarySpot.com to break through the information overload of the Web and bring the best library and reference sites together with insightful editorial in one user-friendly spot." These hand-selected sites are easier to wade through than the millions of hits a Google search unearthed.

http://www.readwriteweb.com/
A Web technology news site, there were a lot of interesting articles about current trends, developments and products. My favorite was the Top 10 YouTube videos of all time- the information in the article was interesting, with music artists taking 7 of the 10 slots. I really liked the format and design of the web page- lots to look at without being overwhelming.

http://www.footnote.com/
What an amazing site!! This site has digital images of documents from around the world. Mome than 4.4 million images have been uploaded since the site's inception. The site has a partnership with the US National Archive to digitize primary source documents integral to American history. I was completely unaware this site existed, and I was floored by how much is available.

http://www.adobe.com/products/photoshop/index.html
Photoshop is the premier photo editing tool in graphic design right now. The possibilities are pretty much endless for an experienced user, especially with all the add ons available. Another advantage is the prevalence of tutorials, helps and idea sites online.

http://www.gimp.org/
Gimp is the GNU Image Manipulation Program. It shares some of the same features as Photoshop, but is a free, open source program. 'Nuff said.

Images - Week 7

This is almost an overwhelming topic- so much of what users of a website take away are the images they view. Whether pictures, graphics, text that functions as a graphic, or animations, images work together with the color scheme to convey a mood to the user. Three questions which should guide the selection process are:
1. Is it relevant?
2. Is it interesting?
3. Is it appealing?
A variety of things can be used to enhance, clean up and modify image files to create the emotion, look or feel you seek in the overall scheme of your site. Photoshop and other similar programs have editing software that allows you to crop, filter, modify colors and shapes, as well as use aspects of one picture with another to create a completely new idea.

Another major issue in using images is ownership rights. There are several options, including self-originated photography, royalty-free stock photography, rights-managed stock photography and images with a Creative Commons license (free for use under certain conditions). One option that should be avoided is stealing copyrighted images from other sites.

Personally, I'm using graphics I created in Photoshop from images with a Creative Commons license, which allows all use except for commercial. Since the site I have is a school site, there is no conflict of interest.

Making Money with your Site and Javascript and DHTML - Week 7

There are a variety of ways to earn money with your site. These include:
- Soliciting donations (ex. http://american.redcross.org/ - non-profit institution)
- Advertising content (ex. any search engine you use: Google, Yahoo, etc.)
- Affiliate programs (ex. http://affiliate-program.amazon.com/gp/associates/ - an Amazon.com affiliates program that earns money for web sites that refer purchasers to Amazon)
- Sell merchandise (ex. http://www.megagear.com/ - web store for MegaTokyo webcomic)
- Sell content (ex. http://www.encyclopediabritannica.com)
This is certainly not a part of my web project, but definitely something I am glad to be aware of for the future.

JavaScript and DHTML are two types of coding that establish advanced interactivity for a web site. JavaScript provides a way to add dynamic text, such as current and accurate date and time information. It also allows for a wide range of modifications to basic HTML tags. Scripts can also be accessed like a CSS sheet- externally from the page they are viewed in.

Dynamic HTML is a combination of three parts: scripting languages, CSS sheets and the HTML Document Object Model (DOM), which treats a page of HTML as a collection of objects. The first step is to identify each object, so that the scripts written will be able to identify which object to modify. One of the most popular of these functions is the image roll over- changing an image or color of an image when the mouse rolls over that section of the page. Another is collapsible pages, a feature used extensively in computer-based programs such as Windows Explorer that allow a user to expand or collapse folders for ease of finding items. This can be used in web pages for the same purpose- to expand or limit the amount of text a user is expected to look at on any given page.

Site Reviews - Week 7

http://ilovetypography.com/
Hugely informative site about typography, including thousands of fonts, (at least) hundreds of articles, and too much knowledge to assimilate in one shot! The article 15 Excellent Examples of Web Typography was really informative, making me realize my fonts were boring but adequate!

http://typographica.org/
Typographica is an online journal about typography, with articles that convey news, opinions and commentary on fonts and other typographic designs. One of the cool parts of this site was the "Typefaces of..." a variety of years. The ones immediately accessible from the front page were 2004-2007 by year. My favorite was BistroScript, seen here.

http://abc.planet-typography.com/
This "virtual museum of typography" is divided into four subcategories:
- Classic (1480-1890)
- 20th Century
- Modern
- Miscellaneous
Unfortunately, none of the links seemed to work, so I was unable to peruse beyond the main page.

http://www.alistapart.com/topics/design/typography/
A List Apart is a magazine published for web designers, so the content on this page is relevant, practical and interesting to examine from a designer's point of view. A couple of the articles I looked at discussed grid systems for positioning text, formatting text in CSS and using CSS to actually retrieve fonts from online for site visitors so the text does not have to be frozen in image form. Pretty cool stuff!

http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
This article is amazing- 20 step by step fixes for CSS to polish up the minor issues that crop up with web design. Straightforward, it provides an image of the code so that it's easy to grasp and copy, which is a huge asset to newbies.

Attracting Visitors and Letting Them Talk to You - Week 6

This week's chapters discuss how to both attract and interact with visitors to your website! Attracting visitors is a process that requires a strategic plan in order to succeed over the long run. This process includes:
- Building a great site
- Sharing links with like-minded friends and related websites
- Creating and perfecting meta-tags
- Submitting your site to Internet directories
- Submitting your site to Internet search engines
- Test, reassess to figure out whether the above strategies are enough to generate the amount of traffic you want
This provided some interesting pieces of knowledge, but nothing major that I am going to utilize with my site for this class. I especially learned from the section about meta-tags, and how to use descriptions and keywords to attract users who will benefit from or enjoy accessing your content.

Interacting with visitors can take many forms: email links, form submissions, forums and/or groups. My site has the simplest form of these, the basic email link. I included it on each page as a webmaster contact, as well as on the staff page for each staff member. It is the easiest to code, as well as arguably the most recognizable for browsers. Forms are html coded forms of contact which provide a survey-like response for visitors, providing questions and answers in a limited format which are then submitted to the webmaster by an email. Finally, the most popular type of visitor interaction is forums, which can also be called groups, discussion boards, etc. This provides multiple visitors the opportunity to interact with one another, while the previous two only allow for one way communication with the web designer. Forums are asynchronous communication that provide space for users to post and respond to one another on any topic, in almost any format.

Site Reviews - Week 6

http://urbandirty.com/
Urban Dirty provides textured background photos covered under a Creative Commons license for design projects. These images are free to use, the artist just asks the user to credit the web page somewhere in the work. Some of the images are fascinating, carrying an artistic raw edge.

Best Textures
A group on Flickr, this collection currently has 1,402 images that serve as textured backgrounds for use by web designers. Ranging from nature shots to wall art, these images bring a wide variety of scale, perspective and mood to a project. I found a couple of shots of parchment I want to play around with.

Torley Textures
These texture collections provide seamless tiling, are available for any use and are in lossless PNG format. Also hosted on Flickr, the artist generously made them useful to all. Some of my favorites in this group were ones that looked like paint on a canvas, brushstrokes and all.

Deviant Art Textures
This site offers an overwhelming amount of resources for artists, and the texture section is no exception. I downloaded a few to play with, including a grunge page of text, a couple of photoshopped colors with light specks or patterns.

Grunge Textures
The graphics on this site are organized efficiently, easily accessible from the idex page. Another Creative Commons user, they ask that you link back. Interesting pictures, but nothing that looks useful for my design.

Grunge Style
This article published by smashing magazine online explains more about grunge and Web 2.0 design. I liked the explanations and examples they provided. It will help me as I work toward designing my own site. I want to see how I can integrate some of the elements they mentioned.

Vandelay Design
Tuturials, sweet tutorials! This site was IMMEDIATELY bookmarked because I am getting ready to start experimenting with Photoshop, and there are 40 video tutorials. I will so be back!

2007 Web Design Trends (and Cliches)
The top 6 web design trends of 2007 and some fabulous examples!

Web 2.0 Tutorials Round Up
Another fabulous tutorial site... on the back burner for emergencies.

Screen Resolutions and Aspect Ratios
Fascinating information about screen resolution average data across the globe. It's limited, of course, since the sample size is determined by visitors to one website, but a good idea for new web designers as to how big to design their pages.

---

Wow- this is a lot to digest and compile into useful knowledge. I am excited to start using some of the information and getting to final selections for my pages!

Page Layout Tools and Frames - Week 5

Chapter 9 in the Missing Manual talks about some page layout tools developed in HTML. The two major ones are table-based and style-based layouts. Tables are possibly the most basic of layout tools, infinitely customizable as to size, organization, and even the visibility of the outlines. However, they are notoriously sensitive to deal with, and if any one tag is missing, the page itself can be horrendously warped. Style sheets, on the other hand, create a much simpler format for HTML code. Since the sheet is a separate document which the page references, all the formatting standards are not necessary in the HTML, because they are dictated by the style sheet. This is the style which utilizes the cascading style sheets which have already been discussed earlier this semester. I've been working on these already, and I think they have great potential. However, I have a long way to go to make them seem effortless!

Frames are another tool in the web developer's arsenal. Chapter 10 talks about how to create them, and the (dis)advantages of using them on a web page. They have all but disappeared from many large web sites, mostly because they are annoying to a wide population of web users, not to mention unable to be viewed on cell phone web browsers. The basic concept of frames is that they split the browser viewing window into several different web pages, each broadcasting their own content. That is how the navigation bar is able to stay the same, no matter what is in the main part of the page. Blackboard is an example of this, because within the course site the navigational bar to the left stays static, no matter what the body text is in the right/center of the screen. I will probably utilize some of this design for the navigational part of the site, although I am considering just adding the code to each individual page. It's bulky, but at least it makes each page more cohesive. I will have to play with it to see.

Site Review - Week 5

This week's site to review, Colors on the Web, was suggested mostly because of its value as a reference for the web site project. There was lots of information, both theoretical and practical. My favorite part were the tools, which included the Color Wizard, Color Wheel and Contrast Analyzer. These three were quickly identifiable and accessible from the main page, and were extremely useful in helping me recognize and understand key concepts for color in web design.

Graphics and Links - Week 4

This week's chapter on graphics both reinforced some personal preferences for design that I already had and gave me a few more ideas for my site. I had already decided to take my own digital pictures as illustrations to avoid copyright issues, and I will definitely continue with that idea! The codes explained and illustrated are really useful, and I am looking forward to getting some of them on my page to see how they work. The book recommended the website Stock.XCHNG for royalty free pictures. I liked the set up of the site, registered and found some amazing pictures. I will be using this site in the future!!

The chapter discussing links brought up some great points about external and internal links, site file organization, bookmarks, the importance of keeping links current and functional, and the importance of redirects. Redirect links are ways to link back to other websites that either link to or support you in some way. This can also be effective for web sites that you borrow material from, as long as you legally use the material and don't steal it. For example, the counter Dr. Simon uses has links to the website that generated the code to credit the authors and possibly get other web masters to use their software. This becomes essential in web etiquette, interacting with and supporting a network of connected people that will help build traffic for all involved parties.

Overall, this is really useful, basic information that I am going to integrate with other aspects of web design we've already discussed. I'm familiar with it from the user standpoint, but have lots to learn practically from the design standpoint.

Color - Week 4

I was amazed while reading chapter 2 of the Beaird book. I never realized how much went into color design, both in the psychology of using particular colors, as well as theory behind how to choose and use combinations of color. This will be an important chapter to avoid some of the pitfalls of terrible websites that we have explored in previous weeks.

One of the exercises in the book was to choose a color and record your top three reactions. I chose red:
1. Jackie - my best friend, who looks smashing in red
2. Strawberries - yum!
3. Fire trucks
These were all positive for me, and strong in emotion... just as the book discussed. Whether or not it increased my metabolism, well, that's a mystery!

Another useful discussion was about color schemes, such as monochromatic, analogous, complementary, split complimentary, and other variations. It helped me by showing examples and discussing the elements of such schemes. I scrapbook as a hobby, so it was great to see another way I can apply color selection other than personal preference and eyeballing it!

Site reviews - Week 4

http://webstyleguide.com/index.html
I really liked this site for three reasons:

1. Simple design, easy on the eyes
2. Great, no-nonsense information
3. Fantastic navigation, especially the directional links at the bottom right of the page

http://universalusability.com/access_by_design/index.html
This site had an amazing amount of information relating to accessibility for users. I had never thought about some of the topics they addressed, both for users with physical difficulties or "normal" users who have preferences that lead to their exclusion.

http://www.jjg.net/ia/
J.J.G.'s site provides some useful graphical representations of technical concepts. His focus on user experiences is a good perspective to ingest while continuing to tweak the design of my site. I want to be sure that I consider all angles as I immerse myself in design so I can step back and effectively evaluate my current progress as well as the feasibility of the structure for users.

50 More Excellent Blog Designs
These were great blogs to look at- I scanned the main page and looked in detail at 5-6 of them. My favorite was Pop Stalin. I started thinking about my own blog here and what I could change about it to make it more personally designed. Then I remembered that I need to code my web page. Gotta keep my priorities straight!

Layout and Composition - Week 3

The first chapter of the Beaird book discusses some basic principles of design as they practically apply to web design. Overall, the book is a hands-on guide to aesthetically pleasing design, with a variety of relevant examples and worthwhile exercises.

Chapter 1 - Layout and Composition

One of the most significant parts of this process is planning. I was impressed by how Beaird discussed the need to identify the purpose for the site, information that should be included, and the importance of good communication with clients. Since I will be designing my own site, the communication will not be a relevant piece, but I can tell that the planning process will be key to a good overall design and help me determine the amount of information which should be contained on one page.

I also liked Beaird's three factors which make up good design:
- Pleasing design, but content focused
- Easy to use with intuitive navigation
- Each page is easily recognizable as part of the same site
These factors will be a good overall goal and guide as I walk through the design process.

Additionally, I learned a significant amount from the section about the "Rule of Thirds." As I experimented on paper with my own layout ideas, the grid created with the rule of thirds principle helped form a framework for comparison and evaluation of the various designs. I will definitely be thinking about how things work together according to this guideline.

Finally, there were a variety of other methods listed, such as balance (symmetrical and asymmetrical), unity, proximity, repetition, emphasis, placement, continuance, isolation, contrast, and proportion. All of these will be important tools as I build my site from the ground up.