Discover Which New Gaming Console is Right For You!

Playstation 5, Nintendo Switch, and Xbox Series X
From Top-bottom: Sony’s Playstation 5, the Nintendo Switch, and Microsoft’s Xbox Series X. All images retrieved from Sony, Nintendo, and Microsoft’s websites. Arranged by Jonathan Cellini.

Still waiting for the pandemic to end?  Looking to buy a new console to pass the time?  Looking to upgrade to a new generation?  Don’t know which console is right for you?

Then you have come to the right place!  With the releases of the new Sony Playstation 5 and Microsoft Xbox Series consoles, along with the currently running Nintendo Switch and even PC, there are quite a few options in deciding which system to purchase can be an overwhelming decision.

Luckily for you, all of the best and worst features of each of the current-generation options are available right here!


XBOX SERIES X / SERIES S

Price: Series X – $499, Series S – $299.

Microsoft’s Xbox brand has been synonymous with gaming for years and is held in high regard for its thriving online community and multiplatform services.  With the 9th generation of consoles, Microsoft offered two new Xboxes for gamers: the power house Series X, and the all digital Series S for those on a budget.  If you’re looking for a great place to play with or against friends, the Xbox Series X/S is for you!

Pros

  • Series X boasts significant power; leading to gorgeous visuals and fast load times.
  • Cross-buy between current Xbox consoles and PC.
  • Expansive backwards compatibility with all previous Xbox generations.
  • Xbox Gamepass subscription provides access to extensive game library.
  • Supports wide variety of entertainment apps.
  • Thriving online community with Xbox Network (formerly Xbox Live).
  • Online cross-play between platforms and generations.

Cons

  • Decent power and price gap between Series X and S.
  • Very few exclusive titles compared to competition.
  • Most titles also available on PC – further diminishing novelty of system.
  • Console currently difficult to find.

PLAYSTATION 5

Price: Base PS5 – $499, Digital PS5 – $399

Following the massive success of the Playstation 4, Sony’s Playstation 5 aims to match its predecessor’s achievements in offering gamers unique experiences for all audiences while not sacrificing power or affordability with hit titles such as Spider-man: Miles Morales and the upcoming God of War: Ragnorok. If you’re looking for the jack of all trades, the Playstation 5 is for you!

Pros

  • Fast loading times and graphical prowess.
  • Perfect balance between quality exclusive and third-party titles.
  • Robust online infrastructure.
  • Backwards compatibility with most PS4 titles.
  • Supports wide variety of entertainment apps including Netflix, Twitch, and Disney+.

Cons


NINTENDO SWITCH

https://www.youtube.com/watch?v=f5uik5fgIaI

Price: Base Switch – $299, Lite – $199

While already on the market for over four years, the Nintendo Switch is still making strides past the middle of its life-cycle as the best selling console in the United States for roughly two years in a row with the help of premier titles such as The Legend of Zelda: Breath of the Wild, Super Mario Odyssey, and Super Smash Bros. Ultimate.  Despite its age, the Switch family still has a future ahead of it.  If you’re looking for something a bit different from your standard console, the Nintendo Switch is for you!

Pros

  • Relatively lower cost than competition.
  • Great selection of high-quality, exclusive titles.
  • Fully portable.
  • Multiplayer right out of the box due to “Joy-con” controller function.
  • Lite model cheapest option of all consoles listed.
  • Online subscription at lower cost than competition.

Cons


PC

Price: ranges from $500 – $10,000

The time tested and most versatile platform on this list, the PC is the goto place for those who seek the ultimate gaming experience due to its potential for power, customization, and legacy with top brands such as HP or Alienware. If you have the technical know-how to take the fullest advantages of your games, a PC is for you!

Pros

  • Higher-end models are more powerful than any console – leading to higher frame-rates.
  • Can support multiple gaming generations both past and future.
  • Versatile control support between mouse and keyboard to a standard gaming controller.
  • Hardware can be upgraded without full replacements.
  • Access to in-game modding from fan-communities.
  • Multipurpose – has non-gaming uses.
  • Access to digital store-fronts such as Steam and Epic Games.

Cons

All You Need is One – A Look Into Creative One-Page Designs

We have certainly made a long journey from the websites of the past.  What were once singular static pages of basic Times New Roman text against a barely styled background has now evolved into full channels of content all located within a single site.  Indeed, the amount of pages that can be created for a site now is nothing short of impressive; however, many designers have found great use in utilizing new technologies to even push the single-page website format in several creative ways.

SIMPLICITY IS NOT EASY

Just because something is more complicated, it does not mean that more effort was utilized behind the creation.  In fact, many will tell you that trying to take a complicated idea and break it down into more simple terms is the much harder task.  Therefore, it is impressive when a designer is able to communicate such expansive ideas in a limited form and push those limits to the fullest capacity.  Here are some notable examples of single-page sites that push their boundaries:

MVP ASSEMBLY LINE

Assembly Line
“MVP Assembly Line” makes their pitch to help develop a users idea into reality.

MVP Assembly Line is a site made to help users develop and launch any product ideas said users have.  The site is stylized with a crude, but organized look to reflect the designing process along with impressive technical elements such as the moving conveyer belt as you scroll down the page.

The site pushes hard on making the pitch to help develop your potential product idea as if done as a PowerPoint presentation; and for such purposes, I believe this format works as each vital point of information appears one at a time.  Unfortunately, its responsiveness to viewport size does leave room for improvement as, while icons to cling over to the left side when shrinking the view-width, the text does not condense itself nor does it even offer the option to scroll to the side.  Overall, the design is well done; but for a site that advertises itself on professional product and app design, this is a pretty significant oversight.

 

COLOR SELECTOR

Colors
“Color Selector” helps keep designer up to date on the latest art and fashion trends while also exploring interesting color combinations.

Color selector, as its name suggests, provides a decent library of colors and color combinations as well as provided examples of related art and fashion trends associated with the chosen color.  What is interesting about this site is that you actively have to drag across the screen from left-right to look over the various colors on display; which gives a good physical feeling as if choosing a book from a bookshelf.  You can even choose how the colors can be sorted from classic, tint, to alphabetical.  The fairly minimalist approach here also places greater emphasis on the colors themselves.

In terms of responsiveness, the site does shrink the content; but not in the way you would think.  The colors shift upwards while the movement remains left-right; meaning that there is a large region of dark space where the rest of the color’s height would normally be.  In addition, the scrolling functionality does somewhat interfere with the sensitivity of clicking bookmarks or “x”s on the colors as you might not trigger the response at first click.  Nevertheless, I still view the site as a great example of effective one-page design; though there is always room for improvement.

INSIDE THE MIND OF SAMUEL DAY

Samuel Day Portfolio
“Inside the Mind of Samuel Day” is a highly-stylized that guides users on a twisted journey towards other works.

Easily the most artistic example of what is shown today, the portfolio website for award winning designer, Samuel Day actively takes the user on a journey inside the mind of this creator.  Literally!  At the command of your cursor, you scroll inwards as opposed to up-down or left-right traveling inside of Samuel’s brain.  Eventually, the scrolling stops and you see a set of figures inside of a train – each representing a previous web-design work from Samuel Day.  The twisted and whimsical nature of this site reminded me of works such as the Beatles’ Yellow Submarine film.

Surprisingly however, the site does not sacrifice too much artistic merit over responsiveness as the site content resizes appropriately to fit the viewport and is perfectly interactive even at smaller widths.  The only absence I noticed was the disappearance of the unique cursor and the film-grain of the full-sized site; but such details are minor at smaller widths and do not distract from the experience.  In my opinion, this site is the best example in showing how far the web has come in terms of design possibilities.

 

SUMMARY

Single page designs may appear limiting at first, but great amounts of creativity can emerge from pushing the boundaries of those limitations.  By being challenged to overcome these restraints, designers open up new opportunities to create new experiences and set new standards for everyone on the web.

Grid-Locked – Examples of Good, Bad, and Broken Grid Models Across the Web

Deviant Art Home Page
Deviant Art Home Page

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

Microsoft Shop Page
Microsoft Shopping Page

 

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

NBC news links
Assortment of NBC News article links
NBC Original and Sponsored
Sponsored articles appear to have equal importance to original articles.

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

Persona 5 Description
Persona 5 game description
Persona 5 Website Character Page
Persona 5 Website Character Page

 

 

 

 

 

 

 

 

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.

The Dangers of Confusing Doors – an Essay Response to Don Norman’s Philosophy of Design (Ch.1)

 

"Norman Door"
Image by Michael Lutjen

Upon reading the title, I know what some people may be thinking; “How can a door be confusing?  Its only job is to open and close!”  And this is true: a door should not be confusing; however, each of us has likely faced at least one occasion during our adult lives in which we accidentally pushed upon a door that was intended to be pulled, or vice versa – leading to a brief moment of dumbfounded embarrassment when the door does not open.  While we may perceive ourselves at fault in such instances, in reality, this phenomenon often stems from a lack of communication, or even conflicting communication, through design on the specific mechanisms of a given door.

Such doors have come to be referred to as “Norman Doors” named after design researcher Don Norman who has often expressed his grievances with doors of this sort.  “I see others having the same troubles—unnecessary troubles,” says Norman on the subject in his book, The Design of Everyday Things, “The design of the door should indicate how to work it without any need for signs, certainly without any need for trial and error,”

Personally, I agree with Norman’s view; a common mark of bad design, whether it be a TV remote, video game, website, or indeed a doorway, is poor communication on the designs intentions.  In other words, good design should have good communication.

For design to have good communication, Norman specifies that good design should take into account the human interactions of discoverability: “How does this work?”, and understanding: “What is this for?”  In other words, good design should clearly and immediately communicate its function and purpose to the individual.  To do so effectively requires the use of four fundamental principles of interaction: affordance, signification, mapping, and feedback.

AFFORDANCE

Photoshop Homescreen
Photoshop allows for the ability to manipulate photos or create artwork depending on the user’s desires.

Affordances describe the relationship between the properties of a given object and how the user decides to utilize the object.  Despite what many believe, affordances do not describe a property in and of itself – the affordance comes from how a person chooses to interact with those properties.  Take, for example, a sheet of white paper: it is thin, blank, and flimsy – these are its properties.  The affordances paper offers include the ability to be marked for writing or drawing, the ability to be cut into pieces, and the ability to be folded into various shapes and sizes.  Similarly, an application such as Adobe Photoshop has the affordance photo editing and manipulation along with the affordance to create digital art from scratch.

SIGNIFIER

Twitter post
Twitter’s “Tweets” contain various, visible options for sharing images, gifs, and polls.

While an affordance may exist, one may require further assistance in recognizing its existence.  This requires the use of a signifier which highlights a specific point or purpose in which a person can use an object.  A signifier can act as a direct statement, such as a “press here” or “pull down”, or it can be communicated through the design of the object itself.  Take, for example, a general Lego brick; the circular grooves on the top in conjunction with the hollowed bottom clue the user into the interlocking nature of the toy-system.  Most websites and applications tend to utilize a good number of signifiers to indicate which icon performs a specific action; however, most sites and apps try to keep to visual or minimal signifiers as to not overwhelm the user with too many options.  Twitter, for example, offers a quality amount of clear visual signifiers when crafting a post.

MAPPING

Pokemon Go Screenshot
Pokemon Go creates a portal for the users to interact with the Pokemon world

Mapping refers to the specific relationship between the control and output of an object.  Essentially, it describes how well the function of an object correlates to the physical action made by the user.  For instance, a cursor on a computer screen should actively match the movements made by the sliding of the computer mouse – which directs the cursor to the desired location.  Mapping is especially crucial in virtual design as creators aim to minimize the divide between the user and the screen of a device.  Augmented Reality (AR) applications such as Pokémon GO utilize both the screen and gyroscopic technology to act as a magnifying glass to reveal a hidden reality of Pokémon.

FEEDBACK

Egg Timer
Lux Minute Minder Timer made to tick and chime from the turn of a dial.

Of course, one may not know if the object works as intended if the object provides no proper feedback.  Feedback is the visual or auditory signal that one’s action has been registered by the object.  In mechanical objects, feedback is often conveyed by a chime of some sort, such as the ticking of an egg timer as it counts down.  However, Norman notes that this type of feedback can easily be done rather lazily by companies paying little thought to the design of a product. “They [basic light and sound feedback] tell us that something has happened, but convey very little information about what has happened, and then nothing about what we should do about it,” says Norman.  I believe this sort of confusion occurs when the feedback gained feels non-specific in tone, detached from user action, and only existing in isolation.  Therefore, it may be imperative to have multiple kinds of feedback.  The Apple trash bin, for example, resembles a real-life trash receptacle; and once you drop an item into the bin, the sound of trash entering a metal bin plays.  It is a simple case, but it is still effective.

SUMMARY

A quality design should feature:

  • Clear affordance between the object and user.
  • Clear signifiers to communicate how said object should be used.
  • Clear mapping to make use of the object intuitive for all.
  • Clear feedback so the user knows an action has taken place.

By keeping all of these factors in mind, one can ensure that a design is both easy to understand and enjoyable to use.

Works Cited: The Design of Everyday Things: Revised and Expanded Edition (2013) – Don Norman