Webapp idea and design

I thought I would talk about this webapp I'm creating with a few friends who have a lot of knowledge in terms of coding. The purpose of this project was to make a webapp inspired by google keep but to work in a preferred writing structure I use. I started this project with a simple design which I could easily design using html and css, instead of writing it in the pre-set format I used my preferred languages which are Jade and Sass, both compile the code I write, into html and css.

Here is the design I created:

I drew the layout, heavily inspired by an application called Discord which is a popular service mostly among Gamers, which is its target audience. Aside from the gamers, there are loads of people who use it as a general chat service or in my case, an artist social media platform because of all the functionalities embedded into the application. The layout is not the only aspect that has inspired me from this application, i found functions such as the find section and chat server icons a very interesting function to include in the webapp I want to create. I've looked at how they developed Discord and found out that it is a webapp, designed the way I plan to go about making my webapp.

I could go into detail as to how it functions but that would make this blog to long, although I do want to continue blogging about this project as it is personal to me and is a practice in coding and animation, I'm planning on learning how to animate using code as I really like the turnout of most webapp animations.

I also wanted to create an animated representation of the login screen which I animated on animate cc. But I don't think I will be including it in the application as it does not need it, but here is the animation.

As you can see in the above animation, I would have loved to include this in the design of the webapp but it's not needed for the webapp, even though I would have liked to learn how to translate it into code. but I guess I'll learn by including it in the designs through functions in the webapp, for example when something is clicked on such as a settings button, it will open a window up in the app of settings, done by creating the effect of fade in and slide up.

update 20/04/17

here are a few screenshots of the webapp:

and here is a live view of the webapp:

I've learned a lot in the process of creating this webapp and I hope to progress creating it and learning more about how to animate objects in the app. here is a link to the Github page I made for it https://github.com/bashpro/Notebook-webapp