sept 25 class by tyler galloway

in class

  • word to the wise: be proactive in your design approach. design great interactions. then look at the software and push it as hard as you can to make your ideas work. don't let your concept and visual approach be dictated by what the software can do. don't use the software as an excuse for mediocre design. it's okay to reel the interactions in somewhat, but that should not affect the visual approach significantly. 
  • discuss flinto skill share for next class
  • review "don't make me think" chapter 3
  • work time and desk crits - review 5+ screens and flinto attempts
     
  • new work for next class
  • continued strong development of your idea – add visual detail as needed [navigation, controls, etc]; consider multiple user flows; provide for a consistent sense of "place" within the interface; ensure your interaction model works consistently [i click this, that happens; when i'm in this mode, these things are available, etc].  
  • read "don't make me think" chapter 4
  • prep flinto skill shares as needed [import video, import vectors, import sound, etc, etc]
  • do your homework on denise and think of some questions you want to ask her to get to know her better. she'll be answering those in small group sessions throughout her time here this week. 

sept 20 class by tyler galloway

in class
discuss "don't make me think" chapter 2
discuss effort / output / what's possible / what's desirable
flinto tutorial action!
desk crits

new work for next class
strong progress, which looks like
- tight color mock-ups of 5+ screens with appropriately unique approaches to form / composition
- initial experiments with getting flinto to work
read "don't make me think" chapter 3

definitions + resources // ux vs ui by tyler galloway

user interface [as defined by caylie, ashley, steven, and sarah]
The conversation between humans and machines to guide a user through a specific, visual organization of information. Their goal is to be logical, dependable, visual and conversational in the design of human-machine interface. When using a specific interface the user expects the menu button to be a menu, not open to another page. These expectations create a logical basis for all decisions in designing the interface. This consistency also makes it dependable, when the user clicks on the menu button they’re given a menu option. This creates familiarity and plays off of knowledge that the user already has. The conversation between the humans and machines creates an experience by using visuals in a methodical, intentional way. The UI designer transfers the information to a visual language in a way designed around its user.

user experience design [as defined by jarkece, debbie, y, and justin]
A product begins with UX design, which is informed by the research, psychology and sociology of the end-users in mind. This initial research and content development informs UI designers in their production of user interface, and from that collaboration the user experience is determined. Depending on the timeline, the cycle can continue for continuous refinement of the UI and user-experience until the product is in the hand of the end user. Attributes of UX design include research, content-driven design, and consumer-driven design. Roles of the UX designer is more content and data driven with roles in user-testing, consumer research, content development and wire-framing/prototyping in collaboration with UI designers to determine the final user-experience of a product. It is being a part of research, testing, development, content, and prototyping to test for quality result to ensure that the UI influences the UX. 

user experience as defined by nielsen norman group, and contrasted with user interface and usability.

user experience as defined by wikipedia. 

user experience basics by usability.gov

- - - - - - - - - - - - - -

user interface from google dictionary: the means by which the user and a computer system interact, in particular the use of input devices and software.

user interface as defined by wikipedia

- - - - - - - - - - - - - -

a pretty clear blog post from ben melbourne on a range of designer/developer roles and their various overlaps. 

also, these two pretty solid videos.

inspiration by tyler galloway

http://lights.helloenjoy.com/
the interaction model is not easily understood – no clear and immediate feedback on your mouse movements or clicks, except for a click on the bubbles, which gives a star-explosion-thing. but kinda fun to explore. thanks to derick lopez for the link.

my grandmother's lingo
an amazing and touching site that teaches you some basic words of a dying australian aboriginal language. heavy on narrative and animation, the path is basically linear, but with small moments of audio-based interactivity. very well done.

project 1 research sources by tyler galloway

all of these resources are offered by me, your beloved teacher, free of charge. that's right – free of charge!

local jazz clubs
green lady lounge
the majestic
the blue room (18th and vine)
the phoenix
the ship

periodicals and websites
jazz times
downbeat

contemporary kansas city jazz artists
bobby watson
molly hammer
danny embry
matt villinger
julia haile
ida mcbeth
gerald splits
kim sicils and steve rigazzi
stan kessler
a la mode
julie turner
stephen martin
mark lowrey
sullivan fortner
mike ning
angela hagenbach
jason goudeau
millie edwards
chris hazel ron
brian hicks
david basse
candace evans and ricky anderson
lonnie mcfadden
kevin frazee
micah herman

flinto by tyler galloway

flinto will be the highly recommended (and demoed) software for this project. while it will not allow us to make a full-on-coded application, it will allow us to make a functioning prototype that can be user-tested. if you want, you could capture a screen video to show proof of your concept. further, prototyping tools like flinto are very common in the UX / UI world, so getting familiar with one would be very smart. 

when you hit the "buy now" button on the site, look carefully for the "educational pricing" text link. that will get you 50% off, for a final price of $50. you will have to use your kcai email and upload an image of your ID. 

project 1 timeline - student defined by tyler galloway

students – let's view this as a suggestion and add detail as we go. we may need to flex here and there to add more time to visualization, learning software, or whatever.  

w aug 30
project definition
tg - have your audience, context, and content well-detailed at this point. 
field trip to jazz museum

tg - new work for sept 6
read "don't make me think" intro + chapter 1
[make sure you buy this required text asap]

visualize your research as much as possible - i want to see your audience, context, and any other research you can make visual. final format is open, but must be usable as reference for a graphic designer [yourself or another theoretical designer executing the design brief].

completed design brief including the following info at a minimum. design briefs are typically just typeset and research [above] can get more visual. it's okay if your research visualization contains some content from the brief. it demonstrates understanding of the brief. 
- project description: usually includes the who, what, when, where, why and how of the communication need [see my project sheet for the basics. it's okay to copy portions as needed. no need to re-write the book]. 
- audience description
- final delivery requirements (website files, print files, etc)
- technical / production constraints
- visual requirements (stuff like "include the logo and contact info", "stick with brand colors", etc)
- basic project timeline and due date

 

M sept 4
no class

W sept 6
Eclipse Project Due
content research/sketching/moodboards/storyboard/user paths/ideation
content development
***((content discussion – sharing, trading, etc))

tg- review briefs, visual research, and discuss readings
tg - discuss and experiment with interaction models
tg - thumbnails of possibilities based on some interaction models for next class. "get real fast" as julie beeler [founder of second story interactive] would say. 

M sept 11
UMKC Research Library Visit
location: the marr sound archives - ground floor, inside the umkc miller nichols library, 51st and rockhill rd
please consider walking or riding a bike. there is metered visitor parking in parking lots north of the library. bring quarters as it is $1.25/hr. 


visual ideation/brainstorming/determining direction
***"wireframes of some sort" crit
tg - i would say the main point here is establishment of an overarching structure that supports the content and is engaging for your audience. that structure should be able to hold a decent amount of content and be potentially expandable. 

W sept 13
visual ideation/brainstorming/determining direction
tg - big emphasis on visual here
initial crit
***final ideation stages critique

tg - in class
reading reviews:

  • psychological sense of community, don’t make me think intro + ch 1

small group review of all work to date: 

  • design briefs - project + audience description, delivery requirements, production constraints, visual requirements, timeline + due dates
  • visual evidence of audience, context, and additional research
  • flattened interaction models / visual thumbnails / wireframe-y things
  • any additional visual materials you've developed in support of this project

tg - new work

  • read "don't make me think" chapter 2 for monday
  • great progress on visual ideas. 

M sept 18
final decision on direction (editing / narrowing)
tg- ux vs ui talk
tg - flinto demo?
tg - work time / desk crits as time allows

W sept 20
final decision on direction (editing / narrowing)
start designing
***small group crit
tg - possible guest critic

M sept 25
production

W sept 27
production
***short crit as whole class

M oct 2
user testing

W oct 4
user testing / refinement (try to be close to be done)
***small group crit / draw names for groups

M oct 9
refinement

W oct 11
project due

monday class by tyler galloway

due: 

  • audience: age range, motivation, needs, relationship to the problem, etc
  • initial research
  • context
  • preliminary content ideas

in class:

  • rough out project schedule together
  • collect drivers licenses and insurance for 2 students

additional work: