BEATS

Development Process: A colleague from university was working on his final project and asked for my help to develop the UI for his system. He wanted to have the system working initially for Desktops and had some low-fidelity wireframes.

On a first phase I tried to develop a branding for the system. As it is related to security and it also needs to transmit formality, I chose black to transmit these qualities; for accents and contrast, I took advantage of the green that is present on the department logo he sent me, as green can transmit quality. Elaborated some variation of shades on these colors, found white shades for text, red and yellow shades suitable for buttons, checked text colors against backgrounds for contrast accessibility and voilá, all set on choosing colors.

As for the fonts, I chose Source Sans Pro for body copy, which is an all-round font designed to work well in user interfaces. Sans-Serif fonts usually do well when analyzing legibility in screens, and Sans Pro does just that. For headings and subheadings, I chose Montserrat, which is a Sans-Serif font that evoques the beauty of the urban typography of the middle 20th century. This font pairs well with Sans Pro, maintains the great legibility aspect and gives the project just a small art/humanity touch.

Another note on the project branding, we were lacking a logo to really set the project identity, so I came up with an idea compund by the name of the project written with the Orbitron font to evoque futuristic/sci-fi feelings and a padlock in the contrast color to evoque security.

Next, I worked on the low-fidelity wireframes to evolve them into the high-fidelity wireframes. You can see some samples of these below or check the link to the Figma file on the bottom of the page. To finish up, after they got approved by the stakeholders, the final step was to implement and deploy the project. For this task I used Next.js, React, Typescript, Tailwind and Framer-motion.

Conclusions: Prior to this project, I had only made some tweaks to other project’s UIs and had never developed something from the scratch. This time I had the opportunity to get my first professional experience on UI Design and really develop something from 0 on my own, from design to implementation.

To wrap up, on a personal note, I can only say that I get pretty entertained when I’m working with either designing an UI or developing Front-end and time flies. I had a lot of fun and enjoyed the whole proccess, and hope the next opportunities would be as fun as this one was!