Thursday, 4 May 2017

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


Fanart Dva (overwatch) WIP

I started this drawing on February 11th which was close to the end of the games current event where we received new skins for the character, one character I've been desperately for to get a skin was Dva, so I decided to draw a fanart of her new skin, plus I have been wanting to draw her for a while. So I present the process I've done so far which in total has taken over 2 months to even be close to finishing.


Rough li


I felt as if the drawing needed a bit extra so I decided to add her mech in the example below: 


Drawing the mech was difficult so I started with the basic shapes I could see,


starting to add more as I'm doing other work,


 The mech is roughly drawn and needs a cleanup,


Clean up and base colours were added,


Rough background,


Background lined and slightly finished colouring,


Added shading, lighting and highlights on the mech and Dva.

And so this is as far as I have gotten for this drawing, I've probablly spent around 16 hours creating this, and yet it is still not done as I've got to sort out the backgrounds which I hope to finish after deadlines. but I've learned a lot throughout colouring this peice, I've never drawn a mech and coloured it in so that was an experince I wont forget!

I've been posting these screen shots on some discord servers, and Alymew absoulutly cant wait to see the final drawing as she also wants to promote this drawing on her youtube channel. she also mentioned the other day that she would love to do some voice acting for future animations and she provided me with  voice acting showreel she created which is super awesome.