Screenshot 1 – After the app is purchased and downloaded to the mobile phone the app icon will appear among other apps in the phone.

Screenshot 2 – Once you press the app icon for EV USA you will be taken to the initial welcome screen that will give you 3 options to select from, a EV Charging Station, a repair shop or dealership.  The user then selects one of these.

Screenshot 3 – For this example we will select the “Locate Charging Station”, this will take you to the screen below to select how you want to locate a charging station, By Name, By City, By Zip Code, By Distance, or By Price.

Screenshot 4 – We chose “By Zip Code” for this example, which takes you to a text field screen to enter the zip code you want to search by, once you click the blue arrow the app will begin the search.

Screenshot 5 – Once the app finds the results for your zip code, the google map, will show all the local EV charging stations in that zip code and highlighting the one closest to you. Using the internal GPS from the mobile phone.

From here you would be able to choose more details on that charging station by pressing the button with the name or you can use the google map to drive to the desired location.

You will notice the navigation at the bottom of the screen, this allows you to move back & forward thru screens with the arrows, the + symbol more options and the book, will bring up the browsing screen.  The last button will take you back to the main menu.

This was a cool exercise and I think very useful with current demands for mobile designers & PM’s.

Here is the link to it. http://www.everythingaboutweb.com/grdes67/extracredit_chavez/index.html

Home page with the css nav image:

The products page with the css nav image:

Since I do not have the other pages created, I did not add links but I did link Appliances to the products page as an example of how they would work.

See You in class!!!

This is a basic sitemap I created for the site I will call the THE ECO SHOP.

Below are the images for the HOME & PRODUCTS page of my midterm project based on this sitemap.

HOME PAGE

PRODUCTS (1 level down)

On the home page you have the header, main navigation, left sub navigation and bread crumbs so you know where you are at all times.  The main image in the center is the focal point and would be a flash or xml image that rotates dynamically so its never the same.  The New Products bar below it would also be xml scrolling of products to the left or right to view more new products, you click on the items to view them.  On the right side I decided to incorporate the latest topics from the blog that can inform users and these could be did you know? or how to’s etc.

Finally the footer at the bottom is simple and has links to all the legal info & site map etc. This will always move down below everything else that is above  regardless of the length.

By the way, last minute I tried to simplify the design a bit and came up with this.  What do you think this one or the 1st version?

Well, I’m still finishing up the code, so I hope I can get it up soon for class.

**note that all sites images used for these projects are for a school project & learning purposes**

LINK TO MY MIDTERM PROJECT

Most people now are starting to start thinking green & since earth day just happened, I though it would be interesting to look at sites that cater to the eco-friendly consumers by offering only green or eco-friendly products.

Below are 3 examples of green product sites I analyzed & compared for this project.

COMPETITON A

COMPETITON B

COMPETITON C

Below is my Analysis & comparison of these 3 sites.

Looking at the results The unitedgreenproduct.com site was the least successful, it had the least features & the products really did not seems to be the main focus on the home page.

The other 2 sites has better and concise navigation sometimes redundant, but they had too much text and links it was not a clean look and they did not really portray they eco-friendliness in their look in feel, the only thing that made them eco was the colors schemes.

There was not dynamic features to any of the site, people would get bored easily on these sites and might not return unless they had the best price for a particular product.

If you were to click for example the EXIBITS button, then you would see the next page below:

Here you would see the current main exibits as well as upcoming and past exibits.

If you clicked on one of the main exibits, the one in green then that would take you to the following page to see details about that exibit below:

The page above would show details of the exibit and list of sample content of art etc.  If you clicked to view a particular artist or art in the list you would see the full art show and details of that artist in a page like the one below:

I looked online for a website built with a 2 column layout to base my basic design on and I came across monster.com, which uses it.

So based on that site I changed to code to incorporate a main header for branding & search features. Then below it a main navigation are and below it 2 columns for content.  Below these I placed the main footer for the site.

I went ahead and changed the css color to show the different sections more easily.

One thing I had an issue with was the space in between the div boxes.  How to we control that if we want a small gap between each section.

Also, I used float left & right on the content divs and it did not seem to show a difference.  The lined up the same with either code.

Here my basic layout design for the 2 column site.  Details would be added once the concept was approved of course.

A website I found useful to help not only identify the different types of website layouts using CSS & divs was MaxDesign.  In particular the colored boxes – method of building full CSS layouts helped me see how the sites can be created by sections.

I think that was the idea not to be very creative when creating wireframes, just organized so the required information is included in the pages its needed and how to flow from page to page very easily.

The project was to create wireframe for a home page & who we are with all the provided information provided in a site map and white doc.

Heres what I came up with not as creative as other, but I don’t think that was the point t was to organize the information well for someone else to design.

HOME PAGE:

Who We Are:

Although it was helpful to have a template to work from, I did not like doing this in Illustrator.  It just seems like there should be a simpler way to lay out all the shapes and info without having to illustrate everything.  You have so many layers and illustrator really takes up memory.

So I’ll find a simpler way next time, if you draw everything out, it seems like you could end up doing twice the work, once for the wireframe and again for the actual design.

I think it’s a great way to start any project but should not take so long drawing things out.  Time should be better spent in organization and flow design.

This is my solution:

I visited the Moma website as well as other museum websites to compare styles.  I also looked at the websites the user profiles indicated they liked & visited regularly.

Based on that information I did a couple of thumbnail sketches to start & then started laying out the areas in photoshop using the guides to organize my framing for the site.

I then started filling in the areas with sample copy, images etc.

This is the original MoMa site which is already well done.

Below are the 3 different sample redesigns I came up for the school project.

For user #1 – George Vance

For user #2 -  Theresa Lowell

For user #3 – Heather Adams

I personally like the last one as its more visual.

Here’s how the home page looks: