Principles Of Web Design

[imedfall23]

Users' Choices To A Minimum

Scandinavia and the World offers many choices to the user upon usage, which may lead individuals unfamiliar with the site to descend into confusion and even panic.

[imedfall23]

Users' Choices To A Minimum

Keep Notes is great at minimizing users' choices, given that there are little to no choices the user can make outside of how you color your notes. Each note has the same font, size, spacing, and even layout.

[imedfall23]

Users' Choices To A Minimum

Keep only the bare minimum of choices for the user. Only keep the stuff they need to see, with everything else carefully tucked away. The user shouldn't feel inundated with choices and options. MooMoo.io does this almost flawlessly, with the options you're allowed are your name and skin color, with your server being automatically given to you.

[imedfall23]

Easy To Reach

Kryptonian Info is not the best at being Easy To Reach. On top of the rather spread-out layout the site has, to view a particular word or article, you must trudge through dozens of similar links and pages that blend together and turn the webpage into a Labyrinth.

[imedfall23]

Easy To Reach

Donjon serves as a good example of Easy To Reach design. The entirety of the users' choices are placed on the right side and kept close together, so rapidly swapping from topic to topic is easy to do.

[imedfall23]

Easy To Reach

Place things close together, or at least near each other, so it is easier to navigate between them. The longer a path is needed to see or view a specific image, paragraph, or link, the less likely a user will see it. Modrinth is a good example of this, as the entire screen is very compact. Practically every pixel has something to click on, so easily navigating the site becomes a breeze.

[imedfall23]

Simple Structures

5eTools could do with a reminder on simplicity. Sure, each button is cleanly adorned with simple drawings, but clicking on any of them leads to a wall of text and difficult-to-understand pathways you must navigate.

[imedfall23]

Simple Structures

Space Battles shows the benefits of simplicity easily. Every dialogue has a chat bubble image, every section is clearly labeled on what it's about, and the light font on dark colors makes it rudimentary for users to read every word.

[imedfall23]

Simple Structures

Users will understand simpler designs and structures more easily than more complex and nuanced ones. The easier something is to process, the easier it will be to understand. For instance, Canva uses simplistic terms and easy-to-understand images throughout their site to ease a newcomer's learning process over the site.

[imedfall23]

Divide Content Into Small Chunks

YouTube needs to be schooled in content division. Sure, you can specify the type of videos you want to see, but that doesn't stop YouTube from showing a bajillion videos of differing types that you are expected to sort through.

[imedfall23]

Divide Content Into Small Chunks

Disney+ is a fairly decent example of this, as most of its very extensive catalog is split into the Disney, Pixar, Marvel, Star Wars, or National Geographic sections. From there, the cinema is further separated by series, genre, and even characters.

[imedfall23]

Divide Content Into Small Chunks

To make it easier on the viewer, divide your content into smaller chunks of content. This makes it easier to both arrange and organize the information, as well as easier for the viewer to digest. Gmail acts as a perfect example of this, as the various streams of information you get are naturally divided into the Inbox, Archive, Sent, Starred, Spam, Drafts, & Trash icons. But then, they can be further broken down into labels that you can set to automatically apply to certain kinds of emails. Additionally, you can create mini-inboxes on the righthand side with their own custom filters.

[imedfall23]

Proximity

I feel like the Worm webserial by Wildbow could have placed its symbols a bit differently. There is seemingly a grouping near the center, but most of the items there are of unrelated features

[imedfall23]

Proximity

Nexus Mods is a wonderful example of proximity, as the group of pages and drop-downs at the top all serve to narrow down the information you're seeing. Meanwhile, the grouping at the bottom serves to show you differing sections of the information you're viewing.

[imedfall23]

Proximity

Design elements that are close in proximity to each other will be seen and classified as a group, regardless of the original intent. Elements that are supposed to form a group must be noticeably placed close to the other elements in their group than elements of other groups. Tumblr does this very well as all the forms of management are grouped together on the side and all the ways to post are grouped together in the center.

[imedfall23]

Similarity

I feel Google Translate could do well with a lesson in Similarity, or rather dissimilarity. Most of the icons are of the exact same color and style, but outside of the languages, they are all varied enough features to justify further distinction than just their icons.

[imedfall23]

Similarity

Campfire is a clear example of Similarity, as related pages are all done in similar styles. New Project & New Folder are blue text on a white background. Write, Read, Learn, Pricing, and Contact are all the reverse of white text on a blue background.