DDM - Design for Digital Media
Diploma of Creative Industries (WDCI)

Teacher Name - lisa.cianci@vu.edu.au
Class Website - http://lisacianci.vucreativeindustries.com/2012/DDM

(login to the website: username = student; password = student)

Class 15 - Project Work - Image Gallery Project


Class: Discuss user requirements for an image gallery for both desktop and mobile screens. Look at some good examples of image gallery sites

 

Some interesting image gallery sites

http://frieke.com/

http://www.sonjamueller.org/

http://www.alessiopizzicannella.com/

http://www.karinpartin.com/

http://www.brandstudio.ru/safandula/

http://www.shuakashi.com/

http://www.cakefactory.com

http://pelfusion.com/showcases/25-beautiful-and-creative-photography-sites/

http://glazemoo.blogspot.com.au/2011/03/flickr-alternative-image-hosting-and.html

 

Discuss: what is good / not good about these sites? how do they look on mobile devices? how do they work on touch screens?

 

Assessment Task 3 - Image gallery website project

Refer to Class 14 and Class 12 notes to help you with the current assessment task.

Review the next assessment task - you should have begun researching good image gallery sites that work for desktop / smartphone or both interface types. This week, you will have time in class to write up your research and produce the word doc for the needs analysis. Make sure you have all of your links and other resources in class to complete the task. See the Assessment Task 3 document here.

 

Questions relating to last week's notes (to see if you looked at the references):

  • What was the first Web Browser software called?

  • What is the ARPANET?

  • Who is Tim Berners-Lee and what is he most famous for?

 

Lab: work on needs analysis

 

Today you will be working on the Needs Anaylsis for your image gallery designs.

This part of the brief has been defined in Assessment Task 3 as follows:

"Develop a needs analysis for an image gallery website and the different specifications required for desktop/mobile browsers. Discuss target audience, functionality, usability and UX (user experience).  Demonstrate extensive research and analysis of similar sites. Images to be created in Photoshop (captured from screen and edited in Photoshop), and placed into a Word/OpenOffice document alongside text content. Submit as PDF file."

You don't need to write a lot of text, just a paragraph or two for each section

You will need to have the following:

  1. What kinds of imagery will be in your gallery site?

  2. An idea of your target audience - who are the audience members for your image gallery?

  3. What are the device sizes and are they keyboard/mouse or touch-screen deviced? what are the usability and user experience (UX) requirements for the site? for example, is it a static image gallery or is it dynamic, allowing constant updates to the images? Can users comment on the images? Can they rate the images? Can users contribute to your image gallery or is it solely for your own content?

  4. A seletion of websites you have researched, that you can use to demonstrate good (and bad if you like) examples of image gallery designs that can work on desktop/mobile or both (see class 12 notes on Responsive Design )

  5. You can take image captures from the screen of the wbesites you have researched, and use this in your Word Doc alongside some brief text descritions of why you selected the site and how it relates to your proposed image gallery.

 

Document Sections (copy and paste these to your Word doc)

Needs Analysis

1. Target Audience
(who is it for?)

2. Usability / User Experience
(How will it work?)

3. Screen Sizes
(list a minimum of 2 screen sizes you are designing for)

4. Research
(what sites have you looked at? what do you like/dislike about them)

 

Design Specification

1. Design Overview
(what is the concept, metaphor or style you are applying to your image gallery?)

2. Wireframes
(where will the content be positioned? Header, footer, main content (images), navigation, menus, other? mock up some VERY simple wireframes in Photoshop.)

3. Style, Colour, Font, Buttons
(mock up some designs for the 2 screen sizes in Photoshop - you can copy and paste elements from the Internet if you like.)

4. Interactivity
(which elements are for click, touch, rollover, swipe, etc...)

 

Outcomes by the end of class:

You should have a basic draft of your Needs Analysis by the end of class, and be underway with your Design Specification. Submit to me for comment, and then I'll give you feedback and you can progress to the next stage of the project.

 

 

 

Other Things to Remember

You should have completed the following Assessment Tasks - please submit if you have not done so yet:

AT2 - Storyboard Trailer;

You should be continuing to work on the following Assessment Tasks:

AT1 - Blog (Keep adding entries to your blog)

Please see me in class if you are having any issues with assessment tasks. There will be time to work on these in class - think of the Lab session from 4-7pm as time to work on assessment tasks as well as class exercises, then you can ask me for help.