Ideas for UI Changes

Here are a few screen grabs of the web app I started creating before our last meeting.

It isn’t polished, but it helped with thinking of different ways we can utilize HTML, CSS, and JavaScript.

I’m still playing around with PhoneGap and should be posting an update on that soon.

Uploading the app to Apple

The  application is completed and the process to upload it to Apple is underway, however, we are running into some  problems when generating an “app” and and “ipa” file.

We have been researching cases presented online, but it looks as if more research needs to be made. Don is considering contacting Apple to seek advice.

Post-Spring Break notes

Chris, Emmanuel and Paco met on a Google Hangout Saturday morning to talk about the app.
Chris said we need to start setting up testers with the app and get feedback on it. He mentioned Manasseh Lee, Mary, Don and Hal Spiegel, for starters. Attached are the testing scenarios, if the number of testers increase we can adjust the plan.
Chris said all the graphics were placed in the app. Paco will determine which logo to use that distinguishes the return home button and integrate it into the app.
Emmanuel had sent Chris some information about some information on “struts and springs” for Xcode. Chris and Emmanual had a Google Hangout session to discuss working on the struts and springs to figure out the best way to position the elements. There is a question about whether or not Apple requires the program to display landscape.
Paco will have final maps of the ABC buildings Monday morning. The campus was closed over Spring Break so the locations could be visually verified.
Chris said Paco should take over rendering the code for the program. He and Emmanual will be working with v10 to figure out the Struts and Springs while Paco will have the official version in v9.

Download the Testing Plan Powerpoint>> Testing Plan

Map Needs

Paco and Sol, here is a list of the images we need to finalize the app by Monday. The plan is to build the basic map leveraging the map style Solomon developed below:


Use the building shapes from the map create each of the floors for the respective building and place an icon/shape to indicate spatially where the offices are located that are listed.

1. Emergency Button – rectangle shaped icon with the copy “Emergency” in 2 versions solid red and the current treatment.
2. New Icon – Computer Lab
3. Downtown Building A Basement – Rising Star, Financial Aid, Continuing Ed
4. Downtown Building A 1st Floor – Bookstore, Registrar, Food Court, Counseling and Advisement
5. Downtown Building A – 2nd Floor – Health Center, Library, Office of Student Life
6. Downtown Building A – 4th Floor – Computer Lab, Learning Center
8. Downtown Building C – Mezzanine – Stem Program, Gym

These images are going to be placed on each of the respective pages.

iOS Simulator Screen shot Mar 16, 2013 11.14.55 AM

Design Needs by Thursday 3/7 at 6pm


Paco and I reviewed the icons created and here’s a recap of the icons being created for this week’s update:

– Learning Center
– Rising Star
– STEM Program

– Redesign campus icon – Downtown (this one replaces Main Campus), Allied Health & Nursing, Bill J. Priest, West Campus — target size to be 95 x 75
– New Parking Icon
– New Emergency Button

– Redesign All Icons – Building A, Building B, Building C, Building R, Campus Map, Phone Directory, Points of Interest
– New Floor Map Icon

– Create Floor Maps for Building A, Building B, Building C (main floor maps only, not the individual floors)




Google Docs – Excel Spreadsheet & Recap to link the EC logo


I’ve updated the Google Docs spreadsheet with the latest action items based on our last meeting. It can be located at:

Also, Emmanuel here are some notes on how I linked the EC logo back to the home page. We can catch up on Wednesday if you have any questions or you can give me a call on my cell phone.

STEP 1: Delete the current El Centro Logo from the footer
STEP 1: Insert Round Rectangular Button
STEP 2: Delete the “button” Copy
STEP 3: In the Attributes Inspector Tab of the Tool Box Select the Background graphic from the dropdown named “LOGO.png”
STEP 4: In the Size Inspector Tab (looks like a ruler) change the button size by changing the width (330) and height (105). Change the position to be X (20) and Y (334)
STEP 5: Click the button and hold the CTRL key then drag the mouse over to the main screen to connect. NOTE: Before you do this you may need to drag the group that you are working on closer to the main page because you can’t create the connection in the zoomed out mode (to do this just click outside the area and draw a square around the ones you want to move. Then move them back after you’ve finished.
STEP 6: Once you’ve reached the Main page then release the mouse button and you will receive a module pop up window. Select “PUSH” and you have finished the connection.


App button Samples

Hi Team,

Here are some sample buttons to consider. Take a look at the different backgrounds, give feed backs or suggestions and we will go from there. I was going for a subtle 3D look so that the buttons are not flat and boring.

I will continue creating the actual symbols (images) and refining whats already there then if we decide on the background color, style and shapes then I will just drop in the symbols.


DCCCD Style Guide and Graphic Standards

The district has a page with information about the style used in print and online communications — not only for El Centro, but also for the other colleges in the system. There are PDF guides available in the Tools & Resources page, as well as web versions of the logos for the different campuses.

I’ve saved the PDFs in this blog’s archive just to make sure we have copies readily available: