Digital Practice – Some More Groundwork

Let’s continue where I left off two days ago!

About

As I mentioned in the last post, this page should ideally contain the following things:

  • A short bio of Aviators: both personal info and what kind of music he makes.
  • Contact information
  • Information about his composition work, and how to get in contact with him for such.
  • A link to the folder containing the freely available vocal stems and other resources. And an explanation of what said link is.
  • All of the stuff Aviators uses to make music: software, hardware, instruments, whatever.
  • Other FAQ if I find anything.

Now let’s do the same thing as last time and look at some existing band sites! Here’s the results:

  • Uhhhh… I guess Klayton’s site has a relevant section that’s kinda nice. All of the pages under the “About” tab have interesting information and have images or videos to spice things up.
  • On every other site I looked at (there were at least thirty of them) the “About” section was either just a text dump, or didn’t even exist. So there are apparently a lot of band sites that don’t have anything to say about the band itself to newcomers. Huh.

Well, with that in mind, my conclusive to-do list is as follows:

  • Step one: Actually make an “About” page
  • Step two: Put some kind of media in there to make it interesting. Be it pictures, videos, or song clips, whatever.
  • Step three: Make it match the aesthetic of the Discography page.

about

 

 

That’s my first attempt. I’m not going to do the rest of them right now, since they should all look roughly the same.

Quick note about this example above: the background is of course subject to change.

Also the back arrow points to the right because these pages are going to be positioned to the left of the home page. It’s going to make sense in motion.

Here’s a mobile version, which is going to be scrollable.

about_mobile

Media

This page is for gathering videos and images. For the videos I’d only list the ones that are more than songs uploaded with a static image. If it’s an animated lyrics video, or a compilation of things otherwise unavailable, then I’ll put it here. As for the images, there should be a category for real life pics, and a separate one for music related imagery, like album covers or song illustrations.

RESERACH:

  • Green Day: Very clear navigation, and good category filters. The images tab however is not so great, as it’s just a bunch of random images without any context.
  • Muse does a better job on the images front by organizing them by year and event. Sadly the site is still very tedious to navigate.
  • Avenged Sevenfold doesn’t have too many images, but it’s all organized in a nice and clean way. And since there are few of them, they don’t have to categorize them other than by year.
  • I like the large clean images on Klayton’s video page. That said, while I think the categories listed are nice, the image tabs are all empty. It might be a server error, I dunno.
  • The Gorillaz site is actually relevant here. A fairly similar layout could actually be useful for the videos.
  • The Black Queen has a fairly nice video page, and it’s very easy to understand.
  • I love that the videos are categorized by album on Korn’s site but at first I thought that the highlighted part was the video selected, when actually it’s the album picker drop down menu.
  • I’ll post Pendulum again, but it’s a bit redundant since Gorillaz does the same thing except better in terms of video.

Point is, this area needs to be clean and easy to use, and users should be able to quickly filter (at least somewhat) images or videos.

Here’s the design for the pictures:

pictures

The left bar contains the different years. The currently selected one is the largest. The page itself is divided into two scrollable sections, one for photos, the other for artwork used for albums, songs, or videos. The arrow on top takes the user back to the home page, while the movie icon switches to the videos tab with a simple slide to the left.

videos

The videos page shares the year slider with the images tab. So if the user clicks on the button that switches between the two, they should land on the other side with the same year selected.

Here’s both on mobile.

pictures_mobile

On the images one, the “Photos” and “Artwork” texts are actually buttons with which the user can switch between the two.

videos_mobile

And on the videos page there shouldn’t be any embedded stuff, but instead tapping these images will take the user to YouTube.

Home page

So you’ve probably noticed those pink-purple lines running along each page. The idea is, that navigating the site will take the user along those lines, with the camera sliding left, right, or down, depending on which page they want to go to. There may be some animations involved too, I might work some in later.

home

That’s the basic idea behind the front page. It’s based on the cover of the latest album, Stargazers, but I removed the blurry, or noisy bits for now. Things I’m considering:

  • The logo and the lines moving around slightly based on the mouse position like on this site.
  • Or the mouse position could control the background (which is just black right now) and make it blurrier or crisper, or even change the background image completely.
  • Add some interference or wave effects similar to those found on this site.
  • Change the font. To be honest all pages will need a font overhaul, but I’d like to do that when I’m building the page. Right now the point is: sans-serif.

Here’s the first draft of the mobile version:

home_mobile

And here’s the “wireframe” of the site as of now:

the-plan

Things I need to add:

  • The rest of the sections to the “ABOUT” page
  • An extra subpage with the menu for the discography. Or I could just add something to the top of the already existing album page. I’ll have to try later.
  • Background for the home page

Alright, that’s it. I’m gonna try and get a pdf ready to show for tomorrow. And some moodboards. And reference sites. And…

Leave a Reply

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