Color Schemes with Sass

Sass is awesome, no doubt. But one of the most interesting features in my opinion is the possibility of helping an user to choose its color scheme (just think of a customizable e-commerce web, whose users design their own website for selling their products). Usually, I’d recommend to visit websites such as Paletton (also known as Color Scheme Designer), a place where you can pick a color and combine it using different design criteria (adjacent and complimentary color, triad and tetrad) in order to get your color palette. But the customization through those websites can get tricky if you wish to use two colors, one main and one alternative. Continue reading

Clues to teach & learn Web Design

I began teaching Web Design two years ago at private and public universities of Argentina and it became my second passion (front-end being the first one ❤). Most of my students have no idea of web development until they go through the classroom doors, and it is up to me to give them the tools to build a functioning website in about four months. These are my clues to teach and learn web design (from the basics):

  1. (First things, first.) Never say something is obvious: It isn’t. Not for them! You may have years of experience but they have just walked through your door, the most important thing is not to scare them away, make them comfortable. Nope, not even you were born being Sir Tim Berner’s Lee.

    Back to the Future - Remember old days!

    Recap of the past

  2. A nice recap of the past: Why don’t you tell them how you began? Designing in frames? Tables? Flash? FrontPage?! (I designed my first webpage in Word, just sayin’) How crazy and cool it was to change the user’s cursor into a flaming arrow? Continue reading

Pivot/Anchor point in CSS

Pivot point

Pivot or Anchor point. Default in Adobe Illustrator.

Everytime we use CSS we create elements, these elements always have a hidden middle point. This is known as anchor point or pivot. It is a reference on how the element will rotate, scale and move around the screen. In most cases the anchor point is located either at the top left of the element or at its centre.
Along with CSS transform property a way of modifying the anchor point appeared. It is called “transform-origin”. This can be seen, for example, in a rotation:

Both examples activate the same transform properties on hover:

rotate(40deg) and scale(0.6)

but the difference is set when we apply the following to the second element:

transform-origin: 300px center;

Continue reading

On Contrast Ratio

Contrast Ratio

A good and bad contrast

Contrast ratio is the difference between the brightest whites and the blackest blacks of any display. High contrast ratios deliver whiter whites and blacker blacks and a greater degree of gray values in between. If the contrast ratio is low, even if the image is bright, your image will look washed out.

Contrast Ratio on web design is of major importance due to Web Accesibility. You may fin the specification of W3C over here. This Guideline has three Conformance Level for testings:

  • A (lowest), contrast ratio of
  • AA
  • AAA (highest)

Continue reading