Week 5 Outside of Class

This weekend I read Chapter 1 of Interface Design. Here are my notes:

• User interface (UI) design brings together a team of specialists in order to create a successful interactive experience for the user

GRAPHIC DESIGNERS IN THE UI TEAM

• interface design is a complex process involving the UI design team, the target users and the client
• it is an iterative process, with phases of user research, ideation, testing, building, and further testing
• graphic design is not about designing a graphic; it is about designing effective visual communication
• aesthetics is an integral part of the users' experience of any interface
• it guides them towards key interactions in the UI, allowing them to achieve their goals

NEITHER MARS NOR VENUS

• each specialist in a UI design team has a different contribution to make
• information architects create the interactive structure
• user experience (UX) designers create the experience
• developers create clean UI code
• graphic designers communicate the UI's visual hierarchy, functionality and interaction
• a great designer will work within the constraints of the brief - such as budget, accessibility, target user, and available technology - shaping the visual elements of text and image to communicate the content and navigation

T-SHAPED DESIGNERS

• t-shaped designers have deep specialist knowledge of their own discipline
• the vertical body of a capital 'T' represents this specialist knowledge
• the designers also develop a secondary contextual knowledge of how other disciplines work, and a broader tertiary understanding of socio-cultural, political, ethical, ecological, economic, and technological contexts
• in the T metaphor, these secondary and tertiary levels of non-specialist knowledge form the top bar of the capital T

DESIGNING FOR INTERACTIVE FLOW

• If the UI is well designed, the user's experience is a positive and subconscious enjoyment of the interaction
• but if the UI's design causes problems, the flow is disturbed and the user is jolted out of that immersion
• three questions that should be kept in mind are:
• Does the user KNOW what to do in the UI?
• Can they DO what they want to do?
• Do they FEEL they have achieved something when an action is completed?

THE GRAPHIC DESIGNER IN THE FLOW

• in the existing conceptual framework o fate UI design process, there is a tendency to place the graphic designer at the end of the flow under a title of 'visual design.'
• however, the graphic designer can make valuable contributions to the look and feel of the UI right from the beginning of a UI project

This diagram shows which design specialism should take the lead for that part of the process.

USERS ARE KING (NOT YOU)

• a smooth interactive flow is the result of thorough research, implemented into clear information architecture
• the client is not the actual end user
• the desires of the client and the needs of the user must be balanced so that the client gets a return on their investment (ROI), and the user is provided with a satisfying interface
• this can be achieved by conducting deeper user research, involving the user at each stage of the design process in one way or another

This diagram show where the USER fits into the design process - the user needs to be a constant focus in the design of a UI

DEFINING THE USER

• so, who is a user, in terms of UIs?
• Product designer Philippe Starck has a method of re-humanizing the people that his team designs for
• he insists that his designers refer to them not as 'users', but with terms such as 'my friend', 'my partner', 'my mother', or 'my father'
• by personalizing the user in this way, Starch forces his designers to instill in the otherwise abstract user a human persona
• in this way, designing for their goals will be easier, as their personality can be catered for

DESIGNING PERSONAS

• a user persona is an important tool in the designer's toolkit
• it is an archetype (not a stereotype) created to represent the target user(s) in a form that will inspire the design team
• personas are essentially a character sheet created from information gathered during research into the UI's typical users
• Persona components:
• a photo the personalize the persona
• name and descriptive title
• background information
• goals
• quote to summarize expectations
• breakdown of challenges faced

Week 5B

Today in class we had a small discussion about the struggles that we face when trying to learn a new program and how we go about finding answers. We were then given the assignment of a specific prototyping program as a group and told to learn about the program. We will then teach the rest of the class how to use the program on Wednesday. We had the rest of the class to learn about our program.

Week 5 Outside of Class

Outside of class I made changes to my application icon. I moved the flipped corner of the paper to the side that is touching the phone and made it bigger so that it is seen better when scaled down. I also added a little bit of tone to the phone screen to make it look reflective.

Week 5A

Today in class we critiqued our final icons. The feedback that I got on my icon was:

• the dimensions on the final icon work really well
• the message comes across strong and works well
• changing the color of the wireframe on the phone was a good idea because my original idea (two shades of blue) was too similar to each other

Areas that I could improve:

• make the phone screen look more reflective
• put the flipped corner of the paper on the side that touches the phone screen to show it peeling away from the phone
• possibly make the flipped corner bigger because it gets a little lost when scaled down

Week 4 Outside Of Class

This weekend I finished my icon and my brief.

Week 4B

On Wednesday we went to two different design firms. The first one we went to was Web Page FX. I absolutely loved their firm. I was hesitant going in because I figured they only focused on web pages and coding, which is not what I think I want to do after I graduate. However, I fell in love the moment I walked in the door. The ambiance and atmosphere of their firm was so warming, “homey”, and comfortable. Everything was very modern. I also liked that Gina was in a sweatshirt and jeans. This showed me that they are very comfortable and accepting. The one thing that I loved the most about Web Page FX was that they offered a coding boot camp for all new employees. This made me feel more comfortable with possibly applying there after I graduate.

The second place we went was AndCulture. I didn’t like this firm as much as Web Page FX. Justin was very nice but he made me feel as if I was very far behind. He said that we should be extremely proficient in Photoshop and coding. He kept telling us that there are free courses online that we should be doing to teach ourselves coding. This gave me the feeling that they will not help me learn at all, that I am in charge of teaching myself everything. One of the employees that worked there also said that whenever you have free time between clients, you are expected to be researching new things and teaching yourself new skills. I did like the working environment though. The atmosphere felt cozy and I think that’s an essential thing to have when designing. However, I thought it was a little weird that most of the employees were standing. This could just be a preference for the employees but I still found it a little odd. Even though I didn’t like this place as much, it still helped me realize more about where I want to go and what I want to do after I graduate.

Week 4A

Today in class we did a round robin critique of our icons. Most of the people said that they like my first icon because it told a story and portrayed the message the most successfully. One person gave the tip of maybe making the wireframe on the paper look like it was sketched or hand drawn. So today in class I played around with that idea.

This is the icon at actual size.

I also played around with making the stroke black to look more like pen or pencil.

Nobody else really said anything else about what they wanted me to fix. So while I was waiting to meet with Professor Pannafino, I worked on my design brief. I did not like the way it turned out before, so I worked on redesigning what I already had.

I worked on the cover page. I am thinking of using the square pictures of people in my brief because that is the background of the Marvel website. I think it will work well because it ties the brief of my app to the actual website.

Week 3 Outside of Class

This weekend I completed my 3 digital icons. I also did a couple extra.

I did two versions of this one. I wasn't sure which one got the point across better.

I also started my design brief.

Week 3B

Today in class we took a small quiz on the reading, which wasn't graded. Then we got into groups of 3 and talked about our 30 sketches. We had the rest of class to work on putting 3 sketches into digital form. This is what I got done today:

Week 3 Outside of Class

Outside of class I read pages 90-95 in Interface Design. Here are my notes:
ICONS: COMPLEX PROCESS MADE EASY

• Icons are interface tools that visually focus attention and communicate, in a concise way, a call to action through an understandable visual metaphor
• Icons need to clearly convey its function to the user
• The image the icon adopts needs to be familiar and instantly recognizable
• The image may be specifically connected to the function or be representational or abstract
• The more specific the image is, the easier it is to connect to the function/action
• If it is obtuse, it will have to be learned by the user
• Meanings are either learned (house = homepage icon) or instantly identifiable (printer = print) by the user
• Too often, interfaces fail because icons are used in navigation without any sense of meaning
• Icons need to convey a call to action, so its imagery needs to stand out from the UI's content without competing with it

METAPHOR AND CONTEXT

• Metaphor is a particularly useful tool in visual communication as it can cut through cross-generational or cross-cultural complexities
• Essentially, it is the transfer of meaning from one object to another
• A suitable UI metaphor is one that explains the function and facilitates action instantaneously 
• It must also be readily understandable, readable, and contextually relevant to a large number of users
• Adding text labels to icons helps optimize usability, as some iconic meaning will take time to learn
• Once an icon's identity and purpose becomes universally accepted, it can live on its own in a UI without labeling
• Visual communication in icons fails when the metaphor or analogy is not clearly understood

DESIGNING ICON FAMILIES

• Due to the utility of an icon, it needs to operate at a variety of scales, at different resolutions and on a variety of screen displays
• The icon must display and communicate at different scales using different number of pixels
• The icon will also need to work at different resolutions of color display
• A 256 color 8-bit version will be needed, as well as a 16 color 4-bit version for lower resolution displays
• In each icon family there will be at least six to eight pieces of artwork that operate at different scales

I also did 30 sketches of my icon.

Week 3A

Today in class we briefly talked about the reading assignment that was for homework. Then we looked at Kym, Leslie, and Megan's blog and talked about their icons that they found. Then we had a brief lecture on icon creation. The rest of class we had time to work on our homework.

The Brief:
1. What is its context?
          - My application icon will be placed in the utility bar on a Mac. The utility bar is the bar across the bottom of the desktop screen that houses the different icons for the applications installed onto the computer.

2. What is it for?
           - My application icon is for the Marvel App website. This website takes Photoshop and other design documents and turns them into interactive prototypes.

3. Who is it for?
            - My application icon will be for anyone who wants to use the website/app. More specifically, this icon would be best used for the people that use the app frequently. Instead of always having to search for the website, the icon will open the app in one simple click.

4. Is there a single message?
             - I don't think there is a single message for an application icon. Yes, you have to portray the app/program in the icon, but there are many different ways to do that. There are many different aspects of the program that could be utilized into the application icon.

5. Does it have to be an icon?
            - For an application icon, it doesn't have to be simple and flat icon. Application icons can be actual 3-dimensional rendered images to portray the meaning and usage of the app/program.

The rest of class I worked on my mind map. This is what it looks like.

Week 2 Outside of Class

This weekend I explored Marvelapp.com's website and did a 200 word write-up on what it is and how it could be improved by an icon.

Marvel is a free prototyping website that is available for everyone. It can take your wireframes, sketches, documents, and any designs and turn them into both an interactive mobile and web prototype. The only thing you need to use Marvel, is a Dropbox account. Marvel supports any device that has a browser – gaming devices, web, iPhone, iPad, some iPods, and Androids. It also updates your prototypes automatically, so no having to reupload every time you make a change. They currently support Photoshop files and will be adding support for Sketch files soon. You can also add your own app icons to your design, if you are designing for iOS, and even install them on your own home screen. I feel as if an application icon for Marvel would increase its usage because clicking an icon on a desktop is a lot easier than opening up a web browser and searching for Marvel’s website. I also think that an application icon could really portray their mission/service in a simple way. Instead of reading through their webpage to discover what Marvel is, their application icon could show it visually. New users would have a brief understanding of what Marvel is before even opening the page.

I also read pages 124-145 and 148-149 in Type on Screen. Here are my notes:
Chapter 5 - Icons and Logotypes

• with the advent of modern computing and the graphical user interface (GUI), web designers have employed icons to help cross the language barrier between computers and humans
• In the 1980s the new ethos of user-friendly design democratized the computing environment
• Icons depict objects and concepts rather than spoken words, aiming to convey ideas quickly and universally
• A logotype communicates the name of an organization, product, or brand through a distinctive typographic treatment
• Like type designers, creators of icons and logos eek to generate images that function at sizes large and small
• Also like type designers, they seek to balance the desire for originality against the need to communicate through familiar references

WRITING WITH PICTURES

• Contemporary interface icons are rooted in the pioneering work of Otto Neurath
• Neurath, was the inventor of Isotype, a picture-based approach to education
• The term Isotype stands for International System of Typographic Picture Education
• Gerd Arntz's four thousand symbols formed the core of the Isotype system
• Today, icons are an integral part of user interface design, where they represent actions and ideas while conserving space and minimizing linguistic barriers

NOUN PROJECT

• The Noun Project is a library of icons available for free on the website
• The site also accepts submissions from users

WAYFINDING FOR SCREEN

• Screen icons fall under two broad categories - user interface icons and application icons
• User interface icons represent the tools and processes embodied in a device or software product
• Application icons depict a piece of software that is for sale in an app store or installed on a user's device
• Application icons are similar to logos, constrained in the rounded square shield that has become a brand beacon of its own
• User interface icons symbolize actions, such as go forward, go back, refresh, search, comment, and so on

ICONS AS TYPOGRAPHY

• Screen-based icons are delivered in several formats, including bitmaps, vectors, and fonts
• There remains strong support among designers and users for icons that are as flat and legible as letterforms, functioning as "typographic pictures" in the tradition of Isotype

CREATING AN APP ICON

• The form of a well-designed icon should reflect the app's function, convey an attitude about the product, and reflect what impression you want to give your users when they first encounter it
• Keep it simple - a spare, direct app icon is easier for users to understand and remember than a highly detailed image. It is better to add detail and dimensionality to a simple image than to start with a dense design
• Tell a story - just like a logo, an app icon can tell a story
• Avoid long words - typically, icons stand in place of words, objects, ideas, or operations
• Grab some attention - designs that maximize an icon's tiny real estate with bold graphic elements are especially memorable

SCALABILITY

• A Mac OS icon file (ICNS) consists of multiple image files at different sizes, each simplified according to its scale, with more detail possible at larger sizes
• The ICNS format supports the following sizes: 16x16, 32x32, 48x48, 128x128, 256x256, 512x512, and 1024x1024
• Begin drawing the icon at the largest size and work your way down to the smaller sizes, redrawing elements as needed

IMAGINARY APPS

• Designing an app icon can be the starting point for imagining new and improbable uses of our digital devices
• Creators of new apps often start by brainstorming novel ways to use the smartphone
• A useful next step is to design icons to represent key ideas and then sketch out interfaces that explain how the apps would work

ICONS FOR INTERACTION

• Icons play a key role in making a digital experience rich and guiding users through a comply web of screens and information
• Tiny web favicons help us see what websites await in a seemingly endless array of open browser tabs
• Simple pictograms can summarize information, making it faster and easier for users to anticipate what will happen when we click on something
• They also help us scan navigation menus and decide where we want to go
• Icons can save space and communicate broadly when written language is not universal
• They can also draw attention to recent changes or important notifications
• Icons come in three flavors - pictorial, metaphorical, and abstract
• Pictorial - some icons depict an object and its intended function, such as a camera for taking pictures
• Metaphorical - examples of metaphors include using a lock for online security or a cloud for remote data storage
• Abstract - some icons have an indirect meaning, but they become familiar with repetition and use over time

NOT SO DISTANT RELATIVES

• Processing and Arduino are two related programming environments built with designers, artists, and makers in mind
• The user interfaces for both are almost identical, and, until recently, the apps' icons were similar as well

LOGO, MEET NAVIGATION

• The Ken and Burns site employs thematic icons for content areas (passion, hustle, perspective) as well as simpler interface icons (comment, bookmark, home)
• The logo badges and navigation icons form a visually coherent family

DRAWING INTERFACE ICONS

• Icons have become a major aspect of digital product design, branding, and user experience
• Start with clear metaphors or representational concepts for your icon and determine how much detail is achievable at each size of output
• Set clear parameters to work with, such as stroke width, size, and color palette
• Make use of modular elements when possible
• Define the function - when is your icon for? Decide where it will be displayed, and thus what size it should be. Think about your primary users and the languages they use
• Find a metaphor - start by searching for existing conventions. Add your touch through the representation of the metaphor
• Mind map - put the action you are trying to represent in the middle, then branch out with every idea you can think of to visually represent it; use worlds and doodles to get all your ideas out
• Evaluate your ideas - ask yourself the following questions about each concept: is it easily recognizable? Does it have appropriate detail? Is there a risk of negative connotations? Is it visually appealing? Choose your best direction
• Custom pixels - while there are many existing icon sets for designers to choose from, making your own is the only way to have complete control over what your icons are and how they look

WORKING WITH COLOR

• There are several systems for identifying color accurately on screen, including hexadecimal, RGB, and RGBA
• Hexadecimal - specifying colors in HTML, the hexadecimal color system represents the percentages of R (red), G (green), and B (blue) that make up a color on screen with 6 digits. A hexadecimal tag always starts with a pound (#) sign
• RGB - an additive system, meaning that these three (red, green, blue) colors combine in different ratios to create a broad range of colors. The value for each color is measured on a scale from 0 to 255
• RGBA - uses the same color system as RGB with the addition of alpha. Alpha values, measured on a scale of 0 to 1 determines the transparency of a color
• Designer choose and combine colors into attractive palettes based on the qualities of colors
• Color harmonies are particular relationships among colors grouped around the color wheel
• Complement - two colors located opposite one another on the wheel
• Split complement - one base color plus two colors that sit on either side of its complement
• Analogous - two or more colors that sit next to each other on the color wheel
• Triadic - three colors spaced evenly around the color wheel
• Square - four colors spaced evenly around the color wheel
• Tetradic - four colors in two complementary parts

I also found 15 icons in the digital world.

Unicef uses this icon as kind of a mini-logo for their Water Project - where they donate a days worth of water to a country in need for every 10 minutes that you can go without touching your phone.

Tumblr uses this icon as a button that users push if they want to publish a quote. 

Tumblr actually uses the universal "power" sign as their "sign out" button.

Twitter uses this icon for when users want to compose a new tweet. The feather sort of throws it back to when people used quills as pens.

Facebook uses the icon on the left to show that you can find anything you want on Facebook. You are "attached" to everything.

Netflix uses these icons to reinforce that you can watch Netflix on so many different devices.

Netflix uses this icon to show that there are no punishments or secret small print, and that you can cancel your subscription at any time.

Yahoo uses each of these icons to really push what each of these topics cover. They give the website style and personality.

iPhone uses these icons in their "Command Center" for shortcuts. The first one turns your phone on and off of airplane mode, the second one turns your wifi on and off, the third one turns your bluetooth on and off, the fourth one turns the "Do Not Disturb" feature on and off, and the last one turns your phone swivel lock on and off.

The camera app on iPhones use this icon as the "switch cameras" button. When you push this button, the back camera gets turned off and the front camera gets turned on (and vise versa).

Instagram uses these icons in their edit section. Each effect has its own icon to show what that effect does.

If you edit a photo in the photo app on an iPhone, this is the tool bar that pops up. Each icon visually describes what each tool does - rotate picture, touch up (add more color), add a filter, get rid of red-eye, and crop.

If you select a picture in the photo app on an iPhone and click the "send" icon, these icons pop up (along with other options). These icons show that you can copy or print the picture. They add a visual element.

Etsy uses these icons to give their website personality and to really push what the positives are in using their site.

Qdoba uses these icons to also give their website personality, and to show three main things of their restaurant in their website. By adding icons, it makes your eye go to this area of the website, causing more people to look at it and click on each of these icons/topics.

I also found 15 icons used in the physical world.

These two icons help show which areas of the washing machine you can and cannot grab while attempting to move the machine.

The microwave uses these icons to help show what each button is used for. This could help with children who don't know how to read yet but can recognize pictures.

Command strips use icons on the back of their packages to help users know how to use the product correctly.

A container of Greased Lightning uses icons to show what all their product can be used for.

My printer uses these icons to show the different layouts that can be used when printing pictures.

Cars use this icon to show that children in car seats should not be put in the front seat.

My toaster uses this icon to show that the bread will pop up when it is done.

The fire alarm uses this icon to show that this alarm will go off when there is a fire.

The control panel in my apartment uses this icon to show that if not used correctly, users could be electrocuted.

The control panel also uses these icons to show what each switch will look like in each scenario (on, off, and tripped).

A can of spray paint uses these icons to show the different ways you can control the way the paint sprays by changing the position of the nozzle.

Our internet router uses these icons to show what is included with the router and what all services you can use with it.

Another internet router uses similar icons to show the same thing.

A pack of latex gloves uses these icons to show the most common areas that the gloves are used in.

The oven uses this icon to show that when you open the oven door, it becomes a tipping hazard.