Collection: Ten Foot Tiger Website Design
https://schmoner.github.io/Ten-Foot-Tiger/
Design Challenge: The band has a reasonably strong web presence on social media platforms, but they didn't have their own personal website. The website’s purpose would be to demonstrate their professionalism, while providing a centralized location for their music content, event information, band information and links for listeners to purchase their music or watch videos. Ideally this site would also be used to sell merchandise and possibly event tickets in the future.
Design Process: In order to create this website, I began with creating wireframe sketches to place the basic components and choose a basic layout for the site. This included the various components required for the class assignment, along with features that are useful for advertising TFT. Designing digital mockups was the next step to decide on color, images and text ideas for the site. Using the w3-schools template, I started with a basic HTML layout that I edited to customize the layout and features. I also used and adjusted the w3-schools CSS coding for stylization. Once the overall set up was completed, I included Javascript for various functions link the photo carousel, the accordion text and the sortable table.
Design Solution: I created a user interface for the band website that describes the band and its members in a fun and stylish manner. Information about TFT’s music, where to find them elsewhere online and how to hear or purchase their music was all included on the page. Their upcoming and past events are also listed for fans and others who may not know of Ten Foot Tiger, but would like to know more.
Software: I started this project with using Photoshop to create the wireframe and mockup, then used Visual Studio Code for the coding process and GitHub to host the site online.
Home Page
About Section
Event Section
Music Section
Photo Section
Video Section
Merch Section
Mobile Mock Up
Website Mock Up Layout
Website Mobile Mock Up Layout
Website Wireframe Layout
Website Mobile Wireframe Layout