---
# System prepended metadata

title: UX/UI Design Overview

---

# UX/UI Design Overview

These are where I go to get my inspiration for app design


### Preface
_________



**Definitions**

Dapp - Shenanigan is a DApp (Decentralized Application) meaning our primary app functionality runs through the Ethereum blockchain

Smart Contracts - Smart contracts are chunks of code living on the blockchain. They control key functionalities like donations, prediction market, minting cards, trading cards, etc.

Tokens and NFTs - Using Smart Contracts, Ethereum can create subcurrencies called tokens. Tokens can be broken up into two types, fungible and non-fungible. Fungible Tokens are token that can be exhanged 1-1, like dollar. NFTs (or non-fungible tokens) can each hold a different value per token, i.e. trading cards, deeds to houses, video game items.



**Design Story**
I made a design story. This is basically to describe the feng shue of the app to help orient 
designers in the style of the app.

__Shenanigan the videogame__
Shenanigan is the future for athletes. Athletes enter a brand new world when they use our app; a world where athletes are paid to improve instead of used as advertisements.  Shenanigan should look like a videogame. The athletes "enter the matrix" when they use it. Its a completely new paradigm for them, so, with that, shenanigan uses a pretty whacky color pallette and lots of neon to display a playful version of a futuristic game world. Think like tron. We imagine ourselves as an 80s arcade, in 2080. 

__________________

### Design

while you learn, app design is just glorified copy-paste. Find something that looks good (and is FUNCTIONAL!) and make it your own. Once you get the hang of it, you can start reading about proper UX/UI design principles, such as minimum clicks.

**Links**


dribble is a good place to look when you need inspiration
https://dribbble.com/

There are a few subreddits I frequent to see whats people are doing. I usually sort by top this month.

https://www.reddit.com/r/userexperience/
https://www.reddit.com/r/UXDesign/
https://www.reddit.com/r/reactnative/
https://www.reddit.com/r/web_design/
reddit.com/r/reactjs/

This guy does youtube tutorials, but he has a lot of cool designs and can show what is possible with html,css
https://www.youtube.com/channel/UCTcH04SRuyedaSuuQVeAcdg

AdobeXD is free. Find your own AdobeXD tutorials! its much more powerful than what I use it for. You can do animations, scrolling, the whole nine. GOOGLE IS YOUR BEST FRINED. If you don't know how to do something, google it.


**Where to start**

Start with wireframes. I kinda jumped ahead straight into designing the app due to lack of time. Wireframes are a great way to quickly iterate on ideas. Here is an example wireframe from our dApp
![](https://i.imgur.com/7PvTXOw.png)

and another example
![](https://i.imgur.com/q4uxgxa.png)


Share these wireframes with us after you make them. At Shenanigan, we work in public and we all riff off each others ideas so don't be shy.

**Adding color**

Once the wireframes are done. The real work begins. Time to make it look pretty. I can't really help you here, it'll just be trial and error till you get a good eye for it



## That's it WOOOOOOOO!!

