MM2201 - INTERFACE DESIGN AiCASD - Summer 2007 Instructor: Laura Cesari Contact: lcesari@aii.edu or laura.cesari@gmail.com Week 10: Topics: Firefox Critique, Field Trip Lab / In-class activity: Field Trip! Arcade Game Analysis Work due this week: Software Design Part 3 Homework for next week: Software Design Part 4, Revisions Finished, Extra Credit. Link: Get Firefox Themes Tutorials: Creating Firefox Themes First Steps in Theme Design: Customizing Image Sizes Customizing the scrollbar Changing colors and fonts MozillaZine Forum on Theme Development Assignment #9: Firefox Phase 4: Due week 11 Finish the main icons, tabs, and widgets. (parentheses refer to the example theme given out in class. All themes are organized differently: please email me if you need the example files.) Please see the Extra Credit / Additional Icons options if part of the assignment are not present in your base browser. Turn in: - functional theme (.JAR file) - a screenshot of your browser working: show the new icons in your toolbar. *** ICONS *** FINISH THE MAIN WINDOW ICONS: (in "browser" folder) - Cut, Copy, Paste (toolbar.png) States: Regular, Inactive, Hover, OnClick TAB ICONS: Close button: (global/icons) (close.png, Closebutton_Active, etc...) Throbber: (global/throbber) States: busy (animated .gif) and still (still graphic) (throbbersmalldk_busy.gif, throbbersmalldk_still.gif) Blank Tab/ Blank URL: (browser/Bookmarks-folder.png) (global/icons/folder-item.png) PREVIEW ICONS: (in the main folder) The icons you see in the Add-ons window while the theme is installing. These icons should reflect your theme and give a "preview" of what it will look like. (icon.png, preview.png) *** WIDGETS *** POPUP WINDOW: (global/popup) popup_bg.png = the top and side bar submenu_bg.png = the bottom bar CHECK BOXES: (global/checkbox) States: Active, Active-hovered, Off, Off-hovered, Disabled RADIO BUTTONS: (global/radio) States: Active, Disabled, Off, Off-hovered TEXT BOX DROP-DOWN: (global/menulist) These need to match regular text box graphics. (global/textbox) Drop-marker States: Regular, Active, Disabled, Hover VARIOUS UTILITY WINDOW BORDERS: (global/backgrounds) Background for utility windows and loading page: (window_bg.png) Utility window headers: (header36.png, header57.png) Splitters for separated windows: (splitter_hori.png, splitter-verti.png) Grading: 10pts total __ (2) Icon symbols are recognizable and intuitive __ (2) Graphic Quality: images are clean and consistent __ (2) Thematic Unity: colors, graphics, and style are consistent __ (2) Feedback: Button states are differentiated __ (2) Alignment & Spacing follow a consistent system (regular or irregular) __Total out of 10 points

Weekly Index: Week 1 - (July.9) Week 2 - (July.16) Week 3 - (July.23) Week 4 - (July.30) Week 5 - (Aug.7) Week 6 - (Aug.14) Week 7 - (Aug.21) Week 8 - (Aug.28) Week 9 - (Sept.3) Week 10 - (Sept.10) Week 11 - (July.17)