SlideShare ist ein Scribd-Unternehmen logo
1 von 177
Learning
experience Design
From superman
SxSW 2013




Timothy Parcell
@freescribbles      #comicsXD
THANK YOU.




             #comicsXD
Where is Superman?




                     #comicsXD
Where is Brandon
    Routh?




                   #comicsXD
Superman Returns   Released in#comicsXD
                               2006
GREEN LANTERN   Released in#comicsXD
                            2011
Who are you who
summons fire without
flint or tinder?




                       #comicsXD
There are some that call
         me...




                           #comicsXD
There are some that call
         me...
         Tim.



                           #comicsXD
#comicsXD
I’m the best
there is at
what I do and
what I do best
i’sn't very
nice.
James Howlett (aka Wolverine)
first appearance: Incredible Hulk #181 (1974)




art by Chris Bachalo & Tim Townsend
                                               #comicsXD
How do you define experience design?




                                       #comicsXD
The craft of building lasting
relationships between people and
brands through a system of positive
interactions over time.




                                      #comicsXD
information architecture.




                            #comicsXD
information architecture.
user experience.




                            #comicsXD
information architecture.
user experience.
usability.




                            #comicsXD
information architecture.
user experience.
usability.
research.




                            #comicsXD
information architecture.
user experience.
usability.
research.
design.




                            #comicsXD
information architecture.
user experience.
usability.
research.
design.
strategy.


                            #comicsXD
information architecture.
user experience.
usability.
research.
design.
strategy.
psychology.
                            #comicsXD
Baskin-Robbins: Website Redesign                                                                                                                                                                             Redesign Project: lebronjames.com
home [default | FoM]                                                                                                                                                                                         home [hero | shout promo]
                                                                                                                                                                                                                1      2      3       4      5       6      7        8       9    10     11       12     13       14       15     16     17       18      19      20      21       22         23   24

                                                                                      Web Page Title                                                                                     1.    Hero Tile                                                                                        Web Page Title
                                                                                                                                                                                                                                                                                                             6.        Footer                                                                           HOME
                               http://baskinrobbins.com                                                                                                      Google                            When users first arrive to the site via searchhttp://lebronjames.com they will arrive on the home
                                                                                                                                                                                                                                             or by typing in the URL,                                                                                        Google
                                                                                                                                                                                                                                                                                                                       This persistent element allows for secondary sections to be served up quickly, allowing
                                                                                                                                                                                               page. The majority of the the screen real estate is devoted to a large hero tile which highlights 3-5                   secondary audiences quick access to the sections more relevant to them.
                                                                                                                              about us    franchising        contact us      sign in                          LEBRON JAMES
                                                                                                                                                                                               featured pieces of content or product.         LIFESTYLE          ENTERTAINMENT             SPORTS                      LEBRON             COMMUNITY                   Search                    1. Main
             LOGO                                                                                                                                                                                                                                                                                             6.1      Social Network links are displayed in an icon fashion to allow users to quickly accessm
                                                                                                                                                                                                                                                                                                                                                                                                        The a
                                           ICE CREAM                  CAKES                   THE SCOOP                   GIFT CARDS                    LOCATIONS                                                                                                                                                         Like <1K
                                                                                                                                                                                         1.1   The hero tile rotates through a carousel of images. The current position and the total number of                                          HEADLINE <H2>                                                  of the
                                                                                                                                                                                                                                                                                                                       the brand on the chosen networks. For launch, only Facebook and Twitter will appear.
                                                                                                                                                                                                                                                                                                                         Tweet <500
                                                                                                                                                                                               tiles is represented here via the small dots at the bottom. The current display highlights the first                     networks can be addedipsum dolor sit amet,
                                                                                                                                                                                                                                                                                                                                         Lorem over time as content is available.                            would
                                                                                                                                                                                               promotion. Each small circle is clickable and will jump to the tile in question.                                                        consectetuer adipiscing elit. Aenean
                                                                                                                                                                                                                                                                                                              6.2      Each of the 3 more robust ligula eget dolor.the Corporate section are represented in the fo
                                                                                                                                                                                                                                                                                                                                       commodo sections and Aenean
                                                                                                                                                                                         1.2   In addition to automatically playing at a preset time increment (6-8 seconds depending on the                                           massa.                                                      2. The H
                                                                                                                                                                                               amount of copy), users can move their cursor to the outside borders of the screen. When they do                6.3                      author | category
                                                                                                                                                                                                                                                                                                                       The flavor dropdown allows users to bypass the navigation and drive directly toThis fla
                                                                                                                                                                                                                                                                                                                                                                                                      their la
                                                                                                                                                                                               so, arrows will appear to indicate that they can click to move to the next tile. By default, these                      choice. By making any selection within this dropdown, the user will navigate away from
                                                                                                                                                                                               arrows will not appear on the screen.                                                                                   current page and be redirected to the selected flavor.
                                                                                                                                                                                                                                                                                                                                                                                                      autho
                                                                                                                                                                                                                                                                                                                                                                                                             or som
                                                                                                                                                                                         2.    Main Navigation                                                                                                6.4                                                                                       displa
                                                                                                                                                                                                                                                                                                                       These lower level links connect to pages that don't live within the browse structure of th
                                                                                                                                                                                               The persistent navigation will appear on all pages of the site. Later pages will show that it contains                                                                           300 x 250 Ad                 featur
                                                                                                                                                                                                                                                                                                                                                                          (Medium Rectangle)
                                                                                                                                                                                                                MAIN HEADLINE <H1>
                                                                                                                                                                                               an onstate to show the user where they are at within the site. Additionally, rolling the cursor over
                                                                                                                                                                                               any of the primary items (Ice Cream, Cakes, Stay Connected, Gift Cards or Locations) will display                                                                                                        2.1 Faceb
                                                                                                                                                                                               a flyout menu to show the sub-sectionsamet, consectetuer
                                                                                                                                                                                                                Lorem ipsum dolor sit within. This is outlined on the following pages.                                                   HEADLINE <H2>                                                      to sha
                                                                                                                                                                                                                adipiscing elit. Aenean commodo ligula eget
                                                                                                                                                                                                                                                                                                                                         Lorem ipsum dolor sit amet,                                        align
                                                                                                                                                                                                                dolor. Aenean massa. See More>>                                                                                          consectetuer adipiscing elit. Aenean
                                                                                                                                                                                         3.    Secondary Promotional Areas                                                                                                                                                                                  would
                                                                                                                                                                                                                #TEAMLEBRON                                                                                                              commodo ligula eget dolor. Aenean
                                                                                                                                                                                               To highlight ongoing initiatives, Sapient is utilizing 3 secondary promotional tiles that do not                                          massa.
                                                                                                                                                                                               animate.                                                                                                                                  author | category
                                                                                                                                                                                                                                                                                              sort Most Recent                                                                                          2.2 Each
                     FLAVOR OF THE MONTH                                                                                                                                                 3.1. The first promotional tile represents the Birthday Club as it is a key component of the CRM/Loyalty
                                                                                                                                                                                                                @teamlebron Lorem ipsum dolor sit amet,
                                                                                                                                                                                              programs that are currently under additional development. A text field allows the user to begin the
                                                                                                                                                                                                                                                                                                                                                                                                            displa
                                                                                                                                                                                                                                                                                                                                                                                                            the de
                     Lorem ipsum dolor sit amet, consectetuer                                                                                                                                 registration process by inputing their email address. commodo.
                                                                                                                                                                                                                consectetuer adipiscing elit. Aenean
                     adipiscing elit.                                                                                                                                                                                                                                                                                                                                                                       [temp
                     CALL-TO-ACTION>                                                                                                                                                     3.2. The second promotional tile represents the Gift Card program. As the main piece of E-Commerce                                                                                     300 x 250 Ad
                                                                                                                                                                                              functionality and a main section of the site, Sapient recommends highlighting it in a visual fashion
                                                                                                                                                                                                                                                                                                                                                                          (Medium Rectangle)            2.3 Sever
                                                                                                                                                                                              as well.                                                                                                                                                                                                      same
                                                                                                                                                                                                                                                                                                                                        THE LEADERBOARD
                                                                                                                                                                                                                                                                                                                                        HEADLINE <H2>                                                       post.
                                                                                                                                                                                         4.    Local Stores                                                                                                                             Lorem ipsum dolor sit amet,
                                                                                                                                                                                                                                                                                                                                            1                 outsideshot
                                                                                                                                                                                                                                                                                                                                        consectetuer adipiscing elit. Aenean
                                                                                                                                                                                                                                                                                                                                                                                                            lightw
       BIRTHDAY CLUB                                               GIFT CARD                                                   SHOPS NEARBY                                                                                                                                 @teamlebron Lorem ipsum dolor sit amet,
                                                                                                                                                                                               Unlike the two previous promo tiles, this one contains more functionality as it utilizes the same                                        commodo ligula eget dolor. Aenean                                   first. O
                                                                                                                                                                                               geo-location functionality as dunkindonuts.com to determine the users consectetuer adipiscing elit. Aenean commodo.
                                                                                                                                                                                                                                                                             approximate ZIP code                                       massa.
                                                                                                                                                                                                                                                                                                                                            2                 username
                                                                                                                               Boston, MA, 02116
                                                                                                                                                                                                                                                                                                                                        author | category
                                                                                                                                                                                               location and displays the address and contact information for that closest location.
                                                                                                                                                                                                                  outsideshot: Lorem        outsideshot: Lorem                                                                                                                                          2.4 The fi
                                                                                                                                         1Broadway, Cambridge, MA 02116                                                                                                                                                                       3                furiousgeorge
                                                                                                                                                                                                                  ipsum dolor sit amet,     ipsum dolor sit amet,
                                                                                                                                         Phone: 718-334-2354    Hours: 9:00-11:00
                                                                                                                                                                                         4.1   As the geo-location can be imprecise, a 'change location' adipiscing
                                                                                                                                                                                                                  consectetuer adipiscing consectetuer option is provided to allow the user to
                                                                                                                                         Find More                                                                                                                                                                                            4                anonymous                                2.5 The n
                                                                                                                                                                                               customize the address more precisely or switch Aenean commodo
                                                                                                                                                                                                                  elit. Aenean commodo      elit. it to their future travel location if that is their intent.
                                                                                                                                                                                                                  ligula eget dolor. Lorem ligula eget dolor. Lorem                                                                                                                                         but no
          Lorem ipsum dolor sit amet, consectetuer                    Lorem ipsum dolor sit amet, consectetuer                                                                           4.2   For users who are looking for more precise driving dolor sit amet, their current address, a link is
                                                                                                                                                                                                                  ipsum dolor sit amet,     ipsum directions from                                                                             5                username                                     contro
                                                                                                                                                                                                                                                                                                                                                                              300 x 250 Ad
          adipiscing elit.                                            adipiscing elit.
                                                                                                                                                                                               provided that will drive to a page where theyconsectetuer adipiscing
                                                                                                                                                                                                                  consectetuer adipiscing    can input their street address and be provided with                                                                        (Medium Rectangle)
                                                                                                                                                                                                                                                                                                                                                             SEE THE FULL LEADERBOARD
          CALL-TO-ACTION>                                             CALL-TO-ACTION>                                          Change Location                                                                    elit.                     elit.
                                                                                                                                                                                               directions via Mapquest's API.                                                                                                                                                                           2.6 As dis
                                                                                                                                                                                                                                                                                                                                         HEADLINE <H2>                                                      their s
                                                                                                                                                                                         5.                 @teamlebron Lorem ipsum dolor sit amet,
                                                                                                                                                                                               Social Integration                                                    @teamlebron Lorem ipsum dolor sit amet,
                                                                                                                                                                                                                 consectetuer adipiscing elit. Aenean commodo.       consectetuer adipiscing elit. Aenean commodo.
                                                                                                                                                                                                                                                                                                                                         Lorem ipsum dolor sit amet,                                        will fo
                                                                                                                                                                                               Leveraging the social functionality on dunkindonuts.com, social feeds from Facebook or Twitter                                            consectetuer adipiscing elit. Aenean
                                                                                                                                                                                                                                                                                                                                         commodo ligula eget dolor. Aenean
                                                                                                                                                                                Follow         can be displayed.
    FACEBOOK             TWITTER                                                                                                                                                                                                                                     @teamlebron Lorem ipsum dolor sit amet,                             massa.
                                                                                                                                                                                                                                                                                                                                                                                                        3.   Seco
                                                                                                                                                                                                                                                                     consectetuer adipiscing elit. Aenean commodo.                       author | category
              @chocoholic Lorem ipsum dolor sit                               @chocoholic Lorem ipsum dolor sit                             @chocoholic Lorem ipsum dolor sit            5.1   Users can toggle between the two social networks at anytime by clicking the links here. Currently                                                                                                             Repre
              amet, consectetuer adipiscing elit.                             amet, consectetuer adipiscing elit.                           amet, consectetuer adipiscing elit.                highlighted is the twitter feed.
              Aenean commodo ligula eget dolor.                               Aenean commodo ligula eget dolor.                             Aenean commodo ligula eget dolor.                                                                                        @teamlebron Lorem ipsum dolor sit amet,                                                                                                 and c
              Aenean massa. #baskinrobbins                                    Aenean massa. #baskinrobbins                                  Aenean massa. #baskinrobbins                                                                                               consectetuer adipiscing elit. Aenean commodo.                                                                                         the ca
              2 hours ago                                                     2 hours ago                                                   2 hours ago                                  5.2   A simple follow/like mechanism allows users to engage with the brand on an ongoing basis. Upon
                                                                                                                                                                                               clicking this button, the flows for the respective networks would be followed. i.e., pop-ups, etc. outsideshot: Lorem
                                                                                                                                                                                                                                                                        outsideshot: Lorem                                                                                                                   the he
    #baskinrobbins                                                                           Frequently Asked Questions
                        NUTRITION                                                                                                                                                                                                                                    ipsum dolor sit amet,     ipsum dolor sit amet,                                                            300 x 250 Ad
                          Privacy Policy                                                    Site Map                                                                                     5.3                                                                         consectetuer adipiscing consectetuer adipiscing
                                                                                                                                                                                               Users can rotate through the most recent posts. By default the 3 most recent are displayed.                                                                                (Medium Rectangle)

                                                                                                                                                                                                                 @teamlebron Lorem ipsum dolor sit amet,             elit. Aenean commodo      elit. Aenean commodo
    FACEBOOK             TWITTER             PINTEREST                                                                                                                                   5.4                     consectetuer adipiscing of Aenean conversations around the brand asLorem ligula eget dolor. Lorem
                                                                                                                                                                                               Sapient recommends a potential strategyelit. tracking commodo.        ligula eget dolor. opposed
    ICE CREAM
                                                                                                                                                                                                                                                                     ipsum dolor sit amet,
                                                                                                                                                                                               to the only the brand's posts as it builds a more engaging presence and gives people the        ipsum dolor sit amet,                     SHOUT SHOUT <H2>
                                                        CAKES                                     THE SCOOP                                          ABOUT US
                                                                                                                                                                                                                 @teamlebron featured on baskinrobbins.com. This filtering can be adipiscing consectetuer adipiscing
                                                                                                                                                                                               perception that they too can be Lorem ipsum dolor sit amet,           consectetuer done via                                               Lorem ipsum dolor sit amet, consectetuer
                                                                                                                                                                                               hashtags or @replies. Obviously, this approach would require some additional monitoring to be elit.
                                                                                                                                                                                                                                                                     elit.
       Select an Ice Cream Flavor                         Create Your Own                              Birthday Club                                  Media Relations                                                                                                                                                                    adipiscing elit. Aenean commodo ligula eget dolor.
                                                                                                                                                                                                                 consectetuer adipiscing elit. Aenean commodo.
                                                          Occasions                                    Events                                         International                                                                                                                                                                      Aenean massa.
      Specialties                                                                                                                                                                              discussed in the future.                                                                                                                  guest author | music
      Grab-N-Go                                           Types                                        Promotions & Coupons                           Franchise Opportunities

      Nutrition                                           Pies                                         Contact Us                                     FAQs                                                                 1500 MORE HAVE RESPONDED. ADD YOUR VOICE >

    Privacy Policy            Terms of Use        Mobile Terms & Conditions           Site Map




                                     Creator     Timothy Parcell                                                                                                                                                                                  Creator       Timothy Parcell
                                     Modified     Sat Mar 09 2013                                                                                                                                                                                  Modified       Tue Jun 05 2012




                                                                                                                                                                                                                                                                                                                                                                            #comicsXD
What are comic books to you?




                               #comicsXD
Sequential Art.




                  #comicsXD
characters.




              #comicsXD
characters.
concepts.




              #comicsXD
characters.
concepts.
style.




              #comicsXD
characters.
concepts.
style.
sensibilities.




                 #comicsXD
characters.
concepts.
style.
sensibilities.
design.



                 #comicsXD
characters.
concepts.
style.
sensibilities.
design.
art.

                 #comicsXD
Are you going to be in trouble?




                                  #comicsXD
I hope not.
All trademarks and copyrights of third parties, including any trademarked
referenced or represented for historical, scholarly and educational “fair use”
purposes only. Individual artists are attributed wherever possible.
The opinions presented are solely those of Timothy Parcell and do not reflect the
views or positions of the owners and/or publishers of the comics and producers
of other media which are referenced in this presentation.
Superman, Action Comics, Batman, Detective Comics, Wonder Woman, Green
Lantern, The Flash, Captain Marvel, The Justice League of America, Supergirl,
Chloe Sullivan, The Watchmen, Green Arrow, Speedy, Harley Quinn, Lex Luthor,
Lois Lane, Apollo, Midnighter, Mr. Majestic are all the trademarks and
copyrights of DC Comics
The Spirit is copyright and trademark of the Will Eisner Estate.
Spider-Man, Captain America, Hyperion, the X-men, Wolverine, X-Force, Cable,
X-23 are all trademarks and copyrights of Marvel Comics
Archie, Betty and Veronica are trademarks and copyrights of Archie Comics.
Spawn is copyright and trademarks of Todd McFarlane
Steampunk is copyright and trademarks of Cliffhanger (Joe Casey & Chris
Bachalo)
I am just a huge geek. Please don’t sue me.
                                                                             #comicsXD
Betty Cooper
& Veronica
Lodge
first appearances:
Pep Comics #22 and #26
(1941 and 1942)




art by Dan Parent
                    #comicsXD
Veronica.




            #comicsXD
ehh.




       #comicsXD
ehh.
Betty.




         #comicsXD
#comicsXD
#comicsXD
#comicsXD
#comicsXD
#comicsXD
#comicsXD
People assume that time is
a strict progression of cause
to effect, but *actually* from
a non-linear, non-subjective
viewpoint - it's more like a
big ball of wibbly wobbly...
time-y wimey... stuff.

The Tenth Doctor (David Tennant)




                                   #comicsXD
UBIQUITY




art by Alex Ross




                   #comicsXD
1
    BRAND
    THe Adventure Begins!




                            #comicsXD
Super
Friends
1973-1986


 #comicsXD
#comicsXD
art by Jim Lee




  #comicsXD
Created in 1932 by
Jerry Siegel and Joe
Shuster.
Jerry was the writer.
Joe was the artist.




                        #comicsXD
Lex
Luthor
first appearance:
Action Comics #23 (1940)




art by David Finch

                           #comicsXD
Created in 1932 by      Fleischer Studios
Jerry Siegel and Joe    produced 17 animated
Shuster.                shorts from 1941-1943.
Jerry was the writer.
                        Those films are the
Joe was the artist.     reason he can fly.




                                              #comicsXD
art by Joe Bogdanove




                         The K-Metal
                       from Krypton
                                  Unpublished
                              (Written in 1940)




                                #comicsXD
#comicsXD
#comicsXD
#comicsXD
#comicsXD
#comicsXD
Values.




          #comicsXD
Truth.
Justice.
The American Way.




                    art by Jim Lee
                                     #comicsXD
Truth.
Justice.
The American Way.
(That last one was renounced in 2011)




                                        art by Jim Lee
                                                         #comicsXD
Captain
marvel
first appearance:
Whiz Comics #2 (1940)

SHAZAM! - The magic word that gives young Billy
Batson the powers of Solomon, Hercules, Atlas,
Zeus, Achilles and Mercury




art by Jeff Smith

                                          #comicsXD
THOR
first appearance:
Journey Into Mystery #83 (1962)




                                  #comicsXD
APOLLO

         APOllo
         first appearances:
         Stormwatch #4 (Vol. 2 - 1998)

         His partner is Midnighter, a Batman clone.




                                                      #comicsXD
MR.
Majestic
first appearance:
WildC.A.T.s #11 (1994)




art by Ed McGuiness



                         #comicsXD
Hyperion
first appearances:
Avengers #69 (1969)



                      #comicsXD
Wonder
Man
first (and only) appearance:
Wonder Comics #1 (1940)




                              #comicsXD
Detective Comics, INC
vs. Brun publications
first copyright infringement lawsuit
in the comic book industry




                                      #comicsXD
#comicsXD
The Spirit
first appearance:
Register & Tribune Syndicates (1940)




art by Darwyn Cooke

                                       #comicsXD
2
    DESIGN
    When we last left our hero




                                 #comicsXD
One image can say a
lot to a person.




               #comicsXD
#comicsXD
This is the man who
raised the game.




                      #comicsXD
Graphic Novel.




                 #comicsXD
A narrative work in
which the story is told
through sequential art.




                          #comicsXD
Sequential Art.




                  #comicsXD
An art form using a
train of images
deployed in sequence.




                        #comicsXD
#comicsXD
This
presentation is
not this book.




              #comicsXD
This
presentation is
not this book.
Go read it.




              #comicsXD
This slide is a medium.




                          #comicsXD
The Hulk
first appearance:
The Incredible Hulk #1 (1962)

Originally grey to avoid any confusion over ethnicity.
Printing issues caused too much variation so they
made him GREEN.

Art by Jack “King” Kirby




                                                         #comicsXD
#comicsXD
The Hulk
first appearance:
                                                         DC: The New Frontier
The Incredible Hulk #1 (1962)                            2003-2004

Originally grey to avoid any confusion over ethnicity.   Written and drawn by Darwyn Cooke.
Printing issues caused too much variation so they
made him GREEN.




                                                                                              #comicsXD
DC: The New Frontier
2003-2004

Written and drawn by Darwyn Cooke.




                                     #comicsXD
DC: The New Frontier
2003-2004

Written and drawn by Darwyn Cooke.




                                     #comicsXD
Captain America
first appearance: Captain America Comics #1 (1941)

Art by Jack “King” Kirby

                                                    #comicsXD
Captain AmericA
First Marvel character to be adapted to
another medium. In 1944 he was
featured in a eponymous serial movie.

Art by Jack “King” Kirby




                                          #comicsXD
Fantastic four
first appearance: Fantastic Four #1 (1961)

Art by Jack “King” Kirby

                                            #comicsXD
Does anyone know
who this is?




Art by Skottie Young
                       #comicsXD
STEAMPUNK
2000-2002

Written by Joe Casey. Art by Chris Bachalo.




                                              #comicsXD
STEAMPUNK
2000-2002

Written by Joe Casey. Art by Chris Bachalo.




                                              #comicsXD
#comicsXD
Marvel’s
First Family
Previous Superhero teams like the
Justice League and Justice Society
featured already established heroes
banding together.

Art by Jack “King” Kirby




                                      #comicsXD
PATTERNS




           #comicsXD
#comicsXD
x-men
1991-2001. Art by Jim Lee




Lex
Luthor
first appearance:
Action Comics #23 (1940)




                            #comicsXD
3
    Stories and themes
    Plot Twists,. action. violence.




                                      #comicsXD
#comicsXD
x-men
first appearance: The X-Men #1 (1961). Art by Roger Cruz.




Stan Lee and Jack Kirby continued to build on the success.
X-Men is now one of the most profitable franchises in comic books.




                                                                    #comicsXD
Giant Size X-men
published in 1975.

Written by Len Wein. Art by Dave Cockrum.




                                            #comicsXD
Time and Space.




                  #comicsXD
"You’re also, wherever possible, looking for an
   interesting image. But don’t confuse
   “interesting” with “splashy.” You’re still trying to
   serve the demands of storytelling, telling the
   story as clearly and simply as possible.  In
   most forms of narrative, each panel must
   have a relationship with the panels on either
   side of it.  You’re plotting out a sequence of
   motion in a series of stills.  Imagine it like that,
   and you may be able to get a better sense of
   how a story in comics might flow.  It’s not a
   perfect analogy, but it might be worth
   considering if this is something you’re having
   trouble with.  You’ll develop your own view,
   approach and methods as you go. 
   Everybody does."
Warren Ellis (Writer, The Authority)

                                                     #comicsXD
#comicsXD
Space hero meets
Man of the people
published in 1970.

Written by Dennis O’Neil. Art by Neal Adams.




                                               #comicsXD
Relevance




Art by Neal Adams.


                     #comicsXD
Educational.




               #comicsXD
SPEEDY
Monumental Storyline. A Teen Titan doing drugs!?




Written by Dennis O’Neil. Art by Neal Adams.




                                                   #comicsXD
Visual Literacy




                  #comicsXD
#comicsXD
With great power comes
great responsiblity.




                         #comicsXD
With great power comes
great responsiblity.
Uncle Ben




                         #comicsXD
Spider-man
first appearance: Amazing Fantasy #15 (1962)

Written by Stan Lee. Art by Steve Ditko.




                                              #comicsXD
"We can realize that a good product is one
   that offers a good or memorable narrative that
   the user will engage with and pass on to
   others, either by sharing the artifact or talking
   about it. To create a good product, it is critical
   to understand our users. The need to involve
   the user in the design process has made
   product design a more complex task.
   However, designers can no longer focus solely
   on the product: A successful design will take
   into consideration all of the components in the
   user product interaction: user, product and
   context of use."
Jodi Forlizzi & Shannon Ford



                                                   #comicsXD
4
    AUDIENCE
    The villains have the upper hand




                                       #comicsXD
Film makes you a
spectator. Comics make
you a participant.




                         #comicsXD
#comicsXD
True Believers!




                  #comicsXD
A Death in the Family
published in Batman #428 (1988)

Fans controlled the outcome of the story by voting
via two 800 numbers. Jason Todd lost by 72 votes.
(5,343 to 5,271)

Art by Jim Aparo.




                                            #comicsXD
comic book readership:
   18-35 years old.




                         #comicsXD
Perpetual Intermediates.




                           #comicsXD
#comicsXD
n00bs


        #comicsXD
n00bs   nerds


                #comicsXD
n00bs   everyone else   nerds


                                #comicsXD
#comicsXD
#comicsXD
#comicsXD
5
    Scalability
    Heroes join forces




                         #comicsXD
The original
Alan Scott (aka Green Lantern)
first appearance: All-American Comics #16
(1940)




                                    #comicsXD
#comicsXD
#comicsXD
change is risky.




                   #comicsXD
The Tough guy
Guy Gardner(aka Green Lantern)
first appearance: Green Lantern #59 (Vol. 2, 1968)




                                                #comicsXD
THE MARINE
John Stewart (aka Green Lantern)
first appearance: Green Lantern #87 (Vol. 2, 1972)




                                                    #comicsXD
THE ARTist
Kyle Rayner (aka Green Lantern)
first appearance: Green Lantern #48 (Vol. 3, 1994)




                                            #comicsXD
change is colorful.




                      #comicsXD
#comicsXD
THE misunderstood
Simon Baz (aka Green Lantern)
first appearance: The New 52: Free Comic Book
Day Special Edition #1 (2012)




                                               #comicsXD
change is violent.




                     #comicsXD
#comicsXD
change is fast.




                  #comicsXD
THE Helmet
Jay Garrick (aka The Flash)
first appearance: Flash Comics #1 (1940)




                                    #comicsXD
THE Speed force
Barry Allen (aka The Flash)
first appearance: Showcase #4 (1956)




Art by Francis Manapul




                                      #comicsXD
#comicsXD
6
CONTINUITY
Good triumps over evil




                         #comicsXD
Crisis of INfinite Earths




Published 1985-1986




                            #comicsXD
What Happened
DC Comics wanted to reboot its entire universe. The
Flash (Barry Allen) sacrificed his life to do it.




                                                      #comicsXD
i’m batman
first appearance: Detective Comics #27 (1941)
Created by Bob Kane & Bill Fingers




Art by Jim Lee.




                                               #comicsXD
#comicsXD
#comicsXD
#comicsXD
#comicsXD
11 films.




            #comicsXD
11 films.
5 live action televisions shows.




                                   #comicsXD
11 films.
5 live action televisions shows.
12 animated series.




                                   #comicsXD
11 films.
5 live action televisions shows.
12 animated series.
14 animated movies.




                                   #comicsXD
11 films.
5 live action televisions shows.
12 animated series.
14 animated movies.
25 video games.




                                   #comicsXD
11 films.
5 live action televisions shows.
12 animated series.
14 animated movies.
25 video games.
5 foreign comics.


                                   #comicsXD
11 films.
5 live action televisions shows.
12 animated series.
14 animated movies.
25 video games.
5 foreign comics.
6,200+ published stories.
                                   #comicsXD
What can I do
where?




                #comicsXD
What does the
audience expect?




                   #comicsXD
Will this work over
there?




                      #comicsXD
harley quinn
first appearance: Batman: The Animated Series
(1992)




Art by Bruce Timms.




                                               #comicsXD
x-23
first appearance: X-Men: Evolution (2003)




Art by Danni Shinya-Lui.




                                           #comicsXD
#comicsXD
#comicsXD
1
one
shot




EPILOGUE
Somewhere in a hotel in austin




                                 #comicsXD
Everything in comics
has to work–or else it
        fails.




                         #comicsXD
Make your brand stand for something.




                                       #comicsXD
Make your brand stand for something.

Get the details right.




                                       #comicsXD
Make your brand stand for something.

Get the details right.

Tell a great story.




                                       #comicsXD
Make your brand stand for something.

Get the details right.

Tell a great story.

Make it simple.




                                       #comicsXD
Make your brand stand for something.

Get the details right.

Tell a great story.

Make it simple.

Make things for your audience.




                                       #comicsXD
Make your brand stand for something.

Get the details right.

Tell a great story.

Make it simple.

Make things for your audience.

Know your medium(s).




                                       #comicsXD
Make your brand stand for something.

Get the details right.

Tell a great story.

Make it simple.

Make things for your audience.

Know your medium(s).

Don’t be afraid to start over.




                                       #comicsXD
Make your brand stand for something.

Get the details right.

Tell a great story.

Make it simple.

Make things for your audience.

Know your medium(s).

Don’t be afraid to start over.

Have Fun.

                                       #comicsXD
THANK YOU.
 Timothy Parcell
  @freescribbles

  sxsw.tv/cfw




                   #comicsXD

Weitere ähnliche Inhalte

Andere mochten auch

Workshop: Grow your research impact - RMIT University
Workshop: Grow your research impact - RMIT UniversityWorkshop: Grow your research impact - RMIT University
Workshop: Grow your research impact - RMIT UniversityJoyce Seitzinger
 
Using Mobile Technology to Make On-the-Job Learning Practical
Using Mobile Technology to Make On-the-Job Learning PracticalUsing Mobile Technology to Make On-the-Job Learning Practical
Using Mobile Technology to Make On-the-Job Learning PracticalMarty Rosenheck
 
Improving the Learner Journey
Improving the Learner JourneyImproving the Learner Journey
Improving the Learner JourneySnook
 
Connected Design - ULearn 2016
Connected Design - ULearn 2016Connected Design - ULearn 2016
Connected Design - ULearn 2016Joyce Seitzinger
 
Learner Experience Design: A New Hope? #lxdesign #icdeunisa
Learner Experience Design: A New Hope? #lxdesign #icdeunisaLearner Experience Design: A New Hope? #lxdesign #icdeunisa
Learner Experience Design: A New Hope? #lxdesign #icdeunisaJoyce Seitzinger
 
UX Design for Social Good
UX Design for Social GoodUX Design for Social Good
UX Design for Social GoodAndre Plaut
 
Designing Great Presentations
Designing Great PresentationsDesigning Great Presentations
Designing Great PresentationsAndre Plaut
 
LX Journey Mapping Workshop
LX Journey Mapping WorkshopLX Journey Mapping Workshop
LX Journey Mapping WorkshopJoyce Seitzinger
 
Building Learning Experiences (IxDA 2015 Education Summit)
Building Learning Experiences (IxDA 2015 Education Summit)Building Learning Experiences (IxDA 2015 Education Summit)
Building Learning Experiences (IxDA 2015 Education Summit)Andre Plaut
 

Andere mochten auch (9)

Workshop: Grow your research impact - RMIT University
Workshop: Grow your research impact - RMIT UniversityWorkshop: Grow your research impact - RMIT University
Workshop: Grow your research impact - RMIT University
 
Using Mobile Technology to Make On-the-Job Learning Practical
Using Mobile Technology to Make On-the-Job Learning PracticalUsing Mobile Technology to Make On-the-Job Learning Practical
Using Mobile Technology to Make On-the-Job Learning Practical
 
Improving the Learner Journey
Improving the Learner JourneyImproving the Learner Journey
Improving the Learner Journey
 
Connected Design - ULearn 2016
Connected Design - ULearn 2016Connected Design - ULearn 2016
Connected Design - ULearn 2016
 
Learner Experience Design: A New Hope? #lxdesign #icdeunisa
Learner Experience Design: A New Hope? #lxdesign #icdeunisaLearner Experience Design: A New Hope? #lxdesign #icdeunisa
Learner Experience Design: A New Hope? #lxdesign #icdeunisa
 
UX Design for Social Good
UX Design for Social GoodUX Design for Social Good
UX Design for Social Good
 
Designing Great Presentations
Designing Great PresentationsDesigning Great Presentations
Designing Great Presentations
 
LX Journey Mapping Workshop
LX Journey Mapping WorkshopLX Journey Mapping Workshop
LX Journey Mapping Workshop
 
Building Learning Experiences (IxDA 2015 Education Summit)
Building Learning Experiences (IxDA 2015 Education Summit)Building Learning Experiences (IxDA 2015 Education Summit)
Building Learning Experiences (IxDA 2015 Education Summit)
 

Ähnlich wie Learning Experience Design From Superman

Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive DesignJason Grigsby
 
Less Framework, Stockholm-nov-2011
Less Framework, Stockholm-nov-2011Less Framework, Stockholm-nov-2011
Less Framework, Stockholm-nov-2011Leander Lindahl
 
WordPress & Expired Domains: How To Do It Right!
WordPress & Expired Domains: How To Do It Right!WordPress & Expired Domains: How To Do It Right!
WordPress & Expired Domains: How To Do It Right!iGB Affiliate
 
Ryan Sims & D. Keith Robinson
Ryan Sims & D. Keith Robinson Ryan Sims & D. Keith Robinson
Ryan Sims & D. Keith Robinson Carsonified Team
 
Cover & Carry Internet Marketing Plan
Cover & Carry Internet Marketing PlanCover & Carry Internet Marketing Plan
Cover & Carry Internet Marketing PlanOwen Moore
 
S1 2GX 2011 - Using Grails on a public facing Fortune 500 website
S1 2GX 2011 - Using Grails on a public facing  Fortune 500 website S1 2GX 2011 - Using Grails on a public facing  Fortune 500 website
S1 2GX 2011 - Using Grails on a public facing Fortune 500 website Jim Shingler
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site AccessibleHelena Zubkow
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Adrian Roselli
 
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014Matt Gibson
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy DesignRich Quick
 
Economies of Scaling Software
Economies of Scaling SoftwareEconomies of Scaling Software
Economies of Scaling SoftwareJoshua Long
 
Small Business and Word of Mouth - Why it works
Small Business and Word of Mouth - Why it worksSmall Business and Word of Mouth - Why it works
Small Business and Word of Mouth - Why it worksWebbed Marketing
 
Building links in a penguin ridden world - BizUp
Building links in a penguin ridden world - BizUpBuilding links in a penguin ridden world - BizUp
Building links in a penguin ridden world - BizUpBizup
 
Welcome to a new reality - DeepCrawl Webinar 2018
Welcome to a new reality - DeepCrawl Webinar 2018Welcome to a new reality - DeepCrawl Webinar 2018
Welcome to a new reality - DeepCrawl Webinar 2018Bastian Grimm
 
Natural Language Movie Queries - Bing vs Google
Natural Language Movie Queries - Bing vs GoogleNatural Language Movie Queries - Bing vs Google
Natural Language Movie Queries - Bing vs GoogleEvolving SEO
 
Koubei banquet 32
Koubei banquet 32Koubei banquet 32
Koubei banquet 32Koubei UED
 
夜宴32期《WordPress and so on》
夜宴32期《WordPress and so on》夜宴32期《WordPress and so on》
夜宴32期《WordPress and so on》Koubei Banquet
 
Step into the SharePoint branding world, tools and techniques
Step into the SharePoint branding world, tools and techniquesStep into the SharePoint branding world, tools and techniques
Step into the SharePoint branding world, tools and techniquesBenjamin Niaulin
 

Ähnlich wie Learning Experience Design From Superman (20)

Less
LessLess
Less
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
 
Less Framework, Stockholm-nov-2011
Less Framework, Stockholm-nov-2011Less Framework, Stockholm-nov-2011
Less Framework, Stockholm-nov-2011
 
WordPress & Expired Domains: How To Do It Right!
WordPress & Expired Domains: How To Do It Right!WordPress & Expired Domains: How To Do It Right!
WordPress & Expired Domains: How To Do It Right!
 
Ryan Sims & D. Keith Robinson
Ryan Sims & D. Keith Robinson Ryan Sims & D. Keith Robinson
Ryan Sims & D. Keith Robinson
 
Cover & Carry Internet Marketing Plan
Cover & Carry Internet Marketing PlanCover & Carry Internet Marketing Plan
Cover & Carry Internet Marketing Plan
 
S1 2GX 2011 - Using Grails on a public facing Fortune 500 website
S1 2GX 2011 - Using Grails on a public facing  Fortune 500 website S1 2GX 2011 - Using Grails on a public facing  Fortune 500 website
S1 2GX 2011 - Using Grails on a public facing Fortune 500 website
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014
 
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy Design
 
Economies of Scaling Software
Economies of Scaling SoftwareEconomies of Scaling Software
Economies of Scaling Software
 
Small Business and Word of Mouth - Why it works
Small Business and Word of Mouth - Why it worksSmall Business and Word of Mouth - Why it works
Small Business and Word of Mouth - Why it works
 
Building links in a penguin ridden world - BizUp
Building links in a penguin ridden world - BizUpBuilding links in a penguin ridden world - BizUp
Building links in a penguin ridden world - BizUp
 
Welcome to a new reality - DeepCrawl Webinar 2018
Welcome to a new reality - DeepCrawl Webinar 2018Welcome to a new reality - DeepCrawl Webinar 2018
Welcome to a new reality - DeepCrawl Webinar 2018
 
Natural Language Movie Queries - Bing vs Google
Natural Language Movie Queries - Bing vs GoogleNatural Language Movie Queries - Bing vs Google
Natural Language Movie Queries - Bing vs Google
 
Koubei banquet 32
Koubei banquet 32Koubei banquet 32
Koubei banquet 32
 
夜宴32期《WordPress and so on》
夜宴32期《WordPress and so on》夜宴32期《WordPress and so on》
夜宴32期《WordPress and so on》
 
Step into the SharePoint branding world, tools and techniques
Step into the SharePoint branding world, tools and techniquesStep into the SharePoint branding world, tools and techniques
Step into the SharePoint branding world, tools and techniques
 

Kürzlich hochgeladen

办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioThink360 Studio
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 

Kürzlich hochgeladen (20)

办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 Studio
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 

Learning Experience Design From Superman

  • 1. Learning experience Design From superman SxSW 2013 Timothy Parcell @freescribbles #comicsXD
  • 2. THANK YOU. #comicsXD
  • 3. Where is Superman? #comicsXD
  • 4. Where is Brandon Routh? #comicsXD
  • 5. Superman Returns Released in#comicsXD 2006
  • 6. GREEN LANTERN Released in#comicsXD 2011
  • 7. Who are you who summons fire without flint or tinder? #comicsXD
  • 8. There are some that call me... #comicsXD
  • 9. There are some that call me... Tim. #comicsXD
  • 11. I’m the best there is at what I do and what I do best i’sn't very nice. James Howlett (aka Wolverine) first appearance: Incredible Hulk #181 (1974) art by Chris Bachalo & Tim Townsend #comicsXD
  • 12. How do you define experience design? #comicsXD
  • 13. The craft of building lasting relationships between people and brands through a system of positive interactions over time. #comicsXD
  • 21. Baskin-Robbins: Website Redesign Redesign Project: lebronjames.com home [default | FoM] home [hero | shout promo] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Web Page Title 1. Hero Tile Web Page Title 6. Footer HOME http://baskinrobbins.com Google When users first arrive to the site via searchhttp://lebronjames.com they will arrive on the home or by typing in the URL, Google This persistent element allows for secondary sections to be served up quickly, allowing page. The majority of the the screen real estate is devoted to a large hero tile which highlights 3-5 secondary audiences quick access to the sections more relevant to them. about us franchising contact us sign in LEBRON JAMES featured pieces of content or product. LIFESTYLE ENTERTAINMENT SPORTS LEBRON COMMUNITY Search 1. Main LOGO 6.1 Social Network links are displayed in an icon fashion to allow users to quickly accessm The a ICE CREAM CAKES THE SCOOP GIFT CARDS LOCATIONS Like <1K 1.1 The hero tile rotates through a carousel of images. The current position and the total number of HEADLINE <H2> of the the brand on the chosen networks. For launch, only Facebook and Twitter will appear. Tweet <500 tiles is represented here via the small dots at the bottom. The current display highlights the first networks can be addedipsum dolor sit amet, Lorem over time as content is available. would promotion. Each small circle is clickable and will jump to the tile in question. consectetuer adipiscing elit. Aenean 6.2 Each of the 3 more robust ligula eget dolor.the Corporate section are represented in the fo commodo sections and Aenean 1.2 In addition to automatically playing at a preset time increment (6-8 seconds depending on the massa. 2. The H amount of copy), users can move their cursor to the outside borders of the screen. When they do 6.3 author | category The flavor dropdown allows users to bypass the navigation and drive directly toThis fla their la so, arrows will appear to indicate that they can click to move to the next tile. By default, these choice. By making any selection within this dropdown, the user will navigate away from arrows will not appear on the screen. current page and be redirected to the selected flavor. autho or som 2. Main Navigation 6.4 displa These lower level links connect to pages that don't live within the browse structure of th The persistent navigation will appear on all pages of the site. Later pages will show that it contains 300 x 250 Ad featur (Medium Rectangle) MAIN HEADLINE <H1> an onstate to show the user where they are at within the site. Additionally, rolling the cursor over any of the primary items (Ice Cream, Cakes, Stay Connected, Gift Cards or Locations) will display 2.1 Faceb a flyout menu to show the sub-sectionsamet, consectetuer Lorem ipsum dolor sit within. This is outlined on the following pages. HEADLINE <H2> to sha adipiscing elit. Aenean commodo ligula eget Lorem ipsum dolor sit amet, align dolor. Aenean massa. See More>> consectetuer adipiscing elit. Aenean 3. Secondary Promotional Areas would #TEAMLEBRON commodo ligula eget dolor. Aenean To highlight ongoing initiatives, Sapient is utilizing 3 secondary promotional tiles that do not massa. animate. author | category sort Most Recent 2.2 Each FLAVOR OF THE MONTH 3.1. The first promotional tile represents the Birthday Club as it is a key component of the CRM/Loyalty @teamlebron Lorem ipsum dolor sit amet, programs that are currently under additional development. A text field allows the user to begin the displa the de Lorem ipsum dolor sit amet, consectetuer registration process by inputing their email address. commodo. consectetuer adipiscing elit. Aenean adipiscing elit. [temp CALL-TO-ACTION> 3.2. The second promotional tile represents the Gift Card program. As the main piece of E-Commerce 300 x 250 Ad functionality and a main section of the site, Sapient recommends highlighting it in a visual fashion (Medium Rectangle) 2.3 Sever as well. same THE LEADERBOARD HEADLINE <H2> post. 4. Local Stores Lorem ipsum dolor sit amet, 1 outsideshot consectetuer adipiscing elit. Aenean lightw BIRTHDAY CLUB GIFT CARD SHOPS NEARBY @teamlebron Lorem ipsum dolor sit amet, Unlike the two previous promo tiles, this one contains more functionality as it utilizes the same commodo ligula eget dolor. Aenean first. O geo-location functionality as dunkindonuts.com to determine the users consectetuer adipiscing elit. Aenean commodo. approximate ZIP code massa. 2 username Boston, MA, 02116 author | category location and displays the address and contact information for that closest location. outsideshot: Lorem outsideshot: Lorem 2.4 The fi 1Broadway, Cambridge, MA 02116 3 furiousgeorge ipsum dolor sit amet, ipsum dolor sit amet, Phone: 718-334-2354 Hours: 9:00-11:00 4.1 As the geo-location can be imprecise, a 'change location' adipiscing consectetuer adipiscing consectetuer option is provided to allow the user to Find More 4 anonymous 2.5 The n customize the address more precisely or switch Aenean commodo elit. Aenean commodo elit. it to their future travel location if that is their intent. ligula eget dolor. Lorem ligula eget dolor. Lorem but no Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer 4.2 For users who are looking for more precise driving dolor sit amet, their current address, a link is ipsum dolor sit amet, ipsum directions from 5 username contro 300 x 250 Ad adipiscing elit. adipiscing elit. provided that will drive to a page where theyconsectetuer adipiscing consectetuer adipiscing can input their street address and be provided with (Medium Rectangle) SEE THE FULL LEADERBOARD CALL-TO-ACTION> CALL-TO-ACTION> Change Location elit. elit. directions via Mapquest's API. 2.6 As dis HEADLINE <H2> their s 5. @teamlebron Lorem ipsum dolor sit amet, Social Integration @teamlebron Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo. consectetuer adipiscing elit. Aenean commodo. Lorem ipsum dolor sit amet, will fo Leveraging the social functionality on dunkindonuts.com, social feeds from Facebook or Twitter consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean Follow can be displayed. FACEBOOK TWITTER @teamlebron Lorem ipsum dolor sit amet, massa. 3. Seco consectetuer adipiscing elit. Aenean commodo. author | category @chocoholic Lorem ipsum dolor sit @chocoholic Lorem ipsum dolor sit @chocoholic Lorem ipsum dolor sit 5.1 Users can toggle between the two social networks at anytime by clicking the links here. Currently Repre amet, consectetuer adipiscing elit. amet, consectetuer adipiscing elit. amet, consectetuer adipiscing elit. highlighted is the twitter feed. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor. @teamlebron Lorem ipsum dolor sit amet, and c Aenean massa. #baskinrobbins Aenean massa. #baskinrobbins Aenean massa. #baskinrobbins consectetuer adipiscing elit. Aenean commodo. the ca 2 hours ago 2 hours ago 2 hours ago 5.2 A simple follow/like mechanism allows users to engage with the brand on an ongoing basis. Upon clicking this button, the flows for the respective networks would be followed. i.e., pop-ups, etc. outsideshot: Lorem outsideshot: Lorem the he #baskinrobbins Frequently Asked Questions NUTRITION ipsum dolor sit amet, ipsum dolor sit amet, 300 x 250 Ad Privacy Policy Site Map 5.3 consectetuer adipiscing consectetuer adipiscing Users can rotate through the most recent posts. By default the 3 most recent are displayed. (Medium Rectangle) @teamlebron Lorem ipsum dolor sit amet, elit. Aenean commodo elit. Aenean commodo FACEBOOK TWITTER PINTEREST 5.4 consectetuer adipiscing of Aenean conversations around the brand asLorem ligula eget dolor. Lorem Sapient recommends a potential strategyelit. tracking commodo. ligula eget dolor. opposed ICE CREAM ipsum dolor sit amet, to the only the brand's posts as it builds a more engaging presence and gives people the ipsum dolor sit amet, SHOUT SHOUT <H2> CAKES THE SCOOP ABOUT US @teamlebron featured on baskinrobbins.com. This filtering can be adipiscing consectetuer adipiscing perception that they too can be Lorem ipsum dolor sit amet, consectetuer done via Lorem ipsum dolor sit amet, consectetuer hashtags or @replies. Obviously, this approach would require some additional monitoring to be elit. elit. Select an Ice Cream Flavor Create Your Own Birthday Club Media Relations adipiscing elit. Aenean commodo ligula eget dolor. consectetuer adipiscing elit. Aenean commodo. Occasions Events International Aenean massa. Specialties discussed in the future. guest author | music Grab-N-Go Types Promotions & Coupons Franchise Opportunities Nutrition Pies Contact Us FAQs 1500 MORE HAVE RESPONDED. ADD YOUR VOICE > Privacy Policy Terms of Use Mobile Terms & Conditions Site Map Creator Timothy Parcell Creator Timothy Parcell Modified Sat Mar 09 2013 Modified Tue Jun 05 2012 #comicsXD
  • 22. What are comic books to you? #comicsXD
  • 23. Sequential Art. #comicsXD
  • 24. characters. #comicsXD
  • 30. Are you going to be in trouble? #comicsXD
  • 31. I hope not. All trademarks and copyrights of third parties, including any trademarked referenced or represented for historical, scholarly and educational “fair use” purposes only. Individual artists are attributed wherever possible. The opinions presented are solely those of Timothy Parcell and do not reflect the views or positions of the owners and/or publishers of the comics and producers of other media which are referenced in this presentation. Superman, Action Comics, Batman, Detective Comics, Wonder Woman, Green Lantern, The Flash, Captain Marvel, The Justice League of America, Supergirl, Chloe Sullivan, The Watchmen, Green Arrow, Speedy, Harley Quinn, Lex Luthor, Lois Lane, Apollo, Midnighter, Mr. Majestic are all the trademarks and copyrights of DC Comics The Spirit is copyright and trademark of the Will Eisner Estate. Spider-Man, Captain America, Hyperion, the X-men, Wolverine, X-Force, Cable, X-23 are all trademarks and copyrights of Marvel Comics Archie, Betty and Veronica are trademarks and copyrights of Archie Comics. Spawn is copyright and trademarks of Todd McFarlane Steampunk is copyright and trademarks of Cliffhanger (Joe Casey & Chris Bachalo) I am just a huge geek. Please don’t sue me. #comicsXD
  • 32. Betty Cooper & Veronica Lodge first appearances: Pep Comics #22 and #26 (1941 and 1942) art by Dan Parent #comicsXD
  • 33. Veronica. #comicsXD
  • 34. ehh. #comicsXD
  • 35. ehh. Betty. #comicsXD
  • 42. People assume that time is a strict progression of cause to effect, but *actually* from a non-linear, non-subjective viewpoint - it's more like a big ball of wibbly wobbly... time-y wimey... stuff. The Tenth Doctor (David Tennant) #comicsXD
  • 43. UBIQUITY art by Alex Ross #comicsXD
  • 44. 1 BRAND THe Adventure Begins! #comicsXD
  • 47. art by Jim Lee #comicsXD
  • 48. Created in 1932 by Jerry Siegel and Joe Shuster. Jerry was the writer. Joe was the artist. #comicsXD
  • 49. Lex Luthor first appearance: Action Comics #23 (1940) art by David Finch #comicsXD
  • 50. Created in 1932 by Fleischer Studios Jerry Siegel and Joe produced 17 animated Shuster. shorts from 1941-1943. Jerry was the writer. Those films are the Joe was the artist. reason he can fly. #comicsXD
  • 51. art by Joe Bogdanove The K-Metal from Krypton Unpublished (Written in 1940) #comicsXD
  • 57. Values. #comicsXD
  • 58. Truth. Justice. The American Way. art by Jim Lee #comicsXD
  • 59. Truth. Justice. The American Way. (That last one was renounced in 2011) art by Jim Lee #comicsXD
  • 60. Captain marvel first appearance: Whiz Comics #2 (1940) SHAZAM! - The magic word that gives young Billy Batson the powers of Solomon, Hercules, Atlas, Zeus, Achilles and Mercury art by Jeff Smith #comicsXD
  • 61. THOR first appearance: Journey Into Mystery #83 (1962) #comicsXD
  • 62. APOLLO APOllo first appearances: Stormwatch #4 (Vol. 2 - 1998) His partner is Midnighter, a Batman clone. #comicsXD
  • 63. MR. Majestic first appearance: WildC.A.T.s #11 (1994) art by Ed McGuiness #comicsXD
  • 65. Wonder Man first (and only) appearance: Wonder Comics #1 (1940) #comicsXD
  • 66. Detective Comics, INC vs. Brun publications first copyright infringement lawsuit in the comic book industry #comicsXD
  • 68. The Spirit first appearance: Register & Tribune Syndicates (1940) art by Darwyn Cooke #comicsXD
  • 69. 2 DESIGN When we last left our hero #comicsXD
  • 70. One image can say a lot to a person. #comicsXD
  • 72. This is the man who raised the game. #comicsXD
  • 73. Graphic Novel. #comicsXD
  • 74. A narrative work in which the story is told through sequential art. #comicsXD
  • 75. Sequential Art. #comicsXD
  • 76. An art form using a train of images deployed in sequence. #comicsXD
  • 78. This presentation is not this book. #comicsXD
  • 79. This presentation is not this book. Go read it. #comicsXD
  • 80. This slide is a medium. #comicsXD
  • 81. The Hulk first appearance: The Incredible Hulk #1 (1962) Originally grey to avoid any confusion over ethnicity. Printing issues caused too much variation so they made him GREEN. Art by Jack “King” Kirby #comicsXD
  • 83. The Hulk first appearance: DC: The New Frontier The Incredible Hulk #1 (1962) 2003-2004 Originally grey to avoid any confusion over ethnicity. Written and drawn by Darwyn Cooke. Printing issues caused too much variation so they made him GREEN. #comicsXD
  • 84. DC: The New Frontier 2003-2004 Written and drawn by Darwyn Cooke. #comicsXD
  • 85. DC: The New Frontier 2003-2004 Written and drawn by Darwyn Cooke. #comicsXD
  • 86. Captain America first appearance: Captain America Comics #1 (1941) Art by Jack “King” Kirby #comicsXD
  • 87. Captain AmericA First Marvel character to be adapted to another medium. In 1944 he was featured in a eponymous serial movie. Art by Jack “King” Kirby #comicsXD
  • 88. Fantastic four first appearance: Fantastic Four #1 (1961) Art by Jack “King” Kirby #comicsXD
  • 89. Does anyone know who this is? Art by Skottie Young #comicsXD
  • 90. STEAMPUNK 2000-2002 Written by Joe Casey. Art by Chris Bachalo. #comicsXD
  • 91. STEAMPUNK 2000-2002 Written by Joe Casey. Art by Chris Bachalo. #comicsXD
  • 93. Marvel’s First Family Previous Superhero teams like the Justice League and Justice Society featured already established heroes banding together. Art by Jack “King” Kirby #comicsXD
  • 94. PATTERNS #comicsXD
  • 96. x-men 1991-2001. Art by Jim Lee Lex Luthor first appearance: Action Comics #23 (1940) #comicsXD
  • 97. 3 Stories and themes Plot Twists,. action. violence. #comicsXD
  • 99. x-men first appearance: The X-Men #1 (1961). Art by Roger Cruz. Stan Lee and Jack Kirby continued to build on the success. X-Men is now one of the most profitable franchises in comic books. #comicsXD
  • 100. Giant Size X-men published in 1975. Written by Len Wein. Art by Dave Cockrum. #comicsXD
  • 101. Time and Space. #comicsXD
  • 102. "You’re also, wherever possible, looking for an interesting image. But don’t confuse “interesting” with “splashy.” You’re still trying to serve the demands of storytelling, telling the story as clearly and simply as possible.  In most forms of narrative, each panel must have a relationship with the panels on either side of it.  You’re plotting out a sequence of motion in a series of stills.  Imagine it like that, and you may be able to get a better sense of how a story in comics might flow.  It’s not a perfect analogy, but it might be worth considering if this is something you’re having trouble with.  You’ll develop your own view, approach and methods as you go.  Everybody does." Warren Ellis (Writer, The Authority) #comicsXD
  • 104. Space hero meets Man of the people published in 1970. Written by Dennis O’Neil. Art by Neal Adams. #comicsXD
  • 105. Relevance Art by Neal Adams. #comicsXD
  • 106. Educational. #comicsXD
  • 107. SPEEDY Monumental Storyline. A Teen Titan doing drugs!? Written by Dennis O’Neil. Art by Neal Adams. #comicsXD
  • 108. Visual Literacy #comicsXD
  • 110. With great power comes great responsiblity. #comicsXD
  • 111. With great power comes great responsiblity. Uncle Ben #comicsXD
  • 112. Spider-man first appearance: Amazing Fantasy #15 (1962) Written by Stan Lee. Art by Steve Ditko. #comicsXD
  • 113. "We can realize that a good product is one that offers a good or memorable narrative that the user will engage with and pass on to others, either by sharing the artifact or talking about it. To create a good product, it is critical to understand our users. The need to involve the user in the design process has made product design a more complex task. However, designers can no longer focus solely on the product: A successful design will take into consideration all of the components in the user product interaction: user, product and context of use." Jodi Forlizzi & Shannon Ford #comicsXD
  • 114. 4 AUDIENCE The villains have the upper hand #comicsXD
  • 115. Film makes you a spectator. Comics make you a participant. #comicsXD
  • 117. True Believers! #comicsXD
  • 118. A Death in the Family published in Batman #428 (1988) Fans controlled the outcome of the story by voting via two 800 numbers. Jason Todd lost by 72 votes. (5,343 to 5,271) Art by Jim Aparo. #comicsXD
  • 119. comic book readership: 18-35 years old. #comicsXD
  • 122. n00bs #comicsXD
  • 123. n00bs nerds #comicsXD
  • 124. n00bs everyone else nerds #comicsXD
  • 128. 5 Scalability Heroes join forces #comicsXD
  • 129. The original Alan Scott (aka Green Lantern) first appearance: All-American Comics #16 (1940) #comicsXD
  • 132. change is risky. #comicsXD
  • 133. The Tough guy Guy Gardner(aka Green Lantern) first appearance: Green Lantern #59 (Vol. 2, 1968) #comicsXD
  • 134. THE MARINE John Stewart (aka Green Lantern) first appearance: Green Lantern #87 (Vol. 2, 1972) #comicsXD
  • 135. THE ARTist Kyle Rayner (aka Green Lantern) first appearance: Green Lantern #48 (Vol. 3, 1994) #comicsXD
  • 136. change is colorful. #comicsXD
  • 138. THE misunderstood Simon Baz (aka Green Lantern) first appearance: The New 52: Free Comic Book Day Special Edition #1 (2012) #comicsXD
  • 139. change is violent. #comicsXD
  • 141. change is fast. #comicsXD
  • 142. THE Helmet Jay Garrick (aka The Flash) first appearance: Flash Comics #1 (1940) #comicsXD
  • 143. THE Speed force Barry Allen (aka The Flash) first appearance: Showcase #4 (1956) Art by Francis Manapul #comicsXD
  • 146. Crisis of INfinite Earths Published 1985-1986 #comicsXD
  • 147. What Happened DC Comics wanted to reboot its entire universe. The Flash (Barry Allen) sacrificed his life to do it. #comicsXD
  • 148. i’m batman first appearance: Detective Comics #27 (1941) Created by Bob Kane & Bill Fingers Art by Jim Lee. #comicsXD
  • 153. 11 films. #comicsXD
  • 154. 11 films. 5 live action televisions shows. #comicsXD
  • 155. 11 films. 5 live action televisions shows. 12 animated series. #comicsXD
  • 156. 11 films. 5 live action televisions shows. 12 animated series. 14 animated movies. #comicsXD
  • 157. 11 films. 5 live action televisions shows. 12 animated series. 14 animated movies. 25 video games. #comicsXD
  • 158. 11 films. 5 live action televisions shows. 12 animated series. 14 animated movies. 25 video games. 5 foreign comics. #comicsXD
  • 159. 11 films. 5 live action televisions shows. 12 animated series. 14 animated movies. 25 video games. 5 foreign comics. 6,200+ published stories. #comicsXD
  • 160. What can I do where? #comicsXD
  • 161. What does the audience expect? #comicsXD
  • 162. Will this work over there? #comicsXD
  • 163. harley quinn first appearance: Batman: The Animated Series (1992) Art by Bruce Timms. #comicsXD
  • 164. x-23 first appearance: X-Men: Evolution (2003) Art by Danni Shinya-Lui. #comicsXD
  • 167. 1 one shot EPILOGUE Somewhere in a hotel in austin #comicsXD
  • 168. Everything in comics has to work–or else it fails. #comicsXD
  • 169. Make your brand stand for something. #comicsXD
  • 170. Make your brand stand for something. Get the details right. #comicsXD
  • 171. Make your brand stand for something. Get the details right. Tell a great story. #comicsXD
  • 172. Make your brand stand for something. Get the details right. Tell a great story. Make it simple. #comicsXD
  • 173. Make your brand stand for something. Get the details right. Tell a great story. Make it simple. Make things for your audience. #comicsXD
  • 174. Make your brand stand for something. Get the details right. Tell a great story. Make it simple. Make things for your audience. Know your medium(s). #comicsXD
  • 175. Make your brand stand for something. Get the details right. Tell a great story. Make it simple. Make things for your audience. Know your medium(s). Don’t be afraid to start over. #comicsXD
  • 176. Make your brand stand for something. Get the details right. Tell a great story. Make it simple. Make things for your audience. Know your medium(s). Don’t be afraid to start over. Have Fun. #comicsXD
  • 177. THANK YOU. Timothy Parcell @freescribbles sxsw.tv/cfw #comicsXD