SlideShare a Scribd company logo
1 of 19
NTLS Website Design
DRAWN TEMPLATE
Cover page
• The aim of the cover page was to really
advertise the fact that NTLS had just released
a new debut album.
• It forced the viewer to look at the information
and was a pop up that they had to close
before they could access the website. This was
similar to Lewis Watson’s website page, which
we took influence from.
‘Enter Site’ will force people to
look at the page in order to find
how to progress onto website
Album cover artwork creating a
stronger brand for artist
Quick and easy to process information
Consistent branding creating
stronger band image
Image of album cover
Easy to process information and links to buy
Home Page
• The home page we designed to keep the
bands debut album branding consistent
• By using the album cover’s graphic containing
images of both artists we promoted them and
the album at the same time, similar to
SBTRKT’s website homepage
• The background for the website would also be
the image from the album cover
Consistent branding
Home page art
is same as
album cover
artwork
Easy to navigate
tool bar
Band logo for
consistent branding
Easy to navigate menu bar
Album cover graphic and
background image
Album Tracklist
• This page was for fans following the release of
the album more, although it was a nice
feature to include regardless of release date
• The page would contain links to sites where
the album was available for purchase
• Also a visual of the final album cover would
appear again
NTLS logo
Album cover artwork Links to sites to but / stream the
songs from the album
About The Artists
• This page was designed with the fans in mind, where
they could read up about and feel more involved
with the artists
• We took influence from online interviews with
AlunaGeorge and FKA Twigs, similar artist to NTLS in,
and wrote a short bio about their character and
background
Profile pictures of the artists
would contain links which
when clicked would contain
their page
A link to the artists twitter page would
allow users to follow them for more
frequent updates
Video
• The Video feature was to advertise the single
that was released prior the debut albums’ to
generate hype about the product.
• This was a plain YouTube video link that could
be played on the website for an easy to use
experience
• The fact the video could be played on the
website also meant people would stay,
potentially leading to sales of the album
Plain format easy access play button
Gallery
• The gallery contained images of the artist for
the more hardcore fans, which meant they
could review ‘exclusive’ photos of NTLS from
their shoot on set for the ‘Heart Skipped a
Beat’ video.
The images would be laid out
in a grid format
Store
• The store would contain unisex merchandise
available directly through the website’s shop.
• The merch available would have the logo on
as to strengthen the brand, and would only be
available in black and white (The colours the
artists wear in the ‘Heart Skipped a Beat’
video) as to stick with the band’s image
Easy to navigate gridded format

More Related Content

What's hot (8)

conventions of a digipak
conventions of a digipakconventions of a digipak
conventions of a digipak
 
Assignment 1: Researching Music Videos
Assignment 1: Researching Music Videos Assignment 1: Researching Music Videos
Assignment 1: Researching Music Videos
 
Music Distribution Presentation
Music Distribution PresentationMusic Distribution Presentation
Music Distribution Presentation
 
Conventions of cd advertising
Conventions of cd advertisingConventions of cd advertising
Conventions of cd advertising
 
Assignment 18
Assignment 18Assignment 18
Assignment 18
 
Evaluation question 2
Evaluation question 2Evaluation question 2
Evaluation question 2
 
N dubz Purpose and Benifits
N dubz Purpose and BenifitsN dubz Purpose and Benifits
N dubz Purpose and Benifits
 
Website analysis
Website analysisWebsite analysis
Website analysis
 

Similar to Website Template - NTLS

Webpage conventions/analysis
Webpage conventions/analysisWebpage conventions/analysis
Webpage conventions/analysis
inderpal890
 
Evaluative commentary part 1
Evaluative commentary part 1Evaluative commentary part 1
Evaluative commentary part 1
mo_usman
 
In what ways does your media product use
In what ways does your media product useIn what ways does your media product use
In what ways does your media product use
emilyilett1
 
In what ways does your media product use
In what ways does your media product useIn what ways does your media product use
In what ways does your media product use
emilyilett
 
Media evaulation
Media evaulationMedia evaulation
Media evaulation
PatchC0013
 
Evaluation Question 1
Evaluation Question 1Evaluation Question 1
Evaluation Question 1
sanj96
 

Similar to Website Template - NTLS (20)

Website Analysis: The Sounds
Website Analysis: The SoundsWebsite Analysis: The Sounds
Website Analysis: The Sounds
 
Codes and Conventions of 'indie-alternative' artists' websites.pptx
Codes and Conventions of 'indie-alternative' artists' websites.pptxCodes and Conventions of 'indie-alternative' artists' websites.pptx
Codes and Conventions of 'indie-alternative' artists' websites.pptx
 
Conventions of Artists' Websites
Conventions of Artists' WebsitesConventions of Artists' Websites
Conventions of Artists' Websites
 
Webpage conventions/analysis
Webpage conventions/analysisWebpage conventions/analysis
Webpage conventions/analysis
 
Evaluation 1
Evaluation 1Evaluation 1
Evaluation 1
 
Evaluation 1
Evaluation 1Evaluation 1
Evaluation 1
 
Lady gaga website analysis
Lady gaga website analysisLady gaga website analysis
Lady gaga website analysis
 
Music Video - Creative critical reflection (Advance Portfolio) (CIE)
Music Video - Creative critical reflection (Advance Portfolio) (CIE)Music Video - Creative critical reflection (Advance Portfolio) (CIE)
Music Video - Creative critical reflection (Advance Portfolio) (CIE)
 
website media coursework planning.pptx
website media coursework planning.pptxwebsite media coursework planning.pptx
website media coursework planning.pptx
 
Adverts
AdvertsAdverts
Adverts
 
Evaluative commentary part 1
Evaluative commentary part 1Evaluative commentary part 1
Evaluative commentary part 1
 
Webpage analysis of R&B Artists
Webpage analysis of R&B ArtistsWebpage analysis of R&B Artists
Webpage analysis of R&B Artists
 
Artist website research
Artist website researchArtist website research
Artist website research
 
Conventions of Magazine Adverts
Conventions of Magazine AdvertsConventions of Magazine Adverts
Conventions of Magazine Adverts
 
In what ways does your media product use
In what ways does your media product useIn what ways does your media product use
In what ways does your media product use
 
In what ways does your media product use
In what ways does your media product useIn what ways does your media product use
In what ways does your media product use
 
Media evaulation
Media evaulationMedia evaulation
Media evaulation
 
Evaluation Question 1
Evaluation Question 1Evaluation Question 1
Evaluation Question 1
 
Evaluation Question 1 Part 3
Evaluation Question 1 Part 3Evaluation Question 1 Part 3
Evaluation Question 1 Part 3
 
Texual analysis of own digi pack
Texual analysis of own digi pack Texual analysis of own digi pack
Texual analysis of own digi pack
 

More from latymermedia2013 (6)

Pilgrim synergy
Pilgrim synergyPilgrim synergy
Pilgrim synergy
 
Pilgrim Website Conventions
Pilgrim Website ConventionsPilgrim Website Conventions
Pilgrim Website Conventions
 
Media A2 - FKA Twigs Casestudy
Media A2 - FKA Twigs CasestudyMedia A2 - FKA Twigs Casestudy
Media A2 - FKA Twigs Casestudy
 
Slide1
Slide1Slide1
Slide1
 
PBR&B Album Covers
PBR&B Album CoversPBR&B Album Covers
PBR&B Album Covers
 
Shoot 13th November - Promo Shots
Shoot 13th November - Promo ShotsShoot 13th November - Promo Shots
Shoot 13th November - Promo Shots
 

Recently uploaded

SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
CaitlinCummins3
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
中 央社
 

Recently uploaded (20)

SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
 
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
 
How to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptxHow to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptx
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
 
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading RoomSternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
 
PSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxPSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptx
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
 
FICTIONAL SALESMAN/SALESMAN SNSW 2024.pdf
FICTIONAL SALESMAN/SALESMAN SNSW 2024.pdfFICTIONAL SALESMAN/SALESMAN SNSW 2024.pdf
FICTIONAL SALESMAN/SALESMAN SNSW 2024.pdf
 
An overview of the various scriptures in Hinduism
An overview of the various scriptures in HinduismAn overview of the various scriptures in Hinduism
An overview of the various scriptures in Hinduism
 
Improved Approval Flow in Odoo 17 Studio App
Improved Approval Flow in Odoo 17 Studio AppImproved Approval Flow in Odoo 17 Studio App
Improved Approval Flow in Odoo 17 Studio App
 
An Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge AppAn Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge App
 
Including Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdfIncluding Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdf
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
 
Graduate Outcomes Presentation Slides - English (v3).pptx
Graduate Outcomes Presentation Slides - English (v3).pptxGraduate Outcomes Presentation Slides - English (v3).pptx
Graduate Outcomes Presentation Slides - English (v3).pptx
 
How To Create Editable Tree View in Odoo 17
How To Create Editable Tree View in Odoo 17How To Create Editable Tree View in Odoo 17
How To Create Editable Tree View in Odoo 17
 
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUMDEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
 
Observing-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptxObserving-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptx
 
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
 
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptxAnalyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
 
male presentation...pdf.................
male presentation...pdf.................male presentation...pdf.................
male presentation...pdf.................
 

Website Template - NTLS

  • 2. Cover page • The aim of the cover page was to really advertise the fact that NTLS had just released a new debut album. • It forced the viewer to look at the information and was a pop up that they had to close before they could access the website. This was similar to Lewis Watson’s website page, which we took influence from.
  • 3. ‘Enter Site’ will force people to look at the page in order to find how to progress onto website Album cover artwork creating a stronger brand for artist Quick and easy to process information
  • 4. Consistent branding creating stronger band image Image of album cover Easy to process information and links to buy
  • 5. Home Page • The home page we designed to keep the bands debut album branding consistent • By using the album cover’s graphic containing images of both artists we promoted them and the album at the same time, similar to SBTRKT’s website homepage • The background for the website would also be the image from the album cover
  • 6. Consistent branding Home page art is same as album cover artwork Easy to navigate tool bar
  • 7. Band logo for consistent branding Easy to navigate menu bar Album cover graphic and background image
  • 8. Album Tracklist • This page was for fans following the release of the album more, although it was a nice feature to include regardless of release date • The page would contain links to sites where the album was available for purchase • Also a visual of the final album cover would appear again
  • 9. NTLS logo Album cover artwork Links to sites to but / stream the songs from the album
  • 10. About The Artists • This page was designed with the fans in mind, where they could read up about and feel more involved with the artists • We took influence from online interviews with AlunaGeorge and FKA Twigs, similar artist to NTLS in, and wrote a short bio about their character and background
  • 11. Profile pictures of the artists would contain links which when clicked would contain their page
  • 12. A link to the artists twitter page would allow users to follow them for more frequent updates
  • 13.
  • 14. Video • The Video feature was to advertise the single that was released prior the debut albums’ to generate hype about the product. • This was a plain YouTube video link that could be played on the website for an easy to use experience • The fact the video could be played on the website also meant people would stay, potentially leading to sales of the album
  • 15. Plain format easy access play button
  • 16. Gallery • The gallery contained images of the artist for the more hardcore fans, which meant they could review ‘exclusive’ photos of NTLS from their shoot on set for the ‘Heart Skipped a Beat’ video.
  • 17. The images would be laid out in a grid format
  • 18. Store • The store would contain unisex merchandise available directly through the website’s shop. • The merch available would have the logo on as to strengthen the brand, and would only be available in black and white (The colours the artists wear in the ‘Heart Skipped a Beat’ video) as to stick with the band’s image
  • 19. Easy to navigate gridded format