Website Critiques

I chose www.laeyeworks.com as one of my websites to critique. I found this site through websitesthatsuck.com The navigation issues are evident from the splash page. Every item on the splash page leads to somewhere else. These items include text, pictures, and flash animations. The individual items are all centered on the page and are very close together making them harder to decipher and click. The buttons are not labeled in some cases and not easily known where they are going to take you.

A good website that is easy to navigate is www.la-z-boy.com. The links are all at the top and properly labeled. It is easy to find information on products, locations, as well as contact information.The sidebar is nicely labeled and the links take you to a page that is expected as oppose to a random irrelevant page.

The criteria I used to critique these sites was based on Chapter 8 and the Not-So-Good Design Checklist found on page 162-163.

Reading Response Week Three

This week I read Chapters 7 and 8 of The Non Designers Web Book

Chapter seven focused on the dos and do nots of website interfaces. To design a usable interface you should first plan out the website. This makes creating it a lot easier with to do lists, agendas, and focuses. The website should be contained within the viewing page and a user should not have to scroll sideways. To ensure the content fits on a page a screenshot can be taken and used as a sizing template. There are many different navigation styles, some feasible others not. A good navigation style is tabbed sites that use constant links at the top. Bad navigation style can be links that don't work or go to unrelated pages.

Chapter eight focused on recognizing good and bad design. Ugly type that is used without purpose is just that, ugly and un-useful. Broken links, broken up lines, and inactive buttons are also bad design techniques.Good design can help a user see, interpret, and use your website in a functional way. Bad design can hinder the message of your website.

This information was helpful in learning how to create my website. I plan to make a list and follow it in order to stay organized. I am going to use the design checklist to ensure I made a user friendly website. I am also going to keep the pdf file we read as a handy guide and reminder for designing. I have downloaded GIMP to try out and I read the website on ways to help master GIMP, this will be helpful for my graphics on the webpage. Reading the evaluation websites gave me an idea how websites are evaluated and how to make mine presentable and termed as a good design.

Polls

I voted on all the polls. They were all good, I like Hersheypark, drink Dunkin Donuts coffee, drive a gas guzzling suv, would order dessert, have faith in a woodchuck that in reality can not chuck wood, and have no idea who Lebron James is. :-)

Making Images Web Ready

To make an image web friendly, one must change a few things about the image. One change that can be made is using a transparent background. If the image is not square with a white background, you may want to save the file as a gif image to get a transparent background. The transparent background will allow the color of your website to show through as oppose to a white "box" around the image.

Another change is making sure you have used web friendly colors as described in the reading response post. Web friendly colors ensure that your image will look the same regardless of what computer it is viewed on.

When saving an image for the web, Photoshop will tell you the file size and how long it will take to download. Keeping this number small is important so that users will not have to wait long to see the image and so that you can keep within your allotted web space.

An image that is going to be seen on the web should be saved in either 72ppi or 96ppi. These two resolutions will show the image best on a website. These resolutions also keep the image in perspective to the web page.

Keeping the image small is important because you would not want a huge image showing up on your website. Large images are obnoxious and out of place between text. Crop essential parts of the picture and discard the unnecessary. If a large image of sky and an airplane is compressed, the airplane will be hardly visible. Cropping the airplane gets rid of the unneeded sky and will let the airplane be the visible focal point.

Sending a Stock Image

It is not a good idea to take a photo and send it without making any changes. This is not good because the image can look different of different monitors. You would want to make a universal monitor friendly image, This can mean changing file types, image size, color scheme, etc. Also an image taken with a camera may not be perfect. Examples of content changes can be red eye removal, color fixes, cropping, centering, or removing unwanted objects.

Reading Response Week Two

In Chapter 9, I learned that you should always save images for the web in rgb color as oppose to cmyk color. Images of higher bit can show more color depth. There are certain colors that are "web-safe", these colors can be determined by rgb values of 00,51,102,153,204,or255. Web safe hex codes are 00,33,66,99,cc or ff. Web safe color percentages are 0,20,40,60 or 80. Adobe has a color swatch that can be downloaded (and comes preset in Photoshop) of colors that are web safe.

In Chapter 10, I learned graphic definitions that are useful lingo to know. The advantage of a gif file is that transparency can be used. Gif formats do not have the same colors available as jpeg , however they can have a transparent background which can be very useful on a website.

Chapter 12 focused on font and writing on a website. The difference between font type that is easy to read and legible can be quite different. For readability font should be set at serif or sans script, between 8-10, and 14-18 size, don't overuse bold italic all caps or small caps, short lines are better than long ones, and there must be contrast between font color and background color. For legibility, use sans serif and do not use all caps; words are harder to recognize in all caps.

Reading Response Week One

This week I read Chapters One, Two, Five, Six, and some other odd pages of the book "The Non-designers Web Book".

Chapter one stated that if you already knew and was familiar with the web skip it. Well, I didn't skip it but I skimmed it. Pretty standard stuff, WWW, addresses links, pages, etc. Nothing new here.

Chapter two was all about search engines and how they work. I consider myself a Google guru in that I pretty much find everything I am looking for. However, I did not know about directories!

Chapter five focused on designing in print vs the web. The web is good for colors, distribution, price, music, animation. The print version is good because its portable, cheaper to read, and is familiar.

Chapter six introduces the CRAP principles. Contrast. Repetition. Alignment, Proximity.

The odd pages (186-192) were about file types and anti aliasing. Examples of file types for images are bmp, gif, and jpeg. Anti aliasing refers to the smooth edge of the graphic as oppose to being square ledges.

Design plays a role in our daily lives because it makes advertisements, web pages, and even books and magazines easier to read and comprehend. If it is hard to see text, you wont be able to read. If the web pages is overloaded with images and cramped with text your understanding of it will be limited. Personally, if something is not designed well I get a headache and look for my information elsewhere.

Designing for the web vs designing for print is almost the same in that it follows CRAP principles, however the web is a little more complicated because there are so many more possibilities.

Second Thoughts . . .

This new background is only going to be temporary because it does not show the text well and also it is not full page? I will have to change some things around. To be continued . . .

Adding a background

I got a background from http://blogspottemplates.blogspot.com/.

I downloaded the template as a zip file that contained two text files. The one text file was a readme and the other contained the coding.

I logged into my account and clicked on Design > Edit html

I then clicked the link that said choose file and chose the text file containing code.

Then I clicked Upload and blogger uploaded the code into the text box for me.

Clicked Save Template and Voila! Background appplied.

Terminology Worksheet

32. Java applet - a small fruit containing coffee

hehehehehehe

First Post

I finally got one :-) Google agreed I am who I am.