VisCom 3 :: Blog Post#4 :: Presentations

This is a piece written for Vis Com 3 at Seattle Pacific University. We’ll be discussing Mike Monteiro’s 13 Ways Designers Screw Up Client Presentations.


Mike Monteiro’s backroom style of explication is delightfully apt (and equally as acerbic) for the pragmatic subject matter he covers. Several of his points on client presentations hit close to home, and many of them shed new light on better ways to engage with clients.

(more…)

Interactive II :: Post #2 :: A Regular Old Can Opener and Hours Tracker

This is the second blog post in a series on Usability for Interactive II at Seattle Pacific University.


Usability is both ‘effortless’ and ‘gotcha!’ at the same time.
can-opener

A Plain Old Can Opener

This can opener. Man, this thing.

Don’t get me wrong; this can opener has many useful capabilities. And I feel extremely sheepish in what I’m about to do — that is, to criticize an implement as old as the industrial revolution — but sometimes, all I can do is examine the past through the lightspeed, digital-age goggles of perfect usability.

Where to start? How about right there: A new user of the above can opener would think exactly that with this can opener. Assuming the user has no conceptions of how can openers function, there are at least three or four ways to begin applying force to the can with this implement; a theory that also assumes the user knows they have to pierce the can to begin with.

Alright, maybe I’m not giving our hypothetical user enough credit here — piercing a vessel to get what is inside may be the logical conclusion reached. However, I can still hardly get this thing to open cans in any capacity. Opening cans with it is a nightmare that ends in something looking like a Quentin Tarantino movie for tin cans.


Hours Tracker

hours-tracker01

The first screen you see when booting up the app. I had to pay seven bucks to gain a few more features like multiple positions, but hot damn is it worth it.

Okay, whew. With that train wreck out of the way. Let’s talk about something that has made my life much more efficient.

This is the seemingly innocuous Hours Tracker, which I found while searching for a better way to keep track of my time and shifts.

This app is incredibly useful (by my standards) due to the fact that it has does everything I expect it to do. It reports relevant info about my entries, makes clocking in and out easy, and even offers options for clocking out retroactively if you’ve left in a hurry.

In usability terms, it offers the user many chances for recovery, and those options never go away. In that sense, it is a piece of logging software in a distilled yet approachable form. The only downside is the stark white presentation.

The interior menus lead where I expect them, the icons perform operations that I expect, and the most important features are given the most weight. Quality-of-life features like time rounding (to whatever multiple you desire) are You can even swipe down on the Android notification that tells you how much time has passed and access the three most common on the clock occurrences- break, pause, and clock out. Use of the app is simple, delightful, and consistent. You can get the app for free or pay for a premium version online which extends the capability of the app even further.

hours-tracker02

My modest wages have been obscured for privacy.

Usability, while running the gamut from ‘effortless’ to ‘gotcha! This makes no sense!’ is exceedingly important in our day to day lives. I can’t believe I’m saying it, but if only more can openers worked like apps.

VisCom 3 :: Post #3 :: Vexillology

This is a piece written for Vis Com 3 at Seattle Pacific University.


I was pleased to find out that we would be watching and writing about a video discussing vexillology, which actually holds a special place in my heart. Flag design lumps culture, design, sociology, and psychology into a big tasty pot that makes for a delicious, savory meal to mull over in the mind.

Roman Mars’ TED Talk speaks to many things that designers deal with on a regular basis, and the North American Vexillogical Association’s principles of flag design are, in reality, something that designers should consider every time they try to create simple, memorable marks for their clients and projects:

1. Keep it Simple
2. Use Meaningful Symbolism
3. Use two to three basic colors
4. No Lettering or Seals
5. Be Distinctive or Relative

From these principles, good logos and good flags can be created. While logos have less (what I’m calling) ‘historical and social equity’ to draw upon, we’ve been talking about design research, and no good logo has no thought put into it: Chicago’s flag is great because it represents something that Chicago’s citizens identify with; NBC’s logo is great because it’s color psychology affects people as they see it, and has become recognizable in and of itself.

Something immediately apparent in Mars’ talk is that a great design has adaptability, is adoptable, and is versatile. His example of how the Amsterdam and Chicago flags were prevalent throughout their respective cities is a brand success story, pure and simple. This is something our own designs should strive towards.

Another lesson that Mars reinforced, albeit indirectly, is that one design does not work where another would. Besides the basic thoughts about readability of text at a distance and other visual considerations, the error of using a state seal or coat of arms as a flag highlights a level of ignorance on those who published that design. More often than not, these choices are made by committees- a designers’ worst enemy. “A lot of people tend to think that good design is just a matter of taste, and quite honestly, sometimes it is actually,” Mars said, but he continued on and noted that most designs do not end at the ‘good taste’ stage. Discretion is still very much necessary, in all of our work.

To remind us about the importance of good flag design, I leave you with the (now replaced) Provo, Utah flag:

51533be4d9015.preview-620

Video Art :: Gunning & La Jetée :: Context & Medium

The following is an excerpt from an assignment written for Video Art at Seattle Pacific University. Discussed in this post is Tom Gunning’s essay “An Aesthetic of Astonishment: Early Film and the (In)Credulous Spectator),” and Chris Marker’s 1962 film La Jetée, available wherever you can find it.


Gunning remarks upon the history and implications of the ‘cinema of attractions.’ Discussing the myth that the first movie goers recoiled in abject horror at the sight of an ‘oncoming train,’ Gunning elaborates on our need for attractions, thrills, and a space where we as viewers can disassociate ourselves from reality and enter into suspension of disbelief. Gunning provides several examples that reveal this ‘cinema of attractions’ as a clever way to provide thrills to audiences.

There were several visual artists and performers whose actions exhibited what Gunning calls ‘the aesthetics of attraction.’ One of Gunning’s first examples is the speech that Smith and Blackton gave before their film The Black Diamond Express. The speech serves to set the stage for the terror that the attraction-seekers are coming to gobble up. Next, he mentions Melies’ behooving of the audience to pay attention to transformations in his films, and describes this type of presentation as an example of addressing the audience directly. Addressing the audience was critical in early cinema; it not only served to rapture them to the medium, but to prepare them for the ‘attraction’ they were about to experience. This kind of preparation and pomp was important to early presenters and cinema-goers. Indeed, even the “interior design of the movie theatres served one sole purpose: to rivet the audience’s attention to the peripheral so that they will not sink into the abyss.”

Gunning implores us with this essay to reflect upon the powers of cinema and those powers’ earliest roots. “Attractions are a response to an experience of alienation,” Gunning writes in conclusion. Gunning describes the shock and confusion of the early audiences to be a participatory act, labelling their experiences an ‘encounter with modernity’ rather than a primeval response. Indeed, as cinema goers old and new, we hardly experience what Gunning titles childlike belief, but we retain an “undisguised awareness (and delight in) film’s illusionistic capabilities.” It is within this context, past and present, that the work of cinema may flourish in.

On Chris Marker’s La Jetée and compelling and unique nature.

La Jetée is of a rare breed. It exists in the amorphous space that lies between easily defined mediums; a space that can be inhabited in numerous ways. Clearly, La Jetée is a film. And yet, instead of projecting images at any filmic pace, Chris Marker decides to project these images as a veritable slideshow. The resulting footage is not yet entirely reminiscent of animation, but some of the sequences imply motion in a way that no slideshow could. Further still, these ‘images in sequence’ lack only two traits of comics & graphic novels[1]. It is in this bizarre and unique mediatic space that La Jetée exists, which makes approaching it rather difficult.

Despite the effort it took to digest it, I found La Jetée enthralling. While La Jetée’s comparatively slow pacing will bore viewers who are used to being constantly rewarded, Chris Marker’s clever choices become apparent under scrutiny. There are several unique things about this piece that make it thrilling to watch.

By presenting his film in this way, Marker removes the viewer’s ability to predict. The viewer is constantly at the mercy of Marker’s cuts, which can sometimes come at a frightening clip. I found myself worried about what image might be displayed next. (Thankfully, Marker never abused this power that he held over the viewer.) This even reflects a fact that Gunning discussed in his essay; early cinematographers had a penchant for punking the viewer by projecting a still image before astonishingly bringing it life and motion on the screen. In addition to the preventing of prediction, Marker’s presentation allows him to strategically highlight important or impactful scenes. Exposition will transpire at a predictable rhythm, while some scenes will speed up to disorient or thrill the viewer.

I also found myself completely enthralled by the story. It’s emotional, mythical presentation gave me the chance to enter the story in many ways. Marker’s strange science fiction abstraction felt introspective and nostalgic, but it also portrayed several fears that the world genuinely held at the time. His retelling of the story of a man’s love seemed purposefully faceless, allowing the sweeping gestures of love to be filled by the viewer: The protagonist gets lost in time with his friend, experiences the dread of love, and expresses the desire to do anything, as displayed by his deal with the men from the future. The evil in the world represented by the protagonists’ captors shows the pressures and natural forces that act against the protagonist… I found the narrative captivating.

VisCom 3 :: Post#2 :: AIGA Design Conference

This is a piece written for Vis Com 3 at Seattle Pacific University.


The AIGA Design Conference just concluded in New Orleans. A tour-de-force of designers and thinkers, the Design Conference sets a watermark for design leadership in the US and internationally.

After getting to take a look at the conference materials provided to the attendees, I decided their REVIVAL theme for the conference was rather elegant and beautiful. However, visiting the front page of their website left me with a different experience.

 

AIGA001

register_hl_rev32x-compressorPredominantly typography and photography based, the illustrations on this page lie on top of grayscale tones. Floral motifs continue from print pieces and other web graphics. The first thing you see contains important information about the conference, which is a big plus. And even though this front page is consistent with other materials, I question whether or not it’s doing the job the front page of a conference website should.

Pieces like this one at the right are further down the page. What exactly is the viewer supposed to experience looking at this photo? Does it really inform and direct the viewer towards other important conference info?

Branding a conference is a difficult task. You usually have little chance to build brand equity or capital, and must convince your audience that you have something important to offer them right away. Currently I think I might learn to play trumpet at this conference.

There are plenty of good things about AIGA’s presentation, though. Pages containing information are presented carefully, albeit in a labyrinthine way. The speakers page looks great, with portraits framed gracefully. I’m not convinced about the color-on-hover effect, though- I don’t feel it provides the correct feedback I need as a user.

 

Interactive II :: Post #1 :: Bulk Rename Util & Wunderlist

This is the first blog post in a series on Usability for Interactive II at Seattle Pacific University.


Usability is the ubiquitous ‘air’ of the design ecosystem.

It is something that we (as consumers) should never have to think about. Indeed- whether or not an app is usable is not something the end user should be calling into question- they should just be able to use. When the usability of a product is something that a consumer notices, more often than not, their remarks are far from praise. How then can we create seamless experiences that just ‘breathe easy?’ There are many methods to answering this question, so we’ll just stick to the prompt of looking at cases for now.

In this post, I’ll look at two Windows apps that I’ve become familiar with. One fails in many places while the other succeeds in many other ways.


Bulk Rename Utility

BRU001

This cacophonous interface belongs to Bulk Rename Utility, a robust yet hideous third-party Windows app that offers a functionality that other Operating Systems have long since included. It may be a bit of a cheap shot to criticize a free app, but where better to start on determining the good vs the bad in software design? Despite not being designed for the average user, this app could still use a lot of love. Why does this rate low on the usability scale?

No iconography beyond that of the operating system

Hope you like jumping from one text box to the next. Icons help users refer to an existing vocabulary rather than having to search for a specific word or phrase every time they want to repeat an action. There aren’t many places icons could fit into this design, but reducing the mental strain of the user should always be a goal.

Lack of styling on toggles and fields

BRU002A lot of space could be saved by removing the toggle boxes and creating labelled buttons that act as toggles. Using a design vocabulary similar to what can be found in the Windows 10 Action Center, an interface item can at once be button and label. Intermediate states (the higlighted box) and on/off states further help reduce cognitive stress on the user.

General lack of consistency and overloading of the user

What does the numeral in parentheses in each box of options mean? What does each abbreviation mean? What tooltips could be added? Is there any onboarding that could be included to help assist the user find their way through these options on their first use?

This app was likely designed by an engineer who concluded that having all options available at all times was the most efficient solution. To some it certainly may do the job, but just because something works doesn’t mean there’s no room for improvement.


Wunderlist

Wunderlist001Wunderlist is a slick Windows 10 todo and task app. It succeeds in being usable through several strategies.

Strong use of iconography

Icons are like typographical shortcuts. Users instantly understand that a “plus” symbol signals the ability to add something. Hamburger menu/ellipsis buttons inform the user that hidden content is readily available. Calendars, trash cans, and inboxes also contribute to the user’s understanding of the app’s functionality.

Consistency

Reducing mental strain on the user can be as simple as being predictable. Part of the difficulty of the Bulk Rename Utility app is that it had no space for content items to breathe, which causes users headaches. Wunderlist combats this with a visible grid system and functional spacing. In addition, Wunderlist has several ‘rules’ and methods it follows- input fields have icons, actionable items live inside similar looking boxes, and things generally do what they do in another place. This is a the building and use of a semantic and visual vocabulary.

These are only a few of the things that make Wunderlist an easy app to use. Comparing these two apps shows that just a few considerations can really go a long way to bring an app up to speed in the usability world.

Viscom 3 :: Post #1 :: Tedco Entrepreneur Expo

This is a piece written for Vis Com 3 at Seattle Pacific University.


 

Designing for a conference is a unique challenge. The identity and design that constitutes the look of a isolated, several-days-long event is somewhere in the middle of identity, branding, marketing, and a viral outbreak that you can hopefully steer towards interested patrons. They are also unique in that many different solutions are available or even necessary- it’s not enough to stick to print or digital design. Popular swag items include bags, notebooks, and other physical goods that people can take home.

Tedco Entrepreneur Expo is a conference for entrepreneurial resources in Maryland. It focuses on giving a platform for networking, pitching, and working with startups. I’ll be mainly focusing on what their website for the 2015 conference looks like.

When you pull up their page, you are greeted with a full frame video behind some introductory text, with the most basic information that we need- the name, date, and location of the conference are the first thing you see. In addition, the call to action is front and center- great idea for getting that hook on users early. If they don’t click now, they’ll at least know that’s what they should be doing soon. This is a smart move that drives conversion.

The Entrepreneur Expo chose to go with a one column style website, with a bold color scheme that wraps the page together. Black and white photography highlighted with yellow overlays keeps busy conference floor photographs looking consistent and classy. Large text in readable sans-serif fonts maintain a professional air that is light and modern. A statistics page communicates quick, easy-to-digest numbers to an audience that will really appreciate them. Their typographical brand is no-nonsense and oozes executive characteristics.

entrepexpo stats

One of the few things that is really frustrating with this website, though, is the landing screen. The video that fills up the whole screen is rigged to smoothly get out of the way as the user begins to naturally scroll down. The effect is very smooth, and very impressive. But once the user navigates back up to the top of the screen, there’s no guarantee they’ll be able to utilize the navigation without accidentally triggering the slide to the landing screen again. This causes frustration and wasted time, which is poor usability in general.

Otherwise, this Entrepreneurial Conference aims to appeal to sharp, informed businesspeople. I think it succeeds in being succinct and classy, which it’s audience would really appreciate. Not only does it congratulate the user on their ability to be sold something without all sorts of marketing gimmicks or copy, it does so in a pleasing way.

Video Art; New Life

A new school year has started; and with it, new classes, challenges, and friends. Here’s to a good year, and here’s to an active blog: I’m excited to continue posting, both for classes and for fun.


 

Web Design

I’ve been really flexing my web muscles, and am nearly ready to upload a hacked together theme based on the Bones WP theme I wrote about earlier. I’ve installed XAMPP, Compass, and all the necessary bits and bobs to develop this new theme. In the same vein, working for SPU has forced me to wrap my head around SCSS/Compass. It’s a real game changer, and I encourage anyone interested in speeding up their workflow to check it out.

I’m using Sublime Text 3, XAMPP, the Bitnami WordPress add-on app, Compass/SCSS, and the Bones theme as a base.

Video Art

I’m taking another class with the wonderful Zack Bent this year. This time, we are learning about the 4th dimension. Check out my first project. The assignment was to record a friend’s embarrassing story, then to retell it in a way that felt natural to us. I chose to highlight the neuroticism that me and my friend Matt share.

Check out the extended cut here.

Typography

This is an exploration for VisCom 2 of Chapter 4 from Graphic Design School: The Principles and Practice of Graphic Design by David Dabner, Sandra Stewart and Eric Zempol.


Typography is the most direct way we communicate with our audience.

Letters, words, and text have a strong ability to communicate with the audience. But laying out these elements poorly or incorrectly can cause immeasurable damage to a design. Depending on what you’re designing, what sorts of typographical details you will be accentuating will change, but you will always be conveying some sort of ‘meaning.’ Designers use their understanding of semantics to wield ‘meaning’ properly. It is necessary for designers to understand the function of the typography they use.

(more…)

Presentation

This is an exploration for VisCom 2 of Chapter 4 from Graphic Design School: The Principles and Practice of Graphic Design by David Dabner, Sandra Stewart and Eric Zempol.


As graphic designers who are eager to create, it can be easy for us to lose sight of the final product.

In the throes of rapid iteration, the ever present chore of anchor point manipulation can become all-consuming and all-important. Understanding the modern methods of distributing work can sometime take a back seat as we get caught up in creating layouts and graphics as rabidly as we can. The final steps of the process are where many journeyman designers make small mistakes that aren’t exactly covered in theoretical design courses.

(more…)