Project: Mobile App Design

This is my mobile app design.  My application is called Electragasmo. It keeps track of current electric car models. After struggling several hours with the iPhone template from class, I decided it was far too complex for the design phase. So I scrapped it and just made a generic design. I measured the iPhone screen and it is 5″ by 4.5″, so that is the scale I used; however this application design will work for any size moble screen.

Here is the start page for the mobile application:

When the user selects “GO”  the application will begin showing electic cars by manufacturer and model, as follows:

The user can control the application by selecting the “next” arrows.  The one at the bottom changes to the next car and manufacturer.  The one at the top changes to the next manufacturer.  If the user selects “BUY NOW” the application will do a search on dealerships offering the vehicle closest to the user’s current location.  The user would also be able to pay for the vehicle online and schedule delivery.

Project: Midterm; Category: Research, Analysis and Design

I’ve finished designing the first landing page.  In this cae “OurMethods” has been selected from the top menu, and would be a bluish-green color – except the  hit color is not showing here because I have them in a separate layer.   Also, I mocked up some copy for the page.

Project: Midterm; Category: Research, Analysis and Sitemap

My midterm project is for a Math tutoring site.  I looked at competitor sites for the following (among others) : Chyten; Educational Tutoring Center; Growing Minds; Huntington; Kaplan; Knowledge Points Kumon; Mathnasium, Pearson, Tutor Doctor, and Sylvan.  I also checked both sites which offered n-person tutoring and also ones which offered online tutoring.   Links are available on request, but not included here.

Some sites had maps.  Maps help you locate centers connected with the tutoring service.  All sites gave a list of centers near you based on your zip code. Most sites listed the qualifications of their tutors.  None of the sites offering online tutoring had decent reasonable whiteboard facilities from what I could tell – and the clumsiness of this made the online option seem problematic; however I located some alternatives which might work much better.     The best site for completeness and educational resources was the Sylvan site.   The easiest to use site was for Mathnasium.   The best logo and incredible artwork  is on Mathnasium’s site.   The audience of these sites are Parents for children in gradeschool, middle school, high school; also secondary audience is students in those grades plus lower division college students.

After looking at all the competitor sites, I designed a sitemap.  My sitemap is based on several of the sitemaps I saw on the competitive sites.  I tried to take the best ideas.

After I completed my sitemap, I worked on the Photoshop design for the home page.  I decided I needed some interesting artwork on the home page to target parents of kids and the kids themselves.    The idea I had was to have adequate menus to direct parents to information, but to have the center of the home page as a Flash video with advertisements.

You can view my design on the class web site or see the image below (which is a poor excuse for a visual description).

Project: MoMA Menu Redesign – revision of the Exhibitions Page

This post contains a revised  ”Exhibitions”  page (see the previous post for details).

Project: MoMA Menu Redesign

Starting with the last MoMA homepage redesign, described below, I changed the “Explore”  landing page to display more appropriate graphics.  I think this should become a slideshows, each running through  some of the main museum current attractions.

I then created the “Exhibitions” page to show what would happen if that submenu item was selected.  The menu needed to be expanded in size a bit to include all current exhibits.   Three exhibit slideshows appear at the top of the page above the menu.

The sub sub navigation is displayed in the menu above.  If the user selects “Irving Stone…” from the sub sub menu, he gets the following page.

This is my first pass, and I might post some revisions.

Note that the current menu selection and breadcrumbs are all incorporated into the main menu system by graying the selected items and displaying the current location in the background.

Project: Class 4 Assignment

I found three blogs on CSS layouts that adapt well to screen size.

• http://www.456bereastreet.com/archive/200611/resolution_vs_browser_size_vs_fixed_or_adaptive_width/
• http://particletree.com/features/dynamic-resolution-dependent-layouts/
• http://flexknowlogy.learningfield.org/2008/06/26/setting-font-size-proportional-to-window-size/

In some cases the layout is designed to change from 3 column to 2 column to single column as the screen size changes.   In another case, the entire layout (including font sizes) scales as the screen size changes.

Beginning with the sample two column layout from class 4, I  incorporated one of the techniques in the article “setting font size proportional to window size”.  Which resulted in the following layout which never changes when you resize the screen, and always fills the entire browser window. All CSS sizes – even the logo – are scaled in ems to make their size dependent on font size, and then a javascript file is used to listen for browser window size changes and reset the base font size based on the screen size.   So the layout can expand to a large screen or down to almost a thumbnail.

The resulting layout can work on a large screen as well as on a PDA.

There were some browser issues however.    I validated the  XHTML and CSS using the W3C validation sites first to make sure there were no errors.   I tried five browsers.

• Firefox got the best score, reducing the layout correctly until it would fit on half a screen of an iPhone intact.
• IE8 got the next best score, but was only able to reduce the page to about 3x the size the Firefox could.
• Chrome was next best had some problem reducing the layout to it’s smallest sizes.
• Safari and Opera could not even reduce the layout to a reasonably small size without breaking it.

(See the screenshots below.)

It’s a nice concept anyway  .

Project: Monday May Wireframes assignment for week 3-4

I struggled with the Illustrator template for an hour.   I was having a great deal of trouble with some font used in that document that was missing on my computer, and many of the objects were not configured for easy management.

I then decided to do the wireframe in InDesign instead.   I built my own InDesign template that works pretty well, and was able to import some of the widgets from the Illustrator file for it.  The InDesign approach gives considerably more control over layout and placement, and can produce some decent graphics also.

The Monday May sitemap was used as a guide for the wireframe menus.

Monday May site map