Week 16B

For our final we completed our last Micro Project. This is mine.

Week 16A

Today in class we critiqued our websites. The tips I got were: put a blue box on the home page in the mobile view where the white is underneath the picture, change the "Dogs", "Cats", and "Other" page (the content shifts right), and make the hover text on the animals live.

After the critique we had time to fix some of our changes.

I got the blue box put in. 

I also fixed the content getting shifted to the right.

I started to attempt making the hover text live, but did not have enough time.

Week 15 Outside of Class

This weekend I worked on my hover states for my desktop Animals page.

I attempted to use the colored blocks of text that Professor Pannafino suggested but I could not get them to work perfectly. I also did not really like how they looked on the picture. I felt as if it kind of competed with the navigation on the left. So I went back to my original rollovers.

This weekend I also finished my website.

My home page on desktop.

My home page on iPad.

My home page on mobile.

Hamburger in mobile.

Animals page on desktop.

Animals page on iPad.

Animals page on mobile.

Week 15B

Today in class I worked on my hamburger.

I changed the color of the background to light blue. I also added my sub navigation into it.

Week 15 Outside of Class

Outside of class I worked on changing the pictures in iPad and mobile view.

This is what the iPad view now looks like. I decided to change it from two pictures next to each other, to just one big picture. I did this because I felt that two pictures next to each other was a tad bit small to read the information on each animal.

This is wat the mobile view now looks like. The information is now below the picture instead of on top of the picture.

I also got my hamburger to work.

Week 15A

Today in class I worked on trying to get my hamburger to work.

I got the icon to show up and it has a hover state, but for some reason it will got come out from the left.

Week 14 Outside of Class

This weekend I worked on my website.

I changed the iPad layout from the video to a solid picture and added the contact information at the bottom.

I added the mission statement and contact info to the mobile version.

I also took away the sub navigation at the top of the page and put it within the main navigation.

Week 14B

Today in class we critiqued the remaining people and then had the rest of class to work. I viewed my site on the iPad and phone today. This is what it looks like on the iPad.

Apparently you cannot view a video as a background on an iPad. So that means that I am going to have to use the single image for the background of the iPad too.

This is what my sub page looks like. My sub navigation looks a little weird but I think I am going to move those links into the main navigation so it should not matter.

This is my homepage on mobile. I now know that I need to make my logo smaller and crop the photo a little.

This is my sub page on mobile. I think I am going to move the sub nav into the hamburger.

Week 14A

Today in class we had a critique on our one finished page. The feedback that I got was:

• the headline "Animals Up For Adoption" is a little too small
• Change the headline to "Animals Available For Adoption"
• split up the pictures and the information on iPad and mobile - so the pictures don't have a colored overlay
• possibly center the logo over the navigation
• put the sub navigation of "Dogs", "Cats", "Other", and "View All" under the "Animals" tab in the main navigation
• make "TreeTops Rescue" a little bigger in the logo?
• also use that typeface in other places in the site
• make the rollover in the navigation a lighter blue instead of green
• on the homepage, add a mission statement or some kind of content over the picture in mobile
• add contact info on home page in mobile

Week 13 Outside of Class

This weekend I finished my Animals subpage.

This is my subpage on the desktop.

Here it is in iPad.

And here it is in mobile.

Week 13B

Today we briefly walked around and critiqued each others sites. The rest of class I worked on trying to get my video to be responsive. I am really struggling with this because if I scale the video by its width, I end up with white bars on the top and bottom; but if I scale it by height, it doesn't scale at all. So instead, I'm trying to make a new video for the iPad version and do a video-replace when it scales. So far, it works better than the original video, but I still haven't gotten it to work perfectly.

Week 13 Outside of Class

Outside of class I worked on getting my navigation to work and making my site responsive.

I finally got the bars to go to the edge of the screen, but I still can't figure out how to make them all the same length. I also still cannot figure out how to make my video responsive without getting awkward white bars above and below the video.

I also added the new navigation to my sub page. I am struggling a little with making this page responsive. It currently scales down now, but it is a tad awkward right now.

Week 13A

Today in class we briefly met with groups and critiqued our sites. A lot of people said that they don't really like the white bar across my homepage but didn't really know how to fix it.

The rest of class we worked on our sites. I mostly worked on my navigation on my subpage.

I made a mockup in Illustrator really fast as to what I want my navigation to look like. I like this navigation a lot better than the transparent or white bar across the top.

I then started to go and code the navigation. I am struggling on getting the bars to work. I want them to all be the same length and to start at the edge of the page.

Week 12 Outside Of Class

This weekend I got at least 25% of my website done. I worked on my subpage.

This is my Animals subpage. It will feature large pictures of the animals that are up for adoption. The rollover for each picture will contain each animals information.

This weekend I also got together with Megan and Nicole and we worked on fixing our Apple Festival website.

We fixed the typeface on the home page and made the whole circles in the navigation clickable instead of just the words "Click here."

We changed our navigation (still not sold on it - we plan on talking to Professor Pannafino on Monday) and changed the Attractions page into a three column based system (so it is similar to the Schedule page). We also got rid of the picture when it scales down to mobile.

We changed our picture on the Schedule page to a calendar instead of the pie pans because people said the pie pans were not consistent with our illustration style.

On the Directions page, we did an image replacement on the mobile so the address and phone number are easier to read.

And on the Contest page, we changed the pictures into circles.

Week 12B

Today in class I switched the video that is in the background of my home page. My original video was just a placement to see if I could get a video to work. I spent the whole class taking pieces from 5 or 6 different videos and putting them together into one.

Week 12 Outside of Class

Outside of class I got 10% of my site done.

I got a video to work as the background but I am not completely satisfied with my header. I want to find a way that the name, logo, and navigation can be seen during the whole movie.

Week 12A

Today in class we briefly walked around and looked at what people had done for their style prototypes and detailed sketches. Then we had the rest of class to work.
I redid my sketches to show some more detail. I also switched my home page to include just the video.

I started doing sketches for a logo.

This is the logo completed.

I also spent a lot of time looking for videos that I could use for my home page. I also started doing research on how to make a video a background.

Week 11 Outside of Class

This weekend I changed the elements within the style prototype.

I also finished my detailed wireframes.

This is my home page.

And this is my sub page.