Client Project: Brief for Sonic Machines

This is the full brief for the client project I am doing.

• A portfolio website that features a selection of his best work for self-promotion. 4-5 pages.
• An online blog where he can keep an archive of all his work, content, bits and pieces and post new updates/information, e.g. current projects, performances. 
• Have all his external networking sites (Facebook, LinkedIn, blog) to be connected to his website (badges)
• Use his Facebook profile for advertising performances or events
• He’s keen to make the website responsive for tablet and mobile use to 
• get ahead with the latest web trends.
• Sonic machines is about a collection of different objects. He wants a set of icons that reflect a “package” (with coherent unifying style, like 
• adobe software icons)
• He’s keen for me to rebrand his logo, he doesn’t have an official one but usually uses the company name in lower case, black
• He would like me to make recommendations on the latest blogging and social networking tools/technologies
• He would like me to recommend him on a web hosting company
• This is under discussion but a way for him to share his resources with other people. To allow users to download his “refill” format sound files for personal use.

Quality Criteria

• His design should reflect “doing a lot with a little”. His approach to music is to create music in an “explosive way”. He’s interested in what you can do with an instrument and getting the most you can get under defined rules. He will try to get every possible sound he could possibly get from a certain object. It’s about taking something simple and seeing what you can do with it.
• His website is self-promotion and allowing potential collaboration or job offers from other musicians.
• If possible, make the website somewhat easy to update for someone with no css/html knowledge.
• His target audience are people who are interested in experimental music.
• His website should reflect in some way how he makes music. He would record for example, the different sounds a washing machine makes under intended use. And then extract the sound, manipulate the sound to create music. It’s about taking something simple and seeing what you can do with it.

Negotiated Client Project: Owen Baxter, Sonic Sounds

https://myspace.com/sonicmachines / / http://sonicmachines.blogspot.co.uk/

My new project is working with Owen Baxter aka "Sonic Sounds", an experimental musician. I think this will be good because it is something a bit different and I have room for visual experimentation. I've met Owen to find more about his work, I think I have a good understanding of Owen's style and work processes. In summary these are:

Define your project

Portfolio

• 5 page website showing his best work
• Responsive
• Integrate his social media (badges); social platform

Personal online blog

• A separate blog to upload his latest work, projects etc

Purpose of the Project

Self Promotion 

• His website is self-promotion; to put himself out there. Seeking potential collaboration or job offers from other musicians.

Target Audience

• People who are interested in  “Experimental” music. (underground genre)

Branding and Identity

• Rebrand his logo, he doesn’t have an official one but usually uses the company name in lower case, black
• Sonic machines is about a collection of different objects. Each object needs a icon. He wants a set of icons that reflect a “package” (different icons but with unifying style, like adobe software icons)

Most important thing to say

• “It’s about taking something simple and seeing what you can do with it”
• “create music in an explosive way ” 
• “Limited Palette.”

Research project: Artefact 1 Results

Results

Q. Which one was easier to use? (Navigating around the site, knowing what to do next etc)
Traditional website (40%)
Sliding layout (60%)
The same (0%)

Q. Which interface was more natural/intuitive to use? (Which one you found more comfortable using)
Traditional website (40%)
Sliding layout (33.33%)
Same difference (26.67%)

Q. Which interface did you find more interesting/ engaging to use?
Traditional website (20%)
Sliding Layout (66.67%)
Same difference (13.33%)

Q. Which interface would you find more memorable? So if you had to recall this in several weeks’ time, which one are you more likely to remember?
Traditional website (26.67%)
Sliding Layout (73.33%)

Q. Overall, which interface would you prefer to use over the other?
Traditional website (53.33%)
Sliding Layout (46.67%)

Feedback

• “the traditional website was self explanatory.”
• “there was no confusion, very simple and straight forward to navigate though”
• “it was easy to follow and all content was visible”
• “It wasn't clear how to go back to the default home screen.”
• “the slider was a much easier and quicker way to navigate through the information”
• “just did not looked right”
• “I had to follow the story of the wives in sequence and could only see one name at a time whereas the traditional let me see the bigger picture.”
• “I preferred the traditional to this, its a cool effect but personally I prefer the content to be laid out in a simpler layout as its immediately easy to understand the information presented.”

Findings 

• A traditional  (non liner) website is more natural for people to use
• People are clever they know how a (linear) scrolling website works, some people were comfortable in using this. 
• A traditional (non linear) website is generally preferred  and easier to use
• However, a linear sliding website is both more engaging and memorable 

Research project: Artefact 1 Preparation

I’ve just finished making my 2 web interfaces for my research project this evening.

I’m going to ask people to try out the 2 different web interfaces and then ask questions about which one they prefer/ find easier to use. This is to test website structures (linear vs non-linear narratives) and how they affect user experience/usability.

I will post an update on the results soon.

non-linear narrative

linear narrative

Questions

Q. Which one was easier to use? (Navigating around the site, knowing what to do next etc)

Traditional website

Sliding layout

The same

Q. Was there anything on the traditional website you found confusing or got stuck on?

-Enter comment

Q. Was there anything on the sliding layout you found confusing or got stuck on?

Enter comment

Q. Which interface was more natural/intuitive to use? (Which one you found more comfortable using)

Traditional website

Sliding layout

Same difference

Q. Which interface did you find more interesting/ engaging to use? 

Traditional website

Sliding Layout

Same difference

Q. Overall, which interface would you prefer to use over the other?

Traditional website

Sliding Layout

Same difference

Q. Which interface would you find more memorable? So if you had to recall this in several weeks’ time, which one are you more likely to remember?

Traditional website

Sliding Layout

Same difference

YCA: Formative feedback submission

Good news, I got my work assessed over the Christmas holidays and I am pleased with the results! Overall I got a formative grade of: 2:1!

The comments and feedback  received from my tutor/s are below. I plan to keep working hard and improve :)

UPDATE: Also I have submitted this as an entry to the official Nottingham Young Creatives Awards! http://www.youngcreativeawards.org/

Presentation:

The presentation did cover all the required components although the requested order was slightly revised. There were a good selection of sources. Well justified and commented on and a good description of target audience.
Time management was well considered but placed a bit early in presentation.
Research was very good and keywords correct.

Prototypes:

A very good selection of prototypes investigating different ideas. However they were mixed into research resources which made presentation a bit disjointed.
Conclusion was weak and did not sum up investigation clearly enough this needs to be considered in future there was no description of how work so far informed your evaluation of project.

Reflective Journal:

Your self-evaluation on blog is excellent and whole reflective journal is being used correctly and is informative. Keep it going!

Client YCA: Finalised Mobilisation

The final designs for my project working on different devices.

Client Project YCA: Feedback 3

I received some more feedback from my lecturer and my peers for my project. These comments were mainly aimed at my introduction splash page:

• The 2 buttons on the front aren't positioned very well. Perhaps be better to try a different layout to make it easier for the user to use.
• The main title on the splash page is hard to read! The font doesn't stand out and disappears ino the background
• The user may or may not understand the terminology to "start desktop" from "start tablet". 

Finalised simplified splash page navigation

Client Project YCA: Development 6

Font changes

On Facebook IMPs, my peers suggested me to use some different fonts. These are the ones I've incorporated into my design. 

On google fonts, I chose "Ms Bedford" because it looks timeless, classical and yet elegant. I went with gold color font for the timeles feel.The"Signika Negative" was chosen because it was a stronger contrast to the title font than what I had before. I used this similarly on the splash page. 

Ms Bedford font

Signika Negative font

Client Project YCA: Development5/Feedback

Slider Customisation 

I've added a linear gradient CSS3 to my slidebar divider to make it easier to use. It now corresponds to the colors of the tagclouds. I think this works well. 

However, I need a bit of code to remove the bit of default browser padding.

1st Idea

I've tried various re-positioning of the textvalue before I came up with my final design.

2nd Idea

I managed to move the slider to a fixed footer position by googling: fixed footer, position fixed solution. I think this makes the most sense. 

Finalised Idea

Client Project YCA: Splash development

Dreamweaver Development

From my initial Photohop design I've been implementing my website on Dreamweaver. I've decided to go with the last design. I've also found that a button as well as the hyperlink is useful user interface-wise because it becomes more obvious:

In my latest version, I have replaced the image based title to a text based one. It was much simplier to align it in the middle with "text-align: center" as opposed to paddng the image. Also the text would be great for SEO, searching for those words.

Client Project YCA: Splash page

Photoshop Mockup designs

I want to make it vibrant and look aesthetic. The different colors is a continuation of the theme in my main artefact. This helps to establish a consistency throughout the design. The colors are a "key" to the different time periods. The concept for the splash page is

• Splash page is: EXTERIOR 
• Main artefact interactive timeline: INTERIOR  

I'm going for contrast and positive and negative space in my splash page.

Photoshop mock-up 1

I like this design far better, the black is a good contrast to the background while being able to see through to the picture of Nottingham Theatre. Notably, the instructions/enter links; I got this idea when I thought about interface design on Flash games. e.g. Neopets. It just makes sense.

Photoshop mock-up 3

A variation of the previous design, I do believe this one works well. 

Photoshop mockup 4

Client Project YCA: Development 4

Background ideas:

Spirit Nottingham
Interior1
Interior2

Next Steps

• Try making it responsive by giving the content wrapper a % size, compliment this with media queries. Perhaps at widescreen give a fixed width, and at lower screen sizes give a responsive width
• Try giving the image in lightbox a max or min width
• Media query the text in the lightbox to give responsive font sizes
• Make a menu screen
• Customise the sidebar or add stylation to the current date/slider divider
• Add a 4th line of productions 
• HEX color code transparency converter

Client Project YCA: Development 3

This is the latest version of my Nottingham Loves Theatre Royal:

Work in progress

My lecturer Shaun Belcher inspired me to use the theme of the "KEEP CALM and..." I am very happy with it so far. The vector crown logo is from: Crown Vector.

Client Project YCA: Feedback 2

• Try to create a feel for the theatre within the design
• Perhaps frame the content into the interior theatre screen (as a background) to create the look and feel of one. Or use Pillars, photo of theatre royal
• Incorporate a "KEEP CALM AND EAT CUPCAKES" crown logo (theatre themed crown) onto each coloured tag cloud box. Funky, could look nice. (max width or min width for responsive)
• Reduce the padding on the boxes
• The scale between the boxes (when sliding) isn't obvious enough apparently
• Raj Deep said there is enough content already, too many boxes may overclutter it (simple looks good). Also the user will NOT want to scroll down!
• Ribbon the image, or frame a color key on the image itself for color key? (an idea) 

Client Project YCA: Development 3

Version 1

Color coded Horizontal layout

Version 2

Descending List like a Theatre playbill

Version 3

Multiple column layout, like mosaic/windows8 

Version 4

Like version 1 but FLEXIBLE auto height dividers

Version 5

Like version 4 but with padding: like js plugins for images

JQUERY MOSAIC PLUGIN: Link

Client Project YCA: Development 2

I've been experimenting with different visualisation ideas.

It was difficult to position typographic elements on the webpage because larger fonts create an automatic gap in-between different lines.

I've tried to look at a different design approach. I wanted to use color co-ordination to organise the infomation. I think this will be a way of making it viusally appealing and easy to use (user interface)

Work in progress tagcloud slider

Research

Nottingham Playhouse flyer:

Typographic style: negative/positive against the background

BBC website, historical timeline: Link

Color co-ordination key used for User Interface

Client Project: Development feedback tutor

• A novel idea, something that hasn't been really done before.
• Make my own decisions on about the appearance, aesthetics of it. I have the foundations and the basic working elements. I now need to make it my own, my input will be what I get marked for.
• Look around tag clouds and timelines and how good they are for usability. You have to make it look nice visually but make sure its usable for the audience. Maybe even test it on someone to see what they think!
• Facebook timeline user interface
• BBC Historical interactive timeline: dialogue boxes, CSS radius smooth borders, contrasting font size between heading/main font. COLOR coded timeline.Jqueryui Slider customisation plugin
• Try matching background color with timeline key like in BBC, or use colored CSS/image based ribbons

User interface: The color on the timeline matches the slider background color

• Don't forget that the core purpose is to DISPLAY information about Theatre performances (timeline), don't loose sight of that whilst trying to make it look visually exciting.

Client Project: Development Feedback

Hello, I got some feedback off my peers, this has given me a  lot of inspiration for my project. I've got some new design ideas.

Which are! :

• If I can't make the slider work then i can just make the tag cloud look good and operational without the sliding element.
• The background could be an image of the interior of theatre royal. The content bg can be semi transparent.
• The background image could be a mix of old and contemporary. It can start from looking ancient to victorian to grainy. It can start black and white, to grey and grainy to vivid vibrant colors.
• It can fade and transition to each other or be like patterned tiles. My idea is to create long rectangular bars (vertical) Like stripes than alternate between other colored tiles. E.g. greyscale, color, grayscale, b/w, color, grayscale, color etc.
• A whacky idea would have the background focus between the designs depending on what era the slider is on. 

• On a side note: to make the artefact test site prototype *slider*  image based on a slider to save time

An idea as a background image (could make the screen as the content div like a panorama)

Client Project YCA: Development 1

I've been developing my design by coming up with different visual designs for the appearance/theme of my artefact.

I did some google searches for 'tag cloud' and found some interesting design/layouts, like this one:

A design of a tagcloud

I noticed that it 

• emphasized the contrast between the big and the small. Overall this created a better visual composition.
• There was no smooth transition between small/large font, the effect was Be RaNDoM
• The overall shape was round/ circular

I had a play with increasing the range between min/max font sizes and used css "text align: center".

Playing around with font size range

Centering those tags!

Color variation 

Next steps

I've been thinking, yes I am creating a tag cloud, which could include influences from what tagcloud design (look and feel), but I am creating a timeline too. So, why not, incorporate design influences from both! Think how the timeline feel would look with the tag cloud!

Google: How to style tagcloud / timeline. Some of this is about: typography/style VERSUS whats technically do-able on the web

Research Project: Finalised Idea

My Lecturer David suggested me to make a timeline where each play title will be displayed as text on the screen. And when the user scrolls on the scrollbar, the javascript would make the play titles that corresponds to the currently selected date to become enlarged/change font color.

I've used some built in javascript plugins for tagcloud and a slider. This what I've been able to design so far:

I also used "fancybox" plugin to create a lightbox effect, I edited the code to stylise the design to my liking from the default settings.

Next steps

• To look at how I can stylise the theme/appearance of my website appropriate to my target audience.
• To compile a comprehensive list of productions/content/images to put onto my website