VICO 2162 / 5162 Assignment

Music Artist Webpage

Let's build a scrolling webpage for your favorite musical artist or band. Your webpage content can be inspired by Spotify, Amazon Music, YouTube or iTunes band pages. Design your webpage to be built with the new scrolling template.

Download the new single-page website template

Some must-have content

  • Overview: Releases, Top songs, Singles
  • Related artists: At least 5
  • About: Bio, photos (at least 5)
  • Photographs: Found images, but try to give credits

Some media, design, content ideas

  • Band bio
  • Band Photos
  • CDs/Release Images
  • Photo carousel
  • Photo bkgds
  • Videos (YouTube)
  • Photo layout/montage (Photoshop)
  • Photo credits, captions
  • Font choices/subheds/sections
  • Color choices
  • Audio clips

Assignment: Build a scrolling webpage for your favorite musical artist or band using one or more real music websites for inspiration

  1. Choose an artist or band and gather images and content to build your webpage.
  2. Use the NEW scrolling web page template to build out your website.
  3. Sketch out thumbnails/rough wireframes (including the media content placement) -- save at least three sketches in your project 'sketches' folder.
  4. Edit down your photos to use at least five images on your page.
  5. RESIZE each selected image to 2000px MAX width. Save the selected/resized photos to your 'images' folder.
  6. Do a rough first version of your layout -- one section at a time -- using Bootstrap's "container > row > cols" layout grid.
  7. Save it, test it, and then... Start over on a new 'blank' canvas!

Grading

I will be looking for:

  • Good coding -- you started with a blank canvas, your page is responsive, has proper indenting of HTML code, use of annotations and spacing, use of Bootstrap's "container > row > cols" for your layout grid, and organized project folders.
  • Good content -- a clear theme, a compelling narrative about your band, good use of images.
  • Good design -- customization, use of color, fonts and typography.
  • If I don't see Bootstrap's "container > row > cols" layout with annotations, you will get an F.
  • If I don't see at least three versions of your project html files, you will get an F.
  • If I don't see a neatly organized project folder with 'css', 'images', 'and 'sketches' folders, you will get an F.