Latest Entries

CSS for user interactions

Have been experiementing with javascript libraries to display graphs and data recently — but can’t beat simplicity — here’s an example with just a little CSS (click for iPad)

#holder { background: url(img/static-img.png) no-repeat left; }

a#chart {
  width:596px;
  height: 435px;
  background: url(img/move-img.png) no-repeat left;
  display: block;
  -webkit-transition: background-position 0.6s ease-out;

a#chart:hover { background-position-x: right;}

Latest tee illustrations

Sneak preview at my latest illustrations for nottobeworn. (Photo’s courtesy of Kate and full pics/tees coming soon)

Simple alternative for modernizr

Sometimes you just don’t require all the features that modernizr offers but still need versions prior IE 9 to render HTML5 tags correctly—came accros this very handy and concise alternative via Nico Hagenburger’s blog

<script>
  'article aside footer header nav section time'.replace(/w+/g,function(n){document.createElement(n)})
</script>

Keep flowing

bruce lee quote 1
bruce lee quote 1

[ source ]

When two become one — the ligature

It’s natural to have an epiphany noticing the ‘little secret that only a select few knew of — something hidden under the surface or so many bodies of text, but only found by those seeking out the detail. A little bit of cherished elegance is the ligature.’

David-Schwen-ligature
David Schwen visual of how ligatures are created

When used correctly ‘two letters are joined together to go from heinous to beautiful’. Other than some famous enduring applications of ligatures such as CNN logo they are often missed/overlooked in normal reading.

CNN LOGO
‘Simple, straight, & clean’ CNN logo, virtually unchanged for 30+years (designed in 1980, by the now deceased Anthony Guy Bost, on a shoestring budget)

I love the function of ligatures and in a strange way admire their modest, understated unification. That said it’s awesome we have fonts with so many glyphs dedicated to them, such as the splendid typeface Mrs Eaves Just Ligatures or the extensive glyphs in Esta Pro.

This post was intended to be about the most famously overlooked ligature, the ampersand — but hey, ligatures are all so alluring! To conclude, here’s a tumbler dedicated to ligatures

sample-ligatures

Responsive sites and fluent grids

From mobile browsers to netbooks and tablets, we are visiting sites from an increasing array of devices and browsers. Fluid grids, flexible images, and media queries can help deliver a consistent experience across screens.

responsive.png

Personally found designing responsive sites only to be productive when the content and structure supports it. Sometimes a separate mobile version just works better. Was a big fan of lessframework and looking forward to doing some experiments with Joni Korpi’s more recent framelessgrid. It’s not a framework and appears much simpler and more flexible to use in projects. I also like that it’s fixed-width rather than fluid.

responsive.png

Golden Grid System is another option with fluid-width CSS grid system for responsive web design.

The zoomable baseline grid is a super feature! It can be a pain ‘to change the font-size at certain screen widths, for example to make the text easier to read on huge monitors, or to make the text fit better onto narrow mobile screens. This can make the proportions of your layout feel off, especially if you’re using a baseline grid.’ Also with the elastic gutters, they stay in proportion to the content, rather than pulled and squeezed.

Kerning, the appreciation of empty space

Kerning makes all the difference in good logo or branding design. The delicate understating of spacing around/inside/between letters and with the overall flow of space allows the designer to be sensitive and create gravity or tone. When a word is isolated, it needs some extra care.

kerning


I’m a big fan of typographic logos and don’t believe in having a icon for the sake of it (it should have purpose). Hence often spent great care with this kerning, and always admire when it’s excuted well. To the spectator it will vary depending on their sensitivity. Like a professorial musician hears every pluck of his instrument and it’s subtle variances but to someone dull it’s just a pluck of an string, and everyone else somewhere in-between.

A great game online if anyone interested playing with abit of kerning check out this great online game type.method.ac

gif to breakdown information

This has to be one of the best uses of the animated gif I’ve come across! It works better than a video as both a summery and glancing overview. It’s inspired me to use the method for breakdown of some exercises.

imageimage
image
image

and here’s the source (nostruggle-noprogress) ‘Follow these 4 exercises as fast as you can 3 times through!’

Rhythmic skipping with paradiddles

These cold winter days have given me a repeating cold/flu which has literally taken the strength out of me. I’ve been unable to do any decent training with the kettlebell for weeks(my favorite exercise tool).

I have decided to focus on the skipping rope and it’s been great fun. The skipping rope was regular form of fitness in my teenage years (boxing) re-visiting it is very different now, and much more fun! I value how co-ordination and timing is maintained even during exhaustion; forcing good form, unlike running and other training (where you can unknowingly be sloppy, as there is no rope to give feedback).

I find skipping (like walking & jogging) naturally meditative. The sound of the rope and the fact you can close your eyes and hear the beat is awesome.

image

My rope, metromdome, feet (and frame drum)

By training with mixing in some paradiddles, I’m able to keep the timing interesting and hone into the beat. These patterns develop my timing in both footwork and application when I use my fingers playing the frame drum or with mallets with other instruments.

I use a digital metronome at about 140 bps for steady skipping and go up to 180 bps for sprints. This forces a steady consistent beat and allows me to play accents mentally and apply it to footwork as I choose (raise knee, jump or use my heel). I can still break out the the beat, but the difference is that I’m aware of it and can go back on it perfectly.

Skipping is becoming musical.

Single Paradiddle R L R R L R L L

Double Paradiddle R L R L R R L R L R L L

Triple Paradiddle R L R L R L R R L R L R L R L L

Great intro video on skipping (via YouTube)

may you have a boosted 2012

Best wishes for the start of 2012! Personally have no resolutions as such but have explored a number of things and more than anything see ‘the journey as the destination’

It all changes everyday and am appreciative and thankful in this crazy life — whilst rooting in that which stays the same no matter the date or definition.

image

It’s all just on and off surrounded by language of opposites and comparisons

screen printed posters

Am exultant how these one colour screen printed posters turned out. They were printed on 270 gsm acid free archival stock and look vibrant and hold depth in array of lighting conditions.

Inspired by the classic hare & tortoise which echos throughout so many moments in our lives!

Limited edition and avialable alonside the America apperal tri-blend tees via nottotbeworn.com

wtf-ntbw-poster.jpg
wtf-ntbw-poster.jpg

Costa & Starbucks caffeine content

Shocking difference between the caffeine content of the two brands! I have always found Costa a little more of a kick but didn’t know that it would be over triple!

espresso.jpg

looking at movement (ALAN WATTS)

Can we imagine one lonely body, the only ball in the universe in the midst of empty space?

Perhaps. But this ball would have no energy, no motion. In relation to what could it be said to be moving?
Things are said to move only when compared with others, that are relatively still, for motion is motion/stillness.

ball-moving

So let’s have two balls, and notice that they come closer to each other, or get further apart.

ball-moving

Sure, there is motion now, but which one is moving?
Ball one, ball two, or both? There is no way of deciding. All answers are equally right and wrong.

Now bring in a third ball. Balls one and two stay the same distance apart, but ball three approaches or retreats from them. Or does it? Balls one and two may be moving together, towards or away from three, or balls one and two may be approaching three as three approaches them, so that all are in motion. How are we to decide?

ball-moving

One answer is that because balls one and two stay together, they are a group and also constitute a majority. Their vote will therefore decide who is moving and who is not. But if three joins them it can lick ‘em, for if all three stay the same distance apart, the group as a whole cannot move. It will even be impossible for anyone to say to the other two, or any two to the other one, “Why do you keep following me (us) around?” For the group as a whole will have no point of reference to know whether it is moving or not.

Text from: On the Taboo Against Knowing Who You Are — ALAN WATTS

Choosing typeface for baby branding

Am working on some branding for a friend who photographs babies, thought I’d share some research on typeface choices. Her current logo was typographic but felt authoritative due to its strong square serifs and was just too harsh and cold for the audience. Though the babies won’t care about the typographic style—it still needs to communicate to adults in regards to their babies. Need something closer to her warm approach and lovely delicate photos.

Feel the typeface should somewhat eschew that pre-language of babies—they are full of life but fresh and open to the new unknown world they enter.

Have started by exploring typefaces with large x-heights; those that reflect softness and appear simple in construction. Perhaps having slight modulation in strokes, and apertures that feel expansive (opposed to the smaller entries produced by longer sharp edged serifs). Above are some current typefaces that I’m liking, which are working beautifully (colour choices will be those that adults associate with babies rather than those simple pure colours babies engage with).

I’m loving the slight contrast and the rounded yet canted terminals in Cronos (feel this resonates with the subtle bespoke touch in Lelde’s photography).

Glance at Wim Crouwel

Admire the way Wim Crouwel creates such suggestiveness and almost sound from his visuals — especially in his more emotional earlier work. His posters are typographic with drama but not cold and unaffectionate — rather they allow the viewers feelings to be incorporated and directly involved. That facitnaes me, as many artists work seems so distant and unemotional in comparison.

Wim-Crouwel

He designed his first poster in 1952. … Although his ideas were bauhaus-related, unlike many Crouwel was not a dogmatist. He was fascinated by the ideas about serial and mass production, as he stated “we need the machine since we have no time”. But he also believed “the machine cannot replace the precision of the human eye and human feeling”.* Crouwel’s work has always consisted of these two essential elements: the emotional aspect and the rational one. (source)

Wim Crouwel is still at work. He designed the 6-volume edition of Vincent Van Gogh – The Letters published in 2009. What a wonderful job he has made of it: open any one of those volumes at random and find yourself immediately at home. You can see who’s who, without wondering about which words are Van Gogh’s own, or indeed how to read not just forwards but backwards through his life too – by theme, by correspondent, or by following a sketch that turns into a drawing that turns into a painting. (source)

Following on from previous years successful posters by Milton Glaser (4), Supermundane (3), Si Scott (2) and Darren Scott did the first one, Truth asked design legend and Dutch superhero Wim Crouwel to design a number 5 for our 5th in the series of Birthday Posters. (source)

Wim-Crouwel

“It was actu­ally quite dif­fi­cult to avoid Wim Crouwel’s work. In the 1960s the Nether­lands was inun­dated with posters, cat­a­logues, stamps designed by him, even the tele­phone book.”
— Karel Martens

Read bio at iconofgraphics.com

Check out the funky CrouwelClock released by The Design Museum

Custom SVG error pages (for download)

To change default error pages, simply create your own html files — upload them to your server, and add the following to your .htaccess file: (source)

ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authreqd.html
ErrorDocument 403 /errors/forbid.html
ErrorDocument 404 /errors/notfound.html
ErrorDocument 500 /errors/serverr.html

You are welcome to use the ones I’ve created (links & image previews below). I’ve used SVG as background images as I wanted them to be scalable — you can replace with any image type you want. Note: that SVG is only supported by recent browsers.

Download zip — contains 5 html files and 5 svg files (all the code is simple and validates)

Check out the example page links: (re-size browser to see how sharp the svg re-sizes)

error-404.png

If using SVG (as in my example) you will need to make sure the remote server sends the appropriate MIME type so these lines may need to be added to .htaccess file: (source)

AddType image/svg+xml svg
AddType image/svg+xml svgz

Powerful, short, fat burning session

This really works—just one kettle needed, shouldnt take longer than 15 mins: Lose The Spare Tire With Just Two Exercises

fat to fit

Maintenance mode for wordpress (without plugin)

Sometimes you need to do some private alterations to your wordpress site and rather than installing a plugin or locking things down you can paste the below code snippet into your functions.php file. The site will now only show to admins. (Remove it when you are done)

function cwc_maintenance_mode() {
    if ( !current_user_can( 'edit_themes' ) || !is_user_logged_in() ) {
        wp_die('Maintenance, please come back soon.');
    }
}
add_action('get_header', 'cwc_maintenance_mode');

Thanks to Jean-Baptiste for this and other useful WordPress hacks

humanscale office chair

Sitting for several hours at a time and sometimes over fifteen hours in a day — a chair and good screen are two items I really value in my profession. I’ve tried a number of chairs from ergonomic to great looking designer ones. My favorite and most valued chair is the Liberty — it’s not just the chair, Humanscale are second to none in service. I have one of the original New York chairs (they are now made in Ireland).

image

I used to get back problems even with my old ergonomic chair but have been sound with my humanscale. I have had my kids spin on it and it’s great to raz from one side to the other of the room and super comfortable even with your feet on the desk. No need for loads of controls — it holds postion perfect lumbar support automatically due to the three-fold mesh.

Glance at Shigeo Fukuda

Shigeo Fukuda was the first Japanese designer to be inducted into the New York Art Directors Club Hall of Fame after his talent was noticed by Paul Rand

His work is incredibly inspiring and it may appear simple but creates emotion and intrest within me; the play on illusions seems to rock you to the other side and then intern allow you to find a fresh balance!

The below famous work (which was my first introduction to Shigeo Fukuda), is entitled Victory 1945:

no war“Much of his work was designed to make a social impact rather than a commercial one and he was a strong advocate for pacifism and environmentalism.”

Check his awesome sculpture out of clamps and the shadow that’s created with it:

“I believe that in design, 30 percent dignity, 20 percent beauty and 50 percent absurdity are necessary,” — Shigeo Fukuda

japanese-poster-today.png

View some more poster design and his book



Copyright Sundar Singh © 2011. All rights reserved.

RSS Feed.