Skip to main content
Continuing Online Operations
Loyola is continuing online operations while we prepare for reopening safely in the fall. Coronavirus resources

MUIN M110: Intro to Music Industry Studies

Website Assignment

In this module, you will learn what a website is, what a content management system is, what you need to know to choose the best content management system for you, and some basic design best practices. At the end, you will complete an individual assignment in which you create a wireframe of your ideal personal website's homepage. This module will help you plan for your artist's website in your group projects.

What Is A Website?

This may seem really basic, but do you know what a website is? It's a collection of web pages (documents made up of code), images, videos, and other digital assets that are hosted on web servers and accessible from the internet. Websites are usually accessible via HTTP (Hypertext Transfer Protocol), a protocol for getting data off of a web server and onto your internet browser. The following video gives a quick and dirty summary.

Why Do I Need a Website?

Dave Cool from Bandzoogle lists out why you need a website in this article. In other words...

  1. Zero Commission Sales
  2. Analytics
  3. Integration

Why Do I Still Need A Website? Zero Commission Sales, Analytics, Integration

How Can I Make A Website?

So how can you make a website without learning HTML, Javascript, CSS, and other coding languages? Your best bet is to use a Content Management System, also known as a CMS. CMSs include a user interface that allow you to add content, edit, and customize your website without having to know the code behind what you're doing. With CMSs, you can either install one on your own web server, or use one that is hosted on someone else's web server (recommended for this class). There are pros and cons to both. One example of a CMS is Wordpress, which provides both hosted and non-hosted versions. This infographic breaks down the difference.

Unless you have previous web experience, it is highly recommended that you choose a hosted CMS for this class.

There are many CMS options, many of them free. Wikipedia has a massive and overwhelming list. While my personal recommendation is to use Wordpress.com, you are free to use whatever method or CMS you would like to create your semester project artist's website.

One of the most important features you should look for in your CMS is responsive design, so keep an eye out for that.

Use the tabs at the top of this box to learn more about some of the different CMS options.

Bandzoogle website

Tutorial

Pros:

  • Custom domain included in price
  • High level of customer support
  • Mailing list
  • Commission-free music store 
  • Made for musicians, by musicians
  • All themes use responsive design

Cons

  • No free version; cheapest plan is $12.46/month for an annual contract

Squarespace website

Tutorial

Pros

  • Custom domain included in price
  • Ability to sell products directly from the site 
  • Lots of design and customization options
  • Ability to export your site to Wordpress should you choose to leave
  • All themes use responsive design

Cons

  • No free version; cheapest plan is $12/month for an annual contract
  • Commission taken for products sold from site 

Weebly website

Tutorial

Pros

  • Free up to 500MB
  • Option to purchase custom domain
  • Easy "drag and drop" design
  • All themes use responsive design

Cons

  • Have to pay for custom domain
  • Their advertising and branding will appear on your site  (unless you upgrade to a paid version)
  • Little customization available

Wix website

Tutorial

Pros

  • Free up to 500MB
  • Option to purchase custom domain
  • Lots of design templates
  • Ability to add animation
  • Easy to use

Cons

  • Their advertising and branding will appear on your site (unless you upgrade to a paid version)
  • Templates are very limited in how much you can customize; many sites wind up looking the same
  • Not fully responsive

CASH Music website

Tutorial

Pros

  • Free! Hosted or self-install
  • Open source
  • You own your data

Cons

  • Hosted may not still be in development
  • No option for custom domain on hosted?

Wordpress.com website*

Tutorial

Pros

  • Free up to 3GB space
  • Option to purchase custom domain
  • Hundreds of free themes and option to purchase more
  • Editor is user-friendly
  • Some responsive themes; under "Layout," select "Responsive"
  • Based on Wordpress.org open source
  • You own (most of) your data

Cons

  • Interface changes frequently
  • Slight learning curve
  • Their advertising and branding will appear on your site  (unless you upgrade to a paid version)

*Wordpress.org is a separate product that requires a hosting solution

Web Design Best Practices

By using a CMS, you eliminate some of the pitfalls associated with web design since you'll be working with pre-existing templates designed by professionals. Still, there are tips you'll want to consider as you customize your site.

  • Edit your photos before you upload them
  • Less is more--don't be afraid to leave lots of empty space on your site
  • Make sure your site is easy to read--fonts should be big enough, colors should stand out
  • Make sure links work, both to additional pages on your site and to outside content
  • Have a menu appear on every page of your site so users can easily navigate back to where they were
  • Be consistent with your design choices 
  • Make your site accessible to users who are visually or hearing impaired with some simple tweaks

Finding and Using Media

You should only use media you own or media that is copyright-free on your website. This guide will help you find public domain and creative commons media.

Things To Include In Your Site

Homepage/Landing Page

This is the most important part of your site, and the part you will want to focus on the most. Your landing page should have links and embeds to your social media, including calls to action (such as links to follow, like, etc); signup for your mailing list (Mailchimp or otherwise); info about incentives; and a video embed of an album trailer or promotional video. Try and get all of your info above the fold so your user doesn't have to scroll down to see everything. You can also use Linktree or the Pivot feature on SmartURL to create a landing page just for purchasing your music, and link to this on your website landing page.

Other Sections

About/Bio:

Photos:

EPK (Electronic Press Kit):

Even more stuff:

  • Calendar/gigs, videos, music embeds, contact

Wireframe Assignment

This is an individual assignment. Create a wireframe, or rough sketch, of your ideal personal website's homepage. Your wireframe should show...

  • What and where content will be on your homepage
  • What and where links you'll have on your homepage 
  • What other pages you plan on having on your site (aka your menu)

You can use Powerpoint, Google Slides, Keynote, or wireframe.cc (note that the free version of wireframe.cc does not let you save your work!). 

Resources:

Submit your wireframe as an attachment or link* in Canvas.

*If you are using Google Slides, make sure you have enabled sharing