Ten Foot Tiger Website Design

www.tenfoottiger.com

Home Page

About Section

Event Section

Music Section

Photo Section

Video Section

Merch Section

Mobile Mockup

Website Mockup Layout

Website Mobile Mockup Layout

Website Wireframe Layout

Website Mobile Wireframe Layout

Design Challenge: The band has a strong web presence on social media platforms, but they didn't have their own personal website. The website’s purpose is 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: This website began with wireframe sketches to place the basic components and set up a 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.