Boring or Too Busy?

Sarah Saka
3 min readNov 9, 2020

This weeks UI challenge was a little confusing. Gave no indication as to which type of design I was designing a back round for. I did In fact remember something from a passed project, and i’m here to tell that story…

DailyUIChallenge

I remember a few months ago I was designing a back ended software for a Construction company, with 4 other designers. The client was constantly unhappy, wanted new ideas and more modernization. We sat there for hours on hours thinking, how do we make a software Construction excel sheet more modern. As well as clean, simple and innovative. The client had specific instructions and our design process was restricted to specific colors and fonts. After many sleepless nights, we came up with idea to make an excel sheet seem more modern. The back round was the key to modernization.

Without Grid Design
With Grid Design

My design team and I added a grid-like design into the top header. There is a clear difference between the first photo without the grid design and the second with the grid design. It makes the excel sheet more modern and not as basic. (thats right I said basic, excel sheets are basic, we stare at them all day, we might as well try and design them to be prettier).

We designed the back-round of the entire page, a light blue-grey color, so the white grid design wouldn't overpower the excel sheet. The goal was to be minimal, so the grid design wouldn’t overweigh the excel sheet.

We applied some thinking as to why we would use a certain color for a specific part of the design, for example, we learned to apply hierarchy through the usage of color. It thoroughly helped us improve our design and it provided our design with a sense of balance in weight. Overall, our new iteration felt less gloomy and more modern.

We applied accessibility testing tools to the design. We contrast checked the colors we picked for the designs through Color Contrast Accessibility Validator (https://color.a11y.com/?wc3). It was a tool that I discovered through browsing the WCAG 2.0 guidelines and tool list. For this project, our stakeholders emphasized the importance of designing for accessibility. We looked into WCAG guidelines and standards. Something I learned from browsing through the guidelines was that I should not rely on color alone to convey information, I should consider using icons as well. An example of that (grabbed from WCAG):

--

--