6. Criterion E_ Product Development Sinan

SAVE OFFLINE

Criterion E: Product Development Advanced Techniques Used: ➢ Audio Editing ➢ Optimizing image resolutions ➢ Integration of different elements ➢ Mobile Compatibility

Organization of Website Part Time The Band Website

Insta/Soundcloud Icons

Home

The Band

Listen

Achievements Gallery

Contact

Title

.jpg image

Wix Music Editor

Title

Title

Title

Clickable link

Title

Part Time Text discography .mp3 files (10 2 .jpg images songs)

14 .jpg images

Text (email link) Text (instagram link)

background.jpg

Band bio text (.jpg thumbnails)

Clickable Soundcloud link

Title Text 2 .jpg images

E-mail Interface

Technique 1: Audio Editing In the listening section of my website, I had to include the discography of Part Time. The studio recordings were separate tracks of 4-5 minutes long, which were appropriate to put in the listening section with Wix Music Player. However, our live concert recordings were not cropped into pieces and were not separated song by song, and track was over an hour long. I had to find and crop the songs into separate tracks after saving them separately in the full live concert track. I used Audacity software to do that.

I dragged the live concert track in the software. After Audacity processed the track, I determined the beginning and the end of each track that could be found in the concert recording. I cropped each song and pasted them back on different Audacity files.

Then, I exported each track as an .mp3 extension because it is the most common audio track extension. After that, I renamed all the tracks that I exported and changed the file details with proper names in order to prevent any confusion that may occur later.

Finally, I had to add all the songs to Wix Music Editor in order to import the tracks to the Wix Music Player. As I have changed the track details with proper song names and band informations, all the tracks showed with their specific song names, which made identifying and adding songs to the Music Player a lot easier than expected.

Technique 2: Optimizing Image Resolutions In order to make the website as planned, I had to import the images to Wix and then add the images in necessary pages. I imported all the images and tried to add some of them in the necessary pages, however some images turned out to be very sharp on their thumbnails. I figured out that the reason they look very sharp was because some photos were taken with high quality cameras which had ultra high resolutions. So it affected the image quality when I tried to shrink them as a thumbnail. I had to find a way to optimize the image resolutions for the website. So I found the IrfanView Image Editor software and downloaded it. In the Options menu of the software, I found the Resample/Resize option.

Most images were 7680 x 5751 pixels which is understandable to look sharp when shrinked. I changed the size of the image to a more compatible and common size 800 x 600. It also minimized the file size which made it faster to upload on Wix and faster to load when the page opens up. As the file size decreases, internet can load the image faster due to using less memory. I succeeded and lost the sharpness on the thumbnails by optimizing the image resolutions.

Technique 3: Integration of different elements I used variety of elements in order to make the website more functional and better looking. Also it is the best way to assure the visitors that it is a real band. Firstly, I added a listening section on the website which the visitors may listen to the band discography if they want. In order to do that, I used Wix Music Editor. With Wix Music Editor, I imported all our recordings from my computer to the website and created a playlist named “Part Time Discography”. Then, I added Wix Music Player on the listening section and selected Part Time Discography playlist which was already on Wix. This made the website better looking and more functional for a music band.

Other than the listening section, I created a photo gallery section in order to give an opportunity to the visitors to see what the band has experienced, and to see all the band photos.

Moreover, I added a contact section with the help of Wix, which had an e-mail interface. In the contacts section there are two direct links to band e-mail and Instagram. When the e-mail link is clicked on, the visitor is directed to their computer’s default mail provider and a pop-up screen appears which is already set to send a mail to the band’s e-mail address. When clicked on the Instagram link, the visitor will be directed to @parttimetheband Instagram account. Lastly, there is a direct e-mail interface which gives space for the visitors to add their thoughts on the website or any questions that they might have. The messages on that section will be sent to the website editor (me) and to the band e-mail.

Technique 4: Making the Website Mobile Compatible As smartphones are used more than personal computers in this decade, mobile compatibility for websites is something vital. Luckily, Wix has a mobile emulator which displays how the website will look like on mobile devices. In the mobile emulator, I made the sections disappear as large titles on top of the website, and combined them all in a menu button which made it handy to use with mobile.

I redesigned the listening page for mobile. The Music Player on the computer was too wide, so while transferring the music player I slimmed it down and made it scrollable for mobile use.

Lastly, I restructured the sections which contained long phrases and photo thumbnails such as the Achievements section. I changed the design in the mobile by aligning the texts to the center — which looks proper on mobile— and aligned the photos as one under the other instead of putting them side by side as in the desktop view.

Word Count: ​989 Words