Thank You Web Design Students!

This is the last post for this year. Thank you all for making this semester of Web Design so memorable, fun and engaging. I wish you all the best of luck and have a great summer!

 - SW

Contest: Design The "_________" Of The Future!

Hello Students,

Our final class exercise is a design competition. The grand prize is a 4GB USB Thumbdrive!

Challenge: Your design challenge is to create the "_____" of the future. Imagine what a cell phone might look like in 10 years, or perhaps what will new automobiles look like. There is no limitation of the subject, you could even design the coffee cup of the future. Think about how products change and evolve over a very short amount of time. What did cell phones look like 10 years ago? What everyday item can you see becoming even more advanced over time? For this challenge, I as your instructor cannot aid your efforts, you must rely on each other to problem solve.

Time limit: 45 Minutes

Format: Final artwork must be displayed on screen. Artwork can be created in Photoshop or Illustrator. Artwork can be drawn by hand and scanned for reference in your digital illustration. ALL DESIGN ARTWORK MUST BE ORIGINAL or ORIGINAL PHOTO MANIPULATION.

Judgement: While student input is take into consideration for judging the finalists, the ultimate decision will be made by me. I am judging based on design originality, quality of illustration and details included with your concept. What makes your product/item futuristic? What materials are it made from? How is it powered? Is your design feasible?

Advice: Take a few moments to think of your idea, research similar products or ideas, research current "prototype" concepts already in existence, take inspiration where you can.

Wait for my mark to begin!

BMW M1E Electric Procar Design Concept by Seth Wilson

Finalizing your ROP Web Design Coursework

Hello Students,

In considering your final grades I take into account the work you have generated over the semester in conjunction with your final portfolio website project and your overall participation during this course.

Additionally I review the work you have put into your blog, have you maintained it? Have you made posts to show and display your work? Have you gone above and beyond my minimum requirements?

If you feel that your grade in this class needs a boost, or that I, as your instructor, need additional reassurance that you have been paying attention all semester than take the time to enhance your blog or turn in independent study or extra-credit work.

To improve your grade, you can:

• Take screenshots of your portfolio site project and post to your blog, write a summary of the project and discuss the elements that you feel worked well and ones that you felt were a challenge.
• Look over the ROP Web Design blog back to day 1, have you missed any assignments? Have you done extra-credit work? Post any missing or extra work to your blog.
• Was there something you learned in this class that you would like to share? Write a short tutorial with pictures to illustrate it and post to your blog.
• Write a short summary of your experience in this class, do you feel like you learned a valuable skill? Was it harder or easier than you thought? How do you see yourself using these skills in the future?
• Complete one of the extra credit tutorials in the Extra Credit links section on this website.

If you have any other ideas for extra-credit work let me know, i'm very flexible!

- SW

Web Design Final Quiz

Hello Students,
Below is your final quiz for this Web Design class. Please enter your full name and answer each question to the best of your abilities. Please no talking during the quiz, when you finish please remain quiet.

Display Your Artwork at the County Office of Education

Hello Students,

ROP is looking for artwork to display on it's walls. This artwork could take the form of a drawing, poster, photograph or computer art. There is no size restriction. If you would like to submit your artwork send as a PDF file to me at: swilson@santacruz.k12.ca.us

digital matte painting by Nathan Silverglate

Thanks!

 - SW

Guest Speakers from Compass Rose Media

Thanks to our special guest speakers from Compass Rose Media. Kathleen Smith and Kris Raikes spoke with our ROP Web Design class about their careers and working with rich media web development. Kathleen Smith is the Senior Interactive Producer at CRM, and develops rich media websites, app development, graphics and more. Kris Raikes is the IT Tech and Director of Technology and discussed his personal philosophy with learning and using software and technology.

Kathleen Smith displays her ipad apps created for clients

Kris Raikes showes his homemade Arduino controlled, light sensitive, electronic music "thingamajig"

Thanks again to our guest speakers!

 - SW

Stylized Portrait for your Final Portfolio

Hello Students,

Here is a quick and easy tutorial to create an Andy Warhol style portrait for your final portfolio. If you have some extra time this will look really good in your final website. I have my camera available so just ask!

WARHOL STYLE TUTORIAL

End of Course Survey

Hello  Students,

Every year the Santa Cruz ROP conducts an end of course survey to evaluate our material and its relevancy to your career goals. Your honest opinion and feedback are greatly appreciated. The information from this survey is used as evidence of the work we do in our classroom and helps us maintain funding for future ROP classes.

The survey should take you about 7 minutes, please take the survey at the following link:

ROP End of Year Survey 2011

Thanks!

 - SW

New Assignment - Portfolio Website

Hello Students,

Your next assignment is to create a portfolio website for yourself. This is your opportunity to show off the work you have completed during this class and display the creative and technical skills you have developed. Your portfolio site must be rich in graphics and utilize the techniques from our previous web project. You are also required to write about yourself and to complete some research and write about your possible future career path.

Portfolio Website Requirements:
• You must create a rough pencil sketch of your websites front page, points will be deducted if your results do not match your original concept. Some variation is acceptable.
• All buttons must have rollovers.
• The website must be designed with Illustrator or Photoshop and then sliced and exported to Dreamweaver.
• Must have the following sections, a front page, about me, work samples, resume. You can have other sections if you want to add, but each page must have content.
• Write a 1 page biography about yourself to include in the "about me" section.
• Take a photo of yourself to include in the "about me" section, this photo can be turned into an illustration with Illustrator.
• Research 1 possible career you are interested in and write a 1 page paper about the career, what does in involve, what is the salary range, what kind of education do you need, how do you break into the career. Include this in your "about me" section.
• Show your best or favorite work samples, minimum of 3. You can include work from other art, design or ROP classes. Write a 1-2 paragraph summary for each work sample.
• Include your resume, cover letter and list of references in your resume section.

Meeting the minimum requirements above does not guarantee an A+. You must put the time and energy into the project and really use it as an opportunity to shine. Include more material and content and information to guarantee a stellar grade. Must be original work that you created, create some artwork, take some photographs, make a movie, write a paper... this is your portfolio.

Pencil Sketch and concepts are due friday.
Final Portfolio site is due June 6th

Check out these collections of amazing portfolio sites for inspiration:
16 Great Looking Portfolio Sites
50 Excellent Designer Portfolio Sites
50 beautiful and Creative Portfolio Designs
24 Kick A$$ Portfolio Designs

Ok, have fun!

 - SW

Advanced Students Only: Introduction to Flash Catalyst

Hello Advanced Students,
Flash Catalyst CS5 enables designers to expand their skillset and design user interfaces and interactive components for Flex based applications without writing code. Designers can rapidly prototype user interfaces using skinnable components and interactions, which can then be sent to clients for approval. These prototypes are based on the open-source Adobe Flex framework. Flash Catalyst combines an intuitive user interface and toolset—similar to those in Adobe Photoshop, Illustrator, and Fireworks—with the expressiveness, consistency, and reach of the Adobe Flash Platform.

For this assignment you must read and work through the following tutorial:

Flash Catalyst Tutorial: Getting Started with Adobe Flash Catalyst

This tutorial covers all the skills and techniques needed to take a concept from a static file to an interactive, multimedia interface. More specifically, you will learn how:

• To use best practices when building an Illustrator AI file and how to import the artwork into Flash Catalyst CS5.5.
• To turn a static file into an interactive user interface, including how to create individual user interface states and button components to enable navigation.
• Flash Catalyst uses layers to manage the visibility of artwork within different states. Within the specific tours state, you will create a popup area that contains upload form. In the process, you will learn about creating default and custom actions for state transitions between states, such as moving, resizing, and fading layers.
• To preview and publish the finished project to a SWF file and AIR application.

Note: This article discusses the use of Adobe Illustrator to create artwork for use in Flash Catalyst. You can also use Adobe Photoshop to create artwork; many of the hints and tips can be applied to a Photoshop .psd file.

Ok, have fun!

- SW

Advanced Students Only: Create a Dynamic Flash Menu Interface

Hello Advanced Students,

Below you will find several links to flash tutorials that will walk you through creating very cool, dynamic flash menu's and interfaces. You will use the techniques in your next project, creating a flash based website.

Flash Tutorial - Black and Orange Menu

Flash Tutorial - Rotating Menu with Action Script

Flash Tutorial - Glass Aero Menu Effect

Flash Tutorial - Modern Horizontal Flash Menu

Flash Tutorial - Advanced Flash Menu with Sound and FX

Flash Tutorial - Shaky Flash Menu with Action Script

Check them all out and pick one to work on...

Have fun!

 - SW

New Assignment: Logo Study and Design

Students, this is your new assignment. You will create a series of logo designs to explore different logo creation styles and then sketch and design a final logo design. I recommend you use Illustrator for this project. Photoshop is acceptable as well. Your final logo design will be used in your next project, your final portfolio website, so consider logo themes that describe you and will work well in different environments.

You will use your last name and design a logo around it, create an imaginary company, organization or think of what you would like to do if you begun your own business. For instance if I was doing this assignment I would create logo's for Wilson Enterprises, Wilson Design Group or Wilson Co. etc.

Rules and Principals of Logo Design:

1. A logo must me describable

2. A logo must be memorable

3. A logo must be effective without color

4. A logo must be scaleable. So it should look good at 12"X12" and 1"X1".

Your Assignment - Create 3 versions of each of the logo style examples below:

1. Typeface only. Create 3 logo's using a different font for each one. Pay attention to spacing between your letters. Think of clever ways you can make a simple font only logo have impact.

2. Typeface's combined. Create 3 logo's that use 2 different fonts, make your font choice strategic to add emphasis and draw attention.

3. Typeface plus an art element. Create 3 examples of an arranged logo that uses a typeface plus some simple elements, rectangles, lines or dots. Sketch on paper to aid your creativity if needed.

4. Typeface plus a shape or symbol. Create 3 examples of a logo that uses a typeface and an image or symbol that is relevant to your logo's subject matter. Sketch on paper to aid your creativity if needed.

5. Shape or Symbol logo with typeface. Create 3 examples of a logo that makes the symbol or shape dominant and the typeface subordinant. Sketch on paper to aid your creativity if needed. Include a written explanation and description of your symbol or imagery.

When these versions are complete you may begin the final stage.

6. Final Logo. You must pencil sketch 3 different logo concepts, they must be original designs Pick one and render it in Illustrator. Think about what your ultimate logo would be, sketch that and refine it. Then create that final logo with Illustrator or Photoshop. You must turn your pencil sketches in with your final work, you may sketch in your notebook if you like. Remember the Rules of Logo Design as stated at the beginning of this post.

Due Dates: Logo designs 1-5 are due Thursday!

Check out these logo designs from last semester:

Creative Thinking Exercises

Hello Students,
Today we are going to be working on some exercises to boost our creative thinking abilities.

Exercise #1 - Creative Thinking
This quick and simple quiz estimates how well you engage in creative thinking to identify problems and their solutions. For each question, type your brief answer into an email and send it to me, keep your answers ready to compare during our discussion. Read each of these 12 questions carefully.


Q: There is one word in the English language that is always pronounced incorrectly. What is it?
Q: A man gave one son 10 cents and another son was given 15 cents. What time is it?
Q: A boat has a ladder that has six rungs, each rung is one foot apart. The bottom rung is one foot from the water. The tide rises at 12 inches every 15 minutes. High tide peaks in one hour. When the tide is at it's highest, how many rungs are under water?
Q: There is a house with four walls Each wall faces south. There is a window in each wall. A bear walks by one of the windows. What color is the bear?
Q: Is half of two plus two equal to two or three?
Q: There is a room. The shutters are blowing in. There is broken glass on the floor. There is water on the floor. You find Sloppy dead on the floor. How did sloppy die?
Q: How much dirt would be in a hole 2 metres deep and 2 metres wide that has been dug with a square edged shovel?
Q: Suppose you are in Juneau, Alaska and drop a bowling ball from a height of three feet into a bucket of water at 10 degrees Celsius. Then, you drop a bowling ball of the same weight, mass, and size from the same height into another bucket at negative 10 degree Celsuis. Which ball would hit the bottom of the bucket fastest?
Q: What is the significance of the following: The year is 1978, thirty-four minutes past noon on May 6th.
Q: What can go up a chimney down, but can't go down a chimney up?
Q: If a farmer has 5 haystacks in one field and 4 haystacks in the other field, how many haystacks would he have if he combined them all in the center field?
Q: What is it that goes up and goes down but does not move?


type your brief answer into an email and send it to me...

Exercise #2 - Divergent Thinking
You will be given a limited amount of time to complete this exercise, write your answers into an email and send it to me when finished.


1) How many different uses can you imagine for a paper clip?
2) List another object that you think has many uses and list as many of those uses that you can imagine.

Exercise #3 - Visual Creative Process / The Doodle Game
1) Have a piece of blank paper and a pencil or pen at the ready
2) Make a random scribble on the paper, you can even do it with your eyes closed
3) Pass the scribble to your left
4) Take the scribble your partner handed to you and look at it, look at it right side up and on its side. What do you see? A bird? A face? Maybe a paper clip? Find the image hidden in the scribble and begin drawing to bring it to life.
5) Show your results when done, then look around to see others results


This is a great exercise to get your creativity going, and it can be played anywhere, with people of all ages and drawing skills.

Have a great weekend!


 - SW

Career Locker

Hello Students,

It's time to take out those resume's you wrote earlier in the year and get them polished. We will be using career locker, a great website resource to help you discover your own talents, what interests you and it has great tools for resume and cover letter creation.

If you have not yet done so, please go to http://CareerLocker.com and register, your registration code is scc-c846

Make sure you check the box that says wilson-comp graphics

When your registration is complete:
• Complete the Personal Globe Inventory in the Assessments section
• Complete 3 other assessments of your choice
• Go to the Job Seeking section and work through the Resume Maker and Cover Letter Writer

Be prepared to show and discuss your results,

 - SW

Flash Continued...

Hello Students,

If you are done with your introduction to flash tutorials then see if you can work through this tutorial... it shows you how to create an 8 frame walk cycle of your own cartoon character.

Flash Tutorial - 8 Frame Walk Cycle

Have fun!

 - SW

Intro to Flash

Hello Students,

This week we introduce the amazing program, Flash CS5 by Adobe. If you have a basic understanding of the WWW, HTML and buiding web pages, you can add incredible animation, games, sound and interactive buttons to your websites. Flash even has its own programming language but doesn't require any programming skills and is easy to learn.

Flash uses vector graphics, which means that your vector drawings can be scaled to any size without losing quality. Flash loads faster than larger animated images or video and allows interactivity.

We will use the tutorials from wsschools, each tutorial shows a sample of the end result and step by step instructions. We will work through a few together and then you will complete the rest.

Start here and read each page and complete each tutorial:
http://www.w3schools.com/flash/flash_intro.asp

TIP: If you prefer you can create artwork in Illustrator and import it into Flash. This only works because
they both create vector graphics.

Using Photoshop, Illustrator and Indesign Together: Original Magazine Cover Design

Hello Students,

Your new assignment is a combination of Photoshop and Indesign. Find a high resolution image and process the photo with filters in photoshop and use it to design an original magazine cover with Indesign. You will create additional artistic elements with Illustrator as well. This project is a good lesson in utilizing multiple software tools.

Find a high resolution photo, or take a photo with your own camera. Crop the photo to 8.5X11 inches and process it with the series of filters and layer effects in this tutorial:
Photoshop Tutorial - Cutout Painting Photo Effect

Now you have original artwork to use in the following magazine layout tutorial, make sure to read all directions before proceeding:

Indesign Tutorial - Magazine Cover

Here is the progression of my magazine cover design.

Designs are due on Friday. This should be a great piece for your portfolio, have fun!

 - SW

ROP Career Development: How To Write A Great List Of References

Hello Students,

A list of references is a crucial piece to your job hunting toolkit. In conjunction with your resume and cover letter, it can provide valuable insight for an employer that may be considering you as a potential hire. In the job market, employers can contact one of your references to ask about you, if you worked together and/or if your reference believes you are a trustworthy and dependable potential employee.

Your assignment is to create a list of references, formatted in a similar fashion to your resume and cover letter.


Who makes a good reference:
• Teacher
• Coach
• Counselor
• Present or past employer
• Family Friend

References to Avoid: 
• Anyone under 18
• Personal friends
• Family members
• Anyone who cannot speak highly of you

Tips:
• The format and heading of your reference sheet should match your resume.
• Include at least three references.
• All references should be responsible adults who know you well and can speak to your
character, skills, and work habits.
• Always ask whether or not someone is willing to be a reference for you.
• Once you have gotten approval to use someone as a reference, verify the address and
phone number he/she wants you to use.
• If you ask someone to write you a reference letter, provide an updated resume and any
other information that will help them write the letter. Be sure to include who the letter
should be addressed to and provide a self-addressed envelope if it needs to be mailed.

Use the following format to list each of your references:
        Person’s Name:   Bob Smith
        Address:  35 Pacific Ave.
        Santa Cruz, CA 95060
        Phone Number:   (831) 438-2468
        Title & Place of Work: Business Owner  Pacific Springs Water

You must have 3 references on your list, format should match your resume and cover letter. Due Friday.

- SW

ROP Career Development: How To Write A Great Letter of Introduction

Hello Students,

In the job hunting arena your resume, cover letter (or letter of introduction) and list of references is a powerful trifecta. Today we move onto the cover letter.

Your cover letter should have the same formatting at the top of the page, so your name and contact info doesn't change.

Your cover letter ( or letter of introduction ) is the place to introduce yourself in a less formal manner than the resume, but should still remain professional.

Begin by introducing yourself, who you are, what you do, what your special area of training is and what kind of job objective you have. You can list special skills and abilities and talk about current activities (educational or professional) and what your short term goals are.

Take a look at the sample cover letter on page 10 of the ROP Portfolio Handbook.

Some tips to writing a good great letter of introduction:

• Always address the letter so someone specific, customize it for each job interview.
• Always sign the letter at the bottom.
• Be sincere but do not mention personal motivations for your job search or preference.
• Your writing style should be clear and concise, include only pertinent information.
• Keep the length to about 4 paragraphs, 6-4 lines each.
• Keep the look consistent with your resume

Ok have fun!

 - SW

Advanced Students Only: Create a Grid Based Resume, Cover Letter and List of References

Hello Advanced Students,

Your newest assignment is to create a grid-based layout for a resume, cover letter and list of references. You will use InDesign and your previous resume's and career materials for this assignment.

Follow the tutorial below, customize the color and layout to make it unique. Create your resume first and then modify it for the letter of introduction and your list of references.

Grid Based Resume Layout Tutorial

All 3 pieces are due on monday.

Have fun!

 - SW

How To Make an Animated Gif in Photoshop

Hello Students,

Making an animated Gif is super easy. You can make fun simple animations with ease, create one to add to your website. It could replace a banner, or just be a small animation on your home page.

How to make an animated Gif with Photoshop CS5:

• Launch Photoshop
• FILE / OPEN a new document at your desired size, I made mine at 200X180 Pixels. It's a good idea not to make Gif files too large, otherwise they can take along time to load over an internet connection.
• Your animation can be a series of images, photos etc. You can hand draw each frame the animation also. The key is to set up separate layers that you will turn into frames of animation.

• Go to the WINDOW / ANIMATION palette and set up your frames across the timeline. Drag the ends to begin and end a frame. Use the play button to watch the animation.

Go to FILE / SAVE FOR WEB AND DEVICES to export your animation as an animated Gif file. Make sure to set your looping options.

Open your Gif file in a web browser to test it. Here's my result:

If you make an animated Gif file make sure to post it to your Blog as well as using it in your current website project. Have fun!

 - SW

Advanced Students: Flash Walk Cycle Assignment

Hello Advanced Students,

You assignment (after finishing our initial flash tutorials) is to work through this advanced walk cycle tutorial. Your character drawings can be simple stick figures, or more detailed... depending on your drawing skills. The tutorial will "walk" (get it?) you through creating an 8 frame walk cycle animation. Have fun!

Read all details before proceeding:

Flash Tutorial - 8 Frame Walk Cycle Animation

Have fun!

Helpful Tips and Tricks

Hello Students,

Here are a few helpful tricks for your graphic based website:

How to make an animated GIF file in Photoshop

Create buttons with rollovers with Photoshop and Dreamweaver

How to add text over an image in Dreamweaver

 - SW

New Assignment: Graphic Based Website

Hello Students,

You newest assignment is to create a small website (based on your previous html project) using the "Photoshop to Dreamweaver" technique. This is your first graphic based website and will prove challenging. Use class time wisely, missing class time or wasting time will severely impact your ability to complete this project. Your Photoshop design should reflect the 7 hours of class time given for the work.

1. You will create a homepage template complete with your name at the top, photo banner and a graphic menu bar. Leave an area below to use for content.

2. Then you will use the "slice tool" to cut up and output an html file and compressed graphics ready to edit into a website with dreamweaver.

3. Add any extra formatting to your template in Dreamweaver, center your page and elements and begin programming your buttons into links.

4. Create copies of your template and rename into the appropriate file names for your menu navigation. Do not do this step until all programming and edits are made to the template page. Any errors will have to be fixed 4 or more times otherwise.

5. Edit each page for content, such as your home page, contact page, links, about me etc... each page should have unique content to test your navigation.

REQUIREMENTS:
• You must use Photoshop to create your original design and Dreamweaver to insert the proper HTML tags.
• Each page must contain a simple menu at the top for navigation
• Must have a total of  4 pages, more is allowed for extra credit. Page titles can be "Home, About Me, Contact, Favorite Websites".
• Include 1 image or photo on each page.
• Include at least 3 links to external websites (for instance your blog, the class blog etc...).
• You must include your email address either on your contact page or in your menu.


Deadlines:
1 Week for Graphic Design and Photoshop Work
1 Week for Programming


Extra Credit:
- Create an animated Gif for your page banner
- Create buttons with rollover states
- Create a seamlessly tiled background for your page template


Inspiration:
Check out these links for help with the PSD to DW technique or if you are looking for
some website design inspiration


100 Great Simple Website Designs

Workflow Video:
PSD- Dreamweaver Website Part 1 - How to "slice" up a design to prepare for coding

PSD - Dreamweaver Website Part 2 - How to code your sliced up PSD page

Tutorial Links:

Tutorial - Grungy Paper Texture Website Design

Tutorial - Highly Textured Website Design

Tutorial - Grungy Translucent Website Design

Tutorial - Unique Colorful Website Design

Have Fun!

 - SW

Web Design Good and Bad: Principals and Elements of Design

Elements of design

Design elements are the basic units of a visual image. These elements include:

Space

Space is the area provided for a particular purpose. It may have two dimensions (length and width), such as a floor, or it may have three dimensions (length, width, and height). Space includes the background, foreground and middle ground. Space refers to the distances or areas around, between or within components of a piece. There are two type of space: positive and negative space. Positive space refers to the space of a shape representing the subject matter. Negative space refers to the space around and between the subject matter.

Line

Line is the basic element that refers to the continuous movement of a point along a surface, such as by a pencil or brush. The edges of shapes and forms also create lines. It is the basic component of a shape drawn on paper. Lines and curves are the basic building blocks of two dimensional shapes like a house's plan. Every line has length, thickness, and direction. There are curve, horizontal, vertical, diagonal, zigzag, wavy, parallel, dash, and dotted lines.

Balance

Balance can be either symmetrical or asymmetrical. Balance also refers to a sense that dominant focal points don't give a feeling of being pulled too much to any specific part of the artwork. Balance can be achieved by the location of objects, volume or sizes of objects, and by color. It can also be achieved by balancing lighter colors with darker colors, or bold colors with light neutral colors.

Color

Color is seen either by the way light reflects off a surface, or in colored light sources. Color and particularly contrasting color is also used to draw the attention to a particular part of the image. There are primary colors, secondary colors, and tertiary colors. Complementary colors are colors that are opposite to each other on the color wheel. Complementary colors are used to create contrast. Analogous colors are colors that are found side by side on the color wheel. These can be used to create color harmony. Monochromatic colors are tints and shades of one color. Warm colors are a group of colors that consist of reds, yellows, and oranges. Cool colors are group of colors that consist of purples, greens, and blues.

Shape

A shape is defined as an area that stands out from the space next to or around it due to a defined or implied boundary, or because of differences of value, color, or texture.^[1] Shapes can also show perspective by overlapping. They can be geometric or organic. Shapes in house decor and interior design can be used to add interest, style, theme to a design like a door. Shape in interior design depends on the function of the object like a kitchen cabinet door. Natural shapes forming patterns on wood or stone may help increase visual appeal in interior design. In a landscape, natural shapes, such as trees contrast with geometric such as houses.

Texture

Texture is perceived surface quality. In art, there are two types of texture: tactile and implied. Tactile texture (real texture) is the way the surface of an object actual feels. Examples of this include sandpaper, cotton balls, tree bark, puppy fur, etc. Implied texture is the way the surface on an object looks like it feels. The texture may look rough, fizzy, gritty, but cannot actually be felt. This type of texture is used by artist when drawing or painting.

Form

Form is any three dimensional object. Form can be measured, from top to bottom (height), side to side (width), and from back to front (depth). Form is also defined by light and dark. There are two types of form, geometric (man-made) and natural (organic form). Form may be created by the combining of two or more shapes. It may be enhanced by tone, texture and color. It can be illustrated or constructed.

Value

Value is an element of art that refers to the relationship between light and dark on a surface or object and also helps with Form. It gives objects depth and perception. Value is also referred to as tone.

Principles of design

The principles of design govern the relationships of the elements used and organize the composition as a whole. Successful design incorporates the use of the principles and elements to serve the designer's purpose and visual goals. There are no rules for their use. The designer's purpose and intent drives the decisions made to achieve harmony between the elements.

The principles of design consist of:

Unity

Unity refers to a sense that everything in a piece of work belongs there, and makes a whole piece. It is achieved by the use of balance, repetition and/or design harmony.

Harmony

Harmony is achieved through the sensitive balance of variety and unity. Color harmony may be achieved using complementary or analogous colors. Harmony in design is similarity of components or objects looking like these belong together. Harmony may be visually pleasing and harmony is when some of the objects like drapes and couches share a common trait. A common trait between objects could be: color(s), shape(s), texture, pattern(s), material, theme, style, size, or functionality.

Contrast

Contrast is the occurrence of differing elements, such as color, value, size, etc. It creates interest and pulls the attention toward the focal point.

Repetition (rhythm, pattern)

The recurrence of elements within a piece: colors, lines, shapes, values, etc. Any element that occurs is generally echoed, often with some variation to maintain interest. Rhythm in interior design also may be used to reduce randomness.

Variety (alternation)

The use of dissimilar elements, which creates interest and uniqueness. Variety like a painting or some reflective wood panels added on a plain wall may be used to reduce monotony. Helps infuse color to a house decor to attempt to increase design beauty.

Emphasis (dominance or focal point)

Emphasis refers to areas of interest that guides the eye into and out of the image through the use of sequence of various levels of focal points, primary focal point, secondary, tertiary, etc. Emphasis hierarchy may give direction and organization to a design, and avoid subconscious confusion to sometimes improve the design's visual appeal and style. Emphasis hierarchy or focus is not giving each object in a project equal dominance within a piece of work. Emphasis or dominance of an object can be increased by making the object larger, more sophisticated, more ornate, by placing it in the foreground, or standout visually more than other objects in a project. The primary focus point or area receives the largest emphasis in a room.

Proportion (scale)

Proportion involves the relationship of size between objects. Proportion is also relative sizes of surface areas of different colors. Proportion also depends on functionality of object. Art painting can be given the correct size in relation to room to make it an effective decorating component or source of color.

Functionality

A design must have good functionality. Proper functionality is simply the best possible design and best possible location of this design that the occupant(s) requires. Such designs are clean, nearly sterile, tidy, brightly lit, warm, visually appealing, is relatively dry, has relatively clean and healthy breathing air, and exceeds high level health and safety standards. Great functionality and best possible materials for the function usually also increases visual appeal.

Proximity

Proximity is the placing of similar objects closer together physically, and unlike objects further apart. This aids in creating unity. For example, different furniture styles with different colors compressed in a small bedroom does not look as nice as the same furniture placed further apart in a very large living room.

Graphic Based Website Phase 1: Flowchart

Hello Students,

One of the first phases to any successful website development is creating a flowchart. A flowchart is a visual organization tool to help you map out the many pages, content and flow of your site.

A flowchart is a type of diagram that represents and algorithm or process. By drawing boxes and connecting them with arrows we create a diagrammatic representation that shows step-by-step how a user would navigate our website.

There are many different types of flowcharts, and each type has its own language of boxes, arrows and other notation. The two most common types of flowchart elements are:
• A rectangular box, usually called an activity
• A diamond shaped box, usually denotes a decision

For our flow chart we will use mostly boxes, with connecting arrows to simulate the floor plan of our website.

A flowchart to determine if a light bulb is burned out.

You assignment is to create a flowchart for your graphic based website, this can be a mirror of your previous html project. Use Illustrator or Photoshop to draw out your flowchart, label it and make sure your website flow looks optimal.

 - SW