Question: What is the number 1 goal a website needs to achieve?
Answer: To be usable.
Needless to say, this answer is a fairly obvious one; but what about the number 2 goal? What would be any website’s second priority?
Answer: To be easily usable.
This idea may appear as though I am splitting hairs or overanalyzing the steps to design; however just because one designs a usable product, that does not mean that most people will understand how to use that product. Much like how certain, perfectly functioning doors can leave a person befuddled at their operation, perfectly usable websites could be confusing or even frustrating to use due to their design.
Hence, many sites have opted to utilize a grid structure when displaying content; keeping in mind how one’s eyes will move across the screen. The grid model allows for easy division of the specific content and purposes of a website; keeping every item with their related categories. One can think of the grid model for websites as arranging different blocks according to the roles each block has. To better explain how a general website grid works, let’s take a look of an example of one utilized properly:
THE GOOD: MICROSOFT
Using this Microsoft shopping page as a basic example of how a web grid works, take a look at how the content is organized.
The basic navigation lines the top of the page while the two main sections are divided below roughly within a centered view for the user. The left side is reserved for narrowing down search options while the right side displays all of the products that show up as a result. A website such as this is designed with ease of use in mind as Microsoft intends for visitors to purchase the kinds of products they are looking for. A large amount of style is not necessarily needed for the purposes of this site as the font style is visibly consistent throughout the page and colors are mainly kept to blue and white with a yellow highlight to notify the user about savings; this yellow highlight especially works in catching the viewer’s eye towards points of specific interest. In short: this website is simple, but effective.
THE BAD: NBC NEWS
Of course, adhering to the grid model does not guarantee an instantly well-designed website.
Personally, I have never been fond of the way in which most news sites are designed; and the NBC News website is no exception. Beyond taking a significantly longer amount of time to load on my computer than most sites I often visit, this site crams much of its content together to were the user would be uncertain of each section’s purpose. There is little visual hierarchy between the different kinds of content available on the site which confuses the eye on where it should place priority. Granted, I do understand that it may not be ideal for a site made to deliver news to place certain news as a greater priority than other news, I do believe the site could do a better job in categorizing the types of news stories into distinct sections.
That being said, I do not believe the aforementioned intent to deliver all news equally should apply to sponsored content; some of which essentially being an advertisement. While these do appear quite lower on the page, they do take up a good amount of that space and can even appear indistinguishable from the site’s own articles barring the “sponsored” label. Users should not be treated to such deceptive tactics whether it be by the advertisers or by those who manage the website; and designers should not attempt to blend advertising with actual site content.
BREAKING THE GRID: PERSONA 5
Of course, not every website needs to adhere to the grid model in order to be visually cohesive. In fact, sometimes breaking from the traditional grid layout can achieve visually outstanding results.
The video game Persona 5 is well known among gamers for its distinct and bold visual interface during gameplay, and the designers behind the game’s website did not stray from that style. The Persona 5 website is dripping with the graphic style featured within the game itself through unique font choices throughout every section of this site. Yet, despite how chaotic these elements may appear, the overall design remains cohesive through a central color scheme of red, black, and white. In addition, specific fonts still follow a form of hierarchy that relegates the importance of certain words over others. Content is also made to encourage scrolling downward to view more sections as to not cram different items together into a single viewport as the NBC News Site had done.
I also have to give notable praise to the character page as what would normally be a simple grid of portraits and boxes is made into a winding path of character bios that draws the eyes towards each character one by one as if following a map starting from the main character downward. I was incredibly impressed by this achievement; especially after viewing so many websites for similar products that opt for the standard layout of perfectly aligned boxes. Even the acknowledgements to the game’s developers match the stylization of the rest of the site.
Overall, the Persona 5 website is a perfect blend of breaking away from traditional structures while also maintaining clear visual hierarchy and unity.
CLOSING THOUGHTS
No matter the approach taken for a website, the grid model is always good to keep in mind when designing a page; however, one should also not be afraid to break away from the confines of a given grid if it can provide the user with a more enjoyable experience. Whatever the direction chosen, one should prioritize clarity and usability over merely trying to fit as much content as possible into a single viewport.