LAYOUT
• THE LAYOUT IS DYNAMIC. SCROLLING THROUGH THE WEBSITE TAKES YOU TO DIFFERENT INFORMATION
CONCERNING THE ARTIST WHICH IS SPLIT BY A GREEN INTERFACE LAYER THAT SIGNIFIES NEW
INFORMATION AND COMPLIES WITH THE GREEN AESTHETIC AS DISCUSSED EARLIER.
• ON MOBILE THE LAYOUT CHANGES SLIGHTLY. THERE IS A DROP DOWN MENU THAT SHOWS ALL OF THE
FEATURES PRESENTED AT THE TOP OF THE SCREEN WHEN ON THE WEBSITE. THIS MAKES IT EASIER TO
NAVIGATE THROUGH THE CONTENT ON THE WEBSITE.
• THE WEBSITES IS PREDOMINANTLY IN THE MIDDLE COLUMN WHICH, WHICH ALLOWS FOR THE LAYOUT ON
MOBILE NOT TO CHANGE THAT MUCH.
LAYOUT
THIS IS THE WEBSITE WHEN
LAUNCHED
HERE YOU CAN SEE THE GREEN
TRANSITION SCREEN APPEARING
SCROLL
SCREEN
LIST OF
NAVIGATION
FEATURES
PICTURE OF THE ARTIST AND CO-STAR
USE OF HASHTAG TO EXPAND THE
ARTIST’S SOCIAL MEDIA PRESENCE
LAYOUT
FRONT PAGE FROM MOBILE
PERSPECTIVE
SCROLLING FROM MOBILE
PERSPECTIVE
DROP-
DOWN
MENU
FEATURES
FROM THE
COMPUTER
VIEW ARE KEPT
THE SAME
COLOUR SCHEME
• THE COLOUR SCHEME IS GREEN WITH VARIATIONS OF THE SHADE BEING PRESENT THROUGHOUT THE WEBSITE.
THIS THEME ALONGSIDE THE BLACK AND WHITE AESTHETIC THAT IS PRESENTED FOR ASPECTS SUCH AS
PICTURES AND TEXT IS PLEASING AS IT PREVENTS THE READER FROM BEING OVERPOWERED WITH COLOUR
WHILST STILL PROVIDING A STYLISTIC EFFECT THAT IS PLEASING TO SEE.
• COLOUR MANIPULATION LIKE THIS IS A REOCCURRING THEME WITH HAYLEY’S DESIGN METHOD AS SHOWN IN
HER 2 EP’S: “CITRINE” AND “THIS SIDE OF PARADISE”.
• THE USE OF BRIGHT SATURATED GREEN AS OPPOSED TO A MUTED GREEN IS SIGNIFICANT AS IT HIGHLIGHTS
HOW THE SINGER WANTS ATTENTION DRAWN TO THE ISSUES THAT SHE IS ADDRESSING AS THEY ARE
IMPORTANT, SHOWING HOW SHE IS NOT HIDING AWAY, SHE WANTS TO BE NOTICED.
COLOUR SCHEME
CITRINE THIS SIDE OF PARADISE
YELLOW AND
GREEN COLOUR
MANIPULATION
COLOUR IS
VERY BUSY
AND VIBRANT
WHICH
COMPLIES
WITH THE
THEME FROM
THE WEBSITE.
NAVIGATION
• NEWS, MUSIC VIDEO, TOUR, BIO AND SUBSCRIBE ARE THE HEADINGS THAT ARE SHOWN UNDER THE ARTIST’S
NAME CAPITALISED AT THE TOP OF THE PAGE. THIS GIVES THE READER EASY ACCESS TO THE INFORMATION
NECESSARY FOR WHAT THEY WISH TO FIND OUT.
• THE LINKS AVAILABLE TO CLICK HIGHLIGHT A DARKER SHADE OF GREEN.
• AT THE BOTTOM ARE LINKS TO THE ARTIST’S SOCIAL MEDIA OUTLETS, WHICH ALLOWS THE READER TO STAY
CONNECTED WITH THE ARTIST, AS WELL AS THE OPTION TO SUBSCRIBE TO THE WEBSITE, CREATING
NOTIFICATIONS WHEN CHANGED OR UPDATES ARE MADE TO THE WEBSITE.
• THESE LINKS APPEAR AS A MENU DROP DOWN ON MOBILE AND SMALL-SCREEN LAPTOPS, OR AS A LIST AT THE
TOP FOR LAPTOP.
NAVIGATION
COMPUTER VIEW MOBILE VIEW
DROP DOWN
MENU TAKES
YOU TO THE
LINKS FOR THE
ARTIST.
SEGMENTS OF THE WEBSITE LAID OUT
IN A LINE UNDERNEATH THE ARTIST’S
NAME
FONT
• THE FONT FOR THE WEBSITE IS ALL CAPITALISED AND BOLDED. IT IS SANS-SERIF AND HAS SMALL LINE
SPACING BUT BIGGER SPACING BETWEEN THE LETTERS OR BETWEEN THE WORDS THEMSELVES. BEING
SANS SERIF IS IMPORTANT AS IT IS MORE MODERN AND SUITED TOWARDS A YOUNGER AUDIENCE,
WHICH COMPLIES WITH HAYLEY’S TARGET AUDIENCE BEING PREDOMINANTLY YOUNG PEOPLE.
• THE COLOUR IS EITHER BLACK OR WHITE, WITH THE EXCEPTION OF THE SINGER’S NAME BEING IN GREEN.
• THE ARTIST HAS MANIPULATED FONT HIERARCHY. TYPICALLY, SERIF FONTS ARE FOR OFFICIAL
DOCUMENTS AND ARCHAIC TEXTS, HOWEVER HERE THE FONT APPEARS MORE PERSONABLE, LESS
PROFESSIONAL AND THEREFORE MORE CENTERED TOWARDS A YOUNGER AUDIENCE.
FONT
LIMITED LINE SPACING
SINGER’S NAME IN GREEN FOR
THE TITLE PAGE
SANS-SERIF
CAPITALISED
BREAKS THE FLOW OF
CONTINUATION. THIS
DRAWS THE READER’S
ATTENTION TO WHAT
IS BEING MENTIONED,
WHICH IS A CALL TO
ACTION FOR THE
SINGER’S TOUR DATES.
IMAGES
• MAIN IMAGE OF THE ARTIST WITH DIRECT ADDRESS TO THE CAMERA IN A MEDIUM CLOSE 2 SHOT WITH A
CO-STAR IS SHOWN AT THE TOP OF THE PAGE.
• THE WEBSITE SHOWCASES THE FANART THAT IS PRODUCED FOR HAYLEY WHICH IS SHOWN IN A WALL OF
PICTURES.
IMAGES
MOBILE VIEW OF THE MAIN IMAGE
COMPUTER VIEW OF THE IMAGE
WALL.
MAIN IMAGE
FAN ART WITH
#KIYOKOFANART AT
THE TOP
MODE OF ADDRESS
• THERE IS NOT MUCH TEXT ON THE FRONT PAGE OF THE WEBSITE, HOWEVER THE IMPERATIVES ADDRESS
THE READER AND THE CALL-TO-ACTIONS ENCOURAGE THE AUDIENCE TO STAY CONNECTED TO THE ARTIST
WITH WORDS SUCH AS “SUBSCRIBE + FOLLOW”, “GET THE LATEST…” AND “VIEW MORE…”
• BECAUSE THE SINGER HAS A YOUNGER TARGET AUDIENCE, THE EMPHASIS ON SOCIAL MEDIA OUTLETS IS
IMPORTANT AS A LOT OF YOUTHS USE SOCIAL MEDIA. THIS IS ALSO A GOOD WAY TO MARKET THE ARTIST,
USING A POPULAR OUTLET, SUCH AS SOCIAL MEDIA, SO THAT PEOPLE CAN FOLLOW HER AND INCREASE
HER BRAND POPULARITY.
MODE OF ADDRESS
Imperative call to
action
Imperative call to
action
Links to social media
outlets
Imperative call to
action
CONCLUSION
• THE LAYOUT FOR THE WEBSITE IS SUITED TOWARDS THE SINGER’S TARGET AUDIENCE, FOR EXAMPLE ENSURING THAT THERE ARE
SOCIAL MEDIA LINKS FOR THE VIEWER TO CLICK ON. THIS WOULD BE A HELPFUL THING TO INCLUDE WITHIN MY WEBSITE DESIGN
SEEING AS MY TARGET AUDIENCE IS ALSO PREDOMINANTLY A YOUNGER AUDIENCE.
• THE LAYOUT OF THE WEBSITE IS CLEARLY LABELED INTO SECTIONS WITH THE ARTIST AS THE PROMINENT FEATURE OF THE PAGE.
THIS WOULD BE GOOD FOR MY WEBSITE DESIGN HOWEVER IT WILL NEED TO BE ADAPTED AS THE VIDEO IS NOT FOCUSED ON THE
BAND, BUT ON THE MUSIC VIDEO’S CONCEPT. THEREFORE THE FOCUS WILL BE ON THE BAND LOGO AND ELEMENTS OF THE VIDEO.
HOWEVER, I WILL INCLUDE THE FEATURE OF HAVING DROP DOWN MENUS FOR THE DIFFERENT SECTIONS OF THE WEBSITE.
• THE SINGER’S WEBSITE HAS A GREEN, BLACK AND WHITE COLOUR SCHEME WHICH DOESN’T FIT WITH THE THEMES WITHIN HER
MUSIC VIDEOS WHICH TEND TO BE EITHER BRIGHT AND WARM COLOURS OR CONTAINS PINK HUES. SEEING AS THE WEBSITE WILL
BE FOR THE USE OF PROMOTING THE SONG, I THINK IT WOULD BE BETTER TO HAVE A COLOUR SCHEME THAT FITS WITH THE MUSIC
VIDEO, BEING PASTEL GRUNGE.

Website Analysis - Hayley Kiyoko

  • 2.
    LAYOUT • THE LAYOUTIS DYNAMIC. SCROLLING THROUGH THE WEBSITE TAKES YOU TO DIFFERENT INFORMATION CONCERNING THE ARTIST WHICH IS SPLIT BY A GREEN INTERFACE LAYER THAT SIGNIFIES NEW INFORMATION AND COMPLIES WITH THE GREEN AESTHETIC AS DISCUSSED EARLIER. • ON MOBILE THE LAYOUT CHANGES SLIGHTLY. THERE IS A DROP DOWN MENU THAT SHOWS ALL OF THE FEATURES PRESENTED AT THE TOP OF THE SCREEN WHEN ON THE WEBSITE. THIS MAKES IT EASIER TO NAVIGATE THROUGH THE CONTENT ON THE WEBSITE. • THE WEBSITES IS PREDOMINANTLY IN THE MIDDLE COLUMN WHICH, WHICH ALLOWS FOR THE LAYOUT ON MOBILE NOT TO CHANGE THAT MUCH.
  • 3.
    LAYOUT THIS IS THEWEBSITE WHEN LAUNCHED HERE YOU CAN SEE THE GREEN TRANSITION SCREEN APPEARING SCROLL SCREEN LIST OF NAVIGATION FEATURES PICTURE OF THE ARTIST AND CO-STAR USE OF HASHTAG TO EXPAND THE ARTIST’S SOCIAL MEDIA PRESENCE
  • 4.
    LAYOUT FRONT PAGE FROMMOBILE PERSPECTIVE SCROLLING FROM MOBILE PERSPECTIVE DROP- DOWN MENU FEATURES FROM THE COMPUTER VIEW ARE KEPT THE SAME
  • 5.
    COLOUR SCHEME • THECOLOUR SCHEME IS GREEN WITH VARIATIONS OF THE SHADE BEING PRESENT THROUGHOUT THE WEBSITE. THIS THEME ALONGSIDE THE BLACK AND WHITE AESTHETIC THAT IS PRESENTED FOR ASPECTS SUCH AS PICTURES AND TEXT IS PLEASING AS IT PREVENTS THE READER FROM BEING OVERPOWERED WITH COLOUR WHILST STILL PROVIDING A STYLISTIC EFFECT THAT IS PLEASING TO SEE. • COLOUR MANIPULATION LIKE THIS IS A REOCCURRING THEME WITH HAYLEY’S DESIGN METHOD AS SHOWN IN HER 2 EP’S: “CITRINE” AND “THIS SIDE OF PARADISE”. • THE USE OF BRIGHT SATURATED GREEN AS OPPOSED TO A MUTED GREEN IS SIGNIFICANT AS IT HIGHLIGHTS HOW THE SINGER WANTS ATTENTION DRAWN TO THE ISSUES THAT SHE IS ADDRESSING AS THEY ARE IMPORTANT, SHOWING HOW SHE IS NOT HIDING AWAY, SHE WANTS TO BE NOTICED.
  • 6.
    COLOUR SCHEME CITRINE THISSIDE OF PARADISE YELLOW AND GREEN COLOUR MANIPULATION COLOUR IS VERY BUSY AND VIBRANT WHICH COMPLIES WITH THE THEME FROM THE WEBSITE.
  • 7.
    NAVIGATION • NEWS, MUSICVIDEO, TOUR, BIO AND SUBSCRIBE ARE THE HEADINGS THAT ARE SHOWN UNDER THE ARTIST’S NAME CAPITALISED AT THE TOP OF THE PAGE. THIS GIVES THE READER EASY ACCESS TO THE INFORMATION NECESSARY FOR WHAT THEY WISH TO FIND OUT. • THE LINKS AVAILABLE TO CLICK HIGHLIGHT A DARKER SHADE OF GREEN. • AT THE BOTTOM ARE LINKS TO THE ARTIST’S SOCIAL MEDIA OUTLETS, WHICH ALLOWS THE READER TO STAY CONNECTED WITH THE ARTIST, AS WELL AS THE OPTION TO SUBSCRIBE TO THE WEBSITE, CREATING NOTIFICATIONS WHEN CHANGED OR UPDATES ARE MADE TO THE WEBSITE. • THESE LINKS APPEAR AS A MENU DROP DOWN ON MOBILE AND SMALL-SCREEN LAPTOPS, OR AS A LIST AT THE TOP FOR LAPTOP.
  • 8.
    NAVIGATION COMPUTER VIEW MOBILEVIEW DROP DOWN MENU TAKES YOU TO THE LINKS FOR THE ARTIST. SEGMENTS OF THE WEBSITE LAID OUT IN A LINE UNDERNEATH THE ARTIST’S NAME
  • 9.
    FONT • THE FONTFOR THE WEBSITE IS ALL CAPITALISED AND BOLDED. IT IS SANS-SERIF AND HAS SMALL LINE SPACING BUT BIGGER SPACING BETWEEN THE LETTERS OR BETWEEN THE WORDS THEMSELVES. BEING SANS SERIF IS IMPORTANT AS IT IS MORE MODERN AND SUITED TOWARDS A YOUNGER AUDIENCE, WHICH COMPLIES WITH HAYLEY’S TARGET AUDIENCE BEING PREDOMINANTLY YOUNG PEOPLE. • THE COLOUR IS EITHER BLACK OR WHITE, WITH THE EXCEPTION OF THE SINGER’S NAME BEING IN GREEN. • THE ARTIST HAS MANIPULATED FONT HIERARCHY. TYPICALLY, SERIF FONTS ARE FOR OFFICIAL DOCUMENTS AND ARCHAIC TEXTS, HOWEVER HERE THE FONT APPEARS MORE PERSONABLE, LESS PROFESSIONAL AND THEREFORE MORE CENTERED TOWARDS A YOUNGER AUDIENCE.
  • 10.
    FONT LIMITED LINE SPACING SINGER’SNAME IN GREEN FOR THE TITLE PAGE SANS-SERIF CAPITALISED BREAKS THE FLOW OF CONTINUATION. THIS DRAWS THE READER’S ATTENTION TO WHAT IS BEING MENTIONED, WHICH IS A CALL TO ACTION FOR THE SINGER’S TOUR DATES.
  • 11.
    IMAGES • MAIN IMAGEOF THE ARTIST WITH DIRECT ADDRESS TO THE CAMERA IN A MEDIUM CLOSE 2 SHOT WITH A CO-STAR IS SHOWN AT THE TOP OF THE PAGE. • THE WEBSITE SHOWCASES THE FANART THAT IS PRODUCED FOR HAYLEY WHICH IS SHOWN IN A WALL OF PICTURES.
  • 12.
    IMAGES MOBILE VIEW OFTHE MAIN IMAGE COMPUTER VIEW OF THE IMAGE WALL. MAIN IMAGE FAN ART WITH #KIYOKOFANART AT THE TOP
  • 13.
    MODE OF ADDRESS •THERE IS NOT MUCH TEXT ON THE FRONT PAGE OF THE WEBSITE, HOWEVER THE IMPERATIVES ADDRESS THE READER AND THE CALL-TO-ACTIONS ENCOURAGE THE AUDIENCE TO STAY CONNECTED TO THE ARTIST WITH WORDS SUCH AS “SUBSCRIBE + FOLLOW”, “GET THE LATEST…” AND “VIEW MORE…” • BECAUSE THE SINGER HAS A YOUNGER TARGET AUDIENCE, THE EMPHASIS ON SOCIAL MEDIA OUTLETS IS IMPORTANT AS A LOT OF YOUTHS USE SOCIAL MEDIA. THIS IS ALSO A GOOD WAY TO MARKET THE ARTIST, USING A POPULAR OUTLET, SUCH AS SOCIAL MEDIA, SO THAT PEOPLE CAN FOLLOW HER AND INCREASE HER BRAND POPULARITY.
  • 14.
    MODE OF ADDRESS Imperativecall to action Imperative call to action Links to social media outlets Imperative call to action
  • 15.
    CONCLUSION • THE LAYOUTFOR THE WEBSITE IS SUITED TOWARDS THE SINGER’S TARGET AUDIENCE, FOR EXAMPLE ENSURING THAT THERE ARE SOCIAL MEDIA LINKS FOR THE VIEWER TO CLICK ON. THIS WOULD BE A HELPFUL THING TO INCLUDE WITHIN MY WEBSITE DESIGN SEEING AS MY TARGET AUDIENCE IS ALSO PREDOMINANTLY A YOUNGER AUDIENCE. • THE LAYOUT OF THE WEBSITE IS CLEARLY LABELED INTO SECTIONS WITH THE ARTIST AS THE PROMINENT FEATURE OF THE PAGE. THIS WOULD BE GOOD FOR MY WEBSITE DESIGN HOWEVER IT WILL NEED TO BE ADAPTED AS THE VIDEO IS NOT FOCUSED ON THE BAND, BUT ON THE MUSIC VIDEO’S CONCEPT. THEREFORE THE FOCUS WILL BE ON THE BAND LOGO AND ELEMENTS OF THE VIDEO. HOWEVER, I WILL INCLUDE THE FEATURE OF HAVING DROP DOWN MENUS FOR THE DIFFERENT SECTIONS OF THE WEBSITE. • THE SINGER’S WEBSITE HAS A GREEN, BLACK AND WHITE COLOUR SCHEME WHICH DOESN’T FIT WITH THE THEMES WITHIN HER MUSIC VIDEOS WHICH TEND TO BE EITHER BRIGHT AND WARM COLOURS OR CONTAINS PINK HUES. SEEING AS THE WEBSITE WILL BE FOR THE USE OF PROMOTING THE SONG, I THINK IT WOULD BE BETTER TO HAVE A COLOUR SCHEME THAT FITS WITH THE MUSIC VIDEO, BEING PASTEL GRUNGE.