BarbaraMilligan'sBlog

Just another WordPress.com weblog

Week 5

Posted by barbaramilligansblog on February 16, 2010

Chapter 4: Texture

Points (dots): can build any graphic element. When points are put together they can create lines, shapes and volume.

This website http://www.flipflopflyin.com/  has tiny art “Minipops”

Line: most common element in graphic design. A line is formed when two points are connected.

  • Diagonal lines suggest movement
  • Jagged lines  can feel dangerous and frantic
  • Curry lines gives a relaxing and smoothing feel
  • Lines at 90-drgee angle tends to feel sharp and mechanical
  • Lines with dots shows as handwriting and sketches

Shape: When any two endpoints of a line come together.

Website that will help you in making rounded corners.

Volume and Depth:

  • Perspective: when lines come together in the distance giving the illusion of depth
  • Proportion: helps determine the size and there location in three-dimensional space
  • Light and shadows: helps create the illusion of three-dimensional depth.

Declaration to the elements style rules:

  • To set the background color of an element

             background-color: #00b2cc;

  • To set an image to the background

              background-image: url (‘animalcracker.png’);

  • Background image will repeat horizontally and vertically

              background-repeat:

  • Background image will only repeat horizontally

              background-repeat-x:

  • Background image will only repeat vertically

              background-repeat-y:

  • Background image does not tile

              background-no-repeat:

  • background-attachment property determines if back is fixed or scroll
  • background-position controls the position of the background image. To set values you can use keywords (top, center or right) for vertical, (left, center or right) for horizontal. Also can use percentages or by pixels.
    • background-position: center top: center it horizontal
    • background-position:50% 0%: center it horizontal
    • background-position: 200px 300px: 300px down from top edge and 200px from left edge

What are skins http://winamp.com/skins/whatis.php

Corrie Haffly, the Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques, SitePoint,2006

Top Ten Mistakes in Web Design:

Search: Visible and Simple:

Design Guidelines for Homepage Usability:

Posted in Uncategorized | Leave a Comment »

Typeface Classifications

Posted by barbaramilligansblog on February 12, 2010

This website describes a breif history,  features and examples for the classifications of typefaces

http://www.mindgems.ca/design_fundamentals/reference/typography/Type_Classification.htm

Posted in Uncategorized | Leave a Comment »

Week 4

Posted by barbaramilligansblog on February 8, 2010

Charter 2: Color

Color psychology:

  • The emotional and behavioral effects produced by colors, can change on individual experiences and/or cultural interpretations.

Color Associations:

  • Red: stimulates adrenaline, blood pressure, and increase in metabolism, love, fire, anger. Deep reds shades are more formal. Brownish shapes are associated with the fall and harvest.
  • Orange: promotes happiness enthusiasm, creativity and appetite. Informal less corporate-feeling.
  • Yellow: highly active and visible. Associated with happiness and energy, though too much yellow can make babies cry, people fight and throw tantrums.
  • Green: associated with nature, growth, freshness and hope.
  • Blue: symbolizes openness, intelligence, faith, bad luck and trouble but universally appealing because the color of the sky and sea. Can calm people down, reduce appetite. Conveys a sense of stability and clarity.
  • Purple: associated with royalty, power, wealth, and extravagance. Carried over in nature with followers, gemstones and sunsets.
  • White: considered clean, perfection, light, purity and death in Chinese culture.
  • Black: connected with death and evil. Also power, elegance, and strength.

When considering a particular color ask yourself what are the first three things that came to your mind when you are thinking of that color.

Color Temperature:

  • Warm colors: include red, yellow, orange, pink, brown and burgundy. Represents heat and motion associated with sun and fire. Place near cool color and it will pop out.
  • Cool colors: green, blue and shapes of a blue violet. Calming and reduce tension. Good for a background and large elements.

Color Value: is the darkness and lightness of a color.

  • Lighter tint of a cool color
  • Darker shade of a warmer color
  • Saturation is the brightness or dullness of a color

CMYK: cyan, magenta, yellow and black

Color Schemes:

      Monochromatic: consists of a single base color and any number of tints or shades of the color. 

      Examples of websites that used Monochromatic scheme:

      Analogous: consists of colors that are adjacent to one another on the color wheel. 

      Examples of websites that used Analogous scheme:

      Complementary: consists of colors that are opposite each other on the color wheel.

      Examples of websites that used Complementary scheme:

      Split complementary: uses the two colors adjacent to your base color’s complement, which is three colors

      Triadic: push your spilt – complements out on e more notch on each side.

     Tetradic (double complementary):any complementary color scheme is combined with another complementary scheme, which is four colors

RGB (red, green, blue) color model: what your monitor uses in a combination red, green and blue light.

  • There are 256 different levels of light for each of the colors red, green and blue, which can create 16,777,216 different colors.
  • Hexadecimal color codes: specifies the levels of each color.
  • To make white all the colors are set that their highness possible levels.
    • Red 255(FF)
    • Green255(FF)
    • Blue 255(FF)
  • To make black all the colors are set that their highness possible levels.
    • Red (00)
    • Green(00)
    • Blue(00)

Snook’s colour contrast checker is a website that can help with making sure that there is enough contrast between two colors

Choosing a pallet colors:

  • Six colors
  • Two contrasting colors
  • Fulfills the requirements of the client
  • Combined different color schemes to make an unique color pallet
  • Consider the target audience
  • The primary color might be a popular color in your client’s locations

Lynda.com Practice(XHTML AND HTML Essential training)

Chapter 2

Aligning paragraphs:

http://bcts-potomac.aacc.edu/CAT/cat14/week4/03-paragraph-align.html

Controlling line breaks and spaces:

http://bcts-potomac.aacc.edu/CAT/cat14/week4/05-linebreak.html

Preserving pre-formatting:

http://bcts-potomac.aacc.edu/CAT/cat14/week4/10-preformat.html

Websites:

http://www.webpagesthatsuck.com/videos.html#navigation is a website that shows you really bad websites.

I choose the DinersClub wedsite for my faroite bad navigation site because of the doors that are for navigation but they are not lable and the doors does not have anything to do with where the navigation is taking you.

Interactive Advertising Bureau (iab): Helps out online companies to increase their earnings (Interactive broadcasting, email, wireless and Interactive television media)

Color Matters: cultural and psychological aspects of color

Colorstrology: Get your birthday color (fun site)

Color In Motion:A psychological aspects of color through motion. (This site kicks me off the Internet)

Kuler Color: I already have an account

Videos:

        Fireworks:

Posted in Uncategorized | Leave a Comment »

Week 3

Posted by barbaramilligansblog on February 3, 2010

Charter 1: Layout and Composition

The first thing you need to do when designing a website for a client is to do research on the client’s company and on any competitors. This will help you in what type of question you will need to ask your client.

Defining a good website starts with have elements that are pleasing to the eye but it does not take away from the content. The navigation is easily accomplished throughout and to be consistent from page to page.

The web page amatory consists of:

  • containing blocks: displays the away the page will be shown(Fixed width or Liquid width)
  •  identify blocks: has company logo and/or companies name
  • navigation: is easily found and used
  • content: is very important, it is the focal point
  •  footer: copyright, contacts, main links, legal info, blogrolls, linkrolls, Flickr and so on

The rules of thirds will help you layout the design of the website. Make a grid that is divided horizontal and vertical in thirds on the page and in the top third of the layout divide it into thirds. Then divide each column in half.

The unity of a layout is how the different elements interact as a whole rather than separate component.

To achieve a focal point or emphasis an element on the page:

  • place an object in the center
  • have a continuance path with a more dominating item at the end
  • isolate the part you want to emphasis
  • have contrasting elements that surrounds the item
  • change the scale of an object

Some of the most common layouts are left-column, right-column and three column navigation. They make good design sense. Though you don’t have to confine your creativity to the common layouts, go to these sites to help with thinking out of the box:

CSS Zen Garden: http://www.csszengarden.com/

CSS Beauty: http://www.cssbeauty.com/

Stylegala Gallery: http://ww.stylegala.com/archive/ (does not exist or not available)

CSS Vault: http://cssvault.com/

Design Interact Site of the week: http://www.designinteract.com/sow/ (page not found)

City Church: http://www.thecity.org/

Powazek: http://www.powazek.com/

Fresh Branding: http://www.freshbranding.co.uk/

Choosing a fixed width or liquid width is a question that has pros and cons from both sides.

Fixed width:

  • Pros: more control over floating images, the negative space with stay constant and readability is improved with narrower text blocks.
  • Cons: large browser windows appear dwarfed,  and the use does not have the control of the width

Liquid width:

  • Pros: adapts to most devices and scrolling is reduce
  • Cons: more difficulty to read when the text spanning is lengthened,  execute is less successful and lack of or award whitespace

A safe screen resolution is 800×600.

Optimize images in Photo Shop:

http://www.uxbooth.com/blog/speed-up-your-website-with-better-image-optimization-in-photoshop/

In Dreamweaver I learn how to change the pages properties, also place and edit an image and a table.

Videos:

Dreamweaver:

We started on a basic overview of Fireworks this week. The interface is similar to other Adobe products.

Fireworks:

Posted in Uncategorized | Leave a Comment »

Week 2

Posted by barbaramilligansblog on January 26, 2010

URL (Uniform Resource Locator): points to a source or address on the network or a site

Hyper links: Links and image tags use URLs to locate various files.

  • Link tag: Attributes made up the link tags.

             <A HREF=”page1.html”>Click to visit Page One! </A>

  • HREF references to page1

             >Click to visit Page One! < is the clickable item you see on the page( also can use images)

Absolute Link: Is a link to another page or website.

  • <A HREF=”www.yahoo.com”>Click to visit Yahoo </A>

Relative Link: is relative to the page they are placed on.

  • <A HREF=”www.yahoo.com”>Click to visit Yahoo </A>

Links to Images:

  • Links to an image file on another website

              <A HREF=”www.hcc.com/cutie-kona.jpg”>See Kano! </A

  • Links to an image file on the same site

              <A HREF=” cutie-kona.jpg”>See Kano! </A

  • Links to the folder images that cutie-kona is in, on the same site.

              <A HREF=”images/cutie-kona.jpg”>See Kano! </A

Image File Formats:

  • JPEG or JPG (Joint Photographic Exerts Group):

              This format is best for type, vector, flat or hard-edged images.

              When it compresses the file throws away subtle color differences. 

  • GIF (Graphic Interface Format):

              Is used for animations, continuous tone and gradient (fine art)

              Uses LZW (Lempel-Ziv-Welch ) compression algorithm

  • IMG tag: Most common way to display inline images

             <IMG SRC=”cutie-Kona.jpg” ALT=”KONA is CUTE”>

              Add a border, width and height

              <IMG SRC=”cutie-Kona.jpg” ALT=”KONA is CUTE”>BORDER=”2”WIDTH=”500” HEIGHT”337”>

Target: Set the target on a link to _blank and this will create a new page or tab for the link.

Videos:

Getting Started: What is Dreamweaver

  • Using Views and Workspaces >>
  • Defining a Site >>
  • Adding Text and Images >>
  • Managing and Uploading Sites >>
  • Styling Text using CSS (Cascading Stylesheets) >>
  • Posted in Uncategorized | 3 Comments »

    Week 1 Summary

    Posted by barbaramilligansblog on January 22, 2010

    HTML (Hyper Text Markup Language):

    • Is a coded language (set of instructions) that tells the HTML page (web page) how it should look.
    • A browser uses the written code to produce the webpage.
    • Made up of multiple Tags that instruct how to show the information.

           Links:

                http://www.w3.org/MarkUp/Guide/Style.html

                http://articles.sitepoint.com/article/html-37-steps-perfect-markup

    Tags:

    • Have instructions inside LESS than and GREATER than signs. <P>=paragraph
    • To start the instruction <P> and to stop the instruction </P>

    Web Browser:

    • Is a software application that allows a user to access and view HTML documents.
    • Most commonly used Browsers: Firefox, IE, Chrome, Safari, Opera

    Naming files:

    • Always uses:
    1. letters, numbers and underscores only
    2. simple names
    3. extensions at the end of the file name (homepage.html)
    • Never uses:
    1. same name more than once
    2. include spaces
    3. dashes or symbols (special characters)
    4.  AVOID uppercase

    WYSIWYG (What you see is what you get):

    • Adobe Dreamweaver
    • Amaya
    • Rapidweaver

     

    Links:

    http://www.smashingmagazine.com/2008/05/06/25-wysiwyg-editors-reviewed/

    http://www.ftpclient.com/ftp_client_faq.html

    Posted in Uncategorized | 1 Comment »

    Greetings and good wishes to all

    Posted by barbaramilligansblog on January 22, 2010

     

    I really don't like my picture taken so I am using a self protrait that I created in Adobe Flash

    I am very excited about this class and I hope that everyone else feels the same way. I am sure some of us including myselft will be struggling at times and want to just give up. Though I know it will be worth it if we persevere, because we are embarking on a journey to understand and to capture a small piece of the World Wide Web.

    Posted in Uncategorized | 2 Comments »