Studio Brief 4 - Colour Contrast Checker For Website

When we had our final crit session with Only, they gave me a website to look at in order to check whether or not my website had enough contrast for people to see and more importantly people who have colour deficits. I want my website to be usable for everyone and that includes people with disabilities. By using this website Snook it showed me how visible my type was on my site.

All you have to do on the site is to write down the RGB colour code of your foreground and background colour and from this algorithm it will give you a set of results based on brightness & colour difference, contrast ratio and how visible certain size text will be to the viewer. The AA, AAA letters mean the different variations in text size.

Explanation below:

"The tool will also indicate if the colours pass the newer WCAG 2.0 contrast ratio formula. The WCAG 2.0 formula differentiates between text smaller than 18pt text larger than 18pt (or text that is bold and larger than 14pt). For AA compliance, text should have a ratio of at least 4.5:1 (larger text, at least 3:1). For AAA compliance, text should have a ratio of at least 7:1 (larger text, at least 4.5:1)."
http://snook.ca/technical/colour_contrast/colour.html#fg=FFFFFF,bg=000000

From the result, everything came out positive in terms of visibility and colour contrast. It's great to know that someone with vision problems can also use the site to it's full potential is productive and gives my concept of spreading positivity more appeal.

Studio Brief 1 - D&AD Crimewatch - Target Audience

The main demographic that watches Crimwatch has already been mentioned within the New Blood brief. "Crimewatch has a diverse audience and your solution needs to consider this. Notably it reaches more younger, BAME (Black, Asian and Minority Ethnic) and less affluent audiences than the average BBC One factual programme. Female viewers also outnumber male ones. " You can look at this piece of information and think that you should only be creating your concept around young audiences as they are the ones who are engaging the most with the show. However, It's an opportunity to engage all audiences from any background and class. Crimewatch isn't produced to aim at a certain target audience. It's main core is to reach out to everyone and to ask for help in criminal cases and that's something that everyone can get involved with.

The main thing to think about is, what's it about Crimewatch that makes more young people watch it, especially females. What makes them want to watch it more then older audiences. One theory could be that, most crime involves younger people, therefore making it more appealable for a younger audiences. Another could be younger people are more interested about seeing the details of a crime and the reconstruction, to them it could be exciting to watch, something that the older audience has seen plenty of before. Lastly, females could be watching it more as a subconscious sign for safety, knowing that a lot of girls are sexually attacked they could be watching it as reinsurance.

When coming up with the concept/idea, It will be extremely important to try and engage all audiences to watch Crimewatch. Giving them an experience that they feel like they wanted to help, a personal connection with the crime. Making them feel apart of the crime, getting them to be the investigator and not just the viewer at home eating their dinner. 

When creating new ideas for digital platforms, it's easy to get carried away with technical and complicated applications and websites and this can effect the usability with older people. Older people aren't as tech savvy then the younger generation, therefore if a mobile app or application was to be created, it's best for it to be functionable across all ages, which also includes disable people. Making a more open and fluid experience that can reach out to anyone, as the more people crimewatch can reach, the higher the chance of someone knowing something that can solve the crime.

Studio Brief - D&AD Crimewatch - Brief Breakdown

The Challenge

 Crimewatch is live ‘event’ television, which airs every 5-6 weeks – it doesn’t have a regular slot. And it’s only available for catch-up viewing on iPlayer for 24 hours after transmission. How can the BBC maintain engagement outside broadcasts? Crime happens all the time. Crimewatch should too. 

At the moment, digital reiterates and supports the programme’s content. The BBC want to create a digital solution that’s part of the Crimewatch experience; that leverages and enhances the existing Crimewatch offering. How can they best maintain the live action momentum of the programme and create a compelling relationship between television and digital? 

My understanding of this section is that the main focus of the brief is to create a digital resolution of Crimewatch. Taking it from T.V and finding new and inventive ways of translating the crimewatch experience into a digital platform. How can it engage with it's users outside of broadcast hours, Crimewatch is only on for every 5-6 weeks, therefore how can you find a solution that will keep the user active, interested and engaged when the program has been off air for 5 weeks.

Who's It For?

 Crimewatch has a diverse audience and your solution needs to consider this. Notably it reaches more younger, BAME (Black, Asian and Minority Ethnic) and less affluent audiences than the average BBC One factual programme. Female viewers also outnumber male ones.

As we can see from the text above, the main audience who engages more with Crimewatch is the younger demographic of ethical backgrounds. It's important to find a way of reaching out to all ages and backgrounds. Any one could be the missing piece of the puzzle when it comes to solving a crime, so It should be paramount, when designing a digital solution to make sure the user journey is suitable for all audiences and doesn't disregard or outcast a certain demographic. 

What To Consider

• This brief is about thoughtful service design rather than a whole new product. You don’t necessarily need to create a new platform from scratch – you might find a better solution using existing ones. Think strategically: how can you leverage the power of technology and existing platforms and apply it in fresh, engaging ways? 
• Consider audience behaviour and routines. What touchpoints, platforms or technologies are they already using? Don’t feel confined to BBC platforms: how can the Crimewatch brand extend and translate into other spaces? 
• Could you expand the idea beyond digital? Think more than just another app or website – how does this translate into the outside world? 
• How do you raise Crimewatch’s profile given irregular scheduling and lack of promotion? 
• Can digital enhance the live broadcast as well as bridging the gap between live shows? 
• Could you incorporate elements of storytelling to make the audience part of the Crimewatch experience? Crimewatch has always been an inherently interactive experience. People just picked up their phones in the pre-internet days. So this kind of viewer immersion isn’t new to the brand. 
• Crime can happen to anyone. How could digital platforms help turn Crimewatch from a national television programme to a localised, relevant and personal experience? 

Breaking down the considerations of the brief, Its important to not go over board when coming up with ideas. In the first bullet point it says "You don’t necessarily need to create a new platform from scratch – you might find a better solution using existing ones." If the idea gets to complicated then the brief may become overwork and the concept lost. Most times the most successful ideas are the most simplest. 

User experience and journeys is a big highlight point when looking through the considerations. Seeking out the users behaviour and routines, finding out how the user would react to the concept. Will one group of users behaviour differ to another depending on demographic. If you research effectively and work with the intended user then the product and concept will be more functional and stronger. How could you take this brief out of the digital spectrum. Taking the concept away from digital will enhance the concept and make it more personal and fluid for the users to be able to use a product that can strongly function in all platforms, online and offline.

Story telling is the main component of this brief that will set you apart from the other competition. Bringing your concept to life by incorporating it within a story will bring your concept and ideas to life, it perfectly communicates your idea to the judges, so that they can understand your vision for the brief. It allows the audience and judges to connect and feel like they are apart of your story, a tangible connection between you and the target audience is very powerful in conveying your agenda.

Clockwork Orange - City Illustrations

As I'll be creating a city scape for one of my ideas, I thought It'll be a good idea to look into how other designers have created cities using illustrator as the main medium, especially when my knowledge of a city scape and what to include isn't as strong. The main outcome from this research is to find inspiration and to see how you could illustrate a whole city without overpowering the design. What I know so far is that I'll be using a isometric grid to create my city so the images below should give me an idea of what aspects to use and what features to leave out.

Below are the different styles and variation of illustrated cities.

Simplistic and flat take on a city scape. The city is only limited to a few building and a roads, suggesting that this city may be used for audiences who are a lot younger. The simplicity of the illustration can be easily understood by children, by aspects like layout and the minimal colour scheme. This city could definitely work within a book cover. The city won't overpower the book, which is a big worry. If the design is too overpowering then other important aspects of the book can become lost like the title and authors name.

This city scape is more detailed, using a lot more elements then the previous illustration. Again the colour scheme is still restricted to only around 4 colour, by restricting your colour scheme you can get away with more detail if the colour scheme is limited as it wouldn't be overpowering to the eye and wouldn't clash with other colours around the illustration.

The target audience for this city would be a lot higher as it's more detailed and more intricate. Even though the city looks a bit over powered the title is still easily readable and visible and that because of the choice of type. Using all caps San-serif typeface allows for a readable and legible font. It also helps by using empty space to display the title on.

This illustrative city is based on an isometric grid and is the kind of city that I can take a lot inspiration from as the set up and style is the kind of illustration I have in mind. What I love most about this illustration is from a distance the city looks really detailed and over worked but on closer inspections It's very simple and that's due to the isometric grid. Once one building is done then it's a simple process to replicate the buildings within a small amount of time.

This design is advertising for the donut company Dunkin' Donuts and they have clearly Incorporated donuts within the city, making them a part of the city and running off that theme. Theme is so important, theme gives the concept strength, flow, framework, along with a stronger aesthetic and makes the whole process a lot easier as you can always relate back to that specific theme. Theme is an aspect in which I hope I can incorporate within my design.

Lastly this image could work very well on a full jacket book cover. The city could wrap around the whole cover, so instead of just working with the front cover, the book can be more interactive on all parts of the book including the back, spine and the front of the book. This feature would engage the audience and entice them into picking up the book and looking at the design from front to back and that could be a crucial point where the user decides to whether or not to buy the book, so it's an important aspect.

Clockwork Orange - Mock ups

After taking the images of my hand with the Lego toy and wind up mechanism, It was time to mock the designs up to see how it would look within a book cover. The style I was hoping to achieve was a contemporary style that could set my book cover apart from the rest. A book cover that was different from the rest, implementing a contemporary style and mixing that with a style from the 1960's when the book was first published. As my target audience would be the older generation due to the long jeverdy of the book and film, but I also what to create a book cover that would be of interest to younger people and that's why I'm combining old and new styles together to create a unique cover that works both on the cover and digitally.

Below are the different number of mock up ideas:

For the photo in this mock up I had erased all of the background from the hands and toy and stuck a dotted textured overlay on top of the image. The dotted texture on top of the black and white image gives the design a contemporary feel. The pop art feel of the hands sets the image in the same spectrum as the Lego toy, an unrealistic style. The background colour of orange is used for reference from the title Clockwork 'Orange', therefore I thought it was appropriate and it also contrasted and made the image pop to it's maximum potential.

Gill sans has been used for the title as it's a popular choice of typeface for the Penguin books as you can see below. Also the typeface holds both contemporary and historic properties, being as popular now then it was a number of years ago. Again linking with my style of mixing both contemporary and 1960's style.

Gill sans typeface is a popular choice for penguin books.

This time I left in the background from the image and used it as a contemporary feature. A current trend within Graphic Design is placing text over the top of an image, so this is what I'm replicating within most of my mock ups as it works well with the black and white image. This mock up is structured similar to the previous. However, for this mock up the typeface has been changed to Futura, Futura is legible, readable and aesthetically visual as a title and is also modern. 

The cover has also been structured more in terms of hierarchy. The information setup goes from most important to least. Starting of with the quote that should hopefully persuade the users to see and want the book. Then secondly, the title of the books is bigger then the rest of the information on the screen. The title would be one of the first things the user would spot from across the room and it's one of the reason why a strong, readable typeface should be used. Then under the title should be the authors name. The authors name isn't the most important aspect that needs to be instantly visible but it still needs to be clear in order to give the author some credibility for his work.

Back cover information has been designed within a 2 column grid. Modern look and feel, giving all of the attention on the front cover. Typeface used for the body copy is Apercu, contemporary typeface that is easily readable and makes my contemporary style more tangible. Spine of the book is also modern, It's also the same colour as the background, making it look as if the spine is open, giving it breathable space. I didn't want a different colour for the spin as I felt it would clash to much with the front cover, so leaving it as the same colour as the background allows the whole book to work in sync.

Similar style to the previous book. The difference is the photo on the front cover. The image has overlapped onto the spine. This was done in order for the front cover to interact and be apart of the spine and back cover then just to see the book as just sections. The front, spine and back cover are all the sections, so by making the front cover work with the back cover then it makes the book more visual and gives the user a visual trigger to turn the book over to see how the design has continued onto the back, this should hopefully make the user turn over the book to see more, which could make them buy the book.

The typography on the back is more expressive. Reading the information on the back and translating that into an expressive manner by manipulating the kerning, tracking and leading.

For this mock up, I've used the isometric type that I created for the previous idea that didn't work out. I felt it gave the book both a contemporary and a 1960's feel. It also reminded me of the type in Charlie and the chocolate factory that was made in 1971, so it gives it a link to the when the book first came out and got popular. Also the flow of the typography makes you follow it from top to bottom. So if positioned right, the flow of the page should hopefully first catch the users eyes, starting them off from the top and leading them to the bottom, making sure they see all text that is on the page.

ClockWork Orange - Character Creation / Start Of Idea

To start this idea off I wanted to first create the characters of Clockwork Orange. I decided to design the characters in an isometric grid similar to the images already designed below. By using an isometric grid the characters would all be in a similar style, keeping with consistency and also by using characters in an isometric style, It allows me to easily create the whole city along with the characters quite quickly as the grid setup and structure has already been implemented. Isometric illustration will also give the impression of Lego and Lego's have the connotations of being controlled by the owner which suggests that the city is controlled by a higher powers and this will only be made stronger by creating the characters as wind up toys. Connecting with the crime and disorder created by Alex's gang.

The images below are the references I used in order to create the characters of the city. They have all been created within a isometric grid and are all made up of 3d blocks. I like the unrealistic nature of the figures, as they would be easier to recreate the different kinds of people and characters. If the characters were more realistic or rendered at a higher quality then the whole process would take more time as there will be a whole miniature city to create and it wouldn't be possible in the time frame I had set my self.

As you can see below, the characters I had designed using the isometric grid. The characters are all made only using blocks to make the process a lot easier. The first image you can see that I've used the grid and how I've created the figure with the win up mechanism attached to the back. The rest of the characters below that are all the same set up but in different positions and angles.

ClockWork Orange - Development of idea 3

As I've now gone back to the drawing board due to the previous idea. I decided take a simplistic but contemporary approach with this other idea I had draw up. It may be hard to understand in the sketch but essentially the idea is a hand winding up a wind up toy figure. I felt this idea was such a strong idea as it was the clearest to understand due to it being really simple. The wind up toy would represent Alex in Clockwork Orange, the section of the book where Alex gets experimented on by the government. The hands winding up the toy are a representation of the governments power and control they had over Alex's free will.

This is the initial idea of the hand winding up the toy

To put this idea in practice, I needed a wind up toy that looked like a small person. I searched everywhere but couldn't find one. To get around this I has to compromise and find another way to achieve the idea of a wind up toy that looked like a person. So, I went a brought a Lego figure as they are the perfect size to fit within a hand. As you can see below, I placed the Lego figure into my hand and pretended that there was a wind up mechanism coming out of the back of the Lego toy. Once the photo was taken I would then take that photo into Photoshop and add one onto the back of the Lego figure, that's why it looks like I'm pretending to wind up the Lego toy.

Once I was about to finish the process above and move onto manipulating a wind up mechanism onto the figure, I remembered that i had the wind up toys that looked like a mouth from my first idea. I thought about breaking off  and separating the mouth and keeping the wind up mechanism and simply holding it behind the Lego figure to appear as if it was a wind up toy to start with.

Images below are my attempts of combining the Lego toy and the broken bit of the wind of mechanism.

As you can see the results came out successfully. The Lego figure actually does look like a wind up toy which I was incredibly happy about. My next step is to take the photos into Photoshop and to mock up my idea with a book format.

Clockwork Orange - Development of idea 1

For the first idea in my initial ideas, I came up with the idea of having a wind up toy to symbolise and represent the repressive nature of the government in Clockwork Orange. I liked the idea of a wind up toy to communicate this concept. Wind up toys are full controlled by the handler and once they are let go, the outcome is completely random, anything could happen and that's all down to the control of the person winding up the toy. 

So I went to the toy shop to look at all the different wind up toys, there were loads to choose from but I wanted the mouth toy as shown in the sketch. The mouth to me represents a part of the human body and It's the most verbal place on a person, therefore it relates more to the verbally bullying side of Alex's gang in Clockwork Orange.

Initial idea

So I went about taking photos of the wind up toy from different angles. 

Still image from above.

I Used around 7 of the wind up toys and let them go all at once to achieve an image that communicated an out of control look. A crazy and random movement created by using a long exposure on a camera. The hectic look was the approach I wanted to go for but the main problem was that it's hard to see what's going on. It's not clear and most of the wind up toys are not visible.

Another image of the me letting go of all the wind up toys all at once.

After experimenting with the camera and struggling to get different shots with the long exposure I decided to abandon this idea. Out of all my ideas, this one wasn't as strong conceptually once I put it in practice. Looking at my other ideas, I feel these are more strong in conceptual and aesthetic manner. This idea would of been a lot stronger If i had collaborated with a photography student who knew how to operated a camera better then I did and knew how to get the desired shot and with their advise on the manner. However, I only gave my self a deadline to complete this brief and collaborating wouldn't of been possible in the time frame I was working towards. From the feedback by my peers they concluded that I should move on and try and develop my other ideas as they thought were a lot stronger and had more chance of winning a place in the competition.

Studio Brief 4 - Only Feedback Crit

In today's final crit session, Only the design company was also taking part in the group crits. Only created the content for Brief 4, so it was important for their feedback to see how we all got on. For the crit, I showed the desktop and mobile versions of the site on the software 'Justinmind' this allowed me to demonstrates the designs as if they were live, especially showing the interactive touch points on mobile.

In terms of feedback for my concept it was all positive and wasn't a lot of constructive criticism. My group all liked my concept, which they said was a great way to bring the users back once the album has been release. The main feedback was the text size in the information pop up box. They felt that it was hard to read at the current size and should be set up how I had designed the 'submitting' pop up, as the submitting pop up took up a lot of the page, therefore I would have more space to increase the text size. Below are the information screens where the group thought the text was too small.

The images below are the updated designs where I have used the text within the same style as the 'submitting screen pop up'. You can clearly see the changes I've made from the feedback are a lot more appropriate and effective for the user to fully see the text without any hesitation or difficulty. Overall, the feedback session was a big success, even though I didn't get that much feedback but for the feedback i got, i could effectively implement that feedback to improve my campaign and user journey.

Studio Brief 4 - Social Media

Promoting on social media leads to a greater promotional opportunity, which can be effective and also free if done right. Twitter is the current social media platform at the moment, which is more used with the younger generation between the ages of 16-25. It'd important to engage with the audience to create a buzz throughout all social platforms not only twitter but also Instagram, Facebook, Tumblr and even Snapchat. Trending within twitter is extremely beneficial to get exposure on a global scale. The more you engage the more likely you will end up trending either locally or worldwide, in return this can gather media interest to your campaign making it snowball into something extremely worth while and also free.

To show how my campaign can work within a social media presence, I mocked up how the twitter page of the band would look like and how they would react and interact with their fans to promote the concept and more importantly the hashtag #dearg-d. What you see on the twitter page is the pinned tweet '#dearg-d' Pinned tweets would be constantly top of their twitter feed so any fan who goes onto there page will see the hashtag first of all. Hopefully this would get them wondering what it's all about. The band will also retweet fans using the hashtag in the correct context, using it with a positive message along side.

Retweeting is incredibly beneficial in terms of reaching out to newer potential users. If a band has a lot of follows, a lot of people will do anything to try and get a retweet. For example if Justin Bieber retweets any of his fans they all go mental and from that they gain hundreds of jealous followers. If they know what to do in order to get retweeted then they will do it. By the band retweeting people who use the hashtag #dearg-d then their followers will know if they tweet using the hashtag then they are more likely to be retweeted by the band. It's a win-win situation for everybody, fans actively wanting to use the hashtag not just because of the excitement of the album but also because they want to be retweeted. Therefore, it's a cycle of free advertisement, in return for a retweet.

 (Hope that makes sense.)

Studio Brief 4 - Further Promotion of Campaign

To further promote the album release I thought it would be a good idea to further investigate different ways i could promote the campaign. through different platforms and mediums. So sticking with the digital platform I decided to create adverts to promote the website and to get people interested enough to click through onto the site. On most examples below I have used the website Kerrang! to advertise on. Kerrang! was the perfect site to advertise on as it the main place young people or people who love metal and rock music would go to check out news and music from their favourite bands therefore it would strongly relate to my target audience. If this was a real advertisement opportunity then Kerrang! would be the website to advertise on in order to gather the most interest and click through rates.

I started with advertising on mobile. The main ways companies would advertise on mobile is through a small leaderboard at the bottom of the site. The leaderboard is very small in terms of size, therefore there isn't much room for a lot of information. The way to get around this is to create an animated gif that you can then create more slides transitioning through them with an animated timer. This form of advertisement is easily done through Photoshop gifs, it saves money by not going and getting it produced by a developer.

In terms of information, I tried to limit the information, only showcasing the most important parts and leaving out the irrelevant parts. As the users attention span would only be for a few seconds, therefore it's important to give them the most important information that would either keep their attention for longer or give them what they needed within a couple of words.

Moving onto desktop advertising, you have a lot more choice from the kinds of sizes you can choose from. For example you have MPU, skyscraper, half page ad, full banner and pop-under along with many more. For the website above the ads I designed for was a pop-under at 720x300px and a vertical rectangle at 240x400. These bigger sizes aloud the option to either choose a static ad or a rotational one. The main benefit for the static ad is that you can get all the important information out to the user within a glance, also the size of the static file size is dramatically reduce then if you was to create a rotational gif, which could sometimes limit your design as the site you're advertising on might have guidelines on how big you're aloud to have the advert size.

I decided to stick with a static ad to save on money and time. As you can see i created both ads, one for the text based as and one for the artwork of the album giving the user the full experience of the campaign for maximum potential.  

Moving on to other forms of mediums, I proceeded to create an advert that could be used within a publication. The advert would be full page and would feature within the rock magazine, Kerrang! Advertising inside of print instead of digital may limit the amount of people who you could reach out to but it's more of a physical experience, seeing the ad in print would leave a bigger and better impression then to see the advert within a digital spectrum. 

Studio Brief 4 - After Release of Album, Wireframes

After the release of the album the landing page of the website will change. The whole concept of the site was to get the user/fans of the band to engage by submitting positive messages, so when the site changes it will display all of the message the user has submitted through the count down process of the album. The messages will be displayed as a slide show animation fading in and out every 4-5 seconds but there will be manual button that the user can use to quickly click through the messages. There will also be a share option so the user can share any message they see. This gives the whole campaign a social media buzz, which will create interest in both the album and also in a more positive light. People can see the messages of a source of inspiration, therefore giving the user another reason to visit the site. You could take this concept of positivity further by working with a charity who works with teenagers battling depression or suicide. Using the messages as a talking point to spread happiness, if the fans start sharing the messages then this would give them direct access to other people who would feel the same way, making friends and becoming inspired would only make the whole concept stronger as my target audience is most commonly affected by depression and suicide.

Lastly, this release site will get people coming back to the website after the release of the album. The brief stated that we had to create a campaign that lasted 4 weeks before and after the album release. The site would encourage users to come back to see all of the community's positive messages and to become inspired from them and to also see if their message they submitted made it into the gallery.

This is the wireframe of the site when the album is released. For the sake of the users the general layout of the site is consistently the same in terms of logo, navigation and hierarchy. The message will take up most of the site to attract and get the user interested of what is going on. The sharing option section is directly underneath to give it the best chance of being seen by the user. Direction arrow will speed up the animation if the user gets impatient and wants to quickly scan the gallery at a faster pace. 

What the site would look like on mobile.

Studio Brief 4 - Mock Ups

After creating the wire frames for the digital campaign, I mocked up the designs within Photoshop to see how they would look visually.

When creating the responsive site it was incredibly important to make the transition look effortless and to look as if the site suited the mobile screen and for it not to look forced. Overall, the design suits well within the mobile spectrum. The user journey flows well enough for the user to understand all that is require of them. And best of all it fits within the screen, so no scrolling, which would be annoying for the user to have to part take in where it isn't necessary.

Landing page

This would be the navigation page. Similar style to the 'What's this? and the submitting window, to keep with the consistency aspect. At the bottom is a reminder to pre-order the album. The pre-order feature has been designed at a similar style to make it look like it belongs and not an annoying advertisement.

This is how the mobile would look once the user starts to type their message out. It was extremely important for the input bar and submit button to be visible when the keyboard feature pops up as if not the design could look undesirable and lazy from the designer and developer.

How the input bar would expand if the message was longer than the width of the bar.

Submitting page, similar to that of the desktop version.

This would be the landing page for the desktop site. I've Incorporated the image of a melting Jesus as the featured image to represent the album title and also the messages that run through the songs. The reason for the melting aspect of Jesus was to communicate the depression part of the album. The un-melted section is the part of you that still believes in your self but as depression or mental health takes over then your self believe starts to melt and distort into something unrecognisable.

The input bar as been stretched outside of the image to communicate the cross that Jesus is pinned to and also so the type of the 'G' & 'D' isn't lost within the image. Submit button is centred to allow for the user to easily find it in it's natural position. I also implemented a 'What's this?' link, this feature helps the user if they don't know what the website is about or to help the visually impaired. It's also positioned in an obvious location and is easily noticeable as your eyes would follow the bar from left to right.

The pre-order section is in the bottom left,  once clicked these logos will externally take you to the pre-order page. However, maybe these could be a bit more noticeable as it's a very important aspect to encourage pre-orders. Bottom right is the count down number. This could also be a bit bigger but i didn't want any other feature to interrupted the sombre aesthetic.

This is what the 'What's that?' message will look like. A grey box to capture the users attention while still being aesthetically pleasing to the rest of the design. The box can be manually close but will also be on an animated timer to make it effortless for the user and not for it to become a burden to keep closing everything.

This would be the submitting stage of the website. Dimmed background to allow the box to be center of attention without the site behind it interfering. Simply enough, a thank you message with the message you have entered and with a chance to share that message on social media to increase social present. Underneath the social media icons is a little message just making sure the user know what the message will be used for and when to come back to see all the messages once the album has dropped.