Responsive Design

This is my mood board for my website redesign of the Cape May County Zoo. I would love to be able to use my style of illustration on this project, as well as using some really great photos of the animals at the zoo I found on the web. I want the website to appear fun, it’s at a beach so it needs to be appealing to people who maybe don’t want to spend every day on the beach in the sun, or have younger children and want another activity to do. My family and I frequent Cape May on vacation and we make it a point to go to the zoo every time we’re there so it’s a place close to my heart and it’s really a great zoo with a large variety of animals and activities that’s pretty underrated for the simple fact that it’s in a beach town in New Jersey.

Here are my wireframes for the Cape May Zoo website re-design. I used Simple Grid (http://simplegrid.info) for the layout, I’m not sure if I did it correctly though. The concept of the slots was easier for me to understand, but when it comes to it getting smaller I don’t know if I followed the format the way I was supposed to.

Home Page:

Desktop:

 Tablet:

 Mobile:

Subpage (Snow Leopard Project):

Desktop:

 Tablet:

 Mobile:

The main navigation switches from the left side to the top when the size is reduced from desktop to tablet, and then when it is reduced further to mobile, the icons that are along with the text in the nav will also disappear. The only other information that I made disappear is the Facebook and Zoo Friends information on the desktop version because this isn’t something that would really be necessary on tablet or mobile versions. In our practice website, I used a framework that had a responsive image scroller which I thought would look nice, but it may be a headache to develop. So instead I’ll just use one large photo with a type treatment of some kind. The current website has way too many pictures, although the animals are what draw people to the zoo, you don’t want them to see everything you have to offer before they even get there.

Here are my style tiles for my responsive design website on the Cape May County Zoo. I made them very different on purpose, I don’t know which direction I want to take the website in yet so it’ll be nice to hear feedback from the class. I like certain aspects from both of them though so a combination of the two might by nice. I want to keep the website clean and family friendly without making it too childish.

Updated Style Tile:

The feedback I received in class was that this style tile was much stronger then the other, the feel went more with what I’m trying to accomplish and was different enough from other website I’ve designed that it will be successful on its own. I implemented the textures from the other one with some changes in tone, and changed the botton a bit.

Here is my attempt at turning my wireframes into a working responsive design site. Coding manually is going much easier for me then trying to use a framework. I stared at Simple Grid for a few hours and it was just too confusing.

Home Page: Desktop

Home Page: Tablet

Home Page: Mobile

The sub page is giving me a bit more difficulty. I can’t seem to get an image to resize properly, even with copying the code directly from my homepage, which works correctly. Also, if I make the mobile size as small as it goes, the “more info” div seems to go behind the others which isn’t right and I’ve tried numerous things to fix it. Also, I’m not sure if the glitches that happen while resizing it are supposed to happen or not.

Sub Page: Desktop

Sub Page: Tablet

Sub Page: Mobile

Very happy with the progress of my responsive design website thus far. There are a few things on the subpage that aren’t working properly but I’m hoping with a bit of guidance I can get them on track. I actually found it refreshing to be designing right in Dreamweaver instead of making a mock-up in Photoshop, which was surprising for me.

Home Page: Desktop

Home Page: Tablet

Home Page: Mobile

Subpage: Desktop

Subpage: Tablet

Subpage: Mobile

The live website is available to view here. (resize window to see responsive properties at work!)
Advertisements

Portfolio Show Postcards

These are some postcard designs I created for our senior class portfolio show at the beginning of May. Each of us created designs and voted on the one that would represent our class that we could send out to family and friends.

I spent a long time thinking of a concept for my design. Our class is very diverse, some of us aren’t graduating until the fall, some have summer jobs unrelated to design lined up, and some of us are itching to get out and dive right in to the design world. I started thinking about my friends in the class and the struggles we’ve overcome this semester, and that all of us seem to be in a really good place right now. It took encouragement from each other to realize that we can make a career out of creating paper foldables, or cartoon characters, or animals with their insides falling out. We can do what we love, that’s enough.

Logo Animation

For my animated logo, I am going to use my restaurant menu/website, Tiny Travelers. I believe this would be a bumper for a possible television show about cooking for or with children that would be on the Food Network or something. The animations for other children’s shows and companies have a lot of the same characteristics: bouncing, wiggling, playing with individual letters, and including lots of textures and patterns. Some of the general ideas I have involve making the airplane on the logo fly, having the globe spin, or having the logo come out of a globe of sorts. I want to make it more exciting while not taking from the actual logo itself because I already have it applied to the menu and website. I think sound in the background is also important for this because sound attracts kids, so something like laughter or a plane “swoosh” would be fun.

Here is a picture of my working logo:

Mapping Info Graphic

For my mapping project, I decided to show my design process for a single project. This is a bit different from other ideas because it doesn’t involve a long period of time or a distance of any sort, but I think the process that I go through in designing a project is really unique. I have OCD, which is very much a part of the way I design from beginning to end, in researching and mind mapping, the start of production, down to the final product (examples: time spend mind mapping, number of times looked at Pinterest, programs used, total time on project, etc.). I would like to show this by taking a picture of myself, possibly the top of my head, and showing the process as a mind map of sorts above my head. I collected resources that I would like to mimic in concept and style. (Also, I’ll be titling my project “Obsessive Compulsive Designer”… I think, if that helps.)

This is an advertisement by one of my favorite companies, 160over90. It’s a series for The Athlete’s Foot shoe company which displays photos of athletes and sneakers and then has handwritten text featured over and behind them. I like how it interacts with the photo and seems like an integral part of it, not a separate entity. If the boy himself was illustrated, or the type was graphic, it wouldn’t have the same effect. I would like to incorporate handwritten text like this into my project.

I found a blog of entirely of pictures of organized objects that I LOVE. Once I have all of the information compiled, I would like to arrange it in this way. I think this reads really well and would be the easiest for whoever is looking at my project to understand.

Final Draft:

mapping-01

This is my final mapping project. I changed the title so it makes more sense, because a lot of the feedback I got said that it didn’t relate to OCD, just being organized and having an in-depth process. I also gave the colors meaning, green (aside from the title) are negative things, and pink are positive things. The information is all relative to my design process and how much I value the process. I think that anyone viewing this who doesn’t know me would be able to tell a lot about me by the photo and the data collected.

Quote Animation in After Effects

This is my storyboard for our quote exercise in After Effects. I am trying to keep it really simple because I’m having a hard time with the programs, so I thought to just make the quote on the right hand side, coming up quickly onto the frame one part at a time, pausing, and then continuing upward. The last part of the quote will then fade out. Storyboarding is actually helping me to figure out the timing and more structured parts of the animation which is what I’ve been struggling with, so hopefully I can apply it to starting the animation also. I added the background texture for some visual interest since the text will be all one color.

Here is my final video. I kept it relatively simple since I’m still getting used to After Effects. After I started lining up the times and using guides, it became a lot more familiar and easier to use. I realized that a problem I had before with not getting the text to remain static can be fixed by just deleting that keyframe and creating it over again.

Link to YouTube

Rhythm Exercise: Flash & After Effects

Our assignment was to make two animations, one in Flash and one in After Effects using the word “rhythm” to make a rhythm. This exercise was REALLY difficult for me, I’m finding that I don’t understand animation or really how to make it work the way I’m picturing it in my head. I tried following a bunch of tutorials online and tried to find how to make the video loop, but was confused by the language that was being used. After many attempts, these are my final products.

Flash:
Link to YouTube

After Effects: