Wireframe, User center board & Sketches

A little observation on Awwwards and FWA, trying to look at how other designers plan their flow, their user experience and layout. Later I trying a few attempts on a sketchbook, figuring it out what flow works better. So I plan and these are the final digitize wireframe which I think is possible to work with, maybe there will be changes because there will always have space for improvement. 

Site Map 

This is simple to understand right? 

1) Open landing page

2) Autoplay introduction on the main page

3) Click create and you will be in the selection of the 4 Nightmare

4) You can customize your own nightmare with (4 Background, 2 colours, 2 music)

5) Later submit the design you made or you go back edit again 

6) A little explanation on why you are asked to design your own nightmare

7) You can go to the gallery to view other people's nightmare or to read further information about the dream you customize.

Wireframe

On this section the only thing I am still unsure is how I am going to show the gallery, should I use stars to let user click in (right side)? Or maybe to let them use the traditional way (left side)? Maybe I should start my user test before moving further

User Flow 

Sketches 

This is the sketches for customization page, I used up some time and a few attempts to figure out how to customize without covering away from the animation. I also did go to Behance, Dribbble and Pinterest to find inspiration before coming up with this. Also did sketches for the 4 nightmares imagining how will it be presented to the user, by using my art direction. 

User Center board 

The second ver of my user centreboard because of the changed platform to "progressive web app" for mobile. 

Programs for drawing

For a beginner like myself to use Photoshop to illustrate the things I wanted is hard, I find that Photoshop's brush and the interface are very messy for me to use and adapt. Photoshop is more of using it to edit the photos or other such, I just can't get familiar with the things I need to use. SO... I try to find drawing software that is easy for me to work with and useable in photoshop. 

The result:

 Krita is a great drawing software
- Is free to use
- Is for professional artist to use 
- User-friendly interface
- Most IMPORTANT part it supports photoshop means I can open it in photoshop if I need anything there.
- Can create and customize your own brush 

MediBand Paint Pro another wonderful software

- Is free to use

- User-friendly interface

- Is more for Manga but the amount of brush is amazing 

- Also, the recent updates on shown it supports Photoshop

- Can create and customize your own brush 

I try out with MediBand to draw and test both of the software, with the brush, shortcut keys and such. A little test just for fun: