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

Client Project: YCA design prototypes

These are the different prototype ideas for my project. I'm haven't made a decision about which one I want to do yet.

Idea 1

Sketch Prototype 1

I really like this idea because its simple yet effective. I think its doable in the timescale that I have realistically. I could do further reading about scrapbook style layouts, could include an illustrative such as handwritten text annotations, or a diary/journal look? 

Also a research journal about scrapbooks: http://www.imageandnarrative.be/index.php/imagenarrative/article/view/158 (A visual essay)

Also useful plugins to aid the design of this: (modify css3 styles to make it my own)

• http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/ (50 amazing plugins, notably: Page scrolling and parallex section, sticky fixes elements while the rest is scrolling)
• http://buildinternet.com/2011/03/mosaic-sliding-boxes-and-captions-jquery-plugin/ 
• http://stackoverflow.com/questions/10930783/mosaic-grid-gallery-with-dynamic-sized-images 
• "masonry.js"

Or for more plugins or options:

Good reference materials

Idea 2

Sketch Prototype 2

Also a viable design. I like this idea in the visual sense but I'l have to think about how the fonts will be positioned code-wise. I imagine a Lightbox will open up the information boxes. A good source will be researching typography.

http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/ (50 amazing plugins, notably: text effects, sticky fixes elements while the rest is scrolling)

Rejected Idea 3 

Rejected Prototype 3

Probably the most radical and impractical thing to produce on screen. On paper it looks good, but in practicality, not so much.

Idea 4

Sketch Prototype 4

A very intresting concept, if this works, that would be really good. Could be quite complex and time consuming to do. Will have to see if there are any good integrated plugin support for this. A good example is http://2ammedia.co.uk/

Idea 5

Sketch Prototype 5

Similar to scrapbook idea but more creative use of shape and layout. A very good source would be how to make one page scrolling websites.

Next Steps!!

It may be a good idea to create a more final prototype on Photoshop to get a better visualisation of what you're going to make. Gather images (decide on how many productions you're going to have) and structure first, and then make a mockup.