Visualize It, Design It
Visual design for UI is an extensive process that incorporates color, typography, imagery and other necessary research to create a unified comp. “Design patterns are known as standard reference points, guides, templates that designers might use to solve a particular problem when designing a website or mobile app, so you do not have to reinvent the wheel every single time trying to solve a particular design problem” (Tomczyk). Design patterns are solutions that provide accessibility for designers. Although the user is of utmost importance, it’s also vital for the designer to properly execute their creative ideas.
When redesigning my app, Luna, I wanted to retain the space-like theme while also providing a more minimal take compared to the original app, which was a little clunky and all over the place. In general, finding the right color palette and typography is a difficult task, as there are a variety to choose from. When it comes to colors, it’s also recommended to have a contrast between some of them to provide distinction between elements for better legibility. However, the contrasts should not be conflicting and should unify the design instead. Applying your design in greyscale prior to adding color is a safe way to determine this and other factors. “Designing in grayscale before adding color simplifies the most complex element of visual design– and forces you to focus on spacing and laying out elements” (Kennedy). Using greyscale helps the designer prioritize special elements and the overall layout, making it easier to utilize your color palette. As mentioned before, since I wanted to retain the original app’s theme, I used shades or purples, grays and blues with hints of white. The use of cool tones will also provide a more ambient environment for the user as well, since these colors successfully contrast without clashing whatsoever.
There are so many fonts out there with different purposes. It’s up to us to figure out which ones work with our concept. I decided on Bree for the primary font, which is a sans-serif typeface with slight curvature. This matches with the theme due to the typeface’s aesthetics. Generally, the typeface shouldn’t be too complicated so that it can be universally visible on all types of device screens. “Sites with a very distinct personality can use very distinct fonts. But for most UI design, you just want something clean and simple” (Kennedy). From smartphones to laptops, there are so many types of screen sizes. Having a simpler font typically helps with legibility, which is why fonts like Helvetica and Monserrat are so well used. Despite being a more curved typeface, Bree is able to show up well on screen due to its relatively simple structure.
From researching color palettes to finding the right typography, there are extensive tasks that are necessary for a successful visual design process. It may seem tedious to some individuals, but to others it can also be enjoyable. Regardless, the amount of effort put into this research will be fulfilling because, then, you’ll confidently be able to know and acknowledge that the correct elements were included.