Developers Can Make Beautiful Software

At TigerTeamX, we typically have a design to follow to reduce errors. Yet, the specs can change anytime, leaving us no time to update the blueprint. So, while having an outline is necessary, developers should also be able to make good decisions.

Let's cover simple design principles for software design engineers.

What design principles do we use?

Here are the guides we use:

Consistent padding/margin

Padding and margin are basic web design features for creating space between objects like text and graphics. It helps to make a site appear clean and easily readable.

Let's say we have a mobile or web app displaying a product list. Each product is displayed on a rectangular card with a product image, title, price, and a "buy" button. To make sure that there is enough space between each card to create a clear visual separation but not so much space that the cards feel disconnected - here is what we can do:

• Use consistent padding and margin. Set a consistent padding of 16 pixels around each card, which will create enough space in between and make them visually distinct while also ensuring that the cards feel connected.
• Use a consistent margin between each card. Set a consistent margin of 8 pixels between each card to create a sense of order and balance in the layout while also ensuring that the cards are not too crowded or too far apart.

Proportions

Excellent designs have elements of different sizes that fit nicely together to create coherent proportions. Yet, feel free to make certain parts of your larger for emphasis and to break the monotony. Here is an example:

1. Your website will display different content types, such as articles, videos, and images. To create a visually pleasing layout, highlighting the most important content and guiding the user's eye toward it - lets play with proportions.
2. First, we can make the article section larger than the other sections, if articles are the most important type of content on a website.
3. Within the article section, we can implement different proportions to create emphasis. Let's make the headline larger than the body text to make it stand out and attract the user's eye. We can also use larger images to break up the text and create a visual magnet.
4. In contrast, we can use smaller proportions for less critical content, such as images or videos. We can display thumbnail images smaller than full-size images and use tinier video players for video content.

Using proportion play for various content, we create a hierarchy of importance and guide the user's eye to the most crucial elements of the website.

Color adherence

The best designers understand the importance of achieving color accessibility. Not every person experiences color in the same way. So, your product should cater to everyone. Fortunately, we have our self-made free solution - Toolel.com colour palette. Here is how you can apply color adherence in UI/UX design for better accessibility:

Let's say we have a mobile app that uses different colors to indicate different types of information. We might use green to show success, red to indicate errors, and yellow for warnings.

However, to make sure that the app is accessible to people with color vision deficiencies, such as color blindness, we should take a different approach. What are the other methods of color adherence?

• Use color combinations with sufficient contrast. Colors that are too similar can be difficult for people with color vision deficiencies to distinguish. We can use color blends with enough contrast to ensure the information is easily distinguishable. The simplest example is to use black text on a white background for maximum contrast.
• Use color-blindness simulators to test your design. Some online tools and plugins simulate different types of color blindness, which can help see how their designs look to people with different color vision deficiencies. These tools allow to identify potential issues and adjust their design.
• Use alternative methods to indicate information. Instead of relying solely on color to display information, we can use alternative methods, such as icons or text labels, instead of just color to show success, errors, or notifications.

Gestalt principles

These are laws that explain how our eyes perceive visual elements. We apply them to ensure our software has an orderly and recognizable user interface. Here is the basis of gestalt UI / UX design principles:

1. Law of proximity: objects that are close together appear to be grouped together. Use this UI/UX design principle to group related items, such as buttons or menu items, together. For example, a navigation menu with related items grouped closely together will be easier for users to scan and find what they are looking for.
2. Law of similarity: group together objects that are similar in shape, color, or texture. This principle is great for creating a consistent visual language. Using consistent colors, fonts, and iconography throughout an app or website can help users quickly recognize and understand different elements.
3. Law of closure: our brains tend to complete incomplete shapes or patterns. Use this principle to create visually appealing designs that draw the user's eye to important elements. For example, a partially obscured button or image can create a sense of intrigue and encourage users to click and explore further.
4. Law of continuity: we tend to see continuous patterns and lines. Create a sense of flow and hierarchy in designs by using continuous lines or color gradients, creating a sense of movement. Guide the user's eye toward important information.
5. Law of symmetry: satisfy users' brains with symmetrical objects and design elements. Make balanced and visually appealing layouts. For example, aligning elements to a grid or using symmetrical shapes can create a sense of order and clarity.

Gestalt is about creating aesthetically pleasing and intuitive designs by focusing on figure-ground, similarity, proximity, common regions, continuity, closure, and focal points.

Consistency over fanciness in most cases

Humans prefer order over complexity, achieved through consistent design. It's about elements of your product working similarly and having a coherent look. This way, users will quickly pick up on how to use it.

This, of course, eliminates confusion and, most importantly, saves time and money.

Should not "reinvent the wheel"

Reinventing the wheel refers to the process of developing something that has already been developed, tested, and proven to be effective. It harms the overall development, can be time-consuming, costly, and often leads to unnecessary complexity. Instead of starting from scratch, it's more efficient to use existing solutions and frameworks, saving time and reducing the risk of introducing bugs or other issues.

Our designers and developers should take advantage of established best practices, patterns, and frameworks, which have been developed and refined over time. This is one of the ways we ensure consistency across multiple projects development. Also, it is easier for users to learn and use new software developed by TigerTeamX.

Avoid "tunnel vision"

Not seeing the bigger picture and being narrow-minded are examples of tunnel vision. While designing your software, it's not only about focusing on completion but thinking about other effects.

Keep it simple

Sometimes good ideas become useless due to over-complication. So it's often best to keep everything as simple as possible.

You may also find helpful the 10 Reasons Why Software Developer Is a Great Career Choice. This a great article that will change your mindset upon developing. Give it a try.