Meda102 Assessment 2 – Red Cherry Blossom

Creative freedom is a blessing and a curse. During the duration of this assessment task, I had gone through multiple (8+) iterations before settling on the Red Cherry Blossom. This work is both experimentation and serendipity. Originally, the plan was to have an erratic line bounce off the walls in a random fashion.  From this idea, experimentation began with collision detection, and with a pinch of luck, it worked well, but it also did something unexpected. Whilst the plan was to hit the side, then begin on the other side again (I was going for a map type look here), the line jumped back to the random position set on the left side – this meant it produced a streak across the screen. From this, stroke colours and widths were tweaked so that the growing strokes differed from the streaks. This was heavily reminiscent of the Japanese Cherry Blossom. By having the lines draw infinitely, it appears that the flowers overlap the stems.

Note: This is an animated sequence

void setup() {
  size(600, 600);
  background(0);
  stroke(255);
  strokeWeight(5);
}

// Defines x, newX, y & new Y positions
float x, newX = 0;
float y = 300;
float newY = 300;

// Draws an infinite amount of lines with varying stroke colour
void draw() {
  newX = newX + random(-20, 40);
  stroke(random(255), random(0), random(0));
  strokeWeight(random(40));
  newY = newY + random(-40, 40);

  // Forces line to return to left side and draw again if it hits the right side
  if (newX > 650) {
    newX = 0;
    stroke(random(10, 255));
    strokeWeight(random(25));

    // Forces line touching the bottom to bounce off/remain inside box
    if (newY > 550) {
      newY = 550;
    }
  }
  // Forces line touching the top to bounce off/remain inside the box
  if (newY < 0) {
    newY = 0;
  }

  line(x, y, newX, newY);

  x = newX;
  y = newY;
}

MEDA102 – Assessment 1

Throughout the last few weeks of MEDA102, we have been studying the art of instruction abstraction. This refers to the ability of creating a set of instructions from an image. In assessment 1, we had set out to do exactly this.

The initial concept was to use an A3 sheet and draw a series of squares, rectangles, circles and triangles lightly with pencil, who’s lines intersected at at least one point. Once the shapes were drawn Two colours were to be used to trace over the shapes. Once a line intersected, the colour used would change – This created an interesting X-Ray effect. The problem with this was, If any shape had a point of intersection that equaled an odd number, the colour would not work. The concept had to change due to uncontrollable variables.

The concept I had ended up with after some experimentation with class mates was reminiscent of a diverse range of objects..or imprints, to be more specific. This concept was inspired by works of Dominick Talvacchio. The inspiration came from a piece called “Arcs, Missing Arcs” where Dominick had created a series of shapes from negative space.

Dominick Talvacchio inspiration piece

Whilst my piece differs in the sense that the circles themselves aren’t the focus, rather the negative space – the concept remains relatively the same. The final images had been described by the person(s) executing the instructions as looking like an Areo chocolate bar, colour blindness chart, blood cells, bubbles, pebble walls, the FIFA soccer ball, easter egg, balloon and the Canadian maple leaf. The most interesting element of the final design/instructions was that there was room for slight individuality, a hint of uniqueness – yet the instructions are clear and concise enough that they also looked the same and as intended.

I had my Girlfriend, Latitia, Mother, Meri, and Sister, Natalie execute the instructions without knowledge of what one another were doing – and to my pleasant surprise, all three images looked near identical, with the exception of one, where Natalie had skipped over a line of instructions. She was informed to execute the instructions again without being told what the problem was – she got it right the second time.

INSTRUCTIONS

  1. On an A3 sheet of paper in landscape format, use a pencil and very lightly draw a
  2.  large circle who’s top and bottom point touch the edge of the page.
  3. Within the large circle, lightly draw other circles
    of varying sizes to fill the large circle. These are to be both large and small in size. Each circle you draw is to touch another circle at at least 1 (one) point.
  4. Erase the large outside circle with the eraser provided.
  5. Fill/colour in the spaces in between the circles with the green highlighter provided.
  6. Wait 1 (one) minute after filling in the spaces with the highlighter – Use the eraser to remove the remaining pencil.

 

 

OUTCOMES

Meri’s execution

Latitia’s execution

Natalie’s execution

Natalie’s failed execution – due to the fact she skipped over a line of instructions

 

CAGD202 Summary

Design definition statement

PCWorld is an online technology and news website with a rich history as a subscription based print publication that moved into an online space later than its competitors. Due to ending their printed subscription and become an online-only service, PCWorld was forced to offer more than what was originally published in their magazines (in a content sense) in order to retain a presence in an extremely competitive space. PCWorld soon became extremely cluttered, with thousands of articles spanning from Software to Business write-ups, and the identity became ever increasingly ambiguous as it no longer matched or portrayed the content offered. PCWorld suffered an extremely high bounce rate, a dropping in global ranking position and an aging design. We took these issues and endeavored to rectify them through a complete redesign and rebrand. I was more specifically in charge of the re-brand, including final branding document, and competitive set/research.

Research:

In order to help PCWorld gain a solid foothold on its industry, we needed to understand its competitors… There were many. Several of which included Cnet, Gizmodo, PCMag, Wired and much more. It is easy to say there is a plethora of other sites, offering similar content to that of PCWorld, but in a way that was much more intuitive with a modern twist. Not only does a website need to be eye catching, it needs to be easily navigated. Several of the sites mentioned had an effective mix of both, yet many didn’t. For example, The Verge had a graphically stunning home page – while this was lovely to look at, the website navigation quickly became cluttered and in some cases difficult to decrypt. The outcome the group had set was to create a website that was not only modern, but mixed an element of graphical aesthetic with simple navigation and organisation that would be accessible to both new and old viewers.

Not only was it important to be simple to navigate and pleasing on the eye, but in the case of PCWorld the identity needed to match the content. In ‘Design Thinking for Visual Communication’ by Ambrose G, and Harris P, it states that “Designs can add value directly by boosting sales or indirectly by increasing the prestige of a brand or organisation”. Due to the lack of connection between identity and content, PCWorld has lost this prestige to the likes of PCMag and Cnet, thus having a negative effect on hit rates and audience engagement. By rebranding, we hope to realign the identity with the content in a visually appealing way without completely losing its previous identity.

Several logos were used as inspiration here, the following are examples of identities that either 1. held a heritage element, or 2. included elements within typography that linked to the business;

 

     

 

Theoretically, the audience should be able to navigate to their desired location within a site quickly and easily – With PCWorld, this was not the case. Over 40 menu’s cluttered the home navigation alone, it is no surprise that it suffered from an extremely high bounce rate. Through our research, we had discovered Techspot – another website offering content similar to PCWorld. Unlike PCWorld, though, Techspot utilized several effective forms of navigation and stylistic approaches. Much like Techspot, Cnet had also utilized space and graphic elements well to create an eye-catching yet easily navigated site. The following are examples of two design artifacts used as inspiration for the redesign;

Cnet:

  • Beautiful Lightbox style featured articles
  • Clean, modern layout
  • Dropdown navigation
  • Excellent use of white space
  • Great software downloads hub

Cnet: Clean, modern layout

Cnet: Lightbox style feature articles

 

 

Techspot:

  • Excellent featured articles section
  • Simple navigation menu
  • Does not feel cluttered
  • Simple grid structure

Simple grid structure

Simple drop down navigation

 

Outcomes

The two strongest outcomes of the project are by far the identity redesign, and modernization of a relatively aged website. The new identity now conveys the forward thinking, technological body that is PCWorld (now Launch), with several tasteful elements within that pay homage to the previous identity. By creating a new identity, we have allowed the content to continue the direction it is going, as that is the largest portion of the site, whilst creating a visually appealing brandmark. The modernized site, much like that of the new identity has taken elements from its predecessor and implemented it in a fresh and contemporary way. The colour is no longer bland, and pages no longer cluttered. Together, these should prove to be an effective step forward for the brand.

There were more successful outcomes than unsuccessful, but due to the sheer scale of the project the main unsuccessful outcome would be the graphical uniqueness of the new website. Whilst I am unsure if this is a good or a bad thing, as going wild with design elements can leave the audience with a bad taste in their mouths in regards to it being TOO visually bold, I would have liked for us to be a little bit more adventurous given we had less content. Separating the project into different jobs for each member was an excellent way to cover the large amount of work that needed addressing, it also created issues with compilation of reports. It had seemed as though specific instructions that had been set out weren’t fulfilled, leaving the sections of reports feeling somewhat separated. For example, the final report should have been compiled in a way that was coherent with the branding document I had created, yet this was unfortunately not so.

Thing’s learnt

Throughout this project and throughout the semester, I have learned to step away from positions of leadership and monitoring. I tend to often find myself chasing others up on what needs to be done, adding unnecessary stress to an already stressful process. Whilst this has been good for me from a personal perspective, I certainly hope that it does not reflect badly on the final outcome, as although I had a hand in putting forward ideas and implementing changes, some were not done to my standard. This is a bitter-sweet moment. I have learned just how important it is for a brand to portray themselves correctly. I have always know that it is integral in the survival of a brand for their content to reflect their values, but being in charge of the competitive set and rebrand, and having the opportunity to dig through statistics really highlights and reaffirms this idea – ‘If it ain’t broke, don’t fix it’, doesn’t always seem applicable. As a designer, I tend to dive in without doing too much research – This will no longer be the case, as this project has shown me how important it is to look into competitors and statistics before making final decisions. The sheer scale of this project wouldn’t have been doable unless we knew all there was about the background of said brand/client.

Areas of design I want to work in

I have always had an interest in UI design, but this project has opened up the door for me to potentially look into UX design. Having the opportunity to dive into statistics and experience something from the perspective of a different user group was extremely interesting to me, and I think this new found curiosity could lead me into a new direction. I can be both technical and implement a strong design thinking aspect simultaneously.

CAGD202 Final adjustments

We had our final opportunity to make adjustments on the website redesign/rebrand. Several changes were made with consideration to the feedback from our last presentation, but the group was fairly on track and on the same wave length, so changes came naturally and seamlessly. Some of the adjustments we had made included tweaking the text and layout of the logo rebrand proposal and elaborating on the conceptual and developmental stage of the new identity, implementing a temporary “Formally PCWorld” banner situated at the top of the home page, adjusting the website layout so the amount of columns used were coherent throughout most pages and making clearer which page the user was currently on.

There were some suggestions, however, that the group decided not to implement. The largest of which was adding a tag line to the logo to further connect the old identity to the new. Whilst the feedback on this particular element was more than viable, we had concluded that we had brought forward more than enough elements from the previous identity to connect to the new. We understand that PCWorld has a strong, loyal audience, but this audience was not strong enough to be a competitor in an ever expanding digital sphere – hence utilizing several heritage elements in the new identity, allowing it to be familiar, but fresh. I had suggested somehow adding a “Formally PCWorld” discretely on the website itself, so as to not completely negate the suggestion and this was implemented as a temporary banner at the top of the home page.

CAGD202 Presentation feedback

Week 13’s final presentation provided our group with some excellent feedback. This was the first time we had unveiled the both the identity rebrand and redesign of the website and it was well received. Upon discussion with our peers, there were a few small adjustments proposed that we will be taking on and implementing within both the identity and website.

These improvements include;

  1. Move search function to top right corner… implement filter options previously discussed
  2. Potential temporary tag line – until the audience becomes familiar with new brand
  3. Implementation of the new red, maybe in the header rather than more in the logo
  4. Addition of right hand scan column – specifically for subscription information
  5. Use more articles on secondary pages, maybe 3 per line? Just to populate more
  6. Make ‘Recent’ and ‘Popular’ categories in secondary page more obvious. Maybe space it out more and/or add a red bold underline in the same colour as the identity

 

Example of #3 change, implementing red on the lower portion of the header (feature image) throughout the website

CAGD202 Logo Rational

Before any progress could be made on a working identity, PCWorld needed a new name. There were several key words that the group had decided on that would act as anchor points and inspiration for the construction of a new identity. These words were evolution, dynamism, modern, simplicity and heritage. Multiple weeks past and a plethora of names had been proposed, but nothing stood out. Whilst many of the names were great, we needed something that implied growth and progress. The relaunch had to be memorable, yet easy to adjust to. There it was – a heading in the first page of our ideas book – ‘Relaunch’ – LAUNCH.

Whilst relatively simplistic in design, the Launch logo had gone through many iterations before it became what it is now. One of the most important concepts during the development stage was to ensure that there were elements within the new identity that paid homage to PCWorld’s previous identity, as it held a rich history. Change can be quite jarring for some, so to prevent segregating the loyal PCWorld audience it was imperative to bring forward something that was familiar.

One of these elements was typography. The previous identity implemented a sans-serif typeface, and being a technology based service this makes complete sense. After several weeks of typographic research, Geomanist was settled upon to act as both the logo and website font family. It has a healthy family and is clearly legible on digital devices. With some editing, Geomanist proved to be an excellent choice for using as the Identity. It was bold, clear and fresh.

The second of these elements was colour. It was determined fairly early on into the development of the new identity that colour played an extremely important role in the core of PCWorld. It was present during its print production days and also throughout its digital time. The red colour was taken and brightened slightly to suit a modern application, and placed within the identity to act as a heritage element.

The third and final element was the power icon. Across PCWorld’s social media platforms, the power icon was present in some form. We wanted to implement this graphic into the new identity in a way that wasn’t too obvious, but gave a feeling of “OH! It’s the power icon!” when you realise that it is in there. It was a fun way to again bring forward part of the previous identity whilst keeping it fresh and exciting. We have done this by cleverly disguising the icon as part of the letter C that strikes through part of the letter H in the new identity. This also proved to be an excellent way to merge all three elements together to create an eye-catching, new, yet familiar feeling identity for the rebrand.

Moving Image – MEDA101 Assessment 3

Whilst my previous two assessment tasks consisted of fairly light-hearted content and were related in both tone and feel in a more contemporary setting, I went well out of my comfort zone in this assessment to convey one of the darker parts of my life.

Unfortunately several years ago, spanning the approximate duration of my parents divorce, I suffered from severe ‘Night Terrors’. A night terror consists of your mental state being in a deep, vivid nightmare, yet your body being awake and reacting to said nightmare. The night terrors I experienced didn’t make much sense, rather consisted of flashing images, shapes and an extremely uncomfortable out of body experience. It looks like a possession to those who have never experienced it. Scouring the internet showed there was little footage portraying a night terror, and this is where my assessment began. My Moving Image project is an attempt to capture what it was like to both be having a night terror, and to witness one. I would run around the house, wide eyed and screaming in hysterics, unable to establish control over my body and completely unresponsive to any form of stimuli. The scariest part about my night terrors? I could only be woken with Holy Water.

My Moving Image project heavily features custom non-diegetic sound to convey a feeling of other-worldliness, lack of control and discomfort, and utilizes several camera techniques learned during the span of the semester, including that of a POV style, blending scenes through camera movement and implementation of continues stylistic scene transitions picked up from previous assessment feedback.

This assessment was heavily influenced by several films, including The Blair Witch Project, Rec, The Last Exorcism and Paranormal Activity, to name a few.

Sweet dreams.

 

CAGD202 Week 10 Re-Brand Progress – Identity

After a brief consultation with Grant, it was brought to like that whilst the redesign of the website is effective and sufficient, it isn’t necessarily impactful. Before this could be done, the identity needed to be worked out, further website design could be done after the fact. After a little bit of scribbling and word research, ‘Launch'(from the ‘relaunch’ heading in my concepts book) stood out. It implies moving forward and it implies technology. This better matches the content offered but also allowed us to be more creative with the website itself.

Whilst the original concept was to carry forward a colour from the previous design to be used as a heritage feature to pay homage to the identities history, the decision was made to use more of a graphic element. This has allowed us to be more adventurous with colour and layout. This said, this concept may change completely at any time.

 

CAGD202 Website Re-Design Mock

Taking on board feedback from the report assessment, I had taken on the challenge of turning said feedback into a visual representation in the form of a re-design of PCWorld. The group had decided fairly early on that the content that was offered on PCWorld was no longer represented in the logo, thus it required a complete re-brand.

As PCWorld has a rich history in print publication and the group did not want to completely ignore this. The decision was made to carry on a heritage feature – colour. Whilst after making the move to a digital space, PCWorld quickly became bland and unappealing, overshadowed by the contemporary style of competitor websites like CNet, TechSpot, Wired and The Verge which all brought a modern take to a technology identity – as it should be.

PCWorld had become cluttered, messy and relatively ambiguous. During the re-design process several elements from other websites were used to help bring PCWorld back into the competitive digital space. This included large, visual and dynamic feature article lightboxes, simplified and streamlined categories, an increased use of white space and an organized grid structure to contain all the information offered. All the while keeping the heritage red colourisation throughout the entire site as to not ignore the strong history held by the identity.