Wednesday 16 December 2015

OUGD504 - Brief 4 - Evaluation

OUGD504: Brief 4: SONY music / ONLY studio Brief

Evaluation 

This brief has introduced me to the sector of designing for web and significantly increased my knowledge of digital design and user experience. The digital campaign is aimed at the target audience of the band using social networking at its core as they are extremely engaged and proficient with these forms of communication making the most suitable form of delivery. Using contemporary technologies such as instragram will further engage the audience as they will naturally interact with the campaign start to engage with it more directly than foreign forms of digital communication that they do not interact with. 

The aesthetic of the campaign follows a clean minimal aesthetic that will appeal to the target  audience and highlights the bands ambient sound, the minimal detailing allows for a simple user interface that will engage and excite the user. This has been translates successfully across the breakpoint demonstrating a knowledge of designing for different resolutions that results in a seamless transition between web and mobile. The mobile site takes inspiration from the instragram app as a familiar interface will make the site more engaging to the target audience. 

Engaging content will ensure the user returns to the site, simply to view and engage with the primary content of photo sharing or to view the blog which will drip feed information and exclusive content to the user in the run up to the album launch. Emails will inform them of new content that will feature, behind the scenes videos, exclusive previews of songs, track by track commentary and competitions, this will ensure the site remains active across its lifecycle and will keep the audience returning throughout the 8 week campaign. 

There is multiple components throughout the site that encourage pre-orders of the album, the pop-up on the mobile site is graphic and engaging which is then more subtly placed in a fixed position on the header of the site which offers constant availability to pre-order without becoming invasive and 'money grabbing'. Offering exclusive content such as pre-sale codes to the upcoming tour will further encourage fmcs to pre-order the album to ensure they get tickets to see the band live, this creates a sense of urgency and makes pre-ordering more engaging and beneficial for the user. 

Overall the campaign is well informed and appeals to the target audience, it presents an engaging concept that was developed especially for the bands distinct aesthetic and has been developed to incorporate the bands ambient sound through the aesthetic of the design treatment. The content will keep the user returning to the site and encourages pre-orders throughout. This will create a significant buzz around the album prior to release and will ensure fans to pre-order the album to get pre-sale codes to the live tour. 




Tuesday 15 December 2015

OUGD504 - Brief 4 - Commercial Considerations

OUGD504: Brief 4: SONY music / ONLY studio Brief

Commercial Considerations

With  my final designs for the Campaign developed I felt it was important to look at the commercial considerations of the campaign as a whole. The main consideration I found for the campaign is the viability of the full campaign, obviously hypothetical as response to the brief however in a real life context this campaign would heavily depend on budget as developing a filter with instragram would be carry a significant cost, a further commercial consideration is whether Instagram would even accept an offer to use their app as a marketing tool. 

From this I considered alternative ways in which the campaign could be feasible, the secondary route would be to develop a third party application that would apply the filter to the users photography which could then be saved and added to instragram with the custom hashtag, this would still be equally effective in terms of aesthetic however the cost of developing the third party application would have to be developed under a large budget and the adoption rate of getting users to download the app would be less effective then having it inside instragram itself. 

I considered how the campaign would operate on a low budget, this would mean users share their photography unfiltered using just the custom hashtag with the winners images then being filtered post completion for application onto merchandise and collateral. The website would be feasible to varying degrees on all budgets at the vary base level it would consist of one page that consolidate all the images from a live feed that users can like and share with a pre-order section. 

I have considered the commercial considerations of my campaign and highlighted how this could be achieved on varying budgets, demonstrating a critical insight to my design proposal and understanding of the how my design would be applied to the real word. 

Monday 14 December 2015

OUGD504 - Brief 4 - Style Guide

OUGD504: Brief 4: SONY music / ONLY studio Brief

Style Guide

The creation of a style guide will apply further application and the extension of the campaign. Although this style guide to vary basic due to time constraints a design studio could take this information and translate it into content that is in keeping with the concept and style of the existing promotional material. 

The guide contains key typefaces such as display and body copy with alternatives if these are not available. Key colour schemes to ensure a visually consistent aesthetic across the breath of the campaign and logo variants for different background types to ensure this is legible and stands out across a range of potential contexts. I have also included a short passage that summarises the vision for the concept, this extends beyond the simple typefaces and colour schemes and suggests how these should be implemented within the campaign to ensure it upholds the concept and extends the promotional material to a similar high quality as the resolution to the brief.

This style guide will ensure continuity across the campaign and will allow other designers to pick up the initial design direction, this is a common feature within web design as often a studio designs the initial pages/layouts, these are then maintained in-house by the client, style guides are therefore needed to add and edit content without the need to re-involve the initial web designer. 



OUGD504 - Brief 4 - Responding to Feedback

OUGD504: Brief 4: SONY music / ONLY studio Brief

Responding to Feedback

The critique with ONLY was a great feedback tool that allowed me to reflect on my development thus far. The guys from the studio gave me some high quality feedback that was insightful and added industry insight that I wouldn't have been aware of beforehand. Within the critique they praised the concept and the aesthetic while suggesting possible changed to ensure the site it usable and as engaging as possible to the user, from the critique I asses these suggestions and incorporated the relevant changed to be design treatment, this will ensure a more critically developed resolution that will further appeal to the user and respond to the brief. 

DESKTOP CHANGES: 

It was suggested I could make the thumbnails pop-out to avoid a very rigid fixed grid that may become un-engaging to the user when scrolling through. I agreed with this point made and when experimenting with different arrangements found spanning some images across two columns brought the page to life more making it more engaging for the user with a contrast of large and small images that would change according the amount of likes the image has. On the rollover screen I added a 'like' counter which will further encourage users to like images and makes the whole experience more interacting as the audience will actually be able to affect the aesthetic of the site collecting choosing which images to make larger. 




I also included some minor changes for example adding a home button to the navigation page to make it crystal clear for the user how to navigate their way through the site, this came off the back of feedback given from Tom saying 'treat the user like they're stupid and make it fool proof' I feel this improves that navigation of the site and will ensure anyone can navigate through the content. 


Building on feedback from the mobile site it was suggested their should be a fixed pre-order button on the desktop version of the site as currently it was only available within the pop-up and on the store page. This was a welcomed suggestion and something I had not previously considered. I used the iTunes logo in isolation to keep with minimal aesthetic as this is fairly standard and recognisable to the target audience, i added further information the supporting text to further inform the user when the cursor is placed over the download button which will work effectively on the desktop site. This alteration will link more closely to the aims of the brief which asked to achieve more pre-orders of the album of which a fixed download button will achieve. 


MOBILE CHANGES: 

With the fixed button on the desktop site encourage pre-orders, Tom suggesting there should be some supporting information available on the mobile site for the download button as it could come across as confusing to some users. This was difficult to find a balance between legibility and aesthetic as the mobile site needed to stay refined in order to keep a consistent minimal design from the desktop site, Through some further development found text similar to that on the desktop site wasn't affective or aesthetically pleasing, this lead me to create a refined icon for the mobile download, I removed the circle surrounding the music note and wrapped text around this in a similar circular shape to create consistency with the desktop site. This was the most appropriate solution as it communicates more information to the user without disrupting the overall aesthetic of the site. 



Another mobile suggestion that was a result of the critique was to increate the size of the text on the blog as Tom felt although it looked fine on a computer screen the legibility may be reduced when placed on a mobile device. I agreed with this point and increased both the title and body copy fonts, to text whether this was effective in increasing the legibility, I placed the page on my mobile device to see it in context and found that this type adjustment made the text a lot more legible than the previous type size. 



I found the critique with ONLY extremely beneficial as they brought their extensive knowledge of the digital industry to brief which was really useful as my knowledge of digital design was extremely basic. Their suggestions were informed and based on the changes I have made find the site is more successful as a result. The navigation is improved the aesthetic is more engaging and there is more information to ensure a better user experience which will make the overall campaign more successful. 

Thursday 10 December 2015

OUGD504 - Brief 4 - Crit with ONLY: Feedback

OUGD504: Brief 4: SONY music / ONLY studio Brief

Crit with ONLY:  Feedback

Matt and Tom from only studio came back into the studio to give us feedback on the development of our campaigns thus far. Split into smaller groups gave me better opportunity for in-depth feedback that could influence any further development. I was looking forward to their feedback as it would be relevant to the digital industry and could further inform my final resolution. 

I received positive feedback regarding my concept with Tom saying it was a strong concept as it used contemporary technologies that would appeal directly to the target audience and enable a large buzz surrounding the release of the album. He liked added features such as receiving a pre-sale code for the tour when pre-ordering the album to create added value to the pre-order and a sense of urgency. Tom also commented on the use of the blog as the primary tool of keeping users retiring to the website drip-feeding the user information to keep them coming back through scheduled blog posts and content becoming available in the run up to the album release. 

I was praised for my wireframes as they were clear and demonstrated how this clearly separates the content from the design which simplifies the design process and allows further simplicity when approaching the visual aesthetic of the campaign. As we discussed the development of my campaign and visual aesthetic Tom commented on how he liked the aesthetic, he felt it was clean simple and would be easy to use. There were  a number of suggestions he commented on throughout that he felt would elevate the aesthetic and usability of the website. 

It was suggested that I add a fixed pre-order button to the website to make this option constantly available to the user similar to the button placed in the header of the mobile site. With this it was also suggested some supporting text was needed with the icon on the mobile version to clarify that it is a pre-order button. 

When looking at the desktop version, Tom suggested that I could break up the strict 4 column grid with feature 'pop out' images that would span 2-3 columns, he felt this would make the aesthetic of the homepage more engaging and break up the grid to prevent the user getting bored. Through further discussion we collectively decided that the number of likes would influence which image pop out. 

Finally reading the blog students and Tom felt there should be a clearer hierarchy of the information as although the blog title was in a different typeface they still felt this could be clearer and that there should be a home button on the navigation page even though the 'clean' logo will redirect the user to home, the group felt that a home button would make clarify this further. 
This feedback is extremely useful and I can review my development and refine the website further with these alterations to ensure the website provides the best user experience possible. I received very positive comments regarding the concept of my campaign and aesthetic of the website, with the suggested changed it was suggested this could be a great response to the brief. 

OUGD504 - Brief 4 - Crit with ONLY: Presentation

OUGD504: Brief 4: SONY music / ONLY studio Brief

Crit with ONLY:  Presentation 

In preparation for the crit with ONLY studio I created a simple presentation that would allow me to talk through my design process from start to finish with visual stimuli to articulate the points made within the crit. I feel this really helped me to talk through my concept and progress throughout the design treatment of this brief succinctly and effectively.


















OUGD504 - Brief 4 - Mobile Feedback

OUGD504: Brief 4: SONY music / ONLY studio Brief

Mobile Feedback


Following the translation of my website onto a mobile platform I asked for feedback regarding the translation of my design across the break point and the usability of the mobile version from a range of students. I received positive comments regarding the aesthetic of the mobile site with students commenting on the continuity between the desktop and mobile site this included 'I love how you've managed to translate the original site onto the smaller smartphone, it looks great on both and you can tell they're the same website'. This was encouraging that the user could clearly identify line between the desktop and mobile sites and found the aesthetics of both equally engaging. 

I then asked students about the usability of the mobile site, The mock-ups (above) helped to articulate this demonstrating the proportions of each component within the context of the smartphone. Students were confident that the size of the components would be easily accessible using a finger to navigate the site, Innovative components such as the expanding social media buttons below the image were praised for keeping the design refined and adhering the to clean aesthetic. The type size of the body was suggested to be scaled u on the blog page which is a comment I can reflect on during further development. Overall I feel students reacted positively towards the mobile version of my website and assures me I have successfully refined the design to apply to a mobile context. 

OUGD504 - Brief 4 - Sub-pages

OUGD504: Brief 4: SONY music / ONLY studio Brief

Sub-pages

Navigation: 
Translating the navigation page onto a mobile platform was relatively simple due to the minimal design and abundance of white space. I kept the colour scheme from the desktop site and used the existing layout, centrally aligning it to the centre of the page. Similarly to the desktop site I aligned the 'x' with the navigation menu for a seamless transition between the two. The only addition on the mobile site is a direct link to iTunes and the album release date, This was applied to balance the components on the page and support the website by offering a further pre-order option. I feel this component is not invasive but more suggestive and will work effectively to create pre orders for the album. 




Blog: 
The blog needed slightly more amending to fit within the contains of the mobile device, I started by experimenting with the background, I wanted to keep elements of the pink to relate back to the desktop site however needed the white to ensure the legibility of the text. I experimented with different boarders etc however ultimately found a sloping gradient to be the most effective method of retaining the pink while incorporating the white, This creates consistency with the desktop site while remaining minimal and accessible to the target audience. 

Retaining the fixed header from the homepage ensures consistency across the site, there is a clear hierarchy within the page, with the blog title in din followed by the apercu body copy. Video will work just as well on the mobile site with a screenshot that will open out into the full video when clicked on which will make the most of the limited space of the mobile screen. 

These sub-pages are consistent with the desktop versions creating clear and consistent links across the break point and have retained the clean minimal aesthetic set out for the website. Specialist features have been taken into account such as the accessibility and usability of the site and using touch screen which requires larger clickable components and a mope refined layout to ensure the highest quality user experience possible. The mobile pages flow nicely into one another to ensure a smooth user experience that will appeal to the user well.

Wednesday 9 December 2015

OUGD504 - Brief 4 - Mobile Homepage

OUGD504: Brief 4: SONY music / ONLY studio Brief

Mobile Homepage

The wireframes gave a good straight forward direction when starting to develop my mobile site. I used the wireframe guidelines as well as taking inspiration from the desktop site to ensure consistency across the break point. I started by using the same pantone colour palette identified in my earlier development, placing the logo in the centre will maximise its legibility and will open be the first thing seen by the user as the webpage loads down. Keeping the navigation menu from the desktop site keeps the navigation clean and minimal which will work especially well on a mobile platforms as opposed to a small compact menu bar. 

A new feature for the mobile site is a fixed direct download link in the header, The iTunes logo will be identifiable to the audience and will outsource them to the iTunes site to pre-order the album. This features removes the need for the pop-up as seen on the desktop site and development concluded this would be unnecessary and overly complicated within the mobile platform, instead the user has the availably to preorder at any opportunity with the download button fixed in the header. 



Potentially the biggest transition from the desktop to mobile site is the layout of the content within the homepage, The desktop site boast a large 4 column grid that previewed thumbnails of the content that was sourced from a live feed of the custom hashtags directly from instragram to act as a centralised home of activity for the campaign. Due the size restrictions of mobile it would not be feasible to replicate this 4 column grid on the mobile platform as it would impair the minimalist aesthetic of the site and make the content illegible due to size restrictions. I took inspiration from the instragram app which uses a one column grid to highlight the content and make it easily accessible to the user on a mobile device. Using a familiar interface will appeal to the target audience making the site more accessible and providing the user with the best experience. Creating significant links between the site and instragram will ensure a smooth transition and usable interface for the user. due to their existing knowledge and engagement of the app resulting in creating a simple grid to work from based on the templates provided by ONLY.


The desktop site fades out the image to reveal social media icons in a rollover which allow the user to like and share content to other social media platforms increasing the buzz around the campaign. Due to the restrictions of mobile it would not be most effective to simulate this rollover which allowed me to develop the social media buttons below the image for the mobile platform. The standard buttons will be simply a like button and a plus button, when pressed this will then expand into a longer list of social media links to share the content, I felt these were not essential to have shown all the time and ensures the minimal aesthetic to remain consistent across the desktop and mobile website. I have started to consider refined small details such as a simple transition fro the plus to expand which will rotate to form an x to close the expanded view, demonstrating a high level of detail into the design of my mobile site. 



To add context to the design I mocked it up onto an iPhone to view the proportions in context, I felt I had designed the homepage with suitable sizing of the components, the buttons and menus looked like they would be easily accessible with a finger touch and the images sat nicely within the frame not looking oversized or too small to see. This extended homepage simulates how the user would scroll through the content and demonstrates the email-sign up and small print footer. This mobile homepage works effectively creating continuity between the desktop and mobile site, the refined components work well together and fit nicely into the iPhone dimensions that will allow them to be usable and present the user with a positive and engaging user experience. 

OUGD504 - Brief 4 - Mobile Wireframe Development

OUGD504: Brief 4: SONY music / ONLY studio Brief

Mobile Wireframe Development

With the developed desktop website approved by students and tutors I felt confident in beginning the development of the mobile site which is an essential requirement of the brief and current web design practise. This would give me the opportunity to develop my understand of web design and how components are transformed across the break points to create a consistent web platform across a range of devices that offer the most intuitive user experience based on the characteristics of that device. 



Homepage: 
Keeping the homepage consistent across the breakpoint from digital to mobile was probably the most important aspect of translating the site onto a mobile platform as it needed to remain consistent and identifiable for the user across the platforms to assure them they are on the same website. I kept the header fairly consistent in terms of elements however centrally alined the campaign logo instead to flush left as used on the desktop site as this it more be more legible centred on a mobile device. This allowed me to incorporate a direct download link to be fixed into the header directing the user to the iTunes pre-order at any time using the website, this has replaced the popup of the desktop site as I felt this would be impractical and confusing when translated across the break point. 

Instead of the 4 column grid as used on the module site, I took inspiration from the Instagram app that uses a scrolling feed of one image to maximise legibility of the content. I felt a familiar interface would engage the target audience and allow the user the most effective experience that draws on familiar grids. Below the image are social media buttons that replace the rollover on web to simplify the sharing options making it easy to access on mobile for the user. 

Navigation: 
Due to the minimal nature of the desktop navigation page this was easily translated onto a mobile device, the only real change was the loss of white space surrounding the type and the addition of a further iTunes downlink link that is further encouraging the user to pre-order the album over multiple opportunities without being too invasive or attacking them from all angles which I feel works well placing the opportunity on each page in quite a simple fashion that adds a sense of choice for user. 

Sub-page: 
The standard fixed mobile header remains consistent to the homepage and still reflects the desktop site, the translation of the blog remains fairly similar to the original desktop design creating a clear hierarchy of page title, blog title, content that is fictional on a mobile device and will appeal to the user. 

Extended Homepage: 
Similar to the homepage this wireframe demonstrates how the user would scroll through the site and includes the footer, which is a refined version of the desktop footer with the site map, contact details FAQ and link to the desktop site. The newsletter sign up is also included with the footer to allow the user to sign up and receive updates that will keep them coming back to the site i.e. when new content is available e.g. merchandise or blogposts (Users will be automatically signed up with any purchase or pre order.)

I have found the main difference between designing for web and mobile is that mobile must be far more refined due to the smaller frame to place the content this results the the use of less white space to fill the pages. As the mobile device uses fingers to interact with the content the clickable components need to be larger that those on the desktop where typically a mouse or trackpad is used that is far more accurate and smaller, this results in a simplified translation of the desktop site onto mobile to ensure it is functional and gives the user the best user experience across devices. 

Monday 7 December 2015

OUGD504 - Brief 4 - Desktop Feedback

OUGD504: Brief 4: SONY music / ONLY studio Brief

Desktop Feedback

With the newly refined designs for my desktop website I asked students for feedback as to whether they felt these were successful, would appeal to the target audience and provides a good user experience. I felt it was important to acquire aesthetic feedback at this stage before developing the mobile site to ensure consistency across the breakpoints. I started my presenting my concept and development thus far to a group of students that doubled up as my target audience in an informal critique. They reacted positively to the campaign saying it was 'a really cool concept' that is relevant within todays society and will certainly appeal to the target audience. When I explained the genre and band to them they felt the aesthetic of the desktop site reflected the nature of the band students said 'I really like the minimal layout, the baby pink works super well making the pictures stand out and makes a nice relaxing colour scheme similar to how the bands music makes you feel, good job'. 

When I prompted further more specific questions found they felt the typefaces were approbate and the size of the images were about right as I was initially concerned they may be slightly too large for thumbnails. Students felt the site was perfectly usable with some slight questioning of the navigation menu as opposed to a fixed bar however I feel this would compromise the clean aesthetic of the site. They especially liked the jump to the top arrow similar to that used in tumblr one student said 'I love that arrow, when I use tumblr it makes it so much easier than having to scroll all the way back to the top'. The blog was also a commented on point saying its a great way to get people to come back to the site posting updates in the countdown to the album. 

Overall the feedback I recited from students was largely positive which gives me encouragement to start to development the mobile version of the site. The aesthetic articulated itself well and connoted a relaxed ambient experience similar to the bands sound. Finally students felt the concept was well established and innovative which will said the overall success of my response to the brief. 

OUGD504 - Brief 4 - Desktop Development

OUGD504: Brief 4: SONY music / ONLY studio Brief

Desktop Development 

Homepage:
From the tutor feedback I started to refine the original designs, the main alteration for the homepage was to create a more spacious aesthetic, this was achieved by positioning the band logo vertically in the right margin as suggested by my tutor as this was a distinct unique feature from the album cover, this freed up more space in the header which I then developed further decreasing the size of the campaign logo and navigation menu. This creates a more refined aesthetic that is more subtle and less 'in your face' it more accurately reflects the ambience and relaxed nature of the band.  

Original

Refined

Pop-up:
Minimal refining was required for the pop up, Removing the bands logo allowed a more minimal design as it was already present within the album artwork, this also creates further continuity with the updated aesthetic. Refining the text with a smaller point size makes the whole pop-up less invasive and refines it to a more relaxed aesthetic allowing more white space to balance the components within the pop-up avoiding a busy aesthetic. 

Original

Refined

Navigation: 
Another page that required minimal refinement was the navigation page, the feedback was positive about the super minimal layout that complemented the overall aesthetic and directed a clear flow through the website, With the smaller header on the pages I refined the 'x' to align with the new smaller navigation menu for a seamless transition between the two. I also adjusted the kerning of the typeface to the custom kerning used within the campaign logo to ensure further continuity throughout the site. 


Original

Refined

Blog:
Updating the blog with the refined header form the homepage added to a sense of continuity flow between the web pages. Comments were made suggesting I made the hierarchy of information clearer within the blog aesthetic. I refined this adhering to the clean aesthetic applied throughout the site by changing the blog title to din creating a contrast between the titles and body copy with their different weights, I also increased the size of the titles slightly to create a simple yet subtle hierarchy within the page. I adjusted the page title to the same size as the updated logo so there there weren't too many different sized elements within the page that allowed a aesthetically complimenting layout to be created.




These refinements, although at times have felt minimal have elevated the quality of the overall design greatly. This new aesthetic feels less clunky and blocky opting for a smoother cleaner aesthetic that is minimal and tasteful with contemporary detailing that will appeal to the target audience and provides a better overall user experience due to its more streamlined and professional aesthetic. 

OUGD504 - Brief 4 - Tutor Feedback

OUGD504: Brief 4: SONY music / ONLY studio Brief

Tutor Feedback



Having digitally developed my concept into a desktop website I sought feedback from a tutor before developing the mobile platform. Overall he really liked the social aspect of my concept and felt it would appeal to the target audience. He liked the use of pastel pink as 'it really allows the boarders of the images to pop'.  Was advised to give the title some space between the start of the content as it felt a little crammed at present. He picked up on the javanese house logo positioned vertically on the album covers and as this is quite distinct and unique suggested I incorporate this into my website design, this would also free up some space allowing more space between the components. 



My tutor liked the aesthetic of the navigation and pop up pages with major changes needed. He commented on the hierarchy of the blog page saying it could be clearer defining the blog title and content as currently they blend into one another and don't articulate a clear hierarchy.  This feedback established by design as a viable response to the brief, from this feedback I will address the issues raised to ensure the design is intuitive, engaging and aesthetically pleasing resulting in a high level of development and understanding of digital design. 

Sunday 6 December 2015

OUGD504 - Brief 4 - Sub-pages

OUGD504: Brief 4: SONY music / ONLY studio Brief

Sub-pages


Navigation: 

I planned a clean a minimal aesthetic for the website, during the wireframe development I concluded a operate navigation page would be more successful in creating a clean aesthetic as opposed to a menu bar running across the page. When designing I experimented with my colour palette and found inverting the pink background with white text from the homepage would create an effective contrast to show they have left the homepage. This colour palette works effectively highlighting the minimalist design and creating a contemporary sense of space. Aligning the 'x' with the navigation button of the homepage allows a seamless transition back and forth between the pages. The pink typography works at this point size allows the copy to still be legible however if smaller type needed to be incorporated this colour may affect the legibility. 



Pop-up: 

When the user first clicks onto the page they will be met with this pop up allowing a direct link to the pre-order, this will instantly set the tone and encourage pre-orders from the second the user accesses the site. Including the album cover will instantly engage the user and define the aesthetic that will support the content when they start to engage with the concept. The body copy describes how they can receive an unique pre-sale code for the up-coming tour to ensure a better change of getting tickets adding further incentive to pre-order the album. The tone of voice used on the body copy throughout the site is very informal and personal, signing off 'love amber & co' (amber = vocalist) creating a more personal and direct relationship with the band. 

The aesthetic of the pop up is allows it to contrast the homepage using the white from the colour palette as the background colour to ensure it jumps off the page, this also ensures the body copy is clearly and legible for the reader. The use of image within the frame will instantly catch the eye of the user supported by the 'clean' logo which is the start of creating an identity for the campaign. The pre-order button is surrounded by a box to reinforce that is is a 'click-able' component of the page. Ensuring the size of the pop up isn't the full size of the screen and showing the homepage in the background will create a clearer instruction that it can be closed to access the compare than if it were full size as this could have potentially confused users, it also creates a sense of building excitement to what is actually in the homepage giving a sneak preview to its content that is hidden by the pop-up. 



Blog: 

I found the blog sub-page slightly more difficult to design for as I wanted to keep the pink consistent yet wanted to ensure the maximum legibility of the body copy. Through experimentation I transferred the gradient from the homepage and extended it to created a central block that could be used for the bulk of the content. This worked well as it naturally drew the eye to the content and focused in on it. There is a hierarchy flowing down the page of the page title, blog post title, content, this will read naturally and ensure a direct flow of information across the page. I have used Apercu as a standard body copy throughout my distal platform as it is contemporary, neutral and legible it also complements DIN well creating a good set of typefaces that are all available as web fonts. 


These sub pages have a consistent aesthetic that will allow them to flow nicely into one another enhancing the movement throughout the site and create a more effective user experience.  The aesthetic is clean minimal and consistent with the homepage, it reflects the ambience of the band and their ethos well which will appeal to the target audience and complements the content well. I will obtain feedback based on this development and respond according before developing the mobile version of the desktop website.