Design Boards In Colour

End Of Module Evaluation

Looking back over all 4 briefs and the module as a whole it's been a lot stressful and a lot more work then any modules from last year. However, this is the first module that the design considerations have been the main focus on the module. I had to look in depth about areas of productions that I've never looked into before. By doing so it led me down a path to discover a lot more feature and aspects about designs that I either had no knowledge about or a small amount. Productions aspects like stock and printing I learned a lot more about then the whole of last year, getting the opportunity to really look into these specific areas in depth and understand how important they are was valuable to my practice as a designer. I really enjoyed all of the briefs and for me personally they all gave me new skills that I could take away from.



Before starting brief one I had disliked creating leaflet due to a bad experience in college but the brief made this process very enjoyable by creating a leaflet that explained our design process. This made it personal to me, therefore it was a lot more enjoyable and I became really involved within the process making. The second brief my logo got paid for so it was the best moment in the module. It also gave me great confidence and self-belief as a designer as before I started the brief I was in self-doubt about my abilities to create an effective resolution for the company and brief. I see branding and logo making in general one of my weakest skill sets so even before starting the brief I doubted whether or not I could do a good job. The outcome of brief 2 also gave me a good link with the clients by connecting with them on social media profile and a good chance of future work with them. It will also be feature to talk about for my PPP blog.



The main skills I learnt from this module understood the area of editorial, communicating with clients and a more in depth knowledge about user experience. Leaning to communicate with a client who lives in America was a new experience for me, dealing with the time zone and dealing with the process of feedback from company and not just a single person client. I tried to deal with the situation from what John had taught us in PPP. Even by first making contact with the company I wasn’t hesitant by contacting them at the very first opportunity I got where as before I might have been a bit put off by the size of the company and how well they were doing in the Kickstarter campaign. I always had the end game in mine, making connections that could lead to new opportunities and work.



Ux designer was my favourite brief and I sincerely hope I get the opportunity to do more UX stuff in level 5 and 6. I loved the process of UX and love designing for the user in mind. Having visits by the UX studio and by Only was very inspiring to me as a designer. It opened up my eyes to the possibilities and only strengthened my love for the subject. From the two visits, especially from that UX lady I’m in the process of contacting her to see if I could get some kind of placement there for the summer to learn more about the subject. In the end the module was a stressful one, I would improve on my time management but on brief 3 and 4 I had too much time and that was the thing that shot me in the foot. When I get a head of a project I tend to slow down, as I know that I’m ahead and have plenty time. That exact thought process was a bad idea because I began to get lazy and didn’t take advantage of that time to experiment more and try to improve on my existing design or try to collect more feedback. If there were any thing to change about myself for this module it would be that.





Overall, I loved the module the in depths look into the design considerations and also commercial considerations. It gave me greater confidence as a student and designer and the skills that I’ve learnt from the module I would be able to apply to the next module and other modules to come to hopefully develop myself and practice.

Studio Brief 3 - Commercial Considerations

When the client finalises your finished idea the next step in the development process would be to send the design of to the printers or developer depending if the work is print or digital. You will then have to communicate to them how they should handle your finished resolution in terms of printing, stock, budget and so on.


Studio Brief 3

In order to send my publication of to the printing house, I would find a printers that would be able to print my publication to a high standard but at a low cost. It would also be beneficial to understand that the needs of me as a designer are going to be met and they can do everything that you need them to in terms of printing the publication. Then understanding the budget and setting the individual budgets aside for stock, print finishes and binding. Then the next process would be to purchase the stock along with the red tape that would be used for the front cover. I would need to package my publication in preparation for printing. Making sure my pages are a multiple of 4 and is in CMYK at a 300dpi resolution with crop marks.

Once all that is done then I would have to communicate to the printers about the pantone colours I have used and provide them the the pantone code so they can get that certain ink ready for printing. Next would be to communicate Litho printing requirements, therefore a discussion would take place about the individual plates needed and the requirement behind that, making sure the document is set up for litho printing.

Studio Brief 2 - Commercial Considerations

When the client finalises your finished idea the next step in the development process would be to send the design of to the printers or developer depending if the work is print or digital. You will then have to communicate to them how they should handle your finished resolution in terms of printing, stock, budget and so on.


Studio Brief 2

Brief two is a bit tricky as you would have a lot of different products and collateral to print. What I would have to do is to first communicate with the client to see what their budget is as that will impact the quality of the materials purchase. Once the client has given me a budget then the process of buying the materials would go ahead and this would include materials like stock, clothing and any packaging if I was printing on bottles or boxes. Buying at bulk price would be more beneficial in order to save money.

Printing on the T-shirt, the logo would need to be saved as a Illustrator .ai file and that would be sent to the t-Shirt company will specification along with the material of the t-shirts. You may or may no want to send the branding guidelines in case they have to do last minute positioning of the logo. The rest of the print material would need to be in CMYK with 300dpi with the branding guidelines and stock also sent with it along with specification of any special print finish requirements.

Studio Brief 1 - Commercial Considerations

When the client finalises your finished idea the next step in the development process would be to send the design of to the printers or developer depending if the work is print or digital. You will then have to communicate to them how they should handle your finished resolution in terms of printing, stock, budget and so on.

Brief 1

If the leaflet was being made commercially then I would have to then package my leaflet within Indesign making sure the images and text are all available. Also that my leaflet is in CMYK at a 300dpi resolution with crop marks. Then to find a printers that would be able to print my leaflet to a high standard but at a low cost. It would also be beneficial to guarantee that your needs are going to be met and they can do everything that I need them to in terms of printing the leaflet. Then understanding the budget and setting the individual budgets aside for stock, print finishes and colour. You could either see if they have the stock you need in their printing house, if not then buying the own stock at a bulk rate will be the cheapest method of buying the stock you need.

The next step would be to communicate to the printers about any document requirements, this could be bleed or anything in that nature. Then to communicate the colour process. My leaflet would be using the laser printer, therefore I would communicate to the printers of which printer I would need the leaflet to be printed on and specify any special pantone colours If I would be using any.


In order to send my publication of to the printing house, I would find a printers that would be able to print my publication to a high standard but at a low cost. It would also be beneficial to understand that the needs of me as a designer are going to be met and they can do everything that you need them to in terms of printing the publication. Then understanding the budget and setting the individual budgets aside for stock, print finishes and binding. Then the next process would be to purchase the stock along with the red tape that would be used for the front cover. I would need to package my publication in preparation for printing. Making sure my pages are a multiple of 4 and is in CMYK at a 300dpi resolution with crop marks.

Once all that is done then I would have to communicate to the printers about the pantone colours I have used and provide them the the pantone code so they can get that certain ink ready for printing. Next would be to communicate Litho printing requirements, therefore a discussion would take place about the individual plates needed and the requirement behind that, making sure the document is set up for litho printing.

Studio Brief 4 - Final Designs

Below are the final designs for both the desktop and responsive mobile version:



Here are gifs of the both sites just to show how the different parts of the website.

Desktop

As the user proceeds onto the desktop site, they will be met by the album art work, an interactive melting Jesus that will be slowly melting down the page. This animated process of the image of Jesus slowly melting down the page will be an interactive feature for the user, drawing them in and giving them a taste of the album and the message behind it. The melting parts at the bottom will also catch their eye and lead their eyes down the website and onto the pre-order sites of Amazon and itunes. However, If the budget for the campaign was going to be slim then the melting effect may turn out to be too much to develope but that's where I would have to communicate with the web developers to see if it's possible and for how much.

Another interactive feature instead of a slow melting effect there could be the original un-melted Jesus that the user with their mouse can click and drag the image, almost like using the liquify tool in Photoshop but being able to do it within a browsers. Again, this would have to be communicated to the developers, would it be compatible in all browsers or would the user have to download any plugin for it to work.

After the interactive Jesus the logo and Navigation will be visible. Both of these features are in there natural layout position as it's common placement for the logo to be on the top left and the navigation to be on the top right, it's easier for the user experience if they are used to these feature being where they are. The promotional button on the end of the navigation is meant to be subtle but still noticeable, complimentary and eye catching. I didn't want an annoying pop up that was right in the users face and this would represent a campaign that was all for a loving connection between the fans and the band. I wanted the call to action button to be apart of the navigation but with the highlighted green/blue it was still able to attract the attention because of the neon green. Due to it's position in the navigation the button will be within the main hot spot areas of the website for the user to look at.

The bar in the middle of the album art work should attract curiosity, due to size and the same horizontal position as Jesus's arms on the cross. The text should hopefully justify what the bar is there for and what the user needs to do. If not the 'What's this?' button would be at the end of the bar to help the user if they are confused or just want want to find out about the campaign. For me it's always about the user, making sure they are comfortable within the site as it can be confusing if you're not familiar with the site, making the site as open for every body within and without my target viewership.

Lastly, at the bottom is the promotion companies that the user can order the album from and also the days left till the album comes out. Logos at the bottom right is just another subtle hint promoting the pre-release of the album, works well as they are the same colour scheme and work well in the layout and brings balance to the grid system. Count down days is important to let the user know how many days are left when they hit the site, making them aware each time they come back onto the site.

This is the error pop up that will alert the user that they have failed to enter the required field. 

This would be the pop up if the user doesn't know whats going on and clicks the 'What's that?' button. Pop up will give them a quick summary of the campaign and what the user can do to be apart of that. At the bottom is again a subtle promotional bit of text, just to keep the album in their heads subliminally as buying the album is the whole point of the campaign.

This is an example of what the user might input into the bar. Using the #dearg-d to build a social media presence.

This is the pop up that will appear once the user has successfully submitted a message. The hierarchy of the site would first be the title, then the message they have submitted with a chance to share their message on social media. At the bottom will be the information about what comes next after the the album has been released.

*same text as in the blog 'After Release of Album - Mockups'

This is the desktop version of the site. As soon as the user hits the page they are met with the same modern layout as the pre-release website. Same colour scheme, along with the general layout. The pre-order call to action button is in the same location within the navigation (top right) but with different wording to be relevant with the newer site. It's important for that call to action to stay in the same position, so the user will automatically know where the location of that button is through both sites.

Moving on towards the type. The message within the middle of the page will be the messages that the fans would of submitted onto the previous pre-release site. The message takes up the majority of the website in order to showcase it's hierarchy and importance to the user. The type is very legible and bold at that size due to the serif all caps typeface of 'Didot', therefore demanding the users attention from the get go. The fans messages would be animated in a slide show fading in and out every couple of seconds. Underneath the message, would buttons to control the animation. The forward, back and pause buttons will allow the user to control the slide show at their own pace, this would allow them to not get bored or impatient waiting for the next message to come into frame. Underneath these buttons would be a 'What's this?' information button. Once clicked, then a pop-up box would open, which would explain the reasoning for the messages, so the user can understand what's going on if confused.

On the right side of the control buttons is the option to share any message that appears in the slide show on social media. Sharing is extremely important to start a trend or social media buzz. It's also a nice touch for any fan to be inspired by the messages and wanting to spread that positivity to other people. It's also an effective way to drag people back to the site after the release of the album to see if they can see their message in the slide show. On the left side is the option to purchase the album. Even though it's an advertisements to sell the album, the design and positioning of it feels like it belongs in that space and doesn't feel like a promotional annoyance.

Identical pop up layout to the pre-release 'what's that?' pop up but the text is different to represent the current stage of the campaign and what the user might need to know.

Mobile

The mobile version was comfortably adaptable from desktop to mobile and that is due to the modern aesthetic and also the grid system set up to be comfortably stackable from any size. Therefore, the layout and set up is identical to the desktop version. The text navigation has been changed to a hamburger button to allow for space and for it not to overload the landing page and that's because the main purpose of the page is for the user to input their positive message. If the page is crowded then it could become to much to take in and that would effect the bounce rate.

For the mobile version the logo has a border around it, it looked like it was floating too much and looked lost next to the album artwork. The border fixed that issue by making it look more strong and solid without overdoing it, which by adding a fill to the box would do so. The main issue with the mobile version was text size. I was consistently battling with aesthetic and readability. If the text was to big then it could throw of the modern style of the design but if the text was to small then the user wouldn't be able to read the information. After testing the variation of sizes on my target audience, the conclusion was made that readability and flow of the user journey is more important then aesthetic. Design aesthetics isn't going to sell the album but good copy writing will. The bottom of the page is where the promotional button and count down days are located. Even though the promotional call to action button is at the bottom, people might question that it should be at the top of the hierarchy ladder but as the whole site fits on the screen the call to action button is always visible with the positioning and the highlighted colour.

Lastly, the website will not be available within landscape orientation, so if the user rotates their phone, the phone will stay in portrait. The website wouldn't be as aesthetically pleasing if the website was suddenly scrollable. The site is simple enough to fit on the whole phone in portrait so by disengaging that by having the site into landscape mode would be ineffective for the layout of the site and for the user journey.

Effectively it might be difficult force orientation in a web page, but you can suggest to the user that the site doesn't orientate in landscape mode or you could block the content in landscape mode. Looking at different help sites, it is possible to lock the orientation by setting your min-max width in CSS.

Same error message as the desktop site, keeping with consistency.

Navigation page. The navigation page uses the same style as the mobile pop ups, keeping everything consistency and complimentary. Promotional links a the bottom to keep the users sub-conscious mind engaged with the promotional intent of the album.

This is the pop up for  the '?' button. Same style and layout to the desktop pop up but without the faded background. Without the faded background it allows me to blow up the text so it would be more readable for the user.

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.

If the message that the user is imputing is longer then the input bar can hold then bar will expand. The user can use the arrow in the bottom right corner of the bar to expand the bar with their finger to see the whole message.

Thank you for submitting pop up, same information and style to the desktop site but without the faded background, again to increase text size.

*same text as in the blog 'After Release of Album - Mockups'

This is what the site would look like on a mobile. It's extremely similar layout to the pre-release responsive site. It was a challenge to decide how big to have the text and the buttons. I didn't want the forward, back and pause button to be to big as it would throw of the minimal aesthetics. But i also didn't want the user to struggle to press such small buttons.

When designing for mobile it's important to take into account the touch motion the user will have to perform. Everyone has different size fingers, which could get complicated when designing small and integrate buttons or other interactive stuff. To me it's important for the user not to over stretch their fingers, It's very beneficial to the user if you can design touch points that are relatively close to each other. For example, for the animation buttons for the mobile, the design had the the back and forward buttons on each side of the message that the user would have to stretch their finger to each side if they want to either go back or forwards. This is unnecessary action for the user and could become annoying which isn't good for the user journey. By having these button all located next to each other, the user can touch the animation with ease without over extending their fingers. This may not be a big problem to many people but when you take into consideration, phone size and hand size it can be difficult to touch certain areas of a phone without completely readjusting the hold on the phone.

Studio Brief 4 - After Release of Album - Mockups

The images below are the final mock ups for what the campaign site will look like once the album  has been released. These designs are basically the visuals from the wire frames I created in the previous blog post. The main approach within the design was to capture the same consistent flow of style and aesthetics from what the other pre-release site looked like. Sticking with a modern, minimal theme with the same layout and grid system. Having consistency throughout both sites, allows for a succinct design that the user can effectively navigate through their user journey without any unnecessary distraction. Below are the mock ups.

This is the desktop version of the site. As soon as the user hits the page they are met with the same modern layout as the pre-release website. Same colour scheme, along with the general layout. The pre-order call to action button is in the same location within the navigation (top right) but with different wording to be relevant with the newer site. It's important for that call to action to stay in the same position, so the user will automatically know where the location of that button is through both sites.

Moving on towards the type. The message within the middle of the page will be the messages that the fans would of submitted onto the previous pre-release site. The message takes up the majority of the website in order to showcase it's hierarchy and importance to the user. The type is very legible and bold at that size due to the serif all caps typeface of 'Didot', therefore demanding the users attention from the get go. The fans messages would be animated in a slide show fading in and out every couple of seconds. Underneath the message, would buttons to control the animation. The forward, back and pause buttons will allow the user to control the slide show at their own pace, this would allow them to not get bored or impatient waiting for the next message to come into frame. Underneath these buttons would be a 'What's this?' information button. Once clicked, then a pop-up box would open, which would explain the reasoning for the messages, so the user can understand what's going on if confused.

On the right side of the control buttons is the option to share any message that appears in the slide show on social media. Sharing is extremely important to start a trend or social media buzz. It's also a nice touch for any fan to be inspired by the messages and wanting to spread that positivity to other people. It's also an effective way to drag people back to the site after the release of the album to see if they can see their message in the slide show. On the left side is the option to purchase the album. Even though it's an advertisements to sell the album, the design and positioning of it feels like it belongs in that space and doesn't feel like a promotional annoyance.

What the pop up for the 'What's this?' option would look like.

This is what the site would look like on a mobile. It's extremely similar layout to the pre-release responsive site. It was a challenge to decide how big to have the text and the buttons. I didn't want the forward, back and pause button to be to big as it would throw of the minimal aesthetics. But i also didn't want the user to struggle to press such small buttons.

When designing for mobile it's important to take into account the touch motion the user will have to perform. Everyone has different size fingers, which could get complicated when designing small and integrate buttons or other interactive stuff. To me it's important for the user not to over stretch their fingers, It's very beneficial to the user if you can design touch points that are relatively close to each other. For example, for the animation buttons for the mobile, the design had the the back and forward buttons on each side of the message that the user would have to stretch their finger to each side if they want to either go back or forwards. This is unnecessary action for the user and could become annoying which isn't good for the user journey. By having these button all located next to each other, the user can touch the animation with ease without over extending their fingers. This may not be a big problem to many people but when you take into consideration, phone size and hand size it can be difficult to touch certain areas of a phone without completely readjusting the hold on the phone.

Studio Brief 2 - Production Considerations

Limitations

The limitation I had with this brief was the communication between me as the design and the client. Another limitation was the turn around time and producing effective mock ups. The communication between designer and client was very hard for other people but for me It was very effective and worth while. With most people the client didn't reply back to any feedback suggestions about their branding, therefore they had to change the logo based on their opinions and thoughts and not necessary based on the company's thoughts and feedback, which if they had would of been extremely valuable to the designer.

For me, my client gave me effective feedback about he's logo and he's thoughts and opinions and didn't hold back about what things he wanted changing and adapting. This feedback allowed me to implement design decisions based on that feedback and in return would create a new logo that the client would be pleased with. And this feedback only helped me more and more down the line as the client wasn't afraid about giving he's thoughts on the newer adaptions of the logo.

Screen or Print

Choosing whether or not the branding I had created needed to be produced in print or digitally, I had to research into the company and see what they did and what they represented and from that decide whether or not I had to produce my designs based around print or digital. The company that I chose was a technology company and off that bases, I knew that my designed had to be digital and it led to designing the branding for an online presence. I avoided designing stuff like vinyl stickers and packaging as this wasn't necessary to the brand.

Software Choices

It was important to chose the correct software to design certain parts of the branding within. The logo needed to be designed within Illustrator due to it's vector attributes, which is most effective to use on logos. Logos created within Illustrator can be blown up at any size and will not pixelated and that is due to the software being a vector and not bitmap like you would get in Photoshop. The business cards I created where made in Indesign due to Indesign being more accustomed to type and layout. Mock ups would be created In Photoshop as Photoshop can adapt and wrap objects which is needed to mock your design up onto a profession looking business card or setting.

Disregarding the effective choice of software can be a bad impression on the client and would make you look unprofessional and as if you don't know what you're actually doing.


Effectiveness of size

As I didn't know a lot about the company I wasn't to sure about how big or small I needed to make the designs. Knowing the size that you'll be working at will enable you to plan your design within in the sketching process. I created a website but wasn't so sure about how big they wanted it to be or how many pages, therefore I looked at their current website and based my design off that. My whole thought process was more on what the target audience would like to see and that's how I based most of the branding collateral by. The posters, business cards and logo was all sizes bigger then normal as if the client came back to me and said he wanted this certain size then i can effectively scale the designs down without losing quality then having to scale up and the designs becoming pixelated.

Mockups

Due to how much time we had on the brief it was hard to get our finished designs onto real products. Most of the brief is spent in the development stage and that is what takes up a lot of the time. Therefore, I didn't have time to mock my design up onto an actual t-shirt or to code my website or recreate it into wordpress. I had to then mockup the designs within Photoshop using existing mock ups from Graphic Burger or other sources.

Also another restriction to the mock ups was the cost. I didn't have enough of a budget to start buying t-shirts, which is also another big factor when it comes to mocking up designs, also if it's a mock up then if you go and print your design on a t-shirt when client still might want to make changes, so it can be an expensive way and sometimes isn't the best route to go down unless your design has been finalised by the client. It's acceptable in industry to mock up your designs within Photoshop as it still gives the client an accurate representation of what the finished product will look like but just not a physical representation, which is obviously better to hold and to feel but due to time and money these factors sometimes aren't possible.

Materials

Choosing the right materials is important to communicate to the client how your designs feel physically and how they relate to the target audience. Mocking up the Hardshell logo onto the T-shirt I had to figure out what material and colour the t-shirt had to be. It's important for the decisions to be based around the target audience and what the company represents. As Hardshell labs is about helping desert Tortoises this meant that the company was all about being environment friendly and nature lovers. It was important for me to communicate that into materials, so my decision was to have the t-shirt in green to represent the nature side of the company and the material of the t-shirt to be Eco friendly, which wouldn't damage the environment.

Other then the materials representing the companies ethos and what they stand for, it creates a positive images for their target audience to know what they stand for and that will strengthen their images and create a positive and trustworthy experience with their customers.

Studio Brief 3 - Production Considerations (a few)

The printing consideration below are the only ones which I didn't feel I cover in depth enough.




Printing techniques - signatures, gutter, margins

As I was staple binding my book, I needed the pages to be set up in multiples of 4 due to the book using signatures. Other methods of binding will need different page set ups. For example, concertina bind doesn't need any signatures. As my set up was very basic, the margins and gutters of the book didn't need to be tampered with. However, it was important to consider the margin near the page fold. Sometimes the margin closest to the fold in the page needs to be made bigger so any text or non-bleed images are obstructed when the page folds, this can be shown the most on a Japanese stab stitch bind. The gutters wouldn't need to be changed for a staple bind but for layout purposed then the gutters may need to be adjusted to allow for the text to be more visible if the book is off a smaller scale.

Mockups

Mock ups are important when designing a book. It's completely different to see a book digitally then seeing it printed out and in a physical form. When looking at your book in Indesign it may look perfect, the text may look big enough and the images high quality enough but once printed then you can really notice how aspects of the book look. When it came to my book, I decided to scrap one idea and to start again and this was because when I printed out a mock up everything looked different, the size of the images was blown up and the text wasn't how I imagined it to be and from that I started again.

It also gave me the perfect opportunity the test the mock ups on my target audience. Gathering their thoughts and opinions on the mock up, see what they like an what they don't. With feedback like that I could adapt there opinions to make the books concept more strong and effective then it was before.

Pagination

I didn't use pagination in my book and this was because my book was a small publication, which didn't have enough pages in it that i thought a pagination would be effective to add in. Also through my research I noticed that the publication similar to my own also didn't use pagination, so that was big factor into me not using one.

However, there are a lot of times where you should use a pagination. When you have a lot of pages and a lot of information it can sometimes help to use a pagination to structure your book and to let your audience know where they are in the book as they might become confused as to where they are and what sections of the book they are looking at, so a contents page can solve that problem.

Studio Brief 4 - Style Guide

In order to communicate my web design to the developers who's job it would be to code up the website I created a style guide in that the web developers can use as reference when coding. Style guide is essentially rules and guides to follow for what the web developers should and shouldn't be doing and how they go about coding up the website. It's a way of making sure no mistakes can happen as the style guide will give them everything they'll need. 

Below is the finished style guide:

Front cover - not necessarily important but gives an instant understanding of the style of the site.

Font size page - When it comes to coding information, text comes in forms of H1, H2, H3 and so on to H6. The 'h' represents a heading and the number next to it represents the size, therefore H1 is the biggest header and normally used for titles and h2 is used for subtitle and so on. Also 'P' represents Paragraph which is used for body copy. In the guide above, I've let the developer know what headers to use and what size. If there was a title then the web developer would know that he had to use the typeface Didot regular at the point size of 22. If the developer needed to use body text then he would look at the guide and see the rules I set out for 'Paragraphy' and that is to use the typeface Garamound in either reg, bold or italic and it had to be at the point size of 17. That just shows you how he would seek out the guild to let him know what rules he needs to follow in terms of type and size.

I've also reference the CSS font stack in case the primary typeface isn't compatible or usable. For example the developer would input the following font stack into the CSS style sheet. font-family "Didot", "Didot LT STD", "Bodoni MT", Garamound, "Times New Roman". That font stack once implemented within the CSS would let the code know that if Didot doesn't work then the typeface will change to the next typeface in the font stack and that would be Didot LT STD. The order of the typefaces are chosen for similarity, so the next font that is most similar in characteristic to Didot is Didot LT STD.

In the end this ensures the brand still stays consistent and it's reputation isn't damaged is the site doesn't display your typeface so the backup font is there in case the primary typeface fails. 

Pop up - This page lets the developer know how to recreate the pop up. That include what percentage of fade for the background, the RGB colour code of the pop up box, what header and colour of text and how thick the border has to be.

This makes sure the developer isn't second guessing. If he didn't have these rules then he might guess from the Photoshop file which would be inaccurate and unprofessional from the designer not to provide guidance on how to recreate the pop up.

Buttons - First of on the left hand corner the style guide expresses what colours are to be used throughout the site and what the RGB colour code would be for it. The colours shown are the primary colours and the highlighted colour for the promotional call to action button. The left hand side communicates what code to implement on the different stages of the active navigation buttons.  How it would appear at it's primary stage, how it would look once someone hovers over the button with their mouse, how it looks once the user has clicked and lastly how the button would appear if the link had been visited. And with the respectable colours and point size to have the border.

Call to action button - This is the same set up at the navigation button but for the promotional button. So again what it would look like at the different stages of interactivity the developer would take this information and implement it with the CSS.

Studio Brief 4 - Band Websites

As the genra of band I will be designing for is classed as Heavy metal/Melodic Hardcore/Post-hardcore, it would be beneficial to see what other bands of the same genre have done in terms of responsive design through web and mobile and also to see how they have promoted their newest album and to take inspiration.

Architects website - Architects use of an overall black aesthetics links back to the bands genre as heavy metal bands are associated with the colour black. Once you're on the landing page the website design is simplistic, modern and is easy for the user to understand whats happening. In terms of user journey there isn't much to throw them off, the website isn't over complicated with animation or a fluid layout, it's centred align with only 1 column. Even though the website would be aimed at younger adults it would still be understandable for people who aren't as tech savvy.

This is the mobile responsive version. The mobile version is very consistent to the desktop version and this is because of the simplistic layout choice of the website, which shows that a lot of thought had been put into place to make the website responsive through all platforms. Having a simple layout is cost efficient and time saving as everything is already designed but just in a bigger version and it's a big help when transferring the design over to the developers who already have a template to follow.

Deftone website has a similar aesthetic to the previous website. Again, simplistic but professional layout. Large type to attract the users attention and then you simply scroll down to the tour dates and then onto their store. Easy user journey through the site as it's just one page website, so the user won't have to go through the navigation and onto different parts of the site, they can just scroll down essentially. One column layout again, making it functional to a larger audience .

Responsive site on mobile. Same set up to the desktop site, the tour dates have been blown up to allow for easy viewing on the mobile for the user and a nice big call to action button to leave them no doubt where they have to buy the tickets. It's important when designing for the user is to not get distracted buy the aesthetics of the design, it would be more beneficial for for the user journey but also the companies conversation rate, Deftone could of easily made the tour dates smaller in a similar fashion to the desktop site to save room and time. Readability and clear indication is important for the user journey.

Amity Affliction desktop has a great feature image once you land on the page, advertising their latest album. Aesthetically the design of the site doesn't reflect the bands music genre. it's a contrast to the dark, grunge look of Architects and Deftones. However, it could be some what beneficial to a lot audiences that find it hard to read white on black, therefore you can potentially see it as a positive. 

Unlike the other two mobile sites i mentioned, this mobile site is slightly different to the desktop version. At first glance, it's hard to tell what the Amity Affliction is about. It doesn't look like a bands website due to it's dull aesthetic. It's not a site that will relate to the target audience and will definitely not get them pumped up about their new song/album. They haven't been able to reflect the featured image on the desktop site, which was a big visually attention grabber. The consistency is another let down, if two sites look different to each other the user may become confused as they would look for similar visual indications from the desktop site to let them know they are on the right website page as right now the home page could be mistaken for the 'news' page.