HackDesign Lesson 16: UI Design with Purpose

The purpose of UI design, above all else, is to deliver content and make visual sense of well planned out UX.

Important questions to ask are:

  • Is what I’m designing usable?
  • Does my UI visually communicate the path my UX has laid out?
  • The best user interfaces allow the content to shout, while the UI whispers


An article that questions the landmark thought of “Invisible design”.

Is Invisible design a call of only tactile design or touch based interactions?

Some crucial points to think about are:

1. Invisible design propagates the myth of immateriality

Invisible design propogates the myth that technology will ‘disappear’ or ‘just get out of the way’ rather than addressing the qualities of interface technologies that can make them difficult or delightful.

2. Invisible design falls into the natural/intuitive trap

3. Invisible design ignores interface culture

4. Invisible design ignores design and technology history

A powerful article with a lot of links explaining 


Skeuomorphism vs flat design - http://sachagreif.com/flat-pixels/

What is Skeuomorphism?

When done right, skeuomorphism and realism will trigger strong associations with real-world counterparts. This is both a strength and a weakness: sometimes, the association can be so strong that it will stop you from improving on what’s already been done.


People use your product because they are trying to get somewhere. You can imagine them standing in front of a chasm with their goal on the other side. They want to do something, but they can’t do it without help. Your product is there to bridge the gap.

To help somebody, a capability has to have two things. Think of it like the two handrails on the bridge. First, it has to be implemented on the back-end. The package has to go on the truck, the client approval has to be saved to disk.

Second, the interface has to offer that implementation to the user. The user has to know it exists, be able to find it, and figure out how to operate it. Designers have a word for this: “affordance.” The interface “affords” the capability to the user.

When it comes to design, thinking about the capability you are affording can help you refocus when you’re lost in details.

Ask yourself: does this change affect whether a user can discover the feature? Does it clarify how to operate it? What am I helping them do right now?

I’m very conscious of whether I am affording a feature or styling it. It’s important to distinguish because they look the same from a distance.

Affording a capability and styling it are both important. But it’s essential to know which one you are doing at a given time. Style is a matter of taste. Capability and clarity are not. They are more objective. That person standing at the edge of the chasm cares more about accomplishing their task than the details of the decor.


"Flat" and "Skeuomorphic" aesthetic, not design.

These pain points go far beyond aesthetic – down to the levels of user experience and usability. Skeuomorphism and Flat are disparate visual solutions, yes, but neither is a solution to the massive usability problem. 

Design is a form of problem solving. Never forget that.


Now, it’s not that the apps sucks. In each case, the apps ranged from good to great. They had huge amount of functionality, did unique things that other apps didn’t do, and solved a clear set of problems in a compelling way.

I’ve come to appreciate the important of a single person in the company owning the UX with this person being the arbiter of discussion around how to implement the UX. There’s nothing wrong with lots of different perspectives, but a single mind has to own it, synthesize it, and dictate the philosophy. But first, they have to understand the difference between UI and UX, and – more importantly – the product-oriented execs who approach things from an engineering perspective need to understand this.

HackDesign Lesson 17: Building Color Confidence


Basic background to colour psychology


Interesting tool. I don’t know what is meant by “Harmony”. Will need to learn a bit more to figure out this tool and use it effectively.


  • Hue is the most basic of color terms and denotes an object’s color.
  • Using pure hues adds a fun & playful look.
  • Pure red is a popular hue in web design.
  • Chroma refers to the purity of colour. A hue with high chroma has no black, white or gray in it.
  • It’s similar to saturation but not quite the same.
  • Chroma can be thought of as the brightness of a color in comparison to white.
  • In design, avoid using hues that have a very similar chroma. Opt instead for hues with chromas that are the same or a few steps away from each other.
  • Cyan has a high chroma and so really stands out against black and white.
  • Saturation refers to how a hue appears under particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues.
  • In design, colors with similar saturation levels make for more cohesive-looking designs. As with chroma, colors with similar but not identical saturations can have a jarring effect on visitors.
  • Combining colors with similar muted saturation levels creates a soft design.
  • Value could also be called “lightness.” It refers to how light or dark a color is. Lighter colors have higher values. For example, orange has a higher value than navy blue or dark purple. Black has the lowest value of any hue, and white the highest.
  • When applying color values to your designs, favor colors with different values, especially ones with high chroma. High contrast values generally result in more aesthetically pleasing designs.
  • Tones are created when gray is added to a hue. Tones are generally duller or softer-looking than pure hues.
  • A shade is created when black is added to a hue, making it darker. The word is often incorrectly used to describe tint or tone, but shade only applies to hues made darker by the addition of black.
  • In design, very dark shades are sometimes used instead of black and can serve as neutrals. Combining shades with tints is best to avoid too dark and heavy a look.


  • Hue is color (blue, green, red, etc.).
  • Chroma is the purity of a color (a high chroma has no added black, white or gray).
  • Saturation refers to how strong or weak a color is (high saturation being strong).
  • Value refers to how light or dark a color is (light having a high value).
  • Tones are created by adding gray to a color, making it duller than the original.
  • Shades are created by adding black to a color, making it darker than the original.
  • Tints are created by adding white to a color, making it lighter than the original.


Okay. So this has got answers for colour templates for which the tool was shared.

  • MONOCHROMATIC: Monochromatic color schemes are made up of different tones, shades and tints within a specific hue. These are the simplest color schemes to create, as they’re all taken from the same hue, making it harder to create a jarring or ugly scheme (though both are still possible).
  • ANALOGOUS: Analogous color schemes are the next easiest to create. Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Generally, analogous color schemes all have the same chroma level, but by using tones, shades and tints we can add interest to these schemes and adapt them to our needs for designing websites.
  • COMPLEMENTARY: Complementary schemes are created by combining colors from opposite sides of the color wheel. In their most basic form, these schemes consist of only two colors, but can easily be expanded using tones, tints, and shades. A word of warning, though: using colors that are exact opposites with the same chroma and/or value right next to each other can be very jarring visually (they’ll appear to actually vibrate along their border in the most severe uses). This is best avoided (either by leaving white space between them or by adding another, transitional color between them).
  • SPLIT COMPLEMENTARY: Split complementary schemes are almost as easy as the complementary scheme. In this scheme, instead of using colors that are opposites, you use colors on either side of the hue opposite your base hue.
  • TRIADIC: Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes.
  • DOUBLE-COMPLEMENTARY (TETRADIC): Tetradic color schemes are probably the most difficult schemes to pull off effectively.

http://kuler.adobe.com/#create/fromanimage - To get a colour scheme from a Photo.

Heavy duty article and I am still just a wee bit more informed regarding colour schemes.

http://thenextweb.com/dd/2011/12/30/9-places-to-get-inspiration-for-your-websites-color/ - Links to sites to help you get the perfect colour scheme for your project!

Whitespace and Brand Positioning

Thank you Hack Design for great articles!

Here’s an article by Mark Boulton on whitespace in design: 


“Designers use whitespace to create a feeling of sophistication and elegance for upscale brands. Coupled with a sensitive use of typography and photography, generous whitespace is seen all over luxury markets. Cosmetics, for example, use extensive whitespace in their marketing material to tell the reader that they are sophisticated, high quality, and generally expensive.”


(Picture from the article above!)

Not everything always works in your favor when you design for the screen. Interaction design is engineering: it’s not about finding the perfect design, it’s finding the best compromise.

I came across this interesting 37Signals article via HackDesign which shows popular web-pages with and without their text, in order to convince us that typography is a key component in a page’s design.

This got me wondering how other sites would look without their text. So I quickly built a browser extension that does just that: help you look at the various websites out there, with and without their text. 

I built the extension with CrossRider, a framework that allows me write extensions that work on most of the modern browsers like Chrome, Firefox, Safari and IE.

If you are on Chrome, you can get it from the Chrome-Web Store, otherwise please use the Cross-Rider installation page.

Take this exercise up yourself, look at the websites you use regularly, with and without their text; and let me know that inspires you in any way.

HackDesign Lesson 21: Designing your first iPhone app

From Web to Native:

  • Information hierarchies in iOS are almost always presented in a left-to-right order of descent.
  • When you “drill down,” you always load a lower level of detail from the right side of the screen; accordingly, moving up (or back) in an information structure always takes you to the left of your current view (modal views are a bit different).
  • My first (blissfully ignorant) set of wireframes at Future Workshops depicted an app in which you drilled alternately left, right or down depending on the path you were on. You can imagine how well this went over with the developers.
  • Transitional Interfaces: https://medium.com/design-ux/926eb80d64e3

Rest links are quite iOS centric while we aren’t currently focusing on iOS. Hence skipped the same for now.


HackDesign tiene una misión: enseñar diseño a los programadores (entre otros seres no-diseñadores). Pero antes es necesario entonces, explicar el valor del diseño ¿Para qué sirve y por qué es necesario?. Misión nada simple, eh?


Con clases semana a semana, en forma muy didáctica y entretenida, con recursos multimedia y mucho criterio, explican desde lo más general hasta lo más particular. Así, cualquiera puede aprender diseño sin moverse de la compu, sin necesidad de buscar en libros especializados.


Lo que también hace genial a HackDesign es que es colaborativo, y está formado por diferentes profesionales que aportan sobre su experiencia y expertise. La primera lección, consta de varios artículos curados por Wells Riley. quien también es el autor del artículo de introducción para demostrar el valor del diseño para StartUps.


Desde conceptos generales y algo de historia, hasta casos concretos de la actualidad y nociones fundamentales que hacen al buen diseño, además de hipervínculos útiles e interesantes. Además, como corresponde, el artículo en sí mismo es un ejemplo de buen diseño!:

Lesson 1: “StartUps, This is how design works”.

» http://hackdesign.org/link/startups-this-is-how-design-works/



La conclusión, luego de un análisis histórico y analítico (sí, sí, también incluyen números!) es: Si siempre se pensó que la dupla necesaria para iniciar una startup de tecnología era sólo alguien de negocios + un ingeniero… es necesario sumar un diseñador.


Resulta obvio que los desarrolladores muchas veces estamos más pendientes de lo que hay “detrás” que de lo que realmente se muestra al usuario, y éste es un problema serio que nos cuesta horrores corregir. Influye en el éxito de nuestras aplicaciones y nos relega a la condición de gente sin empatía ni gusto alguno.



Por eso, Hackdesign me ha parecido una iniciativa sencillamente genial. Aprende nociones básicas de diseño e interacción, de un modo sencillo y a tu propio ritmo.

Receive a design lesson in your inbox each week, hand crafted by a design pro. Learn at your own pace, and apply it to your real life work – no fake projects here.

Quizá, una de las características más destacables de la iniciativa es que los mentores no son gente del montón. Son gente que ha triunfado en este área y te brindan, de forma totalmente gratuita, sus conocimientos para que los aproveches en tus propios proyectos.

Las lecciones son enviadas por email y son accesibles también desde el navegador. Tan solo deja tu email y podrás empezar con los cursos.

Gracias a @adiazher por la información.


Jason Santa Maria - On Web Typography

Typography is an huge field. People devote years of their lives to this ancient craft, and yet there’s always something new to learn. In this article, I’ll be reviewing the major points that you should consider when selecting a typeface for a website. | Tags: Typography

more good links thanks to hack design.. and further proof that at the base of all design — is type.

Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students

Found from a HackDesign lesson: “This lovely short book by Ellen Lupton is such an insightful resource that talks about typography on print, and on screen. It’s not a new book, but it’s still one of my favorites.”

The site itself looks like a great resource for nearly everything type — might not even need the book!

Project [21 Oct, 2013 - 27 Oct 2013] - Coursera (Foundations of Virtual Instruction + Innovative companies)

Both of these courses are unable to sustain my interest.

From the coming week, the focus is on Wharton’s Marketing course on Coursera and Big Data in Education (dropped because it is just too high on jargon) along with continuing HackDesign.

HackDesign Lesson 20: Deciding What's Good - Design Principles
  • Good design happens when a good user experience meets a solid brand identity.
  • Great design happens when you define what good means specifically for your product, and then nail it.

1. Basic Visual Design Principles: http://webstyleguide.com/wsg3/7-page-design/4-visual-design-principles.html

The list of the basic visual design principles:

  • Proximity
  • Similarity
  • Continuity
  • Closure
  • Figure-ground relationships
  • Uniform connectedness
  • 1+1=3 effects

http://webstyleguide.com/index.html is a complete and thorough design book online. Inspiration for the web work as well as base for design learning.

2. 10 principles of Good Design - Dieter Rams

http://www.theatlantic.com/video/archive/2012/11/dieter-rams-reflects-on-his-principles-of-good-design/265223/ - The evergreen video + list of 10 principles by Rams

3. Design your own design principles - http://www.lukew.com/ff/entry.asp?854

4. http://scottberkun.com/essays/23-how-to-run-a-design-critique/ - Didn’t quite understand it, this time around. Maybe later.

5. http://www.uie.com/brainsparks/2012/05/16/from-critique-a-language-emerges/ - The concept of lickable makes sense and I am getting a better sense of design critique, but let’s see.

HackDesign Lesson 19: Achieving Visual Hierarchy

Whether you’re dealing with screen or print media, you have content—words and images—that needs to be organized into a layout. Visual hierarchy is the organization and prioritization of content as a means to communicate a message.

Designers need to make very intentional decisions when it comes to prioritizing content.

  • Where do you want your audience to look first?
  • What is the call-to-action that you need to draw attention to?

Hierarchy guides the user from one element to the next, ideally in a flow that corresponds to the content’s message. Also keep in mind that if you give visual importance or weight to too many elements, everything becomes flat.

It’s like saying you have ten ‘favorite’ flavors of ice cream. Elements should not have to compete for our attention. Let the content shine and and make sure graphic elements don’t distract.

1. On Visual Hierarchy

Explains Visual Hierarchy quite simply. By using color, contrast, texture, shape, position, orientation, and size, one can organize elements on a page so that users gets a sense of visual importance.

A common mistake that I have made often: If you make everything bold, nothing is bold.

A shortcut to feel the visual hierarchy of something that you’ve created - Blur out everything and just look at the hotspots i.e. areas where your eye automatically focuses on.

"When positioning elements on a page I like to work in gray tones first, like the screenshot above. You can do a lot with just contrast and sometimes colors get in the way early on. However, once you achieve a solid foundation on position and weight, color can take the visual importance even further."

"Nail down the purpose of each page element, and then dress it up." - True for webpages and apps alike.

2. Understanding Visual Heirarchy in Web Design

"At its core, design is all about visual communication."

Differences in scale suggest that one object is closer to us than another or that one is more dominant than the other; Variations in color might suggest that one object holds a unique personality that sets it apart from the other object. A lot of information can be delivered in just a single image by using some very rudimentary tools.

The proximity, scale, and similarity of the text formatting allows a reader to organize the lower example into titles and paragrahs. The hierarchy gives the titles more meaning than the other information, and makes it easier to scan.

The Hierarchists Toolbox

  • Size: Because size is one of the most powerful forms of organization, it’s important to correlate size with importance in a design.
  • Color: Color is an interesting tool because it can function as both an organizational tool as well as a personality tool. Bold, contrasting colors on a particular element of a website will demand attention (such as with buttons or error messages or hyperlinks). When used as a personality tool, color can extend beyond into more sophisticated types of hierarchy; Using lush, comforting colors can bring an emotional appeal to a page.
  • Contrast: Contrast shows relative important. Dramatic shifts in text-size or color will impart a message that something is different and requires attention. Changing from a light background color to a dark background color can quickly separate the core content of a page from the footer.
  • Alignment: Alignment creates order between elements. It can be as simple as the difference between a “content column” and a “sidebar column”, but alignment can also take on more complex hierarchical roles.
  • Repetition: Repetition assigns relative meaning to elements
  • Proximity: Proximity separates elements from each other and creates sub-hierarchies. Within a page there might be widgets that are separated from each other by space; within those widgets there is a new hierarchy of title, subtitle, and content. Proximity is also the quickest way to associate similar content.
  • Density and Whitespace: When a page is designed “just right”, the eye will easily recognize when elements are related and when they aren’t
  • Style and Texture

An Exercise to Test Visual Hierarchy

1. List the key information points that visitors are likely seeking.

2. Assign values (1-10) according to their importance to the average visitor.

3. Now, look at the actual design again.

4. Assign values (1-10) according to the actual visual importance as you see it in the live design.

5. Consider: Does the expected importance match up with the actual designed importance?

3. Hierarchy as Expressed Through Typography

Being able to interpret the connotations of different typefaces is valuable. For example, large, bold full-caps sans-serif typefaces are highly visible, but they are frequently used to warn of danger, and they dramatically increase the significance of certain words within the overall design.

Hierarchy based on type is usually shaped by relationships of visual texture and tone; that is, letterforms, words and lines of type come together to form different tonal values and varying characteristics of patterns or texture.

Position and orientation in a layout can have far less of an impact than depth of tone or typographic texture. A piece of type can be arresting wherever it is positioned, providing it has sufficient visual strength. If the information that follows is given lower tonal values, then a visual hierarchy will have been established, regardless of positioning.

The key to creating hierarchy is contrast, which can come from simple changes in weight, scale, positioning, color, tone or font. Although this might sound easy, it can be complex. For example, altering line spacing or inter-character spacing can certainly add character, but it could also increase or decrease the tone of the type.

A simple and very general starting point for creating contrast is to combine one serif font with a sans-serif partner. Fonts with multiple weights prove to be the most useful. Faces from the same family also sit well together. Pairing two serif or two sans-serif fonts together would not be impossible, but would be much more demanding and time-consuming to pull off.

Bright and vibrant colors tend to attract us, while softer paler colors can be used to subdue detail. Certain colors have different associations in different cultures. You’ll need to carefully select not only the hue, but also the tone of a color.

An excellent way to test prominence and priority created by combinations of color is to view a design in grayscale. Inevitably, if the background’s tone is dark, it will merge with darker shades and throw out lighter colors, and vice versa.

We might imagine that a small amount of type in a large amount of space is an ideal situation, but making the type, images and space work well together without seeming forced is rather hard. As with an odd number of columns, an asymmetric balance is likely more powerful, while a center-positioned design might appear static and less dynamic.

+Many more links

4. How Well Does Your Design Communicate?

Visual hierarchies create centers of interest on your page, communicate additional meaning through convention and repetition, highlight actions you want your visitors to take, and establish patterns of movement and flow.

Contrast shows relative importance. Without being told you know the larger text is more important than the smaller text. An h1 heading is bigger than an h2 heading is bigger than an h3 heading. Bigger grabs our attention first and so comes across as more important.

Repetition attaches meaning to new elements. Think blue underlined links. You’ve seen them before and the next time you see them you bring with you information about them. Repetition instantly communicates that elements are at the same level in the hierarchy.

Alignment creates order. It allows you to quickly connect elements across the page and helps define start and end points. Think grids.

A single element that breaks the established alignment calls attention to itself and it’s importance. Think of a pull quote. Visually it gives you clues it’s an important concept taken from within the text.

Proximity groups elements within a hierarchy and creates new sub hierarchies. Your home page has three offers for different products or services. Each might have a heading, a descriptive paragraph, an image, and a link to more information. The specific design elements would be on a different hierarchical level, but each offer (by containing the same 4 elements) connects the offers as being at the same hierarchical level.

Size – As you would expect larger elements carry more weight

Color – It’s not fully understood why, but some colors are perceived as weighing more than others. Red seems to be heaviest while yellow seems to be lightest.

Density – Packing more elements into a given space, gives more weight to that space

Value – A darker object will have more weight than a ligher object

Whitespace – Positive space weighs more than negative space or whitespace

V Imp for future - The 7 Components of Design

unity: http://www.vanseodesign.com/web-design/design-unity/

gestalt: http://www.vanseodesign.com/web-design/gestalt-principles-of-perception/

space: http://www.vanseodesign.com/web-design/whitespace/

dominance: http://www.vanseodesign.com/web-design/dominance/

hierarchy: http://www.vanseodesign.com/web-design/visual-hierarchy/

balance: http://www.vanseodesign.com/web-design/web-design-balance/

Color Part I: Color Theory: http://www.vanseodesign.com/web-design/color-theory/

Color Part II: How to Use Color: http://www.vanseodesign.com/web-design/color-meaning/

5. Contrast & Meaning

The vocabulary of artistry is found largely within the fundamentals of line, form, color, and texture.

For instance, angular lines and forms are generally indicative of strength, speed, and masculinity, while rounded lines and forms are generally associated with softness, slower tempo, and femininity.

Communicative grammar is generally defined by contrast, balance, harmony, and distribution. These are the building blocks of composition, and they help convey context and manipulate relationships among content elements.


6. Visual Hierarchy and Weight

Visual heirarchy sets the context.

Overall the sense of all these articles was to explain the concept of Visual Heirarchy and various factors helping to create a good heirarchy. Knowing this would help set the alleged “common sense of design”.

HackDesign - Lesson 15: Making the content flow: introducing responsive web design

http://alistapart.com/article/responsive-web-design -  The landmark article about Responsive Web Design - Have read it earlier too.

http://bradfrostweb.com/blog/web/responsive-nav-patterns/ - This article looks at various ways of responsively rendering navigation when going from full blown site to depicting on the small screen. There are some interesting approaches and all are discussed with their pros and cons.



The above two are awesome ways to create navigation. Even in native android, these might be interesting.


Design should not be based on tech.

Content & form are lovers and their love-child is Design.

Responsive Workflow:

1. Content inventory

2. Content reference Wireframes

3. Design in text (Structured content)

4. Linear Design

5. Breakpoint Graph

6. Design for various breakpoints

7. HTML design prototype

8. Present prototype screenshots

9. Present prototype after revision

10. Document for production

I quite understood the workflow, yet not quite. Maybe another read is required to grasp it completely.


Power of a styleguide and extending those to mobiles and beyond.


The issue with Hi-DPI web

Icon fonts is one of the suggested solutions

Many others