The books commences with the old Mental Mathmagician standard of instantly calculating a multiple of 11.

For instance

34 x 11

Shermer and Benjamin’s method is to take the first digit of the first number (3) and add it to the second digit (4), then take the outcome (7) and set it between the first and second digit of the first number resulting in an answer of 347.

Things get a little more complicated (but not a lot) if the the first and second digit of the first number result in an number above 9. Take 78 x 11 for example, the outcome of 7 + 8 is 15 which by using our previous method would mean the answer to 78 x 11 is 7158, which is obviously wrong. To get the correct answer we simply select the 1 from 15 and add and add it to the first digit of 78 so it becomes 88. That done, we carry on as before by taking the remaining 5 and inserting it between 88 to give an answer of 858.

This little Maths hack is just the tip of the Iceberg. Shermer and Benjamin take you through a program which allows the computation of any Addition, Substraction, Multiplication, Division, Square Root or fraction mentally.

Have  a look at what else I’m reading by visiting Readernaut.

First I do some rough sketching in order to get a feel for the shape, size and features of the characters. This illustration will encompass the notion of multi-ethnicity and sense of community, which are some of Grow’s goals.

As you can see from the sketch below, I’m striving for a heavily stylised and quite abstract cartoon character. I believe this is inkeeping with Grow’s informal and fun attitude.

Stage Two: Mapping out and drawing in Illustrator

In stage I map out the basic shapes in illustrator. In order to keep the charcters as simple as possible, I tend to construct them out of either rectangles or circles. I then customise these shapes by adding or taking away points with the pen tool and reshaping the curves.

More shapes are built up until the basic look of the characters is complete. At this stage I may also add in some simplistic shading and highlighting.

Final Stage: Photoshop

As you can see the characters are quite flat and uninspiring when they come out of Illustrator. I like to use photoshop for colour correction and to add subtle light and shadow to give a sense of depth.

I accomplish this by using the ‘Magic Wand’ tool to select the large blocks of colour in turn. I then use the ‘Burn’ to add in the shadows in the relevant areas. I recommend you use this tool at a low exposure setting around 10 or 20, above this the shadows can start to look a bit harsh. It is best to build the shadows up in layers.

Here’s the final result.

Marking Up and Styling a HTML Email

A different approach has to be taken when coding a HTML email from coding a web side. You can forget all about semantic markup, and  all that fancy CSS shizzle is out to. When taking on an HTML email you have to code like it’s 1999.

It all stems from the sheer number of email clients we use, each with their own little quirks. CSS support can vary wildly among the different clients. It’s generally not a good idea to position structural elements with floats, Outlook the most widely use email client doesn’t like them. It’s a lot safer to go old skool and use HTML tables.

It’s not all bad news, most of the text formatting elements of the CSS2 spec is widely supported among clients.

When approaching a HTML email keep in mind it has to work without images. Most clients hide images by default until their explicitly told otherwise, it’s therefore not a good idea to put all your text in one massive image. Apart from risk  of the client opening a seemly empty email, the email may never reach the client, getting blocked by spam filters on it’s way in.

Legal Issues

To comply with the Can-Spam Act 2010 your email must contain an unsubscribe link, company email address, telephone number and a reference to when and how the customer signed up to the email. If your business email doesn’t contain these things it’s technically breaking the law.

Using Mailchimp

Mailchimp is great way to have all that legal jargon handled automatically so you can get on with the task of designing the emails. I’ve used it with Artsekta and other businesses in the past. Even the most computer illiterate individual can use Mailchimp. Mailchimp also has the bonus of automatically posting to Twitter and Facebook, saving your client time.

The analytics Mailchimp provides after each email has been sent can be really valuable.

Grow Template

Here’s a screenshot of my ‘Grow’ template, if you want to see the markup have a look here

The Home Page

About Us

Learn

The Gardens

Get Involved

News Page

Contact Us Page

The gantt chart was constructed by a great little application called Merlin

This first step took many iterations to get right, both on paper and in Illustrator. I found the most reliable way to draw the leaf was to take a circle shape and fashion it from that. I tried to stick with just four anchor points, any more that this and the leaf lost it’s simplicity and punch.

Step 2. Getting the Stem right

You’ll notice that I decided to shorten the leaf steam, this was because the illusion of the leaf tip curving under was spoiled by the stem going all the way to the top of the leaf. The shortened steam also works best when the image is minimized as it removed visual noise from the leaf tip.

At this juncture I also experimented with the gradient mesh to give the illusion of a three-dimensional shape.

Step 3. Yin and Yang

My intention at this stage was to work on the Yin and Yang theme I had explored earlier in the concept sketches. However, the more I played about with this idea the more I realised it wasn’t working as well as I’d hoped. The leaves appeared too disjointed.

Step 4. Concept Complete

It was at this stage I further explored an idea I’d had in my concept sketches; leaves forming a cycle. This cycle represents among other things, the changing of the season and sustainability. The circle it forms symbolises, the family circle i.e. the community, nurturing and inclusion. The image above shows a very early stage of this concept.

Step 5. Typeface Decision

I then started thinking of typefaces. After a long process of trial and error I discovered Slab-Serifs seemed to fit with the aesthetic I was looking for. I was torn between two in particular, Archer and Museo Slab. What eventually swayed it in favour of Archer was the little terminal on the tail of the ‘g’ and the arm of the ‘r’. To me it looks almost bud like and so is perfectly in-keeping with the logo theme. Because of Museo Slab’s inclusion in Typekit, I’m seeing it everywhere and beginning to tire of it.

The above image shows the planning of how the leaves may replace the O. This took quite a bit of tinkering with the leave sizes and the space between each leaf.

Step 6. Adding detail to the leaves

You’ll notice two things at this stage; I’ve taken the weight down of the typeface and I’ve added shadows to the leaves. I’m now using Archer Extra Light instead of Archer Light. I find that the balance between the leaves and the type is better this way.

Step 7. Removing Detail

I soon discovered legibility issues in the leaves at smaller sizes. Here I’ve simplified the leaves by removing the gradient and shadow. The colours have also be inverted so the stem stakes the higher contrasting colour.

Step 8. Testing in monotone

Here I tried a few tests in a monotone colour and tried to simplify the leaves even further. I got rid of the separate stem colour. With each leaf a solid colour it took the finesse out of the mark. I then hit upon the idea of using a knock out to imply where the stem intercepts the leaf.

Step 9. The final Product in brand colours

here’s the finished logo. I’ve refined the stem knockout so it sits a little better at smaller sizes.

On this page I have hit upon a couple of different themes you will see reoccurring throughout this series of sketches. The first is the leaf. The leaf in my opinion is the epitome of Grow. The particular leaf shape I have chosen to draw is reminiscent of  a heart, symbolising, love, compassion and respect. This page mostly focuses on getting the shape of the leaf just right.

On this page I’ve played with the idea of forming the letter ‘w’ into the shape of a leaf. You’ll notice the cursive style of the lettering, this is something I’m very interesting in pursuing as it represents, friendliness and informality.

Another concept I’ve been playing with is the idea of a circle being formed from leaves. This conjures ideas of the family circle, nurturing and inclusion.

In the top page you’ll see more evidence of the circular theme. Here it has evolved into the leaves forming a ‘Yin and Yang’ shape, this furthers the metaphor; each person in ‘Grow’ comes together to form the whole (community). I’ve also done a quick study of leaf veins.

Grow Community Gardens Mindmap

The purpose of this mindmap was to familiarise myself with Grow as an organisation. I’ve brainstormed words and phrases that I think help to describe the ethos of Grow.
I especially like “you don’t have to be Alan Tischmarsh”, punk ethics and get stuck in. These are ideas that I will pursue.

Growing…

Here I set myself the challenge of adding words after the word “growing”, that were in-keeping with the sentiments of Grow.

Organic Gardening

This mindmap was for solely to get me thinking of elements that I could use within the logo. I’m looking for something that is the epitome of Grow.

The talented Mr Shearer has put together a poll that highlights the proportion of students which will be submitting and those that won’t. At the time of writing, out of the total number of students that have taken part, approximately will not be submitting.

I just want to put down a few reasons why I don’t see this sort of  ‘spec work’ as a bad thing and why I’ll be submitting the finished product for client consideration. It may help those of you that are still on the fence.

‘Grow’ is a non-profit organisation.

A couple of years ago, I had a hand in founding, Glasgow PodcART a non-profit organisation set up to promote grass roots music. From that experience I know how difficult it is to secure funding for even day to day running. The fact is, many small non-profit organisations do not have budgets for extensive branding and web solutions. Many heavily rely upon donations and volunteers.

Would you be happy to donate to a charity if you found out they had used a substantial part of previous donations to pay a creative agency? I know I wouldn’t.

As designers I think it is our civic duty to use our talents for the ‘greater good’ from time to time. Think of your work as a donation.

It’s an Investment

In the current economic climate jobs for graduates in the design industry are few and far between. Often experience is worth a lot more than a first in a degree. Employers are looking for designers, this means they need to see not only how well you can communicate visually but how well you can work with a client.

It’s an open brief

From the first client meeting on Thursday it looks like we have a complete creative control over the branding and web solution. This clean slate gives us a great chance to showcase our talents, without the hassle of sticking to rigid ‘guidelines’. This is a very rare opportunity.

Competition is healthy

I’m a very competitive when it comes to things I enjoy doing. The fact we are all competing for consideration has made me think more deeply about my concepts. I’m being far more critical with concepts rejecting those outright that seem too obvious. I’m looking for something which is going to stand out against 80 other designer’s solutions. This so far has led to some great ideas.

I think it’s also important to remember that competition is a fact of life especially in the creative industry. We are hired and fired based on how well our work stands up against others.

Summing Up

In conclusion I just want to say that I’m against spec work but only up to a point. Each case has to be considered individually. If a multi-million dollar company issued a spec brief, it is unjust and wrong. For small not for profit organisations spec and pro bono work is the only option. It just matter of weighing up how much you believe in their cause.

We’ve been asked to provide branding and ultimately a website with a fully functioning backend. Here’s my notes from the lecture.

Arse hairs courtesy of Mr Tommy Palmer.

As I began to read I discovered the writer’s tone was just as fresh as the cover. Before the age of the personal computer, typography was the domain only of the print industry or particularly nerdy hobbyists. The finer details of the setting type was lost on the general public. Luckily times change and now everyone has the great privilege of making typographical decisions, for good or bad.

Garfield has written the first truly accessible and entertaining typography book. It can be read without having any previous knowledge in the field. It can be read without you having any interest in the subject. Most of all it can be read just for the sake of reading.

As all good typography books should, it explains the various lexicons within the industry. Garfield does a great a job of balancing the content, by giving the reader an entertaining crash course in letter anatomy without bogging them down with the more obscure terms and practices of the craft.

I’m a type enthusiast, but must admit, I’ve found a few of the most critically acclaimed typography texts, dry reading. The author is constantly changing pace and breaking up the narrative with anecdotes, tidbits and what he calls ‘Font Breaks’. Here he takes a specific font and looks at it’s history and design in greater depth. Gill Sans, Albertus and Futura, I found especially interesting. This book is suitable for those of the ‘internet generation’ who’s attention spans are short or steadily diminishing.

As you make your way through the book you’ll have your appetite whet as Garfield introduces you to eccentric and sometimes explicit lives of Typographers. Two words—Eric Gill.

You’ll get a firm grasp of how Typography has effected us in the past and how relevant it is modern society. How the simple act of exchanging one font for another can cause controversy in the case of IKEA and how a font can help win a campaign for Presidency.

To sum up, the typography nerd will take away little from this book, other than an entertaining read. For the typographic layman this book is a great entry point to the craft and in my opinion is up there with Lupton’s ‘Thinking with Type‘.

Dr George Van Den Bergh was a educator, astronomer and renowned problem solver. He felt the high price of books was having a detrimental effect on Student’s learning as they could not afford educational materials. Many had to share books or borrow dog-eared and incomplete texts from libraries.

As a typographic interloper he saw a problem in white-space. He reasoned that by eliminating white-space in the margins,  and setting the type right to the edges he could cram more onto a page decreasing the overall size of the book.

He then turned his attention to leading, he felt the space between lines was wasted as they were only occasionally used by type descenders. By setting the type in Uppercase (hoofdletters), descenders would no longer be an issue. The leading was gradually reduced to the point that it no longer existed.

While denouncing the centuries held belief that extensive copy should not be set in Uppercase for fear of illegibility, Van Den Bergh set about designing seven mockups. The results, not surprisingly, was even Van Den Bergh had to admit were underwhelming. His newspaper proofs were an illegible mess.

Not one to be easily deterred, it was back to the drawing board.

He eventually conceded that leading was a necessary evil and by doing so hit upon the genius idea of taking two columns and interspersing them in alternate lines to make one column. He would manufacture a mechanism that could cover the alternate lines of the first column when it was slid down it would reveal the second column while hiding the first column. It was christened Tweelingdruck.

He had the best of both worlds, the mechanism gave the illusion of leading while cramming the same amount of information onto the page as his previous idea had. Taking the idea further by he later introduced Meerlingdruk (Multi-line) proofs.

His ideas meet with a great deal of criticism, especially among Typographers. Setting type entirely in Uppercase to save vertical space did not sit well at all with the typographic elite. Furthermore they saw the ‘Reading Screen’ Mechanism as costly to manufacture and ineffective if not standardised, which in a free market was unlikely to happen.

From that point on, Van Den Bergh published his own texts in Meerlingdruk, it proved quite useful for multi-language books. Unfortunately it hard to find any examples beyond this.

Hoofdletters and Meerlingdruk was certainly inspired and innovative, it was a novel solution to the problems of post war Europe, but was left wanting because of Van Den Bergh’s typographic naivety.

Sources

I originally discovered this story at Eye Magazine. My article is largely based on that information

Demo

The Markup

I’ve tried to keep the markup as simple as possible. I don’t usually advocate cluttering up markup with non semantic elements, so this example should be seen as an exercise.

<h1 class="cssLogo">
	<span class="W">W</span>
	<span class="I">i</span>
	<span class="L">l</span>
	<span class="L">l</span>
</h1>

Styling

When designing our block letter forms we have to take in to consideration the restrictions of css. There is no way to define shapes using the technology, this is usually the domain of SVG or Canvas. As such, we can really only four sided shapes with 90 degree angles and with the use of border-radius, fake circular shapes.

CSS Content Property

We have four boxes created from the four span elements, how exactly do we turn these boxes into ‘W’, ‘I’, ‘L’, ‘L’? The answer is we can’t unless we have more elements to style. We could bloat our markup even further by adding more spans around each letter or we could make use of the CSS content property in conjunction with :before & :after pseudo-elements.

The ‘Content’ property can be used to generate text and images that doesn’t add any semantic value to the content. To be more succinct, it should be used to enhance look or interactivity of the element but is not needed to fully understand the ideas present within the copy.

Here’s the syntax

selectedElement:before{
	content: 'Generated content here';
}

Adding a :before or :after pseudo-element has the same effect as adding another element to the document. As such it can be styled as if it were a completely separate element.

When specifying the css content property we have the option of adding no content. We achieve this by using empty quotes

selectedElement:before{
	content: '';
	display: block;
	width:100px;
	height:100px;}

Using the above css we have generated an block level element with no content.

By using this method, one span element per letter becomes three span elements: the original span plus the :before and :after CSS generated pseudo-elements.

Constructing the Letters

This is the creative part. I essence you have to come up with a way to construct the letter forms out of three blocks. The blocks can be used in two ways:

• To construct the body of the letter i.e. you add the blocks together to make a whole
• Negative space – One block ‘cuts’ a piece out of another.

I’ve used both methods in my example.

Constructing the letter’s body

If we take the letter ‘L’ for example

span.L{
	width:96px;
	height:180px;
	margin-right: 104px;}
span.L:after{
	content:'';
	position: absolute;
	background-color: #E1491F;
	height:96px;
	width:84px;
	right:-84px;
	bottom:0px;}

The code is pretty straight forward. The vertical steam of the ‘L’ is defined using the original span, while the base is defined using the generated :after element. It’s positioned absolutely in relation to the original span.

The ‘i’ is achieved in much the same way.

Using Block level elements as negative space

For the ‘W’ I had to fake the angles rotating the two generated pseudo-elements and have them cut into the original span element.

span.W{
	width:300px;
	margin-right:10px;
	height:180px;}
span.W:before{
	content: '';
	position: absolute;
	background-color: #eee;
	width:96px;
	height:250px;
	-moz-transform:rotate(-20deg);
	-webkit-transform:rotate(-20deg);
	-o-transform:rotate(-20deg);
	transform:rotate(-20deg);
	left:-53px;
	top:0;}
span.W:after{
	content: '';
	position: absolute;
	background-color: #eee;
	width:96px;
	height:250px;
	-moz-transform:rotate(20deg);
	-webkit-transform:rotate(20deg);
	-o-transform:rotate(20deg);
	transform:rotate(20deg);
	right:-53px;
	top:0;}

The pseudo-element’s background-color will have to match the background-color of their parent container.

In Conclusion

So that’s how I did it. Granted the results aren’t exactly stunning but it does show what can be achieved with CSS and a bit of creative thinking. I hope this served if nothing else as an introduction to the content property and pseudo-elements.
I think I’m going to explore this even further by creating an entire alphabet.

Further Reading

W3C :before & :after Pseudo-Elements Spec

Multiple Borders using :before & :after Pseudo-Elements Tutorial

I hit the journals armed with the question, “how long does it take the average person to form a habit?” After a great deal of searching and reading things that went way above my head I found my answer.

Study – How are habits formed: Modelling habit formation in the real world

In a study by Lally et.al (2009) they took 96 volunteers and asked them to carry out an eating, drinking or physical behaviour at the same time each day for twelve weeks.  They completed a report each day and recorded whether they were successful in carrying out the behaviour. The report also asked the volunteers if the behaviour required any will power or if they started doing it without thinking.

The results showed that the time it took for a behaviour to become habitual differed depending on the behaviour being carried out. Drinking a glass of water every morning is an easier habit to form than going for a run. Results were conclusive enough to say that on average a habit takes 66 days to form, but in reality could be ranged anywhere between 18 – 256 days.

It was also found that consistency in carrying out the behaviour during the first two weeks meant the habit would form more quickly. After the first two weeks breaks in carrying out the activity would not adversely effect habit forming.

What this means for ‘Catch the Worm’

At first I was tempted to interpret this study by setting the ‘Catch the Worm’ plan at 66 days. When I considered it further I realised that the time the ‘Worm Catcher’ is rising at will very slightly each morning (by getting earlier). I have therefore decided to increase the plan by a week so it lasts for 73 days in total. The last 14 days will be set at the users target time and will act as a stabilisation period so they become used with rising at the same time each morning.

Monday

Monday night started out at the Art College with Jessica Hische’s ‘Daily Drop Cap’ exhibition. Here she had assembled a selection of beautifully hand-printed drop-caps from her ongoing side project.

The Standardista’s were also at hand with their “Inspired Interfaces” Exhibition. Chris and Nik had interpreted the work of renowned Product Designer, Dieter Rams, using HTML5 and CSS3. Their work really highlighted the power of CSS3, not just for layout, but creating complex shapes from scratch.

Tuesday

‘An Evening with Jessica Hische’ turned out to be one of the most inspiring talks I’ve ever been to. Jessica shared with us her journey in building a career in design. Her passion for lettering and illustration really showed. Her enthusiasm is contagious and has led to a more productive me, post Build.

It was then time for the Standardista’s ‘Open Book Exam, which saw an evening of some really geeky questions and lots of Beer guzzling.

Wednesday

I start the day of the conference a little hungover. It soon disappears and turns into a caffeine and sugar high, thanks to copious amounts of coffee and pick & mix for breakfast. Our coffee drinking habits were closely monitored by volunteers wielding remotes, who added noted each cup drank that day. The results were displayed in real time on a beautiful ‘Caffeine Monitor’ Infographic.

Keegan Jones and Tim Van Damme were first up. They explained the process of taking the successful Gowalla web app and designing it for a range of mobile devices. They highlighted the fact that only core content should be shown, on a mobile app, giving flickr as an example.

Next up was Tim Brown from Typekit with his talk on ‘Perfect Typography’. He gave a brief history of type and how Typography plays a very important role on the web. He also unveiled his Modular Scale Web tool which uses divine proportion to calculates a series of numbers to use to construct your website, based on the initial font size. I’m very excited about using this in an upcoming project.

Frank Chimero gave a very insightful talk about how we should not only strive to give a client the solution they need but something they love.

The start of Liz Danzico’s talk, ‘Power of the Pause’ left me a little unnerved as she proceeded to play the theme from Jaws. Her talk however had a big impact on me. She talked of how we should embrace pauses. You don’t always have to fill up time. I was particularly enamored with her idea of a reading holiday. It’s something I’m planning for the end of semester two.

Owl Enthusiast, Meagan Fisher took us through her workflow from start to finish when designing a website for a client. I love her idea of writing a brief for the project straight away even if it’s your own project.

Finally, it was the main event, Dan Cederholm. His talk was on ‘Hand crafted CSS’, promoting his fourth coming book, published by A Book Apart. As I expected from Dan his talk was choc full of useful practical tips, it was a frenzy of note taking.

A big thank you to all the speakers and to Andy McMillan for organising another great conference.

To get to know Albertus a little better I decided to carry out a few experiments.

I especially love out the word ‘Ezra’ looks. The spacing between the E and Z looks amazing. The terminals on the E look almost magnetic, pulling in the Z.

My article on Bethold Wolpe should be ready this week, watch out for it.

The few times I have managed to get up around 6am have been the most productive days of my life. It seems when you manage to get up earlier it has the effect of adding a couple of extra hours in the day. Those first few hours before the working day officially starts can be used for numerous things, reading, writing, running, working out for example.

This is the basis of my Major Project, ‘Catch the Worm.’ It’s an web application that will address the problem of getting your body clock back on track. Setting you back in the habit of getting up early in the morning consistently and hopefully without too much of a struggle.

How it works

When you sign up to ‘Catch the Worm’ the first thing you are asked to do is state your average rising time if you didn’t have to get up with anything in particular. You then give the time you would ideally like to rise at each morning. Catch the Worm forms a plan that lasts a period of ninety days. Ninety days is just not an arbitrary number, it has been proven that doing something consistently for ninety days helps to fully ingrain a habit. For each day of the plan you have to rise a little earlier.

What is special about Catch the Worm is it provides not only the plan but the motivation to stick to the plan how it does this is by using ‘Game Dynamics‘

The Game Dynamics

Game Dynamics is a User Experience technique which is currently quite popular. A great example of an applicaition that utilises it is ‘Epic Win‘, a to-do list in the guise of a RPG. In Epic win you play the part of an avatar that you have to level up. You do this by completing the tasks on your to do list. This makes the user experience much more immersive than a simple to-do list app.

Catch the Worm aims to implement something similar.

You play the part of a ‘Worm Catcher’. Worm Catchers unsurprisingly specialise in tracking and catching worms. One caught they sell them to grateful anglers. You have to sign into ‘Catch the Worm’ on or before your allotted rising time.

Not all worms are created equal, some are rarer and therefore more valuable than others. The earlier the user rises, the higher the chance of capturing a rare worm and the more profit he makes. If the user consistently rises early his skill as a Worm Catcher increases, unlocking even rarer worms. On the other hand rising late means a small chance of catching a rare worm and a small profit. Rise unacceptably late and the worms will take their revenge by auto-posting (known as poopin’) to your Twitter or Facebook account, casting aspersions on the users prowess as a Worm Catcher. They will then be subject to a fine for damaging the reputation of Worm Catchers everywhere.

The triumph of catching a rare worm can be shared through Twitter and Facebook. The progress of the user’s friends is shown through a ranking system, based on how much they’ve earned.

Demo

How do I use it?

Hypenator.js couldn’t be any easier to use. You have two options

• Use the library as is
• Or roll your own by using the handy merge and pack tool.

By using the latter you can avail of one minified file containing your chosen language(s).

After you’ve downloaded the script, add it your doucument header and initialise it by using

hyphenator.run();

It’s then just a case of adding the hyphenate class to elements to hypenate and thedonthyphenate class to elements you don’t want to hyphenate.

Last week’s talk by Rumble Labs at Refresh put it in perspective. It’s not the end for Cronify, I’ll be working on it in my spare time. This means I have to find myself a new major project idea. Fast.

Onotate is a web app devoted to presenting design concepts to a client, allowing them to annotate and approve them. While there are various web apps that take in the same ground as Onotate, Rumble Labs felt they all had substantial shortcomings and decided to design their own. What started off as a side-project quickly turned into a full time occupation.

Onotate is Rumble Labs first web app. Previously their bread and butter came from client led web design. They now have got a taste for Web App development and plan to pursue it further in future.

Their problems began when they decided to use Drupal as basis for the backend of the app, presuming that it would cut development time. This turned out not to be the case. To get Drupal to do what they wanted a lot of hacking had to take place. This led to poorly optimised code which was fraught with bugs.

The inadequacies of Drupal they were forced Rumble Labs to start from scratch. Once they utilised the Yii fremework, development sped up. The problem was they had to take on more client work to help sustain development of their web app. The result is it has taken them seven months longer than they had previously anticipated.

Onotate is currently in invite only Beta stage. They hope to properly launch some point next month.

I feel a little overwhelmed these days by the number of social networking websites I’m part of. I update eight of the them regularly, the most important of which are, Twitter, Last.fm, readernaut and facebook. We invest a lot of our valuable time in social media. The problem is most Social Media focuses on the present; ‘what are you doing now? ‘ Cronify aims to answer the question, ‘what was I doing?’

Take Twitter for instance, a tweet only has value for as long as it’s in the present timeline. After that it’s lost and serves no further purpose. In Facebook, wall updates soon become buried, for the a heavy user finding out what they were doing this time last year is no easy task.

Each day Cronify will pull in feeds from your selected social media applications and format them in a easily read journal format. The main interface will be a time line which you can navigate to find a specific day.

One of the most exciting things about Cronify is that you’ll have the ability to look for trends in your daily habits, by searching keywords and identifying what range of dates they occur most. For instance, search a band’s name and Cronify will highlight the days you listened to them (last.fm), went to their gigs (Gowalla, Ten Square) or sent them a message (Twitter or Facebook).

As it updates itself, it can be left to do it’s thing until you need it. It’s not just another Social Media media web app, it requires little investment of your time.

The longer you use Cronify, the more valuable it becomes.

In the early stages my time was focused on finding the perfect typeface, font-size, leading and column width for the job. I began using Helvetica/Arial with the intention of finding something similar but more typographically interesting at a later stage.

I started with the main body text, the font-size and leading were set at 14/21px respectively as I’ve find this to be the most readable. The column width was constructed to house 10-12 words per line at this size. The rest of the page was built up around the body content using a strict 21px baseline.

On some blogs I find my attention drawn towards clutter in sidebars. It’s one of my pet hates. When you commit to reading an article you should not be expected to fight unrelated visual distractions around it. In order to fix the readers attention on the article I faded the colour and lowered the text-size of all areas surrounding it including the header, navigation and sidebar.

I was aware that in stripping down my design I ran the risk of it looking quite dull. To combat this I had to find a typeface with greater variations in weight and with more character than Helvetica. Typekit to the rescue.

My Experiences with Typekit

This was my first time using TypeKit and to say I was taken back by the volume of typefaces offered would be a vast understatement. Four hours later I still hadn’t come up with anything concrete. This is nothing new for me. In print I’ve spent hours swapping typefaces about, experimenting with how each affects the character of the page. I think the problem is compounded on the web, not only do we have a vast selection of typefaces to choose from thanks to @font-face, but many of these fonts weren’t designed for the screen and thus unsuitable for body copy situations. It takes quite a bit of trail and error to sort the wheat from the chaff.

Thanks to Ministry of Type

A couple of days later I visited Ministry of Type, and there it was, FF Dagny Web Pro. You could say my blog is heavily inspired by Aegir Hallmundur’s font choice. It was a bit of a revelation when I refreshed the page after adding Dagny to the front of the font-stack replacing Helvetica. The composition suddenly felt lighter probably thanks to Dagny’s smaller x-height.

Dagny comes in four different weights: extra-light, regular, bold and black, this gave me an opportunity to increase the amount of typograhic colour on the page. In the end I used three weights, opting to leave out ‘extra-light’ which didn’t render very well at font-sizes below 16px.

For the main article header I used Dagny Black. By bumping up the font-size and transforming all letters to uppercase it added a editorial flavour to the design.

Powered by WordPress

The design of the blog had taken longer than I’d anticipated so by the time it came to considering which CMS to use I was really up against it. I had hoped to roll my own simple CMS, but this would take a week or more to develop, a week I didn’t have. In the end I settled on WordPress. Having used WordPress on a few other projects, the theming of the blog was quite rapid.

A Work In Progress

So that’s my blog. It’s quite simple, but deliberately so. I have a fixation with tweaking and redecorating so the design needed to be flexible. I want the blog’s look to evolve over time, so it stays fresh.

Many have been hailing @media queries as the answer to adaptive design, but as the guys at Yiibu point out in their Rethinking the mobile web presentation this can be very unreliable. They point out that by relying on @media we may as well slap a, “best viewed with Webkit” sticker on our website. We made that mistake of designing for one browser ten years ago, we should be careful not to replicate this disaster when designing with mobile devices in mind.

The Answer – Design Mobile first
Coined by Luke Wroblewski, Mobile first is the answer to our responsive design woes. The idea is simple, build a mobile version first. This can be seen as a form of Progressive Enhancemnet with which we have started with our oldest browser and then added the bells and whistles of CSS3 for those newer browsers that support it. Start with designing for a 320 by 480 pixel screen for those devices that don’t support @media queries, then add media queries to style mobile and desktop devices that support it.
Interestingly Wroblewski takes this idea further by encouraging us to design Mobile first even if you’ve no plans on releasing it. When moving from desktop to mobile we loose up to 80% of canvas space. This means that content has to be focused,

when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today’s desktop-accessed Web sites. That’s good user experience and good for business.

In a recent post entitled “Responsive Enhancement“, Jeremy Keith responds to the problem of how the grid fits in to this new way of working by saying, “Instead of thinking in terms of pixel perfection, we should be thinking of proportion perfection.”

Responsive Enhancement has pretty much turns the traditional approach on it’s head. I’m looking forward to seeing how other designers change their workflow to incorporate it over the the coming months.

Alli Magee aka Steen Ink

A local creative specialising in crafts, talked of how curiosity informs her own predominately textile based work, which by the way is stunning, be sure to take a look.
One thing she spoke of really resonated with me, how as children our curiosity is at a peak. I sat nodding as I related to her story of childhood – hanging upside down off the side of the bed, just because everything looked so new and different. It prompted an influx of my own early memories, days after I’m still thinking about it.

Unfortunately as an adult my perspective on life is firmly fixed. Between the age of four and twenty-four I feel my imagination has steadily declined. How great it would be to capture and use the innocent curiosity we once had as children.

Paul Kelly

Paul Kelly a local graphic designer, left me with a frog in my throat with his last two slides. The first showed a piece of bigoted paramilitary graffiti sprayed to a parish wall, an all too familiar sight in Northern Ireland. The second showed the results of the quick witted clergyman as the three letters of ‘UVF’ are transformed into the word ‘LOVE.’

Mike Flemming

The final and probably the most entertaining speaker. While everyone else took the attitude that curiosity was a positive thing to be commended and indulged in by creatives Mike turned it on it’s head, echoing the archaic proverb, “curiosity killed the cat.” Mike’s multi-talent as a copy-writer, designer and creative thinker really shone through.

Many thanks

Many thanks to all the speakers and organisers for a great night. I’m looking forward to the next one.

These ideas took roughly an hour from conception to implementation and were carried out without any insight to GAP’s brand. They should be seen as a fun exercise rather than a serious contender for GAP’s now apparent crowdsourcing project.

TBC

A interactive media archive devoted to your family. Sign up and allow family members to upload photos, videos and write short anecdotes. The project would be based on the family tree. Document the history of great-grandparents. Each member of the family would have their own page with media arranged in a sequential order. This is your life — but for families.

Pros

• I think threes a gap in the market for this sort of thing, social networking has been traditionally marketed at friends rather thank families.
• A great opportunity to use new front-end technologies like Canvas to arrange and provide interactivity to visual media.
• Nostalgia has the potential to attract older generations which have been slow to get to grips with social networking.

Cons

• Relies heavily on Server-side technologies.

The Piggy bank

A website devoted to teaching Primary School children the value of money and encourage them to save. They declare a savings goal, and log any money they get from parents and for doing household chores. The end goal is divided into milestones, at each milestone they receive a ‘badge of honour’ (and possibly a physical sticker version.) They can connect with their friends to see what they are saving for adding a competitive edge.

Pros

• Strong moral and educational theme – Teaches children the virtue of hard-work, organisation and patience.
• Opportunity for a illustration orientated website, which I have enjoyed designing in the pst.
• Can showcase raphael.js or canvas for animations and simple info-graphics.

Cons

• Requires a lot of research into Child protection laws to ensure child safety while using the website.

Give It Up – Take it Up

A self improvement tool based on the idea you give one habit up and gain another (preferably a good one) at the same time. Track your progress over 66 days (research has shown that this is the optimal timescale for habit formation.)

Pros

• Opportunity to integrate existing social networks API’s
• HTML5 Info-graphics

Cons

• Subject matter is a little dry, needs more development and research.

In short the <q> element may be used only for short inline quotations which don’t require paragraph breaks. The <blockquote> element on the other hand is used for extended block level quotes.

The <q> element in practise

<!-- Example 1 -->
<p>In the words of Milton Glaser, <q>Wit is Insight</q>
as opposed to Aristotle who ventured <q>Wit is educated insolence.</q>
I'm still not sure with whom I agree more.</p>

This simple example shows two inline quotes. Note, that typographers quotes have not been manually added. According to HTML5 Working Draft, these should be added by CSS. More on this later.
Check Back soon – to be continued