Skip to main content

Posts

Showing posts with the label design

The color clock | experiment

Inspired by Hemanth H.M's color clock project , I created my own color clock . The idea behind the color clock is to represent time in a hexadecimal color value, that can then be used to dynamically color something, like the clock background. For example 21:01:14 can be broken apart to: 21 which can be converted to C4 in Hex 01 which can be converted to 35 in Hex 14 which can be converted to 5C in Hex Putting all three numbers together gets us the color #C4355C . It has been built with Javascript and uses some CSS3 features for the design (the color transition and the radial background).

Beautiful typography for the web

There are already many websites that have began using custom web fonts using @font-face to beautify their website. getfinch.com Bringing custom fonts to the web increases the range of possibilities for web designers, however it can also be a drawback, if the fonts aren't used carefully. Firstly, novice designer may try to use too many different typefaces on a single website, which can become distracting and disconnecting. It is important to realize when too much is too much. As a general rule, when designing a website I never use more than three fonts. Usually I select a font font the headlines and another for the content. If required I add a third font for lower level headlines, however I prefer to use different alternations of the same font. Secondly, by using too many custom fonts, the size of the website increases. Custom web fonts have the drawback of their size. Using three to five custom fonts on a website can increase its weight by about 0.5MB which is not negligib...

Changing selection color with CSS3

CSS3 is bringing many innovations to web design. One of these is the possibility of customizing the selection color of text, graphics and every other element of the markup. By default, on most browsers, the selection color is a blue and the color of text becomes white. It is now very easy to change this behavior and add a nice touch of color to your website. Changing the selection color can be achieved with the pseudo-element ::selection like this (a vendor prefix is still required for Firefox): ::selection {  background: rgb(131,209,222);       /* Webkit browres*/ color:#336; } ::-moz-selection { background: rgb(131,209,222);       /* Firefox */ color:#336; } This will change the default selection color to a greenish-blue and change the color of the text to a dark blue. The power of ::selection does not end there. It is of equal simplicity to define a different color for each element. In this example  the text of the first para...

Well thought heading design

Have you ever read a news article or a blog when you were in a hurry or very tired? Did it happen to you that you skipped words or read something completely different than the written text? These things happen to me quite often, as I lack the time to read carefully. Recently something similar occurred to me on the Google Apps for businesses  website. I was tired and I misread the title "More than two million businesses run Google Apps" as "More businesses than two million businesses run Google Apps".  Look at the screenshot and think about the flow of the words and how they impacted your reading. My eyes slipped from the first line to the second and then (the brain) corrected the mistake and returned to reading the first line, followed by the second, like like I am used to. Maybe textbooks would be easier to read if they weren't linear? The interesting part is that I quickly skipped to the second line, more precisely to the word "businesses"....