My personal website design depends on a number of factors, but the practical upshot of it is that it almost never has the same design twice, but it automatically harmonizes and still conveys useful information.
I’m not just a UX/Visual Designer, I’m also a fairly accomplished full stack developer. I don’t recall the version of PHP I started with, but my guess would be 3.0 back in about 1997. My personal website, http://cnordling.com/ is the recipient of a lot of my experiments.
For those lucky enough to see it a few years ago, it included an analog clock and a mini-google map. These items were updated whenever I moved around or traveled. Sadly COVID-19 has clipped my wings, so now the location is more aspirational.
Being homebound, however, does not mean leaving the website to rest, it means adding some other peculiar functionality, in this case – automated color schemes.
Color Schemes
Thanks to Tiger Color for these images.
Everyone knows the color wheel, right? All the colors arranged in a circle, usually with higher value colors inside, lower values outside. Those are handy for showing color schemes.
In code, colors are represented by a number of different numbering methods. Most used is RGB – Red, Green, Blue, which assigns a number 0-255 for the amount of Red, Green, and Blue mixed as additive colors. Very simple to understand, a big pain in the butt to adjust programmatically.
Automating Color Schemes
A better system for my purposes is the HSL or HSV system. H = Hue (angle on the color wheel), S = Saturation (how much color), and L = Level (how much white is mixed in). In the case of HSV, the V = Value, another word for Level.
The HSL system is easier because of that first gorgeous number, the H, or Hue Angle. If you have an HSL color with H= 0, that color will be some version of red. This is the cool part – if you wanna get a simple complementary color, you just add 180 to that. If it goes over 360°, then just subtract 360 to get back in the color wheel range.
function complement($degree){
$degree = $complement+180;
if($complement >= 360){
$complement = $complement-360;
}
return $complement;
}
Easy.
But what about Split Complementary colors?
Easy enough, just create an array and return two colors:
function getSplits($degree){
$splits = array();
$splits[0] = $degree+150;
$splits[1] = $degree+210;
for($i=0; $i<2; $i++){
if($splits[$i] > 360){
$splits[$i] = $splits[$i]-360;
}
}
return $splits;
}
So far so good – this will return you two Hue angles at split complementary degrees, and will give you a basic, though a bit clashy color scheme.
The problem is that if you’re going to use these colors for text in context with each other, you’ll get a serious case of Eye Jaggies* – that weird optical thing when your brain sees the color border as kind of flashing/moving.
Uncomfortable jaggies are fine for Pop Art, not cool when reading, so it is important to either turn the value UP against a dark color or turn it DOWN against a light color.
So, a quick adjustment to the function:
function getSplits($degree, $value){
$splits = array();
$splits[0] = array();
$splits[1] = array();
$splits[0][0]= $degree+150;
$splits[1][0] = $degree+210;
for($i=0; $i<2; $i++){
if($splits[$i][0] > 360){
$splits[$i][0] = $splits[$i]-360;
}
if($value > 50){
//if the value is over 50, make the split dark
$splits[$i][1] = "20%";
}else{
//if the value is 50 or below, make the split
// bright
$splits[$i][1] = "80%";
}
}
return $splits;
}
Here is the end result, a website that has the navigation color correspond to the temperature of the place pictured, and a text color scheme that is a split complement to that color:
Next step: Adding an array of cities/countries I want to visit, choosing one randomly, grabbing a random photo and then harmonizing the colors to that photo.
*Eye Jaggies is my term for a really interesting phenomenon caused by the fact that color vision is an evolutionary layer OVER grayscale vision. Your brain, miracle that it is, gets the data from your eyes and sends it to a number of processing centers to create a complete version of what it is seeing. One of those processors sees in grayscale (black and white) and is the primary source for the brain to interpret edges. If it is two different values (level of white) it is probably an edge between two things. If there is no significant difference in value, this part of your brain says it is continuous.
However, the brain later developed color vision, which also minimal edge detection, but that detection is based on HUE – the degree on the color wheel. If your color vision sees orange and blue next to each other, it declares there is an edge, therefore two different things.
Put those two together and your mind is told ‘edge’ / ‘no edge’ by two different sub-processors, and whatever part of the brain that decides which is right just throws its hands up – the end result of that is your mind sees edge/no-edge as your eyes move slightly.
UX UNbound 