Navigation in Web Design

There are lot of pieces that fit into designing navigation for web design. To start off, there are two main types of navigation, content heavy websites and task oriented navigation. Content heavy navigation, is when the user is looking for options and looking to find multiple uses for the website. For example, a clothing website, the user might browser for a few different items. However, with a task orientated navigation the user is looking to complete one single task. The types of controls for these types of websites are buttons such as tools, wheels, and libraries. All in order to help you perform a task. I began looking for some inspiration to demonstrate how these two different types are designed. Below are some  examples of content heavy navigation versus task orientated navigation.

 

Task Orientated:

 

Responsive Web Design

One of the keys to make a successful website is to make it responsive. A responsive website is when the layout and design adapts to the size of the screen. In addition, all computer, phone, tablet, etc. screens are all different sizes and therefore, a good website should be able to adapt to each of the screen sizes and still look well designed and easy to navigate. Moreover, because all computer screens are horizontal and phones are vertical it is difficult to the design to look exactly the same on computer versus phone. However, there are tricks around this problem. For example, navigation bars on websites built for computers are traditionally at the top of the screen with a clear layout and button for each individual page. The navigation bar usually stretches across the entire width of the screen. This would not work for viewing pages on your phone because if it would to do the same the font would be too small or would take too long to scroll across the entire screen. Therefore, the hamburger menu icon was created. The hamburger menu icon was created to represent the entire navigation bar and it is symbolized by usually around three lines stacked on top of each other. When a user presses this the tabs that would usually appear across the screen, are now presented as a stacked list. In addition, there are other hacks used for web design when making a successful responsive website. In an article I read called, “Practical SVG” by Chris Coyier, he describes when placing an image into a website rather than using “img” you use the code “svg” an automatic correct resizing takes places. By using “svg” rather than “img” you are using numbers on a coordinate system rather than pixels. Another benefit to this that no matter how big or small, there will be a clear picture rather than a pixelated image. This also works great even if the ratio does not match the original because there are other possibilities such using Max,Min, and Mid. When using max, min and mid, combined with “meet” there are nine possible outcomes and keep the entirely of the image.  Also, when using max, min and mid there are an additional other nine outcomes when using with “slice” that cuts off part of the image. Overall, when designing responsive websites there are various different hacks and shortcuts to reach a desirable website for all sized screens. Whether it be replacing words for icons, traditional website design for new symbols or just making a adjustable picture using meet or slice there are tons of ways to make a website design look amazing for any sized device.

Infographic

Storyboard

Style Frames 

Mind Map

https://vimeo.com/306228066https://vimeo.com/sabrinacd/review/306228066/f4d4a359e1

For my infographic I wanted to focus on a topic that I am incredibly passionate about. For this project I wanted to inspire people to make a difference and help or just support gender equality. I took the approach of listing some shocking facts then a call to action of how people can help achieve gender equality. Throughout this project I struggled with timing and some effects. The program itself shut down a few times and deleted some work. Despite my difficulties I think I created an infographic that was successful in creating awareness.

Animatics:

https://vimeo.com/sabrinacd/review/306750020/57c6dcf54e

Stop Motion

My Stop Motion Process

One of the first steps I did in my stop motion process was research. I began searching for examples on Pinterest that I found interesting and cool.  (https://www.pinterest.com /sabrinacdx/stop-motion/). The next step was to sketch it out. I knew I want to create a landscape using construction paper. I thought it would be a cute idea to have a sun set over an ocean horizon while a boat sailed by. There were a few errors I came across when making my stop motion come to life. The first problem I had when creating this was in my original sketch I wanted the sky to transition to a night time sky. However, when cutting out the paper I did not actually know how to achieve this gradient. The next problem I ran into was the smooth transition between the different shots. I need it to appear more effortless than choppy. The final problem I ran into was that my camera on my phone had been slightly cracked therefore making the video look extremely blurring. To fix this I had to borrow on one my friends phones to achieve the final product. Overall, I liked the project but it was difficult process to achieve the final product.

Importance of Storytelling

I thought one of the most interesting aspects in the book “Animated Storytelling” by Liz Blazer was how she described that the greatest challenge of storytelling and creating an animation is to be “intentional about your storytelling choices”. I found this incredibly interesting because often when ideas come to mind, at first I do not always understand why.  In my creative process I find that I usually come up with tons of ideas and then I try imagine each one. If I can clearly see the final product in my mind I start to create a few different versions. Once I am to narrow it down to the final idea and finish, I am able truly about to understand why I created it the way it is and the story behind it. For example, for the Calendar Poster I created for my typography class for the Yale Art Gallery.  I choose to use a very abstract piece of art with a font that fit the modern feel. In addition, I choose the primary colors (red, yellow and blue)  for the text. After creating the piece I understood that I choose to create the poster this way because throughout the museum the modern art spoke to me the most and really made me question the work and its meaning. Therefore, I wanted to contribute feeling to the poster design. I also believe the dramatic color difference was able to show the variety the museum had to offer. Overall, when the author of “Animated Storytelling” describes the importance of the choices we make to tell a story I believe she is correct is saying that every design should have a meaning to tell a deeper story.

GIF Process

Prior to creating a sketching my GIFs I began to do research on Pinterest (https://www.pinterest.com/sabrinacdx/gifs/) , I found ones with people most interesting. After getting some inspiration, I created my first GIF of the steaming coffee cup.  Which I then drawn in my sketch book. I had a vision of what I wanted it to look like and I thought it would be best to make this come to life through illustrator. I began to first draw a coffee cup on a table using the pen tool. I then used the live paint tool to add color. I wanted it to feel fun and cartoon like. I choose very pastel colors to emphasize the playfulness. The next steps were the most challenging and time consuming of the project. I then would copy the coffee cup onto a new layer and I began to move the steam slightly in each layer. Therefore, when moving the steam would have a natural appearance of rolling up into the air.

 

The next piece I created is more of my style. I wanted to use something that was not normal to begin with and make it move. I got most of my inspiration from an artist named Xaviera López on Pinterest. I have been obsessed with line drawings recently and I thought it would be an interesting idea to take a line drawing that I have made on illustrator and create the illusion that the line drawing was being pulled out on both sides to create a single string at the end.  I created this by starting with the original two lined faces then again creating new layers and each time moving them slightly to create the illusion of string being pulled

Cinemagraph Process

When researching cinemagraphs, I found that I believed the ones with people were the most interesting. I really enjoyed the very slight movement in the background of the cinemagraphs with the people still. I knew from the beginning I wanted to recreate these types of cinemagraphs. Therefore, for my first cinemagraph, I choose to shoot in a very fast paced, filled environment, The Durham Fair. Prior to entering the fair I knew I wanted to encoruprate  the Ferris wheel. I wanted to create the illusion of a somewhat “stillness” in a loud and busy environment. To achieve this, I used my phone with a tripod to capture the video. I then was able to copy the video in Photoshop and mask the Ferris wheel to create the cinemagraph. When exporting the quality of the video was slightly ruined and created a weird texture on my two friends faces. I also ran into the problem of a person walking right in front of the Ferris wheel during my video so you can see a head pop up randomly towards the end.

 

For my next cinemagraph I knew I wanted to try something different. After downloading the app, Pixaloop, I wanted to try using it on one of my photographs. I found one of my sister that I took over the summer. I used the app to animate the water in the photo and create anchor points on where to keep the photo still. Overall, I thought it was an interesting take on cinemagraphs and I liked the way it turned out.

An Introduction to Motion Graphics

In both books, “Animated Storytelling” and “Motion Graphic Design: Applied History and Aesthetics” the two stress the importance of a story behind an animation. Without a story there is not significance or emotion. One thing I found incredibly interesting and useful from the author of “Animated Storytelling” was when he said once a topic is chosen, to write down everything you know or can think of about the subject. Even the smallest detail can blossom into incredible story. While “Animated Storytelling” focused on the pre production process, “Motion Graphic Design” narrowed in on the history behind motion graphics, with the early cinematic productions. How the human eye is able to blend moving pictures together to see as a moving image. Overall, I thought it was interesting to understand the beginning stages of motion graphics and how it became to be what it is today.

Motion Graphics

In the article “Motion Graphics” or “Motion Design” ? by David Cornejo, he discusses how the term Motion Graphics feels outdated. The reason for this is because Motion Graphics covers much more than “wedding videos and glassy 3D logos heralding cable news channels”. Motion Graphics is literally putting design into Motion.  After reading this article it made me realize I do prefer Motion Design over motion graphics because it feels broader and more design can fit into the name. Especially after learning in class that there are so many different types of motion graphics, GIFS, stop motion, etc. Also in the article “Origins of Motion Graphics” by  Michael Betancourt describes the history of motion graphics as well as the different types. Overall, although I do not mind the name Motion Graphics, I believe that Motion Design would fit better as a name.