OUGD504 / STUDIO BRIEF 04 / STYLESHEET

After the designing is done, the work will be handed to a developer, and he/she will then begin to take the design decisions and code them up so the website is consistent. It is important to demonstrate to the developer a guideline that they can refer to when coding. This conveys that the designer has considered the developer during production, and although it is not the designers role to code the website in most cases, a brief knowledge of CSS and what sizes and typefaces to include is helpful for the developer to look at and ensure uniformity.

OUGD504 / STUDIO BRIEF 04 / PROMOTIONAL

Alongside the designing for screen it is also important to consider promotion via print. Nothing gets a fan hyped up for an album more than the release of tour dates, as they will eventually get chance to hear the new tracks live. Above are alternative designs for a tour poster, which would ideally be posted on social media or plastered on walls and signs around major cities.

Above is an example of the band posting the dates on social media, generating more hype.

Mock ups of the band's tour poster

Alongside this tour poster, it would also be a great idea to use Hundredth's logo on its own to create a presence outside of the internet. Fans of the band would know that this is their logo and question why the poster is there, prompting them to check social media. People who aren't aware of the band will question what the logo is, generating more attention.

This poster can also be placed in magazines fitted to that genre (rock sound, kerrang! etc) attracting more fans to visit the website and gain sales for the album. Again, anyone who purchases the magazine will see the advertisement, and will further gain popularity and hype for the new album by the audience of the magazine visiting the website.

OUGD504 / STUDIO BRIEF 04 / MOCK UPS

In order to get a feel for how the design would look on a device, it is a good idea to mock them up using digital mock ups. This demonstrates to a client how the design would work, whilst placing it in a live setting.

Desktop version.

Mobile version.

OUGD504 / STUDIO BRIEF 04 / MOBILE WEBSITE

ENTER

Just like the desktop version, the user is greeted with Hundredth's logo, the keys. Due to limitations with coding and animation, it may not be possible to animate the logo, in this case, the keys can still act as the welcome screen and simultaneously be a link to the main page. Alternatively the user can simply press the hamburger button on the top left to bring up the navigation links. On the top right is the pre-order button that will hopefully boost sales as it is in a very obvious area. 

NAVIGATION

Again, adapted from the desktop website, the navigation page is simply a narrower version, displaying the links and the social media buttons effectively. The contrast of colours in regards to imagery and text should pop on screen and bring the page to life.

PRE-RELEASE / UNLOCK

Here the user can unlock the song from the album, Unravel, exactly the same as the desktop version, just condensed to fit. 

EVENTS

Again due to limitations, it is important to consider that things cannot be adapted to mobile versions. The desktop design features an interactive map that may only work effectively on a larger scale so the user can fully access the feature. With the mobile version, the user simply chooses their location from the drop down bar. On this option all regions will be available as well on the list as opposed to selecting your state or region on the interactive map on the desktop version. 

POST RELEASE / PURCHASE

This would be the main index when the user enters the website after the album is released, bombarding them with different options to buy the album to make it fast and accessible, boosting sales.

POST RELEASE / VIDEO

The user can also watch the video for unravel, by scrolling down from the main page, this will automatically begin playing.  

OUGD504 / STUDIO BRIEF 04 / DESKTOP WEBSITE

INITIAL ENTER PAGE

Similar to previous development, the keys are the first thing the user will see when visiting the website. They can either scroll to access the next page or click the keys to achieve the same result. The keys are also an interactive element in another aspect; when the user rolls over with their mouse, it will react by 'breaking'. If this idea was to go ahead there would need to be a lot of knowledge of javascript or jQuery and may increase the budget, however this will engage the audience and add something a little extra to the website. This could be difficult to replicate on the mobile version however there are less limitations with the desktop version due to coding techniques.

UNLOCK

Again a final development of the original idea of unlocking a free song, 'Unravel' to get a taste of the album to come. This would obviously be available before the release to get the user hyped up to hear the rest of the record. In order to gain more interest and generate more hype, the user is also prompted to share this on social media, by sharing the hashtag #HundredthFree. By creating a presence on social media such as twitter, the band can gain popularity by their own fans and also attract new fans that come across the hashtag. The band can also create hype themselves by retweeting their own fans who share the hashtag, further reinforcing the campaign / album release.

NAVIGATION

To navigate throughout the website, the user can click the hamburger button on the top left, which is one of the first icons the user will see naturally. When clicked, a full screen menu will fade in with an inverted version of the eerie tree texture to add some contrast and brighten it up. Each of these links takes the user to the selected page, however the user can also scroll on the main page to access some of these links by using scroll hijacking to swiftly navigate onto the next part. For example pre-release, this arrow would link them directly to the events page. This would have to  be well coded to ensure the transitions are smooth and professional.

Extended version with all of US event dates

Extended version with NC selected

EVENTS / TOUR DATES

Alongside a promotional tour poster that will be printed and placed around towns, signs and magazine coverage, there is an interactive maps page where the user can select their country from the 5 key promotion points  (U.S, Australia, France, Germany & U.K) and locate tour dates and signings in their area. This can be done interactively by clicking on their State, or just simply selecting the country at the top bar to see all the dates for that country. When a section of a country is selected, this area will be solid fill to make it clear. This would again require knowledge of coding however it would be an impressive element to the website and make discovering tour dates engaging. Adapting this idea to the mobile website would have to be more simplistic as it may not be suitable and too complicated.

POST RELEASE

During the post release of the album the main page will simply contain options to buy the album on Vinyl, iTunes and CD, which when clicked will transport the user to the appropriate third party website the band chooses, may that be Amazon or Apple or their own page.

If the user scrolls or clicks the arrow they are also able to watch the new video for the single that could be unlocked pre-release, Unravel, full screen. This keeps the user on the website for as long as possible.

OUGD504 / STUDIO BRIEF 04 / FINAL WIREFRAMES / MOBILE

Adapting my desktop wireframes onto a mobile dimension will make the process of designing much easier and less challenging. During this stage, although these wireframes are rough guides, it will allow me to have everything I need to begin considering how this will look mocked up more professionally. 

It is important to remember that the dimensions of the mobile are obviously completely different, therefore sizes of the elements must be changed to appropriately fit with the page, which means that some parts may be more condensed, larger or smaller.

The wireframes have been separated into prerelease of the album and post release. 

OUGD504 / STUDIO BRIEF 04 / FINAL WIREFRAMES / DESKTOP

Making wireframes gave me a great insight into creating the desktop / mobile designs. The main index would look very similar pre/post release of the album to maintain consistency, a user that visits the page before the album is released and afterwards will recognise the aesthetic and already have a schema for how to navigate and utilise elements of the website. There will be a burger button for navigation and a preorder box at the top, useful for gaining sales as the user will see this initially and their attention will be drawn to it, if the user reads the page from left to right from the top.

There will be a large feature image, perhaps the word "FREE" to reinforce the album and keep the name in the user's mind throughout. There will also be an option to unlock a single from the album to tease the user and give them a sense of exclusivity and a sneak peek of what the record has in store. The user can also then be prompted to share this, through a hashtag on social media to generate more traffic and questioning.

Post release, there will simply be the option to purchase the album in all the different forms, digital, CD or LP, keeping the large text on the page.

The navigation will be simplistic, utilising imagery that captures the essence of the album and looks aesthetically attractive. The user will be able to navigate to each page by clicking links on this page. Icons to social media are also available here.

Another element to the website could be a video of the single, perhaps within the last time frame whilst the record is released.

 For this section, the user can view tour dates, signings and events in their area by selecting their country and futhermore mousing over and clicking their state or region. The content will change depending on this, or the user can simply view the entirety of the dates by just using the drop down menu and selecting their country without selecting their region. This is a great way for the user to quickly find a date in their area, and especially useful for countries such as the U.S who have a lot of area to cover, meaning a lot of tour dates.

OUGD504 / STUDIO BRIEF 04 / GRID

The simple 2x4 grid can be versatile and made it easier to create the mobile website by simply using a narrower version, easily laying out the various elements for example hamburger button and preorder button. The main body containing the word 'free' is always completely central, with the bars correlating with it accurately. This grid is loose and other designs could easily adapt to it. Alongside wireframes, it was useful to construct a grid to create order. 

OUGD504 / STUDIO BRIEF 04 / RESEARCH / INTERACTIVE

For my own design I would like to incorporate an element that is interactive for the user, engaging them more in the experience.

Jamie xx

Jamie xx's website contains a very interactive element, using his album artwork to provide an engaging and vibrant experience for the user. After the spectrum disintegrates, the user is then shown various songs by the artist which when hovered over the link, the background changes and only the song and links in the bottom right are shown. This ensures that the identity and theme of the artist is portrayed throughout the website, and is interactive and fun.

Chvrches

Chvrches website immediately pops up with a window promoting their latest album 'Every Open Eye', providing a box that the user can view videos and purchase the album via the links. Upon closing the pop up, imagery of the records artwork appears in the background, followed by squares of solid colour, colour picked from their artwork. When the user hovers over the squares, various links to other parts of the website are shown.


Both of these examples are fairly great in demonstrating ways in which to engage an audience by involving interactive and relevant features on their websites.

OUGD504 / STUDIO BRIEF 04 / ALTERNATIVE IDEA

After the crit it became clear to me that although my idea was aesthetically sound, it was not as suitable for the brief as it possibly could be. This was because of a couple of reasons, most importantly the aim of the website campaign is to be 'throwaway', and only used to promote the new album. The design does not need extra navigation links as it is not the bands main website. Perhaps a link to this main website would be a good idea, however, but the extra information and pages is unnecessary.

I also need to keep it more involved with the band's wherabouts and events, perhaps add information on signings, gigs and try to incorporate their social medias into the interface.

I may also try a different direction regarding the aesthetic to further engage the user and keep it as interactive as possible, yet keeping it realistic and considering that the developer would have to code it.

OUGD504 / STUDIO BRIEF 04 / SCREEN DIMENSIONS

1366x768 is the most common desktop screen dimension to use, therefore it's a good idea to develop the website using this, however in today's age it is important to consider that there are now different common dimensions for example the introduction of retina displays. I would like to consider this too when designing. 

"All 15-Inch Retina Display MacBook Pro models (A1398) have a 15.4" color display with 2880x1800 native resolution at 220 ppi and all 13-Inch Retina Display MacBook Pro models (A1425, A1502) have a 13.3" color display with 2560x1600 native resolution at 227 ppi."

For the website I will be designing two versions, 1366x768 and 2560x1600 to demonstrate versatility.

OUGD504 / STUDIO BRIEF 03 / PEOPLE OF PRINT

On instagram I received a direct message from the page People of Print, requesting that I send them a copy of my publication for brief 3 along with some details about it. This was refreshing to see as I keep up with instagram a lot in my spare time and it is great to see that my work has somehow reached a page with a large following, and rewarding that they have requested a copy. I have booked in a slot to print the publication out again and will be sending it over this weekend.

OUGD504 / STUDIO BRIEF 04 / CRIT W/ ONLY

After showing my developed ideas so far, it was great to receive positive feedback. This was mainly on the visual aspect of my design and also the way I had responded to the brief was apparently appropriate. However, what I had not thought about as much was the global aspect, and how to appeal to the various different audiences. I should look into distinguishing or filtering parts of the website to show that I have considered the audiences specified in the brief.

I am pleased that it shows I have a good starting point, but I need to develop my ideas further to make my response more successful.

OUGD503 / STUDIO BRIEF 01 / D&AD / DESIGN BRIDGE

BACKGROUND
Within branded packaging, the beauty category is among the most clichéd. Why do men’s personal care products look like power tools, whilst women’s remain delicate and ultra feminine?
The world has moved on. Facebook now offers 56 gender de nitions for users to identify themselves with. The use of hashtags like #transisbeautiful or #effyourbeautystandards, and Charli Howard’s open letter to the fashion industry, show how conversations around beauty are changing. But beauty brands aren’t keeping up.

THE CHALLENGE
• Create a new-to-world, accessible, mass-market beauty brand that breaks established category codes.
• Your brand should be a response to some of the issues with which modern, post-demographic consumers identify: gender stereotypes, healthy body image, environmental concerns, or any other issues you feel are relevant to users of beauty products today.

WHO IT’S FOR
Consumers of beauty products, of all gender identities, who want a forward-thinking beauty brand that re ects what matters to them most.

WHAT TO CONSIDER
• Why do gender stereotypes persist in this market?
• Why do so many beauty brands continue to promote an unrealistic body image? • Why do concerns about health and environmental issues remain at the forefront
for this category?
• Consumers demand brands that operate sustainably and re ect their values. How
can your brand confront these issues in a way that’s genuine and authentic? It
should embody the values, not pander to them; represent, not patronise.
• You will need to create, name and package a brand that re ects some or all of
these values, and speaks to the discerning consumer who refuses to be boxed in
by stereotypes and demographics.
• The type of products are up to you (makeup, hair-dye, skincare...) but consider
what would be relevant to your audience, and what they’d be likely to want and use.

WHAT’S ESSENTIAL
• Create a concept and explain how it encompasses some or all of the relevant considerations
• Find a name which re ects the brand’s values
• Design packaging that embodies your brand and show how it could work across a
range of different products (at least three)

WHAT AND HOW TO SUBMIT
See ‘Preparing Your Entries’, included in your brief pack, for full format specs – work will only be accepted in the formats outlined.
Main deliverables (mandatory)
Present your solution using up to eight presentation slide images.
Supporting material (optional)
The judges will only look at this if your main deliverable has impressed. This could include executions or mock-ups of your solution, or show your process and the development of your idea.
You can submit the following as optional supporting material: video (max. 1 min), interactive work (websites, widgets, apps, HTML, etc.); physical material (prototypes, mockups, etc). 

OUGD504 / STUDIO BRIEF 04 / DEVELOPMENT

Here is a mock up of the website. Firstly there is the home screen, with nothing but the key logo there. The user is prompted to click this, which will trigger a transition to the main home page. This decision was made as it is a way for the user to interact with the website, playing on the 'unlocking' theme which matches Hundredth's key logo nicely, whilst keeping it interesting. For added effect, photography of nature has been used to represent the album's name, 'Free', the user will associate freedom with nature. 

The main index contains a box for the user to enter their email and sign up to the newsletter. Doing this, the user will 'unlock' a song from the album that is only available through signing up, giving a sense of exclusivity that a fan enjoys. This will happen 2 weeks prior to launch and 1 week prior, unlocking songs 'Unravel' and 'Inside Out'. The aesthetic is kept clean, contrasting with the business of the trees which is still kept visible as a footer bar for the icons.

My idea was to have three 'pages' that do not need navigation links on the mast head, rather, they scroll themselves and alternatively the user can click the buttons to navigate to one of the pages quickly without having to leave the page entirely.

Taking into account other platforms is crucial as not everyone will view the website on a desktop or macbook. The design needs to be versatile. Above is a demonstration of how the mobile website would look. The user would be automatically directed onto the main page (image one), and to navigate through the website they would tap onto the menu button. Doing this then prompts a drop down menu where the user can select their desired page. This ensures that the mobile website is interactive yet keeps information and links concise, clean and tidy, only appearing when the user wishes. Allowing the user to be able to close the tab creates breathing space for browsing the website.

I also have begun to consider social media and how to generate hype on there for the fans who follow the band. I tried this by using the concept of a giveaway, by creating a specific hashtag #hundredthfree. Fans will then see it from other people they follow and it will create a chain reaction, hyping them up for the album with the prospect of winning a prize.