Archive

Class notes

Valkyrie Crusade is on the IPhone and Android and was released last year. Its an online game where you build a city to your liking, battle other people, quest to gain new card, and game to relax and relieve stress.  One can join alliance and help each other to build your city and make it prosperous.

When you get a game that just come out and tell you can collect cards it brings back the good old days of Pokémon and Yugioh. But wait in this game “Valkyrie Crusade” is a new type of game that combines card battles with gorgeous girl warriors and fanciful town building.” Now doesn’t that just sound fantastic to collect card but there also gorgeous warriors. Although its not every persons dream to collect gorgeous women, you can also go out and battle with them and build your city.  Here even a review of some ones like toward the game.  Jenna3798 says, “I love this game! It’s addicting! The art for the cards is great and there are sooo many choices!”  I also think that the art in this game is fantastic, and have had those addicting moments where I cannot put down the game for a second.

The usability of the game is easy as long as a person has a smartphone and can connect to the Internet.  Though sometimes when you use this app the loading screen on the app does take a while but they have done updates to shorten the loading screens. Though the game is easy to use and they have a nice little tutorial on how to play the game it can have it problems, even when you are connected to the internet it will sometimes just have a failed connection making you have to reload the game and wait on the loading screen for another minute or two.

The Functionality of the game is pretty cool, you can set up your warriors any way you want but certain ways you arrange the warriors can acquire you a bonus to that group. You can upgrade the warriors to make them stronger or even fuse warriors with to change them into something even more powerful. There are few classes to the warrior’s light/darkness/ice/fire. There are also different levels to the warrior’s Common, High Common, Rare, Super Rare, Ultra rare, and Super Ultra Rare.

The Interface of the app is really nice, it has beautiful design to the app. It’s easy to navigate through the app.  The only problem with the interface is that sometimes when you go to another page there is a loss of connection to the system and it breaks the game making you have to restart it.  The shops interface is nice and they divide it to certain building you need and to items you can buy with real money. The design and color of the app is beautiful, you can tell they put a lot of work into the game other then the minor difficulties with the connection. Also the artwork on each card has its own character and you feel it though the art. The environment around the characters though you can tell that there updated but some are reused to a certain extent and make minor changes to it.

 

The following Diagrams below is the flow and the

 

FLOW CHART

 

Personas

This week’s inspiration

Wrap up observation presentations.

In class wrap up interviewing your peers and begin to create user profiles for each. These user profiles should highlight what you’ve learned about your peers’ use of technology, what they feel they need to have regular access to, and how connected they are to social media. These should also describe their style, products they can’t live without and any activities they regularly participate.

In class:

  • Finish watching Objectified
  • Present Observations – 5 minutes each
  • Discuss Chapters 3, 4 and 5
  • Begin interviews for Project 2

Homework

Continue interviews and begin sketching and brainstorming watch design ideas.

Cool things in the news to inspire ideas for Project 2

In class:

  • Discuss chapters 1 & 2
  • Watch Objectified
  • Attend: Networking Tips Workshop

Read: Thoughts on Interaction Design: Chapters 3, 4 & 5

  • What information can ethnographic tools give you to improve the interactivity of an online banking website? (pp. 48-54)
  • At what point is a design finished? What makes a successful design? What is the purpose of design? (pp. 54-62)
  • Identify a product family you use regularly (can be anything from technology to consumables except for coffee). How has its branding effected your use, relationship and experience with the product? (pp. 78-84)

Homework: Continue work on collecting observations and have them ready to present next week. Presentations should be formatted as either a website, poster, book, or video.

This weeks cool thing

http://mashable.com/2014/02/12/nightbus-interactive-music-video-interlude/

 In class:

Critique final comps, and fill out assessments.

Homework:

Read: Thoughts on Interaction Design: Chapters 1 & 2
From the reading you should be able to discus:

  • What makes up interaction design and what are some of the industry’s challenges?
  • What is interaction design, how its evolving. What fields does it draw knowledge from?

Post your thoughts to the blog.

Observation Project. For two weeks simply observe how people interact with their environment and everyday object. Take between 35 and 75 photos noting what you see and identify the type of interaction: reaction, co-opting, exploiting, adapting, conforming or signalling. From your collection of notes and photos produce a simple website to share your observations.

In-class

Test your paper prototype for functionality and useability. Refine wireframes based on test results.

A few resources from Paper Prototyping by Carolyn Snyder

Homework

Individually, shift your focus to the Surface stage of the design process by creating final design comps that highlight three to four important pages of your site (home, product, about, etc.). These comps should be based on your groups refined wireframes using any or all of the following: photoshop, illustrator and fireworks. Include sketches of your product and any content developed in your groups. The visual design should be yours, however it must be based on the group’s architecture and wireframes.

Lastly, bring the individual parts of your process back together. Mount photocopies of your brainstorming notes, proposal (your strategy & scope), architecture, wireframes (make photo copies so everyone has the same set), and comps onto three to four pieces of black matte board. Treat this as a portfolio ready piece that will showcase the forethought and planning behind your final visual solution.

Due and ready for critique next week.

Resources for final comps

In class:

  • Watch Chapter 7 of Designing Interactions
  • Short lecture on Wireframing & Prototyping
  • Individual meetings to critique proposal narratives.
  • In groups work on wireframes, then determine who will prototype what, and who will further develop content for your site. Before the end of class photocopy your wireframes so everyone in the group has the same set.

Wireframes

Moving from the strategy, scope and structure we shift onto benchmark 2, designing the skeleton for Project 1. At this stage we begin to decide where content (i.e. various levels of navigation, copy, pictures, video, forms, etc.) live on screen. This is done using wirefames. These are simple drawings that indicate what goes where. The gallery shows a few examples.

Later stage wireframes are cleaned up using photoshop or illustrator.

Paper Prototypes

Prototyping can bring a site to life without a line of code or pixel pushed across a screen. This phase of the process allow designers to test elements of their site, discover how a user might interact with it and quickly make changes. Further this can lead iterations to evolve more quickly, and help designers spot design flaws before they become bugs.

IDEO on Prototyping

The videos show two websites being tested through paper prototyping.


Project 1: Benchmark 2

Using your Structure and the wireframes created in class as a guide build a paper prototype of your entire site. A robust prototype ready for next week for user testing is due next week.

Articles and Resources:

This weeks cool thing: interactive video

http://www.instantusa.com/Devo_WWD_Full_Energy_Dome.html

Discuss Elements of User Experience

The 5 elements of user experience design:

Strategy: First we begin by defining the object/site/app/product’s purpose. What are the goals it will be trying to achieve and who those goals are for, the client or the user.

Scope: defines the features and functions that will create a complete experience, and how those features and functions will help to achieve the goals defined by the strategy.

Structure: this sets the information architecture and applies organizing principles, defines possible user behavior through use-case scenarios.

Skeleton: This element determines the form of functional elements, the navigation, and placement and layout of content.

Surface: This element gives life to any experience. Its the look, the shape, the color, the graphic design. Its the identity, the branding. Its the final polish given once all of the other elements have been accounted for.

Architecture Examples and Explanation

  • Hierarchical: RMU.edu – most informational sites use this structure to allow users to explore information based on level of importance and to dig deeper with each click.
  • Matrix: Zappos.com – most shopping sites use this, as it lets users browse based on categories, for example users may choose to look for information based on color, size, speed, age, etc. Apple.com mixes both Hierarchical and Matrix.
  • Organic: Superbad.com – sites that use Organic tend to be experimental, artistic or looking to create unexpected user experiences. Youtube.com is a mix of matrix and organic
  • Sequence: Penny-arcade.com/comic – these tend to be sites with low exploration and linear narratives as they drive the user in one direction. Often sequences may shoot out from Hierarchical or Organic architectures.

Begin Project 1.

Project 1: Benchmark 1

Using the product idea you came up with last week, define a Strategy for a web site that will sell your idea (200-300 words). What do you as the creator of your product hope to achieve through the web site, and what will your site’s users hope to get from visiting. Second, define the Scope of the site by choosing the features and functions it will have (200-300 words). Lastly, Outline a structure, aka an information architecture so that you can show how users will navigate through your site (this should be done in illustrator, photoshop or omnigraphle).

These three elements are due next week and must be ready before we move onto benchmark 2.

Useful Articles and Resources

 

Welcome to Designing for New Media. Each week class will begin with a lecture or discussion of the assigned readings, on the blog I will post notes and things to consider. Come to class prepared with sketchbooks, drawing tools and new media related things to share.

Homework:

Create an account for this blog. Then to knock things off lets first try to define what new media is. Then introduce yourself by posting to the class blog, and describe how you currently view what new media is.

Read: Elements of User Interaction
From this reading you should be able and prepared to answer the following:

  • What are the goals of Apple’s website? How does Apple’s website address the needs of a user who has just purchased their first MacBook? (pp. 41-56)
  • What are the functional specifications of Facebook’s wall? If you are not on Facebook what are the specs for the signup page? (pp. 72-75)
  • What are four architectural approaches to information structure? Find one example of each. (pp. 94-106)
  • What percentage of The Huffington Post index page is navigation, and what percentage is content? What about Google, Wikipedia, and Etsy? (pp. 116-134)
  • How does http://www.landor.com guide the readers’ eyes and focus their attention on what is important? (pp. 144-155 )

Put your thoughts down in your sketchbook and be ready to discuss the book next week.

 This week’s thing to consider:

http://www.ted.com/talksl/defend_our_freedom_to_share_or_why_sopa_is_a_bad_idea.html