Reflect on what you have learned...
There was allot of information to absorb over the last 6 weeks, some of which I kind of knew, but most of it was new to me. I had heard about Photoshop many years ago and thought it was just a simple photo editing tool that wasn't very powerful or widely used professionally. Boy was I wrong. I never realized how this software could be used outside of just cropping photos until we worked with the Photoshop CS5 "Tips and Tricks" book. The exercises in that book really opened my eyes to the level of complexity this software brings to the table. It's no wonder web designers use it as often as they do. I purchased a copy Elements 10 just for this class and I plan to continue to play around with it and create different projects of my own, and who knows, they may even end up on the web some day. If not, as least I know that my kids are taught Photoshop in high school and there is a high probability that they will get some mileage from the copy of Elements if I don't.
I think the C.R.A.P. principles opened my eyes to what's good and what's bad in printed and electronic materials. I can honestly say that I'm looking at advertisements, articles, and websites with a different appreciation for layout and content. I can only hope that I use these principles for what ever I publish or create in the future.
I found the information about "writing for the web" to be interesting and helpful. It makes sense to keep it simple when you consider your audience only skims the material. I know that if I'm searching for something on the web, I typically look for key words that point me in the right direction instead of wasting my time searching through pages and pages of information. I would have to say that the C.R.A.P. principles as well as the "writing for the web" information will have a substantial effect on how I critique/view printed or electronic material in the future.
I found it very interesting to learn that websites are made up of simple code that can be created in Notepad. This really boggled my mind. I expected to learn about the different web authoring programs available to web designers, but I guess I never really realized how it all came about. I plan to continue to play around with the copy of Expression 4, possibly creating another website, and I'm even contemplating checking with my ISP to see if I can upload a site of my own.
Lastly, I found that writing this blog was enjoyable. I was somewhat skeptical at first, I'm not a Facebook junky, but once I started it was easy, just more time consuming than I thought. I found it very interesting reading everyone else's view on the assignments, plus it's nice to be able to complete your homework from any computer and submit it electronically. I wish more of the professors would do something like this instead of handing in paper copies of the previous weeks assignment.
Compare and Contrast...
In comparison, I was able to convey the same information on both web sites and use a similar template. I was able to use the same pictures and text to complete both projects. Both sites have the same main navigation area which is located on the left side of each page. Each site utilizes the same page names making if easy to navigate either site. When you pick a link on the "Links" page both sites open up a new window and take you to that web site. All in all, both of my web sites are very comparable.
In contrast to one another, the Expressions site allowed more control over making changes to the web pages. I could make changes to the code or to the page and both ways would work. In the Weebly site I had to use a menu and drag and drop, which had many limitations, my selection in place. In the Expressions site I have a navigation bar on the left side of the page as well as one at the bottom of the page. I could not figure out how to add the bottom navigation bar feature to the Weebly site, therefore, it doesn't have it. I was able to build a table in the Expressions site and place the pictures in each cell and wrap the text however I wanted it. The Weebly site had limitations. I needed to place the pictures on the page in a column versus in a table. This limited my options for text. I had to drag and drop the format for each picture, insert the picture in a predetermined area, then type in the text, which I had limited control over its placement as well. The colors and text styles were fixed in the Weebly site where as the Expressions site allowed full control for change. I could have gone back into my Expressions site and changed it to match the Weebly site, but that would have defeated the purpose of this posting and I preferred the look of the Expressions site. I think the Weebly site is easier to use, especially for a novice web designer; however, with ease comes a price and that price would be the limitations and control over change. You don't have all the options or control over the final design like you do with an HTML editor.
How did you final project differ from the initial storyboards...
My final project was very close to my storyboard. There were a few things that I changed and the color scheme was probably the most obvious. Instead of using green I used a shade of blue. I liked how the color of the background and text complemented one another using the template that I did. I kept the same picture layout as my storyboard, however, I did change some of the text describing the different pictures. Lastly, I changed up the links page a little and removed 1 of the links from my list.
Here is my Weebly site....
http://704577964988964490.weebly.com/index.html
Up for a swim???
Relax!!
Thursday, February 9, 2012
Thursday, February 2, 2012
Week 5
Additional comments on readings.....
I found chapter 13 hard to retain without having Photoshop CS5 readily available. As I read through the chapter I tried to imagine following along on the computer, but that didn't work. I tried to use Elements 10 and some of the commands are not in the same place or available in this version/edition. From what I've learned in class and all that I have read, Photoshop is a very versatile and powerful photo editing software that makes web creation interesting, dynamic, and visually appealing. I never realized that Photoshop was used so heavily for animating websites. Who'd a thunk it?????
As a website designer you put a tremendous amount of thought, time, and effort into creating or building your website. The last thing you want is a website that is difficult to view or follow due to technology limitations. For this reason, one of the most important things you need to consider when building your site is troubleshooting the site on various computers, browsers, and displays. Getting into this habit is both smart and a good practice. Once your site has been uploaded and active an equally important task is to maintain your website regularly. Chapter 14 reviews the various ways to accomplish all of the above. I was amazed to find out that there is software available that actually tests your site for problems or missing links. This is has got to be a huge time saver.
Chapter 15 is the next logical step. They provide instructions on contacting an ISP, gathering all the necessary files needed for your site, to testing and updating you site once its live. The most important thing you need from your ISP is the ftp information. This information tells you the who, what, and where about your site, not to mention the necessary information in order for you to modify its contents once you've uploaded it and are live. Without it your dead in the water.
Diigo readings were plentiful. There were multiple articles that focused on writing for the web and how it differs from print. This information was helpful in completing part of this weeks blog assignment as well as understanding what should be included in my website. There were a few articles that explained the need for storyboarding and how to go about doing that. This is where I'm having the most difficultly. I like to dive into a project and see the results as I progress. To me it's easier to see my work unfold on the computer than it is to visualize what it will look like on paper. I don't like to write, give me a computer and I'll type the notes versus hand writing them. I realize that you need to plan ahead before taking on a project, yet this is where I struggle the most. Even when I write papers for school I like to just start writing instead of creating an outline. I prefer to look at this as a force of habit, instead of laziness, right brain -vs- left brain, or even old dog new tricks etc...
Storyboards.....
The storyboard allows you to create your story or layout on paper ahead of time. It's a complete visual representation of the entire site that will help you determine if you like the flow prior to writing code. By using the storyboard you enable yourself to make changes and view how everything is linked together all at once without having to change or re-write code. It's like creating note cards or a rough draft for a term or research paper. You have most of the information available at your fingertips prior to writing the final draft. The same holds true to your website, sure you can still make changes, but at least you have a foundation in which to build your site.
Web writing....
When you write for the web there are many things you need to take into consideration. Most web surfers, don't read web pages word for word. Instead they read about 20% of what's displayed. Therefore, you need to get your information in front of the viewer fast or you'll loose the opportunity. Long drawn out paragraphs won't cut it, use action words to grab their attention. Now that you have their attention, make sure you keep it personalized. Give your viewers a way to contact you in case they have questions or comments. Most people have something to same or comment about if given the opportunity. And for god sake, Check Your Spelling and Grammar!!!!
Tips for writing for the web -vs- print
2.0 website...
I'm leaning towards Weebly for my web 2.0 site for three reasons.
1. It's free
2. No advertisments
3. It one of the sites Michele recomended
I found chapter 13 hard to retain without having Photoshop CS5 readily available. As I read through the chapter I tried to imagine following along on the computer, but that didn't work. I tried to use Elements 10 and some of the commands are not in the same place or available in this version/edition. From what I've learned in class and all that I have read, Photoshop is a very versatile and powerful photo editing software that makes web creation interesting, dynamic, and visually appealing. I never realized that Photoshop was used so heavily for animating websites. Who'd a thunk it?????
As a website designer you put a tremendous amount of thought, time, and effort into creating or building your website. The last thing you want is a website that is difficult to view or follow due to technology limitations. For this reason, one of the most important things you need to consider when building your site is troubleshooting the site on various computers, browsers, and displays. Getting into this habit is both smart and a good practice. Once your site has been uploaded and active an equally important task is to maintain your website regularly. Chapter 14 reviews the various ways to accomplish all of the above. I was amazed to find out that there is software available that actually tests your site for problems or missing links. This is has got to be a huge time saver.
Chapter 15 is the next logical step. They provide instructions on contacting an ISP, gathering all the necessary files needed for your site, to testing and updating you site once its live. The most important thing you need from your ISP is the ftp information. This information tells you the who, what, and where about your site, not to mention the necessary information in order for you to modify its contents once you've uploaded it and are live. Without it your dead in the water.
Diigo readings were plentiful. There were multiple articles that focused on writing for the web and how it differs from print. This information was helpful in completing part of this weeks blog assignment as well as understanding what should be included in my website. There were a few articles that explained the need for storyboarding and how to go about doing that. This is where I'm having the most difficultly. I like to dive into a project and see the results as I progress. To me it's easier to see my work unfold on the computer than it is to visualize what it will look like on paper. I don't like to write, give me a computer and I'll type the notes versus hand writing them. I realize that you need to plan ahead before taking on a project, yet this is where I struggle the most. Even when I write papers for school I like to just start writing instead of creating an outline. I prefer to look at this as a force of habit, instead of laziness, right brain -vs- left brain, or even old dog new tricks etc...
Storyboards.....
The storyboard allows you to create your story or layout on paper ahead of time. It's a complete visual representation of the entire site that will help you determine if you like the flow prior to writing code. By using the storyboard you enable yourself to make changes and view how everything is linked together all at once without having to change or re-write code. It's like creating note cards or a rough draft for a term or research paper. You have most of the information available at your fingertips prior to writing the final draft. The same holds true to your website, sure you can still make changes, but at least you have a foundation in which to build your site.
Web writing....
When you write for the web there are many things you need to take into consideration. Most web surfers, don't read web pages word for word. Instead they read about 20% of what's displayed. Therefore, you need to get your information in front of the viewer fast or you'll loose the opportunity. Long drawn out paragraphs won't cut it, use action words to grab their attention. Now that you have their attention, make sure you keep it personalized. Give your viewers a way to contact you in case they have questions or comments. Most people have something to same or comment about if given the opportunity. And for god sake, Check Your Spelling and Grammar!!!!
Tips for writing for the web -vs- print
- Short paragraphs and to the point -vs- long winded explanations
- Use of lists, bullets and subheadings -vs- paragraph after paragraph
- Link your source to the content instead of footnoting or citing
- Use conversational language -vs- formal language
- Inverted triangle, conclusion in the beginning -vs- towards the end
2.0 website...
I'm leaning towards Weebly for my web 2.0 site for three reasons.
1. It's free
2. No advertisments
3. It one of the sites Michele recomended
Thursday, January 26, 2012
Week 4
Is this always a good thing?
I don't think there is a right or wrong answer to this question. On one hand the Internet provides an avenue for anyone to publish or post information. Starting a home or small business using the Internet can be more cost effective. Just think of all the businesses that are mail order and benefit from having a website. On the other hand, if anyone can create a website how do you know it's creditable? Anyone can create a site and fill it full of useless false information that is misleading to the viewers. I thinks most people believe what they read and if the site is not creditable than people end up misinformed. I would have to say that "always" is a strong word and I believe that it's not always a good thing.
Advantages and disadvantages
Like with anything you attempt yourself, there is a sense of accomplishment that one feels when the project is complete and only you can add that personal touch that makes it your own. Expressing what you want your site to look like to someone else can be difficult, especially if you want something that's not popular or proper. Then there's the subject of cost. There are free web authoring sites available that would make creating you web site virtually free, unless you have to pay a hosting fee.
Drawbacks would include limited resources or knowledge available to you and the amount of time necessary to complete the website. Lastly, creativity is not a side that everyone possesses, therefore, some people would benefit from having a professional create a site that is both inviting and usable.
Additional comments on the reading....
Chapter 3 was somewhat of a review of our class. They explained what web pages are and the different software programs available to create and author your own website. They explained how some of the different programs react or display different information. Not every web authoring program reacts the same way and this information could be useful if I choose to use one of the programs that they use as an example. Adding or modifying code by hand was also discussed briefly, I glad we did this in class.
Chapter 4 explained the various tools necessary for posting a website, including what a browser and server do, even how to find a server or host site. They go on to explain what a domain name is and where you need to go in order to reserve one. Just like with most projects planning and outling are keys to success. Knowing what you what to accomplish ahead of time coupled with organizing, and naming your files are keys to creating a useful, usable, and informative website.
The Diigo readings focused on "How web pages work", "How to design your own web site", and the importance of "Universal design for websites". The "How web pages work" article was very involved to the point of nausea. TMI The article on "How to design your own web site" was interesting and authored by a webmaster. She talked about a a web site that specializes in "do it yourself" web site building. The name of the site is SBI and she gave it a thumbs up rating for several reasons. The site can be tailored to your ability whether your a novice or an experienced site designer. The tools are available, easy to use, and they provide support and motivation to help you along the way. Best of all there is a money back guarantee!!! Who can beat that??? " Universal design for web sites" really focused on "accessibility" and the need for such. Initially, when I thought of accessibility, I thought of people with disabilities, but it's much more than that. Sure you need to consider people with disabilities, but you also need to consider language barriers, technology limitations, and software differences. This article discussed the things web designers need to consider in order to remove the limitations and make a site that is "accessible" to anyone who is interested in viewing it. They also stressed the need to plan for this in advance versus having to go back in later on and make the necessary changes.
Usability -vs Accessibility
Usability refers to how easy a site is to use or navigate through. Does the site do what the user intended it to do without frustrating the user?
Accessibility refers to the web sites ability to be used by anyone regardless of language, culture, location, and physical or mental ability. It also refers to a sites ability to be accessed by various electronic devices and technologies.
Usability and accessibility are related and part of the ergonomics of a web site, you might say they compliment one another. The world wide web has no limits, therefore, you need your site to have both usability and accessibility in order to accommodate everyone who wishes to access it.
I don't think there is a right or wrong answer to this question. On one hand the Internet provides an avenue for anyone to publish or post information. Starting a home or small business using the Internet can be more cost effective. Just think of all the businesses that are mail order and benefit from having a website. On the other hand, if anyone can create a website how do you know it's creditable? Anyone can create a site and fill it full of useless false information that is misleading to the viewers. I thinks most people believe what they read and if the site is not creditable than people end up misinformed. I would have to say that "always" is a strong word and I believe that it's not always a good thing.
Advantages and disadvantages
Like with anything you attempt yourself, there is a sense of accomplishment that one feels when the project is complete and only you can add that personal touch that makes it your own. Expressing what you want your site to look like to someone else can be difficult, especially if you want something that's not popular or proper. Then there's the subject of cost. There are free web authoring sites available that would make creating you web site virtually free, unless you have to pay a hosting fee.
Drawbacks would include limited resources or knowledge available to you and the amount of time necessary to complete the website. Lastly, creativity is not a side that everyone possesses, therefore, some people would benefit from having a professional create a site that is both inviting and usable.
Additional comments on the reading....
Chapter 3 was somewhat of a review of our class. They explained what web pages are and the different software programs available to create and author your own website. They explained how some of the different programs react or display different information. Not every web authoring program reacts the same way and this information could be useful if I choose to use one of the programs that they use as an example. Adding or modifying code by hand was also discussed briefly, I glad we did this in class.
Chapter 4 explained the various tools necessary for posting a website, including what a browser and server do, even how to find a server or host site. They go on to explain what a domain name is and where you need to go in order to reserve one. Just like with most projects planning and outling are keys to success. Knowing what you what to accomplish ahead of time coupled with organizing, and naming your files are keys to creating a useful, usable, and informative website.
The Diigo readings focused on "How web pages work", "How to design your own web site", and the importance of "Universal design for websites". The "How web pages work" article was very involved to the point of nausea. TMI The article on "How to design your own web site" was interesting and authored by a webmaster. She talked about a a web site that specializes in "do it yourself" web site building. The name of the site is SBI and she gave it a thumbs up rating for several reasons. The site can be tailored to your ability whether your a novice or an experienced site designer. The tools are available, easy to use, and they provide support and motivation to help you along the way. Best of all there is a money back guarantee!!! Who can beat that??? " Universal design for web sites" really focused on "accessibility" and the need for such. Initially, when I thought of accessibility, I thought of people with disabilities, but it's much more than that. Sure you need to consider people with disabilities, but you also need to consider language barriers, technology limitations, and software differences. This article discussed the things web designers need to consider in order to remove the limitations and make a site that is "accessible" to anyone who is interested in viewing it. They also stressed the need to plan for this in advance versus having to go back in later on and make the necessary changes.
Usability -vs Accessibility
Usability refers to how easy a site is to use or navigate through. Does the site do what the user intended it to do without frustrating the user?
Accessibility refers to the web sites ability to be used by anyone regardless of language, culture, location, and physical or mental ability. It also refers to a sites ability to be accessed by various electronic devices and technologies.
Usability and accessibility are related and part of the ergonomics of a web site, you might say they compliment one another. The world wide web has no limits, therefore, you need your site to have both usability and accessibility in order to accommodate everyone who wishes to access it.
Sunday, January 22, 2012
Week 3
Oh boy, it's a Quiz! pg. 154
When you look at example "A" you see a web page that doesn't fit on the screen, length wise. The links are centered on the page and too large. This requires the user to scroll down in order to view all of the links. Example "A" also has a disclaimer stating that their products are not available at this time, however, the user should go ahead and browse anyway. Definite turnoff. Example "B" fits nicely on the entire page. All of the links use text and graphics and are arranged on the left side of the page, allowing the viewer to select a link from the entire list without having to scroll down. Using graphics and text make the site more catchy and appealing to the eyes. Example "B" also provides a text only version of the links at the bottom of the page for viewers that turn off their graphics when surfing the web. This type of design is more appealing to the user due to it's simplicity for navigating the site and it's appealing interface design.
Will you be more critical of websites.....
Yes, I will be more critical of websites in the future. It's like anything else, once someone points out a mistake or problem you become hypersensitive of it and try to avoid it in the future. I realize now that I have allot more to consider prior to creating my website project. Things you take for granted need to be considered. How the site is laid out, color combinations, placement of the links, and making sure I include links that are text only allowing viewers who turn off graphics the same opportunity to navigate my site. There is allot more to consider than I originally thought!!!
Additional comments on the readings
Chapter 7 gets to the point about how important it is to plan your website ahead of time. Interface and Navigation play an important role in ease of use and how well the information you're looking to convey is displayed. Repetition, such as keeping the links in the same location from page to page, allows the user to become instantly familiar with navigating through the website. Using a familiar background color or design is another way to help the user become comfortable with using the site. Lastly, as a web site designer, don't be afraid to view other web pages for ideas of what works and what doesn't.
Chapter 8 discusses good and bad designs. When considering links, a good web designer will make sure their links are viable and working properly on a regular basis, otherwise, they will loose credibility and most importantly users. I now understand how background color can effect how easy it is to view and read text on the screen. Another thing to consider is that you're not filling the page with to much information making it hard to navigate through for the viewer. I didn't really realize that scrolling sideways within a frame is a major turnoff to users and should be avoided until reading this chapter, make sense now that it was pointed out to me. And finely, repetition and consistency are very important when a viewer navigates through a site.
The information in Diigo focused on criteria used to evaluate websites. It's funny to think that someone who doesn't have credibility could post information on a website, but it's true. Printing your opinions or information you deem interesting and informative costs money whereas posting it on line can be relatively inexpensive. You really do need to understand where the information is coming from, who is the author, and whether or not it's bias in any way. Knowing if the information is up to date or yesterdays news is something to consider as well. Does the site provide that information? With access to the world wide web, people can print just about anything whether its true or not, verifying the validity of the information can be difficult if you don't know what you're looking for. One of the articles, published by Robin Williams, reveled criteria for both good and bad web design features which will be helpful for completing our website project. I think the author of this article is the same author or co-author of our "The Non Designers Web Book".
What's your style: Organizing information for the web
It makes sense that you need to consider a non linear writing style for the web in order to keep it usable. I'm a skimmer where possible, rarely do I read something completely unless it's a homework assignment (ha ha). I agree that the designer has full control to make their site as easy to use and read as possible. How boring and dull would the web be if it were just pages and pages of text from books? I found it interesting that the author of this article compared writing for the web to writing for the newspaper, and this style of writing is referred to as the "inverted triangle" method. Designers need to pull their viewers in a particular direction and provide the important information above the scroll area in order to keep their attention. I can certainly see that you want to make your site informative and easy to follow and making sure that you organize your information in a particular way can help you achieve that. All of this information will be useful towards completing my website project and I look forward to creating a "usable" and informative website. This stuff is way more involved than I ever thought....
Lowe's website
I chose to evaluate the Lowe's website http://www.lowes.com/ The web page loaded very quickly even though there are graphics on the page, mainly pictures. I like the layout of the home page and one of the most important links I look for is the "store locator" link, which is front and center on this site. I like how they have an area that shows your hierarchy within the site. This make it easy to go back a screen or two without having to hit the back button on the browser. Links to all of the departments are nicely located at the top of the page next to the search window. Each page is set up the same and when you navigate to another page the top of every page looks like the home page, making it easy for the viewer to move from page to page regardless of what department they are searching in. They use both pictures and words to identify the links making it very easy to distinguish between the various links. I like this site because it's easy to use and the two key links I use the most are located at the top of the page, no need to scroll, especially when you're in a hurry!
The Home Depot's website
Since I evaluated the Lowe's website, I thought it would be a good idea to evaluate a competitors site. The Home Depot http://www.homedepot.com/ website loaded very quickly even though they have plenty of graphics. There navigation bar is located at the left side of the page and is easy to use. As you navigate through the site each page is similar to the home page making it fairly easy to use. This site also has and area that shows the users hierarchy or progress within the site. Again this makes it easy to go back a screen or two without having to hit the back button on the browser. The search link is located front and center which is nice and easy to find and use. The "store locator" link is at the top of the home page, and every other page, however, it's not as easy to recognize as the Lowe's site. Overall, I think the site is easy to use and navigate through.
When you look at example "A" you see a web page that doesn't fit on the screen, length wise. The links are centered on the page and too large. This requires the user to scroll down in order to view all of the links. Example "A" also has a disclaimer stating that their products are not available at this time, however, the user should go ahead and browse anyway. Definite turnoff. Example "B" fits nicely on the entire page. All of the links use text and graphics and are arranged on the left side of the page, allowing the viewer to select a link from the entire list without having to scroll down. Using graphics and text make the site more catchy and appealing to the eyes. Example "B" also provides a text only version of the links at the bottom of the page for viewers that turn off their graphics when surfing the web. This type of design is more appealing to the user due to it's simplicity for navigating the site and it's appealing interface design.
Will you be more critical of websites.....
Yes, I will be more critical of websites in the future. It's like anything else, once someone points out a mistake or problem you become hypersensitive of it and try to avoid it in the future. I realize now that I have allot more to consider prior to creating my website project. Things you take for granted need to be considered. How the site is laid out, color combinations, placement of the links, and making sure I include links that are text only allowing viewers who turn off graphics the same opportunity to navigate my site. There is allot more to consider than I originally thought!!!
Additional comments on the readings
Chapter 7 gets to the point about how important it is to plan your website ahead of time. Interface and Navigation play an important role in ease of use and how well the information you're looking to convey is displayed. Repetition, such as keeping the links in the same location from page to page, allows the user to become instantly familiar with navigating through the website. Using a familiar background color or design is another way to help the user become comfortable with using the site. Lastly, as a web site designer, don't be afraid to view other web pages for ideas of what works and what doesn't.
Chapter 8 discusses good and bad designs. When considering links, a good web designer will make sure their links are viable and working properly on a regular basis, otherwise, they will loose credibility and most importantly users. I now understand how background color can effect how easy it is to view and read text on the screen. Another thing to consider is that you're not filling the page with to much information making it hard to navigate through for the viewer. I didn't really realize that scrolling sideways within a frame is a major turnoff to users and should be avoided until reading this chapter, make sense now that it was pointed out to me. And finely, repetition and consistency are very important when a viewer navigates through a site.
The information in Diigo focused on criteria used to evaluate websites. It's funny to think that someone who doesn't have credibility could post information on a website, but it's true. Printing your opinions or information you deem interesting and informative costs money whereas posting it on line can be relatively inexpensive. You really do need to understand where the information is coming from, who is the author, and whether or not it's bias in any way. Knowing if the information is up to date or yesterdays news is something to consider as well. Does the site provide that information? With access to the world wide web, people can print just about anything whether its true or not, verifying the validity of the information can be difficult if you don't know what you're looking for. One of the articles, published by Robin Williams, reveled criteria for both good and bad web design features which will be helpful for completing our website project. I think the author of this article is the same author or co-author of our "The Non Designers Web Book".
What's your style: Organizing information for the web
It makes sense that you need to consider a non linear writing style for the web in order to keep it usable. I'm a skimmer where possible, rarely do I read something completely unless it's a homework assignment (ha ha). I agree that the designer has full control to make their site as easy to use and read as possible. How boring and dull would the web be if it were just pages and pages of text from books? I found it interesting that the author of this article compared writing for the web to writing for the newspaper, and this style of writing is referred to as the "inverted triangle" method. Designers need to pull their viewers in a particular direction and provide the important information above the scroll area in order to keep their attention. I can certainly see that you want to make your site informative and easy to follow and making sure that you organize your information in a particular way can help you achieve that. All of this information will be useful towards completing my website project and I look forward to creating a "usable" and informative website. This stuff is way more involved than I ever thought....
Lowe's website
I chose to evaluate the Lowe's website http://www.lowes.com/ The web page loaded very quickly even though there are graphics on the page, mainly pictures. I like the layout of the home page and one of the most important links I look for is the "store locator" link, which is front and center on this site. I like how they have an area that shows your hierarchy within the site. This make it easy to go back a screen or two without having to hit the back button on the browser. Links to all of the departments are nicely located at the top of the page next to the search window. Each page is set up the same and when you navigate to another page the top of every page looks like the home page, making it easy for the viewer to move from page to page regardless of what department they are searching in. They use both pictures and words to identify the links making it very easy to distinguish between the various links. I like this site because it's easy to use and the two key links I use the most are located at the top of the page, no need to scroll, especially when you're in a hurry!
The Home Depot's website
Since I evaluated the Lowe's website, I thought it would be a good idea to evaluate a competitors site. The Home Depot http://www.homedepot.com/ website loaded very quickly even though they have plenty of graphics. There navigation bar is located at the left side of the page and is easy to use. As you navigate through the site each page is similar to the home page making it fairly easy to use. This site also has and area that shows the users hierarchy or progress within the site. Again this makes it easy to go back a screen or two without having to hit the back button on the browser. The search link is located front and center which is nice and easy to find and use. The "store locator" link is at the top of the home page, and every other page, however, it's not as easy to recognize as the Lowe's site. Overall, I think the site is easy to use and navigate through.
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
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.
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!!!
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.
Sunday, January 8, 2012
Week 1's post
For those of us fortunate enough to have our sense of sight we take the world of graphics for granted, at least I do. Everything we do, buy, or learn has something graphic associated with it. Just think of the advertisements, flyers, billboards, and web links we are exposed to daily. Manuals for new electronics, cars, appliances use graphic designers to depict examples of how to install, fix, or operate. Magazine articles you read in the doctors offices grab your attention, or your kids attention, into buying a new and improved product. Web pages with sound and animation entice you into buying one of their products. These days, the web plays an important role in selling products and services, not to mention the ton of information that is available at your fingertips. The days of encyclopedia salesman have fallen by the wayside. The electronics age is here and growing by leaps and bounds. Each year more and more people are using the Internet to purchase products and services. The Internet is a huge source of information based on billions of pages of graphics, text, video, and sound. Some of these pages are informational and some are sales tools, but most importantly, they are at your disposal, provided you have access to the web via computer or smart phone. Although technology is advancing at an astonishing rate, print media will be around for many years to come. I don't think the world is ready to stop using paper to convey a message, however, I do think that the world is better informed than 10 years ago due to our advances in technology which web design is a major contributor.
Designing for the Web -vs- Print
Designing for the web poses different challenges over print. Yes, you still have to consider the layout like you would in print, but you also need to take in to consideration the different levels of technology your audience will be viewing your material from. Not every viewer will be using the same size monitor and or computer that supports 16 million colors and complex graphics. How fast a page will load is very important to the end user. Graphics, especially pictures with lots of detail, chew up computer memory and slow the loading process down. As technology advances and our computers and Internet connections get faster people have less patience for slow page loading, myself included. I've noticed that since I switched over to broadband, I expect my pages to load instantly and when they don't I get frustrated and refrain from using that site if at all possible You need to consider what browser will be used since all browsers are not created equally. The simple fact is that different browsers display the same page differently. When I'm looking for something on the web I quickly loose interest in a site that is difficult to navigate through. If I have a hard time moving from page to page I give up and try another web site. In general, web pages need to be user friendly, even obvious if possible, to keep a readers interest. All is not bleak in the web business. Costs are typically lower than print. Changes are easy to make and the web is available all hours of the day.
Print designers are faced with pitfalls of their own. Typically they have a limited amount of space to entice their audience long enough to make a point. Another drawback is cost. It can be very expensive to create a brochure in hopes of selling your product. Brochures for cars or vacations for example can entice potential customers to explore further and possibly book a vacation or buy a new car. Changes are another burden. Once the final copy is sent to the printers for copy its very costly and timely to make a change. On the bright side, the prospective customer has something tangible in their hands that they can see and feel and no technology is needed to read the print. Both forms of media have a place, and in some cases a specific need, in our society today. Ultimately there are pros and cons to both forms of media and I believe that both forms will be around for a long time to come.
Chapter 5 Quiz:
1. Print - Company's have a responsibility to inform their share holders of the progress/financial stability of the corporation. Printing an annual report and mailing a copy to all of their shareholders is one of the only ways to ensure that all share holders have an opportunity to review their progress over the past year. Even in this day an age, one cannot assume that all shareholders are familiar with computers or have access to the Internet.
2. Web - The cost associated with printing up brochures to send to all the add agencies located in a big city could cripple you financially. By providing the agencies with your web address, you can effectively provide the same or more information for less. A web address will allow you to include more information and not increase your out of pocket expenses.
3. Web - I would require my customers to register the software over the Internet and provide an email address for future updates/announcements. This will allow the company to send out a blast email to all of the registered users informing them of the updates.
4. Web - By providing a secured site specific to each individual customer you can make changes regularly and this "real time" information will be available to the customer at their convenience day or night.
5. Web - The cost associated with printing multiple booklets would be to high. By using the web, you could provide your students/associates with the web address and they would be able to access the information at their leisure. There is a cost associated with establishing the web site, however, you could charge visitors a nominal fee to access certain areas which would in turn off set the web site and maintenance cost.
6. Web - The cost associated with printing high quality pictures is very high. For an individual it would be more cost effective if they used the web to showcase their talents.
The Non-Designers Web Book, comments:
I would consider chapter 1 to be a review for me. I've been using the web for many years and have become familiar with the information reviewed in this chapter. Chapter 2 did have some useful information, especially about drilling down in various search engines. I must admit that I use Google for just about everything and I was not aware of some of the features or specialities that various search engines have. It looks like I will have to play around with directory searching more and use key phrases a little less often, chances are I'll find what I'm looking for faster. Chapters 5 and 6 were the most informative to me. I never really thought about the advantages or disadvantages between printing something and a web site. Chapter 5 explains in detail the advantages of using the web as well as the need to continue to use print for certain cases. It's definitely a great tool for business and personal use, especially when you consider the cost associated with printing everything and then the cost to distribute it. Chapter 6 reinforced the 4 principles we reviewed in class last week. C.R.A.P, the acronym used to describe Contrast, Repetition, Alignment, and Proximity, was discussed in great detail, further supporting our discussions in class. I like how the book used actual web site pages for examples. These examples, along with the step by step changes, helped me understand and visualize how applying these 4 principles to the design can drastically change the appearance of the page and help the viewer find information easier. I can see myself using these principles to help me design various forms of print or web based media in the future, which will in turn make the information I'm trying to convey easier to read and more informative.
Adding the Gadgit......
Adding the blog list from class was simple provided you know how to copy and paste. Once you add the blog address you add a name for the link and save it. I liked Ava's blog with her picture and reference to liquid refreshments. The contrast she chose made reading her post very easy.
Designing for the Web -vs- Print
Designing for the web poses different challenges over print. Yes, you still have to consider the layout like you would in print, but you also need to take in to consideration the different levels of technology your audience will be viewing your material from. Not every viewer will be using the same size monitor and or computer that supports 16 million colors and complex graphics. How fast a page will load is very important to the end user. Graphics, especially pictures with lots of detail, chew up computer memory and slow the loading process down. As technology advances and our computers and Internet connections get faster people have less patience for slow page loading, myself included. I've noticed that since I switched over to broadband, I expect my pages to load instantly and when they don't I get frustrated and refrain from using that site if at all possible You need to consider what browser will be used since all browsers are not created equally. The simple fact is that different browsers display the same page differently. When I'm looking for something on the web I quickly loose interest in a site that is difficult to navigate through. If I have a hard time moving from page to page I give up and try another web site. In general, web pages need to be user friendly, even obvious if possible, to keep a readers interest. All is not bleak in the web business. Costs are typically lower than print. Changes are easy to make and the web is available all hours of the day.
Print designers are faced with pitfalls of their own. Typically they have a limited amount of space to entice their audience long enough to make a point. Another drawback is cost. It can be very expensive to create a brochure in hopes of selling your product. Brochures for cars or vacations for example can entice potential customers to explore further and possibly book a vacation or buy a new car. Changes are another burden. Once the final copy is sent to the printers for copy its very costly and timely to make a change. On the bright side, the prospective customer has something tangible in their hands that they can see and feel and no technology is needed to read the print. Both forms of media have a place, and in some cases a specific need, in our society today. Ultimately there are pros and cons to both forms of media and I believe that both forms will be around for a long time to come.
Chapter 5 Quiz:
1. Print - Company's have a responsibility to inform their share holders of the progress/financial stability of the corporation. Printing an annual report and mailing a copy to all of their shareholders is one of the only ways to ensure that all share holders have an opportunity to review their progress over the past year. Even in this day an age, one cannot assume that all shareholders are familiar with computers or have access to the Internet.
2. Web - The cost associated with printing up brochures to send to all the add agencies located in a big city could cripple you financially. By providing the agencies with your web address, you can effectively provide the same or more information for less. A web address will allow you to include more information and not increase your out of pocket expenses.
3. Web - I would require my customers to register the software over the Internet and provide an email address for future updates/announcements. This will allow the company to send out a blast email to all of the registered users informing them of the updates.
4. Web - By providing a secured site specific to each individual customer you can make changes regularly and this "real time" information will be available to the customer at their convenience day or night.
5. Web - The cost associated with printing multiple booklets would be to high. By using the web, you could provide your students/associates with the web address and they would be able to access the information at their leisure. There is a cost associated with establishing the web site, however, you could charge visitors a nominal fee to access certain areas which would in turn off set the web site and maintenance cost.
6. Web - The cost associated with printing high quality pictures is very high. For an individual it would be more cost effective if they used the web to showcase their talents.
The Non-Designers Web Book, comments:
I would consider chapter 1 to be a review for me. I've been using the web for many years and have become familiar with the information reviewed in this chapter. Chapter 2 did have some useful information, especially about drilling down in various search engines. I must admit that I use Google for just about everything and I was not aware of some of the features or specialities that various search engines have. It looks like I will have to play around with directory searching more and use key phrases a little less often, chances are I'll find what I'm looking for faster. Chapters 5 and 6 were the most informative to me. I never really thought about the advantages or disadvantages between printing something and a web site. Chapter 5 explains in detail the advantages of using the web as well as the need to continue to use print for certain cases. It's definitely a great tool for business and personal use, especially when you consider the cost associated with printing everything and then the cost to distribute it. Chapter 6 reinforced the 4 principles we reviewed in class last week. C.R.A.P, the acronym used to describe Contrast, Repetition, Alignment, and Proximity, was discussed in great detail, further supporting our discussions in class. I like how the book used actual web site pages for examples. These examples, along with the step by step changes, helped me understand and visualize how applying these 4 principles to the design can drastically change the appearance of the page and help the viewer find information easier. I can see myself using these principles to help me design various forms of print or web based media in the future, which will in turn make the information I'm trying to convey easier to read and more informative.
Adding the Gadgit......
Adding the blog list from class was simple provided you know how to copy and paste. Once you add the blog address you add a name for the link and save it. I liked Ava's blog with her picture and reference to liquid refreshments. The contrast she chose made reading her post very easy.
Subscribe to:
Posts (Atom)