Thursday, 5 January 2017

JohnRadio - Logo

Creating a logo to be displayed at all (or many) pages on a site gives an instant recognisability to the page, and a good logo can do more, such as create a good feeling in the viewer or signal the values of the organisation represented by the site. Sometimes the logo is the only thing a visitor sees before surfing on to the next page.
So... It is a good idea to take time to come up with a suitable logo.
For JohnRadio I wanted something simple, yet also a bit elegant. It was pretty daunting, as the connections between music and graphical expression is not a simple one.
Nonetheless I arrived at a logo, which can be seen in two forms on the following page:
These logos have not yet been optimised for use on the web.

The first logo is grey and represents a neutral version of the logo. It may eventually be used in environments where it is not supposed to stand out. The second logo is supposed to have a certain feel to it, associating it with salsa music. I intend to have this version of the logo on select pages dealing with salsa music.
I have chosen the font Colonna MT, as it is easily readable as well as elegant. A further advantage is that this font is readily available on Windows. At present, the logo is a picture, but if need be, the font can be applied to a text. It is also easy to recognise for other designers.

I have slanted the letters to make them appear more dynamic, and increased their height-to-width ratio considerably to make them look more elegant. Letters written in Colonna MT seem calm and robust to me, and I was looking to change that, while still keeping the elegance and readability of this font. I considered raising some of the letters from the baseline, however it seemed to me that it made the logo too chaotic, and it hurt readability. I feel that I have arrived at a good balanced expression with this design. And it deviates from the ubiquitous rectangular look, I am trying to avoid on this site.

Ahead of me lies a challenge with regards to colours. The associations between musical genres and colours typically aren't possible. I have chosen a cyan colour for chill, and orange-ish for dance music. However, some decisions regarding colours for other genres just have to be made and stuck with.

Wednesday, 19 October 2016

JohnRadio - Development of Pages for Artists

I found myself pretty unprepared for this. I am used to seeing every text written on lines in a rectangular block. I wanted to break from that.
And so I set out to find other shapes, because I have found that text without shape makes it difficult to figure out what is communicated. It seemed that I would have to keep writing left to right, and let the lines of text be underneath each other.
Consequently I was looking for wavy, round or polygonal shapes. Or at least something that would be slanted. I wouldn't even rule out a bit of randomness at this point.
The tricky part then was to figure out what to do, because descriptions of artists don't just have the same length. If I was to go for wavy or round, I would need an algorithm to tell me where to split lines of text.
Normally the browser splits the text. But that only works with the rectangular areas.

Another problem was the adjustment for small viewports. If the viewport is too small, it probably makes little sense to try to avoid the rectangular shape. I quickly decided to allow small viewports to just show the common rectangular blocks of text.

I came up with this solution:
Further examples can be found here:
Currently there are 7 examples.
This is sort of a 'proof of concept'. At some later point, this could be based on contents of a database.

This layout wastes a lot of space on the screen. On the other hand it is often visually appealing to use space.
This layout works best on a white background, as it relies heavily on colours. The use of light grey as white is something I can see as visually appealing. Using shades of red on red seems less appealing to me, as does any other combination I have checked out. It also clashes with expectations, as we are used to seeing letters on a white background.

Although I aimed to give the central text a circular shape, I had to accept some deviation. It might be possible to adjust my way out of it, but already now it is complicated to adjust for the varying ways in which a text can be written. My current method has serious limitations to the way the text can be written:
- I have only seen it work for texts between 400 and 550 letters (including blank spaces).
- Long words threaten to make it difficult to find out when to move to the next line. A refinement of my method could be the addition of hyphens, but this soon becomes complicated.
- A long word first or last may not be possible to fit in at the top or bottom of the circle.
- I have chosen the font Georgia due to aesthetic considerations. A monospace font might make it easier to adjust the length to the space inside the circle.
- Everything pretty much has to be written with latin script. I have experimented with a mixture of scripts (greek, cyrillic, japanese, korean, traditional chinese). Example: It doesn't mix well aesthetically (IMHO). And it makes it even more complicated to adjust the length of the text so that it remains inside the circle.

Nonetheless I like this solution. Soon I will have feedback from people testing it, and this of course will allow me to improve (or reject) this layout.

Tuesday, 11 October 2016

JohnRadio - Brainstorm

Now it was time for brainstorm, getting ideas. With 5 challenge statements to brainstorm, there was enough to think about.
In the beginning there's the possibility that the developer can find inspiration in similar sites. So I decided to take a look at the sites of some radio stations.
I was not impressed. Radio Viborg, Radio Alfa, Radio 100, Groovera and Radio Nova weren't really helpful. and Radio24syv seemed to be more interesting, but I didn't really see something which impressed me.

And so I progressed to a classic brainstorm. I simply sat down with a lot of post-its and each of the 5 challenge statements and thought things over, making sure to follow the 4 main guidelines recommended by my method.
- Defer judgment
- Keep getting ideas until you run dry
- Build on previous ideas and connect ideas
- Seek novelty

After a couple of hours, I felt that no more ideas were coming forth. I wasn't really happy with the result though, so I wanted to go further. I was a bit unsure how to continue, so I thought things over.
The conclusion was that I would repeat the brainstorm, but this time I would rethink each challenge statement, while combining them with main focus areas, which I was then to identify.
I identified five main focus areas:
- Aesthetics
- User actions
- Navigation
- Content
- Permeating phenomena

Obviously I got the same ideas again, but this time some extra ideas came to my mind. And it really looked better now. But I felt energetic, so i decided to push on after a short break.

The next kind of brainstorm I tried was one where I look at some pictures (one at a time) and then ask myself how this picture can be related to each of the challenge statements. This is supposed to increase the probability of getting ideas, which are non-obvious. It worked that way for me too.

After some hours and three brainstorms, I had 37 post-it's with ideas. It is difficult to say how many ideas that was, because a bunch of ideas isn't really an easily quantifiable thing.
Now was the time to figure out which ideas to take to the next step (the next step is to develop on the ideas). I am not going to promise that I don't go back to my pool of ideas at a future point, but here are some of the ideas I thought I would take with me to the next step:
- Navigation by emotion
- Avoid the rectangular layout
- Quiz/labyrinth
- Present artists
- What the visitor can do to find this locally
- Let this be partially about other aspects of my fictional club
- Entertaining language
- Articles
- Themes

Many of these ideas are new to me, so I guess there will be enough to think about. It seems to me that I will probably get more ideas as I develop on these ideas.

Monday, 26 September 2016

JohnRadio - Definition

I decided to make a site for a radio station. This was prompted by a desire to do something for min fictitional club, and at the same time it was also because I used to stream music from my computer at home, so that I could hear it elsewhere. I wanted to revisit this phenomenon.

There's a story to this, if you will indulge me. Some years back volunteers had built an internet café in my neighbourhood as part of a public project aimed at immigrants. When I was there, volunteering to man it, I would sit at a computer, put on the headphones and listen to my own stream, while at the same time I played Age of Empires 2.

Once in a while I looked around on the faces of those using the internet café. And once in a while I had to do something because people were coming or going or asking me something.

But on some of the nights it was the most leisurely volunteer work I ever did :-)

Well, some years back I found a series of lectures by an american lecturer, who teaches creativity. It was a toolkit for situations, in which creative thinking was needed. I decided to make this website about the radio station by following some of the tools he presented. I will be putting together my own method, picking from his tools as I go along. This was sort of what he was calling for anyway.

If I may oversimplify, he suggests four steps: (1) Define, what you want to achieve. This should be formulated as one or more so-called 'challenge statements'. Then (2) you brainstorm in different ways, based on the challenge statements. Then(3) you develop some of the ideas from the brainstorming sessions. Finally (4) you implement the things that seemed to be good ideas.

To get started, I decided to follow a method called 'webbing'. In this method, you start with your intial thought, and then you explore this idea, by repeatedly asking (1) why you want to do this, and (2) what's stopping you from doing it. By repeatedly asking these two questions, you get a web of reasons and problems. You then figure out, what you want to make the basis for a brainstorm. The things you want to brainstorm over should be relatively broad questions. As an example: By asking, why I want to make this website, I found out that I would like to do something fun. Asking what was holding me back, I found out that I needed ideas on how to do that. I phrased that as a question: How can I make this fun?

By doing this I found five challenge statements, which I will be brainstorming over one of the coming days:

1. How can I make this fun?

2. How can this add to the life of my fictional club?

3. How can this show that I have skills?

+ two more, which I will not mention here.

It is a bit of a dark art to get to the right challenge statements. If you keep asking why you want to do something, you soon trail off into reasons that isn't really suited for brainstorm, such as "I want to make money on this". This is too broad. On the other hand you can also make challenge statements too specific.
The same goes for the questions about what is stopping you. Answers such as "I don't have the time for this" lead to questions such as "How can I make time for this?", and that may be outside the scope of what you are working with.

I am nonetheless confident that I have found five good challenge statements, which has defined to me, what it is I want to get ideas about. I will be brainstorming in a few days time.