MM2201 - INTERFACE DESIGN AiCASD - Summer 2007 Instructor: Laura Cesari Contact: lcesari@aii.edu or laura.cesari@gmail.com Week 8: Topics: History of GUI Design Lab / In-class activity: Work on Theme Design Work due this week: Software Design Part 2 Homework for next week: Software Design Part 3 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 #8: Firefox Phase 3: Due week 10 Accessorize: think about the shapes of the widgets. Toolbars, throbber, tabs, buttons, text fields... (parentheses refer to the example theme given out in class. All themes are organized differently: please email me if you need the example files.) TOOLBAR BACKGROUNDS: (in "browser" folder) status bar = the bar across the bottom of the browser. (example: statusbar-hg.png) toolbar = main icons (back, forward) (example: toolbar-hg.png) menu bar = the top bar, above main icons. On a PC it holds the menu options “file, edit, view,” etc. (example: menubar-hg.png) personalized toolbar = the "bookmarks" toolbar below the standard toolbar, Contains rss, getting started, “digg” or “del.icio.us” buttons, any links you add, etc. (example: perstoolbar-hg.png) ADDRESS BAR: (in “browser/icons” folder) The address bar has 3 sections, right, left, and middle. This is so the address bar can stretch to fit any size. Make sure the edges of the graphics match. (example: URLbar-right.png, URLbar-left.png, URLbar-hg.png) THROBBER: (in "browser" folder) The throbber is a decorative animation that plays while a page is loading. It has 2 states: busy and still. The busy state can be an animated .gif. There may be more than one size, for small and large toolbars. (example: throbber_MB_still.gif, throbber_MB_busy.gif) BUTTONS: (in "global/button" folder) Notice that there are 2 parts to the buttons: start and end (left and right). This is so the buttons can be rendered at any length. Make sure the edges of the sections match! 4 Button states: Regular, Hover, Active (onClick), Disabled (inactive) (example: buttonend.png, buttonend_hov.png, buttonend_act.png, buttonend_dis.png) DROP-DOWN MENUS: (in "global/menu" and "global/menulist") backgrounds and hover states for drop-down menu items. (example: menuitem_bg.png, menuitem_bg_hov.png) TABS: (in "global/tabbar" and "global/tabbox") Tabs have 3 sections: left, right, and middle. Tabs also have 3 states: On, Off, and Off-hover. (example: tab_left_on.png, tab_left_off.png, tab_left_off_hov.png) TEXT BOXES and FILE FIELDS: (in "global/textbox") 2 sections: right and left 2 States: regular and disabled. (example: filefield_left.png, filefield_left_dis.png) Turn in: - functional theme (.JAR file) - a screenshot of your browser working: show the new icons in your toolbar. 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)