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.

Watch on holdontype.tumblr.com

Jason Santa Maria - On Web Typography

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.

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!

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.