Sunday, June 28, 2009
Wow you were not kidding when you said the "Web Designs from Scratch" had a lot of links. A lot of good information there. A lot of marketing stuff. What is the goal of the website? Is the information organized in a user-friendly way? Does the information get your attention? Will the user stick around long enough to find out if you are selling what he is looking for? Does it look good? Does it work? The way I see it.....It all boils down to preference. The same concepts apply here that you would apply to music, or any other marketable art. If people like it, they will buy it. If they really like it (love it) they will pursue it. To the question "Is it a good thing that anyone can create a website, start their own business" Why not? This is America after all. Free speech is our right. If people like what you are selling, you will be successful. If not, then try something else.
The benefit of creating your own website, if you have the ability and the knowledge.....you can create a website that meets your expectations and your vision. The downside to making your own website would be the reverse. If you do not have the ability or the vision then your website could be boring, may not work, possibly useless. So the moral of the story is, If you know what you are doing, go for it. If you don't, you have 2 choices, you either learn, or you pay somebody else to do it for you.
Accessibility - Is the website easy to use regardless of impairment or disability. Usability - Is the product easy to use? Usability is more important than appearance. If your website is not easy to use, that will limit the use of the website.
Chapter 3 - What are Web Pages?
If you use a web authoring software, making a web page is a lot easier. This makes web design a lot like using a word processor. You can format text, change colors, fonts, backgrounds, tables, frames, add graphics and a navigation bar. If you don't want a space between lines use the "break code". You can also add links such as ......
Internal link - takes you to another page in the same web site.
External link - take you to a page outside the current web site.
e-mail link - open up e-mail program and address an e-mail to a particular person.
anchors - takes you to another spot on the same page or to a specific spot on another web page.
Layers - each element of your web page should be located on a different layer.
Chapter 4 - Before you Begin Your Site
Organize your files. Rules for naming your files.
1. Use all lowercase letters.
2. Use only letters or numbers - no funny characters
3. You can use the tilde~, underscore_, hyphen-, or period.
4. Do not use spaces
5. Web pages must end in either .htm or .html
6. Use the correct extension for your file names
7. Keep file names as short as possible.
Assuming you have a place to house your website, to create a good website you need to plan ahead. Who do you want to reach with your website? Start by making an outline on paper. Gather the information you want to post on your website. Creating and designing a website will be much easier if you do the two following things.
1. Decide what you want your website to accomplish. What is its purpose?
2. Gather all the information you want to make available.
I am still trying to decide between a semi-serious marketing web-site for my husbands future wood working business, or a website which lists family information, pictures, and biographies. Haven't decided yet, but I better decide soon. See you Monday at 6:00.
Friday, June 19, 2009
Here goes....Inverted pyramid method structures content from general to specific. Important information should be in the first two paragraphs. Information units are called chunks. The key is to organize first. Establish a hierarchy. What is most important. Usability is more important than appearance. Content is King. A Style guide serves to ensure that content is consistent, well organized, and facilitates use by the audience across the entire website. Meta data - the words we write to describe our pages.
Interface - How does the page look? How do the pages work and interact with the viewer? Underlined words are always hypertext links that will send you to another page. Different browsers display web pages differently. Navigation design - the way you get around your site. Interface and navigation work together.
All good sites start with a plan. What information do you want to include? Create an outline. Horizontal format makes the most sense, because monitors are wider than they are tall. Most pages are designed to fit 800 x 600. If you can easily find your way around a site and back to home, then your site is well designed. If you get lost, not good. :( Use repetition and consistency of elements on each page. Do not use active links that take you to the exact same page you are already on. Hmmmmmm....that should be a no brainer. If you have a lot of information, then use a site map. Internal link is a local link that connects you with another part of your website. An external link connects you to someone else's website. External can make a website better, but make sure the links are relevant. External links can also be distracting too.
Bad Designs - My Top 10 (Not exactly Letterman material here :)
1. All Caps
2. Don't break your lines
3. broken links
4. Don't tell people how to set their browser
5. unreadable fonts that are too small - in unreadable colors
6. Fonts that are too large can look like a children's book.
7. Don't require user to scroll sideways
8. A straight quote is the single most visible sign of an unprofessional.
9. Don't make buttons that are not real buttons.
10. Text inside of buttons should be consistent (don't use different fonts).
Now for the Good Design....
1. Working space of 800x600 for the "main visual impression"
2. Use the space below the 800x600 for less important items
3. Provide essential information as well as links without crowding
4. Consistency and Repetition from page to page
5. Use the Logo on every page.
6. Simple navigation bar
7. White or light colored background looks tidy
8. Easy to read print, font and colors
9. link colors coordinate with page colors
10. Pages download quickly
Let's look at the American Education Services Website.
It has a strange identity theft advertisement at the top that kind of looks like a suntan lotion ad. I have been at this website many times and I just breezed right by the heading. It takes up a lot of space and doesn't effectively communicate the intended message. The rest of the site shows continuity as well as essential information. However, the page is very crowded. Overall it is a good site, but I just don't get why they have a heading taking up so much space that is addressing a completely different subject. Maybe, they should take a web design course. Snicker, Snicker.
Onto the next victim........Major League Baseball (mlb.com)
This site is huge and complex. I was trying to find my way around, I could not find my way back to the home page without typing in the web address again. It is impressive with all the information on every major league team. I am sure you can purchase all kinds of memorabilia, however, it does not provide a clear road map for navigating. It was a bit slower to download because of all the pictures and videos available to watch. Again it is a good website, but not completely perfect. I am sure this was a very expensive web site to create and to maintain. Creating the perfect website may be very difficult. It seems like almost everyone will break the rules to suit their individual tastes or their agenda for creating the website. Maybe, the mlb website wants you to get lost in their memorabilia store to encourage sales.
Ya never know (Marketing 101).
I purchased Photoshop Elements 7 at Costco, it is on sale for $49.99(with a coupon for $30.00 off) if you have a membership. I was playing with it on Saturday for a few hours and today for about 3 hours. It seems like it is pretty much the same as the Elements 6. I am having some trouble with it. I could really use some help with the layers aspect. Not an easy program to learn. I hope we have some time to ask questions and get some help in class tomorrow. See you then.
Monday, June 15, 2009
Dpi(dots per inch) vs ppi(pixels per inch)...they are not the same. It is important to know the difference. Dpi is the number of dots per inch that your printer will print on paper. Ppi is the numbers of dots per inch on your monitor. The article in Diigo for scanning tips went on and on forever. Wow, information overload here.
Color Schemes, Color is good tastefully done. Contrast is also good. You may have to do a little experimenting. CMYK the four color process for graphics on the web.. Cyan, Magenta, Yellow and Black. RGB indexed color....Red, Green and Blue, a limited palette with a maximum of 256 colors. Onto Bit Depth, or pixel depth, or bit resolution. A bit is one electronic pulse. The higher the bit graphic measurement, the more colors are available.
Monitor resolution.....When pixels are smaller everything on the screen is smaller, which makes them look like a better quality. The more colors in your graphic the better it will look. The less colors, will appear to be at a lower resolution. The higher the bit depth, the larger the file. The browser safe or web-safe colors was a big problem in the past, but with newer technology, it is not as big of an issue, unless the people who will be accessing the images are using very old monitors. According to the book, the web-safe colors are not always the prettiest colors. To work around that problem, you can try mixing two colors together.
Chapter 10 - Graphic Definitions
- native file format is the format native to or natural to a particular program. (i.e. Excel .xls)
- graphic file formats used on the web - gif and jpeg
- pixel based - bitmap, paint, raster (applications that use paint brushes and erasers)
- math based - outline, object oriented, draw, vector (applications that draws shapes with a handle.
- anti-aliasing - smoothness of the edge of a graphic
- image map - a graphic with several links attached to it
- server-side image map - dependent on the server doing the work
- client-side image map - as easy to create as any other link
- alternate label - allows a visitor of the web site to see the label as the web page loads
- thumbnails - a thumbnail sized version of a picture
- orphan page - a thumbnail enlarged with no additional information (boring)
Chapter 12 - Readability vs. legibility
Make sure the text is readable and legible. You can break rules when it works for you.
So much to think about. Cross platform fonts, proportional vs monospaced type, cascading style sheets, CSS Codes and Syntax. I am starting to see just how complicated web design is.
Now I need to discuss the attaching of a picture to a web page, blog or e-mail without make any adjustments to it. To be honest I did that a few times myself. I soon learned that files were too large to attach to e-mails. They were good quality, you just couldn't send them anywhere.
5 things you should do to an image to make it web ready.......
- Crop the picture - get rid of any part of the picture that may not be needed.
- Resize the picture by reducing the numbers of pixels - do not overwrite the original picture
- When reducing a file size, enable the aspect ratio to protect the picture from being distorted.
- Save file as a jpeg file (suggested for photographs)
- Set compression level to medium or high range
- Do not exceed 100 KB per Web page for the total of all pictures on the web page
Sunday, June 7, 2009
The upside of web page advertising..........I learned in Chapter 5 that costs associated with advertising and web sites can be considerably less than printed advertising. It is also easier to correct mistakes on a Web page than to correct a mistake after an ad has already been printed. There are no additional costs related to colors. The sky is the limit. Information can be added or changed everyday or several times a day keeping your static information up to date.
The upside of print..........Printed information is more portable, you don't need a computer to read printed material. Printing has been around a lot longer than web advertising and therefore we are more accustomed to it, and there are more print tools available. Printed material does not crash, unless you would call dropping your magazine in the bathtub crashing. However, a computer would also be ruined if you dropped it in your bath tub. :)
In Chapter 6 I learned the following about designing a web page. Do not mix alignments unless the mixed alignment strengthens the design. Centering is overused. Straight lines make a document easier and more pleasant to read. Borders should be removed because they clutter the page and can distract the reader from focusing on what is important. Proximity is also key. Things that are closely related to each other should be close together in order to make the relationships obvious to the viewer. Repetition is also important. Logos, color schemes, background, and layout should remain consistent throughout the website. Contrast can be used to pull you in, don't contrast two shades of one color, make the colors very different from the other. Last but not least, make sure you spell everything correctly. Why bother making a beautiful design if you don't take the time to check your spelling.
When deciding between gif and jpeg, gifs should be used for the simple or less flashy applications, and jpeg should be used with photographs because of the complexity of colors and shading.
Wow, I just experienced a sinking feeling. I previewed my blog, and it just disappeared. Poof it was gone. So after a few minutes of being disgusted with myself, I thought my only choice was to start over. So I clicked on "New Post" and then I saw the option to edit blogs. There it was. I feel much better now.