Latest Entries
Downloading files in same window
Recently needed a solution to download files–PDF and JPG, without them opening in a new browser window. You can force files to download via .htaccess file if your on Apache, like this: (snippet via css-tricks.com)
AddType application/octet-stream .csv AddType application/octet-stream .xls AddType application/octet-stream .doc AddType application/octet-stream .avi AddType application/octet-stream .mpg AddType application/octet-stream .mov AddType application/octet-stream .pdf
I had to use a Window server—so solved by problem by using dropbox to store the files and intern force the file to download in the same browser window. A browser will typically open the image within the browser rather than download it to your desktop.
To force the browser to download the file and bypass dropbox’s preview page you simply replace www with dl in your URL and append with ?dl=1. For example:
https://dl.dropbox.com/s/xttkmuvu7hh72vu/MyFile.pdf?dl=1
More details in dropbox articles
Swiss Army Knife of Vector Scripting
Exploring the amazing paper.js and how well it sits on the HTML5 canvas and with Scriptographer (scripting environment for Adobe Illustrator)
Espresso equivalent code editor on PC
MacRabbit’s Espresso editor has been my favorite web editor on OS (prefer it over Coda though haven’t had a chance to test the latest version!).
Having recently moved onto Windows platfrom at work, I didn’t want to use somthing clunky like Dreamweaver, and struggled finding anything like Espresso or even TextWrangler on PC. Several friends work on Unix with Sublime Text 2 and as it also works on PC and Mac, so trialed it out.
Screenshot of Sublime Text 2
It’s a brilliant editor and by far the best I found for PC. If you decide to use it, be sure to check out Sublime Package Control and the plugin for zen coding
Font icons
Use of icons has become more prevalent with mobile and app design; alongside progressive disclosure and audience overlap (both in regards to age and language)
Creating icons successfully is very skillful (having variations for different sizes being a subtle in itself). Using them in projects and wanting to change colours normally means taking them (or the sprite) into an editor—fiddly at best.
But with icon fonts, we have no problems with http requests and you can change size/colour simply via the css. It also deals with the problem of supporting high density screens
The above example (with just font-size and color attributes changed) is using the Font Awesome, which makes application a breeze. No more images—even for social icons! (love the github icon—won me over)
There are great other resources out there—but looking forward to putting some time aside to create my own!
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>
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 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.
‘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
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.
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.
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.
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.
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.
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.
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
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!
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.
So let’s have two balls, and notice that they come closer to each other, or get further apart.
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?
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.
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)
“It was actually quite difficult to avoid Wim Crouwel’s work. In the 1960s the Netherlands was inundated with posters, catalogues, stamps designed by him, even the telephone book.”
— Karel Martens
Read bio at iconofgraphics.com
Check out the funky CrouwelClock released by The Design Museum