Author Archive

A Few More Breaths

May 9, 2013 |  by  |  unfathomable  |  Comments Off on A Few More Breaths

 



Strategy: After doing a lot of research, I decided to make this app focused on spreading awareness through a continuous infographic that put faces to the numbers. In America we are very distanced from cerebral malaria, so I wanted to get as many eye-appealing numbers and facts in as possible, while keeping it simple enough for a lazy American to actually read. The majority of the app is one long string, which one can progress through very quickly while still getting the point. Hopefully, the facts would push the user to donate. 

 

Typefaces: Futura std  Medium Condensed (my favorite this year), Caecilia Light, BenchNine (for the animation on cover- had to be a google font to use in Edge), and Bodoni Std for body type. Simple, legible, but added the Caecilia for some style and kept the Futura at Medium Condensed for bigger impact.

 

Graphics: I’ve seen a lot of infographics before, but I can’t think of a single one that encompassed both vector art AND real photographs. It’s a hard thing to put together without being cheesy. I went for that challenge, and I think the dotted line and change in slides made this successful. I kept the vectors/graphs very simple but tried to introduce color when I could.

 

Infographic: My entire app is almost an infographic, because that was the part that interested me the most. I kept animations out of it so it wouldn’t interrupt the continuous string of messages. I also included less statistical information on the last picture of each infographic section, to connect the faces to the numbers.

 

Colors: Mass General blue, white, and shades of gray. I didn’t want too many colors to distract from the photographs, so I kept the pops of colors within the vectors of the infographic slides. I fiddled a lot with opacity to keep the relatively bright blue from conflicting with the seriousness of the black and white photographs.

 

Tutorials:

 

 

 

Class handouts on DPS

 

Class discussion on transparent backgrounds in Edge

 

The War of Art (if that counts), for how to get over creative blocks

 

Scrolling frames: http://helpx.adobe.com/digital-publishing-suite/help/scrollable-frame-overlays.html

Inspiration – ABC iPad App

April 25, 2013 |  by  |  Inspiration, unfathomable  |  ,  |  Comments Off on Inspiration – ABC iPad App

 

ABC iPad App

http://www.behance.net/gallery/ABC-iPad-App/6748691

Overview: This is a mock up app intended to help children learn their ABCs through two different games, which feature animals that represent the letters. It’s an application that is based off of the designer’s larger project, “Animal Alphabet” which is a series of posters of the animals representing the letters that was compiled into the book. Taking these simple designs, the designer took it to a whole other level by going for an app that is both beautifully designed in a magazine/book page way, but has the interactivity of a game.

User Profile: The user of this app would definitely be a child who has not yet mastered his/her ABCs, though the app itself would be bought by an iPad owner (likely a parent). I see this parent as being one who wants to use technology productively when allowing their kids to use it , instead of just providing a distraction (kids seriously do love touch screens/interactivity, when I brought my iPad to my 10 month old niece over Spring Break she was constantly playing and tapping and jabbing to see what would happen).

User Interface: The interface is simple, clean, and playful, all of which fit the user of a child perfectly. The type is large, the colors are bold, and the directions are spelled out (more likely for a parent trying to show a kid how to use it). There is humor spread throughout the copy, which a parent would appreciate, while the interactive elements are large and bold so a child would intuitively want to click on it. I love the vector style of the animals too.

Functionality: Though this app has not actually been developed yet, the video above shows the functionality pretty fell. The navigation flow is different but perfect – it shows the two different game options by type and each slide has clickable back/forth arrows (a little too big for my liking) that are consistent. Great features like sound (animal noises) and pop up bubbles that tell you if you’re right or wrong (with wording that encourages kids to keep trying/feel rewarded) really make the app. The only thing that bothers me is as far as I can tell from the video and picture mock ups, there’s no way to tell that you need to swipe down on the cover to reveal the navigation. My intuition would be to swipe towards the right as a vertical alignment for games/magazines seems more rare.

HTML5 Inspiration – Domani – Mary Wagner

April 17, 2013 |  by  |  Inspiration  |  Comments Off on HTML5 Inspiration – Domani – Mary Wagner

Screen Shot 2013-04-17 at 12.41.26 PMScreen Shot 2013-04-17 at 12.32.16 PM

http://domanistudios.com/#/home

Overview: Domani is an agency that helps define brands via social media and other outlets. I’m not entirely sure what else they do, because they seem to present themselves as a jack of all trades (and to their credit, their website reflects that). The website uses large photographs/animations as its background and then bold text to create a clean feel, though the animations are almost overwhelming. It definitely leaves the viewer with the thought that this is a VERY creative studio.

User Profile: The user is like a business owner or employee around 20-45 years old who is wooed by fancy animations and embraces interactivity in websites openly. It’s likely someone who values form over function, because the aesthetic distracts from what Domani actually is. It’s also likely to be someone who uses a tablet or is familiar with tablet design, because their site has a lot of features that mimic iPad interactivity.

User Interface: The interface is half clean, half crazy. Full page animations are overwhelming on their facebook page, but small details (like the noisy/blurring of the arrow buttons when hovered) and the change of the background of their logo are wonderful touches.  Other than the ‘Facebook’ page, all of the full page photographs are animated subtley, which works well against their bold white type and minimalistic copy.

Functionality: I was sometimes distracted by how prolific the animations were, causing me to really disengage from the text. Even though I flipped through their whole site, and found myself impressed with the design and visuals, I couldn’t remember a lot about what Domani actually was or why it would be better than any other brand assisting studio. The portfolio part of the site is by far the most functional and best executed, with a simple list of clients and hover animations that direct you to large images of their work that reflect the brands aesthetic.

 

Slavery Footprint – Interactivity Inspiration

April 11, 2013 |  by  |  Inspiration  |  Comments Off on Slavery Footprint – Interactivity Inspiration

Screen Shot 2013-04-11 at 12.19.36 PM

http://slaveryfootprint.org/

Overview: Slavery Footprint is the coolest site I have seen in a long time. It was created by the organization Made in a Free World to spread awareness about modern day slaves and how our life choices create them.The website explains the problem (typographic animation with scrolling interactivity) and then presents a very cool, detailed, interactive survey where you input information about yourself (everything from your diet to what stuff you have in your medicine cabinet to how many clothes you own) and it tells you how many slaves work for you. Eye catching and eye opening at the same time. Seriously kickass.

User Profile: The user of this website is anybody and everybody, though I could see 20-30 somethings or more mature/passionate/outward looking teenagers being interested as well. The user is someone who wants to learn more about the world even if it implicates themselves (by showing the user how they indirectly employ slaves). I felt a lot of guilt while going through the survey and got bored with the details half way through, so the ideal user is someone who withstands these emotions and the process because of their interest in the subject of slavery.

User Interface: The interface is very simple. I love the home page with the two questions, I immediately found the one that applied to me first (“What? Slaves work for me?”). The type in the initial vertical scroll is simple but well used, with a hand vector graphic, and the graphics used throughout the survey are interesting (also vectors). Only upon reflection now am I thinking about how it’s strange how playful the interface is considering the seriousness of the subject matter, but somehow it really works.

Functionality: My only complaints about this website come in some the functionality details. Navigation is simple and the general functionality is excellent, but when I wanted to return to the home page, after starting the survey- it auto directs you to your result and you cannot visit the home page again without clearing all of your cookies (annoying). Also when you visit the home page a video pops up, and although it’s not autoplay you can be sure that I Xed out of it super quick to see the stuff behind it. The video should be presented as an option on the side- I see what they were trying to go for by having it be at the forefront to get the most views, but I think the website is effective enough without shoving it down your throat.

Think Green Meeting – Interactive Website Critique

April 3, 2013 |  by  |  Inspiration, Student Work  |   |  Comments Off on Think Green Meeting – Interactive Website Critique

Think Green Meeting

Overview

ThinkGreenMeeting.com is a company that helps organize audio meetings/conferences through the internet. Their angle is that by holding conferences through your computer, you save the time, money, and environmental waste involved with traveling to meetings and staying at hotels (and other expenses). Simply put, their website says: ” Save time. Save money. Hold a great meeting. That’s good for the planet. And good for business.” The interactivity of this website is not huge, but it is attention getting enough and simple. I think the environmental ‘green’ spin they put on their company (of which so many similar competitor companies exist) is a smart move, and their website reflects the ‘environmental’ qualities of the company in their design choices (paper textured background, green colors).

User Profile

The user of this website is likely a business man/woman who is looking to set up a meeting/conference via audio. Because of the technology involved, I’m inclined to believe it would be a younger person (20s-40s). The user values function over design, judging from the rudimentary pages that appear when you click on links to actually set up a conference (the layout completely changes). It is also likely that the business involved has a green initiative, or is trying to cut down on their transportation and other kinds of business expenses.

User Interface

The website is set up as one page that scrolls when you select a different page on the navigation. This is a nice touch because you see elements moving, but I also found it confusing and depending on the size of your browser, there is a little overlap from a separate page onto the one you are focusing on. The site is easy to use but once you actually get involved with wanting to set up a conference, the layout completely changes to a boring, text-heavy site with pricing details and a login. There is no consistency between the fun interactive site that displays the first 5 pages and the site that actually involves action. This seems like a bad idea to me because the design goes from excellent- clean, simple- to busy and overwhelming. I personally would not purchase their services after seeing the pages on the active part of the site, especially when you’re primed by looking at the clean, simple part of the site first.

Functionality

The most interactivity occurs on the home page, which has simple vector graphics of cars and planes. As you mouse over a car/plane, the vectors disappear by fading out to one side of their square image form (the sides vary which is a nice touch because if you slide your mouse over several cars/planes at once, they seem to be wiped away instead of just disappearing. The more cars/planes you get to disappear, the meeting “cost” goes down, demonstrating the companies main draw which is that setting up a conference via audio saves you money in transportation costs and also benefits the environment. There is also a carbon calculator which compares the amount of cars/planes it would take for you to hold the meeting to how many trees you’d have to plant to offset the carbon footprint, which has slight animation of trees which I think is pretty damn cool.

Interactive Website Critique

March 27, 2013 |  by  |  Inspiration  |  Comments Off on Interactive Website Critique

Screen shot 2013-03-27 at 8.37.05 AM

The Rule of Three – http://rule-of-three.co.uk/
Overview

The Rule of Three is a copywriting website that aims to get potential clients by using simple, clean, text-based design. I enjoy the animation of the website but find it to be too text heavy and also too laborious to work through the whole thing- unless you are delighted by the animations (which I was).

User Profile

The user of this website is a mature male or female, who owns some kind of business or is working on a project that requires copywriters. Their clients span all different kinds of industries (Hilton Hotels to Tesco to BBC), but all value elegance, simplicity, and well-delivered messages (otherwise they wouldn’t be looking for copywriters in the first place!).

User Interface

The user interface is very clean and text heavy, using one texture (a gray fabric) and a monotone, black and white color scheme. As copywriters, this approach makes sense as it mimics the aesthetics of traditional type- black and white, serif fonts (on the starting page, anyway). The vertical scroll approach works in that it tells the story chronologically, but also I was about halfway through scrolling (and getting pretty tired of it) when I noticed the navigation bar had appeared at some point at the top. I think the use of all text does place extra emphasis on the couple of icons that are employed when explaining the importance of copywriting/the company, and those icons are delightful and exciting as a result.

Functionality

This website does not feature interactivity, it requires it in order for the user to get the information he/she wants. This is a good thing, and a bad thing. It requires that the user have an attention span that’s beyond- “I need a copywriter, why are these people awesome, who do I contact”, and rather somebody that doesn’t mind being led through a vertical, line driven story about why words are importance and how The Rule of Three can help them. The nav bar jumps to the appropriate part in the vertical scroll, which is a nice feature- but I didn’t even notice it until I was almost done with the scroll (perhaps some kind of arrow or visual cue that denotes when the nav bar becomes available as opposed to the scroll would solve this problem). There is a long bar and use of fading in the ‘Services’ section that I really like, and simple animation as the text that explains each service (represented by a simple icon) flies in and out. I like that things appear on the vertical scroll only as you follow them down- but if you don’t click the initial arrow which jumps you to the start, you have to scroll through a page of whitespace (at which point I almost turned to a different website to write this critique on). At the end of viewing the whole scroll, I must say I was impressed by the company, especially after they feature the icons of all of their (famous) clients.

Magical Weather App – Mary Wagner

March 20, 2013 |  by  |  Inspiration, Student Work  |   |  Comments Off on Magical Weather App – Mary Wagner

Overview

Magical Weather iPad App

Screen Shot 2013-03-19 at 8.23.54 PM

I picked this application for it’s simple typography integrated with icons and photographs- it explains the weather to the user in 3 different ways all at once. The purpose of the app is to give weather forecasts for anywhere in the world.

User Profile

Because the app isn’t free (though it is only about $2.30/1.79 euro), the user is probably an older adult in a business profession who travels frequently and would have a use for such an extensive weather application. Their technical abilities are novice- the app only uses taps and swipes and is very simple with large touch sensitive areas.

User Interface

The use of photography really brings this app to the next level compared to other weather apps. The white typography works 95% of the time, but when put in front of a lighter image it can get lost in the background. The icons are simple but convey what they need to and the grid layout when looking at multiple locations is really nice.

Functionality

The functionality is straight forward for those used to iPad applications, but a couple more calls to action might make it easier for the less experienced user. Overall I think the app knows that the content it’s delivering is simple, and reflects that in the design and the functionality.

Design Inspiration

March 6, 2013 |  by  |  Inspiration, Malaria  |  Comments Off on Design Inspiration

Screen Shot 2013-03-06 at 11.44.36 AM

http://ge.ecomagination.com/smartgrid/#/landing_page

GE’s Plug Into the Smart Grid

GE’s website features small animations that demonstrate the benefits of their new ‘smart grid’ energy systems. It’s mostly just animation, no interaction, which I found a little confusing when it finally did come interactive with a lever that changed the heights of animations and the numbers as a kind of bar graph infographic (but that part was really cool!).

My main critique of the site is that it’s not obvious what a smart grid is, thought when you delve deeper into the navigation you can pick up clues that it’s new technology that saves you a lot of money in energy. The simplicity of the animations is lovely- but it’s so simple in explanation that the message is not clearly delivered.

One element, which I have never seen before in an interactive website, involves printing out a piece of paper with a marker on it and then clicking on buttons on the website which launch your webcam. From the webcam, an animation shoots out from the marker on the paper and you can turn it and blow into the webcam microphone to see the turbines move and turn. There is a video that demonstrates someone doing this process which makes it very clear. I’m not sure how helpful the feature is in convincing someone to switch, but it is a very interactive VERY cool feature that I’ve never seen before.

Cerebral Malaria Research and Thoughts – Mary Wagner

January 24, 2013 |  by  |  Malaria, Research, unfathomable  |  Comments Off on Cerebral Malaria Research and Thoughts – Mary Wagner

Cerebral malaria, a severe kind of malaria that involves a P. falciparum infection in the brain, becomes fatal within 24 to 72 hours. The P. falciparum bacterium is transferred by a female mosquito, who carries the parasite into the patient’s blood, which depletes their red blood cells. It is unknown how the bacterium translates into a brain injury, but all too often, it does, especially with children because they lack immunity to the bacteria. The disease is also associated with retinal whitening, and 50% of children with cerebral malaria experience it. Overall, the disease is very severe, even compared to other forms of malaria, and 93% of children with the disease will experience spastic movements (like seizures), followed by comas, and then death. Even the 7% who survive the disease often experience neurological problems, such as losing feeling in one side of the body, and epilepsy. In fact, the leading cause of neurological damage in African children IS cerebral malaria. With such a huge fatality rate and such immediacy involved with this disease, why don’t Americans know more about it?

Following a conversation with my brother, who has studied malaria for 7 years as a PhD candidate at MIT, it seems that the problem lies in funding and lack of awareness, because the majority of cerebral malaria occurring in Africa, especially in sub-Saharan Africa. Americans do not encounter malaria often, while almost everyone knows someone who has or had cancer, so perhaps we are not to be directly blamed for this ignorance. At the same time, over 100 countries are affected by malaria, meaning that this problem exists beyond Africa and deserves more of our attention regardless of whether it personally affects us or not. The price of help is not high: just $10 can provide an entire family with net protection from mosquitoes.

Malaria kills about 1 million people per year, the majority of which are children under the age of 5. In his words, my brother’s research is “focused on developing an inducible transcriptional regulatory system for use in Plasmodium falciparum in order to facilitate the study of essential genes in the parasite.” Admittedly, I don’t exactly understand what he does, but I do understand from his length of studying that malaria, and specifically cerebral malaria, is a difficult disease to try to prevent and treat.  Children can’t be kept under nets all day, and mosquitoes are rampant in sub-Saharan Africa because of the climate. The virus becomes resistant to treatments over time, and continues to mutate as the species of mosquitoes mutate. Treatments include intravenous or intramuscular quinine, intramuscular quinidine, or intramuscular artemisin, and usually two of these treatments are combined, due to malaria’s increasing resistence. There are other effective treatments, some controversial (like nitric oxide), though due to the quickly progressing fatality of cerebral malaria, another large complication is physically getting the child to a hospital, and being able to pay for care. This can be extremely challenging in Africa, where travel time alone might take 24 hours, and healthcare is subpar.

 

Thoughts on Bill and Melinda Gates Foundation infographic:

  • Color scheme is weird/unnatural/I don’t see the point of it – blue countries and white water with a weird semitransparent pattern?
  • Unclear of what to do exactly when I first looked at the infographic, am I supposed to click blindly around Africa? Not knowing geography or the population of these places the statistics of lives saved is meaningless to me
    • Thought for future inf graphics: always compare to something the viewer/reader knows or understand, or provide the background info so they can understand the point you’re making at first glance
  • Having a graphic called “global impact: deaths prevented” with increasing numbers seems counterintuitive to me, I’d rather see a decreasing mortality rate- but maybe that’s just me
    • Right outside of the graph is in bold text (good) is the number of Global Lives Saved. If they’re going to do a graph with deaths prevented and have that next to it, there needs to be some congruity in vocabulary (either call both lives saved or both deaths prevented), because I thought I was looking at two different concepts instead of the same one expressed two different ways
  • “Show you care: share this” button at the bottom is nice, but wouldn’t showing you care be better through a donation or some other information about how you can directly help the situation, not just spread awareness to your facebook friends?

Media:

http://www.youtube.com/watch?feature=player_embedded&v=P-3FvRckJ64#!

http://www.commarts.com/exhibit/imagine-malaria-print.html?ref=nf

 

Thought: include images of mosquitoes similar to this?