Follow a design process - Research

Define the Problem

Last week we defined the design challenge

• user/client needs
• constraints

Discussion: How does this relate to Web Design?

Exercise #1: A client is opening up a new Sudanese Restaurant in Wagga Wagga. You have been tasked with the job of naming the restaurant and designing their logo which will appear on the shopfront. The owner is not available to answer any questions and is relying on you to come up with an appropriate solution without her input.

• Create a name for the business
• Design a suitable logo (sketch or describe your idea for a logo)

Start working on the task as individuals

Share your solutions with others

Discussion:

What were the users needs and constraints to consider?

What research did you find out?

What would have helped you to create a more suitable logo?

Research you could/should have done:

Interesting work & study environments
10 seeeeeriously cool workplaces

 

Australian Flag Research

Wiki: Australian Flag Debate

AusFlag: Our Own Flag

Research

How much research did you do last week?

How did this impact on the outcome of your design?

How much research did you do for todays exercise?

Read the following article: How to Extract the Facts with a Web Design Client Questionnaire

Exercise #2: Your next task is to design a website for the Sudanese restaurant.  In your own words, write down a list of questions you would ask the client before commencing work.  Post your website questionnaire on your blog.

Exercise #3: What types of content do you think are appropriate for the website?  Refer to similar websites and the website questionnaire for common examples of web content.  Post your list on your blog and give a brief description of each.

Next week: Client Liaison

Discussion: Prepare for your initial meeting with the client.  What items do you bring to the meeting?  What preparation is required if any?

Web Industry - Unit Intro

Materials Reminder: 

• Do you have a portable hard drive and a set or earphones/headphones?
• Have you got a visual diary?
• Have you purchased the items required for your drawing class? (may not need just yet - ask Dave)

Exercise #1: Check Moodle access & enroll in Cert III Media


Web Design Industry


Exercise #2: Go to www.seek.com.au (web jobs) and browse several web designer job listings.  What sort of skills does the successful applicant need to have? Post a list of these skills on your blog.

Exercise #3:
Browse some of the websites of the Top Digital Media agencies in Australia.  Take note of the web section of their portfolios:

• Mango Chutney (SA) 
• Canvas Group (Syd) 
• Reactive (Melb & Syd) 
• SOAP Creative (Syd) 
• Box Communications (Syd) 
• ERD Communications (Melb) 
• Katalyst Web Design (Adel)

History of Web Design

• Evolution of web design
• First ever www website

Discussion: What factors have enabled the web to grow and become what it is today?

• Mobile and portable devices (iPad, smart phone, laptop)
• Immediate access to Video cameras
• Social Media
• Bandwidth (faster internet)
• Browser Improvements (HTML5/CSS)
• Creative Software Improvements
• Increased Users & Input
• Increased business interest in the web
• Cloud computing (Apple iCloud, Dropbox, Google docs)

Next Monday (Interactive Sequences):

Next week you will begin learning how to create a website.  Your teacher will supply you with all of the content required for your first website. Later in the semester you will also create your own website.  The first thing you will need to consider for your second website is its purpose.  You have two options

1. Create a website for a social cause that you are passionate about
2. Create a website for a real business that doesn't have a website (they don't have to use yours!)

Start thinking about a social cause or business that you would like to design a website for.  Post the name of the business/cause on your blog and any info you can gather about it to help explain your project to the rest of the class.

Interactive Sequences - Intro to Prezi & Flash

Levels of Interactivity
Discussion: What types of multimedia have the greatest interactivity with the user? Rate them.

Prezi (online presentation tool) - basic interaction






Example: School of Art & Design Prezi - http://prezi.com/qn7xcm9nhltk/school-of-art-design/
Demonstration: How to create and edit a Prezi

Exercise #1: Create a Prezi that describes you and your multimedia journey.  I suggest you have a slide for each of the following:

1. Name & Photo
2. Hobbies/Interests outside of multimedia
3. Existing multimedia software skills
4. What you want to learn during the course
5. Careers you are interested in

Once complete, post a hyperlink to your Prezi on your blog.

---

Flash Games
Exercise #2: Visit the Orisinal website. Play at least 5 different games. Think about the interaction you have with the game as you play. What input are you having and how does the game react?

Discussion: What would a game be like if it had little/no interactivity? Think of two games in the same genre that have vastly different levels of interaction.

Intro to Adobe Flash
Create an object that you can interact with

1. Draw a circle on the stage using the Oval Tool (shorcut - O)
2. Right-click on the circle and choose 'Convert to symbol...'
3. Give the circle a name 'circle'
4. Choose type 'Movie Clip'
5. Click 'OK'
6. Right-click on the circle and choose 'Actions'
7. Copy and paste the following code into the new window:

onClipEvent (enterFrame) {
 if (Key.isDown(Key.LEFT)) {
  _x--;
 }
 if (Key.isDown(Key.RIGHT)) {
  _x++;
 }
 if (Key.isDown(Key.UP)) {
  _y--;
 }
 if (Key.isDown(Key.DOWN)) {
  _y++;
 }
}

     8.  Close the Actions window
     9.  Press Control+Enter to Preview your movie
   10.  Use the directional keys to move your circle around the screen

Exercise #3: Experiment with basic Adobe Flash features, such as Motion and Shape tweens

Follow a design process - Define the Problem

What is design?

"A plan or convention for the construction of an object or a system" -  Cambridge Dictionary of American English

Watch:  Paul Bennett finds design in the detail

Exercise #1: Redesign the Australian Flag for a 2012 audience

Break up into groups and brainstorm the following:

1. Define the problem.  What is 'wrong' with the current design? What works in the current design?
2. Possible constraints - audience (social and ethical issues, attitudes of Australian's and foreigners), medium (various formats flags are displayed), purpose (what does a flag do?)

Present your concept and explain what the problem was, the various factors that were considered, and how you solved the dilemma.

Discussion: How does the design process relate to Digital Media?

Produce Photos - Intro to Adobe Photoshop

What is Photoshop and what can it do?

http://psd.tutsplus.com/articles/web/60-spectacular-examples-of-photoshop-design-and-art/
http://www.noupe.com/photoshop/45-brilliant-examples-of-photo-manipulation-art.html


Photoshop Interface and Tools


Create a new document

• Dimensions
• Resolution
• RGB Vs CMYK
• Background options
• Color Profiles
• Pixel Aspect Ratio

Painting Tools

• Brush Tool
• Eraser
• Paint Bucket Tool

Exercise #1: Experiment with these new tools


Open an Existing Photo


Place another photo in the same document

Move Tool

• Auto-select
• Transform Controls
• Layers

Marquee Tool

• Feathering
• Fixed Ratio and Size

Magic Wand

• Tolerance
• Anti-alias
• Contiguous
• Sample all Layers

Crop Tool

• Rule of Thirds

Eyedropper

• Sampling Ring
• Point Sample vs Average

Exercise #2: Correct exposure and colour of some sample photos





Panoramas - What is a panorama?
Examples of a 360 panorama (Quicktime VR). Example #1 Example #2 Example #3
Demonstrate how to PhotoMerge (manual and automatic stitching).  PhotoMerge is a really useful and efficient tool for some images, but you may need to manually stitch images if PhotoMerge output is not desirable.
Photo-stitching Tutorial (video)

Exercise #3: Create a panorama using Photo-stitching techniques

Interactive Sequences - Unit Intro

What is interactivity?

Interactivity - "Allowing or relating to continuous two-way transfer of information between a user and the central point of acommunication system, such as a computer or television" (Collins English Dictionary - Complete & Unabridged 10th Edition).

Further Reading - What is Interactivity?

• History of Interactivity and Computers (DOS, Command-based Games)
• Examples of interactivity
• Website interactions (brainstorm)
• UniSA Interactive House
• Nike - History of Flight

What software will I be using?

• Prezi (online presentations) - FREE
• Adobe CS5 Flash Professional
• Adobe CS5 Dreamweaver
• Adobe CS5.5 Master Collection (Usually = $4,344; Student Discount = $604)

2012 - Welcome!

Introduction

• About your teacher
• OHS 
• Everyone's responsibility
• Report Hazards (pink slips)
• Physical Hazards (trip hazards - no obstacles in walkway such as bags, electrical - don't touch power or computer hardware, no food or drinks near electrical, safe manual handling - bend at the knees)
• Emergency Evacuation Point (Oval car park on Coleman st - East of D Block)
• Under the influence of drugs or alcohol
• Occupational Overuse Syndrome (OOS)/ Repetitive Strain Injury (RSI)
• Ergonomic sitting position at a desk
• OHS Further Reading:
• OHS_Learner_Guide_p7-14.pdf
• OHS_Learner_Guide_p15-20.pdf
• Meet class members
• Why are you here?
• What are your expectations of the course?
• What are your teacher's expectations of you?
• School Overview, TAFE/CSU Pathways & Timetable
• School of Art & Design - http://prezi.com/qn7xcm9nhltk/school-of-art-design/
• Cert III in Media timetable available @ www.facebook.com/tafeart
• Network, Blogger, Facebook & Moodle access

Exercise #1: Sign Up/Log in to Facebook and LIKE the Art & Design Facebook Page

Exercise #2: Sign up to Blogger.com and create your own blog to document your working progress throughout the course.