WEBSITE DRAFT 2

After completing draft 1, it was time to get to work on draft 2 of our website. Draft 2 has seen many changes and improvements, including differences to layout and colour. We are very happy with how far the website has come from the first draft, and we are excited to develop it even further.

Here is the link to our website:

Attached below is the checklist of requirements for the website, which will be used for comparison with our own website to ensure its of high standard.

What have we completed?

  • Our digipak features on the home page below the fold. However, because it is such a key element, we are considering moving it above the fold to ensure it is seen.
  • We have achieved great continuity with our theme through fonts and colours, the same used as the digipak.
  • Social media links are there.
  • We have a store page with merchandise and tickets available to buy, all linked together and interactive featuring images as well.
  • The music video is on the site

What do we need to include next time?

  • A short biography section to get to know the star a little more
  • A gallery section with images of our star
  • Add in a news section to keep up to date
  • More images of the star throughout
  • Introduce the music video.

PRODUCTION SKILLS 4 – EVALUATION OF WEB DESIGN APPLICATION

Wix.com is an easy to use website builder with hundreds of templates and simple features to help you make your own website. We used Wix to develop our own website, and the outcome so far has been great.

Here are some of the features in Wix we learned how to use to make our website the best it could be:

Add tool

The ‘+’ tool is essential to adding any feature to a website. In our case, it allowed us to add in text and images to each page of our site, as well as more intricate elements such as buttons and interactivity. Without the add tool, we wouldn’t have had a website! The feature was easy to use, with a large drop down menu of all the items you can add to your site clearly marked. The tool has provided us with endless options on typeface, colours, shapes and images which were vital to branding and finding something that would fit our taste and conventions.

Colours:

In our group, colour is everything to making the perfect product. Our whole brand relies on colour to make sense, so ensuring that we could play around with colour in our website was very important to us. Luckily, the colour picker was a great helping hand! The colour picker allowed for us to continue our theme of luminous shades contrasting with dark background, through simply selecting colours from their palette. The site colours provided were all quite dull and boring, however the colour picker gave us the option to create our own colour palette of whatever we wanted,  which was simple and easily accessible. We created our own palette of pinks, greens, yellows and blues to ensure everything was just how we wanted it to be.

Text Settings:

Every aspect of the website is important to keep up our brand. This means that there was definitely no exception when it came to picking fonts. We couldn’t just have a dull, overused font for our site, we needed to find something that was more fun, more ‘us’. Luckily, the font picker was there to save the day! This easy to use tool allowed for us to try out a variety of fonts until we found the one we liked the most, ‘Lulo clean’. The typeface gave the website a very clean cut, modern look, without being too much or too little. This tool allowed for continuity throughout our work, and made our site look more aesthetically pleasing.

Overall, many new skills have been learned through the process of creating the website, and the builder itself was something that can be picked up quite quickly and easily. Conventional elements have been reinforced through the creation of the website as it has come together. The skills learned through the website builder can be applied to anything in the future, should I want to start up my own blog or business, and I am glad to have learned how to use each feature so that if further improvements need to be made to the site, this can be done quickly and easily.

GRAPHICS/ILLUSTRATIONS

Embedded below are a few of the graphics and illustrations we have created to use in our digipak. Charlotte came up with the idea to use slime as the main focus of our drawings, and it ended up turning out really well. Our original idea was to draw over an image of Joe’s eye, adding in bright colours to make it something unique, this then lead to us drawing over a cutout of his lips too, and then drawing a rocket freehand. Everything was drawn and edited on Photoshop, which was quite time consuming, so hopefully all images will be utilised in some form on the digipak.

Overall, I think our first attempt at creating unique graphics for our digipak has turned out exceptionally well, considering we didn’t entirely know what we wanted and were really just playing around with Photoshop.

Rocket: This was freehand drawn in an attempt to represent the name of our digipak, ‘I’m scared to fly.’. We thought the rocket would symbolise the ‘flying’ aspect, and made sure to include a bright colour palette to make it fun and fresh. This was drawn quite quickly, and isn’t perfect, but I think it fits the rugged look we want to go for, as it almost looks quite childlike.

 

Eye: For this we cut out an image of Joe’s eye and layered the paint brush tool on top of it in block colours to create the initial outline. We then drew over the top in a thinner black stroke to enhance features and give it a line drawing effect. I love the outcome of this and hope it is used on the digipak.

Lips: Here is a before and after of the lips that we drew for the digipak. To create this we used a similar process to the eye, layering block colour and then enhancing with thin black lines. We then used splashes of white the highlight certain areas.

All in all, our first lot of graphics are already looking great! Now we will try our best to improve on them by tidying up some of the lines and adding more highlights for texture. As well as this, we will continue to illustrate more elements for the digipak using Photoshop so that we can finalise a noteworthy product.

DIGIPAK DRAFT 3 AUDIENCE FEEDBACK

Feedback is essential to ensuring products are the best they can be. Today we endeavoured to get feedback from school peers, through asking questions and displaying the information in the form of a tally chart.

What we asked our peers:

What is the genre of the digipak?

Which adjectives best describe the digipak?

We thought it was important to ask these questions to find out if our digipak did meet the conventional requirements of the rap genre, and to see if it was clearly recognisable to people who had never seen our digipak before.

Here are the results:

The tally chart above depicts how our audience could clearly tell that the digipak was supposed to be rap, meaning we were successful with fitting conventions to meet expectations. A few people thought it was electronic, which is understandable due to the bright colour scheme we have used, however I think that the contrast between the bright and dark colours was what swayed people more toward the rap genre.

Many people thought our digipak was ‘vibrant’, ‘contrasting’ and ‘fun’, which was exactly what we had hoped! Our aim was to create a fun, exciting product and it feels great to know that everybody else thinks we achieved that aswell.

As a group, we will take on this feedback to finalise our draft of the digipak to make sure it fits the rap genre conventions as much as possible, and will continue to develop our digipak until it is the best it can be!

 

WEBSITE DRAFT 1 – SELF ASSESSMENT

Embedded underneath are screenshots of the first draft of our website. Our website is not linked as it is ever changing and improving, with a few tweaks we need to make to make it perfect. This draft is rather basic, its simple and clean. All of us have no previous experience with building websites, so our skills started off very limited, but we have all learned new skills along the way.

What went well:

  • The site is easily navigated, with clear headings and drop down menus.
  • The typeface is big and bold, easy to read.
  • We have social media links which promotes our star even further.
  • Links to connect buttons with actual ticket sale websites.
  • Own original song lyrics to add authenticity to the lyric page.

Things to improve:

  • It is too plain, needs to be more interesting
  • Needs more rap genre specific elements
  • Need to embed music video and digipak into music page
  • Needs a hero shot on the front page

Overall, draft 1 was successful in creating a foundation for a website which has the potential to be really great. We will continue to add in genre specific elements, adding more colour and images as we go to enhance its appearance.

Self Assessment:

Integration of multimedia:

The integration of multimedia has not been well executed, as we are yet to add in images to our site, we only really have the basics. The font is big and bold, reflective of our star and his confident image. Our font is similar to that of the digipak and is dark to contrast the white background to attract the target audience. We have a continuous theme of contrasting colours running through all of our products, and the website is no exception.

Navigation and Layout:

The layout of our website is of a simple nature. Navigation is clear, with a large navigation bar with different headings and links right at the top above the fold. This creates predictable pleasure for the audience as everything they are looking for is right in front of them, meaning they will be able to find everything the want to easily and quickly. We have used a very bold, modern typeface to attract our young target audience, its easily legible with a small shadow behind each letter to make it look more interesting and pleasing to the eye. There is a shop with merch linked to it, with ‘buy now’ buttons linking to an actual store where merch and tickets to the tour can be bought.

Branding:

We have ensured that we include all conventional aspects to the website, including adding in an extra lyrics page whereby Joe has written his own rap lyrics to fit with the genre as a unique add on to the website. This serves to create a brand for our star, as well as all the traditional elements included such as colour schemes, design, and mise-en-scene.

 

PRODUCTION SKILLS EVALUATION 3 – DIGIPAK

Now that the digipak is almost finished, as a group we have learned lots of valuable new skills on Photoshop. Here are some of those skills:

*We have completed our entire digipak on Photoshop as InDesign did not provide us with the striking bright shades that we wanted.*

Layering Text:

We wanted out title to stand out, so instead of just leaving it a plain white shite, we decided to add some fun colours behind to really put emphasis on the title and its meaning. To achieve this, we wrote out each word twice, using different colours for each word. We then layered the text slightly above or beneath each word to give a jagged shadow effect. It’s a simple fix, but something that definitely looks as if a lot of time and thought went into it – and it looks a lot more fresh and exciting than the plain white arial typeface!

Brush tool:

Another simple tool which makes a big difference. The brush tool has allowed us to draw freehand on our digipak to create some amazing drawings unique to our group. We utilised the brush tool to draw slime on various parts of our digipak panes (rocket/lips). This was pretty simple to achieve, simply drawing out the shape we wanted and highlighting areas in a lighter colour to give almost a 3D effect. Then we outlines everything in a thinner stroked black to emphasise shape. Our drawings turned out really well using the brush tool, and those panes are for sure our stronger ones.

Inverted Colours:

When choosing an image for our front pane, we decided to invert the colours on our image as it looked too clean and perfect to be of the rap genre. To do this, we used ‘Ctrl-I’ to invert what we had selected, and this ended up with a really cool outcome. Our digipak instantly looked more mysterious and strange, with the inverted colour giving connotations of electricity and power. This fits in well with the plugs Joe is holding in his hands.

PHOTOSHOP – WHAT WENT WELL?

  • Our drawings and use of bright colours worked really well
  • Our repetition of words to create a pattern
  • The colour scheme and layering
  • Cutting around our image
  • Digital drawing of tattoos on Joe’s body

Targets:

  • Use more images which could be enhanced and cut to fit
  • Play around with layout more

Overall, my Photoshop skills have developed significantly since I last used the program, through individual trial and error, and learning tools and techniques from my peers. As well as this, Youtube tutorials specific to Photoshop have been a great aid in helping with the trickier, more advanced things. These design and computer skills have already proven useful outside the classroom, and I hope to continue to develop these skills in the future.

FLOW CHART AND PREFERRED TEMPLATE

Flow chart:

Here is our flow chart to display the way that we want our website to turn out. It clearly shows different categories and subsections to aid us in creating a website with structure and precision. Our goal is audience satisfaction, which will be achieved through an easy to navigate site containing every aspect of Isaiah Cole’s world.

The flow chart displays how we want our different pages laid out. The navigation bar will be easy and simple, with no eccentric fonts or images surrounding it so as not to draw attention away from our main hero shot.

Creating this flow chart has  helped us as a group to reinforce what we want to achieve through the website and its layout. We will ensure that our website is clean, simple and not too clustered, to avoid confusion and keep good aesthetics. By using this flow chart and staying organised, we will create a website that meets the audience’s expectations – and much more!

Template:

Here is our chosen template from Wix, which we think would be great for our website for a hip hop/rap artist. This template has a simple structure to it, which we will use a foundation for creating our own website to make sure we end up with a product that is easily navigated. The simplicity is key to achieving this, which can be seen here as there is no unimportant, useless information and everything gets straight to the point. We chose this template as we like the idea of having one main conventional image as our focus, and attention will not be deferred from the hero shot.

Link to template:

https://www.wix.com/website-template/view/html/1718?siteId=b028f1c8-37ff-4720-ac58-67433a52e638&metaSiteId=e0781fad-4728-4328-a513-f14a465408ad&originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fmusic

AUDIENCE INTERACTION WITH A WEBSITE – AN ANALYSIS

Here is our screencastify, whereby we analysed the ASAP MOB website for its features and ways of interaction with fans. As a group we discuss each aspect to the website, whilst including Blumler and Katz’s theory for uses and gratification.

The website we used proved very interesting, as it challenges general conventions with a framed set of videos used as the hero shot, going below the fold. This kept the website fresh and intriguing, and definitely made myself and my group curious to know more.

Through analysing the ASAP MOB website, we have understood the genre specific conventions that are significant to engagement with the audience. As well as this, picking apart this website has allowed us to find inspiration for our own website in terms of colour scheme and layout, and we will refer to this when changing and developing elements in the near future.

 

 

WEBISTE TERMINOLOGY

We picked the ASAP MOB website to analyse, looking for conventional features of this rap star’s site. This website isn’t the most conventional in terms of traditional website format and layout, but it’s definitely interesting and unique.

The website doesn’t use images of the star himself on the front home page, instead uses moving image of a recent video to promote his work. This could be a reflection of his persona and where his values lie as a star and his image. The site is clear and simple to navigate, which is essential to create a site accessible to everyone, no matter their age or ability to keep all fans happy.

This task has enabled myself to learn each of the terms. This means that when I begin to develop my own website, I can understand the importance of conventions to make my website clear and simple to use, suitable for any audience.

MUSIC VIDEO DRAFT 4

Here is draft 4 of our music video:

What has changed?

There has been many changes to our video since draft 3. Firstly, there are no longer any gaps/empty spaces in our video! We have filled everything with unused footage and a final quick reshoot for Neo’s performance scenes. As well as this, we have played with colour and filters more, making sure that every shot is bright and full of life. We have edited a few shots to ensure there is variety in what we have produced, as some of the shots were lacking in originality and flare.

We then asked Neo to give us some feedback on draft 4 to see what needed to be improved.

Peer feedback:

 

Targets for Improvement:

  • Sync is off sometimes, sort this out
  • The sky on some of Charlotte and Joe’s clips isn’t great, some editing issues there
  • Add in a final shot of Charlotte and her dress flowing away
  • Fix the eye transition, and add in a few more to keep it interesting
  • Clips of Neo are very ordinary and need some editing to make them fun
  • Some clips are dull and need more colour and life