ABOUT THE PROJECT
Porter Influences
The Porter Robinson Influences website was an extensive 10-week project to create an informative website around the music artist Porter Robinson. The first five weeks of the project was dedicated to user research and web design, researching and understanding the subject matter, user, visual designs, and messaging. The remaining five weeks centered around the website development in HTML/CSS to create a finished, fully functional website at: porterinfluences.com
The Porter Robinson Influences website was an extensive 10-week project to create an informative website around the music artist Porter Robinson. The first five weeks of the project was dedicated to user research and web design, researching and understanding the subject matter, user, visual designs, and messaging. The remaining five weeks centered around the website development in HTML/CSS to create a finished, fully functional website at: porterinfluences.com
ROLE
Website Design
DATE
2023
Research
The project began by researching the user and target audience. Creating a persona and empathy map helped to answer lots of questions about the target audience. Market research was also conducted and came out to these insights:
Create a baseline understanding for those unfamiliar with Porter Robinson, while providing an engaging experience for seasoned listeners.
Many informational websites are bogged down by too much unnecessary info or jargon that inhibits the ability to enjoy the experience.
Cater towards art styles that the target audience (EDM listeners) would care for and enjoy.
The project began by researching the user and target audience. Creating a persona and empathy map helped to answer lots of questions about the target audience. Market research was also conducted and came out to these insights:
Create a baseline understanding for those unfamiliar with Porter Robinson, while providing an engaging experience for seasoned listeners.
Many informational websites are bogged down by too much unnecessary info or jargon that inhibits the ability to enjoy the experience.
Cater towards art styles that the target audience (EDM listeners) would care for and enjoy.
The project began by researching the user and target audience. Creating a persona and empathy map helped to answer lots of questions about the target audience. Market research was also conducted and came out to these insights:
Create a baseline understanding for those unfamiliar with Porter Robinson, while providing an engaging experience for seasoned listeners.
Many informational websites are bogged down by too much unnecessary info or jargon that inhibits the ability to enjoy the experience.
Cater towards art styles that the target audience (EDM listeners) would care for and enjoy.
The project began by researching the user and target audience. Creating a persona and empathy map helped to answer lots of questions about the target audience. Market research was also conducted and came out to these insights:
Create a baseline understanding for those unfamiliar with Porter Robinson, while providing an engaging experience for seasoned listeners.
Many informational websites are bogged down by too much unnecessary info or jargon that inhibits the ability to enjoy the experience.
Cater towards art styles that the target audience (EDM listeners) would care for and enjoy.
Wireframes
The low fidelity and mid fidelity wireframes went through quite a few iterations after getting feedback and testing them out. Working on both design, content hierarchy, and navigation and user experience, the designs developed until they met the standard for organization in Large, Medium, and Small viewports.
The low fidelity and mid fidelity wireframes went through quite a few iterations after getting feedback and testing them out. Working on both design, content hierarchy, and navigation and user experience, the designs developed until they met the standard for organization in Large, Medium, and Small viewports.
The low fidelity and mid fidelity wireframes went through quite a few iterations after getting feedback and testing them out. Working on both design, content hierarchy, and navigation and user experience, the designs developed until they met the standard for organization in Large, Medium, and Small viewports.
The low fidelity and mid fidelity wireframes went through quite a few iterations after getting feedback and testing them out. Working on both design, content hierarchy, and navigation and user experience, the designs developed until they met the standard for organization in Large, Medium, and Small viewports.
High Fidelity
The high fidelity designs came about after testing the low and mid fidelity wireframes. The aesthetic takes root in EDM culture as well as Porter Robinson's aesthetic at the time of the website's making. During that era, the artist utilized black with grassy warm greens and a serif font. The style is greatly attributed to Porter Robinson himself, giving fans a familiar experience that is linked to the artist. The site also has many small microinteractions that occur when clicking on text or browsing.
These designs became the basis for the live website that I then created utilizing HTML and CSS over the final few weeks of the project.
Check it out at: porterinfluences.com.
The high fidelity designs came about after testing the low and mid fidelity wireframes. The aesthetic takes root in EDM culture as well as Porter Robinson's aesthetic at the time of the website's making. During that era, the artist utilized black with grassy warm greens and a serif font. The style is greatly attributed to Porter Robinson himself, giving fans a familiar experience that is linked to the artist. The site also has many small microinteractions that occur when clicking on text or browsing.
These designs became the basis for the live website that I then created utilizing HTML and CSS over the final few weeks of the project.
Check it out at: porterinfluences.com.
The high fidelity designs came about after testing the low and mid fidelity wireframes. The aesthetic takes root in EDM culture as well as Porter Robinson's aesthetic at the time of the website's making. During that era, the artist utilized black with grassy warm greens and a serif font. The style is greatly attributed to Porter Robinson himself, giving fans a familiar experience that is linked to the artist. The site also has many small microinteractions that occur when clicking on text or browsing.
These designs became the basis for the live website that I then created utilizing HTML and CSS over the final few weeks of the project.
Check it out at: porterinfluences.com.
The high fidelity designs came about after testing the low and mid fidelity wireframes. The aesthetic takes root in EDM culture as well as Porter Robinson's aesthetic at the time of the website's making. During that era, the artist utilized black with grassy warm greens and a serif font. The style is greatly attributed to Porter Robinson himself, giving fans a familiar experience that is linked to the artist. The site also has many small microinteractions that occur when clicking on text or browsing.
These designs became the basis for the live website that I then created utilizing HTML and CSS over the final few weeks of the project.
Check it out at: porterinfluences.com.
