Stacks Image 593

BUILDING THE
NEW ENVINITY WEBSITE

June 1st, 2016 | by Niko Van Steenhoven

And… welcome back.

Last time I talked about the new single and video we released, followed by a story about how the song came about, and why it took so long to get finished. If you haven’t checked them out yet, please do, we actually put a lot of work into them (not that that really matters).

“So what’s all this about then?” you might ask.

Well, the other thing you may have noticed is that in launching a new song and video, *awkwardly points to song and video, and holds out hand like a bellhop waiting for a tip*, we’ve also begun redesigning the Envinity website.

Let me lay down some cool vibes, daddy-o, and get you hip to the new plans and goals of this new website. *begins angrily snapping rapidly, while wearing stereotypical beret and dark sunglasses*

A word of warning… this is the longest article so far. You might want to get some coffee first.

THE PREVIOUS WEBSITE



Allow me, if I may, to give you a little bit of backstory on this whole, “website dealy-bob”.

Up until now, our website has been a placeholder website. Meaning I put up something, just to have something. In reality it wasn’t a website, it was just an image and a few links to download our music. I kept telling myself I’d only have it up for a while until I worked on a brand new, real website. But designing and building a brand new website is really daunting, tedious work, and not surprisingly, I kept putting off the task.

Every year I’d think about updating it, and every year I found an excuse not to.

So, what was supposed to be up for less than a year, ended up being there for about 4 years. Isn’t that always the way things go? (Yes. They ALWAYS go this way). And the longer I ignored the task of building a new website, the more guilty I felt. The more it was on my mind. The more I felt an urgency to make it more professional, and put a better face on for the world.

Well, it wasn’t until we recorded the cover song, and made a video for it, that I realized that if I was going to do this right, we needed to have a new website too. So, with a semi-reluctant sigh, I looked at my notebook featuring the already-overwhelming lists of the things I needed to do, and with my pen, scrawled “god damn website”.



BACK TO BASICS



But first, what’s the point of having a website?

It’s a really basic question that is often overlooked. The answer is usually, “because you need to have one,” or “because most bands have them”. Neither of those are actually answers. It’s simply a game of Lemmings (I love that game!). The first guy did that, so therefore I must do that too. (Hey, there’s a countdown above my head, I wonder what that could mean…).

In order for me to do anything these days, I have this silly need to dissect it as much as I can, to determine what the point of that thing is, if it’s necessary, and if it fits within my beliefs and viewpoints (I have a lot of those).

In this case, why have a website at all? Is it useful in this day and age? After all, people often just have a page on Facebook and call it a day (though it’s still called ‘a page’).

Well, back in my day (which will show my age), there was a popular music site called MP3.com, which I actually miss. Bands would make pages on that site, and upload their music, plus there were some cool features at the time where fans could build their own “radio station” from songs on the site, and people could subscribe to those stations. The sad thing was that many bands at that time ONLY had an MP3.com site, and unfortunately for them, when the site was bought out by another company, all their content was deleted, and then any business cards, flyers or other material with their MP3.com address printed on it were instantly rendered useless.

(I should talk. All of our physical albums still point to a really old website address).

So if anything, it’s good to have a place you can direct people that is in your control. And one that isn’t in danger of becoming the next MP3.com, or Myspace (or anything else beginning with ‘M’).

With that in mind, considering how many different social sites and 3rd party sites that bands are on these days, it’s helpful to have a central hub, where people can come to learn about everything, hear everything, and see everything, without having to go to a bunch of different websites.

Okay, now I felt I was starting to see the basics of why I should still have a website in 2016, and what basic role it would play.

But then I had another question: “So what should a website do?”

(I have to say that “should” is a suspect word. There is no “should” (only Zuul)).

I actually had to think about this long and hard (and deep, and slow). It was kind of a strange question because it seems super obvious at first. So obvious, that I kinda felt stupid for asking it. But since I’m the kind of person that doesn’t want to take things for granted, I went ahead, feeling stupid, and tried to analyze that obvious question anyway. And after some time, came up with an answer.

For me, it came down to one basic concept:

Communication.

Specifically, the website communicates who we are, and what we do. (wait, that’s two concepts… but who’s counting?)

Okay then, with that solved for now, I could move on to actually designing how the website would look and function, knowing that the main purpose, in my mind, was for it to be the central hub that communicates who we are, and what we do, in a place that we can control.

Cool. Good. And perhaps unnecessary. Moving on…



GOALS FOR DESIGNING A NEW WEBSITE



Over the last few years, I had been playing with potential new designs for the Envinity website. Some were just sketched out on a legal pad, others cobbled together in photoshop (well, Pixelmator now), and some even mocked up in web design apps.

The designs were all over the place, and every time I tried a new approach to design, or interface, I was left unhappy. This is yet another reason why there has been no website update until now. I was never happy with anything. (Say, I recall saying something about this in a previous blog).

In fact, I’m looking through some of my old designs right now, in preparation for writing this article, and I’m thoroughly disappointed in myself. Some of the layout ideas were really cluttered, and the aesthetic choices were dated and questionable. For instance, I used to really enjoy designing skeuomorphic style imagery, with real-looking textures, and silly things like the page “curling up” to reveal a video or something. I even built an entire stereo system in Photoshop with the goal of using that to show the songs and album titles. Neat…but cheesy.

The big problem for me, was that I hadn’t fully planned out what my goals were for a new website. What did it need to have, and why? How would it look, and why? What should it NOT have? (yes… and why). And what about visuals? I liked a lot of visual styles, but what made the most sense here? What fit with my core goals, our identity, and what I’d just figured out about “what my website should do”?

So, I started with what wasn’t working.

I knew one of the main things that wasn’t working was the inability to stream our music on the website. Given the fact that as of this writing it’s 2016, I’d say that’s kind of important.

Having mp3 downloads of our albums is all well and good, in 2008, but times have changed (maybe you’ve noticed), and a large zip file containing mp3’s is not so great if you want to quickly sample the songs and see what a band sounds like. I mean really, who wants to spend the time to download three large zip files of music from a band, if you don’t even know you like their sound yet? Kind stupid, I know.

Not to mention that it’s horrible on mobile devices.

So a big part of the redesign would be to catch up to the futuristic year of 2012 and have our albums in a mobile-friendly streaming format. It probably sounds like a really boring thing to talk about, giving that it’s not very interesting, different, pioneering, or innovative, but it’s a pretty important thing, and it’s a big weight off of my shoulders to finally improve that stupid situation.

*Breaths sigh of relief*

So now I was starting to narrow things down a bit. I wanted a website that was going to be our main communication hub that worked well on mobile and could stream our music instead of only downloading it.

Now it was time to get some inspiration from other websites.



FINDING INSPIRATION (OR FORESTER)



When I finally set out to make the new website a reality, I had to ask a very simple, yet important question. “What does a good band website look like?” This, as you may imagine, is an aesthetic question, but it’s also a functionality, and experience question. Even though I love to design the way something will look, I adhere to the “form follows function” set. Meaning if you design something that looks great, but it is complicated or confusing to use, you designed that thing poorly.




“Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works.”
-Steve Jobs


So how does a good band website work? How does it function?

The funny thing was, I couldn’t think of anything off of the top of my head. Nothing like, “Oh, so and so’s website is really great!” or “Blah Blah Blah Band really understand the psychology of website design”.

Nope.

I realized that I didn’t really go to band websites much. So I decided I would do some research.

And what I found was shocking.

*Duh Duh DUHHHHHHH!!!*

My goal was to get a good idea of what bands at different levels did with their websites. So I started researching all kinds of bands and artists. Major label bands, independent bands, and even small local bands. My goal was to find something that one or more of them did well, that I could then appropriate for my new design…

…which never happened.

As I navigated through the websites, I was struck by how much I didn’t like ANY of them. Honestly, NOT A ONE! It felt like every one of them kind of followed a similar pattern and then just copied from each other. The problem was that the website design style they were all borrowing from was failing (in my opinion) on a number of important points.


FOCUS



One thing I’ve come to learn about people (and myself as a result) is that I have trouble paying attention to something when there’s a lot of distractions, or too many options. For the most part, though we’d all like to consider ourselves multi-taskers, that is mostly a myth, and we’re best when we can focus on one thing at a time. In other words, we’re mostly uni-taskers.

This idea of too many options is explored more in depth in Barry Schwartz’s book, “The Paradox Of Choice”.

Keeping this in mind while going to most band websites, I felt overwhelmed and confused.

Right away, I’m given a hundred things to pay attention to, and by the size, color and placement of the items, they seem to act as though they are all of equal importance.

So what happens?

My eye begins to dart randomly over the page, going from one box to the next, from news, to social media, to photos, to videos, to shows… Jesus man! Where do you want me to look!? At everything? Because I’m not going to look at everything at once. But that’s what most band websites try to have you do.

The trend seems to be that the home page is a general dumping ground for everything the band has. I can almost see the designers and band members working out their logic for such a design:

“This is the main page, so we gotta have the latest updates there. Like blog posts, and news. Yeah like that. And make sure they can subscribe to those feeds, that’s important. Oh, and we need to put our social media there too, so they can follow and like everything. Kids today do the social media. We can’t NOT have it! Right? No, not the buttons, we need to see the whole feed from Twitter and from Facebook. It’s important. Actually, put “like” and “retweet” buttons there too. Did you get the Instagram feed as well? We need that. Also show all of our latest photos there, and the newest videos. People need to see all the videos at once or they won’t go back and look at the older ones. Yeah, that’s good. Don’t forget to post a widget displaying our upcoming shows too! People need to come to our shows! That’s important…”

With this logic, a band’s home page (doesn’t the phrase “home page” sound super 90’s?) will become a soupy mess of attention-killing flashy things. (Are they shiny? I like shiny things!)

Okay, quick tip (assuming you even want to take advice form me). EVERYTHING cannot be of equal importance. I know it’s hard but you have to pick something to be the most important thing, and make that the focus. You can still have all of that information and media, just not all at once. It just ends up becoming chaos to the eye, and can actually turn away potential new fans.

Here’s an example of what I mean. Yes, this is a 3rd party site, but the layout is worth analyzing. (I blurred out the band, because it’s not their fault, it’s the site):



Stacks Image 6529


See how much shit is on the page? What the hell do you want me to look at first? My eye just darts around in circles, never really stopping on anything. My two cents: this is a terrible design.

What I took away from this, and some psychological studies, is that people can absorb information better if you give them WAY less options.



FRAMING AND PACING



Now that I knew I wanted to present one piece of content at a time on my redesign, the new question became, “what content do I show, and when? And why?”

Again, I looked at band websites of all kinds to see what was common. What do other bands do? (and while we’re at it, what about the Romans? What are they up to?)

As it turns out, most band websites follow a pattern:

1. A banner graphic.

This usually consists of the band’s logo, album art, a photo of the band members, or a combination of those elements. So far, I’m good with this. You need to establish some visual branding here, which is exactly what most sites do.

I will say though, sometimes the images are abstract and seem to say nothing about what this band is about, what they look like, or what they might sound like. If that’s the case, why put anything there at all? Because you’re supposed to? (please don’t nod to that question).

Going to these sites, I found myself wanting to see what the band looked like, so I could quickly assess the potential style of music. When I wasn’t given that, I felt less interested in the site from the get go. Not a scientific study by any means, just my gut reaction.

2. Social media.

In a lot of band websites, a long bar of social media icons is the very next thing you’ll see. Sometimes it’s built in to the header image itself. So what this tells me is that the next most important thing for people to see is this. Is that really the most important thing at this point in time? Obviously someone thought it was, or it wouldn’t be there. We (I) could also assume that it’s in this position because “that’s just what you do”. Following convention because, well, why wouldn’t you?

A big problem here, at least for me, is that as I’ve learned above, the website should (again, not a good word. How about… “it can be a good idea if the website would…”) act as the central hub for everything dealing with the band. Ideally, people would come to the one central site to learn about, and experience everything about you, not go out to a million other 3rd party sites to see one aspect of it, which also isn’t fully under your control.

So, if you even agree with that a tiny bit (and I’m assuming some people won’t), then having links that send your fan, or potential fan, out to a bunch of other sites not only takes people away from the place you’re trying to get them in the first place, but makes the experience for the fan more complicated and confusing, as they click on different social sites and wade through posts and updates and videos on their own (either that, or it’s totally fine).

If anything, think of the social media profiles like fishing lines in the water. The goal is to bring the fish into the boat (your website), not throw the fish back out into the water.

Don’t get me wrong. There’s nothing wrong with linking to your Facebook or Twitter or whatever. Let’s just agree that we don’t want to send them away as soon as they arrive.

3. Menu.

The next thing I see is something we all probably take for granted. The menu bar.

I can hear you asking, “when will this article be over?” and “what’s wrong with a menu bar?”

Seeing these long menu bars on some band websites took me back to the old days of internet band websites (are there non-internet websites?). Back when things were often hand-coded with HTML only (no fancy CSS), and when we thought it was really important to include a “links” page on every website (remember those?). While we’re at it we might peruse the vaults of Bravenet and add a counter and guestbook to the site as well (yes, guilty. Done it).

So what I’m saying, (since it was so subtle), is that this form of navigation and layout is very outdated, at least when implemented like it is on a lot of these sites.

Another issue I have with this, is similar to the social media problem above, mixed with the focus problem. When there’s a bunch of options laid out on the menu, and I’m a first time visitor, I don’t often know where to go, or what to click first. Again, all the buttons are in one row, and the same size, which translates to me as equal importance. So each of the links on the menu bar must be really important for me to go to, and right away.

And another thing, should I be given the choice to “roam around the world” at my own pace yet?

Well, since I posed the question, you could assume that I’m not quick to say “yes”. Yes (ha ha), most band websites follow this formula, so we assume there must be a reason for it. But it could also just be that it’s just a big game of copy cat. Website A did it, so we’ll do that for website B. After a while it becomes just “a thing” you do. Why would you question that?


Stacks Image 6533
Stacks Image 6537
Stacks Image 6541


There’s another approach on navigation that I see sometimes too. It’s what I call the “super artsy confusing navigation”. Occasionally, a band or artist decides to buck the trend of menu bars, or even naming things so you can find them easily. Instead, they’ll do something really graphically interesting, that hides the navigation inside an image. Like, random geometric patterns that you have to mouse over (fuck mobile I guess), and reveal what navigation link it is, or where it goes. Now, while it’s at least nice to look at artistically, it’s a confusing mess to find your way around, and therefore, to me, misses the entire point of a website and good design.

Remember, you’re designing how something functions, not just how it looks. If I’m confused by where to go or what to do, I’m leaving. Sorry. As a popular website design book says, “Don’t Make Me Think”.

4. News

Practically every site I visited did this. Once you break free of the header image, social media icons and menu bar, the first thing most often put in the body of the website was a big news feed. Sometimes it was a Facebook or twitter feed, sometimes it was just an old fashioned (love song?) HTML post. But however it’s done, the point is, it’s usually the first thing you see.

Now, a news feed seems pretty sensible here, doesn’t it? Not just because it’s what everyone does, but the whole concept of putting all of your most recent news and updates front and center feels like a smart idea. That way people can see what’s going on in your world.

BUT… (you knew this was coming)

After seeing it on website after website, it started to bug me. And at the beginning I couldn’t quite understand why. On the surface it didn’t really seem like a bad idea to put the news here, in fact, in many ways, it seemed to make a lot of sense.

So why did it start to bother me?

This one took me a while to put my finger on (and in).



During this examination of website structures and flow, I began thinking that I didn’t really like the idea of giving people the option to do whatever they want.

Not only just having less things on the screen at one time, like I figured out in “Focus”, but also being the one in charge of what they see and when.

It actually kind reminds me of writing a novel, or making a film. In both of those examples, you would lay out exactly what happens to the characters, and in what order. The pacing of a novel, or a movie, is critical to get people emotionally involved in the story. Put the wrong information at the wrong time, and people lose interest, or get confused as to why you’re telling them that now.

Thinking about these things finally let me figure out why I was having such an issue with the news feed…



STARTING FROM “SQUARE ZERO”



When making websites for our own projects or businesses, we often forget that we know what we know. Meaning, we know too much about what it is we do, so we start the communication assuming that everyone else knows what we know. Which is usually incorrect. (you know?)

This is especially true with the basics. You assume everyone who comes to your website knows about you already (because you know about you), therefore it only makes sense to get to the new information right away. Namely the news and updates.

Well, that can work fine for people that are already fans of what you do, but you’re ignoring the people who aren’t familiar with you yet. These people don’t know what you’re about, they don’t know what genre or style you are, they’ve never heard your name… some don’t even know that you’re fucking band!

With people in this category, your website would be really confusing to navigate, because they just want their basic questions answered first before they even know if they want to see your news, or where to click on your navigation, or which social media link to follow.

So how do we solve this?

That’s where this idea of starting from square zero came from.

I’m sure you’ve heard the phrase “starting at square one”, right? It means you’re starting at the beginning. Well, even at square one, we have some assumptions as to what things are, we just don’t have any details or specifics yet. So to really cover our bases, it might make sense to go one step back from there, to “square zero” if you will, and start at the point in which your visitor knows absolutely NOTHING about you. Seriously nothing. Not a god damn thing.

When I was visiting all of the band websites I was researching, I tried to put myself in the mindset of a person at square zero. I know nothing about this band, their style, their sound, their history, their personality, even that they are a band at all. So as this person, what can I learn from their website to answer these questions for me?

Well, sometimes a band photo can tell you some things about the style of the band (as I mentioned earlier). If they’re all in cowboy hats and boots, I can reasonably assume they’re at least a country-influenced band. But hell, it could be a photographer’s website. Maybe a western-wear store. Hell, a Texas law firm! How do I know that it’s a band? Obviously some quick digging around would eventually clue me into this. But we’re assuming something again…

That people are going to dig around on your website to figure out these questions on their own.

Sadly, people have short attention spans (which is why I’m shocked that you’ve read this far. This is a long-ass article). And if they can’t find what they’re looking for, or you haven’t captured their attention in less than 5-10 seconds (which might even be a bit long), they’re going elsewhere.

As I went from website to website with this mindset, I became more and more ruthless. I found that I started asking two questions of every site:


1. What is this?

and

2. Why should I care?


And it’s not only band websites, by the way, that miss the boat (really? another boat metaphor?) when trying to quickly answer the basics for people at square zero. Business websites also assume you know what kind of business they are, or what service they offer, or what kinds of products they sell. So naturally, they skip over saying the obvious (because, let’s face it, it’s obvious, and stupid), and start the communication assuming that you know all of this already.

So that became my new goal. To quickly answer the questions “what is this?” and “why should I care” as fast as possible, so people had the basics covered and could move on from there, knowing what the fuck was going on.

For me, it also solved the problems I was having with the menu bars and the news feed.

The websites assume I know enough about, not only the band, but the site itself to know where I should go in order to find what I want. For people who go there all the time, sure. They know their way around. But not me. I’m the first time visitor, remember? It’s like going to Disneyland for the first time. Yes, having a map of the park helps, but you still have to kind of wander around because you’re not exactly sure what you like, or what you want to see. So a menu works well for those that already know what they want. And we assume that everyone knows this… which they sometimes don’t.

And as for the news feed, being the square zero person, I didn’t even understand what the updates were about, because I didn’t know what the hell the website was for, and had yet to care. News and updates are great for those that already know about you, and are into what you do, but not for the first time visitor. At least not right away.

First tell me what this is, and why I should care, and then you can show me some updates or other content.

FINDING FORESTER (AND INSPIRATION)



So the goal of finding inspiration from the band websites turned out to be a bust. Though I did come away with a lot of new notions of things I didn’t care for. And did my best to figure out why they didn’t work for me.

Which then begs the question, what sites DO I like?

Before I mention the next site, I have to say something. I can already see the eye rolling and sighs. Why? Because my first example is over-used in the world of design. Almost everyone points to them as an example of how to design websites and things.

And even though its been done a million times by now, I’m going to talk about them one more time.

You ready?

Yep.

It’s Apple.

(Go ahead… I’ll wait).

I’ve always enjoyed Apple’s design aesthetic, be it for physical objects, interfaces, or visual concepts.

Stacks Image 6547


To cut to the chase (fucking finally!), here’s what I wanted to use from this school of thought:

• The mantra of Keep It Simple Stupid (or the less interesting, Keep It Super Simple).
• Everything presented one bite-sized piece of information at a time.
• Heavy use of negative space.
• Large full screen images (when applicable).


There are a multitude of other product websites I like too, one being from the app I mentioned earlier, Pixelmator.



Stacks Image 6555


So the plan for the website became trying to strike a balance between a simple, almost minimalist design, while still keeping some pops of personality and visual interest for branding and identity, as well as providing the necessary information from everything I’d learned about band websites.

So did I achieve all of those crazy ideas in our redesign? Probably not. But they definitely influenced my thinking along the way, and helped to focus me on what I wanted, and what I didn’t want. All I can say is that I tried, and at least for now, I’m pleased with the result (give it a few months, I’m sure I’ll hate it by then).



PLANS FOR THE FUTURE



*phew*

This is the longest article so far. But hey, there’s some more!

The website you see now (as of early 2016), isn’t finished. And I did that on purpose.

The final version will have a lot more content, like pages for each album, an in-depth bio section, and a lot more.

“So why isn’t that all ready now?” you might, maybe, perhaps ask.

Well, thats a shit-load of work. Trying to make sure every page conforms to all of the design ideas that I’ve just talked about, plus writing and creating the content for each page… I’m getting tired just thinking about that.

So from the outset, I decided I’d break it up over time. This allows me to get the core of the new website up in a somewhat timely manner, and keeps me busy with projects as time goes on. I tend to make projects bigger and bigger and then they become so large and unwieldy that it either takes forever to finish them, or they become too intimidating to finish at all. I’m trying to prevent both of the scenarios as best I can.

Alright, that’s plenty of words. Hope you found something useful in my journey to design a new website.

Talk to you again soon.



Home
Blogs & Articles
Facebook
Mailing List
© 2017 ENVINITY