# 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!!