Librarian
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?
Bandzoogle lists out why you need a website in this article. In other words...
- 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.
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
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
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
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
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?
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 all users 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.
- How to sell more music with landing pages
- Example sites: Bruno Mars, Taylor Swift, Devotchka, Moses Sumney, Tank and the Bangas, Zola Jesus
Other Sections
About/Bio:
Photos:
- Please read before your next band photo shoot
- How to create a stunning photos section on your band website
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. An example of a wireframe appears below:
I4F wireframe: directory profile (v1) by Rob Enslin is licensed under CC BY 2.0.
Your wireframe should show...
- What and where content will be 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:
- How I Learned to Create a Wireframe: 6 Easy Steps to Follow
- How to Create A Clickable Website Demo on PowerPoint
- Making a Website Wireframe in Keynote
- Website Design in Google Slides
- wireframe.cc Documentation
*If you are using Google Slides, make sure you have enabled sharing
Submit your wireframe as an attachment or link using this Google form. You must be logged into your Loyola Gmail to access the form.