Up for a swim???

Up for a swim???
Relax!!

Friday, January 13, 2012

Week 2

Readability vs Legibility
Reading pages of text on the screen can be very straining to ones eyes.  Web designers use various ways to keep their readers focused on the material they are displaying.  For example, certain text styles and sizes can make reading text on the screen easier or harder depending on your combination.  One of the most popular text styles is serif text, which is very easy to read in print or from a monitor.  Sans serif text is also used due to its ability to become even more readable when you display it on a monitor.  This is due in part to the design of the text itself and the way its displayed through the pixels in the monitor. 
Contrast is another thing to keep in mind.  The easier it is to distinguish the letters from the background the easier it is to read and understand. This is particularly important if you want your readers to take the time to read what you have posted or displayed.  Text that goes on forever and fills the screen is a huge turnoff to readers.  Its better to keep your text manageable, long enough to convey a message but short enough that you don't bore the reader.
Legibility refers to how easy it is to distinguish characters or even words from one another.  If your readers can't distinguish one word from another whats the sense of displaying anything at all?  Here again different fonts or contrasts can help immensely.  Displaying everything in capitals will hinder your readers ability to distinguish between words. Why, because every letter is the same size and within the same block or area which makes it difficult to tell them apart.
Unfortunately web designers are not able to control how everything is displayed on each individual computer.  Most designers do the best they can to create pages of information that are both readable and legible, however, when its all said and done the individuals computer and their default settings play an integral role in how it will be displayed.  This information is invaluable and will be helpful moving forward as we design our own websites.  Knowing upfront what fonts work well with a computer monitor will enable me to create a site that is both "readable and legible" and hopefully informative and enjoyable.

Niagara Falls project
  • Now that you have the perfect picture of Niagara falls, the first thing you need to do is download the picture to your computer.
  • Open up Photoshop and open the picture of Niagara falls.  Once that opens create a duplicate with a different name buy using the "save as" function in the "file" menu.  This will prevent you from modifying the original so you can open it back up in the future if you need too.
  • Now you need to select the part of the picture that you want to display on your website.  Use the "quick selection tool" to pick the parts of the picture you want to keep for your website.  This tool uses contrast to distinguish boundaries.  You may need to zoom in using the magnifying glass in order to see the finite detail.  If you happen to pick an area that you don't want, just go up to the tool bar and select the "-" selection and remove that area.  You will have another chance to remove unwanted background later on with the "eraser tool"
  • Once you have the area selected you need to hit "control c" in order to copy the area
  • Next you want to open a new blank file
  • You will be prompted to choose the name, size, resolution, and background contents for your picture
  • Choose a name
  • You can choose the default size unless you want a boarder/box around the picture that is bigger than the picture.
  • Choose the default resolution.
  • If you want the white box surrounding your picture than choose white in the background contents, if you want your website background to show through then choose transparent.
  • Now that your in you need to hit "control v'" in order to paste your picture into this new file.
  • Now that you pasted the picture into the new file you may see fragments or images around the edges of your picture that you don't want, select the "eraser tool", zoom in on the picture and carefully erase the parts you don't want.
  • Once you've finished cleaning up the picture, your now ready to save it so you can pull it up on your website.
  • In the file menu pick "Save for Web"
  • At this point you will have an opportunity to choose what file type you want to save your picture in.  Since this is a high resolution picture you will probably want to use either a Jpeg or PNG file due to the clarity.
  • Now you need to determine what size you want to save the picture as.  Since you took an 8 meg picture it's probably a fairly large file.  If you want you web page to load quicker reduce the percent of the new file compared to the original file and this will reduce the file size making it load faster.
  • Create a name for the file and use "for web" in the title, to easily distinguish it from the others.
  • Now your ready to include this picture on your web site!!!
Additional reading comments:
The reading is becoming a little more intense and detailed.  Chapter 9 really focused on color and resolution, which will be helpful with our website projects.  I had some knowlede of resolution but didn't really know how it all tied together.  I must admit that I really never thought about how web designers need to consider resolution and color and how the end uses settings will visually effect the way their pages are displayed. 
Chapter 10 explains the various graphic file formats and the pros and cons associated with such.  I had heard of these formats, but never really understood the differences or why you would use one over the other.  The book was very clear in distinguishing between "pixel based' and "math based" graphics formats.  I think I understand the benefits of "anti-aliasing" and how it helps the viewer to see lettering more clearly or should I say smoothly.  Ive used thumbnails before for displaying pictures and lists, as a matter of fact, I have my windows exployer set to display thumbnails.
Chapter 12 tackles typography and it's importance in web design.  There really is alot to consider when designing graphics and text pages for the web.  How will your page look on different computers, is this text easy to read and legible?  Should I attach a style sheet to my HTML document and if I do will the end uses browser desipher it correctly?  There was alot of information contained with chapter 12 and I'm sure I'll use a good deal of it in the near future, with the help of the book of course.
The Dingo reading focused on scanners and resolution and there importance.  I can honestly say that I know, or have at least read, more about scanners than I ever thought I would.  The information about digital image resolution was interesting and can be useful in the future.  I like the chart that was provided that explains PPI, printed size, and file size which I can use in the future to determine the appropriate file size for a given picture.

Adding the poll.....
Adding the poll to my blog was very easy and everyone's questions were interesting.  A few of the questions test the political spectrum and a few test morality.  I liked Dana's and Ava's polls since they were questions that could create debate amongst the voters. 

    No comments:

    Post a Comment