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

Context 3: development WI logo designs

From my previous journal I had two design variations for my WI logo. I thought they both had good things about them so I decided to take elements from both to establish a middle ground as you can see from this:

I am thrilled with my new logo! I think it looks good.

Also I went and tried to make a positive/negative variation, what do you think:

Context 3: logo design WI

I've come up with a great logo design:

Variation 1

The Initials "W I" stands for "Wilson Interactive" and the stylisation of it is to replicate a heart graph chart, (just for aesthetics). And the grid highlights a graphic design approach, it also shows my attention to detail.

Variation 2

The variation of this one is a gradient, and a stronger central white line. I'm not sure which one to go for yet.

Context 3: logo Pseudoname Leopard

Okay, the Leopard is a bit random, and it just popped into my head. I think I was trying to think of a anonymous name that has a "L" in it to make it go with the whole arrow idea. A variation is:

I've also changed the last one to a orange and black color scheme to match the Leopard feel. Whilst I'm not wild about this, I guess it doesn't look too bad. Could do with some more ideas.

Context 3: further logo designs

I've been experimenting with different logo designs for my personal branding.

Designs:

I thought since this is what my on-line journal is called, why not just call it "Wilson Interactive",  it kind of sounds snappy. I've tried to make it look interesting with adding a arrow, full stop and exclamation mark. Overall, it doesn't look bad, but I feel there is something missing. Also the fullstop bugs me because it reminds me of Nike.

Context 3: Logo Design Ideas

I need to come up with some branding for myself. Firstly, I am going to design a logo for my website. I have tried to think of some pseudo-names for myself as well as experimenting with how to use my name in the logo.

Design:

I am quite fond of this design, it looks visually appealing and its simple and effective. However, my lecturer Shaun said the only pitfall would be confusing myself as a print-designer because that's what CMYK is associated with.

Original Layout designs

Research Project Presentation

Hi, Good news, my presentation for my Research Project went very well yesterday,

Here are the verbal feedback comments I received from my peers:

• I linked the section "methodology" well with justified reasons for how I'm going to conduct my artefact and how it will help answer my question
• Fine overall, good quotes
• Have a clear idea of what I'm doing

Self-Evaluation

I think my research project is going well. I have a clear idea of what my next artefacts are to be. I've made an informed decision by thinking earlier on what I'm going to do for my final year project, and I am happy with it. I am interested in testing interactivity and user experience. And I believe it will help set me up in future to do freelance work.

I think I have found some relevant sources but I should spend some time reading them more because it will backup my Primary (artefact) testing.

For the moment, priority is on the "Nottingham Loves" project because I only have a month to finish this project and I need to get a move on.

Research Project: Artefact 2 Visualisation

What I will be testing?

Example of ccs3

Example of  css3

Research Project: Artefact 1 Visualisation

Website structures: Linear vs non-linear narratives

Do they affect user experience/usability?

Photoshop prototype designs

Hierarchal structure of designs