Principles of Design #5 - Unity, Getting all to work together

Bit of a gap in the series, a 25 mile walk in the Mournes and a couple of projects at work got in the way.. Anyway on with the series - Unity, what is it?

Well that is a hard-ish concept as it sort of suggest that "What works ... works". However it is something that all devs should think about as most of aspire to create things that work and have an identity. Alternately we may work in a company that has a well defined corporate identity framework with in which we create our applications and whilst we work within this framework we may want to add to or improve the framework with our own ideas.

Other frameworks may be very well defined like IBMN's OneUI that we all know and some of us love. I have to add that I am not that keen on it but it does tick a lot of the "design" checkboxes  it is just a bit ... mmmm.... soulless unless you breath some of yourself into it.

Consistency

So in broad terms unity is an umbrella principle for visual design, meaning all aspects of "The Language of Design" that I have talked about so far (and in those to come) contribute to the visual unity of an image. Consistency among parts that contribute to the whole is a hallmark of a unified design. Such parts include color schemes, typography, semantic hierarchy etc. When all of these parts are in sync, the end result is a unified design. However, if one of the parts is inconsistent or improperly applied, unity suffers and the image or site or app often appears disjointed. A common problem that makes a good web site look thrown together.

The site above whilst at first glance looks OK suffers from a lack of consistency, the images do not compliment each other and distract from the design The navigation is confusing and not centred, the colours do not complement each other and the page has no focus which leads nicely into ...

Relationships 

Unity is the relationship among the elements of a visual that helps all the elements function together. Unity gives a sense of oneness to a page as a seen by the user as a single visual. In other words, the words and the images work together to create meaning. So basically don't use a picture of a dog when you are talking about cats or as in the example above have way way way to many unconnected images.

Colour Schemes

I will be talking in a separate post about colour however keeping colour consistent across all the pages or parts of your app.This is where frameworks like OneUI or Twitter Bootstrap come into their own and will help the designer from the get go.

By whatever method you should try to achieve a design that should consistently use a stable color scheme that appeals to viewers. For example, if a Web site consists of multiple pages and the font color for hyperlinks is blue on the first Web page, then hyperlinks should be blue on subsequent Web pages. Also, background colors should be used consistently and should enhance readability preferably by relying on a template or some type of CSS to ensure that page loads are cohesive.

Proximity

The simplest method of making objects or elements on a page appear to belong together is to group them closely together. We humans LOVE patterns and developing a pattern in your design or images will create unity in your design.

Similarity

Things that are the same shape, size, colour or orientation allows the viewer to associate them with each other and visually bind them together.

Repetition

Another method often used to promote unity is the use of repetition. Repetition of color, shape, texture or object can be used to tie a design together. 

Continuity

A much more subtle method of unifying a design involves a trick borrowed from the art community. The continuation of a line, an edge or direction from one area to another. Continuation is often used in books and magazines to tie the elements of a page together with the use of ruled column dividers and by lining up edges of text  headlines and graphics.

Take the picture above the artist has used the continuity of the road to unite the fore-ground with the back ground. The left to right stroked in fore-ground unite the left and right of the picture.

This continuity allows the viewer to start at the front of the picture and work to the back without interruption. The continuity of the stokes allows the view to recognise a pattern that consolidates the idea that we are looking at a "worked" field.

Closure
When you have a group of elements in a design it is important they they are "closed" . By that I mean that the group should be a recognised shape itself and the closure can be achieved with either a boundary line or by whitespace. Have a look at the example below at the 3 panels at the bottom each panel has an image with text below surrounded by white space. This is a "closed" group. Also looking at the 6 panels as a single group bounded by the grey side bars can also be considered as "Closed"

Conclusion

Consider the site above it shows all the elements of unity as a whole - the overall T pattern is easy for the user to identify with. The images work well together the fonts work well and the colour scheme works. This unity allows the elements of the site to be more than the sum of their parts and bind the site into a single pleasant visual experience.

This is what we as design-centric developers need to strive for design not only each element well but ensure that each element works well with every other element on the page.

That brings the principals bit of this series to an end. I hope you found it useful and in the next series of posts I will be talking about how we can leverage these fundamental ideas together with with your current skill sets in the development cycle to both develop and design apps and web sites.

First up is colour in the next post.

IT Sales Cold Calls - The bane of my life :(

Right - people who follow my tweets will already know that my patience with cold callers has worn perilously thin of late. Particularly with Oracle salespeople although SalesForce, HP and Macafee are not that far behind.

I am paid to do a job and I do that job reasonably well given the fact there there are only so many hours in the day that I can work in. What I am NOT paid to do is to engage with cold callers trying to engage me in a conversation that adds not a shred of productivity to my day, dozens of times a week. This week I have taken 14 of these deeply irritating calls and quite frankly enough is enough!

For the record :-

1. Were you even mildly interested in me as a person rather than as a revenue stream you would have asked someone how to pronounce my name, calling me Mr [long pause] Ma Dough Mag and when I correct it if you continue to get it wrong I WILL hang up.

2. Were I interested in your offering I will contact you until then LEAVE ME ALONE!

3. If I am on a list that says I am interested and you are from Oracle , Salesforce, HP or Macafee the list is wrong and I will  have asked many times to be taken off the list. People like yourself  haven' bothered so pardon me if I don't give a damn about professional courtesy if you or a colleague ring me the next fecking day with the same content.

4.  I really really really do not care a monkey's chuff if Gartner thinks the sun shines out of your collective orifices. Neither do I care a scintilla that product X will save the universe from heat death  or the effects of the antisocial cultural hegemony of Facebook. If you send me "White Papers" and I haven't explicitly asked for them then  I will figuratively wipe my arse with them, flush them into the toilet of my contempt and have them safely de-odourised by the toilet duck of derision.

6. Offering to come and meet me in person because you will "be in the area" does not in any way suddenly make me interested in your product. The fact I have said "I am not interested" does not in any way allow you to infer than me being able to smell your aftershave and marvel at the sartorial elegance of your suit is going to change my mind.

7. Implying that whatever competitor's product I am using is crap, worthless or might cause impotence does not endear your product in any shape or form (Unless it is Internet Explorer which of course does cause Impotence and that is the reason I do not use it) If I ever want someone to insult the tools I use every day I will be sure to put you at the top of my list.

8. I know "times are hard" and you are "just doing your job" but you do have to remember you are interrupting me at work. You are directly responsible for a hiatus in whatever it is I am doing, that hiatus better be something I AM interested in or you WILL suffer the thin sharp edge of my wrath.

9. If you come across me on your call list for the day - consider me "hostile and dangerous" you have been warned!!!!






That is all.

Design Principles #4 - Use Emphasis to make your point

So in our wander through the skills and ideas useful for devs that do not have design team handy when they are designing apps and sites we arrive at emphasis.

"OK", I hear you cry, "I know all about the [em],[i] and [b] tags."

But emphasis is more so much more that typographical!

Emphasis is what gives you design a focal point and by that I mean that the element that is most important stands out in your design. For this reason emphasis is sometimes called dominance, but I don't want to get all "50 DIVs of Grey" here so I will stick with Emphasis for now.

In the web site above is a classical example of emphasis used to great effect. The rays of light slanting down from top left to the centre and the well lit center image and dark surround create the emphasis and drag the eye to the most important thing on the page. Rembrandt used exactly the same lighting technique all the time... the emphasis is on the lit characters and you find yourself looking at them first and paying more attention to them as a result.

Focal points are very important. In an earlier piece I mentioned the Web Page "Sweet Spot" which was roughly here.

However you do not have to place the focal point here, you can by using emphasis move the focal point to wherever you want on the page.

One of the biggest mistakes I see in design it when the dev tries to make everything in the design stand out or more commonly nothing has emphasis at all. The problem with that is the app will appear busy if too much emphasis is used, and boring and unappealing if not enough is used.

Instead I would recommend using a semantic flow to your HTML markup, a task now made all the easier with the HTML 5 which has changed and will continue to develop towards a semantic rather than presentational markup. Using this new semantic markup as a starting point the developer can arrange the elements of the app or page into a hierarchy.

So your Web page/app will have a hierarchy and all you need to do is put the emphasis on the correct elements so that your design leads the user on a journey you want them to take and hopefully that will be in IBMish an "exceptional experience" ;-) So how do I do it this emphasis thingie

White Space
Remember Emphasis is important but of equal importance is what you de-emphasise!
What I mean by that is the more an element is surrounded by white space or is isolated from other elements, the more weight and, thus, importance it takes on.

In the example above note the "Part of the story" unlike the rest of the page which is space-free this text is emphasised by the the fact it has white-space around it. It jumps from the page and screams "READ ME FIRST" to the viewer.

Contrast
Emphasis can also be leveraged using contrast.

Contrast is about differences: light against dark, small next to large, a portrait-oriented photo next to several landscape-oriented photos. See the contrasts and subsequent focal point on “Love that Summer Feeling” above. The focal point is a rectangle alongside many squares; it is the largest shape on the page; and it also is colorful against a black-and-white backdrop.  This is Contrast pure and simple.

Establish and then break a pattern

In the last post I talked about Rhythm and patterns you can emphasise an element on your design by placing an element at odds with the established pattern on the site. the central item is rotated by 3 degrees clockwise (you can do this really easily with CSS3 *-transform:rotate(5deg); rule). Once again the eye is caught by the weight of the difference and drawn to the centre, the rotation be clockwise draws the eye down to the title "Tie-Dyed". Emphasis hard at work!

Continuance.

Continuance is a fancy way of saying once the eye starts moving it prefers to keep going in that direction until something with more emphasis comes along. Consider this

Even though the bottom splat is bigger and so tends to catch your eye first, your brain can’t help but go “FECK, look at the sexy arrow AND it is pointing right !” Soon enough, you’ll find yourself staring at the smaller object.This is the same effect as you get when someone stops on a crowded street and stares up at the sky, soon a bunch of people will be looking up trying to find what the person is looking at.. (Hint the person looking up is the arrow!!)


Typography
I started with a nod at typography I will do a complete post on fonts in the future so prepare yourself for an attack on the evil that is Comic Sans! But I will add here Fonts can play a bit part in emphasis but do NOT fall into the trap of having lots of different font-faces, sizes, colours and weights. This is NOT good! Use no more than 3 fonts on a page and make very very sure they look good together. Do not,for example mix serif and non serif fonts, on the same page it hurts the eyes! The experience of printers going back to the times of Caxton's printing press should be ignored at your peril!!!

So that was a quick dander through emphasis. It is a very very useful tool for a developer to use, but it is easily misused and can cause chaos , confusion and double-vision in your users! Like all things make it part of your thinking process when planning the site and experiment so you get the right emphasis on the right places.

Look at magazines at other web sites and applications, where is the emphasis? Does it help or hinder? You have your eyes open all day, use them to learn what makes "good" design!!

Next post will be UNITY!

Design Principles #3 - Getting down to the Rhythm

Rhythm is mentioned by one of my arty farty heros Henri Matisse

An artist must possess Nature. He must identify himself with her rhythm, by efforts that will prepare the mastery which will later enable him to express himself in his own language.

Now Mr. Matisse was taking about paintings but it is equally true about music, poetry or indeed web and app design. We as devs create rhythm by simply repeating elements in predictable or surprising patterns. This repetition is a natural thing that occurs everywhere in our world. As people, we are driven everyday by predictable, timed events. The Olympics every 4 years, telegraph poles along a road, fence posts receeding off down a beach, breakfast coming after gettting out of bed.

Rhythm in design is just re-creating that, re-creating these predictable timed patterns, creating a pleasing sub-conscience relationship between the elements in the pattern.

Humans are designed to seek for and recognise patterns being able to recognise a sabre tooth tiger was a definite advantage to our hairy anchestors!. Patterns are familar and are reasuring to the user, unordered chaos (the opposite of rhythm) jars and unsettles the viewer and should be avoided - unless that IS what you were looking to achieve ;-)

In your app or web site rhythm creates a sense of movement for the user. A good website shouldn’t feel template based, it should tell a story. The fluctuation or repetition  of key elements on a website express rhythm.

So rhythm - tell me more ... there are 3 types Regular, Progessive and Flowing.

Regular Rhythm

Dead easy ...it just repeats elements in timed or predictable intervals like this .. on Play.com

Button equal sized and horizontal, large main image in the area where the eye naturally gravitates, and "KNOCKOUT DEALS!" slap bang in the hot zone of eye movement. Then four small rectangle panels along the bottom. Even these 4 panels have text on the left similar sized image on the right.

All regular, safe , rhythm!

Beware regular rhythm! It can be ... boringly template looking ... if not done well and with some stylistic flair.

Progressive Rhythm

A progressive pattern used changes in size or colour or possesion but not in a regular way. Progessive patterns lead the eye progressively through the elements. In http://flairbuilder.com/ above the asymmetric circles and dotted thread are perfect examples of a Progressive Rhythm leading the naturally from Circle to Circle right to left.

This is particularly skillful blend of regular rhythm in the navigation and footer and progressive in the center panel. It works visually and that is always the acid test of a good design.

Flowing (or Fluid) Rhythm
A flowing rhythm gives a sense of movement, and is often more organic in nature. Think of the stripes on a Zebra, they are regular white and black stripes but arranged in a fluid almost random way. (The rhythm on a Zebra comes the repeating white and black not the size position or shape.)

Flowing is perhaps the most difficult of the rhythms to get right with elements on the page however you can use it to good advantage with your masthead or footer images, which can give the over all impression of a flowing movement on the page.

... and in this website , the sadly now defunct http://www.aw-digital.com

 .. the dev has used a mixture of regular (the stripes top left) and progressive (the semi circular arc) and fluid with the different sized circles. The combination gives a very pleasing effect. Also note there in the top left quadrant the home button.. right where the eye will settle and there diagonally opposite are the "social" buttons balancing the home button nicely.... Lovely!

Adding unique interest and excitement to your web designs can be hard to accomplish, but adding some rhythm to the design is a quick and easy way to do this.Our own demon drummer Bruce Elgort will tell you that good drumming can be the back bone, anchor and driving force in music and as you can see it can be the same in web and app design! Every design has rhythm even if you didn’t plan for it, so a good dev will  take control of it and use it to the best advantage.

.. and so on to how to do "Emphasis" to your app's best advantage in the next design post

Design Principles #2 - Proportion

Proprotion - OK why should I care about proportion?

Proportion is closely linked to Balance that I discussed in the previous "Design" post. Proportion is one of the attributes that can balance a page or on the other hand send it spinning off into the realm of things that make you go "EUCK!!!!!"

At it's most basic level, proportion is the relationship that an element has with one or more other elements on the page. This relationship can be any one of the elements attributes size, colour, weight (as described in the previous post) but generally it is the size that we humans look for instinctively.

Think of the human body. If you head was 200% wider but the same height it would odd or more correctly "out of proportion" to the rest of your body. The human eye is used to the "natural" proportions found in nature, so while we will instinctively like things that observe certain rules of proportionality we will also dislike and find upsetting those things that are "out of proportion".

Back in the Renaissance artists and mathematicians noticed that there was a natural proportion that when observed made their pictures, sculptures and buildings better, more pleasing and generally visually wonderful!

After much quill sucking and doodling on the back of Italian Bistro table clothes they came to the astounding discovery that the proportion of "nice looking things" was generally the same. They called this the "Divine Proportion" or "Golden Ratio" and it is 1:1.618033988749895 or if long numbers aren't your cup of tea 1:1.618

Eh?

Have a look at the above statues ... which one looks "in proportion"?

If you said the one in the middle .. well you would be right.. here you have the golden mean in action.. the ratio between each adjoining element is in the proportion 1:1.62 .... see?

Right that works for naked men (and women) but what about web pages or apps?

So if you have a page layout that is 906px wide and you want to divide it into two sections that conform to the golden proportion .. easy peasy!

Simple :-)

Still Not convinced... well lets look at twitter.

Look at the boxes.. and how they "fit" the design.. each box is in 1:1:62 with the next biggest element. BTW The spiral is one of the things in nature to look for when looking for the golden ratio.


Right I am going off on a tangent for a moment ..

The Golden Ratio is not quite as fixed a rule as you may think when you start to play around you will discover that you can break the golden ratio if you are careful. There is an optimal number of symbols or characters per line. Generally this is accepted as being 50-60 although up to 75 can be OK. More than this the readers eye wanders off and they loose their place and their interest. Too short and the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words). SO depending on your typography in your page's elements you can break or at least bend the golden ratio and still provide a balanced design.

There is a very interesting book “Typographie” by E. Ruder that explains a lot about how we read and it seems that the subconscious mind is energized when jumping to the next line as long as it doesn’t happen too frequently. At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line

So with this in mind, sizing your textual elements should combine an optimal line length of between 50 and 60 symbols and nod at the proportions of the golden ratio.

OK Back on proportion

Sine 1:1.618 is pretty close to .33 : 0.66 a variant of the Golden ratio is "The Rule of Thirds" this generally can be used without need for your calculator. All you need to do is divide your design vertically and horizontally into thirds - like a tic-tac-toe board. take this site for example

Now if you remember back to part 1 of this series I pointed out that when people do decide to read a page, their eyes sweep horizontally from left to right, often focusing initially on a roughly triangular area in the upper-left corner. When the results are applied to a page that observes the rule of thirds then we see the following happening.

On the demandware site above you can see that the designer has used the rule of thirds but has nodded at the golden ratio

Also worthy of note in the site example :

1. The picture is placed so the site is in the golden ratio from top to bottom in a similar way to the statue.. the top section is in 1:1.62 to the picture underneath. There is also a golden spiral in there by "weight" in the top 2/3 of the page.

2. The edges of the person's body (not the arms) in the picture runs down the 2/3's line reading left to right or right to left, these are close to the golden ratio and are satisfying to the eye.

3. Whilst the weight of the left hand side is increased by the large ON DEMAND section the page remains in balance because the lower left hand segment is less populated than those on the right so the page remains in balance and is satisfying

4. The package the person is holding is sloped bottom left to top right. This leads the eye up to the navigation panel. Were it the other way around this would drag the eye down to the footer.



..and that is an short introduction to proportion ... another invaluable tool to the designer and will get mentioned again when I talk about "Grids" later in this series.





.. and next we move onto Rhythm ....

Today is a BOFH day .... :-)

Today I got a reply from a user who had received a standard warning message about a password change event that will be happening tomorrow.
The orginal email message reads

Dear xxx,

Please be aware that your password for the userprofile XXXXXXX on the BIGBOX server will expire tomorrow and you will be required to change it.
Regards

The Security Administration Team

We in IT send these messages on the two mornings before password change day so that the change does not come as a surprise and it gives our users 2 days to work out something exciting and memorable that does not break the password composition rules and yet fits on a post-it note attached to their screens.. Names of people and servers changed to protect the guilty.


The Reply

Steve
       What is this about?
Regards
Norbert Normal

My Reply to the reply

Dear Mr Normal
This message is to warn you that your password will expire tomorrow and you will have to change it Here are some useful definitions

"BIGBOX" = A server that has the name BIGBOX you know you are attaching to the BIGBOX server when you click the icon on your desktop named BIGBOX. This opens a windows where in large 70pt friendly blue letters in the center of the screen it says BIGBOX

"Password" = this is a secret word that allows you and you alone to access the facilities on a Computer. In this case the BIGBOX server see 1 above. We use passwords because we like secrets in MIS. Encryption is our bread an butter and passwords our Marmite. We do it specifically to make it difficult for people to do things that they shouldn't do on the server. We have considered removing your keyboards but this was deemed to be too excessive by the User Committee.

"Tomorrow" = a difficult concept, usually considered to be the day after today. But when is today? I generally advise users that tomorrow is the next time you wake up and get out of bed. However if you had a large and perhaps liquid lunch this may lead to confusion. So I suggest you put on your television and tune to BBC1 .. stay awake until you see the next BBC Breakfast program starting and you will have arrived successfully at "tomorrow"

Regards
Steve

Quick Tip for IE Compatibility Modes

After much head scratching on how to get IE9 to behave properly with a web site design I discovered deep in a MS document that you can add this inside your [HEAD] and it will force any IE version to use the highest compatibility mode that is available to it
[meta http-equiv="X-UA-Compatible" content="IE=edge" /]

Damn useful as IE9 will by default start in QUIRKS mode and make a mockery of all your lovely newish CSS and JS.

The MS Article is here

PS I will be back later with Design Principals and Proportionality

Design Principles #1 - Balance

So what is "Balance" and why do I give a monkey's chuff?

Well on a very basic level we humans like things to be balanced and something that is visually balanced is more pleasing to the eye than something that is not.

The easiest way is to think of an old fashion set of scales, when the two objects being weighed are the same weight the scales will be balanced. You can have several objects on one side and they still "balance" one big object on the other side.

You will hear design geeks like me say "That panel has too much weight" and basically I am saying the same thing. Visually the panel is heavier than the other elements and is causing the whole effect to be out of balance.

The "weight" of a visual object is made up of its size, color and lightness or darkness. If a visual object on the screen does not "balance" with the other objects on the screen then it drags the viewers eye down to the heaviest part of the screen and you may not be aiming for that effect and it may well detract from the information being presented on other parts of the screen. The weight of an element can be judged using these basic rules.

• Bigger areas are heavier than smaller areas.
• Darker areas are heaver than lighter areas.
• Saturated colors are heavier than unsaturated colors.
• A stronger border is heavier than no border or a thin one.
• Texture is heavier than no texture. The denser the texture, the heavier.
• Colors like red and orange are heavier than calm colors like blue or green.

The human eye is an odd thing it "likes" patterns it can understand easily. The eye understands balance and when faced with something that is out of kilter it will look at the heavy side first as we know that heavy things (in general) carry more importance than light things so in the absence of balance we look for heavy to try and make sense of the imbalance.

We achieve this by scanning a page, painting or website with our eyes looking for balance/imbalance and the thing with the most "Weight". Yahoo! have done some interesting research on tracking the eyes of visitors to various web sites and they have discovered that initially

• People scan the main (heaviest) part of the page first, this should give us "Context"
• They make decisions about the page in as little as three seconds based on that scan
• If they decide to stay, they move their attention to the top half of the screen.

When people do decide to read a page, their eyes sweep horizontally from left to right, often focusing initially on a roughly triangular area in the upper-left corner of a webpage but are dragged towards the "Heavier" parts of the screen or page. Being a designer you can leverage this to your advantage by balancing your page in such a way that you allow your design to lead your users eyes through their visit, both encouraging them to stay and if they do stay making their visit pleasing to look at and use.

There are 3 types of Visual Balance

1. Symmetrical (sometimes called formal) Balance
Symmetrical balance is mirror image balance. If you draw a line down the center of the page, all the objects on one side of the screen are mirrored on the other side (they may not be identical objects, but they are similar in terms of numbers of objects, colors and other elements. Sometimes they are completely identical
Here is a web site that is very nearly completely symmetrical on a vertical access down the middle of the screen. Each side left and right has a similar "weight" and is "balanced".

It is also worthy of note that while the page is balanced Left to Right, it is in a state of imbalance top to bottom. the top is "lighter" and the bottom "heavier". This leads the eye from the top of the page down to the heavier bottom of the page, which is the direction that the designer wants you to take.

Also note the slightly larger tree in the bottom right below "Flexibility", this little bit of imbalance will underline the Flexibility link visually and we will unconsciously be more interested from a visual key in that part of the screen. the designer has done this deliberately to accent the importance they feel in "Flexibility"

2. Asymmetric (Sometimes called Informal) Balance
Asymmetrical balance occurs when several smaller items on one side are balanced by a large item on the other side, or smaller items are placed further away from the center of the screen than larger items. One darker item may need to be balanced by several lighter items.

This example shows an Asymmetric design that it is balanced. The darker right hand panel is smaller that the combined left hand text panels. It is also worthy of note that the eye again is taken from the lighter left most panel through the heavier middle panel and then finally to the left hand heavier panel.

Note in the middle panel the collection of 15 thumnails is at the top.. making the centre column slightly top heavy .. this along with the larger font in the the left hand panel keep the reader's eye in the top half and content rich part of the page.

Although asymmetrical balance may appear more casual and less planned, it is usually harder to to use because the designer must plan the layout very carefully to ensure that it is still balanced. An unbalanced page or screen creates a feeling of tension, as if the page or screen might tip, or things might slide off the side, just as the unbalanced scales would tip to one side.


3. Radial Symmetry
The third type of balance is radial balance, where all elements radiate out from a center point in a circular fashion. It is very easy to maintain a focal point in radial balance, since all the elements lead your eye toward the center.

In this example whilst the designer has nodded at symmetry they have not got it right at all,  the columns are not symmetrical vertically or horizontally. The differences in width are un-balanced, The colours are un-balanced, the lightness/darkness is un-balanced.  You will find your eye scanning up and down left and right in the vain hoping of finding both balance and a place that can be a focus and a place to start.

 So Balance is VERY important in directing your users/visitors to the bits of your app/site you want them to focus on first and then lead them on into content and from their into the depths of your other content.

But BALANCE does not operate in isolation, careful use of proportion helps both balance and allows you to lead the user even more skillfully into your app, and Proportion is what I will look at tomorrow.

Good Design is NOT Expensive!

Goodness Gracious!
I have switched to "Bus" mode - no posts on Dominoyesmaybe for months and then 3 in one day!
I blame UKLUG!
Of I go, have a whale of a time and I come back empowered and enthused by the new things I have come across and new challenges that have been set. This post however comes from the other source of UKLUG benefits, the chats and conversations in the bar after the official bits have finished.

I was chatting with some other devs and the topic of design came up now not the back end application architecture functional design, the front end UI / UX design. It was mooted that this gets ignored a lot for fear of  adding time to the schedule or adding $$'s to the cost of a project and this may be true given the structures we develop in, however I would posit that there is a way were there is minimal additional cost and not that much extra time either.

The answer - simple - teach the devs the principals of design and then we will include those skills naturally as part of the life of a project. Until this happens the phrases ...

"I can't do the arty-farty stuff"
or
"I am not paid to design I am paid to program"
or
"If you want design you need to hire Gok Wan"

... will get trotted out when a project ends up looking the back end of a cow with rampant dysentery.

One of the big positives of a well designed application is that it helps that often fraught problem of "user acceptance". It is no brainer that something that is well designed will appeal to the majority of users whilst something that is badly designed will put them off it from the get go and that is very very important.

We all have a designed thing that makes us go "Wooooo! that is NICE" now look at an application that you have created .. does it make you go "Wooooo! I want to use that" ?.

Design is a big big topic however the thing is that the principals of design boil down to just five elements and they are :

1. Balance
2. Proportion
3. Rhythm
4. Emphasis
5. Unity

Now over the next couple posts I am going to explore each one and try to explain what each means and how we are application developers can leverage them to create the same wonderfully useful applications but with that extra bit of  "polish" on the front end.

Spark Sessions are GREAT!

I hear those of you not conference goers mutter "Spark Sessions - what are they?"

Well one of the the wonderful ladies that comprise the "Nerd Girls" - Gab Davis persauded me to do one at BLUG and then again more recently at UKLUG. I am not sure who introduced them or their provenance before I got involved but the every lovely Gab is the one poking grumpy gits like me to get off their arses and do something that is different and most importantly inspiring.

For such is the reason Spark Session exist - to inspire.

Think of them as little 5-6 minute TED sessions but done by ordinary folk like me and the hard part is you have a maximum of 1 slide and that generally has your name on it. So there is no hiding infront of your projected content. There is just you and your audience which even for a seasoned presenter can be - well - daunting!

My first attempt was at BLUG and i have to say that although I started well I came up a bit short on both time and inspiration so I changed my topic for UKLUG and on this occasion managed to get some inspiration in and brought the duration up a bit too, so there is hope that Gab will ask me to do it again at the next conference I am at.

I have to say that the numbers in attendance at Spark Sessions is going up too, so we must be doing something right ;-) and if you are attending a LUG or Connect and you see "Spark Sessions" come along or even better put your name forward. I can recommend it :)

My topic on this occasion was "Volunteering", now there is an old army axiom that reads something like "Never Volunteer for anything" and to be fair in some circumstances this can be true but importantly not all the time.

When you voluteneering YOU as a person can make a difference, it may appear to be a small insignificant difference at the time but it IS a difference and all those wee differences will stack up to make a whole hell of a lot of difference!

Volunteering is not a one way street where you help someone or something and get nothing in return, in my experience the volunteer gets as much back and in some cases more than they put in.

Much has been said about the Olympic volunteers, indeed our own Tim Clark and Sue Smith were one of the many folk that gave of their time freely in the hope they would add to the success of the games. I can say without fear of contradiction that did just that in spades!! I would also warrant if asked both Sue and Tim would say they got as much back from the experience as they put in .. if not more.

For my UK readers I have a challenge it is only a little itzy bitzy challenge that will require you to give a couple of hours a week and a couple of hours is nothing ... a trip to the pub perhaps ... an evening of really bad TV. Nip over to the DO IT web site and type in your post code and have a look at what is available in your area.. they also provide a tab for "Volunteering from my computer" !

Go on .. have a go ..and HAVE FUN!

** Edit ** Thanks to Chris [IdoNotes] Millar you can see lots of Spark Sessions on YouTube .. here
http://www.youtube.com/playlist?list=PL95028A08F0E8B934&feature=plcp

HTC One X Battery Life Improvement

Gentle Readers - I love my HTC One X, have done since the day I got it. Fast, good screen, I can read it without glasses and zero app failure since I got it in April.

The only slightly down thing was battery life but this is true of many of the full function smartphones when used in anger. In it's defense I would said that it is a BIG lump of a thing and I do use GPS when dandering and a 3 hour dander with GPS on sucks the life out of a battery faster than a thirsty Ulsterman drinks his Guinness.

Now I recently pulled down the combined 4.0.4 version of Android, the 4.1 version of HTC Sense and the 4.23 of the HTC SDK API and updated the phone. BOY was I surprised!!!

Normally my trusting Powerbee accompanies me when out dandering and I expect to be walking for more than 10 miles as it would normally run out of power at or arroun 3.5 hours. I normally trim the phone down to only have the GPS & CARDIOTRAINER running ensuring that WiFi and Mobile Data are turned off and the phone is not looking around to do stuff that I do not need it to do and even with all that I would still be pushing it to get a 3 hour dander and still have more that 10% battery left.

So I was very pleasantly surprised with the first dander after the upgrade, I did all my usualy stuff and set off from Bray to Wicklow with the Lotus Luminaries Carl Tyler and Eileen Fitzgerald. After 4 hours of dandering I looked at the phone to see if it needed the powerbee and low and behold the battery indicator was STILL showing 70%!!

Ye Godz and small piscean beings!

What would have been usually >10% left was now 70% so I dandered on and checked every so often to see what the battery power was like. I took a couple of photos and checked my mail when sitting for a coffee so the battery was hit with a higher than normal dandering usage. It was only after 6.5 hours of continuous GPS enabled dandering that I got the BEEP for >14% left and the powerbee was attached.

That is a 100% improvement on dandering battery improvement!

I kinda wrote that off as a one off, but I have done 2 long danders since and got similar results

That for me is a job well done by someone in Android and/or HTC world, I suspect it may be HTC

Thank you HTC!

Now about the mail client .. can you give me back a SELECT ALL option cos that was really useful and you took it away ?

UKLUG 2012 - If we don't change, we don't grow. If we don't grow, we aren't really living.

There is a Pizza in the oven, there is beer in the fridge and I am collating and bubble sorting my thoughts while making those odd noises of deep satisfaction only known to aliens from Alpha Centauri and *LUG attendees...Yes another UKLUG is done, dusted and put away for another year.

First a super-duper-ginormous-fudge-flavoured-exceptional-experience-with-extra-cheese-THANK-YOU to the Elsmores, Warren and Kitty, without whom UKLUG would not happen and if by some fluke of chance it did then it would it be only a fraction of the fun. I can speak with some authority here as I am one of the "helpers" and I see the event from both sides.
(*note "helper" is used in the Norn Iron sense of "getting in the way and making rude jokes")

LUGs are primarily about the attendees, the organizers and sponsors make it happen and facilitate it being a good experience but at the end of the day it is the attendees that make the event a success. So from this small cog in the organization I say a loud (and if you were at speed sponsoring you know how loud) THANK YOU to all that attended, without you well it would be really really boring!
NOW MOVE TO THE NEXT BOOTH ON THE RIGHT!!!

I will leave it to others to wax lyrical on their favorite sessions and seminal moments and there were many, too many to mention here. While all UKLUGs and ILUGs are brilliant this one seemed somehow better and I cannot put my finger on quite why. My more regular readers will of course recognise that when I can't put a finger on something a theory will not be long in the coming. :) So here goes.

Like all things the yellow-bubble is in a constant state of change and change like sunshine can be both a dawn or a dusk. The last few years have been replete with changes the most recent being the renaming of "Lotusphere" to "Connect" and some are announcing this as the dusk of the Yellowverse. This negativity may come from the pain that comes when separating the little bit of the professional "us" that was defined over the years by everything under the Lotus brands, but I would add that it is also the dawn of "something different".


Whilst this separation is painful it is seldom fatal and as the dawn of a new day replaces the old one what is lost will be soon be replaced by something new. I did two sessions this year, the first one with 4 other Lotus luminaries on how the Lotus products still provide superb, value for money platforms for enterprise applications and that they will continue to do so! In contrast my other session was with Sharon Bellamy on "Taking the fear out of websphere"... to be honest given the subject and the 9am start on day two I was not expecting the 39 people that chose to attend, but this is an indication that some of the changes that are happening are being recognized and are being prepared for. This was echoed in the number and content of other broader scoped sessions on offer in the agenda.

So I think part of the difference I alluded to earlier may have been the start of a community acceptance of the fact that we are not able to control the changes that are happening no matter how much we whinge or how adroitly we wring our hands. Since we have got that out of the way we are left with the challenge of changing ourselves and I for one am now looking forward to it :-)