Blog Post#5: Single-Page Speculation

Single page websites seem to be becoming popular among quite a few web developers. In my opinion, it is an effective way to show quite a bit of important information at a time, without becoming overwhelmed by navigation and embedded pages. To me, the single-page websites I browse work as brochures do in the print world. There is a balance that needs to be met when it comes to the content within a single-page website. Too much and the page becomes overwhelming and visitors can get bored if they’ve come for a specific purpose, no matter how fun and interactive the design, but too little and the website becomes pointless and the information within it probably would have been better composed in an e-mail or pamphlet.

The Weeknd: Abel Tesafay
A man in need of some serious help and rehab, but still I obsess over him. though I’ll try not to let my hopeless love get in the way of my critique. Abel, more commonly known as The Weeknd, is an alternative R&B singer who’s fame has escalated over the past couple of years.

As a frequent visitor of his website for no real reason, I’ve seen it change more times over the last few months than his entire singing career.

Abel Tesdaye’s homepage

A Rant on Navigation
In reality, Abel’s page is mighty useless. It’s even near impossible to find out when he’s on tour without doing some serious searching and trying to figure out if he’s even in the states and when is just as difficult. Each picture shown in the above screenshot when moused over reveals that it’s either a label to Events, Shop, Fans, Art, Music, or Film. Not many of them actually go anywhere. They actually pop up a picture, sometimes associated with the already provided pic, sometimes not. The pictures below reveals what happens when clicking on the shop or events displays.

The Weeknd Events Pop-Up

The Weeknd Shop Pop-Up

Film pops up a random video from his new album, music will send you to a page to buy his latest CD, there’s really no telling where you’ll end up when clicking on any of the photos. And to make it even “better,” there’s a ‘more’ button at the bottom as if you really want to get lost in more of the antics.

More Button

Now once you actually get to the navigation bar at the bottom of the page, if you decide not to go on a clicking spree looking for the prize inside the full cereal box, half the links lead to different websites and social media sites. Abel’s website isn’t that big, and not all too useful. It’s easier to google when and where he is than it is to find them on his site. The few links that stay on the website, Events and tours, only reveal the same posters from the homepage and you’re forced to click and expand them like above to view his schedule.

Visual and Color
The Weeknd’s site is themed after his newest album which actually just came out a couple months ago, hence his website change. Having been to his tour concert, I’ve become quite fond of the seafoam green and black that he’s begun to decorate everything with. Previously he had a chaotic Asian theme to match the album, but I can at least rest easy know that that’s gone…mostly.

Abel’s Asian inspired theme

In ConclusionThere already isn’t much to Abel’s website, but it’s at the same time rather chaotic, much like his life (maybe that’s the effect he was going for? Drug nostalgia…Doubt it). He really could benefit from a single-page website for organizational purposes alone. I don’t actually know why I visit the website so frequently, because I gain nothing from it; a few longful sighs as I gaze at glimpses of his face that I could just go to Instagram for. I didn’t even know I could buy the album from his site until the time I just spent exploring it. Some factors on his website, like the color theme, I get, others, like the insane navigation, I don’t. I think it needs to be calmed down, by a lot. Something that his visitors don’t need to be gone on XO to understand.

Abel’s imprint label, whether hugs and kisses, or his favorite drugs, maybe a little obvious.

Blog Post #3: 21 and up

I’m going to take a moment to talk vodka; more specifically, Smirnoff and UV. Both are considered cheap, but that fails to stop them from being rather popular among the freshly legal consumers. They have the same target audience of people in their twenties and mid-twenties who have only one thing in mind when paying ten to twenty dollars for a bottle of vodka.  Both have a variety of flavors and an attractive design pattern that begins instantly recognizable among their repeat buyers.

After browsing a variety of other party-ready vodka websites, a few patterns began to appear in the matter of content. Vodka websites are not stores, you typically cannot but the product directly from the website, but they’re not exactly pages of advertisement either, trying to get you to go somewhere else to buy their product. Vodka sites—or Smirnoff and UV in particular—seem confident enough that the only reason you would visit their site is to find drink recipes that can be made with their product, check out their other products, to find official events, or in the case of UV, to share your fun times with their product.

ID Please

Every alcohol website starts out the same, it’s inevitable, and probably illegal if not. The first time you visit any spirits site you hit a page which asks for your birthday—they would really like to be sure that you’re legal drinking age and it would be so rude, not to mention illegal, to lie.

Smirnoff’s ID Page

UV’s ID Page

Pretty standard. Enter your birthday and location, and enter the website of wonders. Then you get to the first page that could in some cases make or break a website.

Navigation

As I said before, both websites basically have the same content, even the navigation bars lead to the same kind of content for both sites.

Smirnoff navigation bar

UV floating navigation bar

There’s the drink recipes, their different drink products, events (indicated by ‘master of the mix’ for Smirnoff) and the only place the two sites veer differently is UV felt it necessary to share some facts about their vodka, while Smirnoff shares videos from their events and ads of their new products. Which, I feel UV would have as well, but the photo-dominated layout already focuses on people having fun using their product.

So then we’re brought back to the purpose of the two products, they know that the primary reason people wish to go to their sites are to find out just what they can do with the wide variety of flavors they’re given. UV shows this more, every panel on their home page indicates a vodka flavor, and clicking it will send you to a list of drink recipes that can be made with said flavor.

Smirnoff does something of the same effect, but with the panel across the top, where they display their newest Smirnoff flavor.

Colors

Both Smirnoff and UV’s websites are vivid with color. UV uses a bright, neon color palette against a near black background that hits the nail on the head with what comes to mind when one things of parties, vodka, and UV lights. All together and simply stated, it’s fun and attractive and a rather energetic aesthetic.

While Smirnoff isn’t hitting their consumers in the head with periwinkle purple and seafoam green, their high contrast colds, blacks, silvers, and reds gives their site a slightly more sophisticated air, while still achieving a loud splash of fun and not clashing with the multicolored bottles they display.

Picking Around the Grids

When it comes to grid structure and static organization, UV inevitably wins. The grid was pretty easy to pick out and determine using the square formatted blocks. Despite all the image links seeming rather chaotic and dysfunctional, UV is the more organized and neat of the two. Everything, right down to the arrow and logo on the top image of the page and the seemingly random text, are perfectly aligned to an easy to determine grid. Even the glasses and bottles align perfectly to the grid lines as seen below.

UV’s grid structure

On the other hand, Smirnoff’s grid, despite seeming like the more organized layout, I couldn’t really determine and wound up having to make a wild, probably still inaccurate guess.

My guess at Smirnoff’s grid structure

It actually caught me off guard. Upon looking at it, I thought Smirnoff’s grid would be easier to determine, it looks so clean cut and organized when in reality there isn’t much that actually lines up vertically.

Who’d have known? Not me, obviously.

Blog Post #1: Halo Official Site

What is Halo Waypoint for?

Halo’s official site, known as Halo Waypoint, is the central hub for Halo related content. For those who do not know, Halo is a popular science fiction video game franchise that started in 2001 and has come a long way since. Halo Waypoint was created by 343 Industries and has many different uses and features. It’s primary uses is to provide the “Halo community” with an assortment of Halo information including: information and stats on players, a forum to trade advice, find friends, and troubleshoot problems, Machinima videos, game play strategies and tutorials all from within the community portion of the website. Then in the ‘Halo Universe‘ tab, there are organized details of every ship, location, weapon, and character, pretty much everything ever useful in the game. The website also permits players to keep track of their own in-game stats, achievements, pretty much all of their own game-play data from either the career page–which keeps track of all 343’s Halo game-play–or the Halo 4 web app.

Who is the site for?

The intended audience for Halo Waypoint is pretty obvious from the get go; the appropriately nicknamed Halo Community; people young and old whose common trait is that they love to play Halo. Even the site navigation can become confusing for those who are not rather intimate with the game. For anyone else, the site could be rather overwhelming and confusing, if not just downright foreign with the game lingo, symbols, and references.

Words on the site design

As I just mentioned, viewing the site as a whole, the navigation can get a bit confusing for those new to the site. There are pages embedded into pages, embedded into pages, which lead to even more pages. Pageception. It can get rather easy to get lost, but to those who frequent the site, it opens up a Halo wonderland where we can discover and find something new about the game we obsess over each time we get on the site. The forums strike up new conversations, game videos are uploaded weekly, and player stats update immediately after finishing a game.

When it comes to C.R.A.P. the Halo Waypoint site has it all.

Contrast. There’s heavy contrast between the dark background and light text making the sans serif typeface that dominates the pages easy on the eyes and pleasant to read even though there are a lot of areas with blue on blue, it works.

Repetition. The site as a few reoccurring themes: outer space, blue, and future technology which all comes together to make a unifying and innovative design.

Alignment. The bulk of the pages follow a two-column grid. Either the page sidebar is aligned to the left or to the right and opposite of it is a body area for text, videos, blurbs, whatever the page calls for. There are some instances where the sidebar is broken up by body, but everything lines up with something on this site and makes for a rather neat design.

Proximity. This goes hand in hand with alignment for this website. Areas of text are grouped together in sections to show that they relate with each other, or videos, or images and text are put together to show that they relate.

Overall, I consider the website to be a success. It provides a useful and interactive design that really engages its visitors. Despite the navigation being somewhat complex to explorers, the two-column grid consisting of a sidebar and body content on most pages, keeps everything else organized; and considering just how large the website is and how many things it does, I can’t think of any other way to more successfully tackle the navigation system.