<pre>
  PIP: PIP-0034A
  Title: Website UI/UX Redesigns
  Type: UI/UX Design
  Impact: None
  Author(s): Appditto <hello@appditto.com>
  Copyright: Appditto, 2019 (All Rights Reserved)
  License: GNU Public License
  Comments-URI: https://discord.gg/sJqcgtD (channel #pip-0034A)
  Status: Draft
  Created: 2019-06-17
</pre>

## Summary
It is proposed to redesign the user interface and the user experience of [pascalcoin.org][pascal-website], [explore.pascalcoin.org][pascal-explorer], and [freepasa.org][free-pasa]. The redesign will adhere to existing code-structure/frameworks.

## Motivation
The websites of a cryptocurrency often serve as a gateway to bring potential new users by introducing them to the project. They also act as a news source and a wiki for existing users to learn more about the cryptocurrency. The content of these websites often seen by the new users as an initial way of judging the potential of the given project. Because of these reasons, the websites need to be intriguing, understandable and beautiful while clearly communicating the core values and the products that the cryptocurrency offers.

The ever-growing popularity of cryptocurrencies and the competition have been heavily affecting the design of the websites of these projects. It can be said that the importance of having a unique website that intrigues new users to learn more about the cryptocurrency is becoming more and more important. The websites that are created with already existing, overused popular themes, standard fonts, and pre-made assets can give the first impression that the project doesn't have a "character" but it is rather "just another cryptocurrency website".

## Specification
The goal of the website redesigns is to achieve the following:

* Redesign the aforementioned websites to make them more intriguing, understandable and beautiful
* Create and implement various animation to make the websites more interactive and appealing
* Create and implement various illustrations to make the websites more approachable and easier to digest
* Define a color scheme, a font choice, and a font weight & size hierarchy for the website to make it consistent all around

The designs and the assets created will be released under [**CC0**][creative-commons] license, or any license suggested by PascalCoin Foundation.

## Components
The redesign is comprised of the following components:
* [**Sketch**][sketch-app] and [**Figma**][figma-app] files that will include the design in its entirety including all the pages and assets(such as illustrations). These will be shared in case another designer wants to edit the design in the future. [**Sketch**][sketch-app] and [**Figma**][figma-app] are chosen because they are the most popular and familiar design tools for creating user interfaces.
* Source files for the animations, which will be made in [**After Effects**][ae-app]. These will be shared in case another animator wants to edit the animations in the future. [**After Effects**][ae-app] is chosen because it is the industry standard for creating animations and it can export an animation in various formats like GIF, MP4, WebM or as a vector animation which can be played by [**Lottie**][lottie] (a library that renders vector animations for web and native apps).
* A PDF file that will showcase the design in its entirety including all the possible pages in all the possible screen sizes (mobile, tablet and desktop).
* A PDF guide file which will include: All the hex codes for the colors, styles, font families, weights & sizes, margins & paddings.
* The illustrations in SVG, PDF and PNG formats.
* The animations in GIF, MP4, WebM and JSON (*vector animation, for the use with [**Lottie**][lottie]*) formats.

## Background
We encourage you to check out some other websites and applications that have been designed and developed by us. These are listed below:

| Link | Description |
| :----- | :------ |
[natrium.io](https://natrium.io) | NANO Wallet, developed with Flutter. Available on the iOS App Store and Google Play Store (Open Source)
[blaise wallet](https://appditto.com/blaisevideo) | Blaise Wallet, which we are currently developing for PascalCoin
[kalium.banano.cc](https://kalium.banano.cc) | BANANO Wallet, developed with Flutter. Available on the iOS App Store and Google Play Store (Open Source)
[monkeytalks.cc](https://monkeytalks.cc) | Monkey Talks - open source on-chain chat and faucet for BANANO developed with Vue and Python (Open Source)
[nanopaperwallet.com](https://nanopaperwallet.com) | Paper wallet generator for NANO (Open Source)
[bananominer.com](https://bananominer.com) | Folding@Home faucet for BANANO
[banano.cc](https://banano.cc) | BANANO's website
[appditto.com](https://appditto.com) | Appditto website
[loopelf.com](https://loopelf.com) | Loop animations for neat projects
[sinenur.art](https://sinenur.art) | A website for an aspiring industrial designer
[animations](https://www.2dimensions.com/a/yekta/files/recent/all) | Various flare animations created by us

### Natrium
![Natrium](resources/PIP-0034A/natrium.jpg)

### Banano Website
![Banano Website](resources/PIP-0034A/banano-website.png)

### Blaise Wallet
![Blaise Wallet](resources/PIP-0034A/blaise.jpg)

### Banano Miner
![Banano Miner](resources/PIP-0034A/banano-miner.png)

## Rationale
The approach outlined in this design proposal is to create an intriguing, easily understandable and beautiful UI/UX for the PascalCoin websites, which will be a better gateway to introduce new users to PascalCoin, while creating a more enjoyable experience for the existing users of the website.

## Backwards Compatibility
This change is backward compatible and does not require a hard-fork activation. 

## Links
1. [Sketch][sketch-app]
2. [Figma][figma-app]
3. [After Effects][ae-app]
4. [Lottie][lottie]

[creative-commons]: https://creativecommons.org/share-your-work/public-domain/cc0/
[sketch-app]: https://www.sketch.com
[figma-app]: https://www.figma.com
[ae-app]: https://www.adobe.com/products/aftereffects.html
[illustrator-app]: https://www.adobe.com/products/illustrator.html
[lottie]: https://airbnb.design/lottie/
[pascal-website]: https://pascalcoin.org
[pascal-explorer]: https://explore.pascalcoin.org
[free-pasa]: https://freepasa.org
