Digital Practice – Laying the foundations

After thinking about what to do, I decided to just go with Aviators as my “band”. Not for any particular reason; it was a pretty arbitrary choice, but I needed to focus my efforts. So with that in mind, I’m gonna go ahead and build a wireframe of the stuff I need. Let’s get right into it.

Remember how I wrote last time that the Aviators website didn’t exist anymore? Well, turns out I was wrong, it DOES, but if you just type www.soundoftheaviators.com it redirects you to the Bandcamp store page. But if you type, say, http://www.soundoftheaviators.com/about/ instead, then suddenly you are on the old site. Which is really out of date, but at least it exists.

screenshot-2016-11-15-17-14-47

After spending some time on the site, here’s how the content is structured:

  • The top navigation bar and the header appear on every page. So do the “Links” and “Contribution” sections to the right, and the music player on the bottom of the browser window. There’s also a section below all of this, that’s not visible on the picture, but it contains a short bio of the artist, and some social media feeds, like Twitter, Flickr (like I said, this is outdated), and “Videos”, which displays exactly one video. In a tiny embedded YouTube player. And the background, which doesn’t even scroll, but instead is just a fixed image.
  • The “Home” page was originally where very infrequent news posts appeared, but it didn’t function very well neither as a home page nor as a newsfeed.
  • The “Composition” tab leads to a small section about where to contact Aviators for film/game scoring purposes. It also has a demo reel embedded from Soundcloud.
  • “Discography” is self-explanatory for the most part. I really like how you can listen to a song from each album and easily go and buy the albums by a simple button click.
  • “Resources” contains information that gets asked regularly. Or at least some of it. It’s basically a place that has a link to some free vocal stems or instrumentals, and also has a detailed list of all the software and hardware Aviators uses to make his music.
  • “About me” is what you’d expect.
  • “Contact” leads to a contact form. I don’t know, do these things even work? Isn’t it easier to just send an email, a Facebook message, or a tweet, all of which one can access from the site?
  • “Music Store” is the aforementioned Bandcamp page. It’s a great platform for buying music, so no complaints here.
  • “Custom Avi Tees” just leads to a T-shirt store. It’s nice that it exists, but I’m not sure it warrants a huge menu button in itself.

That’s about it. Now let’s try to simplify that a bit. Or at least group some of it together, so we have a few longer and content-rich pages instead of lots of small ones with little to no information.

  • First off, I would ditch the contact form. It’s not needed, and a simple bar on the bottom with all the information is much handier. So at the bottom of each page there should be a section that has the e-mail address, and a bunch of social media links.
  • The news section isn’t needed either. If someone wants to get the latest updates, they should just follow the artist on Twitter or Facebook.
  • The “Contributions” section hasn’t been used in like four years, so I don’t feel like it needs to exist.
  • The “Music Store” and “Custom Avi Tees” links can be grouped together with links to iTunes, Google Play Music, Spotify, and wherever else one can support Aviators.
  • I think adding a media page where one can browse images and videos might be a good idea, since the official YouTube channel is a bit cluttered, and images just kinda float around all over the place.
  • “Resources”, “About me”, and “Composition” can all be merged into a single “About” page.
  • In fact, the whole site should just have three subpages: from a central home page, the user should be able to easily get to the “About”, the “Discography”, or the “Media” pages. Since the store is handled on third-party sites anyway, there’s no reason to dedicate much space to them, other than providing convenient links.

wireframe


Alright, that’s done. Roughly. Now I need to look at some sites to find some reference material for each part of my webpage. Let’s start with…

DISCOGRAPHY

Ideally this page should be divided into four subcategories, otherwise it will turn out a complete mess, since Aviators has an insane number of releases. Each page should then list the albums/singles in chronological order, from newest to oldest. The best thing would be to implement some basic music player with each release, so viewers can quickly listen to a song before going off site to buy/stream the whole thing. It would be an added extra if some lyrics could be added somewhere, even if just as a popup menu of some kind.

After going through a bunch of discography sections, here’s the stuff I noted:

  • Green Day
    • Nice and clean looks, shows the relevant information (album art, title, and release date), and clearly links to places where one can buy or stream the album. The problem is that the site needs to reload after clicking another album, which makes using it a bit sluggish.
  • Muse
    • I like the separate lyrics tab. Otherwise this site is just slow and inconvenient to use, with way too many subpages. The page I linked is filed under “Music/Video” > “Albums” > “Drones” and there is no flow to the navigation whatsoever.
  • Blue Stahli
    • Nice, clean style, and the inclusion of music streaming is really good, but sadly the default Bandcamp player doesn’t fit the rest of the site.
  • Poets Of The Fall
    • Once again, I like how clean the site looks in terms of text. It just needs a bit more functionality, like track streaming, because right now it’s basically just a bunch of text and a few links on the side. On the other hand the lyrics that pop up for each album are really nice.
  • Gorillaz
    • While not strictly related, I feel like that chronological sidebar on the right side with the little video images (which pops up when you click the three lines on the top right corner) could be used on a discography site too for easy navigation.
  • The Black Queen
    • That album themed background is REALLY great and gives the site that extra oomph it needs to work.
  • Korn
    • This site has some very easy and clear navigation, which is great!
  • Pendulum
    • THIS. I love the themed background videos, and the navigation bar on the left side. And also how the text slightly moves based on the position of the cursor.

So what I think I’d do, is make a slightly animated background based on the cover artwork for each album, (at least for the LPs; some of the EPs and singles would probably work bettered grouped together) have a selected song play on their respective page, and make the text and cover art follow the mouse movement slightly, like on that Pendulum site. The sidebar could be a combination of Gorillaz and Pendulum, and the displayed text should be about as clear as the Poets Of The Fall site.

Here’s a (probably overly ambitious) initial static design for From All Sides and Mirrors (in 1903*975, as that seems to be the used area in Chrome, at least on my computer):

from_all_sides mirrors

Some notes:

  • If the mouse cursor hovers over an album in the timeline, the image should get a bit larger and the title has to be displayed above it in small text.
  • I don’t know yet if selecting a different song will be an option or not. If it’s possible to stream off-site audio in a custom player that looks sort of like the one on the picture, then absolutely. However, if I have to upload songs to the sitecache, then I’ll leave that feature out and just have a preset preview song for each album.
  • Clicking the two arrows on the sides of the screen moves between albums linearly. The arrow button in the top left corner will take the user back to the main discography page. To avoid confusion, I’ll use that arrow all across the site, so by the time viewers reach these pages they won’t get confused by the other two arrows.
  • The pink colors is because I’m basing the color scheme off the latest album, Stargazers, which has a New Wave sort of aesthetic going for it. (Alright, the latest album is A Song That Never Ends, but it’s not out for a few more weeks, and I don’t like its cover art)
  • The buttons under the cover art lead to external sites, namely: Spotify, Bandcamp, Google Play, iTunes. If an album doesn’t have one or more of those options available then those buttons will be greyed out.
  • Clicking the album art should make it larger. Just because some of these covers look really nice.
  • On desktop, clicking the lyrics button should open a scrollable popup over the album art. On mobile it should just open it above the whole page, since the album cover is much smaller.

Actually, here’s how it should work:

mirrors_lyrics

Speaking of mobile, I made a mock-up of how this stuff would transition to the small screen. At least in portrait mode, I think in landscape the desktop version will work just fine.

from_all_sides_mobile

I removed the side arrows, since on mobile it’s easier to just swipe the page left or right, than to click on stuff. But the back arrow should definitely be kept, since that’s the quick way back to the main discography page.


Alright, that’s all I have energy for today. Or yesterday, since it’s about 2 AM. Anyways, I’ll continue tomorrow with the other three pages. Hopefully those will be a bit easier since they are either smaller, or a bit more text heavy, and contain less imagery.

 

Leave a Reply

Your email address will not be published. Required fields are marked *