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.