UI-UX Design Archieven – BROWN DΞSIGN https://browndesign.nl/project-category/ui-ux-design/ Branding, Graphic Design, Webdesign, Development Tue, 15 Apr 2025 09:05:56 +0000 nl-NL hourly 1 https://wordpress.org/?v=6.9.1 https://browndesign.nl/wp-content/uploads/cropped-Brown_ico_v2-7-32x32.png UI-UX Design Archieven – BROWN DΞSIGN https://browndesign.nl/project-category/ui-ux-design/ 32 32 Web Event Concept https://browndesign.nl/project/web-event-concept/ Thu, 27 Mar 2025 17:30:51 +0000 https://browndesign.nl/?post_type=project&p=4928

The app is versioned on GitHub and hosted on Netlify, ensuring smooth collaboration and clean code that meets industry standards. Beyond functionality, I focused on visual impact by integrating exclusive NFTs, conceptualized, designed, and minted by me. These digital assets, available on OpenSea, highlight my ability to merge traditional web development with blockchain innovation, adding a collectible element to the app.

More than just enhancing the UI, these NFTs open the door to future possibilities and paving the way for scalable Web3 applications. This project showcases expertise in building high-performance web solutions combined with blockchain.

Web Event Concept

A web app with custom NFT integration, built using React, Next.js, Vite, and Chakra User Interface css.

High-performance web application combined with blockchain.

Added some extra's

Here’s where it gets interesting: I didn’t just build the app, I integrated my own custom NFTs. I designed a collection of NFTee's, listed them on OpenSea, and added a real-world twist. When you buy one, you don’t just get a digital collectible; you also receive a matching physical t-shirt delivered to your door. It’s a unique combination of web development, and blockchain innovation.

Visit project
Visit OpenSea
Splash screen Web Event Concept

home screen

Splash screen Web Event Concept

ADD event

Splash screen Web Event Concept

EDIT event

Splash screen Web Event Concept

delete event

]]> WeightWorks https://browndesign.nl/project/weightworks/ Wed, 26 Mar 2025 13:10:54 +0000 https://browndesign.nl/?post_type=project&p=4998

The solution
We achieved a complete lightweight rebrand for WeightWorks, backed by calm waves. We upgraded the new website with an optimized user experience and CMS integration. One of the main features of the website is the Quick scan. A custom builds BMI calculator.

Build simple, made smart

We build a custom BMI calculator from the ground up using HTML, CSS, and JavaScript, keeping it straightforward and user-friendly. In just three quick steps, you get your BMI figured out. We added extra options—you can choose health conditions, for a sharper, more personal result. At the end, leave your email, and we’ll send your score right to you. Behind the scenes, we hooked it up to a database so the client can follow up with anyone who used it.

Visit project
WeightWorks
]]> IT Local https://browndesign.nl/project/it-local/ Thu, 06 Mar 2025 17:06:28 +0000 https://browndesign.nl/?post_type=project&p=4934

The solution
IT Local's marketing- and communication manager came up with the 'happy-with-it' pay-off. IT doesn't need to be boring; it can be fun. To illustrate that feeling, we added the happy-fellow. A simple outlined blue fellow that pops up now and then.

We redesigned IT Local's brand with an updated logo, a new color scheme, and several corporate designs. We also refreshed and built a responsive new website and an easy-to-use CMS. The page builder tool is built into the WordPress environment and packed with design assets. Their SEO company can quickly create landings pages, all in line with their new corporate branding.

IT Local logo

Logo design

IT Local logo construction

Logo construction with clear space

Happy Guy construction

Happy-fellow construction
The construction of the happy-guy consists entirely of circles and two rounded rectangles. By connecting them, we created the arms and legs. Using the app logo's shape, we designed the body.

Quiz screen Garbage Go iPhone

Happy-fellow on blue background

IT Local Sinterklaas strooitas

Treat bag with a Saint Nicholas happy-fellow.

What we did

We've defined an extensive branding guideline, including visual identity guidelines, usage of images, font family, color schemes, buttons, and stationery elements.

After the happy-with-it pay-off was approved, we created the happy fellow. The happy-fellow reinforces the 'Happy with it' feeling and contributes to the positioning of IT Local. You can use him or her as a striking element in your expression or as a watermark.

Visit website
IT Local Homepage
IT Local branding guidelines
IT Local branding guidelines
]]> Garbage Go Microgame https://browndesign.nl/project/garbage-go-microgame/ Sat, 01 Mar 2025 17:21:17 +0000 https://browndesign.nl/?post_type=project&p=4926

The solution
Becoming aware of cleaning up your mess starts from childhood. That's why we focused on the 8-year-old and developed a Pokemon-Go-style microgame. Instead of catching Pokemons, you'll catch garbage monsters. By playing the microgame, the youth becomes aware of what litter does to the environment. The purpose of this microgame is that you play it with your teacher and classmates. 

Quiz element
We built a learning mechanism into the gameplay so that the player knows what kind of waste it is and how harmful it is to nature. We hope they don't throw their garbage away by creating awareness. You can earn credits by scanning and cleaning up trash. You can play a quiz to learn more and earn extra credits. Whoever has the most points is number one in the ranking! Unique to this game is that children stay motivated to play it.

Keep playing
The build-in-game elements and mechanisms keep the player motivated and triggered to score points by playing the app. And points lead to rankings and high scores. And what child doesn't want to have the highest score?

Scan result screen garbage Go

Garbage Go connects the virtual world with the real world. It's educational, and it's fun!

Logo Garbage Go

Logo design Inspired by Pokemon Go.

Splash screen Garbage Go Microgame

Splash screen design

Login screen Garbage Go Microgame

Login screen design

Dashboard Garbage Go Microgame

Dashboard screen design

Quiz screen Garbage Go Microgame

Quiz screen design

What we did

This non-profit project is developed with Michiel Brongers, Han Houtekamer, and Tom Tol. After a brainstorming session, we came up with the Pokemon Go concept. We invented the name pay-off and created the logo, color scheme, typography, and user interface-experience design. As our target audience is 8-year old, we focused on creating a simple, challenging, and fun interface, so they keep motivated to play the game.

Services we provided for this project:

Scan result screen garbage Go
Logo Garbage Go

The dirtiest game of the Netherlands!

]]> TBB Supercars https://browndesign.nl/project/tbb-supercars/ Fri, 28 Feb 2025 14:11:56 +0000 https://browndesign.nl/?post_type=project&p=5080
TBB Supercars needed an easy-to-use and easy-to-navigate website. We worked closely with TBB Supercars and developed a responsive, easy-to-use interface. The interface is clean and intuitive. When designing the website, we focused on mobile-first.
TBB Supercars Search-filter-find

Search, filter, and find your supercar in seconds.

Logo TBB Supercars

Logo Try Before you Buy Supercars
Vertical design

Image

Home screen design

Image

Selected cars screen design

]]> Socios The Money Network https://browndesign.nl/project/socios-the-money-network/ Tue, 18 Feb 2025 09:33:05 +0000 https://browndesign.nl/?post_type=project&p=5008
We designed the Socios Money Network logo, color scheme, corporate designs, and social media branding. We also created some exclusive merchandise to give to potential cliënts.
Socios creditcard
Socios Influencer instagram linkedin marketing folder

What we did

We've defined a branding guideline, including visual identity guidelines, font family, stationery elements, and color schemes. We choose gold and blue-green to symbolize the color of money. We also supported Socios's social media campaign to launch the money network app.

Services we provided for this project:

Socios Instagram launch campaign

Socios, is so much more than a social network. It's a money network!

Socios Instagram launch campaign
Socios Instagram launch campaign
Socios logo concept

Logo concept
We started with a circle (network). Added a dollar symbol, turned it 90º, and combined it. Finally, we simplified the shape and added an inner circle. At last, we tweaked it to make it look more like an 'S' to refer to Socios.

Socios logo construction

Logo construction
with clear space

Socios Network logo design

App icon design

Socios Network logo design
Socios logo concept
Socios cap
]]>