Wednesday, March 16, 2011
Wednesday, March 9, 2011
Week 7: challenge lab
Link > Form
Week 7 Challenge Lab:
1. What does the HTML doctype look like? <!DOCTYPE html>
2. What is the purpose of the <fieldset> element? -Grouping elements together in a form. Facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents.
3. What is the purpose of the <legend> element? What element(s) can the <legend> element be nested within? -Giving the title of the group form. It need to be nested within the form and the fieldset element.
4. By reviewing the code in the 24ways article, do HTML5 values need to be quoted? -No they do not need to be quoted.
5. What is the purpose of having -moz and -webkit prefixes on several of the CSS3 selectors? -To give support for Firefox, Google Chrome and Safari
6. Explain the :last-of-type pseudo-class. -Its a way of selecting the last sibling in a list of children of its parent element. In this case it was used to remove the bottom margin in the last fieldset.
7. Explain the :before and :after pseudo-elements. -This adds the content to your counter. Step 1, Step 2 etc..
8. Explain why and how a CSS counter is used for the form? -The CSS counter is used to give a clear indication of how many steps the form has. The way it is done here automatically generates the counters.
9. Provide at least one example of an attribute selector that was used in styling the form. -An example is the form payment form#payment label[for=visa] {background-image: url(visa.gif);]. -This places the visa image in the background.
10. Explain the :not() pseudo-class. -Here they used :not () to target the inputs that are not text or radio.
Week 7 Challenge Lab:
1. What does the HTML doctype look like? <!DOCTYPE html>
2. What is the purpose of the <fieldset> element? -Grouping elements together in a form. Facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents.
3. What is the purpose of the <legend> element? What element(s) can the <legend> element be nested within? -Giving the title of the group form. It need to be nested within the form and the fieldset element.
4. By reviewing the code in the 24ways article, do HTML5 values need to be quoted? -No they do not need to be quoted.
5. What is the purpose of having -moz and -webkit prefixes on several of the CSS3 selectors? -To give support for Firefox, Google Chrome and Safari
6. Explain the :last-of-type pseudo-class. -Its a way of selecting the last sibling in a list of children of its parent element. In this case it was used to remove the bottom margin in the last fieldset.
7. Explain the :before and :after pseudo-elements. -This adds the content to your counter. Step 1, Step 2 etc..
8. Explain why and how a CSS counter is used for the form? -The CSS counter is used to give a clear indication of how many steps the form has. The way it is done here automatically generates the counters.
9. Provide at least one example of an attribute selector that was used in styling the form. -An example is the form payment form#payment label[for=visa] {background-image: url(visa.gif);]. -This places the visa image in the background.
10. Explain the :not() pseudo-class. -Here they used :not () to target the inputs that are not text or radio.
Monday, March 7, 2011
Monday, February 21, 2011
Sunday, February 20, 2011
Sunday, February 13, 2011
Saturday, February 5, 2011
Blog post: Emphasis & Alignment
Emphasis and alignment are guidelines for a visual layout.
“Creating visual hierarchy demands that the designer bolster the visual dominance of certain significant items, and restrain the impact of other supporting elements” (Krause p.63). This means that the emphasis can be used to enforce a clear visual between elements, attracts attention to a design and guide the viewer as well. Emphasis can be applied by the relative size of elements, comparisons of color or intriguing presentation. It is important for a designer to be decisive on how the elements will be dominant to reveal the best arrangement concept.
Here is a good example of an emphasis composition. The website below shows an original, high contrast image, a dominant layout through position and comparative size image.
“Alignment between elements can be used to create a sense of agreement, soundness and unity within a piece, regardless of the tone of its overall message” (Krause p.79). The rules of alignment is to understand the effects abiding between elements and aligning components within their layout. The principle alignment can be applied to flush-left or flush right, centered, justified. Also, alignment can be structured between elements such as association, creating solidarity position horizontal/vertical, a subtle strength and taking advantage for a strong point-of-focus of the composition, especially when it come to alignments between straight, curved and freeform elements. Curved lines are almost always drawn to extend the guidelines for a better alignment visual. Alignment requires a judgement from the designer to maintenance a structural integrity and considerate relaxing rules alignment for good effects.
The example below illustrates an alignment between elements. On the top of the composition, the texts align with the right side of the image. Then, the right texts are aligned to the left and justified as well with the white gradient background.
“Creating visual hierarchy demands that the designer bolster the visual dominance of certain significant items, and restrain the impact of other supporting elements” (Krause p.63). This means that the emphasis can be used to enforce a clear visual between elements, attracts attention to a design and guide the viewer as well. Emphasis can be applied by the relative size of elements, comparisons of color or intriguing presentation. It is important for a designer to be decisive on how the elements will be dominant to reveal the best arrangement concept.
Here is a good example of an emphasis composition. The website below shows an original, high contrast image, a dominant layout through position and comparative size image.
“Alignment between elements can be used to create a sense of agreement, soundness and unity within a piece, regardless of the tone of its overall message” (Krause p.79). The rules of alignment is to understand the effects abiding between elements and aligning components within their layout. The principle alignment can be applied to flush-left or flush right, centered, justified. Also, alignment can be structured between elements such as association, creating solidarity position horizontal/vertical, a subtle strength and taking advantage for a strong point-of-focus of the composition, especially when it come to alignments between straight, curved and freeform elements. Curved lines are almost always drawn to extend the guidelines for a better alignment visual. Alignment requires a judgement from the designer to maintenance a structural integrity and considerate relaxing rules alignment for good effects.
The example below illustrates an alignment between elements. On the top of the composition, the texts align with the right side of the image. Then, the right texts are aligned to the left and justified as well with the white gradient background.
Wednesday, February 2, 2011
Monday, January 31, 2011
Homework 1: CSS Zen Comps
The three designs have a constancy of hierarchy. Starting with the logo, subtitle, content, and linked pages. The images colors are a starting point ideas and an influence for the composition. All concepts show harmony by using a visual echo through colors. Also, a thematic harmony of shapes reveals a dynamic and balance of the design. Elements have been divided by group to keep a structure visual and easy reading. Spacing has a important factor of the three designs, it contributes for an appealing visual design and the eyes flow between elements. The result of the three concepts shows movement and unequal spacing to the points-of-interest in the composition. The goal of the visual design 1, 2, 3 are to demonstrate an energy of the piece and convey a sense of creativity.
Link > Homework 1: CSS Zen Comps
Link > Homework 1: CSS Zen Comps
Design 1
Design 2
Design 3
Tuesday, January 25, 2011
Sunday, January 23, 2011
Blog Post: Part A> IMAGERY & Part B> GROUPING AND HARMONY
Part A: IMAGERY
- Select the link to view the images > Part A: Imagery
Part B: GROUPING AND HARMONY
Win the attention from the viewer is how the message has been transmitted properly. It is important for a designer to create good layouts by using visual grouping and harmony for a composition.
Visual grouping contributes the viewer creating connections between elements usefully. It is defined by “a simple matter of bringing certain elements closer together, and providing an obvious space or dividing elements between them and groups or components” (Krause p.41). A visual association can be applied with a different style of placement. For instance, it can be casually arranged with no obvious associations between them, clearly associated, and transformed as separate group. An effective grouping guide the eyes of the viewer’s search by placing elements and using space correctly from each other. A disordered grouping of content from a web page makes the viewer leave the page quickly, so it is vital to avoid distinctions between components of layout. A visual hierarchy establishes a clear order-of-importance between their relative visual strength.
The web page layout below has been grouped according to function. These groups have been separated from other groups and components by blank space and dividing elements. Here is a result of grouping showing a visually agreeable and user-friendly web-page.
Visual harmony is defined by “agreement between elements, both aesthetically and thematically” (Krause p.51). Usually visual harmony reflected to enhance themes like beauty, tranquility and style. There are three versatile and powerful visual harmonies which are the harmony through repetition, visual echo, and thematic reference. Repetition helps establish the visual harmony. Repetition can be shown as a focal-image, a background, a decoration whimsy, and as a border. Then, visual echo establishes an eye-pleasant sense of unity between elements of a layout. Visual echo is achieved between the colors, style, contents and typographic elements of design. Effective harmony can be ensured by establishing connections between themes that are present in any designs.
The web page below shows a repetition as a backdrop and an echo through color as well. The background of this design features a classical pattern element that is visually and thematically connected with the concept. Then the unity of color chosen from this design work well among themselves.
The web page below shows a repetition as a backdrop and an echo through color as well. The background of this design features a classical pattern element that is visually and thematically connected with the concept. Then the unity of color chosen from this design work well among themselves.
Tuesday, January 18, 2011
Introduction of Lyne
Bachelor of Web Design and Interactive Media
My strengths in web design are the visual design and programming.
I enjoy to draw specifically human body and I take pleasure in sports. My favorite sports are the workout, yoga, cycling, volley ball, ski, and dance.
Then, in my spare time I cook and savor good wine.
Music is my inspiration and therapy as well.
It help me to focus on any type of activities. Particular when I need to creative, relax, emotions, sports ,cook and more...
I am from Canada, the state Quebec, Montreal city.
My original language is french.
I am from a big family of nine kids, four girls and five boys. I am the eighth.
In 1996, I moved in Atlanta because of my work. I design casino game since 1992.
Anything else!
I am a mommy of two kids, Manuel and Madyson.
I am so happy to learn Web Design. It will add a new knowledge to my career.
I can wait to learn more...
Here is a link to Smashing Magazine
Subscribe to:
Comments (Atom)