OUGD504 / STUDIO BRIEF 04 / DEVELOPMENT

This post will document aesthetic and interactive design decisions made throughout the development process.

I began by using this image of layered trees that I took in Sheffield. Even though the album cover exists, I felt that the website should follow an aesthetic that will compliment this, and not just revolve around the album artwork. The user will want to view something visually beautiful,  encouraging sales and traffic onto the website. A poorly designed website will not be as effective in this sense. Using the trees reflects the album title 'Free', and adds dimension to the page.

Creating a calming colour palette meant that I could be meticulous with my design decisions, yet there was always freedom to change it if it didn't work. The peach tone was taken directly by using the dropper tool on the album artwork, so it was relevant to the campaign and omitted a comfortable and relaxing aesthetic, especially alongside grey and soft black.

Here would be the website the user would be first greeted with. "Free" is placed with a huge point size to instantly grab attention. It is important that maximum attention is on the band's new release. Under this, the user can sign up to the newsletter and receive an unreleased teaser single from the new album. Doing this creates a sense of elite involvement and makes the user feel included in the fanbase. Fans generally enjoy exerting the fact that they are a 'top fan', so doing this allows for them to feel this. Only they will be able to hear the new music before anyone else. This also generates talk on social media, prompting other fans and members to visit the site to listen to the new track.

Under this, the image of the trees can be seen, blending into the colour and representing freedom and allowing an aesthetically pleasing user experience.

The icons at the bottom of the screen are a way for users to easily access the band's other social media with just one click, all in a concise button with no messy links. Navigation links to other parts of the page are also demonstrated on the top toolbar,  next to the iconic Hundredth key logo, and roman numerals for "2015". This is a popular way to visually convey dates and numbers in an attractive way, and also very popular with this genre.

This image demonstrates another part of the website, where the user can see the tour dates for the world tour. Nothing gets a fan more hyped up for an album than a tour, especially speaking from personal experience. Knowing that one of your favourite bands will be performing songs you have not heard yourself yet is exciting and generates a lot of hype and questioning. 

I feel I should possibly try and develop this idea further and make the website more interactive. 

Another deliverable alongside the previous page is a tour poster that can be printed yet also posted across a variety of social medias, (facebook, twitter, instagram, tumblr etc). People who follow the band on these websites will see this posted and possibly then share it to their followers etc, creating a larger and larger audience as time progresses. Since this can also be printed it is important to consider colour of ink. Even though for this brief we are designing for screen, I ensured the pink colour was appropriate for CMYK, so the designs are consistent, however this is not as important in this case but still good to consider.

Another alternate mock up of the website. This felt more simplistic, but also had a much darker vibe, which in some cases does work for this genre of band. However, the album 'Free' represents a less sinister vibe in my opinion so this idea may not work as well as the other aesthetic. I kept the same concept of 'unlocking' the song, however next I need to develop this idea further somehow. 

OUGD503 / STUDIO BRIEF 01 / PENGUIN / FEEDBACK

After showing my design to my peers, I asked them three questions to get a better understanding of how effective my resolution is:

Can you tell what the image is?

"No sorry"
"Is it stallegmites?"
"Looks very eerie but you'll have to tell me what it is"

This was expected. I had highly manipulated that image to avoid copyright issues, but the eerieness of the image was obviously communicated which is a bonus for me. The idea is to get the reader a sense of foreboding, that something is not right.

What do you think about the overall layout?

"Love the type, looks very modern and interesting"
"The positioning of the elements looks very comtemporary, so if thats what you're going for thats great. The image is unclear but looks very cool too. I like it!"
"I like what youve done but I think the background should be darker to reflect the eerieness of the image."

After I explained what the image actually was, I asked:

Do you think this concept is appropriate?

"Definitely, but I didn't know what it was to start with"
"Yes now I get it!"
"Yep!"


Hopefully if I get shortlisted for this brief I will get my opportunity to explain to the judges what the image is, and why I used it.

OUGD503 / STUDIO BRIEF 01 / A CLOCKWORK ORANGE / DEVELOPMENT

Above are experiments with colours and distortion tools, using an image of the UK. The idea was to make it so it very very loosely resembles Britain, and is more distorted than clear. I wanted it to appear eerie and dangerous, making it obvious to the reader that something has gone wrong. 

Using these experimentations, I began mocking them up with the guidelines.

I applied effects to the type as well to further amplify the distortion, whilst keeping it legible and bold to ensure it grabs an audiences attention. I feel I am heading in the right direction with this brief and have produced interesting responses however it would not hurt to develop it further, with perhaps a different image that communicates the same message, as I may encounter copyright problems with the image I have used already. After revisiting these designs I also feel they are too sickly, there is a lot of different colours going on within the image, so I would like to explore my other options for the brief and see if I can come up with something I feel is more attractive.

OUGD503 / STUDIO BRIEF 01 / A CLOCKWORK ORANGE / GLITCH EFFECT

Above are examples of the effects I'd like to experiment with further for this penguin book brief alongside pixel sorting. The glitch effect is a concept that represents the book plot as a whole, communicating the 'glitched' society that has become dystopian and full of violence. The cover will hopefully grab an audiences attention when being sold amongst other fiction books in a shop because of the bright colours I plan to use, alongside text choices.

OUGD504 / STUDIO BRIEF 04 / INITIAL WIREFRAMES

Wireframes are a useful way of communicating the fundamentals of a concept before going ahead and diving in. It is a great way to show the client the basic gist of a design before wasting time and designing something that is not appropriate or what they want, and ensures the designer can quickly and easily change certain aspects. 

Creating these initial wireframes created a super starting point and made it much simpler to develop ideas digitally. After experimenting with these, I will begin to design on Photoshop to see if these ideas work well, or if I need to revisit this technique and develop something else. Below are different examples of ideas for the desktop website. 

OUGD504 / STUDIO BRIEF 04 / IDEAS

The campaign needs to accumulate a lot of hype and popularity using various platforms and methods. This is crucial for the brief as it is mainly about designing for the user and taking into account their experience digitally, in order to gain as much traffick and publicity as possible.

As a starting point only, here are several ideas that could be developed further, into a strong concept.

• Two 'unlockable' songs when subscribed to the newsletter both weeks prior to the launch.
• Various limited edition merch uploaded to the webstore promoting the launch of the album. 
• Tour promotion
• Giveaways on various social media (mainly Instagram using a hashtag).

OUGD504 / STUDIO BRIEF 04 / HUNDREDTH

HUNDREDTH

I have chosen to design a campaign for Hundredth's latest album release, 'Free'.


Another important aspect of Hundredth is their charity work. Here are some examples:

Hope Into Humanity

Hope Into Humanity was a non-profit organisation launched by Hundredth. Vocalist Chadwick Johnson says: "Hope Into Humanity is about getting back to basics, and about realising our human responsibility of doing everything we possibly can to help other people, whether it be across the world or in a back yard. We're just starting this thing from the ground, and basically we want to unite with other people like us who want to see some change in the world, and if we unite together, our resources combined, and we get together as one we can make a difference, and I think that's what Hope Into Humanity is all about."

The Water Cause

Starting on the 1st January 2012, the band united with fans to raise money to provide clean water to people who are deprived of safe drinking water. In a statement by vocalist Chadwick Johnson on The Water Cause's promotional video, he says: "Hope Into Humanity is about getting back to basics, and the most basic necessity of humanity is water, so the first thing we want to do is launch The Water Cause.'

This isn't about what religion you may follow, or what political stance you may have; this is about being a human, and taking care of humans that breathe the same air that we do but don't get the privilege of drinking the same water that we do, and I feel recognising that need and doing what you can to help others meet that need is what this thing's all about."

Through the campaign, they raised over 10,000 dollars and provided 2 villages in India clean water forever.

Since this is something the band has formed themselves, it would be an idea to incorporate this into the campaign, however this could be challenging as charity does not involve gaining profit, and the main focus of the campaign is to promote and increase sales of the album and ensure chart success. 

Through researching on spotify, it displays how many monthly listeners there are from different locations around the world. As seen above, a large amount of Hundredth's demographic comes from various places in the U.S, and the UK.

Looking at bands of the same genre, it also showed that the most listeners came from Los Angeles and other places in America, demonstrating that this is the key audience and where the most listeners live. However, through designing this campaign, the designer must consider each key audience (UK, Germany, France, US & Australia) and try and engage with all of them to ensure as much sale and traffic as possible.


LEAN PERSONA

The main purpose of a lean persona is to gather information and create a 'narrative' about a generic member of an audience you are designing for. Below is an example for Hundredth.

Image:

Info:

From: Los Angeles
Age: 20
Marital status: Single
Family arrangement: Divorced parents
Job: Custom skateboards


Behaviours:

• Interested in a variety of hxc music
• Straight edge/vegan
• Gets tattoos with wage
• Promotes anti-violence
• Collects vinyls

Needs and goals:

An aesthetically interesting and engaging website that connects the user with the band by various methods. Easily navigated and neat/concise. Reflects style of music and has a unique feel. Allows the user to feel included and keep them on the page for as long as possible. Fundamentally promotes sales in various mediums (CD, digital, vinyl). 

OUGD503 / STUDIO BRIEF 01 / A CLOCKWORK ORANGE / DEVELOPMENT

Here are examples of the satellite pixel sorted image, combined with bright colours. Orange obviously reflects the title of the publication, and the use of blue represents the opposite tone of orange,  referring to the dystopian way of life, how it is the opposite of calm and peaceful and utopian. There is also a black and white version of the image paired with the same tone of orange, paired with a sans serif font to bring the book cover a modern element. The words are spread out in an appealing and contemporary fashion, filling space. The penguin logo and author would need to be added to these examples if they were to be submitted.

Next moving on from the bright, bold colours are examples of the imagery and text in simply greyscale. Greyscale reflects the grim nature of the violence and hurt that exists in the society set in the book, alongside the 'glitched' effect. This image is zoomed out so you can almost see some of the outlines of the UK. The circle in the middle of the page would represent an actual orange, and adds contemporary looking shape to the design. The text is a monotype, reflecting the word 'clockwork', linking to digitalised looking shape. It is also bold and eyecatching, however I still thought it needed development. The text on the left hand image is as small as the author, and only really gets the audience's attention after they have seen the large black circle which is not the effect I want to achieve.

 

The coloured versions of the same layout look much more engaging and 'digital', capturing the glitched effect that the pixel sorting process creates to a more effective level. The purple tones paired with green create a garish composition, creating a sense of discord. Along with overlaying the image (the righthand example), this instills disorientation and chaos, whilst unsaturating the image captures the grim ambience also maintaining colour.

Above are simply experiments with colour to create different vibes and tones.

 

Here are examples of experimentation with type. I felt that the text in the middle could be lost by the busy imagery, so I aligned the circle and type to the lower left side where the image is more clear. I preferred the layout with bigger text set in the middle however. The righthand image conveys the example of type that has been edited and liquified to look warped, again further intensifying the disorganisation of the layout to reflect the plotline. 

OUGD504 / STUDIO BRIEF 04 / TARGET AUDIENCE

It is important to determine the target audience in order to design a resolution that is as appropriate and successful as possible. If the target audience was the older generation, and the website was very futuristic, modern and essentially confusing for those not exposed to the internet, then the outcome would not be as successful as the audience would not interact with the product as effectively, and vice versa. This is why it is important to ensure that the target audience is acknowledged and taken into account.

I am designing a campaign for the band Hundredth, a melodic hardcore band from South Carolina. This genre of music tends to appeal mostly to younger adults of an age range of around 15-25 with an interest in heavy music or the 'hardcore scene'. People of this age range may or may not have a high amount of disposable income and so I must take this into account whilst designing for this band. 
 This demographic, from my own observation on social media, generally have a lot of high morals such as adopting a vegan or straight edge lifestyle, and are quite conscious of pressing issues.

I took a look on their followers on Twitter to see the type of individuals who are interested in the band and want to keep up with updates, since social media is a very powerful tool for promoting brands and campaigns. I would need to bare in mind the target audience and try and design something that would engage this demographic.

As seen above there is a lot of straight edge individuals, which connotes a sense of anti-violence and strong morals that the band themselves adopt in their music.

Hundredth also own quite an extensive merch store, meaning those who are interested in the band may also be interested in band merch and that particular style of clothing as a whole, which opens up some opportunity to develop a specific aesthetic that will appeal to this audience. 

OUGD504 / STUDIO BRIEF 01 / A CLOCKWORK ORANGE / CONCEPT

Since the book revolves around a dystopian version of Britain, lashed with a subculture who adopt a lifestyle of ultra-violence, deliquency and crime, a concept I generated included the process of 'pixel sorting', which alters the state of the pixels within an image. I wanted to interpret a 'glitching' effect to represent the state of the society set in the plot and capture that it had gone wrong, and effectively downhill.

Using this method, I experimented by pixel sorting a satellite image of the UK.

This gave such an interesting effect, that could be used to add texture and concept to the book cover. 

OUGD504 / STUDIO BRIEF 04 / CONSIDERATIONS

Since the brief is revolved around designing for screen, there are a number of considerations to take into account to guarantee that the user has a high quality and engaging experience whilst interacting with the interface.

This includes dimensions for the variety of different formats in which you can view the web on today. For example, a Macbook screen vs an iPhone. Each has their own size and resolution that must be taken into account during the design process to ensure that they are correct and functional.

The designer must research the correct dimensions and cater the design for this. A suggestion would be to find the largest and smallest common devices;

iPhone 5: 320px by 568px 

Expanded desktop: 1600px by 1000px 

Establishing a grid system could be a great way to install consistency and make design decisions easily, and since this design would be coded, it is important to acknowledge and bare in mind that the wireframes & designs would have to be realistic and able to be replicated by coding.

Fonts are another important aspect to consider as all fonts are not available to use on the web, although there is still a large amount that is usable it is good to check this, to avoid having to substitute a font at the last minute, hindering the look of the design. 

Considering the budget of the font is also beneficial as some can be expensive to license which could make the client frustrated when the designs have already been signed over.

To make things easier for me as the designer, when mocking up files in Photoshop, organisation is key; layers should be named and grouped appropriately, saving time for me, and a client could find files efficiently and quickly, as they may not be familiar with how I work. 

OUGD504 / STUDIO BRIEF 04 / COLOUR

By colour picking from the image of the album 'Free', this creates a palette of colours which are calm, warm and dreamy. Applying these colours to the campaign design would effectively reflect the album that is being released and also represent the colours that are utilised on the cover art. This reinforces the theme and brings about a certain hype for the album to be released.

Since this project is heavily screen based, the designer would work in RGB mode. There is a lot more freedom regarding colour choices as there is no need to have to consider CMYK options unless the designer plans on creating extended deliverables that would be printed.

OUGD504 / STUDIO BRIEF 04 / FURTHER BAND RESEARCH

Narrowing down the options for brief 4 entails some research into a small number of bands and their current website and latest album release.



Hundredth

 

http://www.hundredthworldwide.com/

Hundredth is an American melodic hardcore band from Myrtle Beach, South Carolina, that formed in 2008. They unite fans by delivering a message of hope and anti-violence. Their latest album is entitled "Free". Hundredth have a polished, stylish aesthetic that is brought into their website, branding, merch and album cover art that has been clearly developed throughout the band's career. 

The website initially shows an image of the band members, utilising a grunge texture alongside calming tones. Scrolling down the website the user is then presented with the latest album release 'Free', including a spotify stream widget, and options to order the album on vinyl. This tactic is useful as the user is immediately greeted with the latest album, pushing them to listen and effectively purchase it or add it to their spotify playlist. 

Each 'page' is accessible through scrolling or the user can simply click on the navigation links which do not disappear at the top of the page to quickly show a particular page.

The band include all of their discography and how to purchase/stream them on their website too, useful for long term fans to find their favourite album easily.

Architects

 

Architects are a British metalcore band from Brighton, England. Their latest and most successful record to date is 'Lost Forever // Lost Together'. Architects' branding mostly involves work done by Sneaky Studios, specialising in intricate and dramatic design which amplifies the band's image. The mostly dark images reflect the heavy music genre.

Architects website initially shows an image of their latest tour date with Deftones at Wembley. However the website does not contain any navigation links, meaning the user has all the information they need on one space, although this does not look as professional or interactive. 

Capsize

 

Capsize are a melodic hardcore band from California. Their latest album, 'The Angst in my Veins' features a very natural looking imagery with no text. I feel this image has a stark contrast with their music and album title, but working with a campaign for this particular album may be either very engaging or quite challenging. 

As for the website it is functional and clean. The simplistic layout enables the user to easily find what they're looking for and effectively navigate through the pages. However, this website is not as aesthetically attractive as Hundredth's, comparing to their smoother looking website.