Interface Design – Week 10

Topics: Designing Firefox Widgets & Various Accessories
Lab / Activity: Firefox Lab
Homework due this week: Firefox Phase 3: Tabs and Throbber
Homework due next week: Firefox Phase 4: Choice Elements

Interface Design – Firefox Phase 4: Due week 11
Choose a combination of the following parts that add up to 20 points.
Any points beyond that will count as extra credit!
(parentheses refer to the example theme “LaurasThemeWeek8.jar”)

CHOICE ELEMENTS:
Choose a combination of the following elements that add up to 20 points.
When you turn in your work, turn in a list of which elements you modified.

TOOLBAR BACKGROUNDS: (4pts)
(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)

VARIOUS UTILITY WINDOW BORDERS: (2pts)
(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)

ADDRESS BAR: (2pts)
(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)

BUTTONS: (4pts)
(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)

TEXT BOXES and FILE FIELDS: (3pts)
(in “global/textbox”)

2 sections: right and left
2 States: regular and disabled.
(example: filefield_left.png, filefield_left_dis.png)

TEXT BOX DROP-DOWN: (1pt)
(global/menulist)
These need to match regular text box graphics. (global/textbox)
Drop-marker States: Regular, Active, Disabled, Hover

DROP-DOWN MENUS: (1pt)
(in “global/menu” and “global/menulist”)

backgrounds and hover states for drop-down menu items.
(example: menuitem_bg.png, menuitem_bg_hov.png)

CHECK BOXES: (3pts)
(global/checkbox)
States: Active, Active-hovered, Off, Off-hovered, Disabled

RADIO BUTTONS: (3pts)
(global/radio)
States: Active, Disabled, Off, Off-hovered

POPUP WINDOW: (2pts)
(global/popup)
popup_bg.png = the top and side bar
submenu_bg.png = the bottom bar

ADD-ONS WINDOW: (2pts each icon)
(mozapps/extensions)
Icons for themes and plug-ins.
(viewButtons.png)

SCROLLBARS: (3pts)
(global/scrollbar)
Backgrounds, arrow buttons, and grippers.

BOOKMARKS TOOLBAR: (2pts each icon)
(browser/bookmarks)
Bookmarks-toolbar.png

HELP TOOLBAR: (2pts each icon)
(in “help” folder)

TREE MENU: (2pts)
(global/tree)
Backgrounds and icons

VARIOUS BROWSER ICONS: (2pts each icon)
Safe Browsing: (browser/safebrowsing)
Feed icons: (some are in “browser/feeds”, some just in “browser”)
Report site (browser/reporterMenuButton.png)
Security (browser/Secure.png, security-broken.png)

VARIOUS GLOBAL ICONS: (2pts each icon)
Error, warning, question, finder icons.
(global/icons)
Off states and bullet icons for Error, warning, question, messages.
(global/console)

VARIOUS MOZAPPS ICONS: (2pts each icon)
Downloading window: (mozapps/download)
Generic Profile Icons: (mozapps/profile)
Updates Window Icons: (mozapps/update)
Installer Icon: (mozapps/xpinstall)

OPTIONS WINDOW: (2pts each icon)
(to see this, select Tools > Options)
Icons: (browser/preferences/options.png)
Main, Tabs, Content, Feeds, Privacy, Security, Advanced
States: Regular, Hover

Headers of options window:
(browser/preferences/groupbox_caption.png, groupbox_caption.png)

Tabs in options window:
(global/tabbox)

Interface Design – Week 9

Topics: Tab graphics and Throbber
Lab: Work on Firefox Theme
Work due this week: Firefox Phase 2: Toolbar icons
Work due next week: Firefox Phase 3: Tabs and Throbber

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

Interface Design – Firefox Phase 3: Due week 10
Finish the tabs and throbber graphics.
(parentheses refer to the example theme “LaurasThemeWeek8.jar”)

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)

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)

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)

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

Interface Design – Week 8

Topics: Usability principles, Navigation Icons
In-class: Nielsen’s Usability Heuristics, Firefox Lab
Homework due this week: HW6: Firefox Design Part 1
Homework due next week: HW7: Firefox Design Part 2

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 #7: Firefox Design Part 2 (Due Week 9)

Firefox Phase 2: Additional Navigation Icons
This week, finish up the navigation icons: create additional icons to match the ones you started last week.

To view additional icons, such as Bookmarks, Downloads, and History, right-click on the toolbar and select “customize” . These icons can be added to the toolbar by dragging them onto the toolbar where you want them to go. You can also remove them by dragging them back into the customizing window.

For the next assignment, create the following icons:

- Downloads
- History
- Bookmarks
- Print
- New Tab
- New Window
- Cut
- Copy
- Paste

For each icon, include the following icon states:

- Normal
- Inactive
- Hover
- OnClick

Modify your files to work as a functioning Firefox Theme. (.JAR file)*
You will likely be modifying the same graphic file as last week, such as “browser/toolbar.png” from the sample theme (See “LaurasTheme” examples in the Faculty Out-box folder for Interface Design Week 6).

Turn in:
- functional theme (.JAR file)*
- a screenshot of your browser working: show the new icons in your toolbar.

*If you missed week 6, check this link: Creating Firefox Themes

***NOTE: if you want to work ahead, feel free… after this week any modifications you make to the theme will be worth points!  See the links at the top of the page for more advanced tutorials.

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

Additional Office Hours

I’ve made additional time available for tutoring, critiques, and questions.

Fridays, 5:30-7pm
Room #165

Please email me in advance if you intend to stop by:
lcesari@aii.edu
If you need tutoring but cannot schedule during this time or my other available time (Thursday 3-5pm), please email me to schedule an alternate time.

Interface Design – Week 6

Topics: Skinning: Starting a Firefox Theme
Lab / Activity: Working with .JAR files, Dissecting and packing themes
Homework Due this week: Firefox Browser: Overall Concept Design
Homework Due Week 8: Software Design Phase 1

Link: Get Firefox Themes

Tutorial: Creating Firefox Themes

Assignment #5: Software Design Phase 1 ( Due Week 8 )
Firefox Phase 1: Navigation Toolbar

Start your Theme Design: Skin the Navigation Toolbar
Work with your design from last week, or start a new design.
Modify your files to work as a functioning Firefox Theme. (.JAR file)

For Phase 1:
Modify the Toolbar Graphic: “toolbar.png”
(in the sample theme, it’s in the “browser” folder)

Include the following icons:
Back, Forward, Stop, Refresh, Home

Include the following icon states:
Normal, Inactive, Hover, OnClick

Turn in:
- functional theme (.JAR file)
- a screenshot of your browser working.

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

Interface Design – Week 5

Topics: Browser Icons, Firefox Themes
Lab/In-class Activity: Firefox Theme Analysis, Icon & Theme Sketches
Work Due this week: Mobile Phone Design (3 Screens)
Work Due next week: Firefox Theme: Main Icons & Overall Design

Interface Design Assignment #5: Due week 6 (Nov.5)
Firefox Theme: Main Icons & Overall Design

Create a new design for a Firefox Theme: it can be traditional and minimalist, or bizarre and experimental. Give it a consistent, original style, and quality graphic icons.
For this project, your icons can be 42×42px or smaller.

Include the following 5 Icons: (42×42px or smaller)
- Back
- Forward
- Stop
- Refresh
- Home

Format:
- Show what the icons will look like within the browser “background”.
- Turn in your design as .JPG or .PNG format.

GRADING: (10 points total)

__ (2) Overall Style is Unique, Original, and Unified
__ (2) Icon shapes are representative of their functions
__ (2) Unified, Consistent Style among icons
__ (2) Icons stand out against the background color or texture.
__ (2) Graphic Quality: graphics are crisp, clean, and detailed

__ Total out of 10 points

School Closure Update

The school was closed during Week 4 (Oct.22-27), due to the county-wide fire emergency.

We will be continuing on with the Week 4 class content during Week 5 (Oct.29-Nov.3).

Assignments due Week 4 are now due Week 5.

I will note any changes to the course content and deadlines in class Week 5.

Interface Design – Week 3

Topics: Creating .ICO files, GUI Widget Research
Lab / In-class Activity: Creating .ICO files, GUI Widget Research, Group Critique
Homework due this week: Set of 32×32 pixel Icons, Unified theme and style
Homework due next week: Mobile Phone Display Screen Designs

Homework #3: Due Week 4: (10 points)
Mobile Phone Display Screen Designs:

Create 3 screen designs for a mobile phone “contacts” system:

1) List Screen: Shows a list of your contacts.

2) Profile Screen: Shows all the information for one contact.

3) Call Screen: Shows icons for home, office, and mobile numbers.

ICONS: Create 3 Original Icons for Home, Office, and Mobile numbers.

SIZE: Choose one of the following:
176 x 222 pixels (compact)
OR 320 x 480 pixels (cutting edge: like Apple iPhone.)

GRADING: (10 points total):

__ (2) Unified, Consistent Style among all 3 screens
__ (2) Icons (Home, Work, & Mobile) are recognizable
__ (2) Icons (Home, Work, & Mobile) are detailed and show a unified style
__ (2) Graphic Quality & Size are appropriate
__ (2) Text is legible, Fonts are consistent

Interface Design: Week 2

Topics: Pixel Art Techniques, Uses & Communities
Lab / In-class Activity: Isometric Pixel Art
Work due this week: Web Interface Graphics: Icons & Widgets
Homework due next week: Set of 5 32×32 Icons, Unified theme and style

Links:
Tutorial: In-class Tutorial from PixelFreak
Inspiration: KirupaVille, pixeldam, World’s Tallest Virtual Building, eboy
Communities: pixeljoint, deviantART

 

Homework #2: Due week 3, beginning of class (10 points)

Set of 5 Icon Graphics
Create 5 Icon Graphics from Photos, Found Images, or Original Artwork.
Each graphic should be 32×32 pixels or smaller.
Turn in graphics in .gif format.

GRADING: (10 points total):

__ (2) Unified Theme: all 5 icons are things that “belong together”
__ (2) Consistent Style: similar color palette and shapes
__ (2) Size: All icons are 32×32 or smaller
__ (2) Graphic Quality: Icons are detailed, crisp, and clean.
__ (2) Images are Recognizable (include source imagery, if applicable)

__ Total out of 10 points

 

EXTRA CREDIT:
7pts Extra credit for submitting your finished pixel house to
Kirupaville or other online community!

Interface Design: Week 1

Topics: Basic Interface Vocabulary, Icons and the Graphical User Interface
Lab / In-class activity: Everyday Object Analysis, Creating Small Graphics from Photographic Images
Homework due next week: Web Interface Graphics: Icons & Widgets

Inspiration: Susan Kare, Pixture Studio
HW Link: GUI widgets wikipedia

Assignment #1: Due Week 2
Web Interface Graphics & Widgets:
The purpose of this exercise is to collect and compare interface graphics, and note the Unity, Graphic Quality, and Conceptual Representation in the graphics.

Part 1: Widgets: Research
Research the widget assigned to you in class.
Find 3 examples of that widget used in different software or web situations.
Bring a screenshot of each situation, be prepared to show the class your examples next week.

Part 2: Collect at least 50 Web Interface Graphics
While going about your usual internet business, locate at least one website that uses interface graphics.
Examples of interface graphics: icons, buttons, tabs, navigation menu graphics, info graphics, custom widgets or cursors, etc..
Take screenshots of the site, and isolate the interface graphics into one document (copy and paste).

Collect 50 Graphics total:
- If you collect icons from more than one site, separate them into groups.
- If a graphic is repeated, such as a tab graphic, it counts only once (so a row of tabs counts as one graphic).

Part 3: Analysis
Answer the following questions:
2-3 sentences each, use complete phrases with correct grammar.
Turn in as Word, RTF or TXT file, or on paper.

1) Unity: Do the icons share a similar style with the others from the same site? Describe the styles used.

2) Graphic Quality: Are the graphics easy to recognize? Why or why not?

3) Conceptual Representation: Do you understand what the icons mean? Did the artist choose good symbols to represent the different functions? Why or why not?

4) What would you do to improve the icons on this site? If nothing, then what makes them so perfect?

Grading: 10 points total

__ (3) Widgets: Find 3 examples of the widget assigned to you in class.

__ (2) Collect screenshots of Web Interface Graphics (turn in as individual JPG or PNG files)

__ (3) Isolate 50 interface graphics in a separate document (JPG or PNG file)

__ (2) Analysis: Questions are answered completely, (Word, RTF or TXT file, or on paper).

__ Total out of 10 points