Top Posts
Author

Orca Journeys

Module Five: Motion for Promotion (Logo Stinger)

Module Five: Motion for Promotion (Logo Stinger)

Chapter 8: Technique

Chapter 8: Technique

Chapter eight called “Technique” was all about combining the style of your animation and story. The first paragraph presented a really good question to think about before I started to work on my animation. That question was, “Have you chosen the best animation technique to tell your story?”. I never really thought about it from this perspective. When working on my design projects I typically use the program that will be most efficient and give me the best results for what I am looking to accomplish. When it comes to animation I can see how choosing your video editing application can differentiate your style from other programs and ultimately reach a specific audience. This question definitely gave me insight what Chapter 8 would uncover.

I found it interesting to learn that animators tend to get especially defensive when the notion of using a technique they don’t already know rears its “ugly head” as Liz Blazer puts it. It can be difficult to deviate from your best-known and loved techniques. The key is to choose to tell the kinds of stories that are best suited for that specific technique.

I loved the example Liz Blazer gave from the iPod commercials in 2003. What would their commercials would have been like without 2D motion graphics or Chipotle’s film-turned advertisements? It is difficult to imagine what they would of looked like. Would it change it’s animated style or storyline?

Considering Format
Considering how your video is viewed and formatted is an extremely important step, that use to be simple. Film use to be enjoyed through commercials and TV. Technology has forever changed the ways animation is produced and shared. I can see the strong connection between technology advances and animation styles.

Here are a list of Animaiton/Motion Graphic Techniques and Styles. A few we have learned earlier in the semester (Stop motion, Hand Drawn Animation) and a few that I was unfamiliar with.

Techniques 
Hand Drawn
Stop Motion (2D)
Stop Motion (3D)
2D CGI
3D CGI

Styles
Fluid Transitions
2D/Vector/Kinetic Type
Handmade
Collage
3D CGI

Learning more about 2D CGI and 3D CGI was pretty neat. I actually was surprised that I knew what they were, but the “CGI” abreaction that stands for “Computer Generated Imagery” threw me off. I originally guessed that it stood for “Computer Graphic Interface” similar to GUI “Graphic User Interface”. I can definitely see myself getting more into 2D CGI animation with my low polygon animals.

Workarounds
At the end of Chapter 8 the focus was on workarounds if you did not find satisfaction in your originally selected program.

Here three Workarounds for your project,

Workaround 1: Import Still Images
Workaround 2: Shoot live-action footage
Workaround 3: Staff Up

Below you will find a recap of Chapter 8, “Technique”,

Technique Recap
1. Consider the Format
2. Translate Your Story
3. Consider Many Techniques
4. Consider Many Visual Styles
5. Adapt Your Technique
6. Workaround Using a New Technique
7. Import Still Images
8. Shoot Live-Action Footage
9. Staff Up

Animation Inspiration

Ideation Phase

1. "Arc"

The Lion King (and finding Nemo) are two of my favorite Disney movies. What’s great about Disney movies is that they tend to capture 10 of the principles of animation within minutes. This catches the audience’s attention and moves the story along well.

This clip has a number of principles of animation, but what I wanted to gear attention to is the gazelles jumping (0:40). The deers spring off he ground created an arc. This arc is not only eye-catching but also very realistic. The Gazelles jumping are also a great example of Ease in and Ease out. The gazelle’s ease in as they hit the safari ground.

2. "Secondary Action"

I thought picking “Finding Nemo” went well with my under the sea logo stinger theme and served the 10 principles of animation well. The characters in finding Nemo are a great example of “Secondary Animation”.

Immediately I thought of Nemo riding crash the turtle, when I thought about “Secondary Action”. Although, Crash is swimming along (Primary Animation) he is also interacting with Nemo on his back.

3. "Staging"

This is my favorite scene in “Happy Feet” and also shows a great example of “Staging”. It directs the audience’s attention, and make it clear what is of greatest importance in a scene is which is escaping the killer whales. Although, this principle is known in theatre and film it also presents itself in digitally animated films such this “Happy Feet” scene. I absolutely love the sense of humor that pushes this principle to the next level.

4. "Squash and Stretch"

“Squash and Stretch”

I love how the principle of “Squash and Stretch” gives a sense of weight and flexibility to an hand drawn or animated object. It reminds me of the animated flip books we made when we were younger of a bouncing ball in the corner of our notebooks. For this principle I decided I would find an animation that uses something other than a bouncing ball, like most squash and stretch animations do.

I came across this animation by Drake a Canadian Animator on Dribbble. It caught my attention since it was a “Squash and Stretch” example that did not use a bouncing ball. Further more, this animation caught my eye due to the personality captured in the purple ghost like creature. The shape of the ghost alters, but the volume stays the same.

5. "Follow-through & Overlapping Action"

Follow-through & Overlapping Action

Searching for an animation that used the follow-through technique and overlapping action was a lot of fun. I found this animation on Dribble by Dan Stack. He has an assortment of animations that represent a number of the animated techniques we learned in our Module these 2 weeks. His animation of a girl on a swing, is a great example of follow-through and overlapping action. When the girl swings forward her hair, dress, legs, head etc.will continue to move in order to catch up. Other than nailing the technique I absolutely love the simplicity he used to convey follow through and inertia.

6. "Ease in, Ease Out"

Ease-in Ease Out

 

Fraser Davidson is a Animator and Designer based in London. I have been following his work for some time now, but have not come across this key framing animation. It’s a great example to show you what the Ease In and Ease Out technique is all about. Further more it captures what both combined look like and none at all. I think this is a great representation and comparison of an Ease In and Ease out technique.

If you read through the comments for this Dribbble post it is interesting to see what some people consider “ease in” and “ease out”. Surprisingly, people often get these two confused since different programs (web vs after effects) have ease in and ease out the other way around.

7 "Arc"

Arc

The Arc was an interesting principle of animation to search for. I found that many animations use arcs, however I chose an animation that showcased the principle clearly. As you can tell sergey voronov’s white dot follows the light blue dot in a curved path also known as an “Arc”. What is interesting about this arc is that it follows the latest google motion design guidelines. Check this out Sergey even made a live prototype of his dots creating arcs! http://share.framerjs.com/7nj9fvk5nybq/

8. "Secondary Action"

When I first read “Secondary Action” in the list of principle animations the first thing I thought of was dominos. Strange I know. I thought of a stack dominos from the chain reaction that happens when one hits the other, if all the dominos are in a tight line together. Interesting enough I discovered that Secondary Action is any action that results from the primary action. Adding this principle to the main action gives the scene more life by supporting and enhancing the main action.

This animation is absolutely adorable and also uses the principle of “Secondary Action”. The sloth swinging is the “Primary Action” and him licking the ice cream is the “Secondary Action”.

Creating Your Own

Introduction

Overall this project was a lot of fun. I learned a lot about After Effects during this module. Such as adding animated effects, adjusting sound tracks, organizing my file, etc. Reading about the 10 Principles of Animation prior to creating my animation and discovering animations specific to it online was helpful. This not only inspired my creations, but also gave me direction with the tips it provided.

Recreating triangles to export into After Effects

Orca Logo Stinger

When I read that we can use our own logo I was excited to begin. I knew I wanted to use my logo orca, but knowing how to execute it before getting into the module was unclear. At first I wanted to do something very similar to my stop motion animation, which created the whale with triangles. I dabbled in Polygon CSS in pen code originally and then moved over to Youtube for low polygon animation tutorials. I came across a Youtube video by James White. His tutorial explained how to use low poly triangles to create a rose within After Effects. His process was tedious, but made for a really cool effect.

Sound Effects:
For the sound effects, I really wanted it to feel like you were at the beach with the water washing up on the shore. Dolphins and orca whales jumping in the background. I found the ocean waves, dolphin/orca whale callings, etc. for free on freesounds.com.  It was important that the sound effects went with the animations exits/opening/ending. I also had the volume drop on the music at the end to allow the dolphin callings to be more apparent.

Music:

I wanted to use a happy up beat tune like my previous animations. I also wanted to choose a song that paired well with my orca calling noises. It was important that the music didn’t over power the sound effects even at a lower volume.

Animation:

Watching how-to YouTube videos really helped me with the animations transitions. I found the After Effects “Effects Panel” extremely fun to play with and resourceful. After adding the effects I also applied Ease in and Ease Out to them on my timeline to capture the “Ease in, Ease Out” principle of animation.

Test Animation

This one was a lot of fun to create. Although, this was a really cool effect I wanted to continue to play with some other ideas and techniques I had in mind. Therefor, I decided to use this logo stinger as a test to try some other effects I had in mind. Effects that would market my website within the logo stinger.
I decided to use my whale logo with sound effects that expressed the environment the orca was in as well as the orca itself.
The "Effects" panel was one of my favorite panels to play with in After Effects. It allowed me to learn more about applying key frames and matching effects with music.
Dropping the transform arrow down allowed me to adjust multiple important keyframes for my animation.

Completed Logo Stinger

It was a lot of fun matching the sounds of the orca as well as it’s environment to the movements of the text. I wanted to market my website in my logo stinger as well as match effects and music with the motions and feel of my storyline.

This is the video I used for my test animation. This video provided resourceful information regarding to the triangle animation effect within After Effects that I made for the test animation.

After tracing my low poly of my orca in Illustrator I imported the composition into After Effects to follow James low polygon tutorial.

I had over 200 triangles to move into the frame for this animation. Tedious, but made for a really fun eye-catching effect.

1 Facebook Twitter Google + Pinterest
Module 2: Craigslist Sitemap

Sitemap

After conducting user research on current Craigslist users and completing a competitive analysis I was ready to start my sitemap. This element would be key for front-end developers, back-end developers and designers working on my redesign. What might seem obvious to me, may not to someone else touching my project. It was very important to make sure my design decisions were backed by research.

As of today Craigslist is broken up into 8 categories and 256 sub categories. It has more than 200 million user postings in 100 topical forums and more than 70 local sites in 70 countries. Using statistical data and research I was ready to start laying out the architecture of my sitemap. Here’s a great fact sheet I found on Craigslist’s website, if you are interested in learning more about these facts. While constructing my sitemap it was important for me to understand what the current Craigslist site is trying to achieve and what pain points I wanted to focus on for my redesign. There were several areas of improvement that I wanted to solve within Craigslist’s current architectural layout listed below.

Areas of Focus to Keep and Remove

What I liked about Craigslist and wanted to keep:

Reduced Number of Clicks – Craigslist’s current homepage reduced the number of clicks the user must take in order to reach their goal. I do find Craigslist.org over flooded with links. However, I would still like the hierarchy of the links on Craigslist.org to stay relatively the same. It’s amazing how you can interpret a sitemap into number of clicks. The sitemap is where I needed to focus my attention to achieve this.
Current Categories – After conducting research I have identified that the category pages currently on Craigslist have been comprehensive and straight forward for their users. I decided to keep the categories craigslist had on their site, since it seemed that these resinated best with their users. (I did make some small shifts to the categories that I get into detail later in this segment. For the most part they stayed relatively the same.)

What I wanted to change or add to Craigslist:

Add Support Page – Although, I would like to keep the categories on Craiglist’s current site there were additional pages that I felt craigslist would benefit from. Such as a support page to provide upfront resolutions and connections with a site representatives.
Add Social Media – Currently, craiglist.com does not have any links to bring their users to their social media pages. This is mostly because Craigslist staff is very small. Craigslist’s fact sheet states that there are only 40-something craigslist staff that work out of offices located in San Francisco, California. Since this redesign requires me to push outside the boxes, I redesigned their website considering they had a larger team. Social Media is a very important element in any website looking to grow it’s users. This is why I choose to add a page dedicated to social media. I also wanted to add direct links to their social media networks on their website.
 Add Verify User Page – After collecting user feedback from my family and peers in the office I identified several repeating concerns. Craigslist was “sketchy”. They did not feel safe browsing through the website. Although, I think a lot of this has to do with Craigslist’s appearance it is also apparent throughout it’s architectural layout. It was clear to me that I needed to add an additional page to my sitemap. The verify user page will require users to upload imagery and identification before they can use Craigslist. Similar to Airbnb.com security verification. Which verifies users to create a safer experience. It is evident that I may lose users this with this step, however one of the problems I wanted to solve for this redesign was to make Craigslist a safer place.

Designing for the User

When it was time to dive into the design of my sitemap, I was somewhat intimidated by the number of categories I had to play around with for Craigslist. At this moment I slightly questioned if picking such a complex site to redesign was the right choice. However, after breaking this step into smaller steps helped me become one with my sitemap. First I listed all the categories Craigslist had on paper. I removed, added and edited page titles I wanted to redesign for my sitemap. After I had everything on paper I numbered and moved pages around to formulate a hierarchy of my pages. Once this was complete I brought everything I had on paper into a visual sitemap.

Craigslist Sitemap Redesign

Craigslist Redesign Site Map

I designed my sitemap in Sketch using a free template provided by Greg Dlubacz at http://uxflow.co/. It includes bubbles and arrows to easily customize your sitemap. I would recommend anyone with a simple or complex web structure to check it out. Definitely a bookmark material in my opinion.

This Sketch template also came with a few colored circles with numbers inside of them. I assumed they were to number the hierarchy of pages. However, I ended up using them a bit differently. The circles on the pages highlight specific flows that I edited or added to my redesign. Their color and number identify which flow they belong to below.

1. Blue – These pages were added to my website for Support and Social Media.
2. Green – The flow on the right highlighted in green showcases the user sign up required to verify your account.
3. Purple – Discussions is already on Craigslist’s website. However, I have highlighted it since I felt like it did not belong with the other category pages. The purple circle is a reminder to include it on the homepage, but differentiate it in my wireframes.
4. Yellow – Personal is a category that has obviously gotten a lot of attention. However, my main goal is to redesign for a safer and comfortable experience. I highlighted this page to remind myself to still keep it, but not give it as nearly as much attention.

Craigslist Redesign Wireframes

Check out my Craigslist Redesign Wireframes next.

4 Facebook Twitter Google + Pinterest
Module 2: Craigslist Wireframes

Wireframes

Before creating my wireframes I found it was important to create a persona. Although, this project was a “redesign”, I was redesigning it for the users. When I started my persona I was very happy that I had user feedback to influence my decisions. Since I was limited on time for this assignment, I created one persona that combined the goals and needs from my interviewees. My friends, family and coworkers brought up great points about Craigslist’s current design that I did not consider. This helped me from making assumptions when drawing my persona. My persona’s name is Jennifer. Jennifer’s persona showcases her goals, pain points and description. Although, she is a frequent Craigslist user for school materials she often feels uncomfortable while browsing the site. When creating my wireframe I had to design for Jennifer, so she could achieve her goal. It is evident that I will not only have to make the site more attractive, but also make Craigslist safe.

I was fascinating to uncover the safety pain point. Many of my interviewees talked about different experiences on Craigslist that all linked back to the precautions of safety and privacy. It was interesting to think about how unattractive the site is today and the unsafe appeal of Craigslist. Craigslist unattractive design very well might be a pain point to these uncomfortable users. I was really excited to bring this unattractive design / safety correlation into my wires.

This persona combines the users needs and goals I conducted during my interviews.
Notes I took determining my focus. - What did we need to find out? / What do I already know / Who was I designing for?
Audience I was targeting for my Craigslist Redesign

Let's Get Started

Bringing It All Together

Here are a few words that I developed earlier in my design process. These words will become a helpful reminder of what my wireframes should be looking to achieve:

1. Simplify

2. Safety

3. Organization

4. “C” Curve

5. Intuitive

 

 (I ended up removing Intuitive since I felt that it was closely related to organization. Keeping the list short allowed me to remind myself in a matter of seconds what my goals were. These words were to help me, not necessarily help a front-end or back-end developer)

Wireframing

Creating the Wireframes

Since most of the User Experience designers in my office use Sketch I decided to also use It to create my wireframes. When I began working on my wireframes I reviewed my initial research, mood board and semantic exploration. My Pinterest board helped me refresh on some of the topics I explored earlier.

I first reiterated on a few rough sketches before jumping into Sketch. I decided I would use imagery to lure the users in, rather than a jumbled list of categories. This imagery section will be personalized to your likes and recently viewed postings. It will have a similar algorithm like Amazon when the user is logged in.

Wireframe created in Sketch
Search location dialog box

On the left side of my wires you will see a box holding links to the pages on my sitemap. It was important the user could still easily click into a category they were interested in. I also added a check box on the left side filter called, “Verified Users”. When the Verified Users box is selected you will only see the users that have completed their verified account profile and have received a set amount of positive reviews.

Working in Sketch with color palette I created in Coolors

In my final design you will notice I used a lot of rounded boxes apposed to sharp edged boxes that Craigslist’s current site has. The rounded corners reflect the “C” curve I explored earlier in my design process.

As I mentioned earlier, I wanted to promote a safer and more comfortable experience for my users. The “Verified Account” check box on the top left of my design will provide a simple solution to filter out accounts that have not been verified or have low reviews. To push the “Verified Users” concept further I put a star icon on all the listings that were selected as a “Verified User”.  This would establish a better connection between the logged in user and user who made the listing. I wanted my audience to feel safe by my navigation and design ascetics.

Final redesign created in Sketch
Search location dialog box

Craigslist Redesign

Conclusion

I have to say this project was such a great learning process for me. It allowed me to push my creativity and explore different design processes. I really enjoyed the challenge of taking on such a high leveled architectural layout like Craigslist. There were obstacles I encountered while tackling the architectural layout of Craigslist. Although, I learned that breaking the difficult steps into even smaller steps helped me solve my problems. The design process certainly is a very important series of steps every designer should posses.

Craigslist Redesign Overview

Feel free to go home or track back to a previous step you may have missed.

4 Facebook Twitter Google + Pinterest
Module 2: Craigslist Color Palette

Color Palette

Coolors was a fantastic tool to create my color palette. I first started by creating a new account named after my blog, Orca Journey’s. After I created my account I browsed the site for blue and purple scheme palettes. There were so many beautiful color palettes to choose from. I referenced some of the images in my Purple and Blue mood board for inspiration. While browsing color palettes it was difficult to find one to my exact liking. The palettes I saved served as great inspiration, although amongst these palettes there were at least one or two colors that didn’t feel right to me. This is when I set off to create my own palette on Coolors. By using the saved palettes in collection as a base I was able to make adjustments to the hex colors until I got the perfect shade of purple and blue I was looking for.

User Friendly Colors

Legibility

When selecting the hex colors for my site it was important to remind myself that these colors must be legible. Meaning if most of my colors were bright or light colors I would at least have to select one or two dark colors to create contrast. This dark color would be used for typography, buttons and icons over the lighter or brighter colors.

Webpage FX’s readability tool is a great resource to tell you if your site is legible.

I also came across a site to determine if two over lapping colors are accessible, here. This made selecting my typography color against a specific color easy and fun.

Coolor's sign up only a few minutes to complete, before get started on my color palettes.

Accessibility

When it comes to web design accessibility is very important. If your website is not accessible you will lose traffic to your site. Technology such as screen readers will help people with disabilities decipher a webpage.

This is the color palette I decided to use for my redesign.

Craigslist Redesign Sitemap

Check out my Craigslist Redesign Sitemap next.

4 Facebook Twitter Google + Pinterest
Module 2: Craigslist Mood Board

Mood Board

Expressing my creativity prior to diving into a project is one of my favorite steps in the design process. A mood board is a collection of inspirational images to help you start a project or in this case redesign a website. I created my mood board in Pinterest for this redesign. I chose to use Pinterest to create my mood board because I felt it would be a great way to organize my content. I enabled a Chrome plugin called Pinterest Save Button, so I could easily pin content to my boards while surfing the web for ideas. Originally, I created a new Pinterest board on my personal account for my mood board. However, after collecting several pins to this board I found that it was hard to stay organized. This is when I decided to create a new Pinterest account to collect my content for my mood board. Creating a new Pinterest account allowed me to create multiple boards to explore and strictly focus on pins for my project. In addition to Pinterest, I also took photos during the week for my project. I didn’t want to limit myself while collecting content for my mood board.

Exploration

What I was I looking for

Here are a few topics that I was interested in further exploring during my Craigslist mood board exploration:

Pinterest Boards:

1. Curved C – Uses design elements that replicate the curved “C” in Craigslist. Smooth design elements such as smooth/round icons, boxes and typography vs. sharp design elements and boxes.
2. Purple and Blue – Craiglist’s competitor “Jet” uses purple in their branding. Craiglist’s well known peace sign logo also uses a similar color purple. I wanted to keep the purple in this redesign, however after identifying “Jet” and a few competitors with this color I decided to use a combination of purple and blue. If you are interested in learning more about the color palette for my redesign click here.
3. Light Icons –  I like to look at the latest trends of the web when making decisions about my design elements. Light icons has been a moving trend this year. Companies such as Facebook, Twitter and Instagram are using light icons throughout their experiences. I was very interested in replicating this style in my redesign. I also felt that this style would work well with the “Smooth C” look I was aiming towards.
4. Simple and Organized – As I mentioned earlier in my post there are many reasons why Craigslist.com is structured the way it is today. It remains popular because products and services are categorized with the customer in mind. It takes just a few seconds to receive results from a search. However, I feel that we can further simplify and organize the material to appeal to the customer.

Further Exploration

Semantic Exploration

As I was having a lot of fun working on this step for my project, I decided to take it a step further with a semantic exploration chart. First I wrote down three words to represent the progression of Craigslist. These three words were, Newspaper, Craigslist’s UI/UX today and Craigslist’s Redesigned UI/UX. After I had these three words written on my paper I branched words that came to mind (good and bad) when thinking about these words. After I was done I decided to highlight the words I originated from in green, good words in yellow and negative in pink. This was a fun way for me to focus and brainstorm new ideas.

Craigslist Redesign Color Palette

Check out my Craigslist redesign Color Palette next.

3 Facebook Twitter Google + Pinterest
Module 2: Craigslist Introduction

Introduction

I’ve been assigned by Professor Akselsen to redesign an existing website. For this assignment I chose to redesign Craigslist. I will be employing an iterative design process in order to break down the requirements and fulfill the needs of the user. Envisioning an open-ended project within a restricted time frame will require me to make some assumptions along the way in order to limit the scope, maximize my focus and deliver on time. I’ll be approaching this problem using the material we learned in Module 2.

The Assignment

The Challenge

Use a company or organization of your choice to create a simple, mood board, color palette, sitemap and wire frames. Reconfigure the site structure/sitemap and redesign the look and feel, while working in the content that you have and allocate time to each of the 4 components sensibly time wise. You should be able to pull together some thoughtful visuals on how the site can be improved. Use the text from the site and/or dummy text (except for headings/navigation elements, which need to communicate how you are structuring the site). For images, use only visuals that you own or that are royalty free.  Your work will be evaluated based on how you have applied the ideas we’ve discussed in the segment.

Components:

1. Mood Board

2. Color Palette

3. Sitemap

4. Wireframes

Information Gathering

Defining the Problem

After exploring discoverdesign.org/handbook in Module 2, I became familiar with the steps required to solve the problem. I will be employing an iterative design process in order to break down the requirements and fulfill the needs of the user. Before getting started I needed to learn more about Craigslist and it’s users to identify the problem. User research and feedback helped me understand how other people use Craigslist, so I could respond more effectively to their needs with informed and inspired design solutions.

Discoverdesign.com design process.
Craigslist's current homepage.

Information Gathering

Research

Craigslist became a web-based service 20 years ago. Studies have shown that Craigslist has replaced the newspaper industry. Between the years 2000 and 2008 Craigslist has left a huge dent in newspapers’ revenues. So much in fact, it has drove down the rates newspapers were able to charge for display advertising and forced them to increase their subscription and newsstand prices. Craigslist took a giant bite out of newspapers’ revenues — some $5 billion between the years 2000 and 2007. It offering a cheap, easy online alternative to their classified advertising pages.

Craigslist Redesign Mood Board

Check out my Craigslist Redesign Mood Board next.

3 Facebook Twitter Google + Pinterest
Module 6: Assignment 1

Browser Compatibility

I was tasked with the assignment to compare and contrast the appearance of my user experience process blog in multiple browsers. The first step I took to completing my assignment was to take screenshots of my homepage (orcajourneys.com) on my 15inch Macbook Pro. I took a screenshot of my process blog utilizing the entire screen in Google Chrome, Safari and Chrome. I chose these three browsers for my assignment, because they are well known to both Mac and PC users.

I took a screenshot by using the command key, (Shift, Command, 4) on my Mac. Alternatively I could have used a plugin. Although, I chose to use the command key function since the results would have varied among the browsers with a screenshot plugin.

Once I took the screenshots I then took a similar approach on my 12.7 inch iPad and iPhone 7. Taking a screenshot off these was a little easier since the browser launches across the entire screen.

Mobile

Google Chrome, Safari, Firefox & Google Now

Below you will see the side by side comparison of Google Chrome, Safari and Firefox on my iPhone 7:

Safari on iPhone 7 (Res. 1334X750px)
Firefox on iPhone 7 (Res. 1334X750px)
Chrome on iPhone 7 (Res. 1334X750px)
Google Now on iPhone 7 (Res. 1334X750px)

Findings:

I took vertical screenshots of my blog on Google Chrome, Google Now, Safari and Firefox. It was interesting to learn that my blog utilizes the screens pixel density the greatest on Google chrome and the least on Google Now. Although, these browsers are visually different, they all are solving similar problems to give their users the best browser experience on my iPhone 7.

Here are a few things to consider for mobile:

  • Smaller display than tablet and desktop.
  • Safari is the default browser for iOS
  • Gesters differentiate across mobile browsers. (Pan, Zoom, Double Tap Etc.)
  • Portable
  • Everyday usage
  • Push notifications

Observations

  • Side bar can not fit
  • One blog tile is above the fold
  • Hamburger menu used opposed to navigation bar

Here is a great article I found by Thorin Klosowski that compares Google Chrome and Safari on iOS if you are intrested in learning more, https://lifehacker.com/iphone-browser-showdown-chrome-vs-safari-1793167099/amp.

Desktop

Google Chrome, Safari, Firefox

Below you will see the side by side comparison of Google Chrome, Safari and Firefox on my 15inch Macbook Pro:

Firefox on 15 Inch Macbook Pro.
Google Chrome on 15 Inch Macbook Pro.
Safari on 15 Inch Macbook Pro.

Findings:

For desktop I took my screenshots on my 15 Inch Macbook Pro at full resolution. (2880-by-1800 native resolution). It is apparent that desktop exposes more pixel density than mobile. This has allowed me to provide more content, navigational links and a side bar introducing the user to my user experience process blog.

Here are a few things to consider for desktop:

  • Larger display than tablet and mobile
  • Safari is the default browser for Mac
  • Interactions differentiate across desktop browsers. (Pan, Zoom, Double Click Etc.)
  • Long-term use
  • Used traveling, on the go or workstation
  • Push notifications

15″ Macbook Display Specs

  • Retina display
  • 15.4-inch (diagonal) LED-backlit display with IPS technology; 2880-by-1800 native resolution at 220 pixels per inch with support for millions of colors
  • Supported scaled resolutions:
    • 1920 by 1200
    • 1680 by 1050
    • 1280 by 800
    • 1024 by 640
  • 500 nits brightness
  • Wide color gamut (P3)

Observations:

  • (1.2 – 1.6) tiles above the fold.
  • Side bar visible
  • Navigation bar visible

Tablet

Google Chrome, Safari, Firefox

Below you will see the side by side comparison of Google Chrome, Safari and Firefox on my iPad:

Google Chrome on 12 Inch iPad Pro.
Firefox on 12 Inch iPad Pro.
Safari Chrome on 12 Inch iPad Pro.

Findings:

I took screenshots on my tablet in portrait mode by holding the home button and power button simultaneously. I was surprised to find that tablet in portrait mode revealed the most number of blog tiles above the fold than desktop and mobile did. It seems like digesting content of my process blog might be most enjoyable on tablet, due to it’s exposed number of blog posts.

Here are a few things to consider for tablet:

  • Larger display than mobile.
  • Smaller display than desktop.
  • Safari is the default browser
  • Gesters differentiate across tablet browsers. (Pan, Zoom, Double Tap Etc.)
  • Portable (Easy to pack)
  • Used primarily for traveling and on the go.
  • Push notifications

Observations:

  • (3.2 – 3.5) Blog posts exposed.
  • Navigation bar visible.
  • Side bar shown.
3 Facebook Twitter Google + Pinterest
Module 4: Image Optimization

Image Optimization

Publishing optimized high quality images is critical to the success for many sites on the web. In fact, according to eBay, each professional product image that is added to a particular listing increases sellers’ percentage of making a sale by 5%. Images matter in e-commerce. When used effectively, they can convey vital information about a product, and can help drive sales.

One of the biggest drawbacks of having high resolution product imagery is that it can slow down page load times. Compressing images effectively is an important skill as a visual designer and is one of the best ways to reduce the file size. Page speed is one of Google’s mobile ranking factors, so it is important first of all for the user experience, but also for SEO. The product description page (aka the PDP) is an important step in the sales flow to showcase our product. This is where our customers determine if a particular product is worth purchasing and should never be overlooked.

Before Optimization

Getting Started

After I conducted research and reviewed the links Professor Akselsen provided for Module 4 I was ready to get started. I downloaded all three of Professor Akselsen’s images to determine which one I would use for my assignment. After reviewing the photos, I decided to move forward with the South India image since it had the highest byte size (443,117 bytes). After I selected my image I downloaded an image compression application called ImageOptim recommended in our module. ImageOptim removes bloated metadata by compressing imagery without losing quality.

Before Image

Observations and Process

It was evident that this image had great pixel ratio quality. Although, it was beyond the retina display size and quality necessary for my site. From observing the image details on my mac I was able to determine my following steps to optimize the image. Optimizing this image for my site will not only allow my site to load quicker, but also reserve more space on my hosting platform, Dream Host. This photo was only 900 x 600 pixels, but had an astonishing size of 443,117 bytes!

Below are the specs I collected from the South India photograph:

Dimensions: 900 x 600
Device make: Sony
Color space: RGB
Kind: JPEG
Size: 443,117 bytes

These are the following steps I took to optiminize the South India image:

Step 1 – Imported image into Photoshop

Step 2 – Export image from Photoshop (File > Export > Save for Web (Legacy)…) / 75% Quality

Step 3 – Dropped image in ImageOptim to remove additional bloated metadata without losing quality.

Final result of image optimization after condensed in ImageOptim.

Step 4 (If applicable) – Resize image if your result after taking these steps have not condensed your image to liking. First, find out what size your image is/will be displaying on your site. Next, resize your optimized photo to double the size of what your image should be displaying on your site. This will ensure your image is optimized for retina display and is condensed for the web.

Image size preset in Wordpress

After Optimization

South India photo after image optimization. (158,279 bytes / Over 280,000 bytes smaller)

Results

I was able to reduce the South India photo to 158,279 bytes without resizing the image. That’s over 280,000 bytes less. The best part is that the image will still display in retina on my site and has not lost any visual quality. If you want to reduce your image more, I would recommend taking the same steps with the original image, but change the Save for Web quality setting to (74-65%) or consider taking step 4 if you haven’t already done so. It is good to note that it is very easy to lose an immense amount of pixel quality without realizing.

After completing my assignment, I showed my mom my before and after image. I showed her the before and after image to see if she could pick out the image with over 200,000 bytes less. Her initial reaction was, “Diana this is a trick they are the same image.” After I received my mom’s feedback I briefly explained how I optimized the before image. She was amazed that the result was not visually apparent. Although, I could have reduced the image more it may have been more obvious to depict the before from the after photo. My mom’s answer was exactly what I was hoping to hear and verbally confirmed I didn’t over do the process.

Tip – If you think you have gone too far with the Save for Web qualities, keep the original photo handy for a simple compare and contrast! That way you know if you have over optimized your imagery.

Below are the new (optimized) specs I collected from the South India photograph:

Dimensions: 900 x 600
Device make: Sony
Color space: RGB
Kind: JPEG
Size:158,279 bytes

Alternatively, you can optimize your image by converting it to vector or SVG (Scaleable vector graphic) by following these tutorials, Convert you Imagery into Vector with Illustrator,  Convert Image into SVG.

3 Facebook Twitter Google + Pinterest
Module 2: Assignment Part A

The Newest Apple Devices Hit Social Media

For Module 2 I had to select a global event to follow on social media between September 11th to the 17th. There were many topics at this time that had unpredictable paths / resolutions; such as Irma, Houston flooding and earthquake in Mexico. Although, I was interested in these topics I wanted to find a topic I could relate and connect similar experiences to.

September 12th 2017, marked Apple’s first Worldwide Developers Conference hosted at Steve Jobs Theater in Cupertino, California. Apple’s Worldwide Developers Conference formally known as WWDC is a global event held annually in California by Apple. This is where Apple releases their newest technology advancements and devices publicly. I am a techie and apple fanatic at heart, so I knew this would be a great event to follow for my assignment.

The month of September is a very important month for any Apple lover. This has been the month that Apple releases a new iPhone every year. Although, we can suspect a new device will be rolling out; there are no announcements directly from Apple prior to the WWDC indicating anything about their new device. Most of what we know is based off of leaks on the web or word of mouth. But, can we really believe an article we read on the web or an in person conversation with a trustworthy friend? Is the source reliable or are they using you as click bate for their own good?

Learnings

Social Media Vs. Word of Mouth

Did you learn more on social media than other outlets? Do you feel the information was factual and sourced?

By collecting information from multiple networks I was able to learn more than other outlets, such as local newspapers and surprisingly one-off conversations in the Verizon office. I noticed the local newspapers covering the Apple Event found one way or another to find it’s way back to social media. It seemed as if there was little no gap between the two, since all the leaks surfaced from social media. It was clear to me that the information on new iPhone device prior and after WWDC was factual and fictitious.

Did the post on social media or in the online publication/website create a conversation?

I found that the social media posts generated more conversation than the online publications. The social media posts had an incredibly higher number of shares and comments than the online publications. Most of the online publications had no comments. However, the social media posts linking out to the online publication with zero comments had 100’s to 1000’s of comments.

Explain what was said on each, if anything. What was the overall sentiment on social/news outlet? Do you feel that both sources were trustworthy?

I found it very difficult to find local news papers covering iPhone 8 leaks prior to the Apple event. I think it may have to do something about the leaks surfacing directly from social media. The leaks also changed very quickly during the days leading up to the Apple event, which may have prevented local newspapers to release their publications before social media could.

Learnings

Conclusion

I had a lot of fun working on this assignment for Professor Miner’s Social Media class. Following multiple sources over a short duration on a topic I enjoyed was a thrilling and rewarding experience. I was amazed how leaks can easily be interpreted as factual information. It wasn’t until I did further investigation such as, identify where the source was finding its material, analyze the headline and use personal experiences with technology to arise to an opinion.

By completing this assignment I was able to see what Doug Hardy explains as the “disturbance of journalism” in his presentation. The transitional disturbance that has occurred between the journalism and social media era was evident. It would be interesting to go back in time and complete this assignment during the journalism era. Of course, we can’t expect Apple to come out with retina display iPhone 8. Although, if they  did I am confident that the information would be enclosed with far less people if any at all.

I would recommend anyone reading the news to check all sources before forming an opinion. Even leading news sources provide false information and skew a story time to time. Technology is advancing at an amazing rate, but we can not put total trust in any social media.

3 Facebook Twitter Google + Pinterest