Week 8: Visual design

Looking at the competitor analysis I undertook last week, I went back. I scoped out their visual design methods, assessing what they had chosen to keep the charity sector feel apparent in their products.

1. Identity and tonality of the design

When considering UX design, the process begins with wireframes, followed by UI design. Various factors are considered before applying colours and fonts to ensure a pleasurable user experience. Wireframing establishes structure and flow, while UI design focuses on factors like the target audience and brand identity. Colour selection aims to evoke desired emotions, and font choice enhances readability and reflects the app’s personality. By carefully considering these elements, the final application of colours and fonts contributes to a visually appealing and cohesive design, providing an enjoyable user journey.

Factors such as the six principles of design need to be considered when designing a UX experience; these are as follows:

Unity and Harmony 🎶 Unity and harmony refer to a design’s visual cohesion and consistency. This means creating a consistent style, colour palette, and typography across all design elements in UX and UI. This helps users understand and navigate the interface more efficiently, creating a sense of trust and professionalism in the product.

Balance ⚖️ Balance refers to the distribution of visual elements in a design. In UX and UI, this means balancing the weight and placement of elements such as buttons, text, and images to create a visually appealing and functional design. Imbalanced designs can confuse users and make it harder to navigate the interface.

Hierarchy 📜 Hierarchy refers to the organisation and prioritisation of information in a design. In UX and UI, this means using visual cues such as size, colour, and placement to indicate the relative importance of different elements on a screen. A clear hierarchy helps users quickly and easily find the information they need.

Scale and Proportion 📏 Scale and proportion refer to the size and relationship of visual elements in a design. Consistent scale and proportion help to create a cohesive and visually pleasing design. This means choosing appropriate sizes and proportions for buttons, icons, and other interface elements in UX wireframes that can be forwarded to UI designs.

Dominance and Emphasis 💪 Dominance and emphasis refer to the use of visual weight to draw attention to some aspects of a design. In UX and UI, this means using techniques such as colour, size, and placement to highlight buttons, calls to action elements, or other design elements that users need to interact with. Effective use of dominance and emphasis can improve the usability of a design.

Similarity and Contrast 🎨 Similarity and contrast refer to visual similarities and differences to create interest and clarity in a design. In UX and UI, this means using colour, shape, and other visual elements to group similar items together and differentiate between different types of content. Using similarity and contrast helps users understand and navigate the interface more quickly.

2. colour theory

Colour is an essential part of UX/UI design. When done well, it allows for the proper accessibility contrast, pleasing design elements and robust features that aid users through their journey.

For my UI design, I chose colours using the Adobe colour wheel tool; I chose a full spectrum of colours, as you can see; this shall allow for bold accents to be added to the design and good contrast levels for accessibility.

Adobe’s colour wheel tool allows you to match the colours with their complimentary matches

Within Figma, I started creating my UI kit for the prototype; I set out the colours I wanted to use and ready my font styles for the design. I also made a logo within Adobe Illustrator using the colours I had set out.

It is essential to ready your workspace in Figma so that you can seamlessly provide consistency in your designs, a more advanced method would be to agree on a colour palette that has meaning behind each colour, so for example, if your design has warnings or error messages, you can create a colour chart to display what kind of colour should be applied to said warnings or error messages. Again this adds to the consistency of the design and aids users in achieving a more pleasant user experience via design.

3. Font choice

It’s important to choose fonts that match the data you shall be displayed; I shall be incorporating the font named Ofelia as it is clear and pleasant to look at; the font choice in UI design plays a crucial role in enhancing user experience. Fonts impact readability, legibility, and overall aesthetics. Serif fonts, for example, can evoke a sense of tradition and formality, while sans-serif fonts often give a modern and clean impression. Selecting fonts that align with the brand’s identity and target audience is essential. Furthermore, font size, spacing, and line height must be carefully considered to ensure readability across different devices and screen sizes. A well-chosen font can enhance the overall user experience, evoke desired emotions, and create a consistent visual identity for the product.

I was going to use Helvetica at first for my prototype as this is one of my favourite styles, and I feel it allows for clarity and style in equal measure. Still, upon looking through Adobe’s font finder site, I got massively sidetracked by the font named “Ofelia Text” designed by Daniel Sabino. From Blackletra

I decided to use this for headers and Helvetica for the main body font; Ofelia Test felt a little more modern and gave the designs a flow that Helvetica couldn’t manage.

Conclusion


In conclusion, selecting the correct visual design elements for the UX prototype of a charity app while aiming to project a friendly feel involves careful consideration of various factors. Despite the app’s focus on relaying financial information, it was essential to ensure that the design remained appealing and approachable, particularly to younger users who might otherwise perceive it as a traditional banking app. The choice of fonts and colours was critical in achieving this delicate balance.

The design created an inclusive and user-friendly experience by opting for an inviting, easily readable font style. Selecting a friendly and warm colour palette, combining vibrant and soothing tones, contributed to the app’s visual appeal and evoked positive emotions. This approach helped establish an environment that encouraged engagement and trust.

Furthermore, the design employed visual elements, such as illustrations and iconography, that complemented the friendly feel and conveyed the charitable nature of the app. These elements enhanced the overall aesthetic and served as visual cues to guide users through the app’s functionality, making navigating intuitive and enjoyable.

Choosing the correct visual design elements for the UX prototype demanded a thoughtful balance between presenting financial information and creating an appealing experience for younger users. By considering the desired friendly feel, font choices, colour palettes, and visual elements, the design aimed to project an approachable and trustworthy image, aligning with the app’s purpose as a charity platform.

Leave a Reply

Your email address will not be published. Required fields are marked *