Styling and UI Implementation

Implementing the UI Design Kiko had designed was fun and challenging, and at the same time important to bring out the overall look and feel of what we wanted to project.

Mai was incredibly fast at whipping up a functioning prototype of the app using React and her code had little tips commented in between to make things a bit easier to understand 😀

An example of Mai’s helpful comments!

What we had was a sort-of functioning prototype that we wanted to make an experience out of. A lot of feedback that we got was to do with how a viewer didn’t really know what was going on, and that there was too much information.

This is what our main text looked like before and after styling, adding titles and colors.

Before and after styling

We also had to work with different libraries used to implement certain components such as the globe or the country dropdown. This required further learning about their individual libraries to understand how to modify their properties.

External components with their own styling whims

Since we had chosen Figma as our design platform, it was a simple task to copy styling properties and apply them to the components created by Mai. Sorry, did I say simple?Here is what the properties look like in Figma, and here is how they look like in React

Properties in Figma compared to properties in React

In fact, there are certain things I am still struggling with to get the styling as close to our design as possible. The CTA section is a good example of that: Comparing Figma Design vs our implementation of the dropdown:

Pixel perfection is WAY overrated

And then there’s the globe, that randomly selects its own saturation despite numerous attempts to force it to remain dark. The final implementation of the articles is something we have struggled with the most given our chosen components:

So it’s not exactly the same, but our concept evolved to show a word cloud.

So while a lot of things worked, a lot of things are still taking shape. Finally, here is the sandbox to play around with: GeoBubble Filters