For the midterm, I was tasked with creating a website for an artist that I like so I decided to go with Stray Kids.
Here are the wireframes of this site with annotations and without annotations. As inspiration or a precedent, I looked at the design of BTS’s website, Ed Sheeran’s website, and Maroon 5’s website to inform my design. I chose BTS as they are one of the biggest Korean pop star acts right now so looking at what their website looks like and how the pages “flow” helped me in designing Stray Kids’ website. Additionally, I looked at Stray Kids current website too to see what I could keep in the design and what to improve upon. I want to keep the website very simple because a majority of the artists’ content is delivered through social media rather than websites so I just decided to focus on creating pages that I felt were missing and needed to be added. For example, I added a “Tour” page because Stray Kids currently have a world tour going on but on their current website, that’s not explicitly being called out so I addd a navigation page for that. I also added a section called “News” where news mentioning Stray Kids can be posted as the current website does not have that very clear as well. I modeled the look and structure of the website off of Ed Sheeran, BTS, and Maroon 5’s. For example, I saw that their “Tour” pages looked relatively similar so I made the Stray Kids Tour page look as close as I could get it to look like theirs in terms of structure. Overall, there are a few parts where I was a bit confused with how to use the different html and css functions but I think being able to apply it on a big project like this has helped me understand how these sites are built.
Please note that at the time I uploaded the wireframes, I didn’t add background colors to the wireframes yet as I had been deciding between a few color ideas to do (that would still allow the Stray Kids logo to be seen). However, I decided to go for a pale yellow (#FAFE90) but I can’t edit the wireframes as I do not have Illustrator at home.
Additionally, I tried to use the CodePen function (Projects) that lets me blend all of the HTML and CSS together so that it can function as a cohesive site but when I tried to input any kind of data in, it kept saying that my CodePen could not be saved and that I would need to contact their help service. To be safe, I have just added the different pages as separate CodePen links below.
https://www.edsheeran.com/dividetour2019?ref=https://www.google.com/
CodePen Link for Stray Kids Homepage: https://codepen.io/elin7/pen/oVBmgE
CodePen Link for Stray Kids About Page: https://codepen.io/elin7/pen/GerLPB
CodePen Link for Stray Kids Albums Page: https://codepen.io/elin7/pen/gEzeRP
CodePen Link for Stray Kids Tour Page: https://codepen.io/elin7/pen/EMLqdV
CodePen Link for Stray Kids News Page: https://codepen.io/elin7/pen/VRdvaR
CodePen Link for Style Guide: https://codepen.io/elin7/pen/MxXedX
Exploring New Media and Design - Spring 2019 