Events page Intro Using Edge

I have finally found a tutorial I can use to create my buttons slideshow, originally its meant for images slideshow but I decided to use the same technique just using buttons.
link to tutorial: http://www.youtube.com/watch?v=97uyrOa75-Q

The tweaked technique consists by grouping buttons and creating an animation for each group to slide out, and then adding slide left trigger to activate the animation, of one group of buttons sliding out and next group of buttons sliding in, and then to get the animation to reverse I add a reverse play action by the swipe right trigger to the existing buttons on the screen.

I then animated the lines on top to get animating sound bar animation on top of the buttons by animating the clipping on the buttons.

Intro page production- trials and errors

To get things started I first went on with trying to achieve the planned out design of the cover page, which was to have slide-able buttons in the main events page.

I first tried to use Indesign I placed several buttons and was able to navigate through them according to different groups (months), but there was no way of achieving the sort of animations that I had in mind, or a smooth sliding in/out effect as it only worked by clicking a button and hide/show the different grouped buttons

I started with trying to purely achieve that using dream weaver as the software and tried to group the buttons in a <div> and use the same code that would be used to achieve a picture slideshow and try to tweak it to make a buttons slideshow, but it failed.

Next choice of software was muse and I tried to use the same technique, to try to achieve the slide-able buttons, by trying to create a buttons slideshow, but it did not work out as well.

and so my last option as a program was edge which and so I went to find a tutorial or a way of achieving at least 70% of the vision I had in mind of the opening page.

The Final Design of the Events Page

I have done further improvements to the design, merging in mine and Nigel's and we have finally all agreed on this one as a group now time to publish this up!

More Improvements

I worked more on the events section and here is my final design of it, waiting on feedback from the group mates:

Chosen section..

We have chosen to continue with the creation of our "Events" sections, but as we had two mock ups we have decided to merge the good points of both mock ups and combining them into our final design.

Below is my design:

below is Nigel's design:

Below is a rough idea of how the final would look like:

Strengths and Weaknesses of Group Members.

I have been asked to talk about my group mates strengths and weaknesses, I have three group mates : Kayla, Nigel and Genevieve 

>> Kayla's Strengths:

  Kayla's strengths lie in the fact that she has a very good attitude when it comes to dealing with group members, she is very friendly and she is good at research, very good at communication and when given a task she delivers.

>>Kayla's Weaknesses:

  sometimes gets too busy, not always available, prefers to work from home, but doesn't share much online, so makes it hard to feel her presence if we are not in a group meeting, needs to share more and not go silent when we need to have an online discussion.

>>Nigel's Strengths:

    Nigel is also friendly and absorbs critisim and works around that, gives really good ideas when he actually shares them, sometimes gives good constructive critisim too, delivers good ideas.

>>Nigel's Weaknesses:

   Nigel is very timid and shy which makes it hard to communicate with him when it comes to sharing ideas in group meetings, I don't feel much enthusiasm from his side sometimes, and it took him time to be able to share his ideas freely, he just needs to become more confident and be more present, whether its face to face or online, his ideas are good and he is a good designer but he just needs to share his vision before its really late sometimes.

>>Genevieve's Strengths:

     Genevieve is also very friendly and open, she is active, and also fast with delivering and sharing information, really good in research as all her links are very useful. Shares good ideas here and there, knows how to work under pressure, delivers clean work, and absorbs criticism well.

>>Genevieve's Weaknesses:

    She just needs to give more time for group meetings too, although she is present online, it would be better if she is present in real life too and just communicate better.

Group Leader:

   I have been the acting group leader since the beginning, the position was shifted to Nigel for a week but he was not acting on it so I went on with scheduling meetings and initiating discussions (time was being wasted).

Overall it's not hard to work with my group mates but they just need to give more time for work, and be available for group meetings or online discussions, they can work under pressure but its better if we communicate better as a group, and find a way to deliver better before its too late, and thats what I try to do because I have always felt communication was our problem but I think we are working through that, hopefully we wont face problems in the upcoming weeks.

New and Improved Mock-ups

After looking at all the right design reference and keeping in mind the feedback we got from our lecturer.. I went on and made a mock up of the ROTTW Events section (previously we were planning on just featuring upcoming events, but "events" was a much better idea, to also give previews of past events, all in one section)

this would be the front page of the section, scrollable sideways to reveal more events, I decided on going really minimal and not use much colors for the whole section.

I still wanted to implement my vibrating sound bars ideas but decided to add it by using lines above each event bar. the lines would increase upwards and decrease downwards..

After the selection of an event, users are taken to the next page:

This page has it all, all the information needed at one place separated by simple lines , and each content can be scrolled upwards downwards depends on the amount of info there:

• A fixed sidebar that contains the front picture, name of artist/band, name of event/tour, date, venue, and a map button to show where the place is, and also social media links of the artist/event.
• then we carry on to the content (scrollable left and right) >>promotional video and summary about artist/event
• rough number of number of people going
• Get Your Tickets!!
• latest album promotion by having parts of the songs available for streaming
• Pictures and videos of previous concerts and ongoing ones in different parts of the world
• and of course we must not forget the sponsors

trying to mock-up..

This week a communication gap happened between the group, my group mates missed the discussion session I scheduled which again slowed us down a bit, but we continued sharing online. I went on with creating the mock up for upcoming events section (first page)

 

i tried to reflect my image of moving sound bars (each sound bar links to an event)

 

 I still needed to see my group mates to discuss what to put on the inside

we came up with a fast wireframe to reflect our ideas:

our lecturer gave us feedback and ideas to add :

• Videos from past to present concerts
• Pictures from past to present concerts
• promote current/ latest album

Ideas Presentation Feedback...

After we finally presented our ideas to our lecturers and we got the following feedback:

>> show a more in depth look into the making of the music, more interactivity
(i think we can show the instruments used,their inspirations...)

>> for upcoming events thoughts on interactivity and how the inside content should actually look

>> and we needed mockups !!

I got started and created a mock up for the front page just to start reflecting our ideas..

next was to work on upcoming events section but that needed discussion with the group mates on how to add more interactivity..

Presentation..

Finally finalized things here is our idea proposal presentation..I have created the wireframes and put everything in point form..

Brainstorming 4

In this session we have looked deeper into the layout and features of the 4 sections we are working on: cover page, contents page, DIY and upcoming events.

>> for the cover page we have decided to have a parallax 3D effect in the background, with an interactive option of tapping on the featured artist to hear latest song, and to press a button which then creates an open door transition onto the contents page
















>> for the contents page one of the group members suggested a cool way to navigate through different sections by having a rotating "gear" in the middle and as the reader rotates through different sections , different images pop up which are linked to the different articles.

>> we have looked more into the layout of DIY section and the features inside the section to make it better, on how to project the different tracks of the album.

we were still contemplating on whether to add the "give you own feedback" feature so we were thinking of how to project it.

Brainstorming 3

In today's session we have looked more into features and layout of the sections:

the upcoming events section shall include info about upcoming Concerts, Gigs and Festivals.

A layout idea for the first page of this section was animated sound bars containing an image of the event/concert.

info to find inside:

• Description
• Venue
• Time
• Tickets prices
• line-up
• featured

DIY  Section features:

• Short summary about band
• short summary about album and who produced
• track list
• review of each track
• links to album / band's website
• band contact > email, number
• songs available to hear
• provide band pictures

Brainstorming Session 2

Our group was finally completed as the other 2 group members came back, we have missed our presentation due to communication problems ...but we finally got together and brainstormed.

We have looked at a lot of references of digital interactive magazines, and tried to think of the section to be added.

I suggested "upcoming Events":

   I thought it would be interesting to have a section that talks about all upcoming musical events.

Information References:

http://www.timeoutkl.com/music/events
http://www.songkick.com/metro_areas/31146-malaysia-kuala-lumpur
http://www.kl-live.com.my/
http://www.visionkl.com/event-listing
http://eventful.com/kualalumpur/events/categories/music

Brainstorming Session 1

Me and one of the members of my group (Nigel, the others were missing) started things off and had a little brainstorming session about which section in the magazine to make interactive and improve, and came up with a few ideas on the sections to add...

Chosen Magazine Section:

D.I.Y

   I rooted for the DIY section because I saw the usefull interactivity that can be added to make it better. specially that it had a good purpose, which was to help independant bands promote themselves, thats why the name DIY.

thoughts on making the section better:

• focus on less bands
• show pics of the bands
• interview the band
• link to album on itunes
• stream a couple of the bands songs songs

then it was the section to be added's turn , the ideas were:

• Instruments Section: feature different guitars, drums, prices...different instruments used to make "rock" music... 
• Hall of fame Section: Interviews, background stories of famous 80's 90's early 2000's bands.
• Local Rock Contests/Battle of the Bands: reviews, upcoming contests.

Brainstorming Scribbles Bellow..

Creative Profile

My creative Level:

    I would say I'm pretty creative, with a wild imagination although sometimes I think too big and it becomes hard to execute my vision, but once I tone it down and morph my ideas according to what I need, I let my creativity flow.

My Creative Style:

    I would say my creative style depends on whats needed to be delivered, my limitations and my goals. If I'm expected to deliver something clean and simple, I would. but If I'm allowed to have no limits then I just go with the flow.I like to play around with lines and create no definite shapes.

Creative Motive:

   To create beautiful art, in any form using any medium, I like to aim for "appealing".

Creative opportunity: