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

Web Design Final: 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 day of final for evaluation!

Have fun!

Special Guest Speaker: Melody Sharp, Web Designer, Developer and Wordpress Guru

"Become an expert in something" - Melody Sharp

Today our class was very honored to host Melody Sharp, a local web developer and designer and wordpress guru. Melody discussed her career and educational path with our class and how she entered into web development and became an expert in wordpress. Melody has a Masters Degree in comparative lit, worked in the magazine industry, marketing and authored a book about her experiences working in the male dominated magazine industry culture titled "Getting On Top, What Management Won't Tell You When Your Not One Of The Boys".  Melody has been studying web development and design for 15 years and founded a local wordpress meet up. Melody shared her insight and knowledge of web design, working with clients and how to keep skills current in an industry that is ever changing. You can see more of Melody's work at her website, melodysharp.com. Our class extends a big thank you to Melody Sharp for sharing her time, insight, experiences and advice with us. Thank you Melody!

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
• 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:

Experimenting with Visual Marker Recognition Systems

Visual Marker Recognition Systems:

Today in rop web design students learned how to use a visual marker recognition system to make music with d-touch.org's drum machine and sequencer programs. D-touch is a visual marker recognition system that enables the development of low-cost tangible user interfaces and mixed reality applications. d-touch supports markers that are both machine-readable and visually communicative to humans. This website is the home to the d-touch system and some projects related to it.

ROP Web Design students make music with a web cam and a visual marker system

Researching and Networking Local Talent

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. 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 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?
• If you are conducting an informational interview, here are some more questions you can ask

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

Student Showcase: Animated Gif's

Online Web Design Portfolio

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 Technical 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:

• Have an example of everything required in the ROP portfolio handbook, letter of introduction, letter of recommendation, resume, work samples
• 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.

Design Style:

• Your website should be professional and clean looking
• Your website layout should be easy to navigate and text should be easy to read
• Each page should show the same menu at the top for easy navigation
• Your website should show good design choices for fonts, colors and style
• Your website should demonstrate the techniques, skills and abilities you have studies during the course of this class

Website Flow/Organization:

Your website must follow the flowchart below as closely as possible...

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.

How Your Portfolio will be 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

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:

50 Excellent Designer Portfolio Sites

50 beautiful and Creative Portfolio Designs

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

Ok, stay focused, work hard and have fun!

 - Mr.W

Gif Animation Challenge

Hello Students,
Your newest assignment will challenge your animation and creativity skills to the max! Choose one of the challenges below to complete, but choose wisely!

Gif Animation Challenge:
Choose one of the subjects below to animate:

• A cat with bird wings is flying over a city and shooting lasers out of it's eyes
• Godzilla is a DJ spinning records on a turntable in a dance club
• Find a short video clip of a sword fight and replace the swords with Light Sabers
• Create a pixel animation of yourself as Nyan Cat, artwork must be original

LASER CAT COMPELS YOU TO COMPLETE THE GIF CHALLENGE!

Good luck!

- Mr.W

New Assignment: Making Animated Gifs

Hello Students,

Your new assignment is an introduction to making animated Gifs, and harnessing your skills to create a more elaborate animation or a cinemagraph style gif.

What is an animated Gif? A Gif file is a web safe file format that has a cool feature, it can have different frames like a video, you can also change the playback speed and duration per frame. Unfortunately they can't have sound. You can do some really cool stuff with Gif's, for instance check out this previous students blog with an animated banner.

More examples: http://fluxmachine.tumblr.com/

What is a Cinemagraph? A Cinemagraph is just a fancy digital photography term for an animated Gif that has the appearance of a still image (graph) with small portions of the image appearing to be moving or appear to be animated (cinema). Some Cinemagraphs will loop the animation constantly, some repeat with a delay to give the viewer a surprise when the photo they are looking at suddenly turns and looks back at them or blinks.

This cinemagraph is made from the frames of a movie and has a very short loop of just the eyes blinking...

Gif Assignment:

Part A

• Create an animated gif, you can use photographs to make a timed slideshow, or a short animation with sequential drawings
• Follow the instructions below as a rough guide only. There are several ways to make animated gifs in photoshop
• This is just a quick project to get you used to creating gifs. The final gif must display on your blog full size in order for animation to work, so make sure the image size is small enough
• This Gif should have at least 10 frames of animation

Part B

• Create a longer animation this time that loops perfectly. Try creating a character and animating them, you can use photos or cartoons or draw your own with the brush tool in photoshop, just create individual frames of animation as layers, 1 layer per frame... then you can use the layers to frames option in the animation palette sub-menu.
• You can use photos. Use the Continuous Shooting mode on a camera for rapid fire shooting of frames. A Video camera on a tripod may also be used, photoshop can read some video files
• tor a Cinegraph style animation Try to create an effect where just one part of the image is moving, such as eyes moving/blinking or the head turns and looks at the camera.
• Check out http://fernandojbaez.com/cinemagraph-tutorial/ for tips on making cinemagraph style images.

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. Im using some pictures I took of my dog.

• Click your top Layer, then while holding SHIFT click on your bottom Layer to select all layers
• On your Animation Palette Sub-Menu select Make Frames From Layers
• If you don't see individual frames in your Animation Palette, go to the Sub-Menu and select Convert To Frame Animation
• You can now designate individual durations on each frame.
• Go to FILE / SAVE FOR WEB AND DEVICES to export your animation as an animated Gif file. Make sure to set your looping options to forever.

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

Previous Student Work Samples:

Create a Graphic Rich Website

Hello Students,

You newest assignment is to design and program 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 HTML Process:

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

2. Use the "slice tool" to cut up the page and output an html file and compressed graphics ready to edit into a website with "Save for Web or Devices" function and choosing "Images and HTML" in the options.

3. Add any extra formatting to your template in Dreamweaver or Komodo, 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. Fix the html that is provided or rewrite the html.

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, such as a picture or just some text. When navigation programming is complete move on to the rest of the content for the page.

Graphic Rich Website Project Details:
• Make your website about something, it could be about you and your family, about your favorite band or video game or movie, it could be a website about squid, panda bears or squid eating panda bears... use your imagination!

• You must use Photoshop to create your original design and program it with Komodo or Dreamweaver

• Each page must contain a simple menu at the top for navigation

• Menu buttons are programmed with Rollovers

• 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 depending on the subject of your page.

• Include 1 photo or image on each page or more

• Include formatted text on each page that uses H1, H2 and P tags

• Include at least 3 links to external websites

Deadlines:

4 Days for Graphic Design and Photoshop Work

4 Days for Programming and Testing

Extra Credit:

- Create an animated Gif for your page banner

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!

 - Mr.W