Category: Uncategorized

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:

Event Website: jQuery

I am going to do my event website on the Leukemia and Lymphoma Society’s Light the Night Walk in Lancaster, PA. It is Saturday, October 6, 2012 in Long’s Park. It will be a 2 mile walk in which participants will raise funds for lifesaving blood cancer research. I chose the following “event” websites to use for inspiration for their functionality and style, I couldn’t find any that had any kind of similar event to what I chose. I am planning on using the same colors and themes from the original website to make the connection, but I hope to make it look more fun and stylish because as of now it’s a pretty boring website overall. I think having a nicely designed website for an event like this would really help people to get involved and participate.

I will have different sections throughout this one page website which will describe the actual event itself (time, place, map, etc.) and then the details of the event, such as what time to be there. I will have a section describing Light the Night and what the cause is about, probably at the top of the page. An area for the participants to register and sign up a team will be necessary as well.

My Objectives: The point of the Light the Night walk is not to be sad or mourn about lost loved ones or loved ones that are currently ill. Inspiration is the key to the walk and what the participants and volunteers involved try to achieve at every event. People associated with Light the Night are raising money to provide educational materials to patients and families and also fund local programs and support groups. The two mile walk, along with the other festivities of the evening, are meant to be about celebration. Celebration of the lives we have along with the lives lost to leukemia and lymphoma and those fighting for their lives. I want my event website to portray this more then anything, that this is a positive event about celebration and bringing awareness. Yes, your team is encouraged to raise money, but we all know that not many people have extra money nowadays, so raising awareness and education by about these illnesses by participating in the walk will be key.

Personas: These are the three personas I created for my event site about the Light the Night walk. I tried to think of three different reasons that people would be interested in finding out information or participating in a local walk and how I can use my event site to persuade them to be a participant or volunteer.

personas-01
Wireframes: I browsed around looking at a few different layouts for smooth scrolling sites and I thought that these three could most easily convey my event simply while still being interesting to the viewer.

wireframe1

This first one would be basic, the main navigation staying fixed at the top of the page and when clicked on, the sections would scroll accordingly. I thought keeping the navigation visible the whole time is important for the user to be able to get back and forth from section to section and with this layout being the simplest I think it would be the easiest to use for the widest range of people.

wireframe2
This second one has the same concept as the first, but with the navigation staying to the right of the page, again fixed so it wouldn’t go away. I came across some sites with this and I thought they were still easy to use but the side navigation gave it a little bit of something different. I also played with the sizing and placement of the page elements on this layout.
wireframe3

This is stepping outside the box a little bit and trying to undertake a horizontal side scrolling layout. I like this concept because I had the idea to make the map of the route go along the bottom which I think would be really great for the user to see and interact with. The only problem I can think of with doing a website like this is it may be difficult for older users to navigate, I could always find one similar and try it out on older adults that I know to see how or if they figure it out.

mood board

Mood Board: A big theme that they have are balloons, the different colors symbolizing supporter, survivor, and in memory, so I really want to incorporate them. The slogan used for the general website is also very powerful, along with some photographs I’ve come across from previous walks. I want to incorporate some textures to make the site more visually appealing, but I’m going to try (hopefully!) to stray from my usual illustration style which is relatively childish. I’m not completely set on the typefaces I’ve displayed, but I thought they were classic and readable enough for this kind of event site that will be going to a wide variety of users.

 

Background/Nav:

I spent a long time trying to find a typeface that I thought was appropriate to remake the logo for this event, since I think that’s a pretty weak part of the current website. I ended up purchasing Jessica Hische’s font Buttermilk because I thought it fit perfectly for the mood of the event that I’m trying to portray. I had already picked out a texture I liked for the background and tried playing around with what words I wanted to include and the placement of the words.
This is the layout I came up with for the main page of the site. My website is going to be horizontal scrolling, so the top navigation bar will remain fixed (aside from the logo decreasing in size which you can see below) and the bottom navigation / map will change accordingly. I am also going to design it to stay within a 1024×768 display. I did some research and found that most older Americans, like my Primary Persona, are working off of this size monitor so I’m going to challenge myself to make the website stay within these dimensions since we are used to working on larger screens as designers.

I just changed some of the colors and patterns around here to see which worked better.

This would be the fully extended site with all of the sections listed: Home, About, Participate, and Contact. I made the logo less significant on the preceding pages because I think the other information on the page becomes more important.
Site Design:
This is the new direction my design has taken on. It’s about 85% finished, I need help thinking of ways to display the map at the bottom and what things to put on it. I tried creating a gazebo and the stage that’s at the park, but it clashed in size and concept. I’m happy with the way it’s looking overall, I started over again from scratch because I was unhappy with the previous design, and I think this is a lot more appealing and easy for my audience to follow. I also designed it with the intent that it won’t be impossible for me to develop. The javascript features will be the side smooth scroll, the slideshow on the about page, and the contact form on the last page.
Final/Revised Site Design:
event layout_redo

This is my final design for my website. The home page was giving me lots of issues but I think the solutions I came up with work really well. The footprints tell that it’s a walk without me having to write “WALK” anywhere (assuming someone would be viewing this website that wouldn’t know what Light the Night is). I kept in mind my personas the whole time and I think that the primary persona (the older woman) could easily be able to navigate and understand this site. I hope to include the jQuery features that I’ve designed. I think the simplicity of the map on the bottom was a good solution to the problem I was having of not making the illustrations match the rest of the page. The color underneath the map will continue down the page to symbolize to the user (if their browser is larger) that they are not able to scroll down but rather horizontally. I did design this keeping 1024×768 screen display in mind because that’s usually something I struggle with. I kept switching to check if everything could be seen, because for this kind of event there is a broad audience and I can’t expect everyone to have large format computer screens. Overall, I’m very happy with this website. I think it came together well and meets the objectives that I had stated at the beginning of the project; it portrays a fun event, although it’s about something serious it’s not a somber type of thing about mourning, it’s a celebration of life and a reason for the community, families, and friends to come together for a greater cause!

Development: The development of my event site came surprisingly easily. I didn’t run into too many problems. The jQuery was a bit difficult to implement at first but once it was explained to me a second time I understood it quite well. I did my best to make what text I could live text and not text as image. The bottom footer was giving me a bit of trouble but I got it to function the way I wanted it to. Overall, I’m very happy with my site. I didn’t have to change many things in the process of developing. I also conducted some usability testing on my grandparents and some other older people, and they were able to figure out how to navigate the page using the navigation menu and the horizontal scrolling without my telling them to do so.
Here is the link for the working website: Light the Night

First Try at After Effects

Objective: Using only patterns and textures, and 5-7 words (centered, not moving), describe a dream you’ve recently had.

My dreams are a lot simpler then others I’ve heard of. Usually, I’m inside my own body, just walking somewhere. I’ve had dreams that my body looks different, but I’m always myself. For this project, I am using a frequent dream I’ve had of walking around a city. Not really going anywhere, just walking casually. Not being chased like many others dream about. I think this is a reoccurring dream lately because I’m hoping to move to a city after I graduate at the end of the semester. Also, I tend to dream in black and white. Sometimes even a very high contrast black and white. I think this is because I love old pictures of my grandparents and anything from “back in the day” and I think it would be so neat to see things the way society was forced to see them back then, much simpler. Our lives are so consumed with technology and stimuli that I think seeing things how those pictures are, in black and white, would be a good change of pace for a while.

As far as words go, something like wander, drift, or roam (interesting, unpredictable, exciting, alive – all things pertaining to city life). Like I said, these are not threatening dreams, I’m not running or scared or anything like that. Just pleasantly walking no where.

Finished video sequence (link to YouTube)

NHTSA Info Graphic


I have decided to use this chart for my information graphic. It is from the NHTSA website so the information in valid and credible. I thought it was really interesting how high the percentage of people is that are killed in alcohol related automobile accidents throughout all times of the day. There are probably great deals of people that think that they are sober enough to drive, being the time of day.
I felt a connection to this specific topic because I have only had one person in my family pass away thus far in my life, my cousin’s husband, when I was in middle school. We were at a Memorial Day picnic and he had gotten into an argument with his wife after having been drinking all afternoon and decided to leave. He ended up rolling his car off the side of the highway, being ejected from the sunroof and immediately killed, because he was drunk driving… in the middle of the day.
I also think that the statistics on this website about wearing seatbelts is very informative because so many people believe that wearing a seatbelt will do more harm then good for themselves or their passengers if they would get into an accident and the statistics clearly prove that wrong. I wish there would be statistical overlap of drunk drivers who were wearing or not wearing their seatbelts but I can see how that would be hard to gather.
I plan to demonstrate this information in graphic form by using the times of day compared to the total percent of alcohol-impaired driving. I didn’t think it was necessary to separate the single and multiple vehicle categories. I think that this information is intriguing and something that a lot of people tend to overlook because there are people coming home from bars and clubs at all hours of the night and early morning, people on their lunch breaks from work in the afternoon who may have been drinking, and the same with dinner time. It makes sense that this information would change seasonally; as with my cousin’s husband, more picnics and outside drinking gatherings happen in the warmer months of the year, which would increase the number of accidents during the day.


404 Pages

For my 404 Error page I decided to do Animal Planet. Here is a screen shot of their existing 404 page:

As you can see, it’s not very exciting. The rest of their site has a lot of really great photography and is very friendly looking, appealing to a wide audience. So I had the idea to focus on the pages for the Cats 101 show and the Dogs 101 show since they are particular areas of the site that get a lot of traffic and contain a lot of information. Here are some of the ideas I brainstormed, I had a lot of trouble picking a typeface that worked the way I wanted it to:
Here are the three pages that I came up with:

I tried to go the more humorous route with these designs. I found the pictures and then came up with the ideas for the copy. I admit that it isn’t very strong, but I’m not very good at coming up with witty things to say, so I tried my best.

This last one was a completely different idea. It didn’t come out exactly how I had envisioned it. I had a really hard time finding typefaces to get the look I wanted and still did not completely achieve the look. I also had a hard time with the given colors of the site not standing out enough against the colors in the photograph.

Final Revised Pages:

Designer Site

The objective of this project is to build a one-page website about an designer or illustrator we chose from a list. I drew my favorite, Jessica Hische!

Research:

Jessica Hische is a typographer and illustrator and self-described “avid internetter”, working in Brooklyn, New York and best known for her personal projects Daily Drop Cap and the Should I Work for Free flowchart. After graduating from Tyler School of Art with a degree in Graphic Design, she worked for Headcase Design in Philadelphia before taking a position as Senior Designer at Louise Fili Ltd. While working for Louise, she continued developing her freelance career, working for clients such as Tiffany & Co., Chronicle Books, and The New York Times. In September of 2009, after two and a half years of little sleep and a lot of hand lettering, she left Louise Fili to pursue her freelance career further. Jessica has been featured in most major design and illustration publications including Communication Arts, Print Magazine, How Magazine, The Graphis Design Annual, American Illustration and the Society of Illustrators. She was featured as one of Step Magazine’s 25 Emerging Artists, Communication Arts “Fresh”, Print Magazine’s New Visual Artists 2009 (commonly referred to as Print’s 20 under 30), and The Art Directors Club Young Guns.

Hische says the more she surrounds herself with people who work in related disciplines, the more she loves learning about them. Although typography and hand-lettering in particular dominate, she likes to keep a good mix of work and says she’d lose her mind if she had to do only one thing for the rest of her life. “A lot of print designers get so hung up on learning only about their field and not about the other realms of design. It’s not beneficial.”
When not doing client work, Jessica tends to keep busy working on websites and side projects that are fun and occasionally even helpful to others. Below is a selection of some of the projects she’s worked on which are still up and running.
Don’t Fear the Internet: Jessica and Russ (of Strange Native) collaborate to demystify coding and teach html and css to the non-web-savvy.
Inker Linker: Inker Linker is a great way to find the right printer. The site is searchable by service, availability, price range and of course printing method.
Daily Drop Cap: Twelve alphabets worth of illustrative initial caps, this project is now complete but the site remains up for your enjoyment and inspiration.
Should I Work for Free?: A very handy and humorous chart which will help you figure out whether or not a project should be done pro-bono or if the client should MAKE IT RAIN.
The Accidental Hipster: Jessica’s non-business writing blog which includes narrative restaurant reviews and essays about everything from tattoos to rain boots.

Gift Card designs for Target
Logo Design
Event Poster / Illustration
Hand-drawn Type

Jello Typeface

ColorTouch-1320971517849

I’ve been itching to create my own typeface out of food… why not take on the hardest thing first, JELLO! Terrible idea. After filling my fridge with rainbow trays, I attempted to cut out the letters. The kitchen looked like a bomb went off. Little did I know, there are things you can add to the Jello before cooling it that helps it stick together. Oh well… now I know for next time.