sketch

Welcome!

As the bulletin will tell you, this course covers, "...practices, concepts, history, and social ramifications of design. Typography, layout, identity, visual/physical structure, graphic iconography, and relationship of form to function. Theoretical and/or historical issues relevant to contemporary practice."

This particular semester we will be designing mobile applications, websites, and maybe even console game interfaces to explore the above concepts through the practice of user interface and user experience design (shorted to UI/UX in the industry). 

[Click here] to download a PDF of the course syllabus.

User experience (UX) Design

We'll begin this semester by discussing user experience design. This field of design can also be referred to as "user centered design," as it considers the demands, behaviors, desires, and even the handicaps of the end user. Questions a user experience designer asks include, but are not limited to:

  • What are the things a user is going to want from my design?
  • What is the most thing in my design and how do I connect the user with ASAP? 
  • How many ways can a user try to get what they want?
  • How would a user react to the layout, structure, and/or pacing?
  • What does the user want?
  • What will make sense to the user; what will confuse her?
  • What might one user potentially have trouble doing that another user will not? 

Take a look at the above questions and think generally about what they're describing. Do these sound familiar to you? Haven't we considered these things no matter what we're working on? Certainly websites and apps need good user experience design because people could use them in so many ways. But don't we consider these same things to some degree when texting someone? Or posting to Instagram? Or writing an email, laying out a book, writing a story, making a video... even making breakfast?! 

If you answered yes to any of the above, then congratulations: you're a user experience designer! This semester we are going start to designing mobile apps by consider their users, deciding what we want the app to do, how the user should use them to do it, and then moving on to the next phase of the course, user interface design.

 

User Interface (UI) design

Screen Shot 2018 01 12 at 10.38.22 AM

Once we've created a solid user exeprience, it's time to 'skin it' in an elegant way that enhances and optimizes its usability. Whereas UX consider the user's behavior, UI is concerned with how the user's behavior meshes with the logic of what is generally an interactive design. If the designed item is a tool, how does the user use it to create change? How can we optimize how usable this tool is? Is the usage visually clear or muddled? Beautiful or ugly? Pleasing or frustrating. These are the questions of a user interface desinger.

The good news: user interfaces are all around us, so we have plenty of references. Here is a short list:

  • the handle of screwdriver
  • a touchscreen with icons
  • any phone
  • any tv remote
  • a toothbrush handle
  • the surface of a basketball
  • the shaft of a pencil
  • shoelaces or velcro 

More good news? If you have ever created any work of art ever – even taken a photograph with your phone – then you have engaged in user interface design. In this case, you allowed a 'user' to 'interface' with a visual concept. Yay! 

 

01/30

Class 01Course Introduction; Syllabus; App idea demonstration; Ideation Part 01

Homework: Create a Pinterest account if you have none; create a board for UI design and begin collecting examples of things you find interesting. Get a sketchbook!

02/06

Class 02 – Ideation Part 2

Homework: Sketch must have screens for app.  

02/13

Class 03 – Review must have screens; Collaborative Wireframing Demo; In-class wireframing
Homework: user test paper wireframe and reconfigure if necessary.

02/20

Class 04 – Prototyping Part 01

02/27

Class 05 – Prototyping Part 02

03/05

Class 06 – Prototyping Part 03

03/12

MIDTERM – User Testing: Rather than a formal presentation, wherein we each give possibly boring presentations, we are going to user test waeachch others prototypes! Your assignment is to go around and use each or your classmate's app prototypes, making note of 1.)what works, 2.)what is unclear, and 3.)what needs to go. You will all place your notes anonymously in a single text document, saved on the desktop of each machine. 

03/19

Class 08 – Beginning Final Project

03/26

Class 09 – Final Project Ideation 01

04/02

Class 10 – Final Project Ideation 02

BREAK

SPRING BREAK – NO CLASS

04/08 – 04/16

04/23

Class 11 – Wireframe, UI, Logo Design

04/30

Class 12 – Prototyping Part 01

05/07

Class 13 – Prototyping Part 02

05/14

Class 14 – FINAL PRESENTATIONS

*Please note that the above schedule is subject to change.

%MCEPASTEBIN%

Welcome to Art 202/302/702 - Design and Advanced Design! Here's what I would like to go over today:

  1. The Course Description
  2. Introductions (with a brief description of an app you love) 
  3. The Course Schedule
  4. Overview of Demo App: TypeEverywhere
  5. Homework:
    • Create a Pinterest account if you have none – then create a board for UI/UX design or similar and begin collecting examples of things you find interesting. 
    • Also, get a sketchbook!

Artboard 7 80

To get started in the UX/UI design process, we will spend the first half of the semester designing an app called TypeEverywhere. This fictional app essentially allows the user to take pictures of things – anything, really – around her and make typefaces from formal qualities found in these pictures. We don't need to worry about how the app does this, we just know that we want the app logic to use detected shapes in images to generate a typeface. Knowing this, our job as UX/UI is design the behavior, look, and feel of an app to best serve the user.

 

Ideation

a.k.a brainstorming, the ideation phase of a UX/UI project is perhaps the most fun. This is where we see what other people have done in the same vein, list what we must have, what we'd like to have, what we shouldn't ever have, think about how a user interacts, and begin sketching. 

 

Precedents and competition

When one begins to design a UX/UI project, one should ALWAYS begin with solid research about the competition. Has something like it been done before? What did they do well? Where were they lacking? What do we want to keep, what should be thrown away?

There isn't anything like TypeEverywhere on the market as of this writing that does anything quite like this, and it may not even really be possible, but it also isn't a completely ridiculous idea either. Here are a few projects that are in some ways similar, and could perhaps even inform, our TypeEverywhere app:

Functionality Prioritization Exercise

We continue our ideation by talking about must have features, should-probably-haves features, and then nice-to-have features. For example, it is really essential for our user to be able to take a photo of an inspiring object. The app should-probably somehow allow the user to select specific areas of that image to focus on for subsequent shapes. Finally, it would be really nice for the app to give the user the ability to modify or simply these shapes for use in a typeface. In no particular order, here is a list of suggested TypeEverywhere features:

Must Have Features

  • Take a picture (access device hardware, camera)
  • Object recognition: User-driven and automatic, generates posterized representation of images for easy edge and shape detection
  • Makes functional typefaces  
  • Evolutionary versioning/iterations
  • In app, very basic type design engine: App applies estimated stroke widths, contrast, stress, etc, but allows for these and other options (keening, spacing, serif/sans/slab, etc) to be tweaked for entire alphabet as well as individual letters.
  • Learns user preferences 
  • Different snapshots
  • Export industry standard typeface formats (OTF, TTF, SVG) 
  • Export/upload to well-known type repositories/sites 
  • Automatic autosave vault
  • Hierarchical project library and file management with nesting 
  • Source image library 
  • Sharing/Cloud access (DropBox, Drive, Box) 
  • Open source font format exportation to other mobile and desktop apps
  • Interactive glossary or type reference library
    • This glossary is drawn from for tool tips that pop up over reference images when app is guiding the user in the creation process

Nice-to-haves

  • Ability to use multiple images for single typeface
  • Ability to assign specific, defected shapes to shape groups of letters, eg circular letters (O, C, P, Q, G, etc), triangular letters (A, V, W), square letters (T, H, M, X, Z), and odd ones (S, I, etc).
  • Social media community based around TypeEverywhere users
  • Typeface Family or Category suggestions to build off of
  • Themes, moods, etc.
  • AI optimization [a la Hoelfer Obsidian]
  • Versioning or version history
  • Shake to shuffle typefaces
  • Teach basic type anatomy to users
  • Interactive user guide
  • Quick, easy, fun

Task Modelling and user journeys

Once we have the basic requirements down, we should really begin planning out the many ways our users might use our app. As an example, we might at first describe people using Instagram thusly:

"You open Instagram, take a picture of you and your friend making duck lips on a beach, then post this image, then close Instagram."

And while this is certainly something that plenty of people do, given the abundancein my Insta feed of people making duck lip faces while on beaches, that's not the whole picture. Some people go on just to look at their duck lip friends; others go on to look at comments and likes on their own, stupid duck lip pics; still others go on just to change their privacy settings so that exes can't stalk them...and so on. 

These different usage narratives are called "user task models," and they will inform not only what screens we develop, but also how we get to those screens, and how they're all linked together. Below are a few that I have thought of. Think of them as little stories, each titled after the main, narrative thread. For example:

 

The New Project:

  1. Sees something inspiring
  2. Opens app
  3. Clicks “new project” which opens up capture screen (camera). 
  4. Takes picture 
  5. Option to selects and adds area(s) of interest,( or take another image, or move onto project)
  6. App asks what each area should be considered for in terms of type anatomy (ascender, crossbar, serif, terminal, bowl, shoulder, etc), but user selects “decide later”
  7. Returns to project screen, user asked to begin with a source image
  8. App enters edit reference image screen and asks what area(s) should be considered for (ascender, crossbar, serif, terminal, bowl, shoulder, etc)
  9. User chooses areas and sets choices for anatomy
  10. App logic suggests a few default iterations of typefaces (serif, sans, geometric, script, etc) based on shape areas in reference image.
  11. User asked to shake device to re-iterate the selections or select one she likes.
  12. User shakes phone and selections reiterate
  13. Customization allows user to modify, select or deselect type options. 
  14. User saves snapshot.
  15. User exports typeface with options (OTF, SVG, TTF, etc).
  16. User shares typeface with client or friend.
  17. User saves project and exits app.

The Old project

  1. User opens app
  2. User goes into project library 
  3. Selects existing project
  4. Presented with options to create new snapshot from image, modify existing snapshot, or export existing snapshot, as well as edit existing reference images, add reference images,
  5. User edits existing reference image
  6. Selects and additional area of interest. 
  7. App asks what area should be considered for in terms of type anatomy (ascender, crossbar, serif, terminal, bowl, shoulder, etc)
  8. User makes anatomy choices with tooltip overlay
  9. App logic suggests a few default iterations of typefaces (serif, sans, geometric, script, etc) based on new shape areas in reference image.
  10. User asked to shake device to re-iterate the selections or select one she likes.
  11. User selects one she likes.
  12. Customization/modification screen allows user to modify, select or deselect type options. 
  13. User saves snapshot.
  14. User saves project and exits app.

Modify existing snapshot

  1. User opens app
  2. User goes into project library 
  3. Selects existing project
  4. Presented with options to create new snapshot from image, modify existing snapshot, or export existing snapshot, as well as edit existing reference images, add reference images
  5. User selects modify existing snapshot
    • User asked to edit original or copy to new
  6. Snapshot Customization/modification screen allows user to modify, select or deselect type options, change size, view as
  7. If original edited, User given the choice to save snapshot over original or to produce a copy
  8. User saves snapshot as unique copy.

Add reference image (slow)

  1. User opens app
  2. User goes into project library 
  3. Selects existing project
  4. Presented with options to create new snapshot from image, modify existing snapshot, or export existing snapshot, as well as edit existing reference images, add reference images
  5. User selects “add reference image,” which opens up capture screen (camera). 
  6. Takes picture 
  7. Presented with Options to select or adds area(s) of interest,( or take another image, or move onto project)
  8. App asks what each area should be considered for in terms of type anatomy (ascender, crossbar, serif, terminal, bowl, shoulder, etc), but user selects “decide later”
  9. Doesn’t save project, just exits app (project saves automatically)

Quick add reference image

  1. User opens app
  2. Clicks “add image,” which opens up capture screen (camera). 
  3. Takes picture 
  4. Presented with Options to select or adds area(s) of interest,( or take another image, save to image library, or save to new project
  5. User saves to image library
  6. Exits app

 

 

%MCEPASTEBIN%