Colour Harmonies – Analogous Colours

Analogous colours are a set of colours that sit next to each other on the colour wheel. Images and designs using analogous colour schemes are usually easy on the eye, coming across as natural and somewhat mild.

While reading Colour Harmonies by Rose Eding and Dee Jepson. I came across the technique of using a set of analogous colours in place of a single (local) colour to create more interesting and dynamic effects.

So, instead of painting a tree different shades of green to represent the light and shade, you can use the colours beside it on the colour wheel, blue and yellow. Layer the blue as shadow and yellow as highlights. Allow them to run into each other naturally on the paper.

In the end green will still be the dominant colour perceived but having the yellow/blue highlights peaking out creates quite an eye catching effect. I played around with a couple of examples, here are the results. The local colour version is on the left, the colour harmony version on the right.

Blue and yellow in place of green.

Red and yellow in place of orange.

Blue and red in place of purple.

What do you think of the effect? Perhaps it’s not everyone’s cup of tea but what kind of feeling does it leave you with? Do you prefer the local colour version or the analogous colours version?

Note, the experiments focus on the secondary colours – green, orange and purple. I tried a few with primaries. I don’t think it works in the same way since you can’t combine two secondaries to make a primary colour. Things just ended up looking a little messy.

 

 

Colours!

I recently started doing some painting with watercolour. The aim was to get back to basics with traditional media in order to get some fresh inspiration for all this digital illustration/design stuff.

While experimenting, I was paying particular attention to colour; how to get a specific colour, what to expect when mixing colours, how to assemble a colour scheme that is harmonious and conveys the right mood. Sometimes, I can get the effect I want through trial and error but I find that it often leads to a lot of muddy concoctions. It’s always helpful to have a system.

Warm and Cool Primaries

A useful way to think about colour is in terms of warmth and coolness. It goes beyond classifying certain colours as warm (red, orange, yellow) and certain colours as cool (Blue, purple green). It’s a relative scale. So you can have a relatively warm blue (a purplish blue) or a cool yellow (a greenish yellow). A painting pallet will often include a warm and cool version of each primary colour. The watercolour starter kit I have includes the following colours:

Colour pallet

The kit also includes some other colours to help with creating earthy tones (these can be tricky to make from just the primaries). Not going to deal with how these browns fit into the system just yet but I’ll just post them up for completion’s sake:

Colour pallet

Making more colours

As in primary school, red and yellow make orange, yellow and blue make green, blue and red make purple. Having a warm and cool version of each gives you more control over the saturation of your colours. E.g. You can make a very vibrant green or a slightly earthier one depending on which combinations of warm and cool you use.

 

As a general rule, keep colours vibrant by combining colours that are closest to each other on the colour wheel, erm… rectangle. Colours next to each other are analogous. Colours opposite each other are complementary. More on this later.

Extras:

 

Flying Orca Herd

I wish!

Mel goes nuts with colour. Using layers of colour directly from the pallet rather than mixing them before hand. Causes lots of interesting and unexpected effects.

Visual Interface Practice – eBook Library

Since we started our poison blogs, I’ve been making an effort to gain a level up in visual design skills. One of my bald spots is typography. This is an area I’ve never had any intuition for… As a kid my handwriting was pretty horrid and it hasn’t really improved much since. I think the latent SHAME might be part of the reason I’ve generally avoided thinking about text and form together.

As a step towards rehabilitation 😛 I have been working through Designing with type – The Essential Guide to Typography by Craig, Scala and Bevington. It’s organised like a textbook so it works well as an introduction. I’m only about a quarter of the way through but I feel like it’s time to break things up with a mini project.

A visual interface for eBooker

This continues from the last post on eBooker UI. eBooker is a project Min’an was working on a some time ago. For more background info see the original post. This isn’t meant to be a pure typography project but hopefully I’ll be able to put some new knowledge to use.

Typography can get overwhelming. There are so many choices with such subtle variations that it’s quite tricky to figure out where to start. Whenever I’ve tried to make font choices in the past I just find myself constantly going back and forth comparing one to another. So to avoid drowning in choices, I’m going to limit myself to considering a few fonts for now. Designing with Type has a Chapter early on about five classic fonts which I’m going to use as an anchor. 

Garamond – Old style

Baskerville – Transitional style

Bodoni – Modern style

Century Expanded – Slab serif /Egyptian style

Helvetica – Sans serif style

Each was developed at a different time (Garamond as early as the 1600s) and it’s pretty cool to see how the iconic styles evolved. For example, Garamond was created when the paper and printing technologies were still quite primitive. The strokes are relatively thick and it looks kind of flowy due to its sloping serifs.

In contrast, when Bodoni was created, improved paper and printing technologies meant that there could be more contrast between thick and thin strokes. The resulting look is very sleek and dramatic.

If you’re curious, this article summarises the story of these classic fonts quite well. There is also a neat little eBook on the basics of typography with all the jargon explained in a fun and cheeky way.

 

The Results

A note on names: I thought it was odd that eBooker sounded more like an app that helps you make bookings than something to do with books. I quite liked Calibre’s name in that it doesn’t have anything to do with books necessarily but it’s still quite memorable and has the right feel to it. So, while doing the designs I also rounded up a few alternative names.

Brainstorm results – Type, colour and concepts.

More fleshed out VI designs

The interface was fleshed out using the wireframes from the previous post as a base. I spent most of the time playing with alternative looks and layouts and didn’t get a chance to do a complete set of screens. There are still lots of things bothering me about these attempts but no point being a perfectionist now. Hoping that when I look back on this after a few more months I will be able to see why certain things look a bit off.

 

Project a Fortnight – eBooker UI

Fellow poison blogger, Min’an (a.k.a. Potato-Y) recently devised a neat little regime for fending off perfectionist traps. The idea is to focus on one discrete project a fortnight, rapidly experimenting, building and learning. Then when the fortnight is up it’s time to move on, leaving all thoughts of enhancements and bug-weeding behind.

Last fortnight was spent working on eBooker, a web based ebook library. The results of his experiment can be seen in this show and tell post. At the same time, I was happily piggy backing off this project and approached the same problem from a user centred design perspective.

My idea of user research was lurking around on forums eavesdropping on Calibre users as well as having informal chats with friends and family who have an interest in eBook collections. All in all, a very hacky process but it still yielded some interesting insights. Here’s a summary along with bits and pieces of the mockups:

 

Recents and Favourites

People only attend to a small number of books at a time. These tend to half-read books and frequently used reference books. These should be easily accessible and not embedded in any deep hierarchies of organisation.

Grouping by recently accessed

One approach, grouping by recently accessed

Custom Categories

Custom categories reflect the user’s individual interest areas. It allows people to organise their books by context of use (such as work or hobby). This often supports the workflow better than the less personal author, publisher or even genre tags.
E.g. One user’s categories looked something like: Finance, Go (wei qi) instruction books, popular novels and technical reference books. The categories aren’t very uniform, Go is a much more specific category than popular novels, but they work for this individual. So long as these categories are few in number, manually managing them should be a satisfying rather than frustrating experience.

Custom Categories

Creating Custom Categories

Metadata

When Min’an and I were bouncing some ideas at the beginning, we were puting a fair bit of thought into ways to populate metadata. It was an interesting technical problem with lots of hairy bits which made it interesting to think about. However, after chatting with a few potential users, it became apparent that having easy access to a book’s metadata is more important when you’re considering purchasing a book and not so much when the book is already in your collection.
Having said that, the group that I chatted to were older and tended to have smaller collections. To get a different perspective, I had a quick google online about how people managed their eBook colletions. Stumbled across these guys http://www.heroesandheartbreakers.com/blogs/2012/04/kindle-magic-or-how-to-organize-your-kindle-library, wow, they are keeping collections numbering in the thousands. Now that feels like a very different use case the the one I’d been thinking about. If the user is searching for a specific book amongst thousands, complete metadata becomes a whole lot more important.

Mass editing metadata

Quick way to do mass editing of metadata

Searching versus Browsing

This depends on how many items you have in your library and how frequently you need to access them.
For small collections, people prefer to browse rather than search. Chances are, the user knows their modest collection fairly well and would prefer to scan and locate a book by recognition rather than make the effort to recall a title/author and type a keyword.
For very large collections on the otherhand, searching is a much appreciated perk of having an digital collection.
Regardless of library size, users still only regularly access a small subset of their collection at a time. For these recent or favourite items, browsing may still be prefered over searching.

Browsing for fun

Browsing a library for no particular purpose is an enjoyable pastime. People aren’t always trying to search for a specific book. Sometimes they just enjoy thumbing through a collection of inspiration under a subject of interest. It’s not all about efficiency. This is where having complete metadata makes the experience more pleasant.

Quick flipping

This is more to do with reading than organising but there is a frustrating thing with eBooks where you don’t necesarily read from beginning to end. Reference books and textbooks are a pain to use in digital format because quickly getting from one section to another requires so much effort. You either have to bring up a menu to jump to a section or bookmark (which breaks your flow and distracts you from the content) or thumb/click/scroll through the pages until you get to where you want (tedious repeated physical actions).
When I have a physical text book, I can quickly shuffle through the pages until I roughly get to the section I’m interested in, then flip more slowly to hone in on the specific page I want. What I like is that it gets me to places quickly yet it doesn’t break my train of thought.

Quick Flipping

Quick flipping and skipping pages

 

In Hindsight

  • Trying to do a UI process backwards is tricky. The project started out as a motivator for building an interesting tool from a technical point of view. Trying to then turn that project into something with a real user need felt like a bit of fakery at times… Still with some patchy research and a bit of intuition there was enough to go on make some interesting design choices.
  • Working on the usability and the visual interface aspects at the same time slowed down progress. I refer to usability as designing an interface to support user goals, context and workflow. In contrast, visual design involves looking more at the aesthetic elements. Doing these in tandem required a lot of hat switching which was distracting. Sometimes I’d make a decision based on user workflow but then other times I would feel compelled to put something in because I could see a nice way to style it later. Going forwards, I’m going to make more of a conscious effort to separate the two. For this project I’ll post up my visual interface experiments separately.
  • Lurking around on forums/blogs was surprisingly useful for open ended user research. It’s not particularly efficient and won’t answer specific questions but you can learn a lot while trawling through complaints and rants!
  • Limitations of static wire framing. I found very it difficult to convey a design that involves a bit of movement, like pages flipping as you hover your cursor across the screen, with static images. I would really like to try some more interactive mockups later.

Tools

 

 

Stop Pondering. Just Start already…

This is the part where I set aside time to hone an awesome skill that I really like to have and then spend all my time researching about the skill instead of practicing it.

MustKnowAll

Time spent researching and exploring isn’t a bad thing. It’s just that researching and exploring seems to be synonymous with procrastination for me. I spend way too much time pondering about where to start and planning out where to go from there.

So in an effort to just make a start, I’ve been picking a random topic that seems reasonable for a beginner and posting the results of my practice (that’s what tonal studies was about). 

 

 

My school of one – In pursuit of long term progress

Self learning is becoming pretty accessible thanks to an ever growing pool of online teaching resources and special interest communities. Curious minds can happily delve into new disciplines without the need for formal instruction.

But just because it’s accessible doesn’t mean it’s easy!

I’m a developer/designer by training but I want to delve further into fine arts and visual communication. I often find myself trawling through you tube tutorials, online courses, blogs and forums for hours on end. Usually this just results in my brain melting into a defeated puddle of goo that wants to do nothing more than vegetate over something trashy.

I could happily chew through a mountain of information but then after a day or so not much of that information seems particularly important anymore. Okay, so I got some good conversation starters out of it and I did feel more up to date and connected with the world for a short time but what if I want a greater sense of long term progress?

At this point, I’d like to poll for suggestions! Do you suffer from similar hang ups or have you figured out a system that works for you?

I can think of more than a few bad habits I’d like to change in my own approach to learning and so have started a list of self prescribed suggestions. *Sheepish laugh*

Learning Pickles – I am exploring these pickles one at a time.

 

 

Tonal Studies 2

Traditional tools.

No undo option.

Planning skills inadequate.

Everything just gets darker… :<