DDM - Design for Digital Media
Class 12 - Design for Mobile Media
Class: look at responsive design for mobile devices, discussion & activity
What is it? What does it mean for designers of digital media? How does this relate to the 3rd Assessment Task?
There are so many devices and computers that access the Internet via web browsers these days. These devices all have different formatted and sized screens, and different orientations - landscape and portrait. With smartphones, the orientation can be changed with a small hand movement. So, how do we design interfaces that will suit all of these screen types?
Issues to consider:
Given the transient nature of the web - and the many kinds of software and hardware we use to access web pages, this kind of design practice is not sustainable. It would mean redesigning a web page each time a different device or screen size becomes available.
Responsive Design is a concept based upon Responsive Architecture, where buildings and public spaces are created that allow for more flexibility and sustainability as people occupy and move through them, such as detecting movement to turn on lights and heating/cooling, walls that are moveable, spacs that can have more than one function depending on who is using them. This idea can be applied to web design. So how do we do it?
The new CSS3 standard (which is a type of scripting that is used with HTML to create the style of a web page) allows for something called "Media Queries". These queries can check for properties like screen dimensions, or device type, then use different stylesheets (CSS = Cascading Style Sheets) to present the same content in different ways. It's the same web page, just with the sections rearranged and resized.
This is one of the reasons using grids and wireframes to design web pages is so important. Designers need to identify the different blocks of content on a web page, then consider how these should be placed for different types of screens.
If your Wordpress blog has a theme that uses responsive design, you will be able to see your blog with a different layout on your smartphone or tablet device. Give it a try!
Responsive Design uses methods like "Fluid Grids" and "Responsive Images" to present a web page that will look good and be readable on most devices.
Consider some websites designed for desktop, and how they might be re-presented for mobile devices. One school of thought at the moment believes that we should design for mobile devices first, then consider the larger screens.
How does this relate to Assessment Task 3? You will be designing a website image gallery that has to look good on desktop and mobile screens - the same content, but two different layouts. One will be larger and landscape oriented, the other will be small and portrait oriented (although the smaller screen should also work in landscape - allowing for the way smartphones can change orientation).
You will need to identify the blocks of content required for your image gallery design - title/header, navigation, main content area, information area, other elements? How would you position them for a large desktop monitor with a resolution with a width over 1400 pixels? or an iPhone with a screen width of only 320 pixels?
Exercise: on paper or use Photoshop if you prefer, look at your own blog site, or choose a site that you like, and draw the wireframes for the desktop layout, then draw a set of wireframes for how the same content could be placed for a smartphone screen, and you might even try iPad/tablet design if you want an extra challenge.
Example: look at this web page that shows some examples of simple wireframes that toggle between desktop and mobile:
Do the same thing (no need to animate it, just create static images or sketches) for your chosen website. choose 3 pages from the website and create 2 images for each page.
You may want to look at some responsive Wordpress themes aspart of your research for Assessment task 3 because many of them haveimage galleries or portfolio layouts that might give you ideas for your own designs.
*Just Google "responsive design", "fluid grids", "wireframes" and "design for mobile" to find many articles on this topic.
Favourite Flash sites
Provide your URLs for your favourite Flash sites, we will have a look at some in class.
Introduction to Assessment Task 3 - Image gallery website project
Review the next assessment task - you don't have to start working on it yet, but you might want to start researching good image gallery sites that work for desktop / smartphone or both interface types. In week 14 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.
Lab: Complete Storyboards and place images in Flash template
Today you will be working on the completion of images for the Storyboard animatic, and importing the images to Flash.
Class Exercise (From last week - if you missed it)
Using the Flash file provided, import your JPG or PNG image files into the Flash Library, and then place them on Keyframes in the Timeline so they can be seen on the Stage.
Manipulate keyframes and the FPS (Frames per Second) property to test the speed of play back, and investigate how the Navigation buttons work with ActionScript code Functions in the Flash file. Try Publishing a SWF file to test your Animatic.
1. Open the provided Flash file Template01.fla in Flash (this is a CS4 version file but it will open ion CS5 also).
2. Explore the Flash interface. Note the location of the Stage, Properties panel, Library panel, Actions panel and Toolbar panel. Note the Flash file Properties - how big the Stage size is (width and height in pixels) and also the speed of the Flash file playback (Frames Per Second - FPS). You can manipulate these if you want a different dimensions or speed. And the background colour of the whole file - you can change this to suit your colour scheme, or use a background image.
3. Before you import images to Flash, check your image file types and sizes. It is best to use JPG or PNG format, but you can also import Photoshop PSD files directly into Flash. I prefer to keep my Photoshop file as a working file and save out PNG or JPG images for Flash - it's much simpler. The main reason for doing this is because if I want to change something in the Photoshop file, or use it to generate multiple images for Flash, then I'm not changing the flat PNG or JPG files that Flash is linked to.
4. Once your images are ready, you can go the the File menu in Flash and choose Import to Library. you will be able to choose multiple files that will import into the Flash application, and then be accessible in the Flash Library panel.
5. Experiment with dragging your images to the Keyframes in the Timeline. I have created this template with the timeline structure already in place, so all you should need to do is drag and drop. Depending on your Flash skills, you might want to customise this file to suit your requirements, but if you don't know Flash, you can just work with what's already there without any prior knowledge of Flash animation.
6. To test your Flash Movie, use the shortcut keys (CTRL-ENTER for Win, CMD-ENTER for Mac).When you test a Flash file, it generates the SWF file which is the "Published" Flash file that you put on the web. You should see a SWF window open with your Flash file and it should be fully interactive, and playing at the FPS speed. Navigation should be working in the SWF. Close the window to keep editing the FLA file, and test again when you're ready.
7. You can also go to the File menu and choose Publish, or Publish settings to change the settings or properties of the Flash file before publishing the final SWF. Make sure you save the FLA file as this is your working file. You can always generate another SWF file at any time, but not without the FLA master file.
Outcomes by the end of class:
You should have your finished images in the Flash template by the end of class.
Reading/viewing for next week:
Other Things to Remember
You should be continuing to work on the following Assessment Tasks:
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.