Web Site Accessiblity

What is accessibility?
When a website can not be used by a person with a disability, than the site is inaccessible. When your site can be used by a person with a disability, than your site is accessible. So basically, accessibility is the undertaking of making a site the is use able by people with disabilities. Web site accessibility generally deals with the visual, auditory, physical, speech, cognitive and neurological disabilities. As well as the elderly, whose abilities are declining due to age. Since the US Census Bureau has 19.6% of the US population categorized as havens some sort of a disability, accessibility is imperative to the success of a site. Accessible sites not only benefit the disabled, but also those users without disabilities. Accessible sites tend to be easier to navigate, download faster, and more user friendly.

Visually Impaired Browsing.
The first disability you will probably think about when designing a web site is the visually impaired, or the blind. These have a enormous effect on how your site is perceived. You visuals essentially become insignificant. The site becomes less about how it looks, and more about how it sounds. The bulk of people who have a visual disability use a screen reader to navigate the web. A screen reader is software that ready the text of a website out loud. Screen readers cannot figure out what a image really represents. it will simply read the image's name per what is written in the HTML. For example a human can look at a image of a cat and describe it easily as "a cute white kitten with big eyes". Where as a computer will describe the image as "1234abc.jpg" if there is not ALT attribute written into the HTML. This makes it imperative to include a ALT attribute. The ALT attribute with change how the computer reads the image from "1234abc.jpg" to "cute white kitten".

Web Without A Mouse.
Those who cannot use a mouse, use the tab key. The tab key should take the user throughout the site in the same order that your eyes would, left to right and top to bottom. To do this the creator of the site would need to add what is called a tab index attributes to the elements on the page and number them in order that they should be viewed. Without the tab index, when a user tabs though a site it will take them in throughout the cite in order of how it is marked up. Which is not necessarily the order it should be viewed, though it should be. 

Color-Blind Site Viewing.
Web safe colors are not really "web safe". The colors that are thought of as "safe", look completely different to someone who is color-blind. for this reason color should not be a site's only form of communication. For example if you are showing a rating of something through stars. Someone who is color- blind might not even see the star rating. So it would be best to also have that rating in a text form. Now that does not mean to completely get rid of visual indicators, simply add a text description as well.

Language of Design: File Formatting

• .jpg- .jpg is short for JPEG, which stands for Joint Photography Expert Group. A .jpg is a type of compressed file. It is the most universal image file.
• .tiff- TIFF stands for Tagged Image File Format. TIFF is a high quality format the supports colors from 1- 24 bit. TIFF is made to be a standard image format for storing high quality color images on multiple platforms. TIFF allows layering and transparency.
• .raw- Raw doesn't stand for anything, it refers to being unaltered. .raw indicted that the file was read directly from a camera.
• .gif- GIF stands for Graphics Interchange Format. GIF was one of the first two image formats for the Internet. It allows transparency but only 100% or 0%.
• .png- PNG stands for Portable Network Graphics. This is another file format that allows transparency like GIF, but you can pick what percent of transparency you would like. PNG is a compressed format.
• File Compression- File compression is basically making a file smaller, it is commonly used when sending a file from one computer to another. The compression makes the file smaller there for sends quicker.
• File Optimization- File optimization is the reduction of the file's size to improve compatibility with the Internet.
• Meta File- A meta file is a file that can store multiple types of data. These files can contain raster, vector and type data. 
• svg- SVG stands for Scalable Vector Graphics. A SVG  is an XML-based vector image format for two-dimensional objects.
• .mp4- mp4 stands for  MPEG-4 Part 14. A mp4 is a digital multimedia format that is most commonly used to store video and audio. however, it can also be used to store other data such as subtitles and still images.
• .swf- SWF is a Adobe Flash fil format that is used for multimedia, vector images, and Actionscript.
• .mov- MOV is a file format that is often used to save movie files and video clips.

Learning Web

 

     In week one we began learning the basics of HTML. Our first assignment was to do a mark up in HTML with a given set of content. I was suprised at how easy it turned out to be. I even took the assignment a step farther and wrote a little CSS.

Language of Design: HTML Tags

     HTML is a set of codes set in a file that is used intended for exhibit on a web page. The codes used are to signify structural elements such as headings and lists. This codes are called tags. Tags are surrounded by angled brackets using the < and > symbols. Majority of tags come in pairs, a opening tag and closing tag.

• <head>: This tag signifies the information about the document.

• <body>:  This tag signifies a document's body.

• <p>: This tag signifies a paragraph. 

• <h1>: This tag signifies a HTML heading.

• <ul>: This tag signifies a unordered list.

• <ol>: This tag signifies a ordered list.

• <li>: This tag signifies a list item. 

• <dl>: This tag signifies a description list.

• <dt>: This tag signifies a term or name in a description list.

• <dd>: This tag signifies a description or value of a term in a description list.

• <table>: This tag signifies a table.

• <tr>: This tag signifies a row in a table.

• <td>: This tag signifies a cell in a table.

• <title>: This tag signifies a title for the document. 

• <div>: This tag signifies a section in a document.

• <footer>: This tag signifies a footer for a document or section.

• <header>: This tag signifies a header for a document or section.

• <aside>: This tag signifies the content aside from the page content.

• <nav>: This tag signifies a navigation links.

• <cite>: This tag signifies the title of a work.

• <!--comment-->:   This tag signifies a comment.

• <blockquote>: This tag signifies a section that is quoted from another source.

• <meta> tags: This tag signifies metadata about a HTML document.

• <span>: This tag signifies a section in a document.

 

Amortenia Wine Label

Assignment: Design a wine bottle label.

     So originally, I planed to design a label with a clock hands set to show 5 o'clock and no numbers just a wine glass where the 5 should be. The company would be called "it's 5 o'clock somewhere". But than as I began designing it I was thinking I wanted the clock to have the center cut out and show the wine through it, and I wanted bling on it, and this and that. Well my ideas where getting out of control. So I scrapped that idea for now. I'll come back to it when I have some free time. Right now I need to get this project done. I was watching Harry Potter and the love potion part came on. My wheels started turning. So I created Amortentia Love Potion Wine. Amortentia is actually a love potion from Harry Potter. Its the most powerful love potion. (Huge Harry Potter fan, can you tell?) Anyways, I used both Adobe Illustrator and Adobe Photoshop for this project. I love how it turned out.

What makes a good portfolio?

     A good portfolio is one that is clear, concise, and convincing. Since the purpose of a portfolio is to serve as a visual resume. Therefore, your portfolio should be a reflection of you as a designer, without being a scrapbook for every project you have ever completed. The portfolio should have ten to fifteen samples of work that best represents you design style at the given time. That way you do not over load perspective employers or clients, but at the same time, you still can show that you have done a good amount of design work. A strong portfolio also authentic and memorable.

Back to Design

     Summer break is over, and I'm back in class. This month I am taking Applied Multimedia, which is a portfolio building class. I am really looking forward to building a strong portfolio. I made one several months ago for a job interview, but to be honest it was weak and lacking in material. Which is probably why I didn't get the position. Or it could have been that I only had one semester worth of experience in graphic design at the time as well. Either way, building a strong portfolio will definitely assist with securing employment in the future.
      This month we will be building 3 types of portfolios. Print, online, and creative. As well as, completing four interviews. Two with student services, and 2 where we actually do the interviewing of a designer actually in the field. Should be interesting.