Sunday, June 22, 2014

Thank You Web Design Class of 2014


Thank you to all my great students from this years ROP Web Design class. There were some very impressive portfolios and I look forward to seeing a few of you in my classes next semester.



This blog will go live again for the spring semester 2015 ROP Web Design class.

- Mr.W

Wednesday, June 11, 2014

Design Contest: Design The "_________" Of The Future!



Hello Students,

Our final class exercise is a design competition.

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.


Format: Final artwork must be displayed on screen. You can make a single image or presentation in powerpoint, flash etc. 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. Check out my own design for an electric sports coupe below.

Wait for my mark to begin!

BMW M1E Electric Prototype Automobile Design Concept by Seth Wilson

Tuesday, May 27, 2014

New Assignment: Guest Speaker Synopsis Page

Hello Students,
Your new assignment is to create a written synopsis page that reflects on the wisdom, insight and advice from the many guest speakers we have hosted in our class. Create your written content, format it with HTML and CSS and connect it to your portfolio page. Upload the final document to our server and create access to it through your online portfolio for full credit.

Guest Speaker Synopsis Page Assignment:

Written Content:

  • Assemble your speaker notes together and use them for the source of your information
  • Create a short dossier one each speaker that has visited our class, name, company or website, professional title, education, work history, career pathway
  • Write up any insight or advice you gained from the guest speaker
  • Include a memorable quote from the guest speaker
Format Content:
  • Create your synopsis as a text file, then convert it to HTML
  • Format your content with HTML tags, bold the speakers name as a header for each dossier and make the text big
  • Use italics and quotation marks to highlight the guest speakers memorable quote
  • Use unordered lists to organize the information in the dossier
  • Use a CSS file to format your document, add color to the background and text, use a font other than default, but make sure it is easy to read
  • Use div tags to make boxes that arrange or divide each guest speaker dossier... the style is up to you, just make sure the information is well organized and easy to read
Connect content to your portfolio:
  • Modify your portfolio to include a link to this new document
  • Upload the new synopsis page and updated portfolio to our server for full credit
Due friday!

- Have Fun
   Mr.W

Friday, May 16, 2014

Web Design Reverse Learning Project


Hello Students,
In this project you will research, write and guide the class through a learning exercise. Use the internet to research a specific topic or activity or use your own knowledge as a base for creating an engaging exercise. Follow the guidelines for writing interesting lessons below and be ready to present to the class. You can use movies, powerpoint presentations, hand outs or online resources to enhance your activity.

Web Design Reverse Learning Project:
Use all resources available to write and develop an fun exercise or activity that can be taught to the class in about 10 minutes or so. Follow the structure laid out below to format your lesson. Teach the class a skill that is useful and relevant to using computers, creating digital media, using the internet or other related IT skills, techniques or concepts.

Getting Started:
  • Think of something you would like to teach to the class, must be related to web design, digital media, IT, internet or digital literacy skills... it could be a cool piece of code that enhances a website or a cool trick or hack you learned... thing of something fun that everyone can try
  • Use the internet to research and gather resources, assets and information
  • Use presentation software like powerpoint to create a presentation or use work to create hand outs, you could even use a video to help deliver your information or to engage the audience
  • Follow the structure laid out below to create a compelling activity, a good lesson will have a hook to get the audiences attention peaked, information should be presented well and there should be some kind of hands on activity.
  • Be ready to present and teach the class
How to write a good lesson for instruction:
Follow the outline below to create your lesson or project, try to have something for each section detailed in your presentation. Use my model lesson as a guide if you need more clarification.

Objectives and Goals: State the objective or learning outcome for your project. What do you expect people to be able to do when your lesson or activity is complete

Hook or Anticipatory Set: Use something to engage the audience and get their brains primed for learning. This could be an interesting image or even a video or a prop. It should be relevant to the material you are covering in your lesson

Lecture or Present: Talk about the material in your lesson or activity, provide some background information or history that is relevant. Discuss or present details about the material. A few bullet points or slides and images are all that is needed to frame the activity

Hands On Activity / Guided Practice or Independent Practice: Have a hands on activity for the class to engage in, or an independent practice activity for students to put their new knowledge to work

Model Lesson: How To Customize The Icon Of Your USB Flash Memory Thumbdrive:












Tuesday, May 6, 2014

Portfolio Wrap Up: Print Portfolio


Hello Students,
Having a polished and professional looking portfolio is key to your success in finding work after High School and moving on to developing a career. Download the ROP Portfolio Handbook to use as a guide for creating your own portfolio.

Examples of student portfolio's from a computer graphics course.

Remember that the best portfolio in class will be sent to the portfolio design competition that ROP has at the end of each school year, your portfolio will compete against other classes across the county and there certificates for finalists and a prize for the winner.

A judge evaluates print portfolio's from past entrants...

Portfolio Development Assignment:
  • Your portfolio can be created with microsoft word or with Indesign
  • The final file you turn in to me must be a PDF document
  • Portfolio must meet the requirements in the ROP Portfolio Handbook
  • Your portfolio cover, table of contents and all materials should look clean and consistent. Use consistent design style across all aspects of your portfolio. The more extensive your portfolio is the better, that includes writing about your projects to document your learning progres

Your Portfolio must contain in this order:
  • Cover page with your name, class title, year. Spend some time on this, it should show good design skill and be reflective of your personality
  • Table of contents
  • Letter of Introduction
  • Resume
  • Handwritten Job Application 
  • List of References
  • Letter of Recommendation -  cannot be from your ROP teacher or a family member
  • 3 or more work samples with written explanation about the work, why is it important to your career choice? What did the project entail, what were the challenges and difficulties? Give us details. 
  • You are responsible for printing and binding your portfolio
  • Sky is the limit, you can add your own style to the entire portfolio
How Your Portfolio Is Evaluated:
  • Contains required content and format
  • Well organized
  • Free of grammar errors
  • ROP related work samples
  • Shows creativity
  • Shows skill development
  • Appropriate for use in job search
  • Professional yet creative appearance

Use this as a rough guide to laying out your own portfolio...
Ok have fun!

- Mr.W

Monday, May 5, 2014

Researching and Networking



Hello Students,
Your next assignment is to research web designers and developers that live in Santa Cruz County. Developing skills in networking is essential to future opportunities beyond school and college. After researching your designer you will contact them and ask them to visit our class as a guest speaker or to participate in an informational interview either by phone or via email. Hopefully we will have a good number of willing participants to visit our class.

Networking is a valuable skill, it can give you insights into different industries and open job opportunities that may not have been available to you.

Researching and Networking Project:
  • Use the internet to find and research 2 local web designers, developers, programmers or IT specialists. You can use google to refine your search. You could even try looking in the phone book. Look up their website, portfolio or even if they have an office location in town. They could be web designers, coders, IT specialists, engineers, developers, product developers etc. Take time doing the research and find someone who's work interests you
  • List the persons name, website and links to any work they have done as a post on your blog
  • Contact them via email or telephone, refer to the script below as a guide to introduce yourself and ask questions, above all be professional. 
  • If they can't make a public appearance, ask them if they would be willing to give an informational interview either on the phone or via email. Type up the results of your interview and post to your blog.
  • We want to know how they got their training, what is their education, how long have they been working, who are their clients and how do they find new clients, how do they keep their skills current? We also want to know what kind of skills are currently in demand and where do they think the industry will be in 2-5 years? What skills will be in demand in the near future?
  • If you are conducting an informational interview, here are some more questions you can ask
  • When you have completed your research or informational interview create a dossier and email it to me to get credit for the assignment.
Introduction Script:
Dear _ _ _ _ _ _ _ _
My name is (your name here) and I am a web design student in the Regional Occupational Program at Santa Cruz High School. I am researching local web designers and IT experts as part of a class assignment. I really like your work and would like to ask if you would be interested in being a guest speaker in my web design class. Our class meets M-F from 9:45 to 11:15 AM, just let us know what date would be best. If you are unable to make an appearance than I would like to conduct an informational interview with you either through email or on the phone if possible. Thank you very much for your time and I look forward to hearing from you.
                                              - Sincerely
                                                 (Your Name Here)
                                                 (Your Email Address Here)
                                                  Santa Cruz High School Graphic Design Student
                                                  http://ropwebdesign.blogspot.com

Wednesday, April 16, 2014

New Assignment: Portfolio Website


Hello Students,
Your next assignment is to create a portfolio website that documents the skills you have developed in this course, documents the work you have completed and displays your prowess with writing html and css and incorporating graphics into your website. 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 projects. You are also required to write about yourself and to complete some research and write about your possible future career path, whatever that may be. You may draw upon and incorporate work you have completed any previous ROP class, or can include examples of any work or projects or hobbies that you are particularly proud of.

The organization of this site should mirror the ROP Career Portfolio.  Review the portfolio handbook in detail for tips on writing your letter of introduction and creating the other sections of your website. Download the ROP Portfolio Handbook to use as a guide for creating your own portfolio website.

Portfolio Website Requirements:
  • You must create a rough pencil sketch of your websites front page, points will be deducted if your results do not reflect your original concept. Some variation is acceptable. Your sketch should communicate the graphic look and physical layout of your page elements.
  • All buttons must have rollovers, extra credit for animated rollovers.
  • Must have the following sections:
    1. Front page or Main section - file must be named index.html for proper functionality. Think of this as the cover of a book about you
    2. About Me, this should contain your letter of introduction
    3. Work Samples, this should include graphic projects, animations, written assignments, lecture notes, etc...
    4. Career Development, this should contain your resume, but leave off information such as phone numbers and mailing addresses... only show email for contacts
    5. You can have other sections if you want to add, but each page must have content, text, photos, links, etc. No blank pages.
  • This project must be created with a text or code editing program such as Komodo or Notepad
  • Each page must display your web page title or name in the <title> area and self explanatory, such as "Seth Wilsons ROP Web Design Portfolio"
  • Each page must contain the HTML 5 DocType declaration that will enable you to use the HTML Validator, your pages should strive to validate 100%
  • Each page must contain the character encoding meta tag for utf-8 and each page must be formatted for utf-8 when created
  • The front page or main page of your project must be labeled "index.html"
  • Each page must contain either graphic buttons or text links to the HTML and CSS validators. Make sure you use the code to validate as HTML 5. Put these at the bottom of the page or incorporate them into your page design so that they are not obtrusive
  • Each page must be formatted with CSS and CSS3 or developed with Bootstrap
  • Each page should contain colors for text, backgrounds and link states
  • Each page should use the same font families and use consistent sizing, spacing and style
  • When complete the entire website must be less than 6Mb in file size so it can be uploaded to our servers. 

Portfolio Content Requirements:
  • Maximum size allotment for portfolio is 5 Megabytes
  • Write a 1 to 1/2 page biography about yourself to include in the "about me" section.
  • Take a photo of yourself to include in the "about me" section or the front page, this photo can be turned into an illustration with Illustrator or processed with Photoshop if you like. A camera can be provided upon request.
  • Research 1 possible career you are interested in and write a 1 page paper about the career, what does it involve, what is the salary range, what kind of education do you need, how do you break into the career. Include this in your "Career Development" section. You can use career locker for research, ask me for the password for access to career locker.
  • Show your best or favorite work samples in the work samples section of your website, minimum of 3 examples must be shown, more is encouraged. You can include work from other art, design or ROP classes. Write a 1-2 paragraph summary for each work sample.
  • Include your resume and letter of introduction in the career development section if your website. Do not include phone numbers or mailing addresses, only email addresses for contact info.

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, make it shine.

Grading for total of 100 points:
20 Points - Portfolio website meets assignment specs and requirements
20 Points - Portfolio contains all sections
20 Points - Portfolio links work correctly and is error free (including spelling and grammer)
20 Points - Portfolio has no missing graphics or elements
20 Points - Portfolio turned in on time and is awesome and is 5Mgb or smaller

Pencil Sketch and concepts are due: wednesday
Final Portfolio site is due: Early May

Check out these collections of amazing portfolio sites for inspiration:

Check out these examples of web page portfolio design from previous students:





Ok, stay focused, work hard and have fun!

 - Mr.W

Thursday, April 10, 2014

Flash Project


Hello Students, 
Your final project for web design is to create a flash project. You have your choice of project styles to create, you will be graded on your ability to learn the new program and create either an animation, a website or a game using flash.

Flash Project Final: Choose a Project

Flash Game:

  • Use the tutorial at flashgametuts to create a brick breaker game
  • Customize the artwork
  • Turn in a functional flash game that can be played on another computer by publishing the game as an executable


Animation: 

  • Create a 60 second animation using flash
  • Animation must have a sound track
  • Animation must use 2 or more sound effects
  • Publish your animation so that it can be played on another computer or uploaded to a website


Flash Based Website:

  • Create a website that has 4 sections using flash
  • Use buttons to create navigation for your webpage
  • Make your webpage about anything you want
All projects are due on wednesday

Tuesday, April 8, 2014

Introduction to Color Theory







Students,
Your next assignment is to create a color theory page with HTML  that shows some color harmony palletes and a short writing assignment.
Part 1 - HTML Color Page:
  • Create a new HTML Page, format it with CSS to match your portfolio page and label it "colortheory.html"
  • Make a link on your Web Portfolio to this new page
  • Create 2 boxes with the Div tag and make them 50X50 pixels. show 2 complementary colors in these boxes and label them Complementary
  • Create 3 boxes with the Div tag and make them 50X50 pixels. show 3 split-complementary colors in these boxes and label them split-complementary
  • Create 3 boxes with the Div tag and make them 50X50 pixels. show 3 analagous colors in these boxes and label them analagous
  • Create 4 boxes with the Div tag and make them 50X50 pixels. show 4 quadrilateral colors in these boxes and label them quadrilateral
Part 2 - Short Writing Assignment:
On your Color Theory page, write a short summary of the principals discussed, shown and demonstrated in this color theory lesson. Refer to your lecture notes. You can search for images online and research answers also. Try to address all the questions listed below:
  1. What are the 3 primary colors? 
  2. How are secondary colors created? Cite an example 
  3. How are tertiary colors created? Cite an example 
  4. What is the difference between subtractive and additive color models? 
  5. How can color affect our perception? 
  6. How does one color affect another? 
  7. Find an example or show an example of a greyscale image. 
  8. Find an example or show an example of a monotone image. 
  9. Find an example or show an example of an image that uses complimentary color.
  10. Make sure your images are small, no more than 100 pixels wide and are compressed properly.


- Mr.W

Monday, April 7, 2014

Understanding Computer Memory


Hello Students,
Use your notes from todays lecture and create a new page that is linked from your portfolio page.

Understanding Computer Memory Assignment:
  1. Create a new, properly formatted HTML file, save it in your portfolio folder, format it with your css file 
  2. Write 2 paragraphs answering these questions: 
    1. With all the electronic devices you own estimate how much memory they store. 
    2. How many floppy drives would you have to carry to equal the memory you have access too with your personal electronics? 
    3. How much internet traffic occurs in one day? 
  3. Add your notes from today’s lecture 
  4. Save and create a link to this file on your portfolio page
Have fun! - Mr.W

Monday, March 24, 2014

New Assignment: Create A Graphic Based Website With Photoshop and Dreamweaver


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 class time given for the work. Minimum effort will yield a minimized grade.

I will demonstrate this technique, take notes!

The Photoshop to Dreamweaver Process:


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. Do not stretch or move any of your image tiles or graphics, this can break up your tables.

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. 

PSD To Dreamweaver Project Details:
  • 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" or your choice.
  • Include 1 image or photo on each page - IMPORTANT: You must resize your photo to be smaller than your content window or it will disrupt the layout of your tiles
  • 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.
  • Create rollover buttons for your menu
Extra Credit:
- Create an animated Gif for your page banner
- Create a seamlessly tiled background for your page template
- Use one of the tutorial links below to create your website

Deadlines:
  • 2 Days for Graphic Design and Photoshop Work
  • 2 Days for Programming and Testing


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

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

Thursday, March 20, 2014

Long Term Project: Print Portfolio Development

Hello Students,
Having a polished and professional looking portfolio is key to your success in finding work after High School and moving on to developing a career. Download the ROP Portfolio Handbook to use as a guide for creating your own portfolio.

Examples of student portfolio's from a computer graphics course.

Remember that the best portfolio in class will be sent to the portfolio design competition that ROP has at the end of each school year, your portfolio will compete against other classes across the county and there certificates for finalists and a prize for the winner.

A judge evaluates print portfolio's from past entrants...

Portfolio Development Assignment:
  • Your portfolio can be created with microsoft word or with Indesign
  • The final file you turn in to me must be a PDF document
  • Portfolio must meet the requirements in the ROP Portfolio Handbook
  • Your portfolio cover, table of contents and all materials should look clean and consistent. Use consistent design style across all aspects of your portfolio. The more extensive your portfolio is the better, that includes writing about your projects to document your learning progres

Your Portfolio must contain in this order:
  • Cover page with your name, class title, year. Spend some time on this, it should show good design skill and be reflective of your personality
  • Table of contents
  • Letter of Introduction
  • Resume
  • Handwritten Job Application 
  • List of References
  • Letter of Recommendation -  cannot be from your ROP teacher or a family member
  • 3 or more work samples with written explanation about the work, why is it important to your career choice? What did the project entail, what were the challenges and difficulties? Give us details. 
  • You are responsible for printing and binding your portfolio
  • Sky is the limit, you can add your own style to the entire portfolio
How Your Portfolio Is Evaluated:
  • Contains required content and format
  • Well organized
  • Free of grammar errors
  • ROP related work samples
  • Shows creativity
  • Shows skill development
  • Appropriate for use in job search
  • Professional yet creative appearance

Use this as a rough guide to laying out your own portfolio...
Ok have fun!

- Mr.W

Monday, March 17, 2014

How To Write A Good Great Resume



Hello Students,
Having a solid resume is the cornerstone to your job future. A well written and well designed resume is what sets you apart from other job applicants. A perfectly written job application, a quality resume and a list of positive references is the job seekers trifecta. In this class we will teach you these skills and more. Below is a list of writing tips, read over it before finalizing your resume.

Link, right click to download: ROP PORTFOLIO HANDBOOK

Resume Writing Tips:
Have an objective:
Know the purpose of your resume and edit it for different job scenarios. Having a focused job objective listed on your resume will help you with attaining an interview and getting hired.

Back up your special skills with job experience:
List your skills but make sure your listed job experience, training or education reflects those skills. Are you really good at making websites? Let them know how and where you learned that skill.

Research and use the right keywords:
Every industry has its own language, research job offerings and pay attention to the keywords that are used. If you put your resume online with a job placement service they will often use certain keywords to search their database for potential hires.

Be descriptive with job experience:
A job title will communicate your role, but not the details of your work experience. List the duties, tasks, activities, skills and achievements that were part of your job.

Format your text:
Use bold text to start each section. Use bullets for lists. Make the document easy to quickly scan and read. Clarity of format is crucial, you have ten seconds before the employer will move on to another applicant.

List most recent job experience first:
This also goes for education, list the most recent first. If your still in High School you can say "future class of 2012", or "Currently attending HS".

List most important skills first:
When writing out your skill list make the most important skills the first ones on the list. If you are applying for a web design job, list your web skills first. Change and edit this for different industries/jobs.

Leave out the obvious:
It is not necessary to add "available for interview" or "references available upon request". References are standard and expected, and of course you are available for an interview. Thats the whole point!

Avoid negativity:
Don't trash talk past employers or state that you didn't like a past job. Simply state that you were looking for future opportunities.

Go with what you got:
If you haven't had work experience yet, just list any summer jobs, volunteer experience etc. If you have hobbies that are relevant to the job you can list those. If you don't have a diploma or degree then just list your estimated date for completion.

Proofread your resume:
Have your neighbor or classmate read your resume. Sometimes the spellchecker doesn't catch typos. The more eyeballs that see your resume before it gets in the hands of the employer the better.

Although these resumes contain similar information, styles do vary.



How To Write A Good Great List of References

It is incredibly important to develop a great list of references. These references will help you obtain jobs, college admission or acceptance into special programs.

Who makes a good reference?

  • Teacher
  • Coach
  • Counseler
  • Present or past employer
  • Family friend
  • Anyone that can speak highly of your abilities, skills and worth


References to avoid:

  • Anyone under 18
  • Personal friends
  • family members
  • Anyone who cannot speak highly of your abilities or skills

Important Tips:
The format of your references should match your resume exactly, same header, same fonts.
Do not include references on your resume
Include at least three references
All references should be responsible adults who know you well and can speak to your character and skills
Always ask whether or not someone is willing to be a reference before including them in your list
Verify the contact information before handing over to an employer

Format:
Use the following format for your references

Persons Name:   Bob Smith
Address:            123 Fake Street
                          Santa Cruz Ca, 95060
Phone #:             (831) 555-4321
Title and              Business Owner
work place:         Moland Spring Bottled Water

- Mr.W